refactor: migrate to storage

refactor: migrate to storage

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)

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 FileIcon from './FileIcon.vue'
-import FileItemAction from '@/components/FileItemAction.vue'
+import FileItemAction from './FileItemAction.vue'
-import DialogDelete from '@/components/DialogDelete.vue'
+import DialogDelete from './DialogDelete.vue'
-import FileForm from './FileForm.vue'
+import FileFormWrapper from './FileFormWrapper.vue'
-import FolderForm from './FolderForm.vue'
+import FolderFormWrapper from './FolderFormWrapper.vue'
-import UploadExistDialog from './UploadExistDialog.vue'
+
-import { useTreeDataStore } from '@/stores/tree-data'
 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 storageStore = useStorage()
-const {
+const { folder, file, currentInfo } = storeToRefs(storageStore)
-  createFolder,
+const { goto, deleteFolder, deleteFile } = storageStore
-  editFolder,
+
-  getFolder,
+const fileFormComponent = ref<InstanceType<typeof FileFormWrapper>>()
-  deleteFolder,
+const folderFormComponent = ref<InstanceType<typeof FolderFormWrapper>>()
-  uploadFile,
+
-  updateFile,
+const deleteState = ref<boolean>(false)
-  deleteFile,
+const deletePath = ref<string>('')
-  checkFile,
+const deleteTarget = ref<'deleteFolder' | 'deleteFile'>()
-  checkFileName,
+const deleteMap = { deleteFolder, deleteFile }
-  refaceFile,
-} = useTreeDataStore()
 
 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'
+  deleteTarget.value = 'deleteFolder'
-  deleteFormPath.value = pathname
+  deletePath.value = pathname
-  dialogDeleteState.value = !dialogDeleteState.value
+  deleteState.value = !deleteState.value
 }
 
 function triggerFileDelete(pathname: string) {
-  deleteFormType.value = 'deleteFile'
+  deleteTarget.value = 'deleteFile'
-  deleteFormPath.value = pathname
+  deletePath.value = pathname
-  dialogDeleteState.value = !dialogDeleteState.value
+  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()
 }
 </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()"
+        v-if="action"
-        id="listViewFolderCreate"
+        :label="'สร้าง' + TREE_LEVEL_NAME[currentInfo.dept]"
+        @click.stop="() => folderFormComponent?.triggerFolderCreate()"
       />
     </div>
   </div>
-  <div class="grid q-mt-md" v-if="currentDept < 4">
+  <div
-    <div v-for="value in currentFolder" :data-pathname="value.pathname">
+    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="() => goto(value.pathname)"
-        @click="
-          () => {
-            ;(folderFormState = false), getFolder(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()"
+        @click.stop="() => folderFormComponent?.triggerFolderCreate()"
-        id="triggerFolderCreateFileItem"
       >
         <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-px-md': currentInfo.dept < 3,
-            'q-pr-xl': currentDept > 2,
+            '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()"
+        v-if="action"
-        id="listViewFileCreate"
+        @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'"
+            :fileMimeType="value.fileType ? value.fileType : '-'"
-            :fileName="value.fileName ? value.fileName : 'unknow'"
+            :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="() => fileFormComponent?.triggerFileCreate()"
-        @click.stop="() => triggerFileCreate()"
-        id="triggerFileCreateFileItem"
       >
         <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;

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 = []
-    keywordList.value = []
+  categoryList.value = []
-    categoryList.value = []
+  foundFile.value.forEach((obj) => {
-    foundFile.value.forEach((obj) => {
+    obj.keyword.forEach((keyword) => {
-      obj.keyword.forEach((keyword) => {
+      if (!keywordList.value.includes(keyword)) {
-        if (!keywordList.value.includes(keyword)) {
+        keywordList.value.push(keyword)
-          keywordList.value.push(keyword)
+      }
-        }
-      })
-      obj.category.forEach((category) => {
-        if (!categoryList.value.includes(category)) {
-          categoryList.value.push(category)
-        }
-      })
     })
-  }
+    obj.category.forEach((category) => {
+      if (!categoryList.value.includes(category)) {
+        categoryList.value.push(category)
+      }
+    })
+  })
 
-  function filterArray() {
+  if (!(selectKeyword.value.length || selectCategory.value.length)) {
-    if (!(selectKeyword.value.length || selectCategory.value.length)) {
+    filterFoundFile.value = foundFile.value
-      filterFoundFile.value = foundFile.value
+  } else {
-    } else {
+    filterFoundFile.value = foundFile.value.filter(
-      filterFoundFile.value = foundFile.value.filter(
+      (entry) =>
-        (entry) =>
+        entry.keyword.some((kw) => selectKeyword.value.includes(kw)) ||
-          entry.keyword.some((kw) => selectKeyword.value.includes(kw)) ||
+        entry.category.some((kw) => selectCategory.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">

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 FileFormWrapper from './FileFormWrapper.vue'
-import FileForm from './FileForm.vue'
+import FolderFormWrapper from './FolderFormWrapper.vue'
-import FolderForm from './FolderForm.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(() =>
+const deleteState = ref<boolean>(false)
-  currentDept.value === 0
+const deletePath = ref<string>('')
-    ? 'ตู้จัดเก็บเอกสาร'
+const deleteTarget = ref<'deleteFolder' | 'deleteFile'>()
-    : currentDept.value === 1
+const deleteMap = { deleteFolder, deleteFile }
-      ? 'ลิ้นชัก'
-      : 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'>()
 
 function triggerFolderDelete(pathname: string) {
-  deleteFormType.value = 'deleteFolder'
+  deleteTarget.value = 'deleteFolder'
-  deleteFormPath.value = pathname
+  deletePath.value = pathname
-  dialogDeleteState.value = !dialogDeleteState.value
+  deleteState.value = !deleteState.value
 }
 
 function triggerFileDelete(pathname: string) {
-  deleteFormType.value = 'deleteFile'
+  deleteTarget.value = 'deleteFile'
-  deleteFormPath.value = pathname
+  deletePath.value = pathname
-  dialogDeleteState.value = !dialogDeleteState.value
+  deleteState.value = !deleteState.value
 }
 
-function triggerFolderCreate() {
+const colFolder = [
-  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'] = [
   {
     name: 'name',
     required: true,
     label: 'ชื่อ',
     align: 'left',
-    field: (row) => row.name,
+    field: 'name',
-    format: (val) => `${val}`,
     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,
+    field: 'fileName',
-    format: (val) => `${val}`,
     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) => {
+const onRowClick = ((_, row) => {
-  getFolder(row.pathname)
+  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">
+        <template v-slot:body-cell-name="data">
-          <q-td style="width: 50%">
+          <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">
+        <template v-slot:body-cell-createdBy="data">
-          <q-td>
+          <q-td class="text-center">
-            <div class="justify-center center-content">
+            <span class="sort-icon-offset-margin">
-              {{ createdByRow.row.createdBy }}
+              {{ data.row.createdBy }}
-            </div>
+            </span>
           </q-td>
         </template>
-        <template v-slot:body-cell-createdAt="createdAtRow">
+        <template v-slot:body-cell-createdAt="data">
-          <q-td>
+          <q-td class="text-center">
-            <div class="justify-center">
+            <span class="sort-icon-offset-margin">
-              {{ getFormatDate(createdAtRow.row.createdAt) }}
+              {{ getFormatDate(data.row.createdAt) }}
-            </div>
+            </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(
+                  folderFormComponent?.triggerFolderEdit(
-                    actionsRow.row.name,
+                    data.row.name,
-                    actionsRow.row.pathname,
+                    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="currentInfo.dept >= 3">
-  <div class="q-mt-md" v-if="currentDept >= 3">
     <div class="q-gutter-sm">
-      <div class="flex flex-break d justify-between space-between">
+      <div class="flex flex-break justify-between space-between">
-        <div>
+        <div><span class="text-h6">เอกสาร</span></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()"
+            v-if="props.mode == 'admin'"
-            id="listViewFileCreate"
+            @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="
+              :fileMimeType="data.row.fileType || '-'"
-                nameRow.row.fileType ? nameRow.row.fileType : 'unknown'
+              :fileName="data.row.fileName || '-'"
-              "
-              :fileName="
-                nameRow.row.fileName ? nameRow.row.fileName : 'unknown'
-              "
             />
-            {{ nameRow.row.fileName }}
+            {{ data.row.fileName }}
           </q-td>
         </template>
-
+        <template v-slot:body-cell-title="data">
-        <template v-slot:body-cell-fileType="fileTypeRow">
+          <q-td class="text-center">
-          <q-td>
+            <span class="sort-icon-offset-margin">{{ data.row.title }}</span>
-            <div class="justify-center">
-              {{ getType(fileTypeRow.row.fileType, fileTypeRow.row.fileName) }}
-            </div>
           </q-td>
         </template>
-
+        <template v-slot:body-cell-fileType="data">
-        <template v-slot:body-cell-actions="actionsRow">
+          <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;
 }
 

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 { isFilePreview } = storeToRefs(useFileInfoStore())
-const folderFormType = ref<'edit' | 'create'>('create')
+const { isSearch } = storeToRefs(useSearchDataStore())
-const folderFormData = ref<{
-  name?: string
-}>({})
 
-function triggerFolderCreate() {
+const storageStore = useStorage()
-  folderFormType.value = 'create'
+const { tree, currentInfo } = storeToRefs(storageStore)
-  folderFormData.value = {}
+const { goto, gotoParent } = storageStore
-  folderFormState.value = !folderFormState.value
-}
 
-async function submitFolderForm(value: {
+const viewMode = ref<'view_list' | 'view_module'>('view_list')
-  mode: 'create' | 'edit'
-  name: string
-}) {
-  if (value.mode === 'create') {
-    await createFolder(value.name)
-  }
-}
 
-onMounted(async () => {
+const folderFormComponent = ref<InstanceType<typeof FolderFormWrapper>>()
-  await getCabinet()
-
-  const sessionCurrentPath = sessionStorage.getItem('currentPath')
-
-  if (sessionCurrentPath) await getFolder(sessionCurrentPath)
-})
 </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 = ''
+                goto()
-                getFolder(currentPath)
                 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 ? (isSearch = false) : gotoParent()
-                        ? (isSearch = false)
-                        : ((folderFormState = false), gotoParent())
                     }
                   "
                 >
                   <q-icon name="arrow_back" size="1rem" color="primary" />
                 </q-btn>
-                <span v-if="isSearch === true">ผลการค้นหา</span>
+                <span v-if="isSearch">ผลการค้นหา</span>
-                <q-breadcrumbs v-if="isSearch === false" active-color="primary">
+                <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="
+                    dense
-                      mode === 'admin' &&
+                    id="createFolder"
-                      viewMode === 'view_module' &&
-                      currentDept === 0
-                    "
                     class="q-px-md q-ml-md al"
                     label="สร้างตู้เก็บเอกสาร"
                     type="submit"
                     color="primary"
-                    dense
                     icon="add"
-                    @click.stop="() => triggerFolderCreate()"
+                    v-if="
-                    id="createFolder"
+                      mode === 'admin' &&
+                      viewMode === 'view_module' &&
+                      currentInfo.dept === 0
+                    "
+                    @click.stop="
+                      () => folderFormComponent?.triggerFolderCreate()
+                    "
                   />
                   <q-breadcrumbs-el
-                    class="text-primary pointer"
+                    class="pointer"
-                    v-for="(fragments, index) in currentPath
+                    v-for="(fragments, index) in currentInfo.path
                       .split('/')
                       .filter(Boolean)"
                     :label="fragments"
                     @click="
                       () => {
-                        currentPath =
+                        goto(
-                          currentPath
+                          currentInfo.path
                             .split('/')
                             .filter(Boolean)
                             .slice(0, index + 1)
-                            .join('/') + '/'
+                            .join('/') + '/',
-
+                        )
-                        getFolder(currentPath)
                       }
                     "
                   />
@@ -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)"
+                @click="() => goto(currentInfo.path, true)"
-                id="getFolder"
               />
               <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>

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 dropdown = ref<boolean>(false)
-const accountName = ref<string>(getUsername())
+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">
+        <span class="text-body1" style="font-size: 13px">
-          {{ accountName }}
+          {{ 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>

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[]
+    data: typeof store.tree
-    level: number
+    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"
+        :label="v.name"
-        class="text-overflow-handle"
+        class="text-overflow-handle active"
-        v-model="folder.status"
       >
         <tree-explorer
-          v-if="folder.folder"
+          v-if="v.folder"
-          :data="folder.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;
 }
 

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

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,
       )

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 fileInfo = ref<StorageFile>()
-  const fileIcon: TypeSetting = {
+  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
   }

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
   }
 

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 { loader } = storeToRefs(useLoader())
-const loaderStore = useLoader()
+const { goto } = useStorage()
-const { loader } = storeToRefs(loaderStore)
 </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="
+          @click="() => goto()"
-            () => {
-              currentPath = ''
-              getFolder(currentPath)
-            }
-          "
         />
         <div
           class="column q-px-md pointer"
           id="app-toolbar-title"
           @click="
             () => {
-              currentPath = ''
+              goto()
-              getFolder(currentPath)
               isSearch = false
               isFilePreview = false
             }