From 2d7b0189ee870b133372227f9a704530833297d4 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 3 Jul 2025 13:54:10 +0700
Subject: [PATCH] refactor: employee role check

---
 .../03_customer-management/TableEmpoloyee.vue |  6 +-
 src/components/shared/PersonCard.vue          |  2 +
 src/pages/03_customer-management/MainPage.vue | 73 +++++++++++++++----
 3 files changed, 63 insertions(+), 18 deletions(-)

diff --git a/src/components/03_customer-management/TableEmpoloyee.vue b/src/components/03_customer-management/TableEmpoloyee.vue
index e5e49b51..139d2d54 100644
--- a/src/components/03_customer-management/TableEmpoloyee.vue
+++ b/src/components/03_customer-management/TableEmpoloyee.vue
@@ -22,6 +22,7 @@ const prop = withDefaults(
     inTable?: boolean;
     addButton?: boolean;
     prefixId?: string;
+    hideAction?: boolean;
   }>(),
   {
     gridView: false,
@@ -265,7 +266,7 @@ defineEmits<{
             @click.stop="$emit('view', props.row)"
           />
           <KebabAction
-            v-if="!inTable"
+            v-if="!inTable && !hideAction"
             :id-name="props.row.firstName"
             :status="props.row.status"
             @view="$emit('view', props.row)"
@@ -280,9 +281,10 @@ defineEmits<{
     <template v-slot:item="props">
       <div class="col-12 col-md-3 col-sm-6">
         <PersonCard
+          history
+          :hide-action="hideAction"
           :id="`card-${props.row.firstNameEN}`"
           :field-selected="fieldSelected"
-          history
           :prefix-id="props.row.firstNameEN ?? props.rowIndex"
           :data="{
             code: props.row.code,
diff --git a/src/components/shared/PersonCard.vue b/src/components/shared/PersonCard.vue
index 3abc14b0..6ad34e5f 100644
--- a/src/components/shared/PersonCard.vue
+++ b/src/components/shared/PersonCard.vue
@@ -23,6 +23,7 @@ defineProps<{
   history?: boolean;
   prefixId?: string;
   separateEnter?: boolean;
+  hideAction?: boolean;
 }>();
 
 defineEmits<{
@@ -76,6 +77,7 @@ defineEmits<{
         />
 
         <KebabAction
+          v-if="!hideAction"
           :id-name="prefixId"
           :status="disabled ? 'INACTIVE' : 'ACTIVE'"
           @view="
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 4e507e6d..288b762e 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1639,6 +1639,15 @@ const emptyCreateDialog = ref(false);
                               </div>
                             </template>
                             <template v-slot:action>
+                              <q-btn
+                                icon="mdi-eye-outline"
+                                :id="`btn-eye-${props.row.branch[0].customerName || props.row.branch[0].firstName}`"
+                                size="sm"
+                                dense
+                                round
+                                flat
+                                @click.stop="editCustomerForm(props.row.id)"
+                              />
                               <KebabAction
                                 v-if="canAccess('customer', 'edit')"
                                 :status="props.row.status"
@@ -1774,6 +1783,7 @@ const emptyCreateDialog = ref(false);
                     "
                   >
                     <TableEmpoloyee
+                      :hide-action="!canAccess('customer', 'edit')"
                       v-model:page-size="pageSize"
                       v-model:current-page="currentPageEmployee"
                       :grid-view="gridView"
@@ -3980,6 +3990,7 @@ const emptyCreateDialog = ref(false);
     v-model:on-create-data-list="onCreateImageList"
     :on-create="employeeFormState.dialogModal"
     :hidden-footer="!employeeFormState.isImageEdit"
+    :change-disabled="!canAccess('customer', 'edit')"
     @add-image="
       async (v) => {
         if (!v) return;
@@ -4474,11 +4485,18 @@ const emptyCreateDialog = ref(false);
       }
     "
     :title="
-      employeeFormState.currentEmployee
-        ? $i18n.locale === 'eng'
-          ? `${employeeFormState.currentEmployee.firstNameEN} ${employeeFormState.currentEmployee.lastNameEN}`
-          : `${employeeFormState.currentEmployee.firstName} ${employeeFormState.currentEmployee.lastName}`
-        : '-'
+      setPrefixName(
+        {
+          namePrefix: employeeFormState.currentEmployee.namePrefix,
+          firstName:
+            employeeFormState.currentEmployee.firstName ||
+            employeeFormState.currentEmployee.firstNameEN,
+          lastName: employeeFormState.currentEmployee.lastName,
+          firstNameEN: employeeFormState.currentEmployee.firstNameEN,
+          lastNameEN: employeeFormState.currentEmployee.lastNameEN,
+        },
+        { locale },
+      )
     "
     :badge-class="
       currentFromDataEmployee.gender === 'male'
@@ -4551,6 +4569,7 @@ const emptyCreateDialog = ref(false);
       >
         <ProfileBanner
           :prefix="employeeFormState.currentEmployee.firstName"
+          :readonly="!canAccess('customer', 'edit')"
           hideFade
           @update:current-tab="
             () => {
@@ -4593,7 +4612,9 @@ const emptyCreateDialog = ref(false);
               ? setPrefixName(
                   {
                     namePrefix: employeeFormState.currentEmployee.namePrefix,
-                    firstName: employeeFormState.currentEmployee.firstName,
+                    firstName:
+                      employeeFormState.currentEmployee.firstName ||
+                      employeeFormState.currentEmployee.firstNameEN,
                     lastName: employeeFormState.currentEmployee.lastName,
                     firstNameEN: employeeFormState.currentEmployee.firstNameEN,
                     lastNameEN: employeeFormState.currentEmployee.lastNameEN,
@@ -4786,7 +4807,10 @@ const emptyCreateDialog = ref(false);
                 }"
                 scroll-element="#drawer-employee-form-content"
               >
-                <template v-slot:btn-drawer-passport>
+                <template
+                  v-if="canAccess('customer', 'edit')"
+                  v-slot:btn-drawer-passport
+                >
                   <q-btn
                     id="form-add-passport"
                     dense
@@ -4800,7 +4824,10 @@ const emptyCreateDialog = ref(false);
                   />
                 </template>
 
-                <template v-slot:btn-drawer-visa>
+                <template
+                  v-if="canAccess('customer', 'edit')"
+                  v-slot:btn-drawer-visa
+                >
                   <q-btn
                     id="form-add-visa"
                     dense
@@ -4813,7 +4840,10 @@ const emptyCreateDialog = ref(false);
                   />
                 </template>
 
-                <template v-slot:btn-drawer-employee-checkup>
+                <template
+                  v-if="canAccess('customer', 'edit')"
+                  v-slot:btn-drawer-employee-checkup
+                >
                   <q-btn
                     id="form-add-checkup"
                     dense
@@ -4826,7 +4856,10 @@ const emptyCreateDialog = ref(false);
                   />
                 </template>
 
-                <template v-slot:btn-drawer-employee-work-history>
+                <template
+                  v-if="canAccess('customer', 'edit')"
+                  v-slot:btn-drawer-employee-work-history
+                >
                   <q-btn
                     id="form-add-work-history"
                     dense
@@ -4854,7 +4887,10 @@ const emptyCreateDialog = ref(false);
               <div
                 class="rounded row q-py-sm q-mx-lg q-px-md"
                 style="position: absolute; z-index: 999; right: 0; top: 0"
-                v-if="currentFromDataEmployee.status !== 'INACTIVE'"
+                v-if="
+                  currentFromDataEmployee.status !== 'INACTIVE' &&
+                  canAccess('customer', 'edit')
+                "
               >
                 <div class="surface-1 row rounded">
                   <UndoButton
@@ -5372,7 +5408,7 @@ const emptyCreateDialog = ref(false);
                   />
                   {{ $t('customerEmployee.form.group.passport') }}
                   <AddButton
-                    v-if="$q.screen.lt.md"
+                    v-if="$q.screen.lt.md && canAccess('customer', 'edit')"
                     id="btn-add-work"
                     icon-only
                     class="q-ml-sm"
@@ -5456,6 +5492,7 @@ const emptyCreateDialog = ref(false);
 
                         <template v-slot:button>
                           <div
+                            v-if="canAccess('customer', 'edit')"
                             class="surface-1 row rounded"
                             style="min-height: 35px"
                           >
@@ -5589,7 +5626,7 @@ const emptyCreateDialog = ref(false);
                   />
                   {{ $t('customerEmployee.form.group.visa') }}
                   <AddButton
-                    v-if="$q.screen.lt.md"
+                    v-if="$q.screen.lt.md && canAccess('customer', 'edit')"
                     id="btn-add-work"
                     icon-only
                     class="q-ml-sm"
@@ -5654,6 +5691,7 @@ const emptyCreateDialog = ref(false);
 
                     <template v-slot:button>
                       <div
+                        v-if="canAccess('customer', 'edit')"
                         class="surface-1 row rounded"
                         style="min-height: 35px"
                       >
@@ -5771,7 +5809,7 @@ const emptyCreateDialog = ref(false);
 
                   {{ $t(`customerEmployee.formHealthCheck.title`) }}
                   <AddButton
-                    v-if="$q.screen.lt.md"
+                    v-if="$q.screen.lt.md && canAccess('customer', 'edit')"
                     id="btn-add-work"
                     icon-only
                     class="q-ml-sm"
@@ -5899,7 +5937,7 @@ const emptyCreateDialog = ref(false);
                   />
                   {{ $t(`customerEmployee.form.group.workHistory`) }}
                   <AddButton
-                    v-if="$q.screen.lt.md"
+                    v-if="$q.screen.lt.md && canAccess('customer', 'edit')"
                     id="btn-add-work"
                     icon-only
                     class="q-ml-sm"
@@ -6004,7 +6042,10 @@ const emptyCreateDialog = ref(false);
             </template>
             <template v-if="employeeFormState.currentTab === 'other'">
               <FormEmployeeOther
-                :hide-action="currentFromDataEmployee.status === 'INACTIVE'"
+                :hide-action="
+                  currentFromDataEmployee.status === 'INACTIVE' ||
+                  !canAccess('customer', 'edit')
+                "
                 v-if="employeeFormState.currentTab === 'other'"
                 id="drawer-other"
                 prefix-id="drawer-employee"