feat: แสดงจำนวนรายการที่ค้นหา, แก้ไขแสสดงชื่อไฟล์

Services/client/src/components/FileSearched.vue

@@ -6,9 +6,10 @@ import { storeToRefs } from 'pinia'
 import { useSearchDataStore } from '@/stores/searched-data'
 import { useFileInfoStore } from '@/stores/file-info-data'
 import useStorage from '@/stores/storage'
+import type { StorageFile } from '@/stores/storage'
 
-import DialogDelete from './DialogDelete.vue'
-import FileFormWrapper from './FileFormWrapper.vue'
+import DialogDelete from '@/components/DialogDelete.vue'
+import FileFormWrapper from '@/components/FileFormWrapper.vue'
 import FileItemAction from '@/components/FileItemAction.vue'
 import FileIcon from '@/components/FileIcon.vue'
 
@@ -33,7 +34,7 @@ const keywordList = ref<string[]>([])
 const categoryList = ref<string[]>([])
 const selectKeyword = ref<string[]>([])
 const selectCategory = ref<string[]>([])
-const filterFoundFile = ref<any>()
+const filterFoundFile = ref<StorageFile[]>()
 
 const deleteFormType = ref<'deleteFile'>('deleteFile')
 const dialogDeleteState = ref<boolean>(false)
@@ -161,6 +162,7 @@ onMounted(() => {
   </div>
 
   <div v-if="props.viewMode === 'view_list' && foundFile.length > 0">
+    <span class="text-body text-grey">จำนวน {{ filterFoundFile?.length }} รายการ</span>
     <div class="grid q-mt-md">
       <div v-for="(value, index) in filterFoundFile" :key="value.title">
         <div
@@ -201,6 +203,7 @@ onMounted(() => {
                       category: value.category,
                     },
                     value.pathname,
+                    value.fileName,
                   )
               "
               @delete="() => triggerFileDelete(value.pathname)"
@@ -224,13 +227,13 @@ onMounted(() => {
     <q-table
       flat
       bordered
+      row-key="name"
+      class="cursor"
       :rows="filterFoundFile"
       :columns="columns"
-      row-key="name"
       :pagination="{
         rowsPerPage: 0,
       }"
-      class="cursor"
     >
       <template v-slot:body-cell-name="nameData">
         <q-td style="width: 50%" @click="() => getFileInfo(nameData.row)">
@@ -271,11 +274,12 @@ onMounted(() => {
               color="positive"
               dense
               icon="o_edit"
-              @click="
+              @click.stop="
                 () =>
                   fileFormComponent?.triggerFileEdit(
                     actionData.row,
                     actionData.row.pathname,
+                    actionData.row.fileName,
                   )
               "
               id="listViewFileEdit"

Services/client/src/components/ListView.vue

@@ -355,6 +355,7 @@ const onRowClick = ((_, row) => {
                     fileFormComponent?.triggerFileEdit(
                       data.row,
                       data.row.pathname,
+                      data.row.filename,
                     )
                 "
                 id="listViewFileEdit"