From b644c00f59d1fffdeb09da0c58784f7dd332e284 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 16 Jan 2021 22:15:48 +0100
Subject: [PATCH] Add view image modal for image attachments

---
 src/components/modal/modal.vue                |  4 ++-
 src/components/tasks/partials/attachments.vue | 34 +++++++++++++++++--
 src/styles/components/attachments.scss        | 11 +++++-
 3 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index 8664fa21..fa0866bb 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -1,8 +1,9 @@
 <template>
 	<transition name="modal">
 		<div class="modal-mask">
-			<div class="modal-container">
+			<div class="modal-container" @click.prevent.stop="$emit('close')">
 				<div class="modal-content">
+					<slot>
 					<div class="header">
 						<slot name="header"></slot>
 					</div>
@@ -13,6 +14,7 @@
 						<button @click="$emit('close')" class="button is-danger is-inverted noshadow">Cancel</button>
 						<button @click="$emit('submit')" class="button is-success noshadow">Do it!</button>
 					</div>
+					</slot>
 				</div>
 			</div>
 		</div>
diff --git a/src/components/tasks/partials/attachments.vue b/src/components/tasks/partials/attachments.vue
index b0f8cc35..bd47bdba 100644
--- a/src/components/tasks/partials/attachments.vue
+++ b/src/components/tasks/partials/attachments.vue
@@ -24,7 +24,11 @@
 		</progress>
 
 		<div class="files" v-if="attachments.length > 0">
-			<div :key="a.id" class="attachment" v-for="a in attachments">
+			<a
+				class="attachment"
+				v-for="a in attachments"
+				:key="a.id"
+				@click="viewOrDownload(a)">
 				<div class="filename">{{ a.file.name }}</div>
 				<div class="info">
 					<p class="collapses">
@@ -53,7 +57,7 @@
 						</a>
 					</p>
 				</div>
-			</div>
+			</a>
 		</div>
 
 		<a
@@ -86,6 +90,15 @@
 			<p slot="text">Are you sure you want to delete the attachment {{ attachmentToDelete.file.name }}?<br/>
 				<b>This CANNOT BE UNDONE!</b></p>
 		</modal>
+
+		<transition name="modal">
+			<modal
+				@close="() => {showImageModal = false; attachmentImageBlobUrl = null}"
+				v-if="showImageModal"
+			>
+				<img :src="attachmentImageBlobUrl" alt=""/>
+			</modal>
+		</transition>
 	</div>
 </template>
 
@@ -107,6 +120,9 @@ export default {
 
 			showDeleteModal: false,
 			attachmentToDelete: AttachmentModel,
+
+			showImageModal: false,
+			attachmentImageBlobUrl: null,
 		}
 	},
 	props: {
@@ -199,6 +215,20 @@ export default {
 					this.showDeleteModal = false
 				})
 		},
+		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.attachmentService.getBlobUrl(attachment)
+					.then(url => {
+						this.attachmentImageBlobUrl = url
+					})
+			} else {
+				this.downloadAttachment(attachment)
+			}
+		},
 	},
 }
 </script>
diff --git a/src/styles/components/attachments.scss b/src/styles/components/attachments.scss
index a862d686..23fecac3 100644
--- a/src/styles/components/attachments.scss
+++ b/src/styles/components/attachments.scss
@@ -7,11 +7,20 @@
     margin-bottom: 1rem;
 
     .attachment {
-      margin-bottom: .75rem;
+      margin-bottom: .5rem;
+      display: block;
+      transition: background-color $transition;
+      border-radius: $radius;
+      padding: .5rem;
+
+      &:hover {
+        background-color: $grey-lightest;
+      }
 
       .filename {
         font-weight: bold;
         margin-bottom: .25rem;
+        color: $dark;
       }
 
       .info {