From 4b33b91a5918e5d41c9502fad2844b3e15b64f8a Mon Sep 17 00:00:00 2001
From: puri-ph4tt <puriphat001@gmail.com>
Date: Fri, 15 Dec 2023 14:09:56 +0700
Subject: [PATCH] =?UTF-8?q?fix:=20=E0=B8=84=E0=B9=89=E0=B8=99=E0=B8=AB?=
 =?UTF-8?q?=E0=B8=B2=E0=B9=81=E0=B8=A5=E0=B9=89=E0=B8=A7=E0=B9=81=E0=B8=81?=
 =?UTF-8?q?=E0=B9=89=E0=B9=84=E0=B8=82=E0=B9=84=E0=B8=9F=E0=B8=A5=E0=B9=8C?=
 =?UTF-8?q?=20=E0=B8=88=E0=B8=B0=E0=B8=AD=E0=B8=B1=E0=B8=9B=E0=B9=80?=
 =?UTF-8?q?=E0=B8=94=E0=B8=97=20list=20=E0=B8=81=E0=B8=A3=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=87=E0=B8=AB=E0=B8=A5=E0=B8=B1=E0=B8=87=E0=B8=84=E0=B9=89?=
 =?UTF-8?q?=E0=B8=99=E0=B8=AB=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../client/src/components/FileSearched.vue    | 34 +++++++++++++++----
 1 file changed, 28 insertions(+), 6 deletions(-)

diff --git a/Services/client/src/components/FileSearched.vue b/Services/client/src/components/FileSearched.vue
index 3bcb653..d21cdaf 100644
--- a/Services/client/src/components/FileSearched.vue
+++ b/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