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(() => {
- จำนวน {{ filterFoundFile?.length }} รายการ + จำนวน {{ filterFoundFile?.length }} รายการ
() -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" diff --git a/Services/client/src/stores/searched-data.ts b/Services/client/src/stores/searched-data.ts index 7543f2e..125fb32 100644 --- a/Services/client/src/stores/searched-data.ts +++ b/Services/client/src/stores/searched-data.ts @@ -24,7 +24,6 @@ export const useSearchDataStore = defineStore('searched', () => { const isAdvSearchCall = ref(false) const isSearch = ref(false) const isExact = ref(false) - const isActFoundFile = ref(false) const searchData = ref({ field: 'title', value: '', @@ -51,7 +50,6 @@ export const useSearchDataStore = defineStore('searched', () => { isSearch, isExact, isAdvSearchCall, - isActFoundFile, searchData, advSearchDataRow, advSearchDataField,