From db9a1d7056a1ae9f5079da9948b568ce6c1bc32f Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Tue, 11 Mar 2025 16:06:57 +0700
Subject: [PATCH] refactor: handle url to tab

---
 src/components/00_home/MenuItem.vue  | 7 ++++---
 src/pages/09_task-order/MainPage.vue | 6 ++++++
 src/pages/MainPage.vue               | 3 ++-
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/00_home/MenuItem.vue b/src/components/00_home/MenuItem.vue
index 484eccbc..f75fa42d 100644
--- a/src/components/00_home/MenuItem.vue
+++ b/src/components/00_home/MenuItem.vue
@@ -15,6 +15,7 @@ defineProps<{
     hidden?: boolean;
     disabled?: boolean;
     isax?: boolean;
+    tab?: string;
     color:
       | 'green'
       | 'red'
@@ -28,8 +29,8 @@ defineProps<{
   }[];
 }>();
 
-function navigateTo(destination: string) {
-  router.push(`${destination}`);
+function navigateTo(destination: string, tab?: string) {
+  router.push({ path: `${destination}`, query: tab ? { tab } : {} });
 }
 </script>
 
@@ -44,7 +45,7 @@ function navigateTo(destination: string) {
       v-for="(v, i) in list.filter((item) => !item.hidden)"
       :key="i"
       :bordered="$q.dark.isActive"
-      @click="!v.disabled && navigateTo(v.value)"
+      @click="!v.disabled && navigateTo(v.value, v.tab)"
     >
       <AppCircle
         :id="`menu-icon-${v.value}`"
diff --git a/src/pages/09_task-order/MainPage.vue b/src/pages/09_task-order/MainPage.vue
index 54df2966..a842b431 100644
--- a/src/pages/09_task-order/MainPage.vue
+++ b/src/pages/09_task-order/MainPage.vue
@@ -4,6 +4,7 @@ import { computed, onMounted, reactive, watch, ref } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
 
 // NOTE:  Components
 import StatCardComponent from 'src/components/StatCardComponent.vue';
@@ -29,6 +30,7 @@ import { PaginationResult } from 'src/types';
 
 const { t } = useI18n();
 const $q = useQuasar();
+const route = useRoute();
 const navigatorStore = useNavigator();
 const flowStore = useFlowStore();
 const taskOrderStore = useTaskOrderStore();
@@ -143,6 +145,10 @@ onMounted(async () => {
   navigatorStore.current.path = [{ text: 'taskOrder.caption', i18n: true }];
   fetchTaskOrderList();
   taskOrderStore.getTaskOrderStats();
+
+  if (route.query['tab'] && typeof route.query['tab'] === 'string') {
+    pageState.currentTab = route.query['tab'];
+  }
 });
 
 watch(
diff --git a/src/pages/MainPage.vue b/src/pages/MainPage.vue
index 6e3a622d..24d2f8fb 100644
--- a/src/pages/MainPage.vue
+++ b/src/pages/MainPage.vue
@@ -84,11 +84,12 @@ onMounted(() => {
       isax: true,
     },
     {
-      value: 'receipt',
+      value: 'task-order',
       icon: 'material-symbols:box',
       color: 'camo',
       title: 'menu.invoice',
       caption: 'menu.invoiceCaption',
+      tab: 'Complete',
     },
     {
       value: '',