fix: ค้นหาแล้วแก้ไขไฟล์ จะอัปเดท list กรองหลังค้นหา

Services/client/src/components/FileSearched.vue

@@ -2,6 +2,7 @@
 import type { QTableProps } from 'quasar'
 import { onMounted, ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
+import io from 'socket.io-client'
 
 import { useSearchDataStore } from '@/stores/searched-data'
 import { useFileInfoStore } from '@/stores/file-info-data'
@@ -22,7 +23,7 @@ const props = withDefaults(
     action: false,
   },
 )
-const { foundFile, isActFoundFile } = storeToRefs(useSearchDataStore())
+const { foundFile } = storeToRefs(useSearchDataStore())
 const { getFileInfo, getSize, getType } = useFileInfoStore()
 
 const storageStore = useStorage()
@@ -75,6 +76,29 @@ const columns: QTableProps['columns'] = [
     style: 'width: 20px',
   },
 ]
+const socket = io(import.meta.env.VITE_API_HOST)
+
+socket.on('FileUpload', (data: StorageFile) => {
+  replaceSearchItem(data.pathname, data)
+})
+socket.on('FileMove', (data: { from: StorageFile; to: StorageFile }) => {
+  replaceSearchItem(data.from.pathname, data.to)
+})
+socket.on('FileDelete', (data: { pathname: string }) => {
+  removeSearchItem(data.pathname)
+})
+
+function removeSearchItem(pathname: string) {
+  const idx = foundFile.value.findIndex((v) => v.pathname === pathname)
+  if (idx !== -1) foundFile.value.splice(idx, 1)
+  filterSearch()
+}
+
+function replaceSearchItem(pathname: string, data: StorageFile) {
+  const idx = foundFile.value.findIndex((v) => v.pathname === pathname)
+  if (idx !== -1) foundFile.value[idx] = data
+  filterSearch()
+}
 
 function triggerFileDelete(pathname: string) {
   deleteFormType.value = 'deleteFile'
@@ -85,10 +109,6 @@ function triggerFileDelete(pathname: string) {
 function confirmDelete() {
   if (deleteFormType) {
     deleteFile(deleteFormPath.value)
-
-    setTimeout(() => {
-      isActFoundFile.value = true
-    }, 1000)
   }
 }
 
@@ -162,7 +182,9 @@ onMounted(() => {
   </div>
 
   <div v-if="props.viewMode === 'view_list' && foundFile.length > 0">
-    <span class="text-body text-grey">จำนวน {{ filterFoundFile?.length }} รายการ</span>
+    <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