From dcf92f701895c7f0bf6e38638b5797b5d0504311 Mon Sep 17 00:00:00 2001
From: somnetsak123 <https://somnetsak123@github.com>
Date: Mon, 4 Dec 2023 16:41:10 +0700
Subject: [PATCH] refactor: add nameId FileItemAction

---
 Services/client/src/components/FileItem.vue   | 19 +++++++++++--------
 .../client/src/components/FileItemAction.vue  | 10 +++++++++-
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/Services/client/src/components/FileItem.vue b/Services/client/src/components/FileItem.vue
index 128d41e..7eafdf0 100644
--- a/Services/client/src/components/FileItem.vue
+++ b/Services/client/src/components/FileItem.vue
@@ -19,9 +19,8 @@ const props = withDefaults(
 )
 const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย'] as const
 const { getFileInfo } = useFileInfoStore()
-const { currentFolder, currentFile, currentDept, currentPath } = storeToRefs(
-  useTreeDataStore()
-)
+const { currentFolder, currentFile, currentDept, currentPath } =
+  storeToRefs(useTreeDataStore())
 const {
   createFolder,
   editFolder,
@@ -38,8 +37,8 @@ const currentIcon = computed(() =>
   currentDept.value === 0
     ? 'mdi-file-cabinet'
     : currentDept.value === 1
-    ? 'inbox'
-    : 'o_folder_open',
+      ? 'inbox'
+      : 'o_folder_open',
 )
 
 const dialogDeleteState = ref<boolean>(false)
@@ -184,7 +183,10 @@ async function submitFileForm(
     {{ DEPT_NAME[currentDept] }}
   </div>
   <div class="grid q-mt-md">
-    <div v-for="(value, index) in currentFolder" key="value.name">
+    <div
+      v-for="(value, index) in currentFolder"
+      :data-pathname="value.pathname"
+    >
       <div
         :style="{
           position: 'relative',
@@ -200,7 +202,6 @@ async function submitFileForm(
             ;(folderFormState = false), getFolder(value.pathname)
           }
         "
-        :id="`getFolderFileItem${index}`"
       >
         <div class="q-px-md flex items-center justify-center">
           <q-icon
@@ -217,6 +218,7 @@ async function submitFileForm(
           v-if="props.action"
         >
           <file-item-action
+            :nameId="value.pathname"
             @delete="() => triggerFolderDelete(value.pathname)"
             @edit="() => triggerFolderEdit(value.name, value.pathname)"
           />
@@ -289,7 +291,7 @@ async function submitFileForm(
     เอกสาร
   </div>
   <div class="grid q-mt-md">
-    <div v-for="(value, index) in currentFile">
+    <div v-for="(value, index) in currentFile" :data-pathname="value.pathname">
       <div
         :style="{
           position: 'relative',
@@ -316,6 +318,7 @@ async function submitFileForm(
           v-if="props.action"
         >
           <file-item-action
+            :nameId="value.pathname"
             @edit="
               () =>
                 triggerFileEdit(
diff --git a/Services/client/src/components/FileItemAction.vue b/Services/client/src/components/FileItemAction.vue
index 20fea95..07d940b 100644
--- a/Services/client/src/components/FileItemAction.vue
+++ b/Services/client/src/components/FileItemAction.vue
@@ -1,9 +1,17 @@
 <script lang="ts" setup>
 defineEmits(['edit', 'delete'])
+
+const props = 
+  defineProps<{
+    nameId: string
+
+  }>()
+
+
 </script>
 
 <template>
-  <q-btn @click.stop icon="more_vert" color="grey" flat dense>
+  <q-btn @click.stop icon="more_vert" color="grey" flat dense :id="props.nameId">
     <q-menu auto-close>
       <q-list dense>
         <q-item clickable @click="() => $emit('edit')" id="FileltemActionEdit">