feat: breadcrumbs

Services/client/src/components/PageLayout.vue

@@ -16,8 +16,8 @@ const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แ
 
 const { isFilePreview } = storeToRefs(useFileInfoStore())
 const { isSearch } = storeToRefs(useSearchDataStore())
-const { data, currentDept } = storeToRefs(useTreeDataStore())
+const { data, currentDept, currentPath } = storeToRefs(useTreeDataStore())
-const { createFolder, getCabinet, gotoParent } = useTreeDataStore()
+const { createFolder, getCabinet, gotoParent, getFolder } = useTreeDataStore()
 
 const viewMode = ref<'view_list' | 'view_module'>('view_list')
 const inputSearch = ref<string>()
@@ -97,7 +97,8 @@ onMounted(getCabinet)
         <search-bar v-if="mode === 'user'" />
         <div class="bg-white q-pa-md">
           <div class="row items-center justify-between">
-            <span class="text-h6">
+            <span class="text-body1">
+              <div class="row items-center">
                 <q-btn
                   flat
                   dense
@@ -105,11 +106,20 @@ onMounted(getCabinet)
                   v-if="currentDept > 0 && isSearch === false"
                   @click="() => gotoParent()"
                 >
-                <q-icon name="arrow_back" size="1rem" color="primary"
+                  <q-icon name="arrow_back" size="1rem" color="primary" />
-              /></q-btn>
+                </q-btn>
-              <span v-if="isSearch === false">{{
+                <q-breadcrumbs v-if="isSearch === false" active-color="primary">
-                DEPT_NAME[currentDept]
+                  <q-breadcrumbs-el
-              }}</span>
+                    v-if="currentPath === '/' || !currentPath"
+                    label="ตู้เอกสารทั้งหมด"
+                  />
+                  <q-breadcrumbs-el
+                    class="text-black"
+                    v-for="fragments in currentPath.split('/').filter(Boolean)"
+                    :label="fragments"
+                  />
+                </q-breadcrumbs>
+              </div>
               <span v-if="isSearch === true">ผลการค้นหา</span>
               <q-btn
                 v-if="
@@ -126,8 +136,18 @@ onMounted(getCabinet)
                 @click="() => triggerFolderCreate()"
               />
             </span>
+            <div>
               <q-btn
                 flat
+                dense
+                color="blue-grey-2"
+                icon="refresh"
+                class="q-mr-sm"
+                @click="() => getFolder(currentPath)"
+              />
+              <q-btn
+                flat
+                dense
                 color="blue-grey-2"
                 :icon="viewMode"
                 @click="
@@ -138,6 +158,7 @@ onMounted(getCabinet)
                 "
               />
             </div>
+          </div>
           <div>
             <file-searched v-if="isSearch === true" />
             <file-item