From e61c458d929ecb57fbf6a82950f3acb72a999d97 Mon Sep 17 00:00:00 2001
From: chiayin <chiayin.kuo@dsp.im>
Date: Thu, 18 Jan 2024 14:44:35 +0800
Subject: [PATCH] feat: Files delete modal error text done.

---
 src/module/alertModal.js  | 7 ++++---
 src/views/Files/index.vue | 9 +++++----
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/module/alertModal.js b/src/module/alertModal.js
index 647a3d6..6a04bf0 100644
--- a/src/module/alertModal.js
+++ b/src/module/alertModal.js
@@ -328,12 +328,13 @@ export async function renameModal(rename, type, id) {
  * @param { string } files 有關連的檔案
  * @param { string } type
  * @param { number } id
+ * @param { string } name 原本的檔案
  */
-export async function deleteFileModal(files, type, id) {
+export async function deleteFileModal(files, type, id, name) {
   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>`;
+  let htmlText = files.length === 0 ? `Do you really want to delete <span class="text-primary">${name}</span>?` : `<div class="text-left mx-4 space-y-1"><p class="mb-2">Do you really want to delete <span class="text-primary">${name}</span>?</p><p>The following dependent file(s) will also be deleted:</p><ul class="list-disc ml-6">${files}</ul></div>`;
   const result = await Swal.fire({
-    title: 'ARE YOU SURE?',
+    title: 'Confirm Deletion?',
     html: htmlText,
     icon: 'warning',
     iconColor: '#FF3366',
diff --git a/src/views/Files/index.vue b/src/views/Files/index.vue
index 4262ab7..d53f8d9 100644
--- a/src/views/Files/index.vue
+++ b/src/views/Files/index.vue
@@ -56,7 +56,7 @@
               <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" @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>
+                <li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary" @click="deleteFile(slotProps.data.type, slotProps.data.id, slotProps.data.name, 'list-hover')">delete</span></li>
               </ul>
             </template>
           </Column>
@@ -288,14 +288,15 @@
        * @param {number} id
        * @param {string} source hover icon
        */
-      async deleteFile(type, id, source) {
+      async deleteFile(type, id, name, source) {
         let srt = '';
         let data = [];
 
         // 判斷是否來自 hover icon 選單
-        if(type && id && source === 'list-hover') {
+        if(type && id && name && source === 'list-hover') {
           this.selectedType = type;
           this.selectedId = id;
+          this.selecteName = name;
         }
         // 取得相依性檔案
         await this.store.getDependents(this.selectedType, this.selectedId);
@@ -314,7 +315,7 @@
             srt += content;
           });
         }
-        deleteFileModal(srt, this.selectedType, this.selectedId);
+        deleteFileModal(srt, this.selectedType, this.selectedId, this.selecteName);
         srt = '';
       },
       /**