From c2dfa9be83523a0615a82cf2cb5b64ef49e61c03 Mon Sep 17 00:00:00 2001
From: Elscrux <nickposer2102@gmail.com>
Date: Thu, 11 Apr 2024 00:45:47 +0200
Subject: [PATCH] Proof of concept for image preview

---
 .../components/tasks/partials/attachments.vue | 28 +++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/tasks/partials/attachments.vue b/frontend/src/components/tasks/partials/attachments.vue
index 7aeabd531..03c6994c6 100644
--- a/frontend/src/components/tasks/partials/attachments.vue
+++ b/frontend/src/components/tasks/partials/attachments.vue
@@ -67,6 +67,12 @@
 							{{ 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')"
@@ -168,7 +174,7 @@
 </template>
 
 <script setup lang="ts">
-import {ref, shallowReactive, computed} from 'vue'
+import {ref, shallowReactive, computed, onMounted} from 'vue'
 import {useDropZone} from '@vueuse/core'
 
 import User from '@/components/misc/user.vue'
@@ -222,6 +228,20 @@ 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
 
@@ -260,13 +280,17 @@ async function deleteAttachment() {
 const attachmentImageBlobUrl = ref<string | null>(null)
 
 async function viewOrDownload(attachment: IAttachment) {
-	if (SUPPORTED_IMAGE_SUFFIX.some((suffix) => attachment.file.name.endsWith(suffix))) {
+	if (canPreview(attachment)) {
 		attachmentImageBlobUrl.value = await attachmentService.getBlobUrl(attachment)
 	} else {
 		downloadAttachment(attachment)
 	}
 }
 
+function canPreview(attachment: IAttachment): boolean {
+	return SUPPORTED_IMAGE_SUFFIX.some((suffix) => attachment.file.name.endsWith(suffix))
+}
+
 const copy = useCopyToClipboard()
 
 function copyUrl(attachment: IAttachment) {