From d4f0801ca1511594f397b324ff9ca4ce4c6d172e Mon Sep 17 00:00:00 2001
From: chiayin <chiayin.kuo@dsp.im>
Date: Thu, 11 Jan 2024 12:26:40 +0800
Subject: [PATCH] feat: File rename API done.

---
 src/main.js               |  2 ++
 src/module/alertModal.js  | 29 ++++++++++++++++++++++
 src/stores/files.js       | 31 +++++++++++++++++++++---
 src/views/Files/index.vue | 51 +++++++++++++++++++++++++++++++++++----
 4 files changed, 104 insertions(+), 9 deletions(-)

diff --git a/src/main.js b/src/main.js
index 13dcaf8..4e28719 100644
--- a/src/main.js
+++ b/src/main.js
@@ -47,6 +47,7 @@ import Calendar from 'primevue/calendar';
 import Tooltip from 'primevue/tooltip';
 import Checkbox from 'primevue/checkbox';
 import Dialog from 'primevue/dialog';
+import ContextMenu from 'primevue/contextmenu';
 
 const emitter = mitt();
 const app = createApp(App);
@@ -99,6 +100,7 @@ app.component('Slider', Slider);
 app.component('Calendar', Calendar);
 app.component('Checkbox', Checkbox);
 app.component('Dialog', Dialog);
+app.component('ContextMenu', ContextMenu);
 app.component('Draggable', draggable);  // 拖曳
 app.directive('tooltip', Tooltip);
 
diff --git a/src/module/alertModal.js b/src/module/alertModal.js
index e685e97..2f29da5 100644
--- a/src/module/alertModal.js
+++ b/src/module/alertModal.js
@@ -287,3 +287,32 @@ export async function uploadloader() {
     customClass: customClass,
   })
 };
+/**
+ * Rename Modal
+ * @param { function } rename
+ */
+export async function renameModal(rename, type, id) {
+  let fileName = '';
+  const { value, isConfirmed } = await Swal.fire({
+    title: 'RENAME',
+    input: 'text',
+    inputPlaceholder: 'Enter File Name.',
+    inputValue: fileName,
+    inputValidator: value => {
+      if(!value) return 'You need to write something!';
+      fileName = value;
+    },
+    icon: 'info',
+    iconHtml: '<span class="material-symbols-outlined text-[58px]">edit_square</span>',
+    iconColor: '#0099FF',
+    reverseButtons: true,
+    confirmButtonColor: '#0099FF',
+    showCancelButton: '#94a3b8',
+    customClass: customClass,
+  });
+
+  // 改名成功
+  if(isConfirmed) await rename(type, id, value);
+  // 清空欄位
+  fileName = '';
+}
diff --git a/src/stores/files.js b/src/stores/files.js
index 8157fac..b02eff1 100644
--- a/src/stores/files.js
+++ b/src/stores/files.js
@@ -168,15 +168,38 @@ export default defineStore('filesStore', {
     },
     /**
      * Rename a Log
+     * @param { string } type log | filter | log-check | filter-check
+     * @param { number } id
+     * @param { string } name
      */
-    async rename() {
-      const id = this.uploadLogId;
-      const api = `/api/logs/${id}/name`;
-      const data = {"name": this.uploadFileName};
+    async rename(type, id, fileName) {
+      // 先判斷有沒有 uploadLogId，有就設定 id 和 type；再判斷檔案型別。
+      let api;
+      let data = {"name": fileName};
 
+      if(this.uploadId && this.uploadFileName) {
+        type = 'log';
+        id = this.uploadLogId;
+        fileName = this.uploadFileName;
+      }
+      switch (type) {
+        case 'log':
+          api = `/api/logs/${id}/name`;
+          break;
+        case 'filter':
+          api = `/api/filters/${id}/name`;
+          break;
+        case 'log-check':
+          api = `/api/log-checks/${id}/name`;
+          break;
+        case 'filter-check':
+          api = `/api/filter-checks/${id}/name`;
+          break;
+      }
       try {
         const response = await axios.put(api, data);
         this.uploadFileName = null;
+        await this.fetchAllFiles();
       } catch(error) {
         apiError(error, 'Failed to rename.');
       }
diff --git a/src/views/Files/index.vue b/src/views/Files/index.vue
index 7b943b7..8bf8fac 100644
--- a/src/views/Files/index.vue
+++ b/src/views/Files/index.vue
@@ -6,8 +6,8 @@
       <!-- card group 最多六個-->
       <ul class="flex justify-start items-center gap-4 overflow-x-auto w-full h-[192px] scrollbar pb-4">
         <!-- card item v-for -->
-        <li class="w-[216px] min-w-[216px] h-[168px] p-4 border rounded border-neutral-300  hover:bg-primary/10 hover:border-primary duration-300 flex flex-col justify-between cursor-pointer" v-for="(file, index) in recentlyUsedFiles.slice(0, 6)" :key="file.id" @dblclick="enterDiscover(file)" :title="file.name">
-          <div class="">
+        <li class="w-[216px] min-w-[216px] h-[168px] p-4 border rounded border-neutral-300  hover:bg-primary/10 hover:border-primary duration-300 flex flex-col justify-between cursor-pointer" v-for="(file, index) in recentlyUsedFiles.slice(0, 6)" :key="file.id" @dblclick="enterDiscover(file)" :title="file.name" @contextmenu="onRightClick($event, file)">
+          <div>
             <span class="material-symbols-outlined mb-2 text-[32px] block">
               {{ file.icon }}
             </span>
@@ -49,7 +49,7 @@
       <!-- All Files type of grid -->
       <ul class="flex justify-start items-start gap-4 flex-wrap overflow-y-scroll overflow-x-hidden max-h-[calc(100vh_-_480px)] scrollbar" v-else>
       <li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:bg-primary/10 hover:border-primary duration-300 flex flex-col justify-between cursor-pointer"
-        v-for="(file, index) in allFiles" :key="file.id" @dblclick="enterDiscover(file)" :title="file.name">
+        v-for="(file, index) in allFiles" :key="file.id" @dblclick="enterDiscover(file)" :title="file.name" @contextmenu="onRightClick($event, file)">
           <div>
             <span class="material-symbols-outlined mb-2 text-[32px] block">
               {{ file.icon }}
@@ -67,6 +67,16 @@
         </li>
       </ul>
     </section>
+    <!-- ContextMenu -->
+    <ContextMenu ref="menu" :model="items" @hide="selectedFile = null">
+      <template #item="{ item }">
+        <a class="flex align-items-center px-4 py-2 duration-300 hover:bg-primary/20">
+          <span class="material-symbols-outlined">{{ item.icon }}</span>
+          <span class="ml-2 text-sm inline-flex items-center">{{ item.label }}</span>
+          <span v-if="item.shortcut" class="border border-round p-1">{{ item.shortcut }}</span>
+        </a>
+      </template>
+    </ContextMenu>
   </div>
 </template>
 
@@ -82,11 +92,34 @@
   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';
 
   export default {
     data() {
       return {
         switchListOrGrid: false,
+        selectedFile: null,
+        selectedType: null,
+        selectedId: null,
+        items: [
+          {
+            label: 'Rename',
+            icon: 'edit_square',
+            command: this.rename,
+          },
+          {
+            label: 'Download',
+            icon: 'download',
+          },
+          {
+            separator: true // 分隔符號
+          },
+          {
+            label: 'Delete',
+            icon: 'delete',
+
+          },
+        ],
       }
     },
     setup() {
@@ -105,7 +138,7 @@
       IconFlowChart,
       IconVector,
       IconList,
-      IconGrid,
+      IconGrid
     },
     computed: {
       /**
@@ -129,6 +162,9 @@
       },
     },
     methods: {
+      rename() {
+        renameModal(this.store.rename, this.selectedType, this.selectedId);
+      },
       /**
        * 選擇該 files 進入 Discover/Compare/Design 頁面
        * @param {object} file
@@ -170,7 +206,12 @@
             this.$router.push({name: 'CheckConformance', params: params});
             break;
         }
-      }
+      },
+      onRightClick(event, file) {
+        this.selectedType = file.type;
+        this.selectedId = file.id;
+        this.$refs.menu.show(event)
+      },
     },
     mounted() {
       this.isLoading = true;