feat: Files Delete File done.

src/module/alertModal.js

@@ -253,7 +253,6 @@ export async function uploadSuccess() {
  */
 export async function uploadConfirm(fetchData) {
   const filesStore = FilesStore();
-
   const result = await Swal.fire({
     title: 'ARE YOU SURE?',
     html: 'After uploading, you won’t be able to modify labels.',
@@ -266,13 +265,10 @@ export async function uploadConfirm(fetchData) {
     cancelButtonText: 'No',
     cancelButtonColor: '#94a3b8',
     customClass: customClass,
-  })
+  });
+
   if(result.isConfirmed) {
     filesStore.uploadLog(fetchData);
-  } else if(result.dismiss === 'cancel') {
-    // 什麼都不做
-  } else if(result.dismiss === 'backdrop') {
-    // 什麼都不做
   }
 };
 /**
@@ -326,10 +322,10 @@ export async function renameModal(rename, type, id) {
  */
 export async function deleteFileModal(files, type, id) {
   const filesStore = FilesStore();
-
+  let htmlText = files.length === 0 ? '' : `<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">${files}</ul></div>`;
   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>',
+    html: htmlText,
     icon: 'warning',
     iconColor: '#FF3366',
     reverseButtons:true,
@@ -339,12 +335,9 @@ export async function deleteFileModal(files, type, id) {
     cancelButtonText: 'No',
     cancelButtonColor: '#94a3b8',
     customClass: customClass,
-  })
+  });
+
   if(result.isConfirmed) {
-    // filesStore.deleteFile(type, id);
-  } else if(result.dismiss === 'cancel') {
-    // 什麼都不做
-  } else if(result.dismiss === 'backdrop') {
-    // 什麼都不做
+    filesStore.deleteFile(type, id);
   }
 };

src/module/apiError.js

@@ -1,6 +1,6 @@
 import router from "@/router/index.js";
 import loadingStore from '@/stores/loading.js';
-import pinia from '@/stores/main.js'
+import pinia from '@/stores/main.js';
 import {useToast} from 'vue-toast-notification';
 import 'vue-toast-notification/dist/theme-sugar.css';
 import axios from "axios";

src/stores/files.js

@@ -3,7 +3,11 @@ import axios from "axios";
 import moment from 'moment';
 import apiError from '@/module/apiError.js';
 import Swal from 'sweetalert2';
-import { uploadFailedFirst, uploadFailedSecond, uploadloader, uploadSuccess } from '@/module/alertModal.js'
+import { uploadFailedFirst, uploadFailedSecond, uploadloader, uploadSuccess } from '@/module/alertModal.js';
+import pinia from '@/stores/main.js';
+import loadingStore from '@/stores/loading.js';
+
+const loading = loadingStore(pinia);
 
 export default defineStore('filesStore', {
   state: () => ({
@@ -26,6 +30,7 @@ export default defineStore('filesStore', {
     allUploadDetail: null,
     uploadLogId: null,
     uploadFileName: null,
+    allDependentsData: null,
   }),
   getters: {
     /**
@@ -45,6 +50,12 @@ export default defineStore('filesStore', {
      */
     uploadDetail: state => {
       return state.allUploadDetail;
+    },
+    /**
+     * Get dependents of files data
+     */
+    dependentsData: state => {
+      return state.allDependentsData;
     }
   },
   actions: {
@@ -205,6 +216,35 @@ export default defineStore('filesStore', {
         apiError(error, 'Failed to rename.');
       }
     },
+    /**
+     * Get the Dependents of the files
+     * @param { string } type log | filter | log-check | filter-check
+     * @param { number } id
+     */
+    async getDependents(type, id) {
+      let api;
+
+      switch (type) {
+        case 'log':
+          api = `/api/logs/${id}/dependents`;
+          break;
+        case 'filter':
+          api = `/api/filters/${id}/dependents`;
+          break;
+        case 'log-check':
+          api = `/api/log-checks/${id}/dependents`;
+          break;
+        case 'filter-check':
+          api = `/api/filter-checks/${id}/dependents`;
+          break;
+      }
+      try {
+        const response = await axios.get(api);
+        this.allDependentsData = response.data;
+      } catch(error) {
+        apiError(error, 'Failed to get Dependents of the files.');
+      }
+    },
     /**
      * Delete file
      * @param { string } type log | filter | log-check | filter-check
@@ -213,6 +253,7 @@ export default defineStore('filesStore', {
     async deleteFile(type, id) {
       let api;
 
+      loading.isLoading = true;
       switch (type) {
         case 'log':
           api = `/api/logs/${id}`;
@@ -229,8 +270,11 @@ export default defineStore('filesStore', {
       }
       try {
         const response = await axios.delete(api);
+        await this.fetchAllFiles();
       } catch(error) {
         apiError(error, 'Failed to delete.');
+      } finally {
+        loading.isLoading = false;
       }
     },
     /**
@@ -249,12 +293,14 @@ export default defineStore('filesStore', {
         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;
+        // case 'log-check':
+        //   api = `/api/log-checks/${id}/csv`;
+        //   break;
+        // case 'filter-check':
+        //   api = `/api/filter-checks/${id}/csv`;
+        //   break;
+        default:
+          return;
       }
       try {
         const response = await axios.get(api);

src/views/Files/index.vue

@@ -146,10 +146,11 @@
       const store = filesStore();
       const allMapDataStore = AllMapDataStore();
       const loadingStore = LoadingStore();
+      const { dependentsData } = storeToRefs(store);
       const { createFilterId, baseLogId } = storeToRefs(allMapDataStore);
       const { isLoading } = storeToRefs(loadingStore);
 
-      return { store, allMapDataStore, createFilterId, baseLogId, isLoading }
+      return { store, dependentsData, allMapDataStore, createFilterId, baseLogId, isLoading }
     },
     components: {
       IconDataFormat,
@@ -287,21 +288,34 @@
        * @param {number} id
        * @param {string} source hover icon
        */
-      deleteFile(type, id, source) {
-        // 先取得 id 打 Delete Daile API
+      async deleteFile(type, id, source) {
+        let srt = '';
+        let data = [];
+
+        // 判斷是否來自 hover icon 選單
         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();
+        // 取得相依性檔案
+        await this.store.getDependents(this.selectedType, this.selectedId);
+        if(this.dependentsData.length !== 0) {
+          data = [...this.dependentsData];
+          data.forEach(i => {
+            switch (i.type) {
+              case 'log-check':
+                i.type = 'rule';
+                break;
+              case 'filter-check':
+                i.type = 'rule';
+                break;
+            }
+            let content = `<li>[${i.type}] ${i.name}</li>`;
+            srt += content;
+          });
+        }
+        deleteFileModal(srt, this.selectedType, this.selectedId);
+        srt = '';
       },
       /**
        * Download file as CSV