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,19 +97,29 @@ 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">
-              <q-btn
+              <div class="row items-center">
-                flat
+                <q-btn
-                dense
+                  flat
-                class="q-mr-sm q-px-sm"
+                  dense
-                v-if="currentDept > 0 && isSearch === false"
+                  class="q-mr-sm q-px-sm"
-                @click="() => gotoParent()"
+                  v-if="currentDept > 0 && isSearch === false"
-              >
+                  @click="() => gotoParent()"
-                <q-icon name="arrow_back" size="1rem" color="primary"
+                >
-              /></q-btn>
+                  <q-icon name="arrow_back" size="1rem" color="primary" />
-              <span v-if="isSearch === false">{{
+                </q-btn>
-                DEPT_NAME[currentDept]
+                <q-breadcrumbs v-if="isSearch === false" active-color="primary">
-              }}</span>
+                  <q-breadcrumbs-el
+                    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="
@@ -123,20 +133,31 @@ onMounted(getCabinet)
                 color="primary"
                 dense
                 icon="add"
-                @click="()=> triggerFolderCreate()"
+                @click="() => triggerFolderCreate()"
               />
             </span>
-            <q-btn
+            <div>
-              flat
+              <q-btn
-              color="blue-grey-2"
+                flat
-              :icon="viewMode"
+                dense
-              @click="
+                color="blue-grey-2"
-                () => {
+                icon="refresh"
-                  viewMode =
+                class="q-mr-sm"
-                    viewMode === 'view_list' ? 'view_module' : 'view_list'
+                @click="() => getFolder(currentPath)"
-                }
+              />
-              "
+              <q-btn
-            />
+                flat
+                dense
+                color="blue-grey-2"
+                :icon="viewMode"
+                @click="
+                  () => {
+                    viewMode =
+                      viewMode === 'view_list' ? 'view_module' : 'view_list'
+                  }
+                "
+              />
+            </div>
           </div>
           <div>
             <file-searched v-if="isSearch === true" />