refactor: header can't edit Employee on page customer

src/components/03_customer-management/FormEmployeeHealthCheck.vue

@@ -58,8 +58,10 @@ withDefaults(
     typeCustomer?: string;
     prefixId: string;
     showBtnSave?: boolean;
+    hideAction?: boolean;
   }>(),
   {
+    hideAction: false,
     showBtnSave: false,
   },
 );
@@ -160,7 +162,7 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
       />
       {{ $t(`customerEmployee.formHealthCheck.title`) }}
       <AddButton
-        v-if="!readonly"
+        v-if="!readonly && !hideAction"
         id="btn-add-bank"
         icon-only
         class="q-ml-sm"
@@ -185,7 +187,7 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
       />
       <span class="col-12 flex justify-between items-center">
         {{ $t('general.times', { number: index + 1 }) }}
-        <div class="row items-center">
+        <div class="row items-center" v-if="!hideAction">
           <UndoButton
             v-if="!readonly && !!checkup.id && !checkup.statusSave"
             id="btn-info-health-undo"

src/components/03_customer-management/FormEmployeeOther.vue

@@ -15,6 +15,7 @@ defineProps<{
   separator?: boolean;
   employee?: boolean;
   prefixId: string;
+  hideAction?: boolean;
 }>();
 
 const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
@@ -31,7 +32,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
         style="background-color: var(--surface-3)"
       />
       {{ $t('customerEmployee.form.group.family') }}
-      <div class="row q-ml-auto">
+      <div class="row q-ml-auto" v-if="!hideAction">
         <UndoButton
           v-if="!readonly && !!employeeOther.id && !employeeOther.statusSave"
           id="btn-info-health-undo"

src/components/03_customer-management/FormEmployeeWorkHistory.vue

@@ -38,6 +38,7 @@ defineProps<{
   outlined?: boolean;
   readonly?: boolean;
   prefixId: string;
+  hideAction?: boolean;
 }>();
 
 defineEmits<{
@@ -116,7 +117,7 @@ const workplaceFilter = selectFilterOptionRefMod(
       />
       {{ $t(`customerEmployee.formWorkHistory.title`) }}
       <AddButton
-        v-if="!readonly"
+        v-if="!readonly && !hideAction"
         id="btn-add-bank"
         icon-only
         class="q-ml-sm"
@@ -142,7 +143,7 @@ const workplaceFilter = selectFilterOptionRefMod(
       <span class="col-12 flex justify-between items-center">
         {{ $t('general.times', { number: index + 1 }) }}
 
-        <div class="row items-center">
+        <div class="row items-center" v-if="!hideAction">
           <UndoButton
             v-if="!readonly && !!work.id && !work.statusSave"
             id="btn-info-health-undo"

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

@@ -3078,7 +3078,7 @@ const emptyCreateDialog = ref(false);
             }
           "
           :active="currentFromDataEmployee.status !== 'INACTIVE'"
-          use-toggle
+          :use-toggle="currentTab === 'employee'"
           color="white"
           icon="mdi-account-outline"
           :bg-color="
@@ -3198,6 +3198,7 @@ const emptyCreateDialog = ref(false);
               <div
                 class="surface-1 rounded q-pt-sm row"
                 style="position: absolute; z-index: 999; right: 4%"
+                v-if="currentTab === 'employee'"
               >
                 <UndoButton
                   v-if="employeeFormState.isEmployeeEdit"
@@ -3504,6 +3505,8 @@ const emptyCreateDialog = ref(false);
                 prefix-id="drawer-employee"
                 dense
                 outlined
+                :hide-action="currentTab !== 'employee'"
+                :readonly="!employeeFormState.isEmployeeEdit"
                 v-model:current-index="employeeFormState.currentIndex"
                 v-model:employee-checkup="
                   currentFromDataEmployee.employeeCheckup
@@ -3564,7 +3567,9 @@ const emptyCreateDialog = ref(false);
                 id="drawer-work-history"
                 prefix-id="drawer-employee"
                 dense
+                :hide-action="currentTab !== 'employee'"
                 outlined
+                :readonly="!employeeFormState.isEmployeeEdit"
                 v-model:current-index="employeeFormState.currentIndex"
                 v-model:employee-work="currentFromDataEmployee.employeeWork"
                 v-model:position-name-option="optionStore.globalOption.position"
@@ -3608,10 +3613,12 @@ const emptyCreateDialog = ref(false);
             </template>
             <template v-if="employeeFormState.currentTab === 'other'">
               <FormEmployeeOther
+                :hide-action="currentTab !== 'employee'"
                 v-if="employeeFormState.currentTab === 'other'"
                 id="drawer-other"
                 prefix-id="drawer-employee"
                 dense
+                :readonly="!employeeFormState.isEmployeeEdit"
                 outlined
                 v-model:employee-other="
                   currentFromDataEmployee.employeeOtherInfo