refactor: add hideDelete prop to various components and update delete button visibility logic

src/components/01_branch-management/BranchCard.vue

@@ -89,15 +89,7 @@ defineProps<{
         </div>
       </div>
     </div>
-    <div
+    <q-separator />
-      style="
-        display: block;
-        width: 100%;
-        height: 1px;
-        background: hsla(0 0% 0% / 0.1);
-        margin-bottom: var(--size-2);
-      "
-    />
     <slot name="data"></slot>
     <template v-if="!$slots.data">
       <div

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

@@ -23,6 +23,7 @@ const prop = withDefaults(
     addButton?: boolean;
     prefixId?: string;
     hideAction?: boolean;
+    hideDelete?: boolean;
   }>(),
   {
     gridView: false,
@@ -269,6 +270,7 @@ defineEmits<{
             v-if="!inTable && !hideAction"
             :id-name="props.row.firstName"
             :status="props.row.status"
+            :hide-delete="hideDelete"
             @view="$emit('view', props.row)"
             @edit="$emit('edit', props.row)"
             @delete="$emit('delete', props.row)"
@@ -282,6 +284,7 @@ defineEmits<{
       <div class="col-12 col-md-3 col-sm-6">
         <PersonCard
           history
+          :hide-delete="hideDelete"
           :hide-action="hideAction"
           :id="`card-${props.row.firstNameEN}`"
           :field-selected="fieldSelected"

src/components/shared/PersonCard.vue

@@ -24,6 +24,7 @@ defineProps<{
   prefixId?: string;
   separateEnter?: boolean;
   hideAction?: boolean;
+  hideDelete?: boolean;
 }>();
 
 defineEmits<{
@@ -80,6 +81,7 @@ defineEmits<{
           v-if="!hideAction"
           :id-name="prefixId"
           :status="disabled ? 'INACTIVE' : 'ACTIVE'"
+          :hide-delete="hideDelete"
           @view="
             separateEnter
               ? $emit('viewCard', 'INFO')

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

@@ -751,7 +751,7 @@ watch(
           })
         "
       >
-        <template #before v-if="canAccess('customer', 'edit')">
+        <template #before>
           <EditButton
             icon-only
             v-if="customerBranchFormState.dialogType === 'info'"
@@ -759,7 +759,10 @@ watch(
           />
           <DeleteButton
             icon-only
-            v-if="customerBranchFormState.dialogType === 'info'"
+            v-if="
+              customerBranchFormState.dialogType === 'info' &&
+              canAccess('customer', 'edit')
+            "
             @click="
               () => {
                 deleteBranchById(customerBranchFormData.id || '');

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

@@ -1391,7 +1391,7 @@ const emptyCreateDialog = ref(false);
                             />
 
                             <KebabAction
-                              v-if="canAccess('customer', 'edit')"
+                              :hide-delete="!canAccess('customer', 'edit')"
                               :id-name="
                                 props.row.branch[0].customerName ||
                                 props.row.branch[0].firstName
@@ -1649,7 +1649,7 @@ const emptyCreateDialog = ref(false);
                                 @click.stop="editCustomerForm(props.row.id)"
                               />
                               <KebabAction
-                                v-if="canAccess('customer', 'edit')"
+                                :hide-delete="!canAccess('customer', 'edit')"
                                 :status="props.row.status"
                                 :id-name="props.row.name"
                                 @view="
@@ -1783,7 +1783,7 @@ const emptyCreateDialog = ref(false);
                     "
                   >
                     <TableEmpoloyee
-                      :hide-action="!canAccess('customer', 'edit')"
+                      :hide-delete="!canAccess('customer', 'edit')"
                       v-model:page-size="pageSize"
                       v-model:current-page="currentPageEmployee"
                       :grid-view="gridView"
@@ -3880,7 +3880,6 @@ const emptyCreateDialog = ref(false);
     :on-create="customerFormState.dialogModal"
     :default-url="customerFormState.defaultCustomerImageUrl"
     :hidden-footer="!customerFormState.isImageEdit"
-    :change-disabled="!canAccess('customer', 'edit')"
     @add-image="
       async (v) => {
         if (!v) return;
@@ -3990,7 +3989,6 @@ 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;
@@ -4132,7 +4130,6 @@ const emptyCreateDialog = ref(false);
       >
         <ProfileBanner
           v-if="customerFormData.customerBranch !== undefined"
-          :readonly="!canAccess('customer', 'edit')"
           :prefix="customerFormData.registeredBranchId"
           :active="customerFormData.status !== 'INACTIVE'"
           hide-fade
@@ -4246,8 +4243,7 @@ const emptyCreateDialog = ref(false);
                     v-if="
                       customerFormState.branchIndex === -1 &&
                       !!customerFormState.editCustomerId &&
-                      customerFormState.dialogType !== 'create' &&
+                      customerFormState.dialogType !== 'create'
-                      canAccess('customer', 'edit')
                     "
                     :disabled="!customerFormState.readonly"
                   />
@@ -4431,10 +4427,7 @@ const emptyCreateDialog = ref(false);
                     prefix-id="info"
                     v-if="!!customerFormState.editCustomerId"
                     :index="idx"
-                    :hide-action="
+                    :hide-action="customerFormData.status === 'INACTIVE'"
-                      customerFormData.status === 'INACTIVE' ||
-                      !canAccess('customer', 'edit')
-                    "
                     v-model:customer="customerFormData"
                     v-model:customer-branch="
                       customerFormData.customerBranch[idx]
@@ -4445,6 +4438,7 @@ const emptyCreateDialog = ref(false);
                       (customerFormState.branchIndex !== -1 &&
                         customerFormState.branchIndex !== idx)
                     "
+                    :hide-delete="!canAccess('customer', 'edit')"
                     :readonly="customerFormState.branchIndex !== idx"
                     @edit="() => (customerFormState.branchIndex = idx)"
                     @cancel="() => customerFormUndo(false)"
@@ -4569,7 +4563,6 @@ const emptyCreateDialog = ref(false);
       >
         <ProfileBanner
           :prefix="employeeFormState.currentEmployee.firstName"
-          :readonly="!canAccess('customer', 'edit')"
           hideFade
           @update:current-tab="
             () => {
@@ -4807,10 +4800,7 @@ const emptyCreateDialog = ref(false);
                 }"
                 scroll-element="#drawer-employee-form-content"
               >
-                <template
+                <template v-slot:btn-drawer-passport>
-                  v-if="canAccess('customer', 'edit')"
-                  v-slot:btn-drawer-passport
-                >
                   <q-btn
                     id="form-add-passport"
                     dense
@@ -4824,10 +4814,7 @@ const emptyCreateDialog = ref(false);
                   />
                 </template>
 
-                <template
+                <template v-slot:btn-drawer-visa>
-                  v-if="canAccess('customer', 'edit')"
-                  v-slot:btn-drawer-visa
-                >
                   <q-btn
                     id="form-add-visa"
                     dense
@@ -4840,10 +4827,7 @@ const emptyCreateDialog = ref(false);
                   />
                 </template>
 
-                <template
+                <template v-slot:btn-drawer-employee-checkup>
-                  v-if="canAccess('customer', 'edit')"
-                  v-slot:btn-drawer-employee-checkup
-                >
                   <q-btn
                     id="form-add-checkup"
                     dense
@@ -4856,10 +4840,7 @@ const emptyCreateDialog = ref(false);
                   />
                 </template>
 
-                <template
+                <template v-slot:btn-drawer-employee-work-history>
-                  v-if="canAccess('customer', 'edit')"
-                  v-slot:btn-drawer-employee-work-history
-                >
                   <q-btn
                     id="form-add-work-history"
                     dense
@@ -4887,10 +4868,7 @@ 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="
+                v-if="currentFromDataEmployee.status !== 'INACTIVE'"
-                  currentFromDataEmployee.status !== 'INACTIVE' &&
-                  canAccess('customer', 'edit')
-                "
               >
                 <div class="surface-1 row rounded">
                   <UndoButton
@@ -4925,7 +4903,10 @@ const emptyCreateDialog = ref(false);
                     type="button"
                   />
                   <DeleteButton
-                    v-if="!employeeFormState.isEmployeeEdit"
+                    v-if="
+                      !employeeFormState.isEmployeeEdit &&
+                      canAccess('customer', 'edit')
+                    "
                     id="btn-info-basic-delete"
                     icon-only
                     @click="
@@ -5408,7 +5389,7 @@ const emptyCreateDialog = ref(false);
                   />
                   {{ $t('customerEmployee.form.group.passport') }}
                   <AddButton
-                    v-if="$q.screen.lt.md && canAccess('customer', 'edit')"
+                    v-if="$q.screen.lt.md"
                     id="btn-add-work"
                     icon-only
                     class="q-ml-sm"
@@ -5492,7 +5473,6 @@ const emptyCreateDialog = ref(false);
 
                         <template v-slot:button>
                           <div
-                            v-if="canAccess('customer', 'edit')"
                             class="surface-1 row rounded"
                             style="min-height: 35px"
                           >
@@ -5626,7 +5606,7 @@ const emptyCreateDialog = ref(false);
                   />
                   {{ $t('customerEmployee.form.group.visa') }}
                   <AddButton
-                    v-if="$q.screen.lt.md && canAccess('customer', 'edit')"
+                    v-if="$q.screen.lt.md"
                     id="btn-add-work"
                     icon-only
                     class="q-ml-sm"
@@ -5691,7 +5671,6 @@ const emptyCreateDialog = ref(false);
 
                     <template v-slot:button>
                       <div
-                        v-if="canAccess('customer', 'edit')"
                         class="surface-1 row rounded"
                         style="min-height: 35px"
                       >
@@ -5809,7 +5788,7 @@ const emptyCreateDialog = ref(false);
 
                   {{ $t(`customerEmployee.formHealthCheck.title`) }}
                   <AddButton
-                    v-if="$q.screen.lt.md && canAccess('customer', 'edit')"
+                    v-if="$q.screen.lt.md"
                     id="btn-add-work"
                     icon-only
                     class="q-ml-sm"
@@ -5937,7 +5916,7 @@ const emptyCreateDialog = ref(false);
                   />
                   {{ $t(`customerEmployee.form.group.workHistory`) }}
                   <AddButton
-                    v-if="$q.screen.lt.md && canAccess('customer', 'edit')"
+                    v-if="$q.screen.lt.md"
                     id="btn-add-work"
                     icon-only
                     class="q-ml-sm"
@@ -6042,10 +6021,7 @@ const emptyCreateDialog = ref(false);
             </template>
             <template v-if="employeeFormState.currentTab === 'other'">
               <FormEmployeeOther
-                :hide-action="
+                :hide-action="currentFromDataEmployee.status === 'INACTIVE'"
-                  currentFromDataEmployee.status === 'INACTIVE' ||
-                  !canAccess('customer', 'edit')
-                "
                 v-if="employeeFormState.currentTab === 'other'"
                 id="drawer-other"
                 prefix-id="drawer-employee"

src/pages/03_customer-management/components/employer/EmployerFormBasicInfo.vue

@@ -102,7 +102,13 @@ const telephoneNo = defineModel<string>('telephoneNo', { default: '' });
           class="col-md-6"
           :readonly
           :disabled="
-            !isRoleInclude(['admin', 'system', 'head_of_admin']) && !readonly
+            !isRoleInclude([
+              'admin',
+              'system',
+              'head_of_admin',
+              'executive',
+              'accountant',
+            ]) && !readonly
           "
           :label="$t('customer.form.registeredBranch')"
           select-first-value

src/pages/03_customer-management/components/employer/EmployerFormBranch.vue

@@ -51,6 +51,7 @@ withDefaults(
     actionDisabled?: boolean;
     customerType?: 'CORP' | 'PERS';
     hideAction?: boolean;
+    hideDelete?: boolean;
   }>(),
   {
     hideAction: false,
@@ -81,7 +82,7 @@ withDefaults(
       />
       <DeleteButton
         icon-only
-        v-if="readonly"
+        v-if="readonly && !hideDelete"
         @click="$emit('delete')"
         type="button"
         :disabled="actionDisabled"