From 2e609441737bef7d1da0b780bfd23d83d56a8636 Mon Sep 17 00:00:00 2001
From: Frederik Pytlick <frederikpyt@protonmail.com>
Date: Tue, 17 Oct 2023 09:53:14 +0200
Subject: [PATCH] #27 - Added the abillity to download blobs

---
 src/components/item/file/File.vue | 40 ++++++++++++++++++++++++++-----
 src/lang/da.ts                    |  1 +
 src/lang/en.ts                    |  1 +
 3 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/src/components/item/file/File.vue b/src/components/item/file/File.vue
index 11a3b4b..5063863 100644
--- a/src/components/item/file/File.vue
+++ b/src/components/item/file/File.vue
@@ -2,9 +2,10 @@
 	<div class="relative">
 		<!-- File -->
 		<a
-			href="#"
+			href="javascript:void(0)"
 			class="block max-w-sm rounded-lg border border-gray-200 bg-white p-6 shadow hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700"
 			v-on:contextmenu.prevent="fileContextMenu?.openMenu"
+			@click.prevent="downloadFile"
 		>
 			<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
 				{{ modelValue.name }}
@@ -30,6 +31,14 @@
 						>{{ t('fileBrowser.file.action.share') }}</a
 					>
 				</li>
+				<li>
+					<a
+						href="javascript:void(0)"
+						@click="downloadFile"
+						class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+						>{{ t('fileBrowser.file.action.download') }}</a
+					>
+				</li>
 			</ul>
 			<div class="py-2">
 				<a
@@ -51,15 +60,21 @@
 </template>
 
 <script setup lang="ts">
+// Lib
 import { ref, type PropType } from 'vue';
-import { FileClass } from '@lib/items/files';
-import ContextMenu from '@components/base/contextMenu.vue';
-import BaseConfirmModal, { ConfirmModalType } from '@components/base/confirmModal.vue';
-import EditFileModal from './EditModal.vue';
-import ShareItemModal from '../ShareItemModal.vue';
+
+// Helpers
 import { t } from '@lib/i18n';
+
+// Components
+import ContextMenu from '@components/base/contextMenu.vue';
+
+// Stores
 import { removeItem } from '@stores/items';
 
+// File
+import { FileClass } from '@lib/items/files';
+
 const fileContextMenu = ref<InstanceType<typeof ContextMenu>>();
 
 defineEmits(['update:modelValue']);
@@ -70,6 +85,19 @@ const props = defineProps({
 	},
 });
 
+function downloadFile() {
+	window.open(props.modelValue.blobUrl, '_blank');
+
+	fileContextMenu.value?.closeMenu();
+}
+
+/*
+ * Modals
+ */
+import BaseConfirmModal, { ConfirmModalType } from '@components/base/confirmModal.vue';
+import EditFileModal from './EditModal.vue';
+import ShareItemModal from '../ShareItemModal.vue';
+
 const deleteFileModal = ref<InstanceType<typeof BaseConfirmModal>>();
 async function deleteFile() {
 	try {
diff --git a/src/lang/da.ts b/src/lang/da.ts
index b2a2ea3..995f107 100644
--- a/src/lang/da.ts
+++ b/src/lang/da.ts
@@ -55,6 +55,7 @@ export default {
 				edit: 'Omdøb fil',
 				share: 'Del',
 				delete: 'Slet',
+				download: 'Download',
 				confirmDelete: 'Er du sikker på, at du vil slette denne fil?',
 			},
 		},
diff --git a/src/lang/en.ts b/src/lang/en.ts
index 593d002..d44d266 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -55,6 +55,7 @@ export default {
 				edit: 'Rename file',
 				share: 'Share',
 				delete: 'Delete',
+				download: 'Download',
 				confirmDelete: 'Are you sure you want to delete this file?',
 			},
 		},