From 8a9df706393586b0c74bbd72566d782a11450f79 Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Mon, 19 Aug 2024 17:18:53 +0700
Subject: [PATCH] refactor: SideMenu navigate

---
 src/pages/03_customer-management/MainPage.vue | 161 ++++++++++--------
 1 file changed, 92 insertions(+), 69 deletions(-)

diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index d98e3a7b..4446f4da 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1943,51 +1943,50 @@ const emptyCreateDialog = ref(false);
           <div class="q-py-md q-pl-md q-pr-sm">
             <SideMenu
               :menu="
-                employeeFormState.currentTab === 'personalInfo'
-                  ? [
-                      {
-                        name: $t('formDialogTitleInformation'),
-                        anchor: 'form-information',
-                      },
-                      {
-                        name: $t('formDialogTitlePersonal'),
-                        anchor: 'form-personal',
-                      },
-                      {
-                        name: $t('formDialogTitlePersonnelAddress'),
-                        anchor: 'form-personal-address',
-                      },
-                      {
-                        name: $t('formDialogTitlePassport'),
-                        anchor: 'form-passport',
-                      },
-                      {
-                        name: $t('formDialogTitleVisa'),
-                        anchor: 'form-visa',
-                      },
-                    ]
-                  : employeeFormState.currentTab === 'healthCheck'
-                    ? [
-                        {
-                          name: $t('formDialogInputCheckupRes'),
-                          anchor: 'form-checkup',
-                        },
-                      ]
-                    : employeeFormState.currentTab === 'workHistory'
-                      ? [
-                          {
-                            name: $t('workHistory'),
-                            anchor: 'form-workHistory',
-                          },
-                        ]
-                      : employeeFormState.currentTab === 'other'
-                        ? [
-                            {
-                              name: $t('other'),
-                              anchor: 'form-other',
-                            },
-                          ]
-                        : []
+                [
+                  {
+                    name: $t('formDialogTitleInformation'),
+                    anchor: 'form-information',
+                    tab: 'personalInfo',
+                  },
+                  {
+                    name: $t('formDialogTitlePersonal'),
+                    anchor: 'form-personal',
+                    tab: 'personalInfo',
+                  },
+                  {
+                    name: $t('formDialogTitlePersonnelAddress'),
+                    anchor: 'form-personal-address',
+                    tab: 'personalInfo',
+                  },
+                  {
+                    name: $t('formDialogTitlePassport'),
+                    anchor: 'form-passport',
+                    tab: 'personalInfo',
+                  },
+                  {
+                    name: $t('formDialogTitleVisa'),
+                    anchor: 'form-visa',
+                    tab: 'personalInfo',
+                  },
+                  ...(currentFromDataEmployee.employeeCheckup?.map((v, i) => ({
+                    name: $t('customer.form.instance', { index: i + 1 }),
+                    anchor: `form-employee-checkup-${i}`,
+                    tab: 'healthCheck',
+                  })) || []),
+
+                  ...(currentFromDataEmployee.employeeWork?.map((v, i) => ({
+                    name: $t('customer.form.instance', { index: i + 1 }),
+                    anchor: `form-employee-work-history-${i}`,
+                    tab: 'workHistory',
+                  })) || []),
+
+                  {
+                    name: $t('formDialogTitleFamilyHistory'),
+                    anchor: 'form-employee-other',
+                    tab: 'other',
+                  },
+                ].filter((v) => v.tab === employeeFormState.currentTab)
               "
               background="transparent"
               :active="{
@@ -2260,7 +2259,7 @@ const emptyCreateDialog = ref(false);
           <template v-if="employeeFormState.currentTab === 'other'">
             <FormEmployeeOther
               v-if="employeeFormState.currentTab === 'other'"
-              id="form-other"
+              id="form-employee-other"
               prefix-id="form-employee"
               dense
               outlined
@@ -2458,28 +2457,52 @@ const emptyCreateDialog = ref(false);
         >
           <div class="q-py-md q-pl-md q-pr-sm">
             <SideMenu
-              :menu="[
-                {
-                  name: $t('formDialogTitleInformation'),
-                  anchor: 'drawer-form-information',
-                },
-                {
-                  name: $t('formDialogTitlePersonal'),
-                  anchor: 'drawer-form-personal',
-                },
-                {
-                  name: $t('formDialogTitlePersonnelAddress'),
-                  anchor: 'drawer-form-personal-address',
-                },
-                {
-                  name: $t('formDialogTitlePassport'),
-                  anchor: 'drawer-form-passport',
-                },
-                {
-                  name: $t('formDialogTitleVisa'),
-                  anchor: 'drawer-form-visa',
-                },
-              ]"
+              :menu="
+                [
+                  {
+                    name: $t('formDialogTitleInformation'),
+                    anchor: 'drawer-form-information',
+                    tab: 'personalInfo',
+                  },
+                  {
+                    name: $t('formDialogTitlePersonal'),
+                    anchor: 'drawer-form-personal',
+                    tab: 'personalInfo',
+                  },
+                  {
+                    name: $t('formDialogTitlePersonnelAddress'),
+                    anchor: 'drawer-form-personal-address',
+                    tab: 'personalInfo',
+                  },
+                  {
+                    name: $t('formDialogTitlePassport'),
+                    anchor: 'drawer-form-passport',
+                    tab: 'personalInfo',
+                  },
+                  {
+                    name: $t('formDialogTitleVisa'),
+                    anchor: 'drawer-form-visa',
+                    tab: 'personalInfo',
+                  },
+                  ...(currentFromDataEmployee.employeeCheckup?.map((v, i) => ({
+                    name: $t('customer.form.instance', { index: i + 1 }),
+                    anchor: `drawer-employee-checkup-${i}`,
+                    tab: 'healthCheck',
+                  })) || []),
+
+                  ...(currentFromDataEmployee.employeeWork?.map((v, i) => ({
+                    name: $t('customer.form.instance', { index: i + 1 }),
+                    anchor: `drawer-employee-work-history-${i}`,
+                    tab: 'workHistory',
+                  })) || []),
+
+                  {
+                    name: $t('formDialogTitleFamilyHistory'),
+                    anchor: 'drawer-other',
+                    tab: 'other',
+                  },
+                ].filter((v) => v.tab === employeeFormState.currentTab)
+              "
               background="transparent"
               :active="{
                 background: 'hsla(var(--blue-6-hsl) / .2)',
@@ -2644,7 +2667,7 @@ const emptyCreateDialog = ref(false);
             <FormEmployeeHealthCheck
               v-if="employeeFormState.currentTab === 'healthCheck'"
               id="drawer-form-checkup"
-              prefix-id="form-employee"
+              prefix-id="drawer-employee"
               dense
               outlined
               v-model:current-index="employeeFormState.currentIndex"