refactor: handle office

src/components/form/AddressForm.vue

@@ -1,18 +1,16 @@
 <script setup lang="ts">
-import { onMounted, watch, reactive, ref, computed } from 'vue';
+import { onMounted, watch, reactive, ref, computed, watchEffect } from 'vue';
 import useAddressStore, {
   District,
   Province,
   SubDistrict,
+  Office,
 } from 'stores/address';
 import { selectFilterOptionRefMod } from 'stores/utils';
 import { QSelect } from 'quasar';
-import { useI18n } from 'vue-i18n';
 import { formatAddress } from 'src/utils/address';
-import SelectInput from 'src/components/shared/SelectInput.vue';
 import useOptionStore from 'stores/options';
 
-const { locale } = useI18n({ useScope: 'global' });
 const optionStore = useOptionStore();
 defineProps<{
   title?: string;
@@ -67,8 +65,6 @@ const employmentOfficeEN = defineModel<string | null | undefined>(
   'employmentOfficeEn',
 );
 
-const areaOptions = ref<Record<string, unknown>[]>([]);
-
 const addrOptions = reactive<{
   provinceOps: Province[];
   districtOps: District[];
@@ -79,9 +75,7 @@ const addrOptions = reactive<{
   subDistrictOps: [],
 });
 
-const { t } = useI18n();
-
-const area = computed(() => {});
+const area = ref<Office[]>([]);
 
 const fullAddress = computed(() => {
   const province = provinceOptions.value.find((v) => v.id === provinceId.value);
@@ -201,95 +195,24 @@ async function selectSubDistrict(id: string) {
       .map((x) => x.zipCode)[0] ?? '';
 }
 
-function getOfficeName(isEnglish: boolean) {
-  const provinceNameKey = isEnglish ? 'nameEN' : 'name';
-  const districtNameKey = isEnglish ? 'nameEN' : 'name';
+async function getOfficeName(districtId: string) {
+  const result = await addressStore.fetchOffice({
+    districtId,
+  });
 
-  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: 'ดินแดง พญาไท ราชเทวี และห้วยขวาง',
-        },
-      ];
-
-      const foundArea = areas.find((area) =>
-        area.value.includes(
-          typeof districtName === 'string' ? districtName : '',
-        ),
-      );
-
-      if (foundArea) {
-        return foundArea.name;
-      } else {
-        return `ไม่พบพื้นที่ที่มีเขต ${district[districtNameKey]}`;
-      }
-    }
-  }
+  if (result) return result;
+  return [];
 }
 
-const office = computed(() => getOfficeName(false));
-const officeEn = computed(() => getOfficeName(true));
+const office = computed(() => {
+  if (area.value[0]) return area.value[0].name;
+});
+const officeEn = computed(() => {
+  if (area.value[0]) return area.value[0].nameEN;
+});
 
 const provinceOptions = ref<Record<string, unknown>[]>([]);
 
-let areaFilter: (
-  value: string,
-  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
-) => void;
-
 let provinceFilter: (
   value: string,
   update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
@@ -332,29 +255,17 @@ onMounted(async () => {
   await fetchSubDistrict();
 });
 
-onMounted(() => {
-  if (optionStore.globalOption?.area) {
-    areaFilter = selectFilterOptionRefMod(
-      ref(optionStore.globalOption.area),
-      areaOptions,
-      'label',
-    );
-  }
-});
-
-watch(
-  () => optionStore.globalOption,
-  () => {
-    areaFilter = selectFilterOptionRefMod(
-      ref(optionStore.globalOption.prefix),
-      areaOptions,
-      'label',
-    );
-  },
-);
-
 watch(provinceId, fetchDistrict);
 watch(districtId, fetchSubDistrict);
+
+watchEffect(async () => {
+  if (!districtId.value) {
+    area.value = [];
+    return;
+  }
+
+  area.value = await getOfficeName(districtId.value);
+});
 </script>
 <template>
   <div class="col-12">
@@ -437,7 +348,8 @@ watch(districtId, fetchSubDistrict);
           :model-value="office"
           :dense="dense"
           :label="$t('customer.form.employmentOffice')"
-          :readonly="readonly || sameWithEmployer"
+          readonly
+          :disable="!readonly && !sameWithEmployer"
           :for="`${prefixId}-${indexId !== undefined ? `input-address-${indexId}` : 'input-address'}`"
           @update:model-value="
             (v) => (typeof v === 'string' ? (employmentOffice = v) : '')
@@ -450,7 +362,8 @@ watch(districtId, fetchSubDistrict);
           :model-value="officeEn"
           :dense="dense"
           :label="`${$t('customer.form.employmentOffice')} (EN)`"
-          :readonly="readonly || sameWithEmployer"
+          readonly
+          :disable="!readonly && !sameWithEmployer"
           :for="`${prefixId}-${indexId !== undefined ? `input-address-${indexId}` : 'input-address'}`"
           @update:model-value="
             (v) => (typeof v === 'string' ? (employmentOfficeEN = v) : '')