From e631ed9c4767527e45fdee86e2c53eda4b805070 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Mon, 8 Jul 2024 14:08:57 +0700
Subject: [PATCH] feat: refactor for path support

---
 .../01_branch-management/BranchCard.vue       | 15 +++++++------
 src/layouts/MainLayout.vue                    | 21 ++++++++++++-------
 src/pages/01_branch-management/MainPage.vue   |  2 +-
 .../02_personnel-management/MainPage.vue      |  2 +-
 src/pages/03_customer-management/MainPage.vue |  7 +++++--
 src/pages/04_product-service/MainPage.vue     |  6 +++---
 src/pages/MainPage.vue                        |  2 +-
 src/stores/utils/index.ts                     | 12 +++++++++--
 8 files changed, 44 insertions(+), 23 deletions(-)

diff --git a/src/components/01_branch-management/BranchCard.vue b/src/components/01_branch-management/BranchCard.vue
index 180ac7e0..945474d5 100644
--- a/src/components/01_branch-management/BranchCard.vue
+++ b/src/components/01_branch-management/BranchCard.vue
@@ -35,12 +35,14 @@ defineProps<{
     @click="$emit('open')"
   >
     <div class="branch-card__header">
-      <div class="branch-card__icon">
-        <q-icon
-          size="md"
-          style="scale: 0.8"
-          name="mdi-office-building-outline"
-        />
+      <div class="branch-card__wrapper">
+        <div class="branch-card__icon">
+          <q-icon
+            size="md"
+            style="scale: 0.8"
+            name="mdi-office-building-outline"
+          />
+        </div>
       </div>
       <div class="branch-card__name">
         <b>{{ data.branchLabelName }}</b>
@@ -96,6 +98,7 @@ defineProps<{
       padding: var(--size-1);
       position: relative;
       transform: rotate(45deg);
+      aspect-ratio: 1;
 
       &::after {
         content: ' ';
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 7fa2b864..1a26d58f 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -259,13 +259,20 @@ onMounted(async () => {
                     : 'Jobs Worker Service'
               }}
             </span>
-            <span class="text-caption">
-              {{
-                utilsStore.currentTitle?.caption
-                  ? $t(utilsStore.currentTitle?.caption)
-                  : ''
-              }}
-            </span>
+            <div class="flex items-center" style="gap: var(--size-1)">
+              <template v-for="(item, i) in utilsStore.currentTitle.path">
+                <span
+                  class="text-caption cursor-pointer"
+                  @click="item.handler?.()"
+                >
+                  {{ item.text ? $t(item.text) : '' }}
+                </span>
+                <q-icon
+                  name="mdi-chevron-right"
+                  v-if="i + 1 !== utilsStore.currentTitle.path.length"
+                />
+              </template>
+            </div>
           </div>
 
           <div class="row q-gutter-x-md items-center" style="margin-left: auto">
diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 50a547dc..45fdaa86 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -151,7 +151,7 @@ async function calculateStats() {
 
 onMounted(async () => {
   utilsStore.currentTitle.title = 'branchManagement';
-  utilsStore.currentTitle.caption = 'branchManagementCaption';
+  utilsStore.currentTitle.path = [{ text: 'branchManagementCaption' }];
 
   await branchStore.fetchList({ pageSize: 99999 });
   await calculateStats();
diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 70d769b7..0faf0fb6 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -453,7 +453,7 @@ async function assignFormData(idEdit: string) {
 
 onMounted(async () => {
   utilsStore.currentTitle.title = 'personnelManagement';
-  utilsStore.currentTitle.caption = 'personnelManagementCaption';
+  utilsStore.currentTitle.path = [{ text: 'personnelManagementCaption' }];
 
   await fetchUserList();
 
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index ec1d819c..d19cff6e 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1240,7 +1240,7 @@ async function fetchListStatsEmployeeGender() {
 
 onMounted(async () => {
   utilsStore.currentTitle.title = 'customerManagement';
-  utilsStore.currentTitle.caption = 'customerManagementCaption';
+  utilsStore.currentTitle.path = [{ text: 'customerManagementCaption' }];
 
   const resultStats = await getStatsCustomer();
 
@@ -1493,7 +1493,10 @@ watch([inputSearch, currentStatus], async () => {
       </div>
 
       <!-- main -->
-      <div class="surface-1 bordered rounded col column">
+      <div
+        class="surface-1 bordered rounded col column"
+        style="overflow: hidden"
+      >
         <!-- tabs -->
         <div class="column">
           <div
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 8890de45..dc5c728b 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -1012,7 +1012,7 @@ function cloneData() {
 
 onMounted(async () => {
   utilsStore.currentTitle.title = 'mainProductTitle';
-  utilsStore.currentTitle.caption = 'mainProductCaption';
+  utilsStore.currentTitle.path = [{ text: 'mainProductCaption' }];
 
   calculateStats();
   await fetchListGroups();
@@ -1229,7 +1229,7 @@ watch(inputSearchProductAndService, async () => {
         v-if="productMode === 'group' || productMode === 'type'"
         class="surface-1 col bordered rounded column no-wrap"
       >
-        <div class="row surface-2 bordered-b q-px-md q-py-sm">
+        <div class="row surface-2 bordered-b q-px-md q-py-sm items-center">
           <div v-if="productMode === 'type'" class="text-h6 text-weight-bold">
             {{ $t('productAndServiceType') }}
           </div>
@@ -1433,7 +1433,7 @@ watch(inputSearchProductAndService, async () => {
         <template v-else>
           <div
             v-if="productMode === 'group'"
-            class="row items-center justify-between"
+            class="row items-center justify-between q-px-md q-py-sm"
           >
             <div class="col-4">
               <div class="row items-center">
diff --git a/src/pages/MainPage.vue b/src/pages/MainPage.vue
index bef9bef9..a84f970f 100644
--- a/src/pages/MainPage.vue
+++ b/src/pages/MainPage.vue
@@ -99,7 +99,7 @@ const menu = [
 
 onMounted(() => {
   utilsStore.currentTitle.title = '';
-  utilsStore.currentTitle.caption = '';
+  utilsStore.currentTitle.path = [{ text: '' }];
 });
 </script>
 
diff --git a/src/stores/utils/index.ts b/src/stores/utils/index.ts
index 77e49b6a..03715f20 100644
--- a/src/stores/utils/index.ts
+++ b/src/stores/utils/index.ts
@@ -95,9 +95,17 @@ export function formatNumberDecimal(num: number, point: number): string {
 }
 
 const useUtilsStore = defineStore('utilsStore', () => {
-  const currentTitle = ref<{ title: string; caption: string }>({
+  const currentTitle = ref<{
+    title: string;
+    path: { text: string; handler?: () => unknown }[];
+  }>({
     title: '',
-    caption: '',
+    path: [
+      {
+        text: '',
+        handler: () => {},
+      },
+    ],
   });
 
   return {