feat: File download done.

2024-01-15 17:18:45 +08:00
parent c64d243de2
commit 9753ed535d
3 changed files with 150 additions and 9 deletions
--- a/src/module/alertModal.js
+++ b/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') {
+    // 什麼都不做
+  }
+};
--- a/src/stores/files.js
+++ b/src/stores/files.js
@@ -151,9 +151,9 @@ export default defineStore('filesStore', {
      uploadloader(); // 進度條
      try {
        const response = await axios.post(api, data);
-        this.uploadLogId = response.data.id;
+        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.');
+      }
+    },
  },
 })
--- a/src/views/Files/index.vue
+++ b/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">delete</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" @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">delete</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" @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;