refactor: extract navigator into store instead

src/layouts/MainLayout.vue

@@ -14,9 +14,9 @@ import { CanvasComponent, DialogForm } from 'components/index';
 import useOptionStore from 'stores/options';
 import { dialog } from 'stores/utils';
 import { setLocale } from 'src/utils/datetime';
-import useUtilsStore from 'stores/utils';
 import useMyBranchStore from 'stores/my-branch';
 import { useConfigStore } from 'src/stores/config';
+import { useNavigator } from 'src/stores/navigator';
 
 const useMyBranch = useMyBranchStore();
 const { fetchListMyBranch } = useMyBranch;
@@ -37,7 +37,7 @@ interface Notification {
 
 const $q = useQuasar();
 const loaderStore = useLoader();
-const utilsStore = useUtilsStore();
+const navigatorStore = useNavigator();
 const optionStore = useOptionStore();
 const configStore = useConfigStore();
 
@@ -88,12 +88,6 @@ const notification = ref<Notification[]>([
     content: 'Unread',
     read: false,
   },
-  {
-    id: '2',
-    title: 'test',
-    content: 'test',
-    read: false,
-  },
   {
     id: '3',
     title: 'Read',
@@ -268,8 +262,8 @@ onMounted(async () => {
               }"
             >
               {{
-                utilsStore.currentTitle?.title
+                navigatorStore.current?.title
-                  ? $t(utilsStore.currentTitle?.title)
+                  ? $t(navigatorStore.current?.title)
                   : $q.screen.gt.xs
                     ? 'Welcome to Jobs Worker Service'
                     : 'Jobs Worker Service'
@@ -277,15 +271,15 @@ onMounted(async () => {
             </span>
             <div class="flex items-center" style="gap: var(--size-1)">
               <template
-                v-for="(item, i) in utilsStore.currentTitle.path"
+                v-for="(item, i) in navigatorStore.current.path"
                 :key="i"
               >
                 <span
                   class="text-caption cursor-pointer"
                   @click="item.handler?.()"
                   :class="{
-                    'text-info': i !== utilsStore.currentTitle.path.length - 1,
+                    'text-info': i !== navigatorStore.current.path.length - 1,
-                    'hover-item': i !== utilsStore.currentTitle.path.length - 1,
+                    'hover-item': i !== navigatorStore.current.path.length - 1,
                   }"
                 >
                   {{
@@ -300,10 +294,10 @@ onMounted(async () => {
                 </span>
                 <q-icon
                   :class="{
-                    'text-info': i !== utilsStore.currentTitle.path.length - 1,
+                    'text-info': i !== navigatorStore.current.path.length - 1,
                   }"
                   name="mdi-chevron-right"
-                  v-if="i + 1 !== utilsStore.currentTitle.path.length"
+                  v-if="i + 1 !== navigatorStore.current.path.length"
                 />
               </template>
             </div>

src/pages/01_branch-management/MainPage.vue

@@ -20,7 +20,7 @@ import {
 import NoData from 'src/components/NoData.vue';
 import QrCodeUploadDialog from 'src/components/QrCodeUploadDialog.vue';
 import ItemCard from 'src/components/ItemCard.vue';
-import useUtilsStore, { dialog, baseUrl } from 'stores/utils';
+import { dialog, baseUrl } from 'stores/utils';
 import EmptyAddButton from 'components/AddButton.vue';
 import TooltipComponent from 'components/TooltipComponent.vue';
 import StatCard from 'components/StatCardComponent.vue';
@@ -49,10 +49,11 @@ import {
   SaveButton,
   UndoButton,
 } from 'components/button';
+import { useNavigator } from 'src/stores/navigator';
 
 const $q = useQuasar();
 const { t } = useI18n();
-const utilsStore = useUtilsStore();
+const navigatorStore = useNavigator();
 const modelCreateTypeBranch = ref<boolean>(false);
 const typeBranchItem = [
   {
@@ -230,8 +231,8 @@ async function calculateStats(headOfficeId?: string) {
 }
 
 onMounted(async () => {
-  utilsStore.currentTitle.title = 'menu.branch';
+  navigatorStore.current.title = 'menu.branch';
-  utilsStore.currentTitle.path = [
+  navigatorStore.current.path = [
     {
       text: 'branch.page.captionManage',
       i18n: true,
@@ -914,7 +915,7 @@ watch(
 );
 
 watch(currentHq, () => {
-  const tmp: typeof utilsStore.currentTitle.path = [
+  const tmp: typeof navigatorStore.current.path = [
     {
       text: 'branch.page.captionManage',
       i18n: true,
@@ -940,7 +941,7 @@ watch(currentHq, () => {
 
   selectedSubBranche(currentHq.value.id);
 
-  utilsStore.currentTitle.path = tmp;
+  navigatorStore.current.path = tmp;
 });
 </script>
 

src/pages/02_personnel-management/MainPage.vue

@@ -11,7 +11,8 @@ import useAddressStore from 'stores/address';
 import useMyBranch from 'src/stores/my-branch';
 import { calculateAge } from 'src/utils/datetime';
 import { useQuasar, type QTableProps } from 'quasar';
-import useUtilsStore, { dialog, baseUrl } from 'stores/utils';
+import { dialog, baseUrl } from 'stores/utils';
+import { useNavigator } from 'src/stores/navigator';
 import { isRoleInclude, resetScrollBar } from 'src/stores/utils';
 import { BranchUserStats } from 'stores/branch/types';
 
@@ -53,7 +54,7 @@ const $q = useQuasar();
 
 const userStore = useUserStore();
 const flowStore = useFlowStore();
-const utilsStore = useUtilsStore();
+const navigatorStore = useNavigator();
 const optionStore = useOptionStore();
 const branchStore = useBranchStore();
 const adrressStore = useAddressStore();
@@ -662,8 +663,8 @@ async function fetchUserList() {
 }
 
 onMounted(async () => {
-  utilsStore.currentTitle.title = 'personnel.title';
+  navigatorStore.current.title = 'personnel.title';
-  utilsStore.currentTitle.path = [{ text: 'personnel.caption', i18n: true }];
+  navigatorStore.current.path = [{ text: 'personnel.caption', i18n: true }];
   modeView.value = $q.screen.lt.md ? true : false;
 
   await fetchUserList();

src/pages/03_customer-management/MainPage.vue

@@ -12,7 +12,8 @@ import useOcrStore from 'stores/ocr';
 import useCustomerStore from 'stores/customer';
 import useEmployeeStore from 'stores/employee';
 import useMyBranchStore from 'stores/my-branch';
-import useUtilsStore, { dialog, notify, resetScrollBar } from 'stores/utils';
+import { dialog, notify, resetScrollBar } from 'stores/utils';
+import { useNavigator } from 'src/stores/navigator';
 import useFlowStore from 'stores/flow';
 import { Status } from 'stores/types';
 import {
@@ -81,7 +82,7 @@ const $q = useQuasar();
 const route = useRoute();
 const router = useRouter();
 const flowStore = useFlowStore();
-const utilsStore = useUtilsStore();
+const navigatorStore = useNavigator();
 const customerStore = useCustomerStore();
 const userBranchStore = useMyBranchStore();
 const employeeStore = useEmployeeStore();
@@ -112,8 +113,8 @@ const { state: employeeFormState, currentFromDataEmployee } =
   storeToRefs(employeeFormStore);
 
 async function init() {
-  utilsStore.currentTitle.title = 'menu.customer';
+  navigatorStore.current.title = 'menu.customer';
-  utilsStore.currentTitle.path = [
+  navigatorStore.current.path = [
     {
       text: 'menu.customerCaption',
       i18n: true,
@@ -133,7 +134,7 @@ async function init() {
 
     if (_data) {
       currentCustomer.value = _data;
-      utilsStore.currentTitle.path.push({
+      navigatorStore.current.path.push({
         text: `${
           _data.customerType === 'CORP'
             ? _data.branch[0].registerName

src/pages/04_product-service/MainPage.vue

@@ -48,7 +48,8 @@ const { currentMyBranch } = storeToRefs(userBranchStore);
 
 import { Status } from 'stores/types';
 
-import useUtilsStore, { dialog, dialogWarningClose } from 'stores/utils';
+import { dialog, dialogWarningClose } from 'stores/utils';
+import { useNavigator } from 'src/stores/navigator';
 
 import useProductServiceStore from 'stores/product-service';
 import {
@@ -66,7 +67,7 @@ import { computed } from 'vue';
 import { WorkflowTemplate } from 'src/stores/workflow-template/types';
 
 const flowStore = useFlowStore();
-const utilsStore = useUtilsStore();
+const navigatorStore = useNavigator();
 const productServiceStore = useProductServiceStore();
 const optionStore = useOptionStore();
 
@@ -1463,8 +1464,8 @@ async function fetchImageList(
 }
 
 onMounted(async () => {
-  utilsStore.currentTitle.title = 'productService.title';
+  navigatorStore.current.title = 'productService.title';
-  utilsStore.currentTitle.path = [
+  navigatorStore.current.path = [
     {
       text: 'productService.caption',
       i18n: true,
@@ -1489,7 +1490,7 @@ watch(
     inputSearch.value = '';
     currentStatus.value = 'All';
 
-    let tmp: typeof utilsStore.currentTitle.path = [
+    let tmp: typeof navigatorStore.current.path = [
       {
         text: 'productService.caption',
         i18n: true,
@@ -1521,12 +1522,12 @@ watch(
             filterStat.value = [];
             productMode.value = 'group';
             expandedTree.value.pop();
-            utilsStore.currentTitle.path.pop();
+            navigatorStore.current.path.pop();
           }
         },
       });
       if (expandedTree.value.length === 0) {
-        utilsStore.currentTitle.path = [
+        navigatorStore.current.path = [
           { text: 'productService.caption', i18n: true },
         ];
         return;
@@ -1546,7 +1547,7 @@ watch(
       });
     }
 
-    utilsStore.currentTitle.path = tmp;
+    navigatorStore.current.path = tmp;
   },
   { deep: true },
 );

src/pages/05_quotation/MainPage.vue

@@ -6,7 +6,8 @@ import { storeToRefs } from 'pinia';
 
 // NOTE: Import stores
 import { useQuotationStore } from 'src/stores/quotations';
-import useUtilsStore, { isRoleInclude } from 'stores/utils';
+import { isRoleInclude } from 'stores/utils';
+import { useNavigator } from 'src/stores/navigator';
 import useFlowStore from 'src/stores/flow';
 import useMyBranch from 'stores/my-branch';
 import { useQuotationForm } from './form';
@@ -44,7 +45,7 @@ const quotationFormStore = useQuotationForm();
 const customerFormStore = useCustomerForm();
 const flowStore = useFlowStore();
 const userBranch = useMyBranch();
-const utilsStore = useUtilsStore();
+const navigatorStore = useNavigator();
 
 const {
   currentFormData: quotationFormData,
@@ -220,8 +221,8 @@ const {
 } = storeToRefs(quotationStore);
 
 onMounted(async () => {
-  utilsStore.currentTitle.title = 'quotation.title';
+  navigatorStore.current.title = 'quotation.title';
-  utilsStore.currentTitle.path = [
+  navigatorStore.current.path = [
     {
       text: 'quotation.caption',
       i18n: true,

src/pages/06_edm/MainPage.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { onMounted, ref, watch } from 'vue';
 import { getInstance } from 'src/services/keycloak';
-import useUtilsStore from 'stores/utils';
+import { useNavigator } from 'src/stores/navigator';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 
 const $q = useQuasar();
 const { locale } = useI18n();
-const utilsStore = useUtilsStore();
+const navigatorStore = useNavigator();
 const EDM_SERVICE = import.meta.env.VITE_EDM_MICRO_FRONTEND_URL;
 const kc = getInstance();
 const at = ref(kc.token);
@@ -25,8 +25,8 @@ function sendMessage() {
 }
 
 onMounted(() => {
-  utilsStore.currentTitle.title = 'menu.dms';
+  navigatorStore.current.title = 'menu.dms';
-  utilsStore.currentTitle.path = [
+  navigatorStore.current.path = [
     {
       text: '',
       i18n: true,

src/pages/MainPage.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
 import MenuItem from 'components/00_home/MenuItem.vue';
-import useUtilsStore from 'stores/utils';
+import { useNavigator } from 'src/stores/navigator';
 import { onMounted, ref } from 'vue';
 import { getRole } from 'src/services/keycloak';
 
-const utilsStore = useUtilsStore();
+const navigatorStore = useNavigator();
 const menu = ref<InstanceType<typeof MenuItem>['$props']['list']>([]);
 const role = ref();
 
 onMounted(() => {
-  utilsStore.currentTitle.title = '';
+  navigatorStore.current.title = '';
-  utilsStore.currentTitle.path = [{ text: '' }];
+  navigatorStore.current.path = [{ text: '' }];
 
   role.value = getRole();
   menu.value = [

src/stores/navigator/index.ts

@@ -0,0 +1,19 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+export const useNavigator = defineStore('navigator-store', () => {
+  const current = ref<{
+    title: string;
+    path: {
+      text: string;
+      i18n?: boolean;
+      argsi18n?: Record<string, string>;
+      handler?: () => unknown;
+    }[];
+  }>({
+    title: '',
+    path: [{ text: '', handler: () => {} }],
+  });
+
+  return { current };
+});

src/stores/utils/index.ts

@@ -207,30 +207,6 @@ export function checkTabBeforeAdd(data: unknown[], except?: string[]) {
   return canAdd;
 }
 
-const useUtilsStore = defineStore('utilsStore', () => {
-  const currentTitle = ref<{
-    title: string;
-    path: {
-      text: string;
-      i18n?: boolean;
-      argsi18n?: Record<string, string>;
-      handler?: () => unknown;
-    }[];
-  }>({
-    title: '',
-    path: [
-      {
-        text: '',
-        handler: () => {},
-      },
-    ],
-  });
-
-  return {
-    currentTitle,
-  };
-});
-
 export function isRoleInclude(role2check: string[]): boolean {
   const roles = getRole() ?? [];
   const isIncluded = role2check.some((r) => roles.includes(r));
@@ -521,5 +497,3 @@ export function createDataRefBase<T>(
     pageSize: ref<number>(defaultPageSize),
   };
 }
-
-export default useUtilsStore;