feat: employee address (same with employer)

src/components/02_personnel-management/InfoForm.vue

@@ -10,6 +10,7 @@ defineProps<{
   noAddress?: boolean;
   noPaddingTab?: boolean;
   disabledRule?: boolean;
+  employee?: boolean;
 }>();
 
 const address = defineModel('address', { default: '' });
@@ -19,6 +20,7 @@ const districtId = defineModel<string | null | undefined>('districtId');
 const subDistrictId = defineModel<string | null | undefined>('subDistrictId');
 const zipCode = defineModel<string>('zipCode', { default: '' });
 
+const sameWithEmployer = defineModel<boolean>('sameWithEmployer');
 const employeeTab = defineModel<string>('employeeTab');
 const tabsList = defineModel<{ name: string; label: string }[]>('tabsList');
 </script>
@@ -75,6 +77,7 @@ const tabsList = defineModel<{ name: string; label: string }[]>('tabsList');
                 dense
                 outlined
                 separator
+                employee
                 :readonly="readonly"
                 :disabledRule="disabledRule"
                 v-model:address="address"
@@ -83,6 +86,7 @@ const tabsList = defineModel<{ name: string; label: string }[]>('tabsList');
                 v-model:districtId="districtId"
                 v-model:subDistrictId="subDistrictId"
                 v-model:zipCode="zipCode"
+                v-model:same-with-employer="sameWithEmployer"
                 :title="titleFormAddress"
                 :addressTitle="addressTitle || ''"
                 :addressTitleEN="addressTitleEN || ''"
@@ -101,14 +105,14 @@ const tabsList = defineModel<{ name: string; label: string }[]>('tabsList');
 <style scoped lang="scss">
 .active-tab {
   color: var(--brand-1);
-  background-color: var(--surface-3);
+  background-color: var(--surface-tab);
   border-top: 1px solid var(--brand-1);
   border-left: 1px solid var(--brand-1);
   border-right: 1px solid var(--brand-1);
   border-top-left-radius: var(--radius-2);
   border-top-right-radius: var(--radius-2);
   margin-bottom: -1.5px;
-  border-bottom: 3px solid var(--surface-3);
+  border-bottom: 3px solid var(--surface-tab);
 }
 
 .content-tab {

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { CustomerBranch } from 'src/stores/customer/types';
 import { onMounted, ref } from 'vue';
 
 const customerName = defineModel<string>('customerName');
@@ -8,7 +9,15 @@ const taxNo = defineModel<string | null | undefined>('taxNo');
 const employerID = defineModel<string>('employerID');
 
 // employee
-const customerBranchId = defineModel<string>('customerBranchId');
+const customerBranch = defineModel<{
+  id: string;
+  address: string;
+  addressEN: string;
+  provinceId: string;
+  districtId: string;
+  subDistrictId: string;
+  zipCode: string;
+}>('customerBranch');
 const employeeId = defineModel<string>('employeeId');
 const nrcNo = defineModel<string>('nrcNo');
 
@@ -20,7 +29,7 @@ defineProps<{
   typeCustomer?: string;
   employee?: boolean;
 
-  employeeOwnerOption?: { label: string; value: string }[];
+  employeeOwnerOption?: CustomerBranch[];
 }>();
 
 defineEmits<{
@@ -91,11 +100,20 @@ onMounted(async () => {});
       :readonly="readonly"
       :borderless="readonly"
       hide-bottom-space
-      class="col-3"
+      class="col-12"
       :label="$t('formDialogEmployerBranchCode')"
-      v-model="customerBranchId"
+      v-model="customerBranch"
-      option-label="label"
+      :option-value="
-      option-value="value"
+        (v) => ({
+          id: v.id,
+          address: v.address,
+          addressEN: v.addressEN,
+          provinceId: v.provinceId,
+          districtId: v.districtId,
+          subDistrictId: v.subDistrictId,
+          zipCode: v.zipCode,
+        })
+      "
       emit-value
       map-options
       :options="employeeOwnerOption"
@@ -104,7 +122,65 @@ onMounted(async () => {});
         (val: string) =>
           !!val || $t('selectValidate') + $t('formDialogEmployerBranchCode'),
       ]"
-    />
+    >
+      <template v-slot:before-options>
+        <q-item>
+          <div
+            class="row items-center col-12 app-text-muted text-weight-medium"
+          >
+            <div class="col-4">{{ $t('branchCode') }}</div>
+            <div class="col">{{ $t('name') }}</div>
+            <div class="col">{{ $t('address') }}</div>
+          </div>
+        </q-item>
+      </template>
+
+      <template v-slot:option="scope">
+        <q-item v-bind="scope.itemProps">
+          <div v-if="scope.opt" class="row items-center col-12">
+            <div class="col-4">
+              {{ scope.opt.code }}
+            </div>
+            <div class="col">
+              {{ $i18n.locale === 'en-US' ? scope.opt.nameEN : scope.opt.name }}
+            </div>
+            <div v-if="scope.opt.province" class="col">
+              {{
+                $i18n.locale === 'en-US'
+                  ? scope.opt.addressEN
+                  : scope.opt.address
+              }}
+              ({{
+                $i18n.locale === 'en-US'
+                  ? scope.opt.province.nameEN
+                  : scope.opt.province.name
+              }})
+            </div>
+          </div>
+        </q-item>
+      </template>
+
+      <template v-slot:selected-item="scope">
+        <div v-if="scope.opt" class="row items-center col-12">
+          <div class="col-4">
+            {{ scope.opt.code }}
+          </div>
+          <div class="col">
+            {{ $i18n.locale === 'en-US' ? scope.opt.nameEN : scope.opt.name }}
+          </div>
+          <div v-if="scope.opt.province" class="col">
+            {{
+              $i18n.locale === 'en-US' ? scope.opt.addressEN : scope.opt.address
+            }}
+            ({{
+              $i18n.locale === 'en-US'
+                ? scope.opt.province.nameEN
+                : scope.opt.province.name
+            }})
+          </div>
+        </div>
+      </template>
+    </q-select>
     <q-input
       for="input-employeeID"
       :dense="dense"
@@ -112,7 +188,7 @@ onMounted(async () => {});
       :readonly="true"
       :borderless="readonly"
       hide-bottom-space
-      class="col-3"
+      class="col-6"
       :label="$t('formDialogEmployeeID')"
       v-model="employeeId"
     />

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) {
+      if (result) employeeStore.ownerOption = result.result;
-        employeeStore.ownerOption = result.result.map((i) => ({
-          label: i.code,
-          value: i.id,
-        }));
-      }
     }
   } else {
     if (selectorLabel.value === 'EMPLOYER') dialogInputForm.value = true;
@@ -403,12 +408,7 @@ async function openDialogInputForm(
         query: code,
         pageSize: 30,
       });
-      if (result) {
+      if (result) employeeStore.ownerOption = result.result;
-        employeeStore.ownerOption = result.result.map((i) => ({
-          label: i.code,
-          value: i.id,
-        }));
-      }
       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) {
+    if (result) employeeStore.ownerOption = result.result;
-      employeeStore.ownerOption = result.result.map((i) => ({
-        label: i.code,
-        value: i.id,
-      }));
-    }
   });
 }
 
@@ -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:customer-branch="formDataEmployeeOwner"
-          v-model:employee-id="currentEmployee.code"
+          v-model:employee-id="currentEmployeeCode"
           v-model:nrc-no="formDataEmployee.nrcNo"
           @filter-owner-branch="employeeFilterOwnerBranch"
         />

src/stores/customer/index.ts

@@ -420,6 +420,29 @@ const useCustomerStore = defineStore('api-customer', () => {
     );
   }
 
+  async function fetchListBranchById(
+    branchId: string,
+    flow?: {
+      sessionId: string;
+      refTransactionId: string;
+      transactionId: string;
+    },
+  ) {
+    const res = await api.get(`/customer-branch/${branchId}`, {
+      headers: {
+        'X-Session-Id': flow?.sessionId,
+        'X-Rtid': flow?.refTransactionId,
+        'X-Tid': flow?.transactionId,
+      },
+    });
+
+    if (res && res.status === 200) {
+      return res.data;
+    }
+
+    return false;
+  }
+
   return {
     data,
 
@@ -434,6 +457,7 @@ const useCustomerStore = defineStore('api-customer', () => {
     createBranch,
     editBranchById,
     deleteBranchById,
+    fetchListBranchById,
   };
 });
 

src/stores/employee/index.ts

@@ -9,12 +9,13 @@ import {
   EmployeeOther,
   EmployeeWork,
 } from './types';
+import { CustomerBranch } from '../customer/types';
 import axios from 'axios';
 
 const useEmployeeStore = defineStore('api-employee', () => {
   const data = ref<Pagination<Employee[]>>();
   const globalOption = ref();
-  const ownerOption = ref<{ label: string; value: string }[]>();
+  const ownerOption = ref<CustomerBranch[]>();
 
   async function fetchList(
     opts?: {