feat: employee address (same with employer)

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

@@ -67,6 +67,7 @@ const {
   deleteBranchById,
   editBranchById,
   fetchListBranch,
+  fetchListBranchById,
 } = userCustomer;
 const employeeStore = useEmployeeStore();
 const formData = ref<CustomerCreate>({
@@ -113,14 +114,24 @@ const fieldSelectedCustomer = ref<{ label: string; value: string }>({
   value: 'all',
 });
 
-const currentEmployee = ref<Employee>();
+const currentEmployee = ref<Employee | undefined>();
+const currentEmployeeCode = ref('');
 const isEmployeeEdit = ref(false);
-const formDataEmployeeSameAddr = ref(false);
+const formDataEmployeeSameAddr = ref(true);
 const formDataEmployeeTab = ref('personalInfo');
 const infoDrawerEmployee = ref(false);
 const infoDrawerEmployeeEdit = ref(false);
 const infoEmployeePersonCard = ref();
 const statsEmployee = ref(0);
+const formDataEmployeeOwner = ref<{
+  id: string;
+  address: string;
+  addressEN: string;
+  provinceId: string;
+  districtId: string;
+  subDistrictId: string;
+  zipCode: string;
+}>();
 const formDataEmployee = ref<EmployeeCreate>({
   image: null,
   customerBranchId: '',
@@ -378,18 +389,12 @@ async function openDialogInputForm(
         : [];
 
       const code = currentEmployee.value?.code.split('-')[0];
-
       const result = await fetchListBranch({
         includeCustomer: true,
         query: code,
         pageSize: 30,
       });
-      if (result) {
-        employeeStore.ownerOption = result.result.map((i) => ({
-          label: i.code,
-          value: i.id,
-        }));
-      }
+      if (result) employeeStore.ownerOption = result.result;
     }
   } else {
     if (selectorLabel.value === 'EMPLOYER') dialogInputForm.value = true;
@@ -403,12 +408,7 @@ async function openDialogInputForm(
         query: code,
         pageSize: 30,
       });
-      if (result) {
-        employeeStore.ownerOption = result.result.map((i) => ({
-          label: i.code,
-          value: i.id,
-        }));
-      }
+      if (result) employeeStore.ownerOption = result.result;
       dialogEmployee.value = true;
     }
   }
@@ -476,6 +476,12 @@ function clearFormEmployee() {
   isEmployeeEdit.value = false;
   infoDrawerEmployee.value = false;
   infoDrawerEmployeeEdit.value = false;
+  formDataEmployeeSameAddr.value = true;
+  currentEmployeeCode.value = '';
+
+  currentEmployee.value = undefined;
+  formDataEmployeeOwner.value = undefined;
+
   formDataEmployee.value = {
     image: null,
     customerBranchId: '',
@@ -790,12 +796,7 @@ async function employeeFilterOwnerBranch(
       query: val,
       pageSize: 30,
     });
-    if (result) {
-      employeeStore.ownerOption = result.result.map((i) => ({
-        label: i.code,
-        value: i.id,
-      }));
-    }
+    if (result) employeeStore.ownerOption = result.result;
   });
 }
 
@@ -894,13 +895,28 @@ async function assignFormDataEmployee(id: string) {
     };
 
     formDataEmployeeTab.value = 'personalInfo';
+    currentEmployeeCode.value = foundEmployee.code;
     currentEmployee.value = foundEmployee;
     profileUrl.value = foundEmployee.profileImageUrl;
+
     foundEmployee.profileImageUrl
       ? (profileSubmit.value = true)
       : (profileSubmit.value = false);
     isEmployeeEdit.value = true;
 
+    const foundBranch = await fetchListBranchById(
+      foundEmployee.customerBranchId,
+    );
+    formDataEmployeeOwner.value = {
+      id: foundBranch.id,
+      address: foundBranch.address,
+      addressEN: foundBranch.addressEN,
+      provinceId: foundBranch.provinceId,
+      districtId: foundBranch.districtId,
+      subDistrictId: foundBranch.subDistrictId,
+      zipCode: foundBranch.zipCode,
+    };
+
     formDataEmployee.value = {
       image: foundEmployee.profileImageUrl,
       customerBranchId: foundEmployee.customerBranchId,
@@ -939,6 +955,12 @@ async function assignFormDataEmployee(id: string) {
       employeeCheckup: employeeCheckup,
       employeeOtherInfo: employeeOther,
     };
+
+    if (foundBranch.address === foundEmployee.address) {
+      formDataEmployeeSameAddr.value = true;
+    } else {
+      formDataEmployeeSameAddr.value = false;
+    }
   }
 }
 
@@ -1048,8 +1070,6 @@ watch(currentPageEmployee, async () => {
 watch(fieldSelectedCustomer, async () => {
   let resultList;
 
-  console.log(fieldSelectedCustomer.value.value);
-
   if (fieldSelectedCustomer.value.value === 'all') {
     resultList = await fetchList({ includeBranch: true });
   }
@@ -1066,6 +1086,41 @@ watch(fieldSelectedCustomer, async () => {
     listCustomer.value = resultList.result;
   }
 });
+
+watch(
+  () => formDataEmployeeOwner.value,
+  (e) => {
+    if (!e) return;
+    if (formDataEmployeeSameAddr.value) {
+      formDataEmployee.value.address = e.address;
+      formDataEmployee.value.addressEN = e.addressEN;
+      formDataEmployee.value.provinceId = e.provinceId;
+      formDataEmployee.value.districtId = e.districtId;
+      formDataEmployee.value.subDistrictId = e.subDistrictId;
+      formDataEmployee.value.zipCode = e.zipCode;
+    }
+    formDataEmployee.value.customerBranchId = e.id;
+  },
+);
+
+watch(
+  () => formDataEmployeeSameAddr.value,
+  (isSame) => {
+    if (!formDataEmployeeOwner.value) return;
+    if (isSame) {
+      formDataEmployee.value.address = formDataEmployeeOwner.value.address;
+      formDataEmployee.value.addressEN = formDataEmployeeOwner.value.addressEN;
+      formDataEmployee.value.provinceId =
+        formDataEmployeeOwner.value.provinceId;
+      formDataEmployee.value.districtId =
+        formDataEmployeeOwner.value.districtId;
+      formDataEmployee.value.subDistrictId =
+        formDataEmployeeOwner.value.subDistrictId;
+      formDataEmployee.value.zipCode = formDataEmployeeOwner.value.zipCode;
+    }
+    formDataEmployee.value.customerBranchId = formDataEmployeeOwner.value.id;
+  },
+);
 </script>
 
 <template>
@@ -1637,11 +1692,12 @@ watch(fieldSelectedCustomer, async () => {
     </template>
   </FormDialog>
 
+  <!-- Employee Form -->
   <FormDialog
     employee
     disabledRule
-    v-model:modal="dialogEmployee"
     addressSeparator
+    v-model:modal="dialogEmployee"
     :noAddress="formDataEmployeeTab !== 'personalInfo'"
     :noPaddingTab="
       formDataEmployeeTab === 'healthCheck' ||
@@ -1687,7 +1743,8 @@ watch(fieldSelectedCustomer, async () => {
         outlined
         separator
         :employee-owner-option="employeeStore.ownerOption"
-        v-model:customer-branch-id="formDataEmployee.customerBranchId"
+        v-model:customer-branch="formDataEmployeeOwner"
+        v-model:employee-id="currentEmployeeCode"
         v-model:nrc-no="formDataEmployee.nrcNo"
         @filter-owner-branch="employeeFilterOwnerBranch"
       />
@@ -2039,7 +2096,6 @@ watch(fieldSelectedCustomer, async () => {
   </FormDialog>
 
   <!-- DRAWER INFO ของ นายจ้าง -->
-
   <DrawerInfo
     :title="$t('formTitleCustomer', { msg: currentCustomer?.customerName })"
     v-model:drawer-open="infoDrawer"
@@ -2440,6 +2496,7 @@ watch(fieldSelectedCustomer, async () => {
         currentEmployee && onSubmitEdit(currentEmployee.id);
       }
     "
+    bg-color="surface-tab"
   >
     <InfoForm
       v-if="employeeStore.globalOption"
@@ -2449,6 +2506,7 @@ watch(fieldSelectedCustomer, async () => {
         formDataEmployeeTab === 'healthCheck' ||
         formDataEmployeeTab === 'workHistory'
       "
+      v-model:same-with-employer="formDataEmployeeSameAddr"
       v-model:tabs-list="employeeTab"
       v-model:employee-tab="formDataEmployeeTab"
       v-model:address="formDataEmployee.address"
@@ -2458,6 +2516,7 @@ watch(fieldSelectedCustomer, async () => {
       v-model:subDistrictId="formDataEmployee.subDistrictId"
       v-model:zipCode="formDataEmployee.zipCode"
       disabledRule
+      employee
     >
       <template #person-card>
         <div class="q-ma-md">
@@ -2475,15 +2534,15 @@ watch(fieldSelectedCustomer, async () => {
       </template>
       <template #information>
         <BasicInformation
-          v-if="formDataEmployeeTab === 'personalInfo' && currentEmployee"
+          v-if="formDataEmployeeTab === 'personalInfo'"
           employee
           dense
           outlined
           separator
           :readonly="!infoDrawerEmployeeEdit"
           :employee-owner-option="employeeStore.ownerOption"
-          v-model:customer-branch-id="formDataEmployee.customerBranchId"
-          v-model:employee-id="currentEmployee.code"
+          v-model:customer-branch="formDataEmployeeOwner"
+          v-model:employee-id="currentEmployeeCode"
           v-model:nrc-no="formDataEmployee.nrcNo"
           @filter-owner-branch="employeeFilterOwnerBranch"
         />