feat: download file

src/main/webapp/src/components/FileMenu.vue

@@ -1,38 +1,60 @@
 <script setup lang="ts">
 import { useConfigurationStore } from '@/stores/configurationStore.ts';
 import { Tabs } from '@/types/enums/Tabs.ts';
+import { downloadFileOrBlob } from '@/utils/fileUtils.ts';
 import { storeToRefs } from 'pinia';
 import { useI18n } from 'vue-i18n';
 
 const configurationStore = useConfigurationStore();
-const { isInfo, currentTab, isConfirmation } = storeToRefs(configurationStore);
+const { loadFile } = configurationStore;
+const { currentFile, isInfo, currentTab, isConfirmation } = storeToRefs(configurationStore);
 
 const isDev = import.meta.env.DEV;
 
 const { t } = useI18n();
 
-defineProps<{
+const props = defineProps<{
+  fileId?: number;
   size?: string | number;
 }>();
 
-const information = (): void => {
+const getFile = async (): Promise<void> => {
+  if (!props.fileId) return;
+  await loadFile(props.fileId);
+};
+
+const information = async (): Promise<void> => {
+  await getFile();
   currentTab.value = Tabs.Information;
   isInfo.value = true;
 };
 
-const share = (): void => {
+const share = async (): Promise<void> => {
+  await getFile();
   currentTab.value = Tabs.Share;
   isInfo.value = true;
 };
 
-const histories = (): void => {
+const histories = async (): Promise<void> => {
+  await getFile();
   currentTab.value = Tabs.Histories;
   isInfo.value = true;
 };
 
-const exportOnNextloud = (): void => {};
+const exportOnNextloud = async (): Promise<void> => {
+  await getFile();
+};
 
-const download = (): void => {};
+const download = async (): Promise<void> => {
+  await getFile();
+  if (!currentFile.value) return;
+  downloadFileOrBlob(
+    new File([currentFile.value.blob], currentFile.value.title, {
+      type: `application/${currentFile.value.associatedApp.type};charset=utf-8`,
+    }),
+    `${currentFile.value.title}.${currentFile.value.associatedApp.extension}`,
+  );
+};
 </script>
 
 <template>
@@ -76,13 +98,7 @@ const download = (): void => {};
         rounded="xl"
         @click="exportOnNextloud"
       />
-      <v-list-item
-        v-if="isDev"
-        prepend-icon="fas fa-download"
-        :title="t('menu.item.download')"
-        rounded="xl"
-        @click="download"
-      />
+      <v-list-item prepend-icon="fas fa-download" :title="t('menu.item.download')" rounded="xl" @click="download" />
       <v-divider class="my-2" />
       <v-list-item
         prepend-icon="fas fa-trash"

src/main/webapp/src/components/layouts/FilesLayout.vue

@@ -17,7 +17,6 @@ const { xs } = useDisplay();
 const { VITE_API_URI } = import.meta.env;
 
 const configurationStore = useConfigurationStore();
-const { loadFile } = configurationStore;
 const { search, isGrid } = storeToRefs(configurationStore);
 
 defineProps<{
@@ -104,7 +103,7 @@ const sortBy = useSessionStorage<Array<any>>(`${app.slug}.sort-by`, [{ key: 'tit
       <span :key="key">{{ t('information.duration', { duration: dateToDuration(item.editionDate) }) }}</span>
     </template>
     <template v-slot:item.actions="{ item }">
-      <file-menu @click="loadFile(item.id)" />
+      <file-menu :file-id="item.id" />
     </template>
     <template v-slot:loading>
       <v-skeleton-loader type="table-row@6" />

src/main/webapp/src/utils/fileUtils.ts

@@ -0,0 +1,20 @@
+const downloadFileOrBlob = (fileOrBlob: File | Blob, filename: string): void => {
+  const link = document.createElement('a');
+
+  link.href = URL.createObjectURL(fileOrBlob);
+  link.download = filename;
+
+  document.body.appendChild(link);
+
+  link.dispatchEvent(
+    new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
+      view: window,
+    }),
+  );
+
+  document.body.removeChild(link);
+};
+
+export { downloadFileOrBlob };

src/main/webapp/src/views/AppView.vue

@@ -57,7 +57,7 @@ const goBack = () => (window.history.length > 2 ? router.back() : router.push({
               @click="star"
             />
             <v-btn v-if="isDev" icon="fas fa-share-nodes" size="small" @click="share" />
-            <file-menu size="small" @click="loadFile(currentFile.id)" />
+            <file-menu size="small" />
           </template>
         </v-toolbar>
         <tldraw-editor