From 75bbcd07abf5a6a845886df7f8c8c032c4da45e9 Mon Sep 17 00:00:00 2001 From: chiayin Date: Wed, 17 Jan 2024 10:46:07 +0800 Subject: [PATCH] feat: Files Delete File done. --- src/module/alertModal.js | 21 +++------ src/module/apiError.js | 2 +- src/stores/files.js | 90 +++++++++++++++++++++++++++++---------- src/views/Files/index.vue | 38 +++++++++++------ 4 files changed, 102 insertions(+), 49 deletions(-) diff --git a/src/module/alertModal.js b/src/module/alertModal.js index 41ffa1d..0bc895e 100644 --- a/src/module/alertModal.js +++ b/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 ? '' : `

All related files will be deleted.

List of file(s) to delete:

`; const result = await Swal.fire({ title: 'ARE YOU SURE?', - html: '

All related files will be deleted.

List of file(s) to delete:

', + 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); } }; diff --git a/src/module/apiError.js b/src/module/apiError.js index cca8b1f..5121bfe 100644 --- a/src/module/apiError.js +++ b/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"; diff --git a/src/stores/files.js b/src/stores/files.js index 744e2b4..c4a9508 100644 --- a/src/stores/files.js +++ b/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,26 +30,33 @@ export default defineStore('filesStore', { allUploadDetail: null, uploadLogId: null, uploadFileName: null, + allDependentsData: null, }), getters: { - /** - * Get allFiles and switch files tag - */ - allFiles: state => { - let result = state.allEventFiles; - let data = state.switchFilesTagData; - let filesTag = state.filesTag; + /** + * Get allFiles and switch files tag + */ + allFiles: state => { + let result = state.allEventFiles; + let data = state.switchFilesTagData; + let filesTag = state.filesTag; - result = result.filter(file => data[filesTag].includes(file.fileType)); + result = result.filter(file => data[filesTag].includes(file.fileType)); - return result; + return result; }, - /** - * Get upload preview - */ - uploadDetail: state => { - return state.allUploadDetail; - } + /** + * Get upload preview + */ + 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); diff --git a/src/views/Files/index.vue b/src/views/Files/index.vue index d1155ba..4262ab7 100644 --- a/src/views/Files/index.vue +++ b/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 = `
  • [${type}] ${fileName}
  • `; - // 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 = `
  • [${i.type}] ${i.name}
    • `; + srt += content; + }); + } + deleteFileModal(srt, this.selectedType, this.selectedId); + srt = ''; }, /** * Download file as CSV