From 3119cef2ff8bc9b1172b6a79e81f49d91bd0c884 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Wed, 30 Oct 2024 16:05:27 +0700
Subject: [PATCH] fix: new drawer menu

---
 src/layouts/DrawerComponent.vue | 507 ++++++++++++++++++++++++--------
 1 file changed, 384 insertions(+), 123 deletions(-)

diff --git a/src/layouts/DrawerComponent.vue b/src/layouts/DrawerComponent.vue
index f5418d38..51ace954 100644
--- a/src/layouts/DrawerComponent.vue
+++ b/src/layouts/DrawerComponent.vue
@@ -1,16 +1,88 @@
 <script setup lang="ts">
-import { computed, ref, onMounted } from 'vue';
+import { computed, ref, onMounted, watch, nextTick } from 'vue';
 import { useRouter } from 'vue-router';
 import { storeToRefs } from 'pinia';
 import { Icon } from '@iconify/vue';
 import useMyBranch from 'stores/my-branch';
 import { getUserId, getRole } from 'src/services/keycloak';
 
-defineProps<{
+const props = defineProps<{
   mini?: boolean;
 }>();
 
 const role = ref();
+const router = useRouter();
+const userBranch = useMyBranch();
+const { currentMyBranch } = storeToRefs(userBranch);
+
+const menuActive = ref<boolean[]>([false, false, false, false, false]);
+const currentPath = computed(() => {
+  return router.currentRoute.value.path;
+});
+
+// const labelMenu = ref<
+//   {
+//     label: string;
+//     icon: string;
+//     route: string;
+//     hidden?: boolean;
+//     disabled?: boolean;
+//     isax?: boolean;
+//   }[]
+// >([]);
+
+type Menu = {
+  label: string;
+  route?: string;
+  icon?: string;
+  hidden?: boolean;
+  disabled?: boolean;
+  isax?: boolean;
+  children?: Menu[];
+};
+
+const menuData = ref<Menu[]>([]);
+
+const leftDrawerOpen = defineModel<boolean>('leftDrawerOpen', {
+  default: true,
+});
+
+function navigateTo(label: string, destination?: string) {
+  if (!destination) return;
+  router.push(`${destination}`);
+}
+
+function branchSetting() {}
+
+function reActiveMenu() {
+  menuActive.value.fill(false);
+
+  const currMenu = menuData.value.find((m) =>
+    m.children?.some((c) => c.route === currentPath.value),
+  );
+
+  const currMenuIndex = menuData.value.findIndex((m) => m === currMenu);
+  menuActive.value[currMenuIndex] = true;
+}
+
+watch(
+  () => currentPath.value,
+  () => {
+    if (currentPath.value === '/') {
+      menuActive.value.fill(false);
+      menuActive.value[0] = true;
+    } else reActiveMenu();
+  },
+);
+
+watch(
+  () => props.mini,
+  () => {
+    if (props.mini) {
+      reActiveMenu();
+    }
+  },
+);
 
 onMounted(async () => {
   const uid = getUserId();
@@ -25,129 +97,178 @@ onMounted(async () => {
   const result = await userBranch.fetchListMyBranch(uid);
   if (result && result.total > 0) currentMyBranch.value = result.result[0];
 
-  labelMenu.value = [
+  // labelMenu.value = [
+  //   {
+  //     label: 'menu.dashboard',
+  //     icon: 'isax-element-35',
+  //     route: '',
+  //     isax: true,
+  //     disabled: true,
+  //   },
+  //   {
+  //     label: 'menu.branch',
+  //     icon: 'mdi-chart-donut',
+  //     route: '/branch-management',
+  //     hidden:
+  //       role.value.includes('admin') ||
+  //       role.value.includes('branch_admin') ||
+  //       role.value.includes('head_of_admin') ||
+  //       role.value.includes('system') ||
+  //       role.value.includes('owner') ||
+  //       role.value.includes('head_of_account')
+  //         ? false
+  //         : true,
+  //   },
+  //   {
+  //     label: 'menu.user',
+  //     icon: 'fa6-solid:building-user',
+  //     route: '/personnel-management',
+  //     hidden:
+  //       role.value.includes('admin') ||
+  //       role.value.includes('branch_admin') ||
+  //       role.value.includes('head_of_admin') ||
+  //       role.value.includes('system') ||
+  //       role.value.includes('owner') ||
+  //       role.value.includes('branch_manager')
+  //         ? false
+  //         : true,
+  //   },
+  //   {
+  //     label: 'menu.customer',
+  //     icon: 'isax-frame5',
+  //     route: '/customer-management',
+  //     isax: true,
+  //   },
+  //   {
+  //     label: 'menu.product',
+  //     icon: 'heroicons-truck-solid',
+  //     route: '/product-service',
+  //   },
+  //   {
+  //     label: 'menu.dms',
+  //     icon: 'mdi-folder-file',
+  //     route: '/document-management',
+  //   },
+  //   {
+  //     label: 'menu.quotation',
+  //     icon: 'mdi-file-document',
+  //     route: '/quotation',
+  //   },
+  //   {
+  //     label: 'menu.requestList',
+  //     icon: 'isax-device-message5',
+  //     route: '',
+  //     disabled: true,
+  //     isax: true,
+  //   },
+  //   {
+  //     label: 'menu.workOrder',
+  //     icon: 'isax-receipt-2-15',
+  //     route: '',
+  //     disabled: true,
+  //     isax: true,
+  //   },
+  //   {
+  //     label: 'menu.invoice',
+  //     icon: 'material-symbols:box',
+  //     route: '',
+  //     disabled: true,
+  //   },
+  //   {
+  //     label: 'menu.accountingLedger',
+  //     icon: 'isax-dollar-circle4',
+  //     route: '',
+  //     isax: true,
+  //     disabled: true,
+  //   },
+  //   {
+  //     label: 'menu.report',
+  //     icon: 'mdi-file-document',
+  //     route: '',
+  //     disabled: true,
+  //   },
+  // ];
+
+  menuData.value = [
     {
-      label: 'menu.dashboard',
-      icon: 'isax-element-35',
-      route: '',
-      isax: true,
+      label: 'menu.manage',
+      icon: 'mdi-account-cog-outline',
+      children: [
+        {
+          label: 'branch',
+          route: '/branch-management',
+          hidden:
+            role.value.includes('admin') ||
+            role.value.includes('branch_admin') ||
+            role.value.includes('head_of_admin') ||
+            role.value.includes('system') ||
+            role.value.includes('owner') ||
+            role.value.includes('head_of_account')
+              ? false
+              : true,
+        },
+        {
+          label: 'personnel',
+          route: '/personnel-management',
+          hidden:
+            role.value.includes('admin') ||
+            role.value.includes('branch_admin') ||
+            role.value.includes('head_of_admin') ||
+            role.value.includes('system') ||
+            role.value.includes('owner') ||
+            role.value.includes('branch_manager')
+              ? false
+              : true,
+        },
+        { label: 'productService', route: '/product-service' },
+        { label: 'document', route: '/document-management' },
+        { label: 'workflow', route: '/workflow' },
+        { label: 'customer', route: '/customer-management' },
+      ],
+    },
+    {
+      label: 'menu.sales',
+      icon: 'mdi-store-settings-outline',
+      children: [{ label: 'quotation', route: '/quotation' }],
+    },
+    {
+      label: 'menu.order',
+      icon: 'mdi-file-chart-outline',
       disabled: true,
+      children: [
+        { label: 'requestList', route: '' },
+        { label: 'documentCheck', route: '' },
+        { label: 'workOrder', route: '' },
+        { label: 'goodReceipt', route: '' },
+        { label: 'workReceipt', route: '' },
+        { label: 'workDelivery', route: '' },
+      ],
     },
     {
-      label: 'menu.branch',
-      icon: 'mdi-chart-donut',
-      route: '/branch-management',
-      hidden:
-        role.value.includes('admin') ||
-        role.value.includes('branch_admin') ||
-        role.value.includes('head_of_admin') ||
-        role.value.includes('system') ||
-        role.value.includes('owner') ||
-        role.value.includes('head_of_account')
-          ? false
-          : true,
-    },
-    {
-      label: 'menu.user',
-      icon: 'fa6-solid:building-user',
-      route: '/personnel-management',
-      hidden:
-        role.value.includes('admin') ||
-        role.value.includes('branch_admin') ||
-        role.value.includes('head_of_admin') ||
-        role.value.includes('system') ||
-        role.value.includes('owner') ||
-        role.value.includes('branch_manager')
-          ? false
-          : true,
-    },
-    {
-      label: 'menu.customer',
-      icon: 'isax-frame5',
-      route: '/customer-management',
-      isax: true,
-    },
-    {
-      label: 'menu.product',
-      icon: 'heroicons-truck-solid',
-      route: '/product-service',
-    },
-    {
-      label: 'menu.dms',
-      icon: 'mdi-folder-file',
-      route: '/document-management',
-    },
-    {
-      label: 'menu.quotation',
-      icon: 'mdi-file-document',
-      route: '/quotation',
-    },
-    {
-      label: 'menu.requestList',
-      icon: 'isax-device-message5',
-      route: '',
+      label: 'menu.account',
+      icon: 'mdi-bank-outline',
       disabled: true,
-      isax: true,
+      children: [
+        { label: 'uploadSlip', route: '' },
+        { label: 'receipt', route: '' },
+        { label: 'creditNote', route: '' },
+        { label: 'debitNote', route: '' },
+      ],
     },
     {
-      label: 'menu.workOrder',
-      icon: 'isax-receipt-2-15',
-      route: '',
-      disabled: true,
-      isax: true,
-    },
-    {
-      label: 'menu.invoice',
-      icon: 'material-symbols:box',
-      route: '',
-      disabled: true,
-    },
-    {
-      label: 'menu.accountingLedger',
-      icon: 'isax-dollar-circle4',
-      route: '',
-      isax: true,
-      disabled: true,
-    },
-    {
-      label: 'menu.report',
-      icon: 'mdi-file-document',
-      route: '',
+      label: 'menu.overall',
+      icon: 'mdi-monitor-dashboard',
       disabled: true,
+      children: [
+        { label: 'report', route: '' },
+        { label: 'dashboard', route: '' },
+      ],
     },
   ];
+
+  if (currentPath.value === '/') menuActive.value[0] = true;
+  else reActiveMenu();
 });
-
-const router = useRouter();
-const userBranch = useMyBranch();
-const { currentMyBranch } = storeToRefs(userBranch);
-
-const currentRoute = ref<string>('');
-const currentPath = computed(() => {
-  return router.currentRoute.value.path;
-});
-
-const labelMenu = ref<
-  {
-    label: string;
-    icon: string;
-    route: string;
-    hidden?: boolean;
-    disabled?: boolean;
-    isax?: boolean;
-  }[]
->([]);
-
-const leftDrawerOpen = defineModel<boolean>('leftDrawerOpen', {
-  default: true,
-});
-
-function navigateTo(label: string, destination: string) {
-  currentRoute.value = label;
-  router.push(`${destination}`);
-}
-
-function branchSetting() {}
 </script>
 
 <template>
@@ -163,8 +284,11 @@ function branchSetting() {}
     show-if-above
   >
     <!-- :width="$q.screen.lt.sm ? $q.screen.width - 16 : 256" -->
-    <div class="scroll" style="overflow-x: hidden; scrollbar-gutter: stable">
-      <div
+    <section
+      class="scroll"
+      style="overflow-x: hidden; scrollbar-gutter: stable"
+    >
+      <header
         class="flex justify-center items-center q-pl-sm cursor-pointer"
         @click="$router.push('/')"
         id="btn-drawer-home"
@@ -176,10 +300,106 @@ function branchSetting() {}
           :style="{ filter: `brightness(${$q.dark.isActive ? '1.3' : '1'})` }"
           style="height: 64px"
         />
-      </div>
+      </header>
 
-      <div id="drawer-menu" class="q-pl-md q-mr-xs">
-        <q-item
+      <div id="drawer-menu" class="q-pl-md q-mr-xs q-gutter-y-sm">
+        <template v-for="(menu, i) in menuData" :key="i">
+          <q-expansion-item
+            v-if="!menu.hidden"
+            dense
+            :model-value="menuActive[i]"
+            expand-icon-class="no-padding"
+            :hide-expand-icon="mini"
+            :disable="menu.disabled"
+            :header-class="{
+              row: true,
+              'justify-between': !mini,
+              'no-padding justify-center': mini,
+              'active-menu text-weight-bold': menuActive[i],
+              'text-weight-medium': !menu.disabled,
+            }"
+            @update:model-value="
+              () => {
+                mini ? '' : (menuActive[i] = !menuActive[i]);
+              }
+            "
+          >
+            <template #header>
+              <nav class="row items-center q-py-sm no-wrap">
+                <i
+                  v-if="menu.isax"
+                  :class="`isax ${menu.icon}`"
+                  style="font-size: 24px"
+                />
+                <Icon v-else :icon="menu.icon || ''" width="24px" />
+                <span v-if="!mini" class="q-pl-sm" style="white-space: nowrap">
+                  {{ $t(`${menu.label}.title`) }}
+                </span>
+                <q-tooltip :delay="500">
+                  {{ $t(`${menu.label}.title`) }}
+                </q-tooltip>
+
+                <q-menu
+                  v-if="mini"
+                  fit
+                  anchor="center end"
+                  self="top left"
+                  :offset="[16, 0]"
+                >
+                  <q-list dense>
+                    <template v-for="(sub, i) in menu.children" :key="i">
+                      <q-item
+                        v-if="!sub.hidden"
+                        clickable
+                        :disabled="sub.disabled"
+                        class="row items-center no-wrap"
+                        :class="{
+                          'text-weight-bold app-bg-brand-1':
+                            currentPath === sub.route,
+                        }"
+                        @click="
+                          () => {
+                            !sub.disabled && navigateTo('', sub.route);
+                          }
+                        "
+                      >
+                        <span style="white-space: nowrap">
+                          {{ $t(`${menu.label}.${sub.label}`) }}
+                        </span>
+                      </q-item>
+                    </template>
+                  </q-list>
+                </q-menu>
+              </nav>
+            </template>
+
+            <q-list v-if="!mini" dense>
+              <template v-for="(sub, i) in menu.children" :key="i">
+                <div
+                  v-if="!sub.hidden"
+                  class="row items-center q-ml-lg q-py-sm no-wrap"
+                  :class="{ 'q-mt-sm': i === 0, 'sub-menu': !sub.disabled }"
+                  style="border-left: 2px solid var(--surface-tab)"
+                  @click="!sub.disabled && navigateTo('', sub.route)"
+                >
+                  <nav
+                    class="row items-center no-wrap"
+                    :class="{
+                      active: currentPath === sub.route,
+                      disabled: sub.disabled,
+                    }"
+                  >
+                    <span class="q-px-md" style="white-space: nowrap">
+                      {{ $t(`${menu.label}.${sub.label}`) }}
+                    </span>
+                  </nav>
+                </div>
+              </template>
+            </q-list>
+          </q-expansion-item>
+        </template>
+
+        <!-- <q-item
           v-for="v in labelMenu.filter((v) => !v.hidden)"
           :id="`drawer-${v.label}`"
           dense
@@ -209,11 +429,11 @@ function branchSetting() {}
           <div v-if="!mini" class="q-ml-md" style="white-space: nowrap">
             {{ $t(v.label) }}
           </div>
-        </q-item>
+        </q-item> -->
       </div>
-    </div>
+    </section>
 
-    <div
+    <footer
       class="surface-2 q-px-md q-py-sm row items-center no-wrap justify-start"
       :class="{ 'justify-center': mini }"
       style="min-height: 56px; overflow-x: hidden"
@@ -266,7 +486,7 @@ function branchSetting() {}
         @click="branchSetting"
         style="margin-left: auto"
       />
-    </div>
+    </footer>
   </q-drawer>
 </template>
 
@@ -327,4 +547,45 @@ function branchSetting() {}
   display: inline-block;
   border: 1.5px solid white;
 }
+
+:deep(.active-menu) {
+  color: white !important;
+  background: var(--brand-1) !important;
+
+  i.q-icon.mdi.mdi-chevron-down.q-expansion-item__toggle-icon.q-expansion-item__toggle-icon--rotated {
+    color: white !important;
+  }
+}
+
+.sub-menu {
+  font-weight: 400;
+  .active {
+    &::before {
+      content: '';
+      display: inline-block;
+      margin-left: -3px;
+      width: 4px;
+      height: 18px;
+      border-radius: 50px;
+      background-color: var(--brand-2);
+    }
+    color: var(--brand-1) !important;
+    font-weight: bold;
+  }
+
+  &:hover {
+    nav::before {
+      content: '';
+      display: inline-block;
+      margin-left: -3px;
+      width: 4px;
+      height: 18px;
+      border-radius: 50px;
+      background-color: var(--brand-2);
+    }
+    color: var(--brand-1) !important;
+    cursor: pointer;
+    font-weight: bold;
+  }
+}
 </style>