refactor: add Function edit Personal

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

@@ -9,7 +9,7 @@ import { calculateAge, dateFormat } from 'src/utils/datetime';
 import useCustomerStore from 'stores/customer';
 import useEmployeeStore from 'stores/employee';
 import useMyBranchStore from 'stores/my-branch';
-import useUtilsStore, { dialog, notify } from 'stores/utils';
+import useUtilsStore, { dialog } from 'stores/utils';
 import useFlowStore from 'stores/flow';
 import { Status } from 'stores/types';
 import { CustomerStats, Customer, CustomerBranch } from 'stores/customer/types';
@@ -408,6 +408,12 @@ async function editCustomerForm(id: string) {
   customerFormState.value.editCustomerId = id;
 }
 
+async function editEmployeeFormPersonal(id: string) {
+  await employeeFormStore.assignFormDataEmployee(id);
+  employeeFormState.value.dialogType = 'edit';
+  employeeFormState.value.drawerModal = true;
+}
+
 function employeeConfirmUnsave(close = true) {
   dialog({
     color: 'warning',
@@ -615,8 +621,8 @@ watch(
                     ? customerStats.map((v) => ({
                         count:
                           v.name === 'CORP'
-                            ? (statsCustomerType?.CORP ?? 0)
+                            ? statsCustomerType?.CORP ?? 0
-                            : (statsCustomerType?.PERS ?? 0),
+                            : statsCustomerType?.PERS ?? 0,
                         label:
                           v.name === 'CORP'
                             ? 'customerLegalEntity'
@@ -1507,12 +1513,10 @@ watch(
                                   class="row q-py-sm"
                                   style="white-space: nowrap"
                                   @click="
-                                    () => {
+                                    async () => {
-                                      // openDialogInputForm(
+                                      await editEmployeeFormPersonal(
-                                      //   'INFO',
+                                        props.row.id,
-                                      //   props.row.id,
+                                      );
-                                      //   true,
-                                      // );
                                     }
                                   "
                                 >
@@ -1614,7 +1618,7 @@ watch(
                               {
                                 icon: 'mdi-clock-outline',
                                 value: props.row.dateOfBirth
-                                  ? (calculateAge(props.row.dateOfBirth) ?? '')
+                                  ? calculateAge(props.row.dateOfBirth) ?? ''
                                   : '',
                               },
                             ],
@@ -1920,10 +1924,19 @@ watch(
     :title="$t('form.title.create', { name: 'Employee' })"
     v-model:modal="employeeFormState.dialogModal"
     :undo="() => employeeFormUndo(false)"
+    :submit="
+      async () => {
+        await employeeFormStore.submitPersonal();
+        await fetchListEmployee();
+      }
+    "
+    :close="
+      () => {
+        employeeFormStore.resetFormDataEmployee(true);
+      }
+    "
     :before-close="
       () => {
-        console.log('asd');
-
         if (employeeFormStore.isFormDataDifferent()) {
           employeeConfirmUnsave();
           return true;
@@ -1933,6 +1946,7 @@ watch(
     "
   >
     <div class="q-mx-lg q-mt-lg">
+      {{ employeeFormState.statusSavePersonal }}
       <ProfileBanner
         active
         useToggle
@@ -1944,12 +1958,20 @@ watch(
         v-model:toggle-status="currentFromDataEmployee.status"
         fallbackCover="/images/employee-banner.png"
         :img="employeeFormState.profileUrl || `/images/employee-avatar.png`"
-        :tabs-list="[
+        :tabs-list="
-          { name: 'personalInfo', label: 'personalInfo' },
+          [
-          { name: 'healthCheck', label: 'healthCheck' },
+            { name: 'personalInfo', label: 'personalInfo' },
-          { name: 'workHistory', label: 'workHistory' },
+            { name: 'healthCheck', label: 'healthCheck' },
-          { name: 'other', label: 'other' },
+            { name: 'workHistory', label: 'workHistory' },
-        ]"
+            { name: 'other', label: 'other' },
+          ].filter((v) => {
+            if (!employeeFormState.statusSavePersonal) {
+              return v.name === 'personalInfo';
+            }
+
+            return true;
+          })
+        "
         :menu="formMenuIconEmployee"
         :toggleTitle="$t('formDialogTitleUserStatus')"
         :hideFade="
@@ -2051,7 +2073,6 @@ watch(
           v-model:nrc-no="currentFromDataEmployee.nrcNo"
           v-model:code="currentFromDataEmployee.code"
           @filter-owner-branch="employeeFormStore.employeeFilterOwnerBranch"
-          @save="() => employeeFormStore.submitPersonal()"
         />
         <FormPerson
           id="form-personal"
@@ -2243,6 +2264,12 @@ watch(
           ? 'app-bg-female text-white'
           : ''
     "
+    :submit="
+      async () => {
+        await employeeFormStore.submitPersonal();
+        employeeFormState.isEmployeeEdit = false;
+      }
+    "
   >
     <div class="full-height full-width column">
       <div class="q-mx-lg q-mt-lg">

src/pages/03_customer-management/form.ts

@@ -371,9 +371,10 @@ export const useEmployeeForm = defineStore('form-employee', () => {
     profileSubmit: boolean;
     formDataEmployeeSameAddr: boolean;
     editReadonly: boolean;
+    statusSavePersonal: boolean;
     infoEmployeePersonCard: {
       id: string;
-      img: string;
+      img?: string;
       name: string;
       male: boolean;
       female: boolean;
@@ -392,6 +393,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
         }
       | undefined;
   }>({
+    statusSavePersonal: false,
     drawerModal: false,
     imageDialog: false,
     currentTab: 'personalInfo',
@@ -491,7 +493,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
     },
   };
 
-  const resetEmployeeData = structuredClone(defaultFormData);
+  let resetEmployeeData = structuredClone(defaultFormData);
   const currentFromDataEmployee = ref<EmployeeCreate>(
     structuredClone(defaultFormData),
   );
@@ -503,10 +505,20 @@ export const useEmployeeForm = defineStore('form-employee', () => {
     );
   }
 
-  function resetFormDataEmployee(cb?: (...args: any[]) => unknown) {
+  // function resetFormDataEmployee(cb?: (...args: any[]) => unknown) {
-    state.value.dialogType = 'create';
+  //   state.value.dialogType = 'create';
+  //   currentFromDataEmployee.value = structuredClone(resetEmployeeData);
+  //   cb?.();
+  // }
+
+  function resetFormDataEmployee(clean = false) {
+    if (clean) {
+      state.value.formDataEmployeeOwner = undefined;
+      resetEmployeeData = structuredClone(defaultFormData);
+      state.value.statusSavePersonal = false;
+      return;
+    }
     currentFromDataEmployee.value = structuredClone(resetEmployeeData);
-    cb?.();
   }
 
   async function submitPersonal() {
@@ -519,28 +531,61 @@ export const useEmployeeForm = defineStore('form-employee', () => {
         employeeCheckup: [],
         employeeOtherInfo: undefined,
       });
+      if (res) {
+        await assignFormDataEmployee(res.id);
+        state.value.statusSavePersonal = true;
+      }
     }
     if (state.value.dialogType === 'edit') {
+      const res = await employeeStore.editById(
+        state.value.currentEmployee?.id || '',
+        {
+          ...currentFromDataEmployee.value,
+          status:
+            state.value.currentEmployee?.status === 'CREATED'
+              ? 'ACTIVE'
+              : state.value.currentEmployee?.status,
+          customerBranchId: state.value.formDataEmployeeOwner?.id || '',
+          employeeWork: [],
+          employeeCheckup: [],
+          employeeOtherInfo: undefined,
+        },
+      );
+      if (res) {
+        await assignFormDataEmployee(res.id);
+        state.value.statusSavePersonal = true;
+      }
     }
   }
 
-  async function assignFormDataEmployee(id: string) {
+  async function assignFormDataEmployee(id?: string) {
+    if (!id) {
+      resetEmployeeData = structuredClone(defaultFormData);
+      return;
+    }
+
     const res = await employeeStore.fetchById(id);
 
     if (res) {
       state.value.currentEmployee = res;
 
       const {
+        createdAt,
+        createdByUserId,
+        statusOrder,
+        id,
         province,
         district,
         subDistrict,
+        updatedAt,
+        updatedByUserId,
         createdBy,
         updatedBy,
         profileImageUrl,
         ...playlond
       } = res;
 
-      currentFromDataEmployee.value = {
+      resetEmployeeData = {
         ...playlond,
         provinceId: province?.id,
         districtId: district?.id,
@@ -551,13 +596,15 @@ export const useEmployeeForm = defineStore('form-employee', () => {
         image: null,
       };
 
+      currentFromDataEmployee.value = structuredClone(resetEmployeeData);
+
       const foundBranch = await customerStore.fetchListCustomeBranchById(
         playlond.customerBranchId,
       );
 
       state.value.currentEmployeeCode = playlond.code;
 
-      state.value.profileUrl = profileImageUrl || '';
+      state.value.profileUrl = profileImageUrl || ' ';
 
       profileImageUrl
         ? (state.value.profileSubmit = true)
@@ -573,10 +620,9 @@ export const useEmployeeForm = defineStore('form-employee', () => {
         state.value.formDataEmployeeSameAddr = false;
       }
 
-      if (state.value.infoEmployeePersonCard) {
+      if (state.value.infoEmployeePersonCard && profileImageUrl !== null) {
-        state.value.infoEmployeePersonCard[0].img = profileImageUrl || '';
+        state.value.infoEmployeePersonCard[0].img = profileImageUrl;
       }
-
       flowStore.rotate();
     }
   }