refactor:add socket CRUD

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'

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
+  })
+})

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

@@ -45,8 +45,8 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
   const currentFile = ref<EhrFile[]>([])
   const currentPath = ref<string>('')
   const currentDept = ref<number>(0)
-  const listDataFolder = ref<TreeDataFolder[]>()
-  const listDataFile = ref<EhrFile[]>()
+  const listDataFolder = ref<TreeDataFolder[]>([])
+  const listDataFile = ref<EhrFile[]>([])
   async function getCabinet() {
     const res = await axiosClient.get<EhrFolder[]>(`${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,
   }
 })