feat: File download done.

src/module/alertModal.js

@@ -290,6 +290,8 @@ export async function uploadloader() {
 /**
  * Rename Modal
  * @param { function } rename
+ * @param { string } type
+ * @param { number } id
  */
 export async function renameModal(rename, type, id) {
   let fileName = '';
@@ -316,3 +318,33 @@ export async function renameModal(rename, type, id) {
   // 清空欄位
   fileName = '';
 }
+/**
+ * Delete File
+ * @param { string } files 有關連的檔案
+ * @param { string } type
+ * @param { number } id
+ */
+export async function deleteFileModal(files, type, id) {
+  const filesStore = FilesStore();
+
+  const result = await Swal.fire({
+    title: 'ARE YOU SURE?',
+    html: '<div class=" w-[227px] text-left mx-auto space-y-1"><p>All related files will be deleted.</p><p>List of file(s) to delete: </p><ul class="list-disc ml-6"><li>[log] Taipower 001</li><li>[filter] Filter0401 - Taipower 001 Filter0401 - Taipower 001 Filter0401 - Taipower 001</li><li>[rule] 1224 - Taipower 001</li></ul></div>',
+    icon: 'warning',
+    iconColor: '#FF3366',
+    reverseButtons:true,
+    confirmButtonText: 'Yes',
+    confirmButtonColor: '#FF3366',
+    showCancelButton: true,
+    cancelButtonText: 'No',
+    cancelButtonColor: '#94a3b8',
+    customClass: customClass,
+  })
+  if(result.isConfirmed) {
+    // filesStore.deleteFile(type, id);
+  } else if(result.dismiss === 'cancel') {
+    // 什麼都不做
+  } else if(result.dismiss === 'backdrop') {
+    // 什麼都不做
+  }
+};

src/stores/files.js

@@ -153,7 +153,7 @@ export default defineStore('filesStore', {
         const response = await axios.post(api, data);
         this.uploadLogId =  response.data.id;
         Swal.close(); // 關閉進度條
-        await this.rename(); // 改檔名
+        this.rename(); // 改檔名
         await uploadSuccess();
         this.$router.push({name: 'Files'});
       } catch(error) {
@@ -164,6 +164,8 @@ export default defineStore('filesStore', {
           Swal.close(); // 關閉進度條
           apiError(error, 'Failed to upload the log files.');
         }
+      } finally {
+        // await this.rename();
       }
     },
     /**
@@ -203,6 +205,72 @@ export default defineStore('filesStore', {
       } catch(error) {
         apiError(error, 'Failed to rename.');
       }
+    },
+    /**
+     * Delete file
+     * @param { string } type log | filter | log-check | filter-check
+     * @param { number } id
+     */
+    async deleteFile(type, id) {
+      let api;
+
+      switch (type) {
+        case 'log':
+          api = `/api/logs/${id}`;
+          break;
+        case 'filter':
+          api = `/api/filters/${id}`;
+          break;
+        case 'log-check':
+          api = `/api/log-checks/${id}`;
+          break;
+        case 'filter-check':
+          api = `/api/filter-checks/${id}`;
+          break;
+      }
+      try {
+        const response = await axios.delete(api);
+      } catch(error) {
+        apiError(error, 'Failed to delete.');
       }
     },
+    /**
+     * Download file as CSV
+     * @param { string } type log | filter | log-check | filter-check
+     * @param { number } id
+     * @param { string } fileName
+     */
+    async downloadFileCSV(type, id, fileName) {
+      let api;
+
+      switch (type) {
+        case 'log':
+          api = `/api/logs/${id}/csv`;
+          break;
+        case 'filter':
+          api = `/api/filters/${id}/csv`;
+          break;
+        case 'log-check':
+          api = `/api/log-checks/${id}/csv`;
+          break;
+        case 'filter-check':
+          api = `/api/filter-checks/${id}/csv`;
+          break;
+      }
+      try {
+        const response = await axios.get(api);
+        const csvData = response.data;
+        const blob = new Blob([csvData], { type: 'text/csv' });
+        const url = window.URL.createObjectURL(blob);
+        const link = document.createElement('a');
+
+        link.href = url;
+        link.download = `${fileName}.csv`;
+        link.click();
+        window.URL.revokeObjectURL(url);
+      } catch(error) {
+        apiError(error, 'Failed to delete.');
+      }
+    },
+  },
 })

src/views/Files/index.vue

@@ -31,8 +31,8 @@
           <li v-show="isActive !== null" class="animate-fadein">
             <ul class="flex justify-center items-center gap-x-4 px-4 py-1 rounded-full bg-neutral-200 text-neutral-700">
               <li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary" @click="rename">edit_square</span></li>
-              <li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary">download</span></li>
+              <li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary" @click="download">download</span></li>
-              <li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary">delete</span></li>
+              <li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary" @click="deleteFile">delete</span></li>
             </ul>
           </li>
           <li class="cursor-pointer" @click="switchListOrGrid = false">
@@ -55,8 +55,8 @@
             <template #body="slotProps">
               <ul class="opacity-0 group-hover:opacity-100  flex justify-end items-center gap-x-2 text-neutral-700">
                 <li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary" @click="rename(slotProps.data.type, slotProps.data.id, 'list-hover')">edit_square</span></li>
-                <li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary">download</span></li>
+                <li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary" @click="download(slotProps.data.type, slotProps.data.id, 'list-hover', slotProps.data.name)">download</span></li>
-                <li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary">delete</span></li>
+                <li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary" @click="deleteFile(slotProps.data.type, slotProps.data.id, 'list-hover')">delete</span></li>
               </ul>
             </template>
           </Column>
@@ -107,7 +107,7 @@
   import IconVector from '@/components/icons/IconVector.vue';
   import IconList from '@/components/icons/IconList.vue';
   import IconGrid from '@/components/icons/IconGrid.vue';
-  import { renameModal } from '@/module/alertModal.js';
+  import { renameModal, deleteFileModal } from '@/module/alertModal.js';
 
   export default {
     data() {
@@ -119,6 +119,7 @@
         selectedFile: null, // 右鍵選單 item
         selectedType: null,
         selectedId: null,
+        selecteName: null,
         items: [
           {
             label: 'Rename',
@@ -128,6 +129,7 @@
           {
             label: 'Download',
             icon: 'download',
+            command: this.download,
           },
           {
             separator: true // 分隔符號
@@ -135,7 +137,7 @@
           {
             label: 'Delete',
             icon: 'delete',
-
+            command: this.deleteFile,
           },
         ],
       }
@@ -242,6 +244,7 @@
       onRightClick(event, file) {
         this.selectedType = file.type;
         this.selectedId = file.id;
+        this.selecteName = file.name;
         this.$refs.fileRightMenu.show(event)
       },
       /**
@@ -251,6 +254,7 @@
       onRightClickTable(event) {
         this.selectedType = event.data.type;
         this.selectedId = event.data.id;
+        this.selecteName = event.data.name;
         this.$refs.fileRightMenu.show(event.originalEvent)
       },
       /**
@@ -261,6 +265,7 @@
       onGridCardClick(file, index) {
         this.selectedType = file.type;
         this.selectedId = file.id;
+        this.selecteName = file.name;
         this.isActive = index;
       },
       /**
@@ -276,6 +281,42 @@
         }
         renameModal(this.store.rename, this.selectedType, this.selectedId);
       },
+      /**
+       * Delete file
+       * @param {string} type
+       * @param {number} id
+       * @param {string} source hover icon
+       */
+      deleteFile(type, id, source) {
+        // 先取得 id 打 Delete Daile API
+        if(type && id && source === 'list-hover') {
+          this.selectedType = type;
+          this.selectedId = id;
+        }
+        console.log(this.selectedId);
+        // let srt = '';
+        // data.forEach(i => {
+        //   let content = `<li>[${type}] ${fileName}<li>`;
+        //   srt += content;
+        // });
+        // console.log('srt:', srt);
+        // deleteFileModal(id, srt);
+        deleteFileModal();
+      },
+      /**
+       * Download file as CSV
+       * @param {string} type
+       * @param {number} id
+       * @param {string} source hover icon
+       */
+      download(type, id, source, name) {
+        if(type && id && source === 'list-hover' && name) {
+          this.selectedType = type;
+          this.selectedId = id;
+          this.selecteName = name;
+        }
+        this.store.downloadFileCSV(this.selectedType, this.selectedId, this.selecteName);
+      }
     },
     mounted() {
       this.isLoading = true;