From fc00ff02abc159a8f3f59c368b5cd4f89680b0e8 Mon Sep 17 00:00:00 2001
From: somnetsak123 <https://somnetsak123@github.com>
Date: Fri, 8 Dec 2023 09:03:13 +0700
Subject: [PATCH 01/26] fix: phase div

---
 Services/client/src/components/FileItem.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/Services/client/src/components/FileItem.vue b/Services/client/src/components/FileItem.vue
index 23d8e19..09ed4f7 100644
--- a/Services/client/src/components/FileItem.vue
+++ b/Services/client/src/components/FileItem.vue
@@ -189,11 +189,11 @@ async function submitFileForm(
 </script>
 
 <template>
-  <div class="text-h6 q-mt-md" v-if="currentDept > 2">
+  <div class="text-h6 q-mt-md" v-if="currentDept > 2 && currentDept < 4">
     <div class="flex justify-between items-center">
       <div>{{ DEPT_NAME[currentDept] }}</div>
       <q-btn
-        v-if="currentDept != 4 && action"
+        v-if="action"
         outline
         push
         class="q-px-md q-ml-md"
@@ -207,7 +207,7 @@ async function submitFileForm(
       />
     </div>
   </div>
-  <div class="grid q-mt-md">
+  <div class="grid q-mt-md" v-if="currentDept < 4">
     <div v-for="value in currentFolder" :data-pathname="value.pathname">
       <div
         :style="{

From 97fb89281c01c72eef47c47ccab67a54dd09bec5 Mon Sep 17 00:00:00 2001
From: somnetsak123 <https://somnetsak123@github.com>
Date: Fri, 8 Dec 2023 22:36:43 +0700
Subject: [PATCH 02/26] 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<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,
   }
 })

From 84f702e537afdeaa03543414f4d99c69c2d487ae Mon Sep 17 00:00:00 2001
From: somnetsak123 <https://somnetsak123@github.com>
Date: Fri, 8 Dec 2023 22:37:04 +0700
Subject: [PATCH 03/26] fix: typs QTableProps

---
 Services/client/src/components/ListView.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/Services/client/src/components/ListView.vue b/Services/client/src/components/ListView.vue
index e9d558e..4259504 100644
--- a/Services/client/src/components/ListView.vue
+++ b/Services/client/src/components/ListView.vue
@@ -270,9 +270,9 @@ const columnsFile: QTableProps['columns'] = [
   },
 ]
 
-const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
+const onRowClick = ((_evt, row) => {
   getFolder(row.pathname)
-}
+}) satisfies QTableProps['onRowClick']
 </script>
 
 <template>

From e414caa4daaf49c46c797ac0cef26b98b7407951 Mon Sep 17 00:00:00 2001
From: somnetsak123 <https://somnetsak123@github.com>
Date: Fri, 8 Dec 2023 22:42:01 +0700
Subject: [PATCH 04/26] fix: delete log

---
 Services/client/src/stores/socket.ts    | 5 -----
 Services/client/src/stores/tree-data.ts | 3 ---
 2 files changed, 8 deletions(-)

diff --git a/Services/client/src/stores/socket.ts b/Services/client/src/stores/socket.ts
index 8fefb0b..8bf26c0 100644
--- a/Services/client/src/stores/socket.ts
+++ b/Services/client/src/stores/socket.ts
@@ -81,9 +81,6 @@ export const useSocketStore = defineStore('socket', () => {
   })
 
   socket?.on('FileDelete', (dataSocket) => {
-    console.log(currentFile)
-    console.log(listDataFile)
-
     const { pathname } = dataSocket
 
     currentFile.value = updateDeleteFile(currentFile.value, pathname)
@@ -103,8 +100,6 @@ export const useSocketStore = defineStore('socket', () => {
         metadata,
       )
     }
-
-    console.log(fileInfo)
   })
 
   socket.on('disconnect', () => {
diff --git a/Services/client/src/stores/tree-data.ts b/Services/client/src/stores/tree-data.ts
index 10197fc..3f8e624 100644
--- a/Services/client/src/stores/tree-data.ts
+++ b/Services/client/src/stores/tree-data.ts
@@ -420,7 +420,6 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
           item.folder = updateDeleteFolder(item.folder, targetPathname)
           if (item.folder.length === 0) item.folder = []
         }
-        console.log(item)
 
         return item
       })
@@ -461,8 +460,6 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
       }
     }
 
-    console.log(updatedData)
-
     return updatedData
   }
 

From 66e33a9c7bd4422c97ab047e74f753db78ee9775 Mon Sep 17 00:00:00 2001
From: somnetsak123 <https://somnetsak123@github.com>
Date: Fri, 8 Dec 2023 22:55:21 +0700
Subject: [PATCH 05/26] fix: delete function not use

---
 Services/client/src/stores/socket.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/Services/client/src/stores/socket.ts b/Services/client/src/stores/socket.ts
index 8bf26c0..59d6692 100644
--- a/Services/client/src/stores/socket.ts
+++ b/Services/client/src/stores/socket.ts
@@ -21,7 +21,6 @@ const {
   updateNewFile,
 } = useTreeDataStore()
 
-const { fileInfo } = storeToRefs(useFileInfoStore())
 export const state = reactive({
   connected: false,
 })

From 1d956be78370a5c6e5b3202cf6619f2c59fe7537 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Sat, 9 Dec 2023 12:09:19 +0700
Subject: [PATCH 06/26] fix: duplicate name on create with same name

---
 Services/client/src/stores/socket.ts | 25 ++++++++++++++++---------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/Services/client/src/stores/socket.ts b/Services/client/src/stores/socket.ts
index 59d6692..92e2aab 100644
--- a/Services/client/src/stores/socket.ts
+++ b/Services/client/src/stores/socket.ts
@@ -1,6 +1,5 @@
 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'
@@ -53,15 +52,23 @@ export const useSocketStore = defineStore('socket', () => {
         },
       )
 
-      currentFolder.value.push({
-        pathname: pathname,
-        name: pathArray[pathArray.length - 1],
-        status: true,
-        folder: [],
-        file: [],
-      })
+      if (
+        currentFolder.value.findIndex(
+          (v) => v.name === pathArray[pathArray.length - 1],
+        ) === -1
+      ) {
+        currentFolder.value.push({
+          pathname: pathname,
+          name: pathArray[pathArray.length - 1],
+          status: true,
+          folder: [],
+          file: [],
+        })
+      }
 
-      listDataFolder.value = currentFolder.value
+      currentFolder.value.sort((a, b) => {
+        return a.name.localeCompare(b.name)
+      })
     }
   })
 

From fe9345fbbd12f7bb602f6276fd94a22e81e8d1da Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Sat, 9 Dec 2023 19:34:42 +0700
Subject: [PATCH 07/26] chore: adjust and remove unnecessary

---
 Services/client/src/stores/socket.ts | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/Services/client/src/stores/socket.ts b/Services/client/src/stores/socket.ts
index 92e2aab..68e580b 100644
--- a/Services/client/src/stores/socket.ts
+++ b/Services/client/src/stores/socket.ts
@@ -1,5 +1,4 @@
 import { defineStore } from 'pinia'
-import { reactive } from 'vue'
 import { io } from 'socket.io-client'
 import { useTreeDataStore } from '@/stores/tree-data'
 import { storeToRefs } from 'pinia'
@@ -20,15 +19,11 @@ const {
   updateNewFile,
 } = useTreeDataStore()
 
-export const state = reactive({
-  connected: false,
-})
-
 export const useSocketStore = defineStore('socket', () => {
   const socket = io('http://localhost:25570')
 
   socket.on('connect', () => {
-    state.connected = true
+    console.log('SocketIO Connected')
   })
 
   socket.on('CreateFolder', (dataSocket) => {
@@ -86,7 +81,7 @@ export const useSocketStore = defineStore('socket', () => {
     listDataFolder.value = updateDeleteFolder(listDataFolder.value, pathname)
   })
 
-  socket?.on('FileDelete', (dataSocket) => {
+  socket.on('FileDelete', (dataSocket) => {
     const { pathname } = dataSocket
 
     currentFile.value = updateDeleteFile(currentFile.value, pathname)
@@ -109,6 +104,6 @@ export const useSocketStore = defineStore('socket', () => {
   })
 
   socket.on('disconnect', () => {
-    state.connected = false
+    console.log('SocketIO Disconnected')
   })
 })

From 9ff9c179bccb51cf173eac1199d534dabc8da242 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Sun, 10 Dec 2023 09:27:26 +0700
Subject: [PATCH 08/26] refactor: new storage store

---
 Services/client/src/components/PageLayout.vue |   2 +
 Services/client/src/stores/storage.ts         | 217 ++++++++++++++++++
 2 files changed, 219 insertions(+)
 create mode 100644 Services/client/src/stores/storage.ts

diff --git a/Services/client/src/components/PageLayout.vue b/Services/client/src/components/PageLayout.vue
index 9c3ceb0..278c305 100644
--- a/Services/client/src/components/PageLayout.vue
+++ b/Services/client/src/components/PageLayout.vue
@@ -15,6 +15,7 @@ import GlobalErrorDialog from './GlobalErrorDialog.vue'
 
 import SearchBar from '@/modules/01_user/components/SearchBar.vue'
 import FileDownload from '@/modules/01_user/components/FileDownload.vue'
+import useStorage from '@/stores/storage'
 
 const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย'] as const
 
@@ -23,6 +24,7 @@ const { isSearch } = storeToRefs(useSearchDataStore())
 const { data, currentDept, currentPath } = storeToRefs(useTreeDataStore())
 const { createFolder, getCabinet, gotoParent, getFolder } = useTreeDataStore()
 
+useStorage()
 useSocketStore()
 
 const viewMode = ref<'view_list' | 'view_module'>('view_list')
diff --git a/Services/client/src/stores/storage.ts b/Services/client/src/stores/storage.ts
new file mode 100644
index 0000000..3533435
--- /dev/null
+++ b/Services/client/src/stores/storage.ts
@@ -0,0 +1,217 @@
+import { computed, reactive, ref } from 'vue'
+import { defineStore } from 'pinia'
+import { io } from 'socket.io-client'
+import api from '@/services/HttpService'
+
+function constructUrl(path: string | string[], append = true) {
+  const arr = Array.isArray(path) ? path : path.split('/').filter(Boolean)
+  const url =
+    import.meta.env.VITE_API_ENDPOINT +
+    arr.reduce<string>((a, v, i) => {
+      switch (String(i)) {
+        case '0':
+          return `cabinet/${v}`
+        case '1':
+          return `${a}/drawer/${v}`
+        case '2':
+          return `${a}/folder/${v}`
+        case '3':
+          return `${a}/subfolder/${v}`
+        default:
+          return a
+      }
+    }, '')
+  return append
+    ? url + ['cabinet', '/drawer', '/folder', '/subfolder'][arr.length]
+    : url
+}
+
+const useStorage = defineStore('storage', async () => {
+  const folderList = ref<
+    Record<
+      string, // path that contains folders
+      {
+        pathname: string
+        name: string
+      }[]
+    >
+  >({})
+  const fileList = ref<
+    Record<
+      string, // path that contains files
+      {
+        pathname: string
+        path: string
+        fileName: string
+        fileSize: string
+        fileType: string
+        title: string
+        description: string
+        category: string[]
+        keyword: string[]
+        updatedAt: string
+        updatedBy: string
+        createdAt: string
+        createdBy: string
+      }[]
+    >
+  >({})
+  const tree = computed(() => {
+    type Structure = {
+      pathname: string
+      name: string
+      folder: Structure
+      file: (typeof fileList.value)[string]
+    }[]
+
+    let structure: Structure = []
+
+    // parse list of folder and list of file into tree
+    Object.entries(folderList.value).forEach(([key, value]) => {
+      const arr = key.split('/').filter(Boolean)
+
+      // init outer tree
+      if (arr.length === 0) {
+        structure = value.map((v) => ({
+          pathname: v.pathname,
+          name: v.name,
+          folder: [],
+          file: [],
+        }))
+      } else {
+        let current: Structure[number] | undefined
+
+        // traverse into tree
+        arr.forEach((v, i) => {
+          current =
+            i === 0
+              ? structure.find((x) => x.name === v)
+              : current?.folder.find((x) => x.name === v)
+        })
+
+        // set data in tree (object is references to the same object)
+        if (current) {
+          current.folder = value.map((v) => ({
+            pathname: v.pathname,
+            name: v.name,
+            folder: [],
+            file: [],
+          }))
+          current.file = fileList.value[key] ?? []
+        }
+      }
+    })
+
+    return structure
+  })
+  const currentInfo = reactive<{
+    path: string
+    dept: number
+  }>({
+    path: '',
+    dept: 0,
+  })
+
+  async function getStorage(path: string = '') {
+    const res = await api.get<(typeof folderList.value)[string]>(
+      constructUrl(path),
+    )
+    if (res.status === 200)
+      folderList.value[path] = res.data.sort((a, b) =>
+        a.pathname.localeCompare(b.pathname),
+      )
+  }
+
+  async function getStorageFile(path: string = '') {
+    const arr = path.split('/').filter(Boolean)
+
+    if (arr.length < 3) return
+
+    const res = await api.get<(typeof fileList.value)[string]>(
+      constructUrl(path, false) + '/file',
+    )
+    if (res.status === 200)
+      fileList.value[path] = res.data.sort((a, b) =>
+        a.pathname.localeCompare(b.pathname),
+      )
+  }
+
+  async function goto(path: string) {
+    const arr = path.split('/').filter(Boolean)
+
+    for (let i = 0; i < arr.length; i++) {
+      const current = arr.slice(0, i - arr.length).join('/') + '/'
+      if (!folderList.value[current]) await getStorage(current)
+    }
+
+    // only get this path once, after that will get from socket.io-client instead
+    if (!folderList.value[path]) await getStorage(path)
+    if (!fileList.value[path]) await getStorageFile(path)
+
+    currentInfo.path = path
+    currentInfo.dept = path.split('/').filter(Boolean).length - 1
+  }
+
+  async function gotoParent() {
+    const arr = currentInfo.path.split('/').filter(Boolean)
+    await goto([...arr.slice(0, -1), ''].join('/'))
+  }
+
+  const socket = io('http://localhost:25570')
+
+  socket.on('connect', () => console.info('Socket.io connected.'))
+  socket.on('disconnect', () => console.info('Socket.io disconnected.'))
+  socket.on('CreateFolder', (data: { pathname: string }) => {
+    const arr = data.pathname.split('/').filter(Boolean)
+    const path = [...arr.slice(0, -1), ''].join('/')
+
+    if (folderList.value[path]) {
+      folderList.value[path].push({
+        pathname: data.pathname,
+        name: arr[arr.length - 1],
+      })
+      folderList.value[path].sort((a, b) =>
+        a.pathname.localeCompare(b.pathname),
+      )
+    }
+  })
+  socket.on(
+    'EditFolder',
+    (data: { from: { pathname: string }; to: { pathname: string } }) => {
+      console.log(data) // TODO: Implement
+    },
+  )
+  socket.on('DeleteFolder', (data: { pathname: string }) => {
+    if (folderList.value[data.pathname]) {
+      delete folderList.value[data.pathname]
+    }
+
+    const arr = data.pathname.split('/').filter(Boolean)
+    const path = [...arr.slice(0, -1), ''].join('/')
+
+    if (folderList.value[path]) {
+      folderList.value[path] = folderList.value[path].filter(
+        (v) => v.pathname !== data.pathname,
+      )
+    }
+  })
+
+  await goto('เอกสารทดสอบระบบ/dev-test/dev-test/')
+  console.log(tree.value)
+
+  return {
+    // information
+    currentInfo,
+    folderList,
+    fileList,
+    tree,
+    // fetch
+    getStorage,
+    getStorageFile,
+    // traverse
+    goto,
+    gotoParent,
+  }
+})
+
+export default useStorage

From 1b47c58f12e17490c108d31161ff004892e1254f Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Sun, 10 Dec 2023 09:30:48 +0700
Subject: [PATCH 09/26] fix: missing trailing slash

---
 Services/server/src/controllers/folderController.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Services/server/src/controllers/folderController.ts b/Services/server/src/controllers/folderController.ts
index 06bd264..e8aafdc 100644
--- a/Services/server/src/controllers/folderController.ts
+++ b/Services/server/src/controllers/folderController.ts
@@ -185,7 +185,7 @@ export class FolderController extends Controller {
 
     const io = getInstance();
     io?.emit("EditFolder", {
-      from: `${cabinetName}/${drawerName}/${folderName}`,
+      from: `${cabinetName}/${drawerName}/${folderName}/`,
       to: `${cabinetName}/${drawerName}/${replaceIllegalChars(body.name)}/`,
     });
 

From de2dca7e4df98dd00b857e0a571f2151aa308728 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Sun, 10 Dec 2023 09:37:00 +0700
Subject: [PATCH 10/26] feat: socket.io emit more data

---
 .../server/src/controllers/cabinetController.ts  | 16 +++++++++++-----
 .../server/src/controllers/drawerController.ts   | 16 +++++++++++-----
 .../server/src/controllers/folderController.ts   | 16 +++++++++++-----
 .../src/controllers/subFolderController.ts       | 15 ++++++++++-----
 4 files changed, 43 insertions(+), 20 deletions(-)

diff --git a/Services/server/src/controllers/cabinetController.ts b/Services/server/src/controllers/cabinetController.ts
index 8d20f3f..c9b541c 100644
--- a/Services/server/src/controllers/cabinetController.ts
+++ b/Services/server/src/controllers/cabinetController.ts
@@ -78,17 +78,23 @@ export class CabinetController extends Controller {
       name: string;
     },
   ) {
+    const meta = {
+      createdAt: new Date().toISOString(),
+      createdBy: request.user.preferred_username,
+    };
+
     const created = await minioClient
-      .putObject(DEFAULT_BUCKET!, `${replaceIllegalChars(body.name)}/.keep`, "", 0, {
-        createdAt: new Date().toISOString(),
-        createdBy: request.user.preferred_username,
-      })
+      .putObject(DEFAULT_BUCKET!, `${replaceIllegalChars(body.name)}/.keep`, "", 0, meta)
       .catch((e) => console.error(e));
 
     if (!created) throw new Error("เกิดข้อผิดพลาดกับระบบจัดการไฟล์");
 
     const io = getInstance();
-    io?.emit("CreateFolder", { pathname: `${replaceIllegalChars(body.name)}/` });
+    io?.emit("CreateFolder", {
+      pathname: `${replaceIllegalChars(body.name)}/`,
+      name: replaceIllegalChars(body.name),
+      ...meta,
+    });
 
     return this.setStatus(HttpStatusCode.CREATED);
   }
diff --git a/Services/server/src/controllers/drawerController.ts b/Services/server/src/controllers/drawerController.ts
index 1311697..a761fd5 100644
--- a/Services/server/src/controllers/drawerController.ts
+++ b/Services/server/src/controllers/drawerController.ts
@@ -93,17 +93,23 @@ export class DrawerController extends Controller {
       throw new HttpError(HttpStatusCode.NOT_FOUND, "ไม่พบตำแหน่งที่ต้องการสร้างลิ้นชัก");
     }
 
+    const meta = {
+      createdAt: new Date().toISOString(),
+      createdBy: request.user.preferred_username,
+    };
+
     const created = await minioClient
-      .putObject(DEFAULT_BUCKET!, `${basePath}${replaceIllegalChars(body.name)}/.keep`, "", 0, {
-        createdAt: new Date().toISOString(),
-        createdBy: request.user.preferred_username,
-      })
+      .putObject(DEFAULT_BUCKET!, `${basePath}${replaceIllegalChars(body.name)}/.keep`, "", 0, meta)
       .catch((e) => console.error(e));
 
     if (!created) throw new Error("เกิดข้อผิดพลาดกับระบบจัดการไฟล์");
 
     const io = getInstance();
-    io?.emit("CreateFolder", { pathname: `${basePath}${replaceIllegalChars(body.name)}/` });
+    io?.emit("CreateFolder", {
+      pathname: `${basePath}${replaceIllegalChars(body.name)}/`,
+      name: replaceIllegalChars(body.name),
+      ...meta,
+    });
 
     return this.setStatus(HttpStatusCode.CREATED);
   }
diff --git a/Services/server/src/controllers/folderController.ts b/Services/server/src/controllers/folderController.ts
index e8aafdc..358cb23 100644
--- a/Services/server/src/controllers/folderController.ts
+++ b/Services/server/src/controllers/folderController.ts
@@ -98,17 +98,23 @@ export class FolderController extends Controller {
       throw new HttpError(HttpStatusCode.NOT_FOUND, "ไม่พบตำแหน่งที่ต้องการสร้างลิ้นชัก");
     }
 
+    const meta = {
+      createdAt: new Date().toISOString(),
+      createdBy: request.user.preferred_username,
+    };
+
     const created = await minioClient
-      .putObject(DEFAULT_BUCKET!, `${basePath}${replaceIllegalChars(body.name)}/.keep`, "", 0, {
-        createdAt: new Date().toISOString(),
-        createdBy: request.user.preferred_username,
-      })
+      .putObject(DEFAULT_BUCKET!, `${basePath}${replaceIllegalChars(body.name)}/.keep`, "", 0, meta)
       .catch((e) => console.error(e));
 
     if (!created) throw new Error("เกิดข้อผิดพลาดกับระบบจัดการไฟล์");
 
     const io = getInstance();
-    io?.emit("CreateFolder", { pathname: `${basePath}${replaceIllegalChars(body.name)}/` });
+    io?.emit("CreateFolder", {
+      pathname: `${basePath}${replaceIllegalChars(body.name)}/`,
+      name: replaceIllegalChars(body.name),
+      ...meta,
+    });
 
     return this.setStatus(HttpStatusCode.CREATED);
   }
diff --git a/Services/server/src/controllers/subFolderController.ts b/Services/server/src/controllers/subFolderController.ts
index 1454aa6..8e02751 100644
--- a/Services/server/src/controllers/subFolderController.ts
+++ b/Services/server/src/controllers/subFolderController.ts
@@ -96,18 +96,23 @@ export class SubFolderController extends Controller {
     if (!(await pathExist(DEFAULT_BUCKET!, basePath))) {
       throw new HttpError(HttpStatusCode.NOT_FOUND, "ไม่พบตำแหน่งที่ต้องการสร้างลิ้นชัก");
     }
+    const meta = {
+      createdAt: new Date().toISOString(),
+      createdBy: request.user.preferred_username,
+    };
 
     const created = await minioClient
-      .putObject(DEFAULT_BUCKET!, `${basePath}${replaceIllegalChars(body.name)}/.keep`, "", 0, {
-        createdAt: new Date().toISOString(),
-        createdBy: request.user.preferred_username,
-      })
+      .putObject(DEFAULT_BUCKET!, `${basePath}${replaceIllegalChars(body.name)}/.keep`, "", 0, meta)
       .catch((e) => console.error(e));
 
     if (!created) throw new Error("เกิดข้อผิดพลาดกับระบบจัดการไฟล์");
 
     const io = getInstance();
-    io?.emit("CreateFolder", { pathname: `${basePath}${replaceIllegalChars(body.name)}/` });
+    io?.emit("CreateFolder", {
+      pathname: `${basePath}${replaceIllegalChars(body.name)}/`,
+      name: replaceIllegalChars(body.name),
+      ...meta,
+    });
 
     return this.setStatus(HttpStatusCode.CREATED);
   }

From 7c9579bb548dc10c5505699e49e0836bda3a78a8 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Sun, 10 Dec 2023 10:07:49 +0700
Subject: [PATCH 11/26] refactor: change event name

---
 Services/server/src/rabbitmq/handler.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/Services/server/src/rabbitmq/handler.ts b/Services/server/src/rabbitmq/handler.ts
index 568596c..9d8b5c0 100644
--- a/Services/server/src/rabbitmq/handler.ts
+++ b/Services/server/src/rabbitmq/handler.ts
@@ -144,7 +144,7 @@ async function handleNotFoundRecord(
   if (!result) return false;
 
   const io = getInstance();
-  io?.emit("FileUpdate", metadata);
+  io?.emit("FileUpload", metadata);
 
   return true;
 }
@@ -170,7 +170,7 @@ async function handleFoundRecord(
   if (!result) return false;
 
   const io = getInstance();
-  io?.emit("FileUpdate", metadata);
+  io?.emit("FileUpload", metadata);
 
   return true;
 }

From 171aaf144cf4df8ef1428453fc38436f80f3c0da Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Sun, 10 Dec 2023 10:16:01 +0700
Subject: [PATCH 12/26] feat: file event emit

---
 .../server/src/controllers/fileController.ts  | 43 ++++++++++++++++---
 .../controllers/subFolderFileController.ts    | 37 ++++++++++++++--
 2 files changed, 70 insertions(+), 10 deletions(-)

diff --git a/Services/server/src/controllers/fileController.ts b/Services/server/src/controllers/fileController.ts
index 6baec35..1535974 100644
--- a/Services/server/src/controllers/fileController.ts
+++ b/Services/server/src/controllers/fileController.ts
@@ -23,6 +23,7 @@ import { StorageFile } from "../interfaces/storage-fs";
 import HttpError from "../interfaces/http-error";
 
 import { copyCond, pathExist, replaceIllegalChars } from "../utils/minio";
+import { getInstance } from "../lib/websocket";
 
 const DEFAULT_BUCKET = process.env.MINIO_BUCKET;
 const DEFAULT_INDEX = process.env.ELASTICSEARCH_INDEX;
@@ -200,6 +201,9 @@ export class FileController extends Controller {
       refresh: "wait_for",
     });
 
+    const io = getInstance();
+    io?.emit("FileUploadRequest", metadata);
+
     return {
       ...body,
       createdAt: metadata.createdAt,
@@ -288,6 +292,10 @@ export class FileController extends Controller {
 
         if (search && search.hits.hits.length > 0 && search.hits.hits[0]._source) {
           const { _index: index, _id: id } = search.hits.hits[0];
+          const meta = {
+            updatedAt: new Date().toISOString(),
+            updatedBy: request.user.preferred_username ?? "n/a",
+          };
           await esClient
             .update({
               index,
@@ -297,12 +305,24 @@ export class FileController extends Controller {
                 pathname: destination,
                 path: basePath,
                 fileName: replaceIllegalChars(file),
-                updatedAt: new Date().toISOString(),
-                updatedBy: request.user.preferred_username ?? "n/a",
+                ...meta,
               },
               refresh: "wait_for",
             })
             .then(() => minioClient.removeObject(DEFAULT_BUCKET!, pathname));
+
+          const io = getInstance();
+          io?.emit("FileUpdateMove", {
+            from: search.hits.hits[0]._source,
+            to: {
+              ...search.hits.hits[0]._source,
+              ...metadata,
+              pathname: destination,
+              path: basePath,
+              fileName: replaceIllegalChars(file),
+              ...meta,
+            },
+          });
         } else {
           await minioClient.removeObject(DEFAULT_BUCKET!, pathname);
         }
@@ -317,16 +337,25 @@ export class FileController extends Controller {
 
       if (search && search.hits.hits.length > 0 && search.hits.hits[0]._source) {
         const { _index: index, _id: id } = search.hits.hits[0];
+        const meta = {
+          updatedAt: new Date().toISOString(),
+          updatedBy: request.user.preferred_username ?? "n/a",
+        };
         await esClient.update({
           index,
           id,
-          doc: {
-            ...metadata,
-            updatedAt: new Date().toISOString(),
-            updatedBy: request.user.preferred_username ?? "n/a",
-          },
+          doc: { ...metadata, ...meta },
           refresh: "wait_for",
         });
+
+        const updated: StorageFile = {
+          ...search.hits.hits[0]._source,
+          ...metadata,
+          ...meta,
+        };
+
+        const io = getInstance();
+        io?.emit("FileUpdate", updated);
       }
     }
 
diff --git a/Services/server/src/controllers/subFolderFileController.ts b/Services/server/src/controllers/subFolderFileController.ts
index 717a87e..b66aca3 100644
--- a/Services/server/src/controllers/subFolderFileController.ts
+++ b/Services/server/src/controllers/subFolderFileController.ts
@@ -23,6 +23,7 @@ import { StorageFile } from "../interfaces/storage-fs";
 import HttpError from "../interfaces/http-error";
 
 import { copyCond, pathExist, replaceIllegalChars } from "../utils/minio";
+import { getInstance } from "../lib/websocket";
 
 const DEFAULT_BUCKET = process.env.MINIO_BUCKET;
 const DEFAULT_INDEX = process.env.ELASTICSEARCH_INDEX;
@@ -206,6 +207,9 @@ export class SubFolderFileController extends Controller {
       refresh: "wait_for",
     });
 
+    const io = getInstance();
+    io?.emit("FileUploadRequest", metadata);
+
     return {
       ...body,
       createdAt: metadata.createdAt,
@@ -292,7 +296,10 @@ export class SubFolderFileController extends Controller {
             query: { match: { pathname } },
           })
           .catch((e) => console.error(e));
-
+        const meta = {
+          updatedAt: new Date().toISOString(),
+          updatedBy: request.user.preferred_username ?? "n/a",
+        };
         if (search && search.hits.hits.length > 0 && search.hits.hits[0]._source) {
           const { _index: index, _id: id } = search.hits.hits[0];
           await esClient
@@ -304,12 +311,24 @@ export class SubFolderFileController extends Controller {
                 pathname: destination,
                 path: basePath,
                 fileName: replaceIllegalChars(file),
-                updatedAt: new Date().toISOString(),
-                updatedBy: request.user.preferred_username ?? "n/a",
+                ...meta,
               },
               refresh: "wait_for",
             })
             .then(() => minioClient.removeObject(DEFAULT_BUCKET!, pathname));
+
+          const io = getInstance();
+          io?.emit("FileUpdateMove", {
+            from: search.hits.hits[0]._source,
+            to: {
+              ...search.hits.hits[0]._source,
+              ...metadata,
+              pathname: destination,
+              path: basePath,
+              fileName: replaceIllegalChars(file),
+              ...meta,
+            },
+          });
         } else {
           await minioClient.removeObject(DEFAULT_BUCKET!, pathname);
         }
@@ -324,6 +343,10 @@ export class SubFolderFileController extends Controller {
 
       if (search && search.hits.hits.length > 0 && search.hits.hits[0]._source) {
         const { _index: index, _id: id } = search.hits.hits[0];
+        const meta = {
+          updatedAt: new Date().toISOString(),
+          updatedBy: request.user.preferred_username ?? "n/a",
+        };
         await esClient.update({
           index,
           id,
@@ -334,6 +357,14 @@ export class SubFolderFileController extends Controller {
           },
           refresh: "wait_for",
         });
+        const updated: StorageFile = {
+          ...search.hits.hits[0]._source,
+          ...metadata,
+          ...meta,
+        };
+
+        const io = getInstance();
+        io?.emit("FileUpdate", updated);
       }
     }
 

From 5335f9af89cf07bbaa8e494b30f31f92607b4baf Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Sun, 10 Dec 2023 15:00:50 +0700
Subject: [PATCH 13/26] feat: implement socket on edit and fews method

---
 Services/client/src/stores/storage.ts | 137 ++++++++++++++++++--------
 1 file changed, 95 insertions(+), 42 deletions(-)

diff --git a/Services/client/src/stores/storage.ts b/Services/client/src/stores/storage.ts
index 3533435..a975cc8 100644
--- a/Services/client/src/stores/storage.ts
+++ b/Services/client/src/stores/storage.ts
@@ -1,8 +1,11 @@
 import { computed, reactive, ref } from 'vue'
 import { defineStore } from 'pinia'
 import { io } from 'socket.io-client'
+
 import api from '@/services/HttpService'
 
+import { useLoader } from './loader'
+
 function constructUrl(path: string | string[], append = true) {
   const arr = Array.isArray(path) ? path : path.split('/').filter(Boolean)
   const url =
@@ -26,8 +29,10 @@ function constructUrl(path: string | string[], append = true) {
     : url
 }
 
-const useStorage = defineStore('storage', async () => {
-  const folderList = ref<
+const useStorage = defineStore('storageStore', () => {
+  const loader = useLoader()
+  const init = ref<boolean>(false)
+  const folder = ref<
     Record<
       string, // path that contains folders
       {
@@ -36,7 +41,7 @@ const useStorage = defineStore('storage', async () => {
       }[]
     >
   >({})
-  const fileList = ref<
+  const file = ref<
     Record<
       string, // path that contains files
       {
@@ -61,17 +66,18 @@ const useStorage = defineStore('storage', async () => {
       pathname: string
       name: string
       folder: Structure
-      file: (typeof fileList.value)[string]
+      file: (typeof file.value)[string]
     }[]
 
     let structure: Structure = []
 
     // parse list of folder and list of file into tree
-    Object.entries(folderList.value).forEach(([key, value]) => {
+    Object.entries(folder.value).forEach(([key, value]) => {
       const arr = key.split('/').filter(Boolean)
 
       // init outer tree
       if (arr.length === 0) {
+        if (!init.value) init.value = true
         structure = value.map((v) => ({
           pathname: v.pathname,
           name: v.name,
@@ -97,7 +103,7 @@ const useStorage = defineStore('storage', async () => {
             folder: [],
             file: [],
           }))
-          current.file = fileList.value[key] ?? []
+          current.file = file.value[key] ?? []
         }
       }
     })
@@ -109,15 +115,18 @@ const useStorage = defineStore('storage', async () => {
     dept: number
   }>({
     path: '',
-    dept: 0,
+    dept: 1,
   })
+  if (!init.value) goto()
 
   async function getStorage(path: string = '') {
-    const res = await api.get<(typeof folderList.value)[string]>(
-      constructUrl(path),
-    )
-    if (res.status === 200)
-      folderList.value[path] = res.data.sort((a, b) =>
+    const arr = path.split('/').filter(Boolean)
+
+    if (arr.length >= 4) return // this system does not have more than 4 level
+
+    const res = await api.get<(typeof folder.value)[string]>(constructUrl(arr))
+    if (res.status === 200 && res.data && Array.isArray(res.data))
+      folder.value[path] = res.data.sort((a, b) =>
         a.pathname.localeCompare(b.pathname),
       )
   }
@@ -125,31 +134,34 @@ const useStorage = defineStore('storage', async () => {
   async function getStorageFile(path: string = '') {
     const arr = path.split('/').filter(Boolean)
 
-    if (arr.length < 3) return
+    if (arr.length < 3) return // file in this system only lives in level 3 and 4
 
-    const res = await api.get<(typeof fileList.value)[string]>(
-      constructUrl(path, false) + '/file',
+    const res = await api.get<(typeof file.value)[string]>(
+      constructUrl(arr, false) + '/file',
     )
-    if (res.status === 200)
-      fileList.value[path] = res.data.sort((a, b) =>
+    if (res.status === 200 && res.data && Array.isArray(res.data))
+      file.value[path] = res.data.sort((a, b) =>
         a.pathname.localeCompare(b.pathname),
       )
   }
 
-  async function goto(path: string) {
+  async function goto(path: string = '', force = false) {
+    loader.show()
     const arr = path.split('/').filter(Boolean)
 
+    // get all parent to the root structure
     for (let i = 0; i < arr.length; i++) {
       const current = arr.slice(0, i - arr.length).join('/') + '/'
-      if (!folderList.value[current]) await getStorage(current)
+      if (!folder.value[current] || force) await getStorage(current)
     }
 
     // only get this path once, after that will get from socket.io-client instead
-    if (!folderList.value[path]) await getStorage(path)
-    if (!fileList.value[path]) await getStorageFile(path)
+    if (!folder.value[path] || force) await getStorage(path)
+    if (!file.value[path] || force) await getStorageFile(path)
 
     currentInfo.path = path
-    currentInfo.dept = path.split('/').filter(Boolean).length - 1
+    currentInfo.dept = path.split('/').filter(Boolean).length
+    loader.hide()
   }
 
   async function gotoParent() {
@@ -157,7 +169,8 @@ const useStorage = defineStore('storage', async () => {
     await goto([...arr.slice(0, -1), ''].join('/'))
   }
 
-  const socket = io('http://localhost:25570')
+  // socket.io zone
+  const socket = io('http://localhost:25565')
 
   socket.on('connect', () => console.info('Socket.io connected.'))
   socket.on('disconnect', () => console.info('Socket.io disconnected.'))
@@ -165,45 +178,81 @@ const useStorage = defineStore('storage', async () => {
     const arr = data.pathname.split('/').filter(Boolean)
     const path = [...arr.slice(0, -1), ''].join('/')
 
-    if (folderList.value[path]) {
-      folderList.value[path].push({
+    if (folder.value[path]) {
+      folder.value[path].push({
         pathname: data.pathname,
         name: arr[arr.length - 1],
       })
-      folderList.value[path].sort((a, b) =>
-        a.pathname.localeCompare(b.pathname),
-      )
+      folder.value[path].sort((a, b) => a.pathname.localeCompare(b.pathname))
+    }
+  })
+  // NOTE:
+  // API planned to make new endpoint that can move and rename in one go.
+  // Need to change if api handle move and rename file instead of just edit.
+  socket.on('EditFolder', (data: { from: string; to: string }) => {
+    const src = data.from.split('/').filter(Boolean)
+    const dst = data.to.split('/').filter(Boolean)
+    const path = [...src.slice(0, -1), ''].join('/')
+
+    if (folder.value[path]) {
+      const val = folder.value[path].find((v) => v.pathname === data.from)
+
+      if (val) {
+        val.pathname = data.to
+        val.name = dst[dst.length - 1]
+      }
+    }
+
+    for (let key in folder.value) {
+      if (key.startsWith(data.from)) {
+        folder.value[key.replace(data.from, data.to)] = folder.value[key].map(
+          (v) => {
+            v.pathname = v.pathname.replace(data.from, data.to)
+            return v
+          },
+        )
+        delete folder.value[key]
+      }
     }
   })
-  socket.on(
-    'EditFolder',
-    (data: { from: { pathname: string }; to: { pathname: string } }) => {
-      console.log(data) // TODO: Implement
-    },
-  )
   socket.on('DeleteFolder', (data: { pathname: string }) => {
-    if (folderList.value[data.pathname]) {
-      delete folderList.value[data.pathname]
+    for (let key in folder.value) {
+      if (key.startsWith(data.pathname)) {
+        delete folder.value[key]
+      }
     }
 
     const arr = data.pathname.split('/').filter(Boolean)
     const path = [...arr.slice(0, -1), ''].join('/')
 
-    if (folderList.value[path]) {
-      folderList.value[path] = folderList.value[path].filter(
+    if (folder.value[path]) {
+      folder.value[path] = folder.value[path].filter(
         (v) => v.pathname !== data.pathname,
       )
     }
   })
 
-  await goto('เอกสารทดสอบระบบ/dev-test/dev-test/')
-  console.log(tree.value)
+  async function createFolder(name: string, path: string = currentInfo.path) {
+    loader.show()
+    await api.post(constructUrl(path, true), { name })
+    loader.hide()
+  }
+  async function editFolder(name: string, path: string) {
+    loader.show()
+    await api.put(constructUrl(path), { name })
+    loader.hide()
+  }
+  async function deleteFolder(path: string) {
+    loader.show()
+    await api.delete(constructUrl(path))
+    loader.hide()
+  }
 
   return {
     // information
     currentInfo,
-    folderList,
-    fileList,
+    folder,
+    file,
     tree,
     // fetch
     getStorage,
@@ -211,6 +260,10 @@ const useStorage = defineStore('storage', async () => {
     // traverse
     goto,
     gotoParent,
+    // operation
+    createFolder,
+    editFolder,
+    deleteFolder,
   }
 })
 

From 0225d6387fbc01ef7c93974357897b42d5b5c3eb Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Sun, 10 Dec 2023 19:33:32 +0700
Subject: [PATCH 14/26] feat: file operation

---
 Services/client/src/stores/storage.ts | 72 +++++++++++++++++++++++++--
 1 file changed, 69 insertions(+), 3 deletions(-)

diff --git a/Services/client/src/stores/storage.ts b/Services/client/src/stores/storage.ts
index a975cc8..0cfe8a9 100644
--- a/Services/client/src/stores/storage.ts
+++ b/Services/client/src/stores/storage.ts
@@ -1,6 +1,7 @@
 import { computed, reactive, ref } from 'vue'
 import { defineStore } from 'pinia'
 import { io } from 'socket.io-client'
+import axios from 'axios'
 
 import api from '@/services/HttpService'
 
@@ -117,7 +118,8 @@ const useStorage = defineStore('storageStore', () => {
     path: '',
     dept: 1,
   })
-  if (!init.value) goto()
+
+  if (!init.value) goto(sessionStorage.getItem('path') || '')
 
   async function getStorage(path: string = '') {
     const arr = path.split('/').filter(Boolean)
@@ -161,6 +163,7 @@ const useStorage = defineStore('storageStore', () => {
 
     currentInfo.path = path
     currentInfo.dept = path.split('/').filter(Boolean).length
+    sessionStorage.setItem('path', path)
     loader.hide()
   }
 
@@ -239,12 +242,72 @@ const useStorage = defineStore('storageStore', () => {
   }
   async function editFolder(name: string, path: string) {
     loader.show()
-    await api.put(constructUrl(path), { name })
+    await api.put(constructUrl(path, false), { name })
     loader.hide()
   }
   async function deleteFolder(path: string) {
     loader.show()
-    await api.delete(constructUrl(path))
+    await api.delete(constructUrl(path, false))
+    loader.hide()
+  }
+
+  type FileMetadata = {
+    title?: string
+    description?: string
+    keyword?: string[]
+    category?: string[]
+  }
+  async function createFile(
+    file: File,
+    data: FileMetadata,
+    path: string = currentInfo.path,
+  ) {
+    if (path.split('/').filter(Boolean).length < 3) return // the system only allow file to live in level 3 and 4
+
+    loader.show()
+    const res = await api.post(constructUrl(path, false) + '/file', {
+      file: file.name,
+      ...data,
+    })
+    if (res && res.status === 201 && res.data && res.data.upload) {
+      await axios
+        .put(res.data.upload, file, {
+          headers: { 'Content-Type': file.type },
+          onUploadProgress: (e) => console.log(e),
+        })
+        .catch((e) => console.error(e))
+    }
+    loader.hide()
+  }
+  async function updateFile(pathname: string, data: FileMetadata, file?: File) {
+    const arr = pathname.split('/')
+
+    if (arr.length < 4) return // the system only allow file to live in level 3 and 4
+
+    loader.show()
+    const res = await api.patch(
+      constructUrl(arr.slice(0, -1), false) + `/file/${arr[arr.length - 1]}`,
+      { file: file?.name, ...data },
+    )
+    if (res && res.status === 201 && res.data && res.data.upload) {
+      await axios
+        .put(res.data.upload, file, {
+          headers: { 'Content-Type': file?.type },
+          onUploadProgress: (e) => console.log(e),
+        })
+        .catch((e) => console.error(e))
+    }
+    loader.hide()
+  }
+  async function deleteFile(pathname: string) {
+    const arr = pathname.split('/')
+
+    if (arr.length < 4) return // the system only allow file to live in level 3 and 4
+
+    loader.show()
+    await api.patch(
+      constructUrl(arr.slice(0, -1), false) + `/file/${arr[arr.length - 1]}`,
+    )
     loader.hide()
   }
 
@@ -264,6 +327,9 @@ const useStorage = defineStore('storageStore', () => {
     createFolder,
     editFolder,
     deleteFolder,
+    createFile,
+    updateFile,
+    deleteFile,
   }
 })
 

From 4e398ab2ad439f70dcad35b4f430d33a48fe4424 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Sun, 10 Dec 2023 20:52:05 +0700
Subject: [PATCH 15/26] fix: only replace from path from start of string

---
 Services/client/src/stores/storage.ts | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/Services/client/src/stores/storage.ts b/Services/client/src/stores/storage.ts
index 0cfe8a9..1b58a37 100644
--- a/Services/client/src/stores/storage.ts
+++ b/Services/client/src/stores/storage.ts
@@ -152,6 +152,7 @@ const useStorage = defineStore('storageStore', () => {
     const arr = path.split('/').filter(Boolean)
 
     // get all parent to the root structure
+    // this will also triggher init structure as it get root structure
     for (let i = 0; i < arr.length; i++) {
       const current = arr.slice(0, i - arr.length).join('/') + '/'
       if (!folder.value[current] || force) await getStorage(current)
@@ -206,17 +207,28 @@ const useStorage = defineStore('storageStore', () => {
       }
     }
 
+    const regex = new RegExp(`^${data.from}`)
+
     for (let key in folder.value) {
       if (key.startsWith(data.from)) {
-        folder.value[key.replace(data.from, data.to)] = folder.value[key].map(
+        folder.value[key.replace(regex, data.to)] = folder.value[key].map(
           (v) => {
-            v.pathname = v.pathname.replace(data.from, data.to)
+            v.pathname = v.pathname.replace(regex, data.to)
             return v
           },
         )
         delete folder.value[key]
       }
     }
+    for (let key in file.value) {
+      if (key.startsWith(data.from)) {
+        file.value[key.replace(regex, data.to)] = file.value[key].map((v) => {
+          v.pathname = v.pathname.replace(regex, data.to)
+          return v
+        })
+        delete file.value[key]
+      }
+    }
   })
   socket.on('DeleteFolder', (data: { pathname: string }) => {
     for (let key in folder.value) {

From a096a2520baabda11a3f60c2aacf7a56d17bccf9 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Mon, 11 Dec 2023 10:10:23 +0700
Subject: [PATCH 16/26] feat: add form wrapper for easier component management

---
 .../client/src/components/FileFormWrapper.vue | 135 ++++++++++++++++++
 .../src/components/FolderFormWrapper.vue      |  59 ++++++++
 2 files changed, 194 insertions(+)
 create mode 100644 Services/client/src/components/FileFormWrapper.vue
 create mode 100644 Services/client/src/components/FolderFormWrapper.vue

diff --git a/Services/client/src/components/FileFormWrapper.vue b/Services/client/src/components/FileFormWrapper.vue
new file mode 100644
index 0000000..5ed7262
--- /dev/null
+++ b/Services/client/src/components/FileFormWrapper.vue
@@ -0,0 +1,135 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { storeToRefs } from 'pinia'
+import useStorage from '@/stores/storage'
+import FileForm from './FileForm.vue'
+
+const storageStore = useStorage()
+const { file, currentInfo } = storeToRefs(storageStore)
+const { createFile, updateFile } = storageStore
+
+const fileFormState = ref<boolean>(false)
+const fileFormPath = ref<string>('')
+const fileFormData = ref<{
+  file?: File
+  title?: string
+  description?: string
+  keyword?: string[]
+  category?: string[]
+}>({})
+const fileFormType = ref<'edit' | 'create'>('create')
+const fileFormError = ref<{ fileExist?: boolean; fileName2Long?: boolean }>({})
+const fileExistNotification = ref<boolean>(false)
+const fileFormComponent = ref<InstanceType<typeof FileForm>>()
+
+function triggerFileCreate() {
+  fileFormType.value = 'create'
+  fileFormData.value = {}
+  fileFormState.value = !fileFormState.value
+}
+
+function triggerFileEdit(
+  value: {
+    title: string
+    description: string
+    keyword: string[]
+    category: string[]
+  },
+  pathname: string,
+) {
+  fileFormState.value = true
+  fileFormType.value = 'edit'
+  fileFormPath.value = pathname
+  fileFormData.value = {
+    title: value.title,
+    description: value.description,
+    keyword: value.keyword,
+    category: value.category,
+  }
+}
+
+defineExpose({
+  triggerFileCreate,
+  triggerFileEdit,
+})
+
+const currentParam = ref<Parameters<typeof submitFileForm>[0]>()
+
+function checkFileExist(name: string) {
+  return Boolean(
+    file.value[currentInfo.value.path].find((v) => v.fileName === name),
+  )
+}
+
+async function submitFileForm(
+  value: {
+    mode: 'create' | 'edit'
+    file?: File
+    title: string
+    description: string
+    keyword: string[]
+    category: string[]
+  },
+  force = false,
+) {
+  currentParam.value = value
+
+  if (
+    value.file &&
+    file.value[currentInfo.value.path].find(
+      (v) => v.fileName === value.file?.name,
+    ) &&
+    !force
+  ) {
+    fileExistNotification.value = true
+    return
+  }
+
+  if (value.mode === 'create' && value.file) {
+    await createFile(value.file, {
+      title: value.title,
+      description: value.description,
+      keyword: value.keyword,
+      category: value.category,
+    })
+  } else {
+    await updateFile(
+      fileFormPath.value,
+      {
+        title: value.title,
+        description: value.description,
+        keyword: value.keyword,
+        category: value.category,
+      },
+      value.file,
+    )
+  }
+  fileFormData.value = {}
+  fileFormState.value = false
+  currentParam.value = undefined
+  fileFormComponent.value?.reset()
+}
+</script>
+
+<template>
+  <file-form
+    ref="fileFormComponent"
+    :mode="fileFormType"
+    :error="fileFormError"
+    v-model:open="fileFormState"
+    v-model:title="fileFormData.title"
+    v-model:description="fileFormData.description"
+    v-model:keyword="fileFormData.keyword"
+    v-model:category="fileFormData.category"
+    @reset="() => (fileFormError = {})"
+    @filechange="
+      (name: string) => (fileFormError.fileExist = checkFileExist(name))
+    "
+    @submit="submitFileForm"
+  />
+  <upload-exist-dialog
+    v-model:notification="fileExistNotification"
+    @confirm="() => currentParam && submitFileForm(currentParam, true)"
+    @cancel="() => (currentParam = undefined)"
+  />
+</template>
diff --git a/Services/client/src/components/FolderFormWrapper.vue b/Services/client/src/components/FolderFormWrapper.vue
new file mode 100644
index 0000000..5f42442
--- /dev/null
+++ b/Services/client/src/components/FolderFormWrapper.vue
@@ -0,0 +1,59 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { storeToRefs } from 'pinia'
+import useStorage from '@/stores/storage'
+import FolderForm from './FolderForm.vue'
+
+const storageStore = useStorage()
+const { file, currentInfo } = storeToRefs(storageStore)
+const { createFolder, editFolder } = storageStore
+
+const folderFormState = ref<boolean>(false)
+const folderFormPath = ref<string>('')
+const folderFormData = ref<{
+  name?: string
+}>({})
+const folderFormType = ref<'edit' | 'create'>('create')
+
+function triggerFolderCreate() {
+  folderFormType.value = 'create'
+  folderFormData.value = {}
+  folderFormState.value = !folderFormState.value
+}
+
+function triggerFolderEdit(name: string, pathname: string) {
+  folderFormType.value = 'edit'
+  folderFormPath.value = pathname
+  folderFormData.value.name = name
+  folderFormState.value = true
+}
+
+defineExpose({
+  triggerFolderCreate,
+  triggerFolderEdit,
+})
+
+async function submitFolderForm(value: {
+  mode: 'create' | 'edit'
+  name: string
+}) {
+  if (value.mode === 'create') {
+    await createFolder(value.name)
+  } else {
+    await editFolder(value.name, folderFormPath.value)
+  }
+}
+</script>
+
+<template>
+  <folder-form
+    :mode="folderFormType"
+    :tree="
+      (['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย'] as const)[currentInfo.dept]
+    "
+    v-if="currentInfo.dept < 4"
+    v-model:open="folderFormState"
+    v-model:name="folderFormData.name"
+    @submit="submitFolderForm"
+  />
+</template>

From 506a65f27a4fe58afe711281c72f81935468817c Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Mon, 11 Dec 2023 10:10:39 +0700
Subject: [PATCH 17/26] refactor: check keycloak init

---
 .../client/src/services/KeyCloakService.ts    | 21 ++++++++++++-------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/Services/client/src/services/KeyCloakService.ts b/Services/client/src/services/KeyCloakService.ts
index 8c7ce11..dfa2662 100644
--- a/Services/client/src/services/KeyCloakService.ts
+++ b/Services/client/src/services/KeyCloakService.ts
@@ -2,15 +2,20 @@ import Keycloak from 'keycloak-js'
 
 const keycloak = new Keycloak('/keycloak.json')
 
-export async function login(cb?: (...args: any[]) => void) {
-  const auth = await keycloak
-    .init({
-      onLoad: 'login-required',
-      responseMode: 'query',
-      checkLoginIframe: false,
-    })
-    .catch((e) => console.dir(e))
+let init = false
 
+export async function login(cb?: (...args: any[]) => void) {
+  const auth = !init
+    ? await keycloak
+        .init({
+          onLoad: 'login-required',
+          responseMode: 'query',
+          checkLoginIframe: false,
+        })
+        .catch((e) => console.dir(e))
+    : await keycloak.login().catch((e) => console.dir(e))
+
+  if (auth) init = true
   if (auth && cb) cb()
 }
 

From 52cbf576130531b1c1ce2e816dfd7a4de4451fb2 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Mon, 11 Dec 2023 10:10:45 +0700
Subject: [PATCH 18/26] fix: wrong method

---
 Services/client/src/stores/storage.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Services/client/src/stores/storage.ts b/Services/client/src/stores/storage.ts
index 1b58a37..4921ece 100644
--- a/Services/client/src/stores/storage.ts
+++ b/Services/client/src/stores/storage.ts
@@ -317,7 +317,7 @@ const useStorage = defineStore('storageStore', () => {
     if (arr.length < 4) return // the system only allow file to live in level 3 and 4
 
     loader.show()
-    await api.patch(
+    await api.delete(
       constructUrl(arr.slice(0, -1), false) + `/file/${arr[arr.length - 1]}`,
     )
     loader.hide()

From 5a7c56a67ecf1550fb1b6c404d3092226d081db0 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Mon, 11 Dec 2023 10:11:18 +0700
Subject: [PATCH 19/26] refactor: code

---
 Services/client/src/stores/file-info-data.ts | 139 ++++++-------------
 1 file changed, 45 insertions(+), 94 deletions(-)

diff --git a/Services/client/src/stores/file-info-data.ts b/Services/client/src/stores/file-info-data.ts
index f030f9f..d7b9450 100644
--- a/Services/client/src/stores/file-info-data.ts
+++ b/Services/client/src/stores/file-info-data.ts
@@ -12,8 +12,8 @@ export interface TypeSetting {
 }
 
 export const useFileInfoStore = defineStore('info', () => {
-  const fileInfo = ref<EhrFile>()
   const isFilePreview = ref<Boolean>(false)
+  const fileInfo = ref<EhrFile>()
   const fileIcon: TypeSetting = {
     word: { icon: 'mdi-file-word-outline', color: 'blue-11' },
     excel: { icon: 'mdi-file-excel-outline', color: 'green-4' },
@@ -23,103 +23,55 @@ export const useFileInfoStore = defineStore('info', () => {
     image: { icon: 'mdi-file-image-outline', color: 'blue-11' },
   }
   const mimeFileMapping: MimeMap = {
-    'application/msword': {
-      ...fileIcon.word,
-    },
-    'application/vnd.openxmlformats-officedocument.wordprocessingml.document': {
-      ...fileIcon.word,
-    },
-    'application/vnd.openxmlformats-officedocument.wordprocessingml.template': {
-      ...fileIcon.word,
-    },
-    'application/vnd.ms-word.document.macroEnabled.12': {
-      ...fileIcon.word,
-    },
-    'application/vnd.ms-word.template.macroEnabled.12': {
-      ...fileIcon.word,
-    },
-
-    'application/vnd.ms-excel': {
-      ...fileIcon.excel,
-    },
-    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': {
-      ...fileIcon.excel,
-    },
-    'application/vnd.openxmlformats-officedocument.spreadsheetml.template': {
-      ...fileIcon.excel,
-    },
-    'application/vnd.ms-excel.sheet.macroEnabled.12': {
-      ...fileIcon.excel,
-    },
-    'application/vnd.ms-excel.template.macroEnabled.12': {
-      ...fileIcon.excel,
-    },
-    'application/vnd.ms-excel.addin.macroEnabled.12': {
-      ...fileIcon.excel,
-    },
-    'application/vnd.ms-excel.sheet.binary.macroEnabled.12': {
-      ...fileIcon.excel,
-    },
-
-    'application/vnd.ms-powerpoint': {
-      ...fileIcon.powerpoint,
-    },
+    'application/msword': fileIcon.word,
+    'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
+      fileIcon.word,
+    'application/vnd.openxmlformats-officedocument.wordprocessingml.template':
+      fileIcon.word,
+    'application/vnd.ms-word.document.macroEnabled.12': fileIcon.word,
+    'application/vnd.ms-word.template.macroEnabled.12': fileIcon.word,
+    'application/vnd.ms-excel': fileIcon.excel,
+    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
+      fileIcon.excel,
+    'application/vnd.openxmlformats-officedocument.spreadsheetml.template':
+      fileIcon.excel,
+    'application/vnd.ms-excel.sheet.macroEnabled.12': fileIcon.excel,
+    'application/vnd.ms-excel.template.macroEnabled.12': fileIcon.excel,
+    'application/vnd.ms-excel.addin.macroEnabled.12': fileIcon.excel,
+    'application/vnd.ms-excel.sheet.binary.macroEnabled.12': fileIcon.excel,
+    'application/vnd.ms-powerpoint': fileIcon.powerpoint,
     'application/vnd.openxmlformats-officedocument.presentationml.presentation':
-      {
-        ...fileIcon.powerpoint,
-      },
-    'application/vnd.openxmlformats-officedocument.presentationml.template': {
-      ...fileIcon.powerpoint,
-    },
-    'application/vnd.openxmlformats-officedocument.presentationml.slideshow': {
-      ...fileIcon.powerpoint,
-    },
-    'application/vnd.ms-powerpoint.addin.macroEnabled.12': {
-      ...fileIcon.powerpoint,
-    },
-    'application/vnd.ms-powerpoint.presentation.macroEnabled.12': {
-      ...fileIcon.powerpoint,
-    },
-    'application/vnd.ms-powerpoint.template.macroEnabled.12': {
-      ...fileIcon.powerpoint,
-    },
-    'application/vnd.ms-powerpoint.slideshow.macroEnabled.12': {
-      ...fileIcon.powerpoint,
-    },
-
-    'application/pdf': {
-      ...fileIcon.pdf,
-    },
-
-    'text/plain': {
-      ...fileIcon.txt,
-    },
-
-    'image/png': {
-      ...fileIcon.image,
-    },
-    'image/jpeg': {
-      ...fileIcon.image,
-    },
+      fileIcon.powerpoint,
+    'application/vnd.openxmlformats-officedocument.presentationml.template':
+      fileIcon.powerpoint,
+    'application/vnd.openxmlformats-officedocument.presentationml.slideshow':
+      fileIcon.powerpoint,
+    'application/vnd.ms-powerpoint.addin.macroEnabled.12': fileIcon.powerpoint,
+    'application/vnd.ms-powerpoint.presentation.macroEnabled.12':
+      fileIcon.powerpoint,
+    'application/vnd.ms-powerpoint.template.macroEnabled.12':
+      fileIcon.powerpoint,
+    'application/vnd.ms-powerpoint.slideshow.macroEnabled.12':
+      fileIcon.powerpoint,
+    'application/pdf': fileIcon.pdf,
+    'text/plain': fileIcon.txt,
+    'image/png': fileIcon.image,
+    'image/jpeg': fileIcon.image,
   }
 
   function getType(
     mimeType: string | undefined,
     fileName: string | undefined,
   ): string {
-    if (mimeType === undefined) {
-      return 'ไม่ทราบประเภท'
+    if (mimeType === undefined) return 'ไม่ทราบประเภท'
+
+    const extension = mime.getExtension(mimeType)
+
+    if (extension) return '.' + extension
+    if (fileName && fileName.includes('.')) {
+      return fileName.substring(fileName.lastIndexOf('.'))
     }
 
-    const extFomMime = mime.getExtension(mimeType)
-    if (extFomMime) {
-      return '.' + extFomMime
-    }
-    if (fileName && fileName.includes('.')) {
-      const dotIndex = fileName.lastIndexOf('.')
-      const extension = fileName.substring(dotIndex)
-      return extension
-    }
     return 'ไม่ทราบประเภท'
   }
 
@@ -136,15 +88,14 @@ export const useFileInfoStore = defineStore('info', () => {
   }
 
   function getSize(size: string | undefined): string {
-    if (size === undefined) {
-      return 'ไม่ทราบขนาด'
-    }
+    if (size === undefined) return 'ไม่ทราบขนาด'
+
     const units = ['B', 'KB', 'MB', 'GB', 'TB']
+
     let i = 0
     let sizeNumber = parseFloat(size)
-    while (sizeNumber >= 1024 && i < units.length - 1) {
+    while (sizeNumber >= 1024 && i++ < units.length - 1) {
       sizeNumber /= 1024
-      i++
     }
     return sizeNumber.toFixed(2) + ' ' + units[i]
   }

From 47fe2f8f0a088682573cc94b76523e33b9dbffe7 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Mon, 11 Dec 2023 10:11:32 +0700
Subject: [PATCH 20/26] refactor: code readability

---
 Services/client/src/components/FileIcon.vue | 43 ++++++++-------------
 1 file changed, 16 insertions(+), 27 deletions(-)

diff --git a/Services/client/src/components/FileIcon.vue b/Services/client/src/components/FileIcon.vue
index c8c6957..7c524a5 100644
--- a/Services/client/src/components/FileIcon.vue
+++ b/Services/client/src/components/FileIcon.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { useFileInfoStore } from '@/stores/file-info-data'
 import mime from 'mime'
+import { useFileInfoStore } from '@/stores/file-info-data'
 
 const { mimeFileMapping } = useFileInfoStore()
 
@@ -11,44 +11,33 @@ defineProps<{
 }>()
 
 function getIcon(mimeType: string | undefined, fileName: string | undefined) {
-  if (mimeType === undefined) {
-    return 'mdi-file-question-outline'
-  }
+  if (!mimeType) return 'mdi-file-question-outline'
+
+  const extension = mime.getExtension(mimeType)
+
+  if (extension) return mimeFileMapping[mimeType].icon
+  if (fileName && fileName.includes('.')) return 'mdi-file-outline'
 
-  const extFomMime = mime.getExtension(mimeType)
-  if (extFomMime) {
-    return mimeFileMapping[mimeType].icon
-  }
-  if (fileName && fileName.includes('.')) {
-    return 'mdi-file-outline'
-  }
   return 'mdi-file-question-outline'
 }
 
 function getColor(mimeType: string | undefined, fileName: string | undefined) {
-  if (mimeType === undefined) {
-    return 'grey-5'
-  }
+  if (mimeType === undefined) return 'grey-5'
+
+  const extension = mime.getExtension(mimeType)
+
+  if (extension) return mimeFileMapping[mimeType].color
+  if (fileName && fileName.includes('.')) return 'blue-11'
 
-  const extFomMime = mime.getExtension(mimeType)
-  if (extFomMime) {
-    return mimeFileMapping[mimeType].color
-  }
-  if (fileName && fileName.includes('.')) {
-    return 'blue-11'
-  }
   return 'grey-5'
 }
 
-function getIconSize(s: string) {
-  type SizeMapping = {
-    [key: string]: string
-  }
-  const sizeMapping: SizeMapping = {
+function getIconSize(size: string) {
+  const sizeMapping = {
     preview: '6em',
     list: '2em',
   }
-  return sizeMapping[s]
+  return sizeMapping[size as keyof typeof sizeMapping]
 }
 </script>
 

From 8f716e6f44a87322ca63fabc935085651abb990a Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Mon, 11 Dec 2023 10:11:41 +0700
Subject: [PATCH 21/26] chore: var name

---
 Services/client/src/components/FullLoader.vue | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/Services/client/src/components/FullLoader.vue b/Services/client/src/components/FullLoader.vue
index 3e4bbc4..089a3b6 100644
--- a/Services/client/src/components/FullLoader.vue
+++ b/Services/client/src/components/FullLoader.vue
@@ -1,22 +1,20 @@
 <script setup lang="ts">
 import { watch, ref } from 'vue'
 
-const props = defineProps({
-  visibility: Boolean,
-})
+const props = defineProps({ visibility: Boolean })
+const visible = ref<boolean>(props.visibility)
 
-const loaderVisibility = ref<boolean>(props.visibility)
-
-watch(props, () => (loaderVisibility.value = props.visibility))
+watch(props, () => (visible.value = props.visibility))
 </script>
 
 <template>
-  <q-inner-loading :showing="loaderVisibility" class="loader">
+  <q-inner-loading :showing="visible" class="loader">
     <q-spinner-cube size="80px" color="primary" />
   </q-inner-loading>
 </template>
 
-<style lang="sass">
-.loader
-    z-index: 1000
+<style lang="scss">
+.loader {
+  z-index: 1000;
+}
 </style>

From 4bdf1f620b01bd6a75d2ccdcaca9d4985a7c2c6f Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Mon, 11 Dec 2023 15:51:27 +0700
Subject: [PATCH 22/26] chore: interface and type

---
 Services/client/src/stores/socket.ts  | 109 --------------------------
 Services/client/src/stores/storage.ts |  87 ++++++++++----------
 2 files changed, 46 insertions(+), 150 deletions(-)
 delete mode 100644 Services/client/src/stores/socket.ts

diff --git a/Services/client/src/stores/socket.ts b/Services/client/src/stores/socket.ts
deleted file mode 100644
index 68e580b..0000000
--- a/Services/client/src/stores/socket.ts
+++ /dev/null
@@ -1,109 +0,0 @@
-import { defineStore } from 'pinia'
-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()
-
-export const useSocketStore = defineStore('socket', () => {
-  const socket = io('http://localhost:25570')
-
-  socket.on('connect', () => {
-    console.log('SocketIO Connected')
-  })
-
-  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: [],
-        },
-      )
-
-      if (
-        currentFolder.value.findIndex(
-          (v) => v.name === pathArray[pathArray.length - 1],
-        ) === -1
-      ) {
-        currentFolder.value.push({
-          pathname: pathname,
-          name: pathArray[pathArray.length - 1],
-          status: true,
-          folder: [],
-          file: [],
-        })
-      }
-
-      currentFolder.value.sort((a, b) => {
-        return a.name.localeCompare(b.name)
-      })
-    }
-  })
-
-  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) => {
-    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,
-      )
-    }
-  })
-
-  socket.on('disconnect', () => {
-    console.log('SocketIO Disconnected')
-  })
-})
diff --git a/Services/client/src/stores/storage.ts b/Services/client/src/stores/storage.ts
index 4921ece..a2f1e76 100644
--- a/Services/client/src/stores/storage.ts
+++ b/Services/client/src/stores/storage.ts
@@ -7,6 +7,38 @@ import api from '@/services/HttpService'
 
 import { useLoader } from './loader'
 
+type Path = string
+
+export interface StorageFolder {
+  pathname: string
+  name: string
+  createdAt: string
+  createdBy: string
+}
+
+export interface StorageFile {
+  pathname: string
+  path: string
+  fileName: string
+  fileSize: string
+  fileType: string
+  title: string
+  description: string
+  category: string[]
+  keyword: string[]
+  updatedAt: string
+  updatedBy: string
+  createdAt: string
+  createdBy: string
+}
+
+export interface Structure extends StorageFolder {
+  folder: Structure[]
+  file: StorageFile[]
+}
+
+type Tree = Structure[]
+
 function constructUrl(path: string | string[], append = true) {
   const arr = Array.isArray(path) ? path : path.split('/').filter(Boolean)
   const url =
@@ -33,60 +65,29 @@ function constructUrl(path: string | string[], append = true) {
 const useStorage = defineStore('storageStore', () => {
   const loader = useLoader()
   const init = ref<boolean>(false)
-  const folder = ref<
-    Record<
-      string, // path that contains folders
-      {
-        pathname: string
-        name: string
-      }[]
-    >
-  >({})
-  const file = ref<
-    Record<
-      string, // path that contains files
-      {
-        pathname: string
-        path: string
-        fileName: string
-        fileSize: string
-        fileType: string
-        title: string
-        description: string
-        category: string[]
-        keyword: string[]
-        updatedAt: string
-        updatedBy: string
-        createdAt: string
-        createdBy: string
-      }[]
-    >
-  >({})
+  const folder = ref<Record<Path, StorageFolder[]>>({})
+  const file = ref<Record<Path, StorageFile[]>>({})
   const tree = computed(() => {
-    type Structure = {
-      pathname: string
-      name: string
-      folder: Structure
-      file: (typeof file.value)[string]
-    }[]
-
-    let structure: Structure = []
+    let structure: Tree = []
 
     // parse list of folder and list of file into tree
     Object.entries(folder.value).forEach(([key, value]) => {
       const arr = key.split('/').filter(Boolean)
 
-      // init outer tree
+      // Once run then it is init
+      if (!init.value) init.value = true
+
       if (arr.length === 0) {
-        if (!init.value) init.value = true
         structure = value.map((v) => ({
           pathname: v.pathname,
           name: v.name,
+          createdAt: v.createdAt,
+          createdBy: v.createdBy,
           folder: [],
           file: [],
         }))
       } else {
-        let current: Structure[number] | undefined
+        let current: Structure | undefined
 
         // traverse into tree
         arr.forEach((v, i) => {
@@ -101,6 +102,8 @@ const useStorage = defineStore('storageStore', () => {
           current.folder = value.map((v) => ({
             pathname: v.pathname,
             name: v.name,
+            createdAt: v.createdAt,
+            createdBy: v.createdBy,
             folder: [],
             file: [],
           }))
@@ -116,7 +119,7 @@ const useStorage = defineStore('storageStore', () => {
     dept: number
   }>({
     path: '',
-    dept: 1,
+    dept: 0,
   })
 
   if (!init.value) goto(sessionStorage.getItem('path') || '')
@@ -186,6 +189,8 @@ const useStorage = defineStore('storageStore', () => {
       folder.value[path].push({
         pathname: data.pathname,
         name: arr[arr.length - 1],
+        createdAt: 'n/a',
+        createdBy: 'n/a',
       })
       folder.value[path].sort((a, b) => a.pathname.localeCompare(b.pathname))
     }

From cc87de5995214b90f60f297695d4dcb56680a8b2 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Mon, 11 Dec 2023 15:51:59 +0700
Subject: [PATCH 23/26] refactor: migrate to storage

refactor: migrate to storage
---
 .../client/src/components/FileFormWrapper.vue |   1 +
 Services/client/src/components/FileItem.vue   | 394 +++++----------
 .../client/src/components/FileSearched.vue    | 180 ++-----
 Services/client/src/components/ListView.vue   | 451 +++++-------------
 Services/client/src/components/PageLayout.vue | 129 ++---
 Services/client/src/components/Profile.vue    |  24 +-
 .../client/src/components/TreeExplorer.vue    |  25 +-
 .../01_user/components/FileDownload.vue       |   4 +-
 .../modules/01_user/components/SearchBar.vue  |   4 +-
 Services/client/src/stores/file-info-data.ts  |  10 +-
 Services/client/src/stores/searched-data.ts   |  18 +-
 Services/client/src/views/MainLayout.vue      |  27 +-
 12 files changed, 388 insertions(+), 879 deletions(-)

diff --git a/Services/client/src/components/FileFormWrapper.vue b/Services/client/src/components/FileFormWrapper.vue
index 5ed7262..7b3dc92 100644
--- a/Services/client/src/components/FileFormWrapper.vue
+++ b/Services/client/src/components/FileFormWrapper.vue
@@ -3,6 +3,7 @@ import { ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import useStorage from '@/stores/storage'
 import FileForm from './FileForm.vue'
+import UploadExistDialog from './UploadExistDialog.vue'
 
 const storageStore = useStorage()
 const { file, currentInfo } = storeToRefs(storageStore)
diff --git a/Services/client/src/components/FileItem.vue b/Services/client/src/components/FileItem.vue
index 09ed4f7..0a14030 100644
--- a/Services/client/src/components/FileItem.vue
+++ b/Services/client/src/components/FileItem.vue
@@ -2,233 +2,109 @@
 import { computed, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 
-import FileIcon from '@/components/FileIcon.vue'
-import FileItemAction from '@/components/FileItemAction.vue'
-import DialogDelete from '@/components/DialogDelete.vue'
-import FileForm from './FileForm.vue'
-import FolderForm from './FolderForm.vue'
-import UploadExistDialog from './UploadExistDialog.vue'
-import { useTreeDataStore } from '@/stores/tree-data'
+import FileIcon from './FileIcon.vue'
+import FileItemAction from './FileItemAction.vue'
+import DialogDelete from './DialogDelete.vue'
+import FileFormWrapper from './FileFormWrapper.vue'
+import FolderFormWrapper from './FolderFormWrapper.vue'
+
 import { useFileInfoStore } from '@/stores/file-info-data'
+import useStorage from '@/stores/storage'
+
+const TREE_LEVEL_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย'] as const
 
 const props = withDefaults(
   defineProps<{ action: boolean; viewMode: 'view_list' | 'view_module' }>(),
-  {
-    action: false,
-  },
+  { action: false },
 )
-const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย'] as const
 const { getFileInfo } = useFileInfoStore()
-const { currentFolder, currentFile, currentDept, currentPath } =
-  storeToRefs(useTreeDataStore())
-const {
-  createFolder,
-  editFolder,
-  getFolder,
-  deleteFolder,
-  uploadFile,
-  updateFile,
-  deleteFile,
-  checkFile,
-  checkFileName,
-  refaceFile,
-} = useTreeDataStore()
+
+const storageStore = useStorage()
+const { folder, file, currentInfo } = storeToRefs(storageStore)
+const { goto, deleteFolder, deleteFile } = storageStore
+
+const fileFormComponent = ref<InstanceType<typeof FileFormWrapper>>()
+const folderFormComponent = ref<InstanceType<typeof FolderFormWrapper>>()
+
+const deleteState = ref<boolean>(false)
+const deletePath = ref<string>('')
+const deleteTarget = ref<'deleteFolder' | 'deleteFile'>()
+const deleteMap = { deleteFolder, deleteFile }
 
 const currentIcon = computed(() =>
-  currentDept.value === 0
+  currentInfo.value.dept === 0
     ? 'mdi-file-cabinet'
-    : currentDept.value === 1
+    : currentInfo.value.dept === 1
       ? 'o_inbox'
       : 'o_folder_open',
 )
 
-const dialogDeleteState = ref<boolean>(false)
-const deleteFormPath = ref<string>('')
-const deleteFormType = ref<'deleteFolder' | 'deleteFile'>()
-
-const folderFormState = ref<boolean>(false)
-const folderFormPath = ref<string>('')
-const folderFormData = ref<{
-  name?: string
-}>({})
-const folderFormType = ref<'edit' | 'create'>('create')
-const fileFormState = ref<boolean>(false)
-const fileFormPath = ref<string>('')
-const fileFormData = ref<{
-  file?: File
-  title?: string
-  description?: string
-  keyword?: string[]
-  category?: string[]
-}>({})
-const fileFormType = ref<'edit' | 'create'>('create')
-const fileFormError = ref<{ fileExist?: boolean; fileName2Long?: boolean }>({})
-const fileExistNotification = ref<boolean>(false)
-const fileFormComponent = ref<InstanceType<typeof FileForm>>()
-
 function triggerFolderDelete(pathname: string) {
-  deleteFormType.value = 'deleteFolder'
-  deleteFormPath.value = pathname
-  dialogDeleteState.value = !dialogDeleteState.value
+  deleteTarget.value = 'deleteFolder'
+  deletePath.value = pathname
+  deleteState.value = !deleteState.value
 }
 
 function triggerFileDelete(pathname: string) {
-  deleteFormType.value = 'deleteFile'
-  deleteFormPath.value = pathname
-  dialogDeleteState.value = !dialogDeleteState.value
-}
-
-function triggerFolderCreate() {
-  folderFormType.value = 'create'
-  folderFormData.value = {}
-  folderFormState.value = !folderFormState.value
-}
-
-function triggerFolderEdit(name: string, pathname: string) {
-  folderFormType.value = 'edit'
-  folderFormPath.value = pathname
-  folderFormData.value.name = name
-  folderFormState.value = true
-}
-
-async function submitFolderForm(value: {
-  mode: 'create' | 'edit'
-  name: string
-}) {
-  if (value.mode === 'create') {
-    await createFolder(value.name)
-  } else {
-    await editFolder(value.name, folderFormPath.value)
-  }
-}
-
-function triggerFileCreate() {
-  fileFormType.value = 'create'
-  fileFormData.value = {}
-  fileFormState.value = !fileFormState.value
-}
-
-function triggerFileEdit(
-  value: {
-    title: string
-    description: string
-    keyword: string[]
-    category: string[]
-  },
-  pathname: string,
-) {
-  fileFormState.value = true
-  fileFormType.value = 'edit'
-  fileFormPath.value = pathname
-  fileFormData.value = {
-    title: value.title,
-    description: value.description,
-    keyword: value.keyword,
-    category: value.category,
-  }
-}
-
-const currentParam = ref<Parameters<typeof submitFileForm>[0]>()
-
-async function submitFileForm(
-  value: {
-    mode: 'create' | 'edit'
-    file?: File
-    title: string
-    description: string
-    keyword: string[]
-    category: string[]
-  },
-  force = false,
-) {
-  currentParam.value = value
-
-  if (value.file && checkFile(value.file.name) && !force) {
-    fileExistNotification.value = true
-    return
-  }
-
-  if (value.mode === 'create' && value.file) {
-    await uploadFile(currentPath.value, value.file, {
-      title: value.title,
-      description: value.description,
-      keyword: value.keyword,
-      category: value.category,
-    })
-    setTimeout(() => {
-      refaceFile(currentPath.value)
-    }, 3000)
-
-    setTimeout(() => {
-      refaceFile(currentPath.value)
-    }, 10000)
-  } else {
-    await updateFile(
-      fileFormPath.value,
-      {
-        title: value.title,
-        description: value.description,
-        keyword: value.keyword,
-        category: value.category,
-      },
-      value.file,
-    )
-    setTimeout(() => {
-      refaceFile(currentPath.value)
-    }, 3000)
-
-    setTimeout(() => {
-      refaceFile(currentPath.value)
-    }, 10000)
-  }
-  fileFormData.value = {}
-  fileFormState.value = false
-  currentParam.value = undefined
-  fileFormComponent.value?.reset()
+  deleteTarget.value = 'deleteFile'
+  deletePath.value = pathname
+  deleteState.value = !deleteState.value
 }
 </script>
 
 <template>
-  <div class="text-h6 q-mt-md" v-if="currentDept > 2 && currentDept < 4">
+  <file-form-wrapper ref="fileFormComponent" />
+  <folder-form-wrapper ref="folderFormComponent" />
+  <dialog-delete
+    v-model:open="deleteState"
+    @confirm="() => deleteTarget && deleteMap[deleteTarget](deletePath)"
+  />
+
+  <div
+    class="text-h6 q-mt-md"
+    v-if="currentInfo.dept > 2 && currentInfo.dept < 4"
+  >
     <div class="flex justify-between items-center">
-      <div>{{ DEPT_NAME[currentDept] }}</div>
+      <div>{{ TREE_LEVEL_NAME[currentInfo.dept] }}</div>
       <q-btn
-        v-if="action"
         outline
         push
+        dense
+        id="listViewFolderCreate"
         class="q-px-md q-ml-md"
-        :label="'สร้าง' + DEPT_NAME[currentDept]"
         type="submit"
         color="primary"
-        dense
         icon="add"
-        @click.stop="() => triggerFolderCreate()"
-        id="listViewFolderCreate"
+        v-if="action"
+        :label="'สร้าง' + TREE_LEVEL_NAME[currentInfo.dept]"
+        @click.stop="() => folderFormComponent?.triggerFolderCreate()"
       />
     </div>
   </div>
-  <div class="grid q-mt-md" v-if="currentDept < 4">
-    <div v-for="value in currentFolder" :data-pathname="value.pathname">
+  <div
+    class="grid q-mt-md"
+    v-if="currentInfo.dept < 4 && folder[currentInfo.path]"
+  >
+    <div
+      v-for="value in folder[currentInfo.path]"
+      :data-pathname="value.pathname"
+    >
       <div
+        class="box"
         :style="{
           position: 'relative',
           display: 'flex',
           gap: '0.5rem',
-          flexDirection: currentDept > 2 ? 'row' : 'column',
           alignItems: 'center',
-          padding: currentDept > 2 ? '.5rem 0' : '.5rem',
+          flexDirection: currentInfo.dept > 2 ? 'row' : 'column',
+          padding: currentInfo.dept > 2 ? '.5rem 0' : '.5rem',
         }"
-        class="box"
-        @click="
-          () => {
-            ;(folderFormState = false), getFolder(value.pathname)
-          }
-        "
+        @click="() => goto(value.pathname)"
       >
         <div class="q-px-md flex items-center justify-center">
           <q-icon
             :name="currentIcon"
-            :size="currentDept > 2 ? '3em' : '6em'"
+            :size="currentInfo.dept > 2 ? '3em' : '6em'"
             color="primary"
             class="col"
           />
@@ -236,40 +112,46 @@ async function submitFileForm(
         <div
           class="absolute flex items-center justify-center"
           style="top: 0.5rem; right: 0.5rem"
-          :style="{ bottom: currentDept > 2 ? '0.5rem' : 'unset' }"
           v-if="props.action"
+          :style="{ bottom: currentInfo.dept > 2 ? '0.5rem' : 'unset' }"
         >
           <file-item-action
             :nameId="value.pathname"
             @delete="() => triggerFolderDelete(value.pathname)"
-            @edit="() => triggerFolderEdit(value.name, value.pathname)"
+            @edit="
+              () =>
+                folderFormComponent?.triggerFolderEdit(
+                  value.name,
+                  value.pathname,
+                )
+            "
           />
         </div>
         <div
           class="text-overflow-handle block text-center"
-          :class="{
-            'q-px-md': currentDept < 3,
-            'q-pr-xl': currentDept > 2,
-          }"
           style="max-width: 100%"
+          :class="{
+            'q-px-md': currentInfo.dept < 3,
+            'q-pr-xl': currentInfo.dept > 2,
+          }"
         >
           {{ value.name }}
         </div>
       </div>
     </div>
-    <div v-if="props.action && currentDept < 4">
+    <div v-if="props.action && currentInfo.dept < 4">
       <div
+        id="triggerFolderCreateFileItem"
         class="dashed"
         :style="{
           position: 'relative',
           display: 'flex',
           gap: '0.5rem',
-          flexDirection: currentDept > 2 ? 'row' : 'column',
           alignItems: 'center',
-          padding: currentDept > 2 ? '.5rem 0' : '.5rem',
+          flexDirection: currentInfo.dept > 2 ? 'row' : 'column',
+          padding: currentInfo.dept > 2 ? '.5rem 0' : '.5rem',
         }"
-        @click.stop="() => triggerFolderCreate()"
-        id="triggerFolderCreateFileItem"
+        @click.stop="() => folderFormComponent?.triggerFolderCreate()"
       >
         <div
           class="q-px-md flex items-center justify-center"
@@ -277,17 +159,17 @@ async function submitFileForm(
         >
           <q-icon
             :name="currentIcon"
-            :size="currentDept > 2 ? '3em' : '6em'"
+            :size="currentInfo.dept > 2 ? '3em' : '6em'"
             color="primary"
             class="col"
           />
           <q-btn
             round
-            :dense="currentDept > 2"
             color="white"
             size="10px"
             style="position: absolute; bottom: 0"
-            :style="{ right: currentDept > 2 ? '.5rem' : '1rem' }"
+            :dense="currentInfo.dept > 2"
+            :style="{ right: currentInfo.dept > 2 ? '.5rem' : '1rem' }"
           >
             <q-icon name="add" color="primary" size="1.5rem" />
           </q-btn>
@@ -295,60 +177,58 @@ async function submitFileForm(
         <div
           class="text-overflow-handle block text-center"
           :class="{
-            'q-px-md': currentDept < 3,
-            'q-pr-xl': currentDept > 2,
+            'q-px-md': currentInfo.dept < 3,
+            'q-pr-xl': currentInfo.dept > 2,
           }"
           style="max-width: 100%"
         >
-          สร้าง{{ DEPT_NAME[currentDept] }}
+          สร้าง{{ TREE_LEVEL_NAME[currentInfo.dept] }}
         </div>
       </div>
     </div>
   </div>
-  <div style="grid-column: 1 / span 5" class="q-mt-md" v-if="currentDept > 2">
+  <div
+    style="grid-column: 1 / span 5"
+    class="q-mt-md"
+    v-if="currentInfo.dept > 2 && file[currentInfo.path]"
+  >
     <div class="flex justify-between">
       <div>
         <span class="text-h6 q-mr-md">เอกสาร</span>
         <span class="text-body text-grey"
-          >จำนวน {{ currentFile.length }} รายการ</span
+          >จำนวน {{ file[currentInfo.path].length }} รายการ</span
         >
       </div>
       <q-btn
         outline
         push
-        v-if="action"
+        dense
+        id="listViewFileCreate"
         class="q-px-md q-ml-md"
         label="สร้างเอกสาร"
         type="submit"
         color="primary"
-        dense
         icon="add"
-        @click.stop="() => triggerFileCreate()"
-        id="listViewFileCreate"
+        v-if="action"
+        @click.stop="() => fileFormComponent?.triggerFileCreate()"
       />
     </div>
   </div>
   <div class="grid q-mt-md">
-    <div v-for="(value, index) in currentFile" :data-pathname="value.pathname">
+    <div
+      v-for="(value, index) in file[currentInfo.path]"
+      :data-pathname="value.pathname"
+    >
       <div
-        :style="{
-          position: 'relative',
-          display: 'flex',
-          gap: '0.5rem',
-          flexDirection: 'column',
-          alignItems: 'center',
-          padding: '1rem',
-          maxWidth: '100%',
-        }"
         class="box"
-        @click="() => getFileInfo(value)"
         :id="`getFileInfoFileItem${index}`"
+        @click="() => getFileInfo(value)"
       >
         <div class="q-px-md flex items-center justify-center">
           <file-icon
             size="preview"
-            :fileMimeType="value.fileType ? value.fileType : 'unknow'"
-            :fileName="value.fileName ? value.fileName : 'unknow'"
+            :fileMimeType="value.fileType ? value.fileType : '-'"
+            :fileName="value.fileName ? value.fileName : '-'"
           />
         </div>
         <div
@@ -360,7 +240,7 @@ async function submitFileForm(
             :nameId="value.pathname"
             @edit="
               () =>
-                triggerFileEdit(
+                fileFormComponent?.triggerFileEdit(
                   {
                     title: value.title,
                     description: value.description,
@@ -381,8 +261,10 @@ async function submitFileForm(
         </div>
       </div>
     </div>
-    <div v-if="props.action && currentDept > 2">
+    <div v-if="props.action && currentInfo.dept > 2">
       <div
+        id="triggerFileCreateFileItem"
+        class="dashed"
         :style="{
           display: 'flex',
           gap: '0.5rem',
@@ -391,9 +273,7 @@ async function submitFileForm(
           padding: '1rem',
           maxWidth: '100%',
         }"
-        class="dashed"
-        @click.stop="() => triggerFileCreate()"
-        id="triggerFileCreateFileItem"
+        @click.stop="() => fileFormComponent?.triggerFileCreate()"
       >
         <div
           class="q-px-md flex items-center justify-center"
@@ -418,55 +298,19 @@ async function submitFileForm(
       </div>
     </div>
   </div>
-
-  <file-form
-    ref="fileFormComponent"
-    :mode="fileFormType"
-    :error="fileFormError"
-    v-model:open="fileFormState"
-    v-model:title="fileFormData.title"
-    v-model:description="fileFormData.description"
-    v-model:keyword="fileFormData.keyword"
-    v-model:category="fileFormData.category"
-    @reset="() => (fileFormError = {})"
-    @filechange="
-      (name: string) => (
-        (fileFormError.fileExist = checkFile(name)),
-        (fileFormError.fileName2Long = checkFileName(name))
-      )
-    "
-    @submit="submitFileForm"
-  />
-
-  <folder-form
-    :mode="folderFormType"
-    :tree="DEPT_NAME[currentDept]"
-    v-if="currentDept < 4"
-    v-model:open="folderFormState"
-    v-model:name="folderFormData.name"
-    @submit="submitFolderForm"
-  />
-
-  <upload-exist-dialog
-    v-model:notification="fileExistNotification"
-    @confirm="() => currentParam && submitFileForm(currentParam, true)"
-    @cancel="() => (currentParam = undefined)"
-  />
-
-  <dialog-delete
-    v-model:open="dialogDeleteState"
-    @confirm="
-      () =>
-        deleteFormType &&
-        { deleteFolder, deleteFile }[deleteFormType](deleteFormPath)
-    "
-  />
 </template>
 
 <style lang="scss" scoped>
 .box {
   border: 2px solid $separator-color;
   border-radius: 8px;
+  position: relative;
+  display: flex;
+  gap: 0.5rem;
+  flex-direction: column;
+  align-items: center;
+  padding: 1rem;
+  max-width: 100%;
   cursor: pointer;
 }
 
@@ -483,20 +327,6 @@ async function submitFileForm(
   margin: auto auto;
 }
 
-.add-button {
-  position: absolute;
-  top: 50%;
-  right: 30%;
-  background-color: white;
-}
-
-.add-button-folder-level {
-  position: absolute;
-  left: 30px;
-  top: 22px;
-  background-color: white;
-}
-
 .text-overflow-handle {
   overflow: hidden;
   white-space: nowrap;
diff --git a/Services/client/src/components/FileSearched.vue b/Services/client/src/components/FileSearched.vue
index 160c765..a7b062b 100644
--- a/Services/client/src/components/FileSearched.vue
+++ b/Services/client/src/components/FileSearched.vue
@@ -1,17 +1,16 @@
 <script setup lang="ts">
-import { storeToRefs } from 'pinia'
-import { useSearchDataStore } from '@/stores/searched-data'
-import { useFileInfoStore } from '@/stores/file-info-data'
-import { useTreeDataStore } from '@/stores/tree-data'
-
-import DialogDelete from './DialogDelete.vue'
-import UploadExistDialog from './UploadExistDialog.vue'
-import FileForm from './FileForm.vue'
-import FileItemAction from '@/components/FileItemAction.vue'
-import FileIcon from '@/components/FileIcon.vue'
-
 import type { QTableProps } from 'quasar'
 import { onMounted, ref, watch } from 'vue'
+import { storeToRefs } from 'pinia'
+
+import { useSearchDataStore } from '@/stores/searched-data'
+import { useFileInfoStore } from '@/stores/file-info-data'
+import useStorage from '@/stores/storage'
+
+import DialogDelete from './DialogDelete.vue'
+import FileFormWrapper from './FileFormWrapper.vue'
+import FileItemAction from '@/components/FileItemAction.vue'
+import FileIcon from '@/components/FileIcon.vue'
 
 const props = withDefaults(
   defineProps<{
@@ -24,30 +23,22 @@ const props = withDefaults(
 )
 const { foundFile, isActFoundFile } = storeToRefs(useSearchDataStore())
 const { getFileInfo, getSize, getType } = useFileInfoStore()
-const { updateFile, deleteFile, checkFile } = useTreeDataStore()
+
+const storageStore = useStorage()
+const { deleteFile } = storageStore
+
+const fileFormComponent = ref<InstanceType<typeof FileFormWrapper>>()
+
 const keywordList = ref<string[]>([])
 const categoryList = ref<string[]>([])
 const selectKeyword = ref<string[]>([])
 const selectCategory = ref<string[]>([])
 const filterFoundFile = ref<any>()
 
-const fileExistNotification = ref<boolean>(false)
-const fileFormError = ref<{ fileExist?: boolean }>({})
 const deleteFormType = ref<'deleteFile'>('deleteFile')
 const dialogDeleteState = ref<boolean>(false)
 const deleteFormPath = ref<string>('')
 
-const fileFormType = ref<'edit'>('edit')
-const fileFormState = ref<boolean>(false)
-const fileFormPath = ref<string>('')
-const fileFormData = ref<{
-  file?: File
-  title?: string
-  description?: string
-  keyword?: string[]
-  category?: string[]
-}>({})
-
 const columns: QTableProps['columns'] = [
   {
     name: 'name',
@@ -84,66 +75,6 @@ const columns: QTableProps['columns'] = [
   },
 ]
 
-const currentParam = ref<Parameters<typeof submitFileForm>[0]>()
-
-async function submitFileForm(
-  value: {
-    mode: 'create' | 'edit'
-    file?: File
-    title: string
-    description: string
-    keyword: string[]
-    category: string[]
-  },
-  force = false,
-) {
-  currentParam.value = value
-  if (value.file && checkFile(value.file.name) && !force) {
-    fileExistNotification.value = true
-    return
-  }
-
-  if (value.mode === 'edit') {
-    await updateFile(
-      fileFormPath.value,
-      {
-        title: value.title,
-        description: value.description,
-        keyword: value.keyword,
-        category: value.category,
-      },
-      value.file,
-    )
-    setTimeout(() => {
-      isActFoundFile.value = true
-    }, 400)
-  }
-
-  fileFormData.value = {}
-  fileFormState.value = false
-  currentParam.value = undefined
-}
-
-function triggerFileEdit(
-  value: {
-    title: string
-    description: string
-    keyword: string[]
-    category: string[]
-  },
-  pathname: string,
-) {
-  fileFormState.value = true
-  fileFormType.value = 'edit'
-  fileFormPath.value = pathname
-  fileFormData.value = {
-    title: value.title,
-    description: value.description,
-    keyword: value.keyword,
-    category: value.category,
-  }
-}
-
 function triggerFileDelete(pathname: string) {
   deleteFormType.value = 'deleteFile'
   deleteFormPath.value = pathname
@@ -161,36 +92,30 @@ function confirmDelete() {
 }
 
 function filterSearch() {
-  function updateList() {
-    keywordList.value = []
-    categoryList.value = []
-    foundFile.value.forEach((obj) => {
-      obj.keyword.forEach((keyword) => {
-        if (!keywordList.value.includes(keyword)) {
-          keywordList.value.push(keyword)
-        }
-      })
-      obj.category.forEach((category) => {
-        if (!categoryList.value.includes(category)) {
-          categoryList.value.push(category)
-        }
-      })
+  keywordList.value = []
+  categoryList.value = []
+  foundFile.value.forEach((obj) => {
+    obj.keyword.forEach((keyword) => {
+      if (!keywordList.value.includes(keyword)) {
+        keywordList.value.push(keyword)
+      }
     })
-  }
+    obj.category.forEach((category) => {
+      if (!categoryList.value.includes(category)) {
+        categoryList.value.push(category)
+      }
+    })
+  })
 
-  function filterArray() {
-    if (!(selectKeyword.value.length || selectCategory.value.length)) {
-      filterFoundFile.value = foundFile.value
-    } else {
-      filterFoundFile.value = foundFile.value.filter(
-        (entry) =>
-          entry.keyword.some((kw) => selectKeyword.value.includes(kw)) ||
-          entry.category.some((kw) => selectCategory.value.includes(kw)),
-      )
-    }
+  if (!(selectKeyword.value.length || selectCategory.value.length)) {
+    filterFoundFile.value = foundFile.value
+  } else {
+    filterFoundFile.value = foundFile.value.filter(
+      (entry) =>
+        entry.keyword.some((kw) => selectKeyword.value.includes(kw)) ||
+        entry.category.some((kw) => selectCategory.value.includes(kw)),
+    )
   }
-  updateList()
-  filterArray()
 }
 
 watch(
@@ -208,6 +133,9 @@ onMounted(() => {
 </script>
 
 <template>
+  <file-form-wrapper ref="fileFormComponent" />
+  <dialog-delete v-model:open="dialogDeleteState" @confirm="confirmDelete" />
+
   <div class="row grid q-py-md q-gutter-sm">
     <q-select
       outlined
@@ -265,7 +193,7 @@ onMounted(() => {
               :nameId="value.pathname"
               @edit="
                 () =>
-                  triggerFileEdit(
+                  fileFormComponent?.triggerFileEdit(
                     {
                       title: value.title,
                       description: value.description,
@@ -344,7 +272,11 @@ onMounted(() => {
               dense
               icon="o_edit"
               @click="
-                () => triggerFileEdit(actionData.row, actionData.row.pathname)
+                () =>
+                  fileFormComponent?.triggerFileEdit(
+                    actionData.row,
+                    actionData.row.pathname,
+                  )
               "
               id="listViewFileEdit"
             />
@@ -365,26 +297,6 @@ onMounted(() => {
   <div class="q-mt-md" v-if="foundFile.length == 0">
     <span>ไม่พบรายการที่ค้นหา</span>
   </div>
-
-  <file-form
-    :mode="fileFormType"
-    :error="fileFormError"
-    v-model:open="fileFormState"
-    v-model:title="fileFormData.title"
-    v-model:description="fileFormData.description"
-    v-model:keyword="fileFormData.keyword"
-    v-model:category="fileFormData.category"
-    @filechange="(name: string) => (fileFormError.fileExist = checkFile(name))"
-    @submit="submitFileForm"
-  />
-
-  <upload-exist-dialog
-    v-model:notification="fileExistNotification"
-    @confirm="() => currentParam && submitFileForm(currentParam, true)"
-    @cancel="() => (currentParam = undefined)"
-  />
-
-  <dialog-delete v-model:open="dialogDeleteState" @confirm="confirmDelete" />
 </template>
 
 <style scoped lang="scss">
diff --git a/Services/client/src/components/ListView.vue b/Services/client/src/components/ListView.vue
index 4259504..73080a7 100644
--- a/Services/client/src/components/ListView.vue
+++ b/Services/client/src/components/ListView.vue
@@ -1,340 +1,188 @@
 <script lang="ts" setup>
+import type { QTableProps } from 'quasar'
 import { computed, ref } from 'vue'
 import { storeToRefs } from 'pinia'
-import type { QTableProps } from 'quasar'
-import { useTreeDataStore, type TreeDataFolder } from '@/stores/tree-data'
-import { useFileInfoStore } from '@/stores/file-info-data'
+
 import FileIcon from '@/components/FileIcon.vue'
 import DialogDelete from '@/components/DialogDelete.vue'
-import UploadExistDialog from './UploadExistDialog.vue'
-import FileForm from './FileForm.vue'
-import FolderForm from './FolderForm.vue'
+import FileFormWrapper from './FileFormWrapper.vue'
+import FolderFormWrapper from './FolderFormWrapper.vue'
+
+import { useFileInfoStore } from '@/stores/file-info-data'
+import useStorage from '@/stores/storage'
+
+const storageStore = useStorage()
+const { folder, file, currentInfo } = storeToRefs(storageStore)
+const { goto, deleteFolder, deleteFile } = storageStore
 
 const { getFormatDate, getSize, getType, getFileInfo } = useFileInfoStore()
-const { listDataFile, listDataFolder, currentDept, currentPath } =
-  storeToRefs(useTreeDataStore())
-const {
-  createFolder,
-  editFolder,
-  getFolder,
-  deleteFolder,
-  uploadFile,
-  updateFile,
-  deleteFile,
-  checkFile,
-  refaceFile,
-} = useTreeDataStore()
 
-const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย'] as const
+const fileFormComponent = ref<InstanceType<typeof FileFormWrapper>>()
+const folderFormComponent = ref<InstanceType<typeof FolderFormWrapper>>()
+
+const currentIcon = computed(() =>
+  currentInfo.value.dept === 0
+    ? 'mdi-file-cabinet'
+    : currentInfo.value.dept === 1
+      ? 'inbox'
+      : 'o_folder_open',
+)
+const TREE_LEVEL_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย'] as const
 
 const props = defineProps<{
   mode: 'admin' | 'user'
 }>()
 
-const currentLevel = computed(() =>
-  currentDept.value === 0
-    ? 'ตู้จัดเก็บเอกสาร'
-    : currentDept.value === 1
-      ? 'ลิ้นชัก'
-      : currentDept.value === 2
-        ? 'แฟ้ม'
-        : 'แฟ้มย่อย',
-)
-
-const currentIcon = computed(() =>
-  currentDept.value === 0
-    ? 'mdi-file-cabinet'
-    : currentDept.value === 1
-      ? 'inbox'
-      : 'o_folder_open',
-)
-
-const folderFormState = ref<boolean>(false)
-const folderFormPath = ref<string>('')
-const folderFormData = ref<{
-  name?: string
-}>({})
-const folderFormType = ref<'edit' | 'create'>('create')
-const fileFormError = ref<{ fileExist?: boolean }>({})
-const fileExistNotification = ref<boolean>(false)
-
-const fileFormState = ref<boolean>(false)
-const fileFormPath = ref<string>('')
-const fileFormData = ref<{
-  file?: File
-  title?: string
-  description?: string
-  keyword?: string[]
-  category?: string[]
-}>({})
-const fileFormType = ref<'edit' | 'create'>('create')
-const fileFormComponent = ref<InstanceType<typeof FileForm>>()
-
-const dialogDeleteState = ref<boolean>(false)
-const deleteFormPath = ref<string>('')
-const deleteFormType = ref<'deleteFolder' | 'deleteFile'>()
+const deleteState = ref<boolean>(false)
+const deletePath = ref<string>('')
+const deleteTarget = ref<'deleteFolder' | 'deleteFile'>()
+const deleteMap = { deleteFolder, deleteFile }
 
 function triggerFolderDelete(pathname: string) {
-  deleteFormType.value = 'deleteFolder'
-  deleteFormPath.value = pathname
-  dialogDeleteState.value = !dialogDeleteState.value
+  deleteTarget.value = 'deleteFolder'
+  deletePath.value = pathname
+  deleteState.value = !deleteState.value
 }
 
 function triggerFileDelete(pathname: string) {
-  deleteFormType.value = 'deleteFile'
-  deleteFormPath.value = pathname
-  dialogDeleteState.value = !dialogDeleteState.value
+  deleteTarget.value = 'deleteFile'
+  deletePath.value = pathname
+  deleteState.value = !deleteState.value
 }
 
-function triggerFolderCreate() {
-  folderFormType.value = 'create'
-  folderFormData.value = {}
-  folderFormState.value = !folderFormState.value
-}
-
-function triggerFolderEdit(name: string, pathname: string) {
-  folderFormType.value = 'edit'
-  folderFormPath.value = pathname
-  folderFormData.value.name = name
-  folderFormState.value = true
-}
-
-async function submitFolderForm(value: {
-  mode: 'create' | 'edit'
-  name: string
-}) {
-  if (value.mode === 'create') {
-    await createFolder(value.name)
-  } else {
-    await editFolder(value.name, folderFormPath.value)
-  }
-}
-
-function triggerFileCreate() {
-  fileFormType.value = 'create'
-  fileFormData.value = {}
-  fileFormState.value = !fileFormState.value
-}
-
-function triggerFileEdit(
-  value: {
-    title: string
-    description: string
-    keyword: string[]
-    category: string[]
-  },
-  pathname: string,
-) {
-  fileFormState.value = true
-  fileFormType.value = 'edit'
-  fileFormPath.value = pathname
-  fileFormData.value = {
-    title: value.title,
-    description: value.description,
-    keyword: value.keyword,
-    category: value.category,
-  }
-}
-
-const currentParam = ref<Parameters<typeof submitFileForm>[0]>()
-
-async function submitFileForm(
-  value: {
-    mode: 'create' | 'edit'
-    file?: File
-    title: string
-    description: string
-    keyword: string[]
-    category: string[]
-  },
-  force = false,
-) {
-  currentParam.value = value
-
-  if (value.file && checkFile(value.file.name) && !force) {
-    fileExistNotification.value = true
-    return
-  }
-
-  if (value.mode === 'create' && value.file) {
-    await uploadFile(currentPath.value, value.file, {
-      title: value.title,
-      description: value.description,
-      keyword: value.keyword,
-      category: value.category,
-    })
-
-    setTimeout(() => {
-      refaceFile(currentPath.value)
-    }, 3000)
-
-    setTimeout(() => {
-      refaceFile(currentPath.value)
-    }, 10000)
-  } else {
-    await updateFile(
-      fileFormPath.value,
-      {
-        title: value.title,
-        description: value.description,
-        keyword: value.keyword,
-        category: value.category,
-      },
-      value.file,
-    )
-
-    setTimeout(() => {
-      refaceFile(currentPath.value)
-    }, 3000)
-
-    setTimeout(() => {
-      refaceFile(currentPath.value)
-    }, 10000)
-  }
-  fileFormData.value = {}
-  fileFormState.value = false
-  currentParam.value = undefined
-  fileFormComponent.value?.reset()
-}
-
-const columnsFolder: QTableProps['columns'] = [
+const colFolder = [
   {
     name: 'name',
     required: true,
     label: 'ชื่อ',
     align: 'left',
-    field: (row) => row.name,
-    format: (val) => `${val}`,
+    field: 'name',
     sortable: true,
-    style: 'width: 1000px',
   },
   {
     name: 'createdBy',
-    align: 'center',
     label: 'สร้างโดย',
+    align: 'center',
     field: 'createdBy',
-    style: 'width: 20px',
     sortable: true,
   },
   {
     name: 'createdAt',
-    align: 'center',
     label: 'วันที่สร้าง',
+    align: 'center',
     field: 'createdAt',
     sortable: true,
-    style: 'width: 20px',
   },
   {
     name: 'actions',
     align: 'center',
     label: '',
     field: '',
-    style: 'width: 5px',
   },
-]
+] satisfies QTableProps['columns']
 
-const columnsFile: QTableProps['columns'] = [
+const colFile = [
   {
     name: 'name',
-    required: true,
     label: 'ชื่อไฟล์',
     align: 'left',
-    field: (row) => row.fileName,
-    format: (val) => `${val}`,
+    field: 'fileName',
     sortable: true,
-    style: 'width: 200px',
   },
   {
     name: 'title',
-    align: 'center',
     label: 'ชื่อเรื่อง',
+    align: 'center',
     field: 'title',
-    style: 'width: 200px',
-
     sortable: true,
   },
   {
     name: 'fileType',
-    align: 'center',
     label: 'ประเภทของไฟล์',
+    align: 'center',
     field: 'fileType',
     sortable: true,
-    style: 'width: 200px',
   },
   {
     name: 'actions',
     align: 'center',
     label: '',
     field: '',
-    style: 'width: 20px',
   },
-]
+] satisfies QTableProps['columns']
 
-const onRowClick = ((_evt, row) => {
-  getFolder(row.pathname)
+const onRowClick = ((_, row) => {
+  goto(row.pathname)
 }) satisfies QTableProps['onRowClick']
 </script>
 
 <template>
+  <file-form-wrapper ref="fileFormComponent" />
+  <folder-form-wrapper ref="folderFormComponent" />
+  <dialog-delete
+    v-model:open="deleteState"
+    @confirm="() => deleteTarget && deleteMap[deleteTarget](deletePath)"
+  />
   <div class="q-mt-md">
     <div class="q-gutter-sm">
       <div
         class="flex flex-break d justify-between space-between"
-        v-if="currentDept >= 1 && props.mode == 'admin' && currentDept != 4"
+        v-if="
+          currentInfo.dept >= 1 &&
+          currentInfo.dept < 4 &&
+          props.mode === 'admin'
+        "
       >
         <div>
-          <span class="text-h6">{{ currentLevel }}</span>
+          <span class="text-h6">{{ TREE_LEVEL_NAME[currentInfo.dept] }}</span>
         </div>
         <div>
           <q-btn
             outline
             push
+            dense
             class="q-px-md q-ml-md"
-            :label="'สร้าง' + currentLevel"
             type="submit"
             color="primary"
-            dense
             icon="add"
-            @click.stop="() => triggerFolderCreate()"
             id="listViewFolderCreate"
+            :label="'สร้าง' + TREE_LEVEL_NAME[currentInfo.dept]"
+            @click.stop="() => folderFormComponent?.triggerFolderCreate()"
           />
         </div>
       </div>
-
       <q-table
         flat
         bordered
-        :rows="listDataFolder"
-        :columns="columnsFolder"
-        :pagination="{
-          rowsPerPage: 20,
-        }"
-        @row-click="onRowClick"
         row-key="name"
         class="cursor"
-        v-if="currentDept != 4"
+        v-if="currentInfo.dept !== 4"
+        :pagination="{ rowsPerPage: 20 }"
+        :rows="folder[currentInfo.path]"
+        :columns="colFolder"
+        @row-click="onRowClick"
       >
-        <template v-slot:body-cell-name="nameRow">
-          <q-td style="width: 50%">
+        <template v-slot:body-cell-name="data">
+          <q-td>
             <q-icon :name="currentIcon" size="2em" color="primary" />
-            {{ nameRow.row.name }}
+            {{ data.row.name }}
           </q-td>
         </template>
-        <template v-slot:body-cell-createdBy="createdByRow">
-          <q-td>
-            <div class="justify-center center-content">
-              {{ createdByRow.row.createdBy }}
-            </div>
+        <template v-slot:body-cell-createdBy="data">
+          <q-td class="text-center">
+            <span class="sort-icon-offset-margin">
+              {{ data.row.createdBy }}
+            </span>
           </q-td>
         </template>
-        <template v-slot:body-cell-createdAt="createdAtRow">
-          <q-td>
-            <div class="justify-center">
-              {{ getFormatDate(createdAtRow.row.createdAt) }}
-            </div>
+        <template v-slot:body-cell-createdAt="data">
+          <q-td class="text-center">
+            <span class="sort-icon-offset-margin">
+              {{ getFormatDate(data.row.createdAt) }}
+            </span>
           </q-td>
         </template>
-        <template v-slot:body-cell-actions="actionsRow">
+        <template v-slot:body-cell-actions="data">
           <q-td class="justify-center">
             <div>
               <q-icon
@@ -349,32 +197,31 @@ const onRowClick = ((_evt, row) => {
                 self="center right"
                 :offset="[5, 1]"
               >
-                {{ actionsRow.row.name }}
+                {{ data.row.name }}
               </q-tooltip>
             </div>
             <div v-if="props.mode === 'admin'">
               <q-btn
                 flat
-                color="positive"
                 dense
+                id="listViewFolderEdit"
                 icon="o_edit"
+                color="positive"
                 @click.stop="
-                  triggerFolderEdit(
-                    actionsRow.row.name,
-                    actionsRow.row.pathname,
+                  folderFormComponent?.triggerFolderEdit(
+                    data.row.name,
+                    data.row.pathname,
                   )
                 "
-                id="listViewFolderEdit"
               />
-
               <q-btn
                 flat
-                color="negative"
                 dense
-                :data-testid="actionsRow.row.name"
-                icon="mdi-trash-can-outline"
-                @click.stop="triggerFolderDelete(actionsRow.row.pathname)"
                 id="listViewFolderDelete"
+                color="negative"
+                icon="mdi-trash-can-outline"
+                :data-testid="data.row.name"
+                @click.stop="triggerFolderDelete(data.row.pathname)"
               />
             </div>
           </q-td>
@@ -382,74 +229,62 @@ const onRowClick = ((_evt, row) => {
       </q-table>
     </div>
   </div>
-
-  <div class="q-mt-md" v-if="currentDept >= 3">
+  <div class="q-mt-md" v-if="currentInfo.dept >= 3">
     <div class="q-gutter-sm">
-      <div class="flex flex-break d justify-between space-between">
-        <div>
-          <span class="text-h6">เอกสาร</span>
-        </div>
+      <div class="flex flex-break justify-between space-between">
+        <div><span class="text-h6">เอกสาร</span></div>
         <div>
           <q-btn
-            v-if="props.mode == 'admin'"
             outline
             push
+            dense
+            id="listViewFileCreate"
             class="q-px-md q-ml-md"
             label="สร้างเอกสาร"
             type="submit"
             color="primary"
-            dense
             icon="add"
-            @click.stop="() => triggerFileCreate()"
-            id="listViewFileCreate"
+            v-if="props.mode == 'admin'"
+            @click.stop="() => fileFormComponent?.triggerFileCreate()"
           />
         </div>
       </div>
       <q-table
         flat
         bordered
-        :rows="listDataFile"
-        :columns="columnsFile"
-        row-key="name"
-        :pagination="{
-          rowsPerPage: 20,
-        }"
         class="cursor"
+        row-key="name"
+        :rows="file[currentInfo.path]"
+        :columns="colFile"
+        :pagination="{ rowsPerPage: 20 }"
       >
-        <template v-slot:body-cell-name="nameRow">
+        <template v-slot:body-cell-name="data">
           <q-td
-            style="width: 50%"
-            @click="
-              () => {
-                currentDept >= 3
-                  ? getFileInfo(nameRow.row)
-                  : getFolder(nameRow.row.pathname)
-              }
-            "
             id="listViewGetFileInfo"
+            style="width: 50%"
+            @click="() => getFileInfo(data.row)"
           >
             <file-icon
               size="list"
-              :fileMimeType="
-                nameRow.row.fileType ? nameRow.row.fileType : 'unknown'
-              "
-              :fileName="
-                nameRow.row.fileName ? nameRow.row.fileName : 'unknown'
-              "
+              :fileMimeType="data.row.fileType || '-'"
+              :fileName="data.row.fileName || '-'"
             />
-            {{ nameRow.row.fileName }}
+            {{ data.row.fileName }}
           </q-td>
         </template>
-
-        <template v-slot:body-cell-fileType="fileTypeRow">
-          <q-td>
-            <div class="justify-center">
-              {{ getType(fileTypeRow.row.fileType, fileTypeRow.row.fileName) }}
-            </div>
+        <template v-slot:body-cell-title="data">
+          <q-td class="text-center">
+            <span class="sort-icon-offset-margin">{{ data.row.title }}</span>
           </q-td>
         </template>
-
-        <template v-slot:body-cell-actions="actionsRow">
+        <template v-slot:body-cell-fileType="data">
+          <q-td class="text-center">
+            <span class="sort-icon-offset-margin">
+              {{ getType(data.row.fileType, data.row.fileName) }}
+            </span>
+          </q-td>
+        </template>
+        <template v-slot:body-cell-actions="data">
           <q-td class="justify-center">
             <div>
               <q-icon
@@ -463,7 +298,7 @@ const onRowClick = ((_evt, row) => {
                 self="center right"
                 :offset="[5, 1]"
               >
-                {{ getSize(actionsRow.row.fileSize) }}
+                {{ getSize(data.row.fileSize) }}
               </q-tooltip>
             </div>
             <div v-if="props.mode === 'admin'">
@@ -473,17 +308,21 @@ const onRowClick = ((_evt, row) => {
                 dense
                 icon="o_edit"
                 @click.stop="
-                  () => triggerFileEdit(actionsRow.row, actionsRow.row.pathname)
+                  () =>
+                    fileFormComponent?.triggerFileEdit(
+                      data.row,
+                      data.row.pathname,
+                    )
                 "
                 id="listViewFileEdit"
               />
               <q-btn
                 flat
-                color="negative"
                 dense
-                icon="mdi-trash-can-outline"
-                @click.stop="() => triggerFileDelete(actionsRow.row.pathname)"
                 id="listViewFileDelete"
+                color="negative"
+                icon="mdi-trash-can-outline"
+                @click.stop="() => triggerFileDelete(data.row.pathname)"
               />
             </div>
           </q-td>
@@ -491,44 +330,6 @@ const onRowClick = ((_evt, row) => {
       </q-table>
     </div>
   </div>
-
-  <file-form
-    ref="fileFormComponent"
-    :mode="fileFormType"
-    :error="fileFormError"
-    v-model:open="fileFormState"
-    v-model:title="fileFormData.title"
-    v-model:description="fileFormData.description"
-    v-model:keyword="fileFormData.keyword"
-    v-model:category="fileFormData.category"
-    @reset="() => (fileFormError = {})"
-    @filechange="(name: string) => (fileFormError.fileExist = checkFile(name))"
-    @submit="submitFileForm"
-  />
-
-  <folder-form
-    :mode="folderFormType"
-    :tree="DEPT_NAME[currentDept]"
-    v-if="currentDept < 4"
-    v-model:open="folderFormState"
-    v-model:name="folderFormData.name"
-    @submit="submitFolderForm"
-  />
-
-  <upload-exist-dialog
-    v-model:notification="fileExistNotification"
-    @confirm="() => currentParam && submitFileForm(currentParam, true)"
-    @cancel="() => (currentParam = undefined)"
-  />
-
-  <dialog-delete
-    v-model:open="dialogDeleteState"
-    @confirm="
-      () =>
-        deleteFormType &&
-        (deleteFolder(deleteFormPath), deleteFile(deleteFormPath))
-    "
-  />
 </template>
 
 <style lang="scss" scoped>
@@ -538,7 +339,7 @@ const onRowClick = ((_evt, row) => {
   align-items: center;
 }
 
-.center-content {
+.sort-icon-offset-margin {
   margin-right: 18px;
 }
 
diff --git a/Services/client/src/components/PageLayout.vue b/Services/client/src/components/PageLayout.vue
index 278c305..dc5ed29 100644
--- a/Services/client/src/components/PageLayout.vue
+++ b/Services/client/src/components/PageLayout.vue
@@ -1,67 +1,39 @@
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue'
+import { ref } from 'vue'
 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'
 import FileSearched from './FileSearched.vue'
 import ListView from './ListView.vue'
-import FolderForm from './FolderForm.vue'
+import FolderFormWrapper from './FolderFormWrapper.vue'
 import GlobalErrorDialog from './GlobalErrorDialog.vue'
 
 import SearchBar from '@/modules/01_user/components/SearchBar.vue'
 import FileDownload from '@/modules/01_user/components/FileDownload.vue'
 import useStorage from '@/stores/storage'
 
-const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย'] as const
-
-const { isFilePreview } = storeToRefs(useFileInfoStore())
-const { isSearch } = storeToRefs(useSearchDataStore())
-const { data, currentDept, currentPath } = storeToRefs(useTreeDataStore())
-const { createFolder, getCabinet, gotoParent, getFolder } = useTreeDataStore()
-
-useStorage()
-useSocketStore()
-
-const viewMode = ref<'view_list' | 'view_module'>('view_list')
 const props = defineProps<{
   mode: 'admin' | 'user'
 }>()
 
-const folderFormState = ref<boolean>(false)
-const folderFormType = ref<'edit' | 'create'>('create')
-const folderFormData = ref<{
-  name?: string
-}>({})
+const { isFilePreview } = storeToRefs(useFileInfoStore())
+const { isSearch } = storeToRefs(useSearchDataStore())
 
-function triggerFolderCreate() {
-  folderFormType.value = 'create'
-  folderFormData.value = {}
-  folderFormState.value = !folderFormState.value
-}
+const storageStore = useStorage()
+const { tree, currentInfo } = storeToRefs(storageStore)
+const { goto, gotoParent } = storageStore
 
-async function submitFolderForm(value: {
-  mode: 'create' | 'edit'
-  name: string
-}) {
-  if (value.mode === 'create') {
-    await createFolder(value.name)
-  }
-}
+const viewMode = ref<'view_list' | 'view_module'>('view_list')
 
-onMounted(async () => {
-  await getCabinet()
-
-  const sessionCurrentPath = sessionStorage.getItem('currentPath')
-
-  if (sessionCurrentPath) await getFolder(sessionCurrentPath)
-})
+const folderFormComponent = ref<InstanceType<typeof FolderFormWrapper>>()
 </script>
 <template>
+  <folder-form-wrapper ref="folderFormComponent" />
+  <global-error-dialog />
+
   <section id="header" class="q-px-md q-pt-md q-pb-none">
     <div class="q-my-md row items-center">
       <div class="col">
@@ -86,8 +58,7 @@ onMounted(async () => {
             class="block q-my-sm text-weight-bold pointer"
             @click="
               () => {
-                currentPath = ''
-                getFolder(currentPath)
+                goto()
                 isSearch = false
                 isFilePreview = false
               }
@@ -100,13 +71,13 @@ onMounted(async () => {
             flat
             color="primary"
             icon="add"
-            @click.stop="() => triggerFolderCreate()"
             data-testid="createFolder"
+            @click.stop="() => folderFormComponent?.triggerFolderCreate()"
           />
         </div>
         <q-separator />
         <div class="q-pa-md">
-          <tree-explorer :data="data" :level="1" />
+          <tree-explorer :data="tree" />
         </div>
       </div>
     </div>
@@ -125,54 +96,57 @@ onMounted(async () => {
                   flat
                   dense
                   class="q-mr-sm q-px-sm"
-                  v-if="isSearch == true || currentDept > 0"
+                  v-if="isSearch || currentInfo.dept > 0"
                   @click="
                     () => {
-                      isSearch
-                        ? (isSearch = false)
-                        : ((folderFormState = false), gotoParent())
+                      isSearch ? (isSearch = false) : gotoParent()
                     }
                   "
                 >
                   <q-icon name="arrow_back" size="1rem" color="primary" />
                 </q-btn>
-                <span v-if="isSearch === true">ผลการค้นหา</span>
-                <q-breadcrumbs v-if="isSearch === false" active-color="primary">
+                <span v-if="isSearch">ผลการค้นหา</span>
+                <q-breadcrumbs
+                  v-if="!isSearch"
+                  active-color="grey"
+                  separator-color="grey"
+                >
                   <q-breadcrumbs-el
-                    v-if="currentPath === '/' || !currentPath"
+                    v-if="currentInfo.path === '/' || !currentInfo.path"
                     label="ตู้เอกสารทั้งหมด"
                   />
                   <q-btn
-                    v-if="
-                      mode === 'admin' &&
-                      viewMode === 'view_module' &&
-                      currentDept === 0
-                    "
+                    dense
+                    id="createFolder"
                     class="q-px-md q-ml-md al"
                     label="สร้างตู้เก็บเอกสาร"
                     type="submit"
                     color="primary"
-                    dense
                     icon="add"
-                    @click.stop="() => triggerFolderCreate()"
-                    id="createFolder"
+                    v-if="
+                      mode === 'admin' &&
+                      viewMode === 'view_module' &&
+                      currentInfo.dept === 0
+                    "
+                    @click.stop="
+                      () => folderFormComponent?.triggerFolderCreate()
+                    "
                   />
                   <q-breadcrumbs-el
-                    class="text-primary pointer"
-                    v-for="(fragments, index) in currentPath
+                    class="pointer"
+                    v-for="(fragments, index) in currentInfo.path
                       .split('/')
                       .filter(Boolean)"
                     :label="fragments"
                     @click="
                       () => {
-                        currentPath =
-                          currentPath
+                        goto(
+                          currentInfo.path
                             .split('/')
                             .filter(Boolean)
                             .slice(0, index + 1)
-                            .join('/') + '/'
-
-                        getFolder(currentPath)
+                            .join('/') + '/',
+                        )
                       }
                     "
                   />
@@ -183,15 +157,16 @@ onMounted(async () => {
               <q-btn
                 flat
                 dense
+                id="getFolder"
                 color="blue-grey-2"
                 icon="refresh"
                 class="q-mr-sm"
-                @click="() => getFolder(currentPath)"
-                id="getFolder"
+                @click="() => goto(currentInfo.path, true)"
               />
               <q-btn
                 flat
                 dense
+                id="viewMode"
                 color="blue-grey-2"
                 :icon="viewMode"
                 @click="
@@ -200,7 +175,6 @@ onMounted(async () => {
                       viewMode === 'view_list' ? 'view_module' : 'view_list'
                   }
                 "
-                id="viewMode"
               />
             </div>
           </div>
@@ -208,15 +182,15 @@ onMounted(async () => {
             <file-searched
               :viewMode="viewMode"
               :action="props.mode === 'admin'"
-              v-if="isSearch === true"
+              v-if="isSearch"
             />
             <file-item
               :viewMode="viewMode"
               :action="props.mode === 'admin'"
-              v-if="isSearch === false && viewMode === 'view_list'"
+              v-if="!isSearch && viewMode === 'view_list'"
             />
             <list-view
-              v-if="isSearch === false && viewMode === 'view_module'"
+              v-if="!isSearch && viewMode === 'view_module'"
               :mode="mode"
             />
           </div>
@@ -224,17 +198,6 @@ onMounted(async () => {
       </div>
     </div>
   </section>
-
-  <folder-form
-    :mode="folderFormType"
-    :tree="DEPT_NAME[currentDept]"
-    v-if="currentDept < 4"
-    v-model:open="folderFormState"
-    v-model:name="folderFormData.name"
-    @submit="submitFolderForm"
-  />
-
-  <global-error-dialog />
 </template>
 
 <style lang="scss" scoped>
diff --git a/Services/client/src/components/Profile.vue b/Services/client/src/components/Profile.vue
index 9b365b0..ba2d4a3 100644
--- a/Services/client/src/components/Profile.vue
+++ b/Services/client/src/components/Profile.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { getUsername, logout } from '@/services/KeyCloakService'
 import { ref } from 'vue'
-const dropdownOpen = ref<boolean>(false)
-const accountName = ref<string>(getUsername())
+const dropdown = ref<boolean>(false)
+const name = ref<string>(getUsername())
 </script>
 
 <template>
   <div
-    @click="() => (dropdownOpen = !dropdownOpen)"
+    @click="() => (dropdown = !dropdown)"
     class="row q-px-xs cursor"
     id="app-toolbar-title"
   >
@@ -19,20 +19,28 @@ const accountName = ref<string>(getUsername())
 
     <div>
       <div class="row q-pl-sm">
-        <span class="text-body1" style="font-size:13px">
-          {{ accountName }}
+        <span class="text-body1" style="font-size: 13px">
+          {{ name }}
         </span>
       </div>
       <div class="row q-pl-sm">
-        <span class="text-caption text-grey" style="font-size:10px"> เจ้าหน้าที่ </span>
+        <span class="text-caption text-grey" style="font-size: 10px">
+          เจ้าหน้าที่
+        </span>
       </div>
     </div>
   </div>
-  <q-btn-dropdown stretch flat v-model="dropdownOpen">
+  <q-btn-dropdown stretch flat v-model="dropdown">
     <q-list>
       <q-item clickable v-close-popup tabindex="0" @click="() => logout()">
         <q-item-section avatar>
-          <q-avatar icon="logout" color="primary" text-color="white" caption>
+          <q-avatar
+            caption
+            icon="logout"
+            color="primary"
+            text-color="white"
+            size="1.5rem"
+          >
           </q-avatar>
         </q-item-section>
         <q-item-section>
diff --git a/Services/client/src/components/TreeExplorer.vue b/Services/client/src/components/TreeExplorer.vue
index 5f39987..ab87b95 100644
--- a/Services/client/src/components/TreeExplorer.vue
+++ b/Services/client/src/components/TreeExplorer.vue
@@ -1,31 +1,31 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
-import { useTreeDataStore, type TreeDataFolder } from '@/stores/tree-data'
 import { useSearchDataStore } from '@/stores/searched-data'
 import { useFileInfoStore } from '@/stores/file-info-data'
+import useStorage from '@/stores/storage'
 
 const { isSearch } = storeToRefs(useSearchDataStore())
 const { isFilePreview } = storeToRefs(useFileInfoStore())
-const { getFolder } = useTreeDataStore()
+const store = useStorage()
 
 const props = withDefaults(
   defineProps<{
-    data: TreeDataFolder[]
-    level: number
+    data: typeof store.tree
+    level?: number
   }>(),
   {
-    level: 0,
+    level: 1,
   },
 )
 </script>
 
 <template>
   <div>
-    <q-list v-for="folder in data" class="rounded-borders">
+    <q-list v-for="v in data" class="rounded-borders">
       <q-expansion-item
         @click="
           () => {
-            getFolder(folder.pathname, false)
+            store.goto(v.pathname)
             isSearch = false
             isFilePreview = false
           }
@@ -40,13 +40,12 @@ const props = withDefaults(
               ? 'inbox'
               : 'o_folder_open'
         "
-        :label="folder.name"
-        class="text-overflow-handle"
-        v-model="folder.status"
+        :label="v.name"
+        class="text-overflow-handle active"
       >
         <tree-explorer
-          v-if="folder.folder"
-          :data="folder.folder"
+          v-if="v.folder"
+          :data="v.folder"
           :level="props.level + 1"
         />
       </q-expansion-item>
@@ -55,7 +54,7 @@ const props = withDefaults(
 </template>
 
 <style lang="scss" scoped>
-:deep(.q-item[aria-expanded='true']) {
+.active :deep(.q-item[aria-expanded='true']) {
   color: $primary;
 }
 
diff --git a/Services/client/src/modules/01_user/components/FileDownload.vue b/Services/client/src/modules/01_user/components/FileDownload.vue
index 1320c9c..8acc2c6 100644
--- a/Services/client/src/modules/01_user/components/FileDownload.vue
+++ b/Services/client/src/modules/01_user/components/FileDownload.vue
@@ -3,7 +3,7 @@ import axios from 'axios'
 import { storeToRefs } from 'pinia'
 import axiosClient from '@/services/HttpService'
 
-import type { EhrFile } from '@/stores/tree-data'
+import type { StorageFile } from '@/stores/storage'
 import { useFileInfoStore } from '@/stores/file-info-data'
 
 import FileIcon from '@/components/FileIcon.vue'
@@ -25,7 +25,7 @@ async function downloadSubmit(path: string | undefined) {
       formatPath = `cabinet/${cabinet}/drawer/${drawer}/folder/${folder}/subfolder/${subfolder}/file/${file}`
     }
 
-    const res = await axiosClient.get<EhrFile & { download: string }>(
+    const res = await axiosClient.get<StorageFile & { download: string }>(
       `${import.meta.env.VITE_API_ENDPOINT}${formatPath}`,
     )
     await axios
diff --git a/Services/client/src/modules/01_user/components/SearchBar.vue b/Services/client/src/modules/01_user/components/SearchBar.vue
index 6a53141..17841e7 100644
--- a/Services/client/src/modules/01_user/components/SearchBar.vue
+++ b/Services/client/src/modules/01_user/components/SearchBar.vue
@@ -4,7 +4,7 @@ import { storeToRefs } from 'pinia'
 import axiosClient from '@/services/HttpService'
 import mime from 'mime'
 
-import type { EhrFile } from '@/stores/tree-data'
+import type { StorageFile } from '@/stores/storage'
 import { useSearchDataStore } from '@/stores/searched-data'
 import { useLoader } from '@/stores/loader'
 
@@ -92,7 +92,7 @@ async function searchSubmit() {
 
     try {
       loaderStore.show()
-      const res = await axiosClient.post<EhrFile[]>(
+      const res = await axiosClient.post<StorageFile[]>(
         `${import.meta.env.VITE_API_ENDPOINT}/search`,
         submitSearchData.value,
       )
diff --git a/Services/client/src/stores/file-info-data.ts b/Services/client/src/stores/file-info-data.ts
index d7b9450..6729ee9 100644
--- a/Services/client/src/stores/file-info-data.ts
+++ b/Services/client/src/stores/file-info-data.ts
@@ -2,19 +2,19 @@ import { ref } from 'vue'
 import { defineStore } from 'pinia'
 import mime from 'mime'
 
-import type { EhrFile } from '@/stores/tree-data'
+import type { StorageFile } from '@/stores/storage'
 
 export interface MimeMap {
   [key: string]: { icon: string; color: string }
 }
-export interface TypeSetting {
+export interface IconMap {
   [key: string]: { icon: string; color: string }
 }
 
 export const useFileInfoStore = defineStore('info', () => {
   const isFilePreview = ref<Boolean>(false)
-  const fileInfo = ref<EhrFile>()
-  const fileIcon: TypeSetting = {
+  const fileInfo = ref<StorageFile>()
+  const fileIcon: IconMap = {
     word: { icon: 'mdi-file-word-outline', color: 'blue-11' },
     excel: { icon: 'mdi-file-excel-outline', color: 'green-4' },
     powerpoint: { icon: 'mdi-file-powerpoint-outline', color: 'orange-4' },
@@ -100,7 +100,7 @@ export const useFileInfoStore = defineStore('info', () => {
     return sizeNumber.toFixed(2) + ' ' + units[i]
   }
 
-  function getFileInfo(data: EhrFile) {
+  function getFileInfo(data: StorageFile) {
     isFilePreview.value = true
     fileInfo.value = data
   }
diff --git a/Services/client/src/stores/searched-data.ts b/Services/client/src/stores/searched-data.ts
index 371f406..93d088a 100644
--- a/Services/client/src/stores/searched-data.ts
+++ b/Services/client/src/stores/searched-data.ts
@@ -1,45 +1,45 @@
 import { ref } from 'vue'
 import { defineStore } from 'pinia'
-import type { EhrFile } from '@/stores/tree-data'
+import type { StorageFile } from '@/stores/storage'
 
-export interface searchData {
+export interface Search {
   field: string
   value: string
 }
 
-export interface advSearchDataRow {
+export interface AdvancedSearch {
   op: 'AND' | 'OR'
   field: 'title' | 'keyword'
   value: string
 }
 
-export interface advSearchDataField {
+export interface AdvancedSearchFields {
   keyword: string[]
   description: string
 }
 
 export const useSearchDataStore = defineStore('searched', () => {
-  const foundFile = ref<EhrFile[]>([])
+  const foundFile = ref<StorageFile[]>([])
   const isAdvSearchCall = ref<boolean>(false)
   const isSearch = ref<Boolean>(false)
   const isActFoundFile = ref<Boolean>(false)
-  const searchData = ref<searchData>({
+  const searchData = ref<Search>({
     field: 'title',
     value: '',
   })
-  const advSearchDataRow = ref<advSearchDataRow[]>([
+  const advSearchDataRow = ref<AdvancedSearch[]>([
     {
       op: 'AND',
       field: 'title',
       value: '',
     },
   ])
-  const advSearchDataField = ref<advSearchDataField>({
+  const advSearchDataField = ref<AdvancedSearchFields>({
     keyword: [],
     description: '',
   })
 
-  async function getFoundFile(data: EhrFile[]) {
+  async function getFoundFile(data: StorageFile[]) {
     foundFile.value = data
   }
 
diff --git a/Services/client/src/views/MainLayout.vue b/Services/client/src/views/MainLayout.vue
index d9246cb..148e316 100644
--- a/Services/client/src/views/MainLayout.vue
+++ b/Services/client/src/views/MainLayout.vue
@@ -1,16 +1,17 @@
 <script setup lang="ts">
-import { useLoader } from '@/stores/loader'
 import { storeToRefs } from 'pinia'
+
+import { useLoader } from '@/stores/loader'
+import { useSearchDataStore } from '@/stores/searched-data'
+import { useFileInfoStore } from '@/stores/file-info-data'
+import useStorage from '@/stores/storage'
+
 import profile from '@/components/Profile.vue'
-import { useTreeDataStore } from '@/stores/tree-data'
-import { useSearchDataStore } from '@/stores/searched-data';
-import { useFileInfoStore } from '@/stores/file-info-data';
-const { currentPath } = storeToRefs(useTreeDataStore())
+
 const { isFilePreview } = storeToRefs(useFileInfoStore())
 const { isSearch } = storeToRefs(useSearchDataStore())
-const { getFolder } = useTreeDataStore()
-const loaderStore = useLoader()
-const { loader } = storeToRefs(loaderStore)
+const { loader } = storeToRefs(useLoader())
+const { goto } = useStorage()
 </script>
 
 <template>
@@ -22,20 +23,14 @@ const { loader } = storeToRefs(loaderStore)
           src="@/assets/logo-edm.png"
           spinner-color="white"
           style="height: 45px; max-width: 45px"
-          @click="
-            () => {
-              currentPath = ''
-              getFolder(currentPath)
-            }
-          "
+          @click="() => goto()"
         />
         <div
           class="column q-px-md pointer"
           id="app-toolbar-title"
           @click="
             () => {
-              currentPath = ''
-              getFolder(currentPath)
+              goto()
               isSearch = false
               isFilePreview = false
             }

From 7cee88ae33011abb8c3f97496ed53011b96e8b99 Mon Sep 17 00:00:00 2001
From: puri-ph4tt <puriphat001@gmail.com>
Date: Tue, 12 Dec 2023 11:03:51 +0700
Subject: [PATCH 24/26] fix: move useErrorStore in res

---
 Services/client/src/services/HttpService.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/Services/client/src/services/HttpService.ts b/Services/client/src/services/HttpService.ts
index 7839276..de912b3 100644
--- a/Services/client/src/services/HttpService.ts
+++ b/Services/client/src/services/HttpService.ts
@@ -2,8 +2,6 @@ import axios from 'axios'
 import { getToken } from './KeyCloakService'
 import { useErrorStore } from '@/stores/error'
 
-const error = useErrorStore()
-
 const instance = axios.create()
 
 instance.interceptors.request.use(async (config) => {
@@ -14,6 +12,7 @@ instance.interceptors.request.use(async (config) => {
 instance.interceptors.response.use(
   (res) => res,
   (err) => {
+    const error = useErrorStore()
     const status = err.response.status
     const data = err.response.data
 

From ff712358cfc21a177dba88c213729e2d666d7154 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Tue, 12 Dec 2023 12:02:20 +0700
Subject: [PATCH 25/26] fix: inconsistant path

---
 Services/client/src/stores/storage.ts | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/Services/client/src/stores/storage.ts b/Services/client/src/stores/storage.ts
index a2f1e76..6d05c9f 100644
--- a/Services/client/src/stores/storage.ts
+++ b/Services/client/src/stores/storage.ts
@@ -62,6 +62,10 @@ function constructUrl(path: string | string[], append = true) {
     : url
 }
 
+function consistantPath(path: string | string[]) {
+  return path.toString().split('/').filter(Boolean).join('/') + '/'
+}
+
 const useStorage = defineStore('storageStore', () => {
   const loader = useLoader()
   const init = ref<boolean>(false)
@@ -131,7 +135,7 @@ const useStorage = defineStore('storageStore', () => {
 
     const res = await api.get<(typeof folder.value)[string]>(constructUrl(arr))
     if (res.status === 200 && res.data && Array.isArray(res.data))
-      folder.value[path] = res.data.sort((a, b) =>
+      folder.value[consistantPath(path)] = res.data.sort((a, b) =>
         a.pathname.localeCompare(b.pathname),
       )
   }
@@ -145,7 +149,7 @@ const useStorage = defineStore('storageStore', () => {
       constructUrl(arr, false) + '/file',
     )
     if (res.status === 200 && res.data && Array.isArray(res.data))
-      file.value[path] = res.data.sort((a, b) =>
+      file.value[consistantPath(path)] = res.data.sort((a, b) =>
         a.pathname.localeCompare(b.pathname),
       )
   }
@@ -157,10 +161,12 @@ const useStorage = defineStore('storageStore', () => {
     // get all parent to the root structure
     // this will also triggher init structure as it get root structure
     for (let i = 0; i < arr.length; i++) {
-      const current = arr.slice(0, i - arr.length).join('/') + '/'
+      const current = consistantPath(arr.slice(0, i - arr.length))
       if (!folder.value[current] || force) await getStorage(current)
     }
 
+    path = consistantPath(path)
+
     // only get this path once, after that will get from socket.io-client instead
     if (!folder.value[path] || force) await getStorage(path)
     if (!file.value[path] || force) await getStorageFile(path)
@@ -173,7 +179,7 @@ const useStorage = defineStore('storageStore', () => {
 
   async function gotoParent() {
     const arr = currentInfo.path.split('/').filter(Boolean)
-    await goto([...arr.slice(0, -1), ''].join('/'))
+    await goto(consistantPath(arr.slice(0, -1)))
   }
 
   // socket.io zone
@@ -183,7 +189,7 @@ const useStorage = defineStore('storageStore', () => {
   socket.on('disconnect', () => console.info('Socket.io disconnected.'))
   socket.on('CreateFolder', (data: { pathname: string }) => {
     const arr = data.pathname.split('/').filter(Boolean)
-    const path = [...arr.slice(0, -1), ''].join('/')
+    const path = consistantPath(arr.slice(0, -1))
 
     if (folder.value[path]) {
       folder.value[path].push({
@@ -201,7 +207,7 @@ const useStorage = defineStore('storageStore', () => {
   socket.on('EditFolder', (data: { from: string; to: string }) => {
     const src = data.from.split('/').filter(Boolean)
     const dst = data.to.split('/').filter(Boolean)
-    const path = [...src.slice(0, -1), ''].join('/')
+    const path = consistantPath(src.slice(0, -1))
 
     if (folder.value[path]) {
       const val = folder.value[path].find((v) => v.pathname === data.from)
@@ -243,7 +249,7 @@ const useStorage = defineStore('storageStore', () => {
     }
 
     const arr = data.pathname.split('/').filter(Boolean)
-    const path = [...arr.slice(0, -1), ''].join('/')
+    const path = consistantPath(arr.slice(0, -1))
 
     if (folder.value[path]) {
       folder.value[path] = folder.value[path].filter(

From 80f1ead5d061362dbac09d27b6eb64b732f010fa Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Tue, 12 Dec 2023 12:40:09 +0700
Subject: [PATCH 26/26] fix: array to string result in comma

---
 Services/client/src/stores/storage.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/Services/client/src/stores/storage.ts b/Services/client/src/stores/storage.ts
index 6d05c9f..ee6d2b8 100644
--- a/Services/client/src/stores/storage.ts
+++ b/Services/client/src/stores/storage.ts
@@ -63,7 +63,9 @@ function constructUrl(path: string | string[], append = true) {
 }
 
 function consistantPath(path: string | string[]) {
-  return path.toString().split('/').filter(Boolean).join('/') + '/'
+  return Array.isArray(path)
+    ? path.join('/') + '/'
+    : path.split('/').filter(Boolean).join('/') + '/'
 }
 
 const useStorage = defineStore('storageStore', () => {
@@ -116,6 +118,7 @@ const useStorage = defineStore('storageStore', () => {
       }
     })
 
+    console.log(structure, folder.value, file.value)
     return structure
   })
   const currentInfo = reactive<{