From 97fb89281c01c72eef47c47ccab67a54dd09bec5 Mon Sep 17 00:00:00 2001 From: somnetsak123 Date: Fri, 8 Dec 2023 22:36:43 +0700 Subject: [PATCH] refactor:add socket CRUD --- Services/client/src/components/PageLayout.vue | 3 + Services/client/src/stores/socket.ts | 113 ++++++++++++++ Services/client/src/stores/tree-data.ts | 141 +++++++++++++++++- 3 files changed, 251 insertions(+), 6 deletions(-) create mode 100644 Services/client/src/stores/socket.ts diff --git a/Services/client/src/components/PageLayout.vue b/Services/client/src/components/PageLayout.vue index 2400efd..9c3ceb0 100644 --- a/Services/client/src/components/PageLayout.vue +++ b/Services/client/src/components/PageLayout.vue @@ -4,6 +4,7 @@ import { storeToRefs } from 'pinia' import { useTreeDataStore } from '@/stores/tree-data' import { useSearchDataStore } from '@/stores/searched-data' import { useFileInfoStore } from '@/stores/file-info-data' +import { useSocketStore } from '@/stores/socket' import FileItem from './FileItem.vue' import TreeExplorer from './TreeExplorer.vue' @@ -22,6 +23,8 @@ const { isSearch } = storeToRefs(useSearchDataStore()) const { data, currentDept, currentPath } = storeToRefs(useTreeDataStore()) const { createFolder, getCabinet, gotoParent, getFolder } = useTreeDataStore() +useSocketStore() + const viewMode = ref<'view_list' | 'view_module'>('view_list') const props = defineProps<{ mode: 'admin' | 'user' diff --git a/Services/client/src/stores/socket.ts b/Services/client/src/stores/socket.ts new file mode 100644 index 0000000..8fefb0b --- /dev/null +++ b/Services/client/src/stores/socket.ts @@ -0,0 +1,113 @@ +import { defineStore } from 'pinia' +import { reactive } from 'vue' +import { useFileInfoStore } from '@/stores/file-info-data' +import { io } from 'socket.io-client' +import { useTreeDataStore } from '@/stores/tree-data' +import { storeToRefs } from 'pinia' + +const { + data, + listDataFolder, + currentFolder, + currentPath, + currentFile, + listDataFile, +} = storeToRefs(useTreeDataStore()) +const { + updateEditFolder, + updateDeleteFolder, + updateCreateFolder, + updateDeleteFile, + updateNewFile, +} = useTreeDataStore() + +const { fileInfo } = storeToRefs(useFileInfoStore()) +export const state = reactive({ + connected: false, +}) + +export const useSocketStore = defineStore('socket', () => { + const socket = io('http://localhost:25570') + + socket.on('connect', () => { + state.connected = true + }) + + socket.on('CreateFolder', (dataSocket) => { + const { pathname } = dataSocket + + const pathArray: string[] = pathname.split('/').filter(Boolean) + const currentPathResult = pathArray.slice(0, -1).join('/') + '/' + + if (currentPath.value == currentPathResult) { + data.value = updateCreateFolder( + data.value, + pathArray.length, + currentPathResult, + pathname, + { + pathname: pathname, + name: pathArray[pathArray.length - 1], + status: true, + folder: [], + file: [], + }, + ) + + currentFolder.value.push({ + pathname: pathname, + name: pathArray[pathArray.length - 1], + status: true, + folder: [], + file: [], + }) + + listDataFolder.value = currentFolder.value + } + }) + + socket.on('EditFolder', (dataSocket) => { + const { from, to } = dataSocket + data.value = updateEditFolder(data.value, from, to) + currentFolder.value = updateEditFolder(currentFolder.value, from, to) + listDataFolder.value = updateEditFolder(listDataFolder.value, from, to) + }) + + socket.on('DeleteFolder', (dataSocket) => { + const { pathname } = dataSocket + data.value = updateDeleteFolder(data.value, pathname) + currentFolder.value = updateDeleteFolder(currentFolder.value, pathname) + listDataFolder.value = updateDeleteFolder(listDataFolder.value, pathname) + }) + + socket?.on('FileDelete', (dataSocket) => { + console.log(currentFile) + console.log(listDataFile) + + const { pathname } = dataSocket + + currentFile.value = updateDeleteFile(currentFile.value, pathname) + listDataFile.value = updateDeleteFile(listDataFile.value, pathname) + }) + + socket.on('FileUpdate', (dataSocket) => { + const metadata = dataSocket + + const pathArray: string[] = metadata.pathname.split('/').filter(Boolean) + const currentPathResult = pathArray.slice(0, -1).join('/') + '/' + + if (currentPath.value == currentPathResult) { + listDataFile.value = currentFile.value = updateNewFile( + currentFile.value, + metadata.pathname, + metadata, + ) + } + + console.log(fileInfo) + }) + + socket.on('disconnect', () => { + state.connected = false + }) +}) diff --git a/Services/client/src/stores/tree-data.ts b/Services/client/src/stores/tree-data.ts index a55f60c..10197fc 100644 --- a/Services/client/src/stores/tree-data.ts +++ b/Services/client/src/stores/tree-data.ts @@ -45,8 +45,8 @@ export const useTreeDataStore = defineStore('changeCabinet', () => { const currentFile = ref([]) const currentPath = ref('') const currentDept = ref(0) - const listDataFolder = ref() - const listDataFile = ref() + const listDataFolder = ref([]) + const listDataFile = ref([]) async function getCabinet() { const res = await axiosClient.get(`${apiEndpoint}cabinet`) @@ -242,7 +242,7 @@ export const useTreeDataStore = defineStore('changeCabinet', () => { async function uploadFile( pathname: string, file: File, - metadata: { + newData: { title: string description: string keyword: string[] @@ -266,7 +266,7 @@ export const useTreeDataStore = defineStore('changeCabinet', () => { `${apiEndpoint}${requestPath}`, { file: file.name, - ...metadata, + ...newData, }, ) @@ -290,7 +290,7 @@ export const useTreeDataStore = defineStore('changeCabinet', () => { async function updateFile( pathname: string, - metadata: { + newData: { title: string description: string keyword: string[] @@ -311,7 +311,7 @@ export const useTreeDataStore = defineStore('changeCabinet', () => { const res = await axiosClient.patch<{ upload: string }>( `${apiEndpoint}${requestPath}`, - { file: file?.name, ...metadata }, + { file: file?.name, ...newData }, ) if (res && res.data.upload) { @@ -385,6 +385,130 @@ export const useTreeDataStore = defineStore('changeCabinet', () => { listDataFile.value = currentFile.value } + function updateEditFolder( + data: TreeDataFolder[], + targetPathname: string, + + newPath: string, + ): TreeDataFolder[] { + return data.map((item) => { + if (item.pathname === targetPathname) { + const pathArray: string[] = newPath.split('/').filter(Boolean) + item.pathname = newPath + item.name = pathArray[pathArray.length - 1] + } + + if (item.folder) { + return { + ...item, + folder: updateEditFolder(item.folder, targetPathname, newPath), + } + } + + return item + }) + } + + function updateDeleteFolder( + data: TreeDataFolder[], + targetPathname: string, + ): TreeDataFolder[] { + return data + .filter((item) => item.pathname !== targetPathname) + .map((item) => { + if (item.folder) { + item.folder = updateDeleteFolder(item.folder, targetPathname) + if (item.folder.length === 0) item.folder = [] + } + console.log(item) + + return item + }) + } + + function updateCreateFolder( + data: TreeDataFolder[], + pathArrayLength: number, + pathfolder: string, + targetPathname: string, + newData: TreeDataFolder, + ): TreeDataFolder[] { + let updatedData: TreeDataFolder[] = [] + + if (pathArrayLength === 1) { + updatedData.push(newData) + } + + for (const item of data) { + if (item.pathname === pathfolder) { + updatedData.push({ + ...item, + folder: [...(item.folder || []), newData], + }) + } else { + updatedData.push({ + ...item, + folder: item.folder + ? updateCreateFolder( + item.folder, + pathArrayLength, + pathfolder, + targetPathname, + newData, + ) + : [], + }) + } + } + + console.log(updatedData) + + return updatedData + } + + function updateDeleteFile( + data: EhrFile[], + targetPathname: string, + ): EhrFile[] { + return data.filter((item) => item.pathname !== targetPathname) + } + + function updateNewFile( + data: EhrFile[], + targetPathname: string, + newData: EhrFile, + ): EhrFile[] { + let isUpdated = false + + const updatedData = data.map((item) => { + if (item.pathname === targetPathname) { + isUpdated = true + + return { + ...item, + pathname: newData.pathname, + fileName: newData.fileName, + fileSize: newData.fileSize, + fileType: newData.fileType, + title: newData.title, + description: newData.description, + category: newData.category, + keyword: newData.keyword, + updatedAt: newData.updatedAt, + updatedBy: newData.updatedBy, + createdAt: newData.createdAt, + createdBy: newData.createdBy, + } + } + return item + }) + if (!isUpdated) { + updatedData.push(newData) + } + + return updatedData + } + return { data, currentFolder, @@ -405,5 +529,10 @@ export const useTreeDataStore = defineStore('changeCabinet', () => { checkFile, checkFileName, refaceFile, + updateEditFolder, + updateDeleteFolder, + updateCreateFolder, + updateDeleteFile, + updateNewFile, } })