Extract img to FilePreview component

Now images will also be displayed when they are uploaded initially

frontend/src/components/tasks/partials/attachments.vue

@@ -27,15 +27,21 @@
 			v-if="attachments.length > 0"
 			class="files"
 		>
-			<!-- FIXME: don't use a for element that wraps other links / buttons
+			<table class="table table-striped">
-				Instead: overlay element with button that is inside.
+				<tr
-			-->
-			<a
 					v-for="a in attachments"
 					:key="a.id"
-				class="attachment"
+					class="clickable"
 					@click="viewOrDownload(a)"
 				>
+					<td class="preview-column">
+						<FilePreview
+							v-if="canPreview(a)"
+							class="attachment-preview"
+							:model-value="a"
+						/>
+					</td>
+					<td>
 						<div class="filename">
 							{{ a.file.name }}
 							<span
@@ -67,12 +73,6 @@
 									{{ a.file.mime }}
 								</span>
 							</p>
-					<img
-						v-if="canPreview(a)"
-						:src="blobUrls.get(a.id)"
-						style="height: 20vh; min-height: 100px"
-						alt=""
-					>
 							<p>
 								<BaseButton
 									v-tooltip="$t('task.attachment.downloadTooltip')"
@@ -109,7 +109,9 @@
 								</BaseButton>
 							</p>
 						</div>
-			</a>
+					</td>
+				</tr>
+			</table>
 		</div>
 
 		<x-button
@@ -174,7 +176,7 @@
 </template>
 
 <script setup lang="ts">
-import {ref, shallowReactive, computed, onMounted} from 'vue'
+import {ref, shallowReactive, computed} from 'vue'
 import {useDropZone} from '@vueuse/core'
 
 import User from '@/components/misc/user.vue'
@@ -194,6 +196,7 @@ import {useCopyToClipboard} from '@/composables/useCopyToClipboard'
 import {error, success} from '@/message'
 import {useTaskStore} from '@/stores/tasks'
 import {useI18n} from 'vue-i18n'
+import FilePreview from '@/components/tasks/partials/file-preview.vue'
 
 const {
 	task,
@@ -228,20 +231,6 @@ function downloadAttachment(attachment: IAttachment) {
 
 const filesRef = ref<HTMLInputElement | null>(null)
 
-const blobUrls = ref<Map<number, string>>(new Map())
-
-onMounted(() => {
-	fetchBlobUrls(attachments.value as IAttachment[])
-})
-
-async function fetchBlobUrls(attachments: IAttachment[]) {
-	for (const attachment of attachments) {
-		const blobUrl = await attachmentService.getBlobUrl(attachment)
-		if (canPreview(attachment)) {
-			blobUrls.value.set(attachment.id, blobUrl)
-		}
-	}
-}
 function uploadNewAttachment() {
 	const files = filesRef.value?.files
 
@@ -458,6 +447,18 @@ async function setCoverImage(attachment: IAttachment | null) {
 	}
 }
 
+.preview-column {
+	max-width: 75px;
+}
+
+.attachment-preview {
+	max-height: 75px;
+}
+
+.clickable {
+	cursor: pointer;
+}
+
 .is-task-cover {
 	background: var(--primary);
 	color: var(--white);

frontend/src/components/tasks/partials/file-preview.vue

@@ -0,0 +1,34 @@
+<template>
+	<img
+		:src="blobUrl"
+		alt="Attachment preview"
+	>
+</template>
+
+<script setup lang="ts">
+import {type PropType, ref, shallowReactive, watchEffect} from 'vue'
+import AttachmentService from '@/services/attachment'
+import type { IAttachment } from '@/modelTypes/IAttachment'
+
+const props = defineProps({
+	modelValue: {
+		type: Object as PropType<IAttachment>,
+		default: undefined,
+	},
+})
+
+const attachmentService = shallowReactive(new AttachmentService())
+const blobUrl = ref<string | undefined>(undefined)
+
+watchEffect(async () => {
+	if (props.modelValue) {
+		blobUrl.value = await attachmentService.getBlobUrl(props.modelValue)
+	}
+})
+</script>
+
+<style scoped lang="scss">
+img {
+	border-radius: 0.5rem;
+}
+</style>