From c6190bbedc46645da1a126fddf31e221d150b7fe Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Tue, 19 Nov 2024 10:53:30 +0700
Subject: [PATCH] refactor: add prefix id

---
 src/components/ProfileBanner.vue                    | 3 ++-
 src/pages/01_branch-management/MainPage.vue         | 1 +
 src/pages/02_personnel-management/MainPage.vue      | 1 +
 src/pages/03_customer-management/MainPage.vue       | 9 ++++-----
 src/pages/04_product-service/MainPage.vue           | 6 ++++++
 src/pages/05_quotation/MainPage.vue                 | 2 ++
 src/pages/05_quotation/QuotationForm.vue            | 1 +
 src/pages/07_agencies-management/AgenciesDialog.vue | 2 ++
 8 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/components/ProfileBanner.vue b/src/components/ProfileBanner.vue
index f9d4fe26..b6dfc7dd 100644
--- a/src/components/ProfileBanner.vue
+++ b/src/components/ProfileBanner.vue
@@ -13,6 +13,7 @@ defineProps<{
   toggleTitle?: string;
   fallbackImg?: string;
   fallbackCover?: string;
+  prefix: string;
 
   hideFade?: boolean;
   hideActive?: boolean;
@@ -258,7 +259,7 @@ const smallBanner = ref(false);
             >
               <q-tab
                 v-for="tab in tabsList"
-                :id="`tab-${tab.label}`"
+                :id="`${prefix}-tab-${tab.label}`"
                 v-bind:key="tab.name"
                 class="content-tab text-capitalize"
                 :name="tab.name"
diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 36fa9297..2c9de9fb 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -1733,6 +1733,7 @@ watch(currentHq, () => {
             ? `${formData.code}`
             : `${formData.code?.slice(0, -5)}${(formLastSubBranch + 1).toString().padStart(5, '0')}`
         "
+        :prefix="formData.name"
         v-model:toggle-status="formData.status"
         v-model:cover-url="imageUrl"
         :hide-fade="imageUrl === '' || imageUrl === null"
diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 83e05931..a4b26138 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -1470,6 +1470,7 @@ watch(
         }"
       >
         <ProfileBanner
+          :prefix="currentUser.firstName"
           :active="formData.status !== 'INACTIVE'"
           useToggle
           color="white"
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index b6a7a2ce..b640b345 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1936,6 +1936,7 @@ const emptyCreateDialog = ref(false);
         v-if="customerFormData.customerBranch !== undefined"
         active
         hide-fade
+        prefix="dialog"
         :fallback-cover="`/images/customer-${customerFormData.customerType}-banner-bg.jpg`"
         :img="
           customerFormState.customerImageUrl ||
@@ -2330,6 +2331,7 @@ const emptyCreateDialog = ref(false);
       <ProfileBanner
         active
         useToggle
+        prefix="dialog"
         color="white"
         icon="mdi-account-plus-outline"
         :bg-color="
@@ -2440,11 +2442,6 @@ const emptyCreateDialog = ref(false);
                     anchor: 'drawer-info-file-upload',
                     tab: 'personalInfo',
                   },
-                  {
-                    name: $t('customerEmployee.form.group.personalInfo'),
-                    anchor: 'drawer-form-personal',
-                    tab: 'personalInfo',
-                  },
 
                   {
                     name: $t('customerEmployee.form.group.passport'),
@@ -3813,6 +3810,7 @@ const emptyCreateDialog = ref(false);
       >
         <ProfileBanner
           v-if="customerFormData.customerBranch !== undefined"
+          :prefix="customerFormData.registeredBranchId"
           :active="customerFormData.status !== 'INACTIVE'"
           hide-fade
           use-toggle
@@ -4213,6 +4211,7 @@ const emptyCreateDialog = ref(false);
         }"
       >
         <ProfileBanner
+          :prefix="employeeFormState.currentEmployee.firstName"
           hideFade
           @view="
             () => {
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 412f3354..3d793ea4 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -3016,6 +3016,7 @@ watch(
       }"
     >
       <ProfileBanner
+        prefix="dialog"
         readonly
         no-image-action
         active
@@ -3165,6 +3166,7 @@ watch(
         }"
       >
         <ProfileBanner
+          :prefix="formDataGroup.name"
           no-image-action
           :active="currentStatusGroupType !== 'INACTIVE'"
           hide-fade
@@ -3492,6 +3494,7 @@ watch(
       }"
     >
       <ProfileBanner
+        prefix="dialog"
         hide-fade
         use-toggle
         hide-active
@@ -3639,6 +3642,7 @@ watch(
       }"
     >
       <ProfileBanner
+        prefix="dialog"
         hideFade
         :use-toggle="actionDisplay"
         :active="formDataProduct.status !== 'INACTIVE'"
@@ -3842,6 +3846,7 @@ watch(
       }"
     >
       <ProfileBanner
+        prefix="dialog"
         hide-fade
         use-toggle
         hide-active
@@ -4176,6 +4181,7 @@ watch(
       }"
     >
       <ProfileBanner
+        prefix="dialog"
         hide-fade
         :use-toggle="actionDisplay"
         :title="formDataProductService.name"
diff --git a/src/pages/05_quotation/MainPage.vue b/src/pages/05_quotation/MainPage.vue
index 2f3b5650..37aecf2a 100644
--- a/src/pages/05_quotation/MainPage.vue
+++ b/src/pages/05_quotation/MainPage.vue
@@ -753,6 +753,7 @@ async function storeDataLocal(id: string) {
   >
     <header class="q-mx-lg q-mt-lg">
       <ProfileBanner
+        prefix="dialog"
         img="/images/quotation-bg-avatar.png"
         fallback-cover="/images/quotation-banner.png"
         bg-color="var(--surface-1)"
@@ -856,6 +857,7 @@ async function storeDataLocal(id: string) {
       }"
     >
       <ProfileBanner
+        prefix="dialog"
         v-if="customerFormData.customerBranch !== undefined"
         active
         hide-fade
diff --git a/src/pages/05_quotation/QuotationForm.vue b/src/pages/05_quotation/QuotationForm.vue
index d30cf4c7..98883fd3 100644
--- a/src/pages/05_quotation/QuotationForm.vue
+++ b/src/pages/05_quotation/QuotationForm.vue
@@ -2080,6 +2080,7 @@ async function getWorkerFromCriteria(
       }"
     >
       <ProfileBanner
+        prefix="dialog"
         active
         useToggle
         color="white"
diff --git a/src/pages/07_agencies-management/AgenciesDialog.vue b/src/pages/07_agencies-management/AgenciesDialog.vue
index e2d82483..2fab3239 100644
--- a/src/pages/07_agencies-management/AgenciesDialog.vue
+++ b/src/pages/07_agencies-management/AgenciesDialog.vue
@@ -197,6 +197,7 @@ watch(
       }"
     >
       <ProfileBanner
+        prefix="dialog"
         active
         hide-fade
         hide-active
@@ -311,6 +312,7 @@ watch(
         }"
       >
         <ProfileBanner
+          :prefix="data.name"
           active
           hide-fade
           hide-active