feat: option from json

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

@@ -59,6 +59,7 @@ const {
   createBranch,
   deleteBranchById,
   editBranchById,
+  fetchListBranch,
 } = userCustomer;
 const employeeStore = useEmployeeStore();
 const formData = ref<CustomerCreate>({
@@ -107,6 +108,7 @@ const fieldSelectedCustomer = ref<{ label: string; value: string }>({
 
 const formDataEmployeeSameAddr = ref(false);
 const formDataEmployeeTab = ref('personalInfo');
+const employeeOwnerBranchOption = ref();
 const formDataEmployee = ref<EmployeeCreate>({
   image: null,
   customerBranchId: '',
@@ -173,17 +175,18 @@ const formDataEmployee = ref<EmployeeCreate>({
     },
   ],
   employeeOtherInfo: {
-    birthPlace: '',
     citizenId: '',
     fatherFirstName: '',
     fatherLastName: '',
     fatherFirstNameEN: '',
     fatherLastNameEN: '',
+    fatherBirthPlace: '',
 
     motherFirstName: '',
     motherLastName: '',
     motherFirstNameEN: '',
     motherLastNameEN: '',
+    motherBirthPlace: '',
   },
 });
 
@@ -386,6 +389,83 @@ function clearForm() {
   };
 }
 
+function clearFormEmployee() {
+  formDataEmployee.value = {
+    image: null,
+    customerBranchId: '',
+    nrcNo: '',
+    dateOfBirth: null,
+    gender: '',
+    nationality: '',
+    firstName: '',
+    firstNameEN: '',
+    lastName: '',
+    lastNameEN: '',
+    addressEN: '',
+    address: '',
+    zipCode: '',
+    passportType: '',
+    passportNumber: '',
+    passportIssueDate: null,
+    passportExpiryDate: null,
+    passportIssuingCountry: '',
+    passportIssuingPlace: '',
+    previousPassportReference: '',
+    visaType: '',
+    visaNumber: '',
+    visaIssueDate: null,
+    visaExpiryDate: null,
+    visaIssuingPlace: '',
+    visaStayUntilDate: null,
+    tm6Number: '',
+    entryDate: null,
+    workerStatus: '',
+    subDistrictId: '',
+    districtId: '',
+    provinceId: '',
+    employeeWork: [
+      {
+        workEndDate: null,
+        workPermitExpireDate: null,
+        workPermitIssuDate: null,
+        workPermitNo: '',
+        workplace: '',
+        jobType: '',
+        positionName: '',
+        ownerName: '',
+        remark: '',
+      },
+    ],
+    employeeCheckup: [
+      {
+        coverageExpireDate: null,
+        coverageStartDate: null,
+        insuranceCompany: '',
+        medicalBenefitScheme: '',
+        remark: '',
+        hospitalName: '',
+        provinceId: '',
+        checkupResult: '',
+        checkupType: '',
+      },
+    ],
+    employeeOtherInfo: {
+      citizenId: '',
+      fatherFirstName: '',
+      fatherLastName: '',
+      fatherFirstNameEN: '',
+      fatherLastNameEN: '',
+      fatherBirthPlace: '',
+
+      motherFirstName: '',
+      motherLastName: '',
+      motherFirstNameEN: '',
+      motherLastNameEN: '',
+      motherBirthPlace: '',
+    },
+  };
+}
+
 function deleteCustomerById(id: string) {
   dialog({
     color: 'negative',
@@ -447,6 +527,8 @@ async function onSubmit() {
     });
     const resultList = await employeeStore.fetchList();
     if (resultList) listEmployee.value = resultList.result;
+    clearFormEmployee();
+    dialogEmployee.value = false;
   }
 }
 
@@ -557,6 +639,25 @@ function undo() {
   infoDrawerEdit.value = false;
 }
 
+async function employeeFilterOwnerBranch(
+  val: string,
+  update: (...args: unknown[]) => void,
+) {
+  update(async () => {
+    const result = await fetchListBranch({
+      includeCustomer: true,
+      query: val,
+      pageSize: 30,
+    });
+    if (result) {
+      employeeStore.ownerOption = result.result.map((i) => ({
+        label: i.code,
+        value: i.id,
+      }));
+    }
+  });
+}
+
 async function assignFormData(data: Customer & { branch: CustomerBranch[] }) {
   formData.value = {
     status: 'CREATED',
@@ -630,6 +731,10 @@ onMounted(async () => {
   }
 
   if (resultListEmployee) listEmployee.value = resultListEmployee.result;
+
+  const resultOption = await fetch('/option/option.json');
+  employeeStore.globalOption = await resultOption.json();
+  console.log(employeeStore.globalOption);
 });
 
 watch(locale, () => {
@@ -742,6 +847,7 @@ watch(fieldSelectedCustomer, async () => {
         <div class="row q-py-md">
           <div class="col">
             <q-select
+              v-if="selectorLabel === 'EMPLOYER'"
               v-model="fieldSelectedCustomer"
               style="width: 150px"
               outlined
@@ -1202,8 +1308,10 @@ watch(fieldSelectedCustomer, async () => {
         dense
         outlined
         separator
+        :employee-owner-option="employeeStore.ownerOption"
         v-model:customer-branch-id="formDataEmployee.customerBranchId"
         v-model:nrc-no="formDataEmployee.nrcNo"
+        @filter-owner-branch="employeeFilterOwnerBranch"
       />
     </template>
 
@@ -1231,12 +1339,22 @@ watch(fieldSelectedCustomer, async () => {
         dense
         outlined
         v-model:employee-checkup="formDataEmployee.employeeCheckup"
+        v-model:checkup-type-option="employeeStore.globalOption.tha.nationality"
+        v-model:medical-benefit-option="
+          employeeStore.globalOption.tha.typeInsurance
+        "
+        v-model:insurance-company-option="
+          employeeStore.globalOption.tha.insurancePlace
+        "
       />
       <FormEmployeeWorkHistory
         v-if="formDataEmployeeTab === 'workHistory'"
         dense
         outlined
         v-model:employee-work="formDataEmployee.employeeWork"
+        v-model:position-name-option="employeeStore.globalOption.tha.position"
+        v-model:job-type-option="employeeStore.globalOption.tha.businessType"
+        v-model:workplace-option="employeeStore.globalOption.tha.area"
       />
       <FormEmployeeOther
         v-if="
@@ -1258,13 +1376,19 @@ watch(fieldSelectedCustomer, async () => {
         v-model:passport-number="formDataEmployee.passportNumber"
         v-model:passport-issue-date="formDataEmployee.passportIssueDate"
         v-model:passport-expiry-date="formDataEmployee.passportExpiryDate"
+        v-model:passport-issuing-place="formDataEmployee.passportIssuingPlace"
         v-model:passport-issuing-country="
           formDataEmployee.passportIssuingCountry
         "
-        v-model:passport-issuing-place="formDataEmployee.passportIssuingCountry"
         v-model:previous-passport-reference="
           formDataEmployee.previousPassportReference
         "
+        v-model:passport-type-option="
+          employeeStore.globalOption.tha.nationality
+        "
+        v-model:passport-issuing-country-option="
+          employeeStore.globalOption.tha.nationality
+        "
       />
       <FormEmployeeVisa
         v-if="formDataEmployeeTab === 'personalInfo'"
@@ -1279,6 +1403,7 @@ watch(fieldSelectedCustomer, async () => {
         v-model:visa-stay-until-date="formDataEmployee.visaStayUntilDate"
         v-model:tm6-number="formDataEmployee.tm6Number"
         v-model:entry-date="formDataEmployee.entryDate"
+        v-model:visa-type-option="employeeStore.globalOption.tha.nationality"
       />
     </template>
   </FormDialog>