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"
-      option-label="label"
-      option-value="value"
+      v-model="customerBranch"
+      :option-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"
     />