Merge branch 'phatt' into development

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

Services/client/src/modules/01_user/components/SearchBar.vue

@@ -3,7 +3,6 @@ import { ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import axiosClient from '@/services/HttpService'
 import mime from 'mime'
-import io from 'socket.io-client'
 
 import type { StorageFile } from '@/stores/storage'
 import { useSearchDataStore } from '@/stores/searched-data'
@@ -15,11 +14,9 @@ import AdvancedSearch from '@/modules/01_user/components/AdvancedSearch.vue'
 const loaderStore = useLoader()
 const { isFilePreview } = storeToRefs(useFileInfoStore())
 const {
-  foundFile,
   isExact,
   isSearch,
   isAdvSearchCall,
-  isActFoundFile,
   searchData,
   advSearchDataField,
   advSearchDataRow,
@@ -41,20 +38,6 @@ const submitSearchData = ref<{
 const props = defineProps<{
   mode: 'admin' | 'user'
 }>()
-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)
-})
-
-function replaceSearchItem(pathname: string, data: StorageFile) {
-  const idx = foundFile.value.findIndex((v) => v.pathname === pathname)
-
-  if (idx !== -1) foundFile.value[idx] = data
-}
 
 async function submitSearch() {
   isFilePreview.value = false
@@ -136,18 +119,6 @@ async function submitSearch() {
   }
 }
 
-watch(
-  () => isActFoundFile.value,
-  (edited) => {
-    if (edited === true) {
-      submitSearch()
-      setTimeout(() => {
-        isActFoundFile.value = false
-      }, 1000)
-    }
-  },
-)
-
 watch(
   () => searchData.value.value,
   (search) => {
@@ -165,7 +136,7 @@ watch(
       outlined
       dense
       label="ค้นหา"
-      debounce="500"
+      debounce="300"
       bg-color="white"
       v-model="searchData.value"
       id="inputSearch"

Services/client/src/stores/searched-data.ts

@@ -24,7 +24,6 @@ export const useSearchDataStore = defineStore('searched', () => {
   const isAdvSearchCall = ref<boolean>(false)
   const isSearch = ref<Boolean>(false)
   const isExact = ref<boolean>(false)
-  const isActFoundFile = ref<Boolean>(false)
   const searchData = ref<Search>({
     field: 'title',
     value: '',
@@ -51,7 +50,6 @@ export const useSearchDataStore = defineStore('searched', () => {
     isSearch,
     isExact,
     isAdvSearchCall,
-    isActFoundFile,
     searchData,
     advSearchDataRow,
     advSearchDataField,