Merge branch 'net' into development

Services/client/package.json

@@ -20,6 +20,7 @@
     "@tsconfig/node18": "^18.2.2",
     "axios": "^1.6.2",
     "keycloak-js": "^23.0.0",
+    "nanoid": "^5.0.4",
     "pinia": "^2.1.7",
     "quasar": "^2.14.0",
     "vite-plugin-pwa": "^0.17.2",

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(
+const { currentFolder, currentFile, currentDept, currentPath } =
-  useTreeDataStore()
+  storeToRefs(useTreeDataStore())
-)
 const {
   createFolder,
   editFolder,
@@ -38,8 +37,8 @@ const currentIcon = computed(() =>
   currentDept.value === 0
     ? 'mdi-file-cabinet'
     : currentDept.value === 1
-    ? 'inbox'
+      ? 'inbox'
-    : 'o_folder_open',
+      : '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(

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">