From 2ddbe5820123ac80af6ab8f8997261ed7a18d2cc Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Fri, 8 Nov 2024 16:47:58 +0700
Subject: [PATCH] refactor: handle employment office

---
 src/components/form/AddressForm.vue | 173 +++++++++++++++++++---------
 1 file changed, 118 insertions(+), 55 deletions(-)

diff --git a/src/components/form/AddressForm.vue b/src/components/form/AddressForm.vue
index ccb0ee9d..92c9ca0e 100644
--- a/src/components/form/AddressForm.vue
+++ b/src/components/form/AddressForm.vue
@@ -48,8 +48,12 @@ const moo = defineModel<string | null | undefined>('moo', { default: '' });
 const mooEN = defineModel<string | null | undefined>('mooEn', { default: '' });
 const soi = defineModel<string | null | undefined>('soi', { default: '' });
 const soiEN = defineModel<string | null | undefined>('soiEn', { default: '' });
-const provinceId = defineModel<string | null | undefined>('provinceId');
-const districtId = defineModel<string | null | undefined>('districtId');
+const provinceId = defineModel<string | null | undefined>('provinceId', {
+  default: '',
+});
+const districtId = defineModel<string | null | undefined>('districtId', {
+  default: '',
+});
 const subDistrictId = defineModel<string | null | undefined>('subDistrictId');
 const zipCode = defineModel<string | null | undefined>('zipCode');
 const sameWithEmployer = defineModel<boolean>('sameWithEmployer');
@@ -67,6 +71,8 @@ const areaOptions = ref<Record<string, unknown>[]>([]);
 const addrOptions = reactive<{
   provinceOps: Province[];
   districtOps: District[];
+  province;
+
   subDistrictOps: SubDistrict[];
 }>({
   provinceOps: [],
@@ -92,7 +98,7 @@ const fullAddress = computed(() => {
   if (subDistrictId.value && sDistrict) {
     addressParts.push(
       typeof sDistrict.name === 'string'
-        ? `${!!province && province.id === '10' ? t('addressBangkok.subdistrict') : t('address.subdistrict')}  ${sDistrict.name},`
+        ? `${!!province && province.id === '10' ? t('addressBangkok.subdistrict') : t('address.subdistrict')}${sDistrict.name},`
         : '',
     );
   }
@@ -100,14 +106,14 @@ const fullAddress = computed(() => {
   if (districtId.value && district)
     addressParts.push(
       typeof district.name === 'string'
-        ? `${!!province && province.id === '10' ? t('addressBangkok.district') : t('address.district')} ${district.name},`
+        ? `${!!province && province.id === '10' ? t('addressBangkok.district') : t('address.district')}${district.name},`
         : '',
     );
 
   if (provinceId.value && province) {
     addressParts.push(
       typeof province.name === 'string'
-        ? ` ${!!province && province.id === '10' ? t('addressBangkok.province') : t('address.province')} ${province.name}`
+        ? ` ${!!province && province.id === '10' ? t('addressBangkok.province') : t('address.province')}${province.name}`
         : '',
     );
     sDistrict &&
@@ -226,6 +232,86 @@ async function selectSubDistrict(id: string) {
       .map((x) => x.zipCode)[0] ?? '';
 }
 
+function getOfficeName(isEnglish: boolean) {
+  const provinceNameKey = isEnglish ? 'nameEN' : 'name';
+  const districtNameKey = isEnglish ? 'nameEN' : 'name';
+
+  if (provinceId.value !== '10') {
+    const province = provinceOptions.value.find(
+      (v) => v.id === provinceId.value,
+    );
+    if (province) {
+      return isEnglish
+        ? `Regional Area Office ${province[provinceNameKey]}`
+        : `สำนักงาน${province[provinceNameKey]}`;
+    }
+  } else {
+    const district = districtOptions.value.find(
+      (v) => v.id === districtId.value,
+    );
+
+    if (district && typeof district[districtNameKey] === 'string') {
+      const districtName = district['name'];
+
+      const areas = [
+        {
+          name: isEnglish ? 'Regional Area Office 1' : 'สำนักงานเขตที่ 1',
+          value: 'บางรัก ปทุมวัน ยานนาวสาทร และบางคอแหลม',
+        },
+        {
+          name: isEnglish ? 'Regional Area Office 2' : 'สำนักงานเขตที่ 2',
+          value: 'จอมทอง ทุ่งครุ บางขุนเทียน บางบอน และราษฎร์บูรณะ',
+        },
+        {
+          name: isEnglish ? 'Regional Area Office 3' : 'สำนักงานเขตที่ 3',
+          value: 'คลองเตย บางนา ประเวศ พระโขนง วัฒนา และสวนหลวง',
+        },
+        {
+          name: isEnglish ? 'Regional Area Office 4' : 'สำนักงานเขตที่ 4',
+          value: 'คันนายาว บางกะปิ ลาดพร้าว บึงกุ่ม และวังทางหลาง',
+        },
+        {
+          name: isEnglish ? 'Regional Area Office 5' : 'สำนักงานเขตที่ 5',
+          value: 'คลองสามวา มีนบุรี ลาดกระบัง สะพานสูง หนองจอก และสายไหม',
+        },
+        {
+          name: isEnglish ? 'Regional Area Office 6' : 'สำนักงานเขตที่ 6',
+          value: 'คลองสาน ธนบุรี บางกอกน้อย บางกอกใหญ่ และบางพลัด',
+        },
+        {
+          name: isEnglish ? 'Regional Area Office 7' : 'สำนักงานเขตที่ 7',
+          value: 'ตลิ่งชัน ทวีวัฒนา บางแค ภาษีเจริญ และหนองแขม',
+        },
+        {
+          name: isEnglish ? 'Regional Area Office 8' : 'สำนักงานเขตที่ 8',
+          value: 'ดุสิต พระนครป้อมปราบศัตรูพ่าย และสัมพันธวงศ์',
+        },
+        {
+          name: isEnglish ? 'Regional Area Office 9' : 'สำนักงานเขตที่ 9',
+          value: 'จตุจักร ดอนเมือง บางชื่อ บางเขน และหลักสี่',
+        },
+        {
+          name: isEnglish ? 'Regional Area Office 10' : 'สำนักงานเขตที่ 10',
+          value: 'ดินแดง พญาไท ราชเทวี และห้วยขวาง',
+        },
+      ];
+
+      console.log(districtName);
+      const foundArea = areas.find((area) => area.value.includes(districtName));
+      console.log(foundArea);
+
+      if (foundArea) {
+        return foundArea.name;
+      } else {
+        return `ไม่พบพื้นที่ที่มีเขต ${district[districtNameKey]}`;
+      }
+    }
+  }
+}
+
+const office = computed(() => getOfficeName(false));
+const officeEn = computed(() => getOfficeName(true));
+
 const provinceOptions = ref<Record<string, unknown>[]>([]);
 
 let areaFilter: (
@@ -300,6 +386,7 @@ watch(provinceId, fetchDistrict);
 watch(districtId, fetchSubDistrict);
 </script>
 <template>
+  {{ districtId }}
   <div class="col-12">
     <div
       v-if="!hideTitle"
@@ -373,56 +460,32 @@ watch(districtId, fetchSubDistrict);
           "
         />
 
-        <template v-if="provinceId !== '10'">
-          <q-input
-            outlined
-            hide-bottom-space
-            class="col"
-            v-model="employmentOffice"
-            :dense="dense"
-            :label="$t('customer.form.employmentOffice')"
-            :readonly="readonly || sameWithEmployer"
-            :for="`${prefixId}-${indexId !== undefined ? `input-address-${indexId}` : 'input-address'}`"
-          />
-          <q-input
-            outlined
-            hide-bottom-space
-            class="col"
-            v-model="employmentOfficeEN"
-            :dense="dense"
-            :label="`${$t('customer.form.employmentOffice')} (EN)`"
-            :readonly="readonly || sameWithEmployer"
-            :for="`${prefixId}-${indexId !== undefined ? `input-address-${indexId}` : 'input-address'}`"
-          />
-        </template>
-
-        <template v-else>
-          <SelectInput
-            :readonly
-            incremental
-            v-model="employmentOffice"
-            id="quotation-branch"
-            class="col"
-            :option="areaOptions"
-            :label="$t('customer.form.employmentOffice')"
-            option-value="value"
-            :option-label="locale === 'eng' ? 'labelEN' : 'label'"
-            @filter="areaFilter"
-          />
-
-          <SelectInput
-            incremental
-            v-model="employmentOffice"
-            id="quotation-branch"
-            class="col"
-            :option="areaENOption"
-            :label="`${$t('customer.form.employmentOffice')} (EN)`"
-            option-value="value"
-            :option-label="locale === 'eng' ? 'labelEN' : 'label'"
-            @filter="areaFilter"
-            readonly
-          />
-        </template>
+        <q-input
+          outlined
+          hide-bottom-space
+          class="col"
+          :model-value="office"
+          :dense="dense"
+          :label="$t('customer.form.employmentOffice')"
+          :readonly="readonly || sameWithEmployer"
+          :for="`${prefixId}-${indexId !== undefined ? `input-address-${indexId}` : 'input-address'}`"
+          @update:model-value="
+            (v) => (typeof v === 'string' ? (employmentOffice = v) : '')
+          "
+        />
+        <q-input
+          outlined
+          hide-bottom-space
+          class="col"
+          :model-value="officeEn"
+          :dense="dense"
+          :label="`${$t('customer.form.employmentOffice')} (EN)`"
+          :readonly="readonly || sameWithEmployer"
+          :for="`${prefixId}-${indexId !== undefined ? `input-address-${indexId}` : 'input-address'}`"
+          @update:model-value="
+            (v) => (typeof v === 'string' ? (employmentOfficeEN = v) : '')
+          "
+        />
       </div>
 
       <template v-if="!hideIcon">