refactor: handle edit

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

@@ -13,6 +13,7 @@ import {
 } from 'components/button';
 const { locale } = useI18n();
 
+const currentIndex = defineModel<number>('currentIndex');
 const employeeWork = defineModel<EmployeeWorkCreate[]>('employeeWork');
 const positionNameOption = defineModel<{ label: string; value: string }[]>(
   'positionNameOption',
@@ -119,6 +120,7 @@ const workplaceFilter = selectFilterOptionRefMod(
         class="q-ml-sm"
         type="button"
         @click="addData"
+        :disabled="!(currentIndex === -1)"
       />
     </div>
 
@@ -142,6 +144,7 @@ const workplaceFilter = selectFilterOptionRefMod(
             id="btn-info-health-undo"
             icon-only
             @click="$emit('undo', index)"
+            :disabled="!(currentIndex === -1) && !(currentIndex === index)"
             type="button"
           />
 
@@ -149,6 +152,7 @@ const workplaceFilter = selectFilterOptionRefMod(
             icon-only
             v-if="!readonly && !work.statusSave"
             @click="$emit('save', index)"
+            :disabled="!(currentIndex === -1) && !(currentIndex === index)"
           />
 
           <EditButton
@@ -156,12 +160,14 @@ const workplaceFilter = selectFilterOptionRefMod(
             v-if="!readonly && work.statusSave"
             @click="$emit('edit', index)"
             type="button"
+            :disabled="!(currentIndex === -1) && !(currentIndex === index)"
           />
           <DeleteButton
             icon-only
             v-if="!readonly && !!work.id && work.statusSave"
             @click="$emit('delete', index)"
             type="button"
+            :disabled="!(currentIndex === -1) && !(currentIndex === index)"
           />
         </div>
       </span>

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

@@ -2469,7 +2469,11 @@ watch(
       !currentFromDataEmployee.image || !employeeFormState.profileUrl
     "
     clear-button
-    @save="() => {}"
+    @save="
+      async () => {
+        await employeeFormStore.submitPersonal();
+      }
+    "
   >
     <template #error>
       <div class="full-height full-width" style="background: white">
@@ -2548,6 +2552,18 @@ watch(
     <div class="full-height full-width column">
       <div class="q-mx-lg q-mt-lg">
         <ProfileBanner
+          @view="employeeFormState.imageDialog = true"
+          @edit="
+            dialogEmployeeImageUpload && dialogEmployeeImageUpload.browse()
+          "
+          @update:toggle-status="
+            () => {
+              currentFromDataEmployee.status =
+                currentFromDataEmployee.status === 'CREATED'
+                  ? 'INACTIVE'
+                  : 'CREATED';
+            }
+          "
           active
           useToggle
           color="white"
@@ -2556,7 +2572,7 @@ watch(
           v-model:current-tab="employeeFormState.currentTab"
           v-model:cover-url="employeeFormState.profileUrl"
           fallbackCover="images/employee-banner.png"
-          :img="`/images/employee-avatar.png`"
+          :img="employeeFormState.profileUrl"
           :tabs-list="[
             { name: 'personalInfo', label: 'personalInfo' },
             { name: 'healthCheck', label: 'healthCheck' },