diff --git a/src/module/alertModal.js b/src/module/alertModal.js index 2f29da5..41ffa1d 100644 --- 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: '

All related files will be deleted.

List of file(s) to delete:

', + 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') { + // 什麼都不做 + } +}; diff --git a/src/stores/files.js b/src/stores/files.js index b02eff1..e379e73 100644 --- 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.'); + } + }, }, }) diff --git a/src/views/Files/index.vue b/src/views/Files/index.vue index 6323077..d1155ba 100644 --- a/src/views/Files/index.vue +++ b/src/views/Files/index.vue @@ -31,8 +31,8 @@
  • @@ -55,8 +55,8 @@ @@ -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 = `
  • [${type}] ${fileName}
  • `; + // 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;