feat: feat-attachments-script-setup (#2358)

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/2358
Reviewed-by: konrad <k@knt.li>
Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>

src/components/tasks/partials/attachments.vue

@@ -8,19 +8,19 @@
 		</h3>
 
 		<input
+			v-if="editEnabled"
 			:disabled="attachmentService.loading || undefined"
 			@change="uploadNewAttachment()"
 			id="files"
 			multiple
-			ref="files"
+			ref="filesRef"
 			type="file"
-			v-if="editEnabled"
 		/>
 		<progress
+			v-if="attachmentService.uploadProgress > 0"
 			:value="attachmentService.uploadProgress"
 			class="progress is-primary"
 			max="100"
-			v-if="attachmentService.uploadProgress > 0"
 		>
 			{{ attachmentService.uploadProgress }}%
 		</progress>
@@ -42,7 +42,7 @@
 							<span v-tooltip="formatDateLong(a.created)">
 								{{ formatDateSince(a.created) }}
 							</span>
-							<user
+							<User
 								:avatar-size="24"
 								:user="a.createdBy"
 								:is-inline="true"
@@ -73,7 +73,7 @@
 						<BaseButton
 							v-if="editEnabled"
 							class="attachment-info-meta-button"
-							@click.prevent.stop="() => {attachmentToDelete = a; showDeleteModal = true}"
+							@click.prevent.stop="setAttachmentToDelete(a)"
 							v-tooltip="$t('task.attachment.deleteTooltip')"
 						>
 							{{ $t('misc.delete') }}
@@ -86,7 +86,7 @@
 		<x-button
 			v-if="editEnabled"
 			:disabled="attachmentService.loading"
-			@click="$refs.files.click()"
+			@click="filesRef?.click()"
 			class="mb-4"
 			icon="cloud-upload-alt"
 			variant="secondary"
@@ -97,7 +97,7 @@
 
 		<!-- Dropzone -->
 		<div
-			:class="{ hidden: !showDropzone }"
+			:class="{ hidden: !isOverDropZone }"
 			class="dropzone"
 			v-if="editEnabled"
 		>
@@ -110,13 +110,14 @@
 		</div>
 
 		<!-- Delete modal -->
-		<transition name="modal">
 		<modal
-				@close="showDeleteModal = false"
-				v-if="showDeleteModal"
+			v-if="attachmentToDelete !== null"
+			@close="setAttachmentToDelete(null)"
 			@submit="deleteAttachment()"
 		>
-				<template #header><span>{{ $t('task.attachment.delete') }}</span></template>
+			<template #header>
+				<span>{{ $t('task.attachment.delete') }}</span>
+			</template>
 			
 			<template #text>
 				<p>
@@ -125,63 +126,39 @@
 				</p>
 			</template>
 		</modal>
-		</transition>
 
-		<transition name="modal">
+		<!-- Attachment image modal -->
 		<modal
-				@close="
-					() => {
-						showImageModal = false
-						attachmentImageBlobUrl = null
-					}
-				"
-				v-if="showImageModal"
+			v-if="attachmentImageBlobUrl !== null"
+			@close="attachmentImageBlobUrl = null"
 		>
 			<img :src="attachmentImageBlobUrl" alt=""/>
 		</modal>
-		</transition>
 	</div>
 </template>
 
-<script lang="ts">
-import {defineComponent} from 'vue'
+<script setup lang="ts">
+import {ref, shallowReactive, computed} from 'vue'
+import {useDropZone} from '@vueuse/core'
+import {useStore} from '@/store'
 
-import AttachmentService from '../../../services/attachment'
-import AttachmentModel from '@/models/attachment'
-import type {IAttachment} from '@/modelTypes/IAttachment'
 import User from '@/components/misc/user.vue'
-import {mapState} from 'vuex'
-
-import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
-import { uploadFiles, generateAttachmentUrl } from '@/helpers/attachments'
-import {formatDate, formatDateSince, formatDateLong} from '@/helpers/time/formatDate'
-
 import BaseButton from '@/components/base/BaseButton.vue'
-import type { IFile } from '@/modelTypes/IFile'
-import { getHumanSize } from '@/helpers/getHumanSize'
 
-export default defineComponent({
-	name: 'attachments',
-	components: {
-		BaseButton,
-		User,
-	},
-	data() {
-		return {
-			attachmentService: new AttachmentService(),
-			showDropzone: false,
+import AttachmentService from '@/services/attachment'
+import type AttachmentModel from '@/models/attachment'
+import type {IAttachment} from '@/modelTypes/IAttachment'
 
-			showDeleteModal: false,
-			attachmentToDelete: AttachmentModel,
+import {formatDateSince, formatDateLong} from '@/helpers/time/formatDate'
+import {uploadFiles, generateAttachmentUrl} from '@/helpers/attachments'
+import {getHumanSize} from '@/helpers/getHumanSize'
+import {useCopyToClipboard} from '@/composables/useCopyToClipboard'
+import {error, success} from '@/message'
 
-			showImageModal: false,
-			attachmentImageBlobUrl: null,
-		}
-	},
-	props: {
+const props = defineProps({
 	taskId: {
-			required: true,
 		type: Number,
+		required: true,
 	},
 	initialAttachments: {
 		type: Array,
@@ -189,95 +166,79 @@ export default defineComponent({
 	editEnabled: {
 		default: true,
 	},
-	},
+})
 
-	setup(props) {
-		const copy = useCopyToClipboard()
+const attachmentService = shallowReactive(new AttachmentService())
 
-		function copyUrl(attachment: IAttachment) {
-			copy(generateAttachmentUrl(props.taskId, attachment.id))
+const store = useStore()
+const attachments = computed(() => store.state.attachments.attachments)
+
+function onDrop(files: File[] | null) {
+	if (files && files.length !== 0) {
+		uploadFilesToTask(files)
 	}
+}
 
-		return { copyUrl }
-	},
+const { isOverDropZone } = useDropZone(document, onDrop)
 
-	computed: mapState({
-		attachments: (state) => state.attachments.attachments,
-	}),
-	mounted() {
-		document.addEventListener('dragenter', (e) => {
-			e.stopPropagation()
-			e.preventDefault()
-			this.showDropzone = true
-		})
+function downloadAttachment(attachment: IAttachment) {
+	attachmentService.download(attachment)
+}
 
-		window.addEventListener('dragleave', (e) => {
-			e.stopPropagation()
-			e.preventDefault()
-			this.showDropzone = false
-		})
+const filesRef = ref<HTMLInputElement | null>(null)
+function uploadNewAttachment() {
+	const files = filesRef.value?.files
 
-		document.addEventListener('dragover', (e) => {
-			e.stopPropagation()
-			e.preventDefault()
-			this.showDropzone = true
-		})
-
-		document.addEventListener('drop', (e) => {
-			e.stopPropagation()
-			e.preventDefault()
-
-			let files = e.dataTransfer.files
-			this.uploadFiles(files)
-			this.showDropzone = false
-		})
-	},
-	methods: {
-		getHumanSize,
-		formatDate,
-		formatDateSince,
-		formatDateLong,
-
-		downloadAttachment(attachment: IAttachment) {
-			this.attachmentService.download(attachment)
-		},
-		uploadNewAttachment() {
-			if (this.$refs.files.files.length === 0) {
+	if (!files || files.length === 0) {
+		return
+	}
+
+	uploadFilesToTask(files)
+}
+
+function uploadFilesToTask(files: File[] | FileList) {
+	uploadFiles(attachmentService, props.taskId, files)
+}
+
+const attachmentToDelete = ref<AttachmentModel | null>(null)
+
+function setAttachmentToDelete(attachment: AttachmentModel | null) {
+	attachmentToDelete.value = attachment
+}
+
+async function deleteAttachment() {
+	if (attachmentToDelete.value === null) {
 		return
 	}
 
-			this.uploadFiles(this.$refs.files.files)
-		},
-		uploadFiles(files: IFile[]) {
-			uploadFiles(this.attachmentService, this.taskId, files)
-		},
-		async deleteAttachment() {
 	try {
-				const r = await this.attachmentService.delete(this.attachmentToDelete)
-				this.$store.commit(
+		const r = await attachmentService.delete(attachmentToDelete.value)
+		store.commit(
 			'attachments/removeById',
-					this.attachmentToDelete.id,
+			attachmentToDelete.value.id,
 		)
-				this.$message.success(r)
-			} finally{
-				this.showDeleteModal = false
+		success(r)
+		setAttachmentToDelete(null)
+	} catch(e) {
+		error(e)
 	}
-		},
-		async viewOrDownload(attachment) {
-			if (
-				attachment.file.name.endsWith('.jpg') ||
-				attachment.file.name.endsWith('.png') ||
-				attachment.file.name.endsWith('.bmp') ||
-				attachment.file.name.endsWith('.gif')
-			) {
-				this.showImageModal = true
-				this.attachmentImageBlobUrl = await this.attachmentService.getBlobUrl(attachment)
+}
+
+const attachmentImageBlobUrl = ref<string | null>(null)
+const SUPPORTED_SUFFIX = ['.jpg', '.png', '.bmp', '.gif']
+
+async function viewOrDownload(attachment: AttachmentModel) {
+	if (SUPPORTED_SUFFIX.some((suffix) => attachment.file.name.endsWith(suffix))	) {
+		attachmentImageBlobUrl.value = await attachmentService.getBlobUrl(attachment)
 	} else {
-				this.downloadAttachment(attachment)
+		downloadAttachment(attachment)
 	}
-		},
-	},
-})
+}
+
+const copy = useCopyToClipboard()
+function copyUrl(attachment: AttachmentModel) {
+	copy(generateAttachmentUrl(props.taskId, attachment.id))
+}
 </script>
 
 <style lang="scss" scoped>
@@ -286,10 +247,18 @@ export default defineComponent({
 		display: none;
 	}
 
-  .files {
-    margin-bottom: 1rem;
+	@media screen and (max-width: $tablet) {
+		.button {
+			width: 100%;
+		}
+	}
+}
 
-    .attachment {
+.files {
+	margin-bottom: 1rem;
+}
+
+.attachment {
 	margin-bottom: .5rem;
 	display: block;
 	transition: background-color $transition;
@@ -299,14 +268,15 @@ export default defineComponent({
 	&:hover {
 		background-color: var(--grey-200);
 	}
+}
 
-      .filename {
+.filename {
 	font-weight: bold;
 	margin-bottom: .25rem;
 	color: var(--text);
-      }
+}
 
-      .info {
+.info {
 	color: var(--grey-500);
 	font-size: .9rem;
 
@@ -320,17 +290,9 @@ export default defineComponent({
 			padding: 0 .25rem;
 		}
 	}
-      }
-    }
-  }
+}
 
-  @media screen and (max-width: $tablet) {
-    .button {
-      width: 100%;
-    }
-  }
-
-  .dropzone {
+.dropzone {
 	position: fixed;
 	background: rgba(250, 250, 250, 0.8);
 	top: 0;
@@ -373,7 +335,6 @@ export default defineComponent({
 			max-width: 300px;
 		}
 	}
-  }
 }
 
 .attachment-info-meta {

src/components/tasks/partials/comments.vue

@@ -212,8 +212,13 @@ const actions = computed(() => {
 	])))
 })
 
-function attachmentUpload(...args) {
-	return uploadFile(props.taskId, ...args)
+function attachmentUpload(
+	file: File,
+	onSuccess: (url: string) => void,
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	onError: (error: string) => void,
+) {
+	return uploadFile(props.taskId, file, onSuccess)
 }
 
 const taskCommentService = shallowReactive(new TaskCommentService())

src/helpers/attachments.ts

@@ -1,11 +1,10 @@
 import AttachmentModel from '@/models/attachment'
 import type {IAttachment} from '@/modelTypes/IAttachment'
-import type {IFile} from '@/modelTypes/IFile'
 
 import AttachmentService from '@/services/attachment'
 import { store } from '@/store'
 
-export function uploadFile(taskId: number, file: IFile, onSuccess: () => Function) {
+export function uploadFile(taskId: number, file: File, onSuccess: (url: string) => void) {
 	const attachmentService = new AttachmentService()
 	const files = [file]
 
@@ -15,7 +14,7 @@ export function uploadFile(taskId: number, file: IFile, onSuccess: () => Functio
 export async function uploadFiles(
 	attachmentService: AttachmentService,
 	taskId: number,
-	files: IFile[],
+	files: File[] | FileList,
 	onSuccess: Function = () => {},
 ) {
 	const attachmentModel = new AttachmentModel({taskId})

src/main.ts

@@ -58,7 +58,7 @@ app.directive('shortcut', shortcut)
 app.directive('cy', cypress)
 
 // global components
-import FontAwesomeIcon from './icons'
+import FontAwesomeIcon from '@/components/misc/Icon'
 import Button from '@/components/input/button.vue'
 import Modal from '@/components/misc/modal.vue'
 import Card from '@/components/misc/card.vue'

src/models/taskComment.ts

@@ -14,7 +14,7 @@ export default class TaskCommentModel extends AbstractModel<ITaskComment> implem
 	created: Date = null
 	updated: Date = null
 
-	constructor(data: Partial<ITaskComment>) {
+	constructor(data: Partial<ITaskComment> = {}) {
 		super()
 		this.assignData(data)
 

src/services/attachment.ts

@@ -4,7 +4,6 @@ import AbstractService from './abstractService'
 import AttachmentModel from '../models/attachment'
 
 import type { IAttachment } from '@/modelTypes/IAttachment'
-import type { IFile } from '@/modelTypes/IFile'
 
 import {downloadBlob} from '@/helpers/downloadBlob'
 
@@ -18,8 +17,10 @@ export default class AttachmentService extends AbstractService<AttachmentModel>
 	}
 
 	processModel(model: IAttachment) {
-		model.created = formatISO(new Date(model.created))
-		return model
+		return {
+			...model,
+			created: formatISO(new Date(model.created)),
+		}
 	}
 
 	useCreateInterceptor() {
@@ -52,7 +53,7 @@ export default class AttachmentService extends AbstractService<AttachmentModel>
 	 * @param files
 	 * @returns {Promise<any|never>}
 	 */
-	create(model: IAttachment, files: IFile[]) {
+	create(model: IAttachment, files: File[] | FileList) {
 		const data = new FormData()
 		for (let i = 0; i < files.length; i++) {
 			// TODO: Validation of file size