refactor: handle employmentOffice

src/components/form/AddressForm.vue

@@ -8,7 +8,11 @@ import useAddressStore, {
 import { selectFilterOptionRefMod } from 'stores/utils';
 import { QSelect } from 'quasar';
 import { useI18n } from 'vue-i18n';
+import SelectInput from 'src/components/shared/SelectInput.vue';
+import useOptionStore from 'stores/options';
 
+const { locale } = useI18n({ useScope: 'global' });
+const optionStore = useOptionStore();
 defineProps<{
   title?: string;
   addressTitle?: string;
@@ -54,6 +58,8 @@ const employmentOfficeEN = defineModel<string | null | undefined>(
   'employmentOfficeEn',
 );
 
+const areaOptions = ref<Record<string, unknown>[]>([]);
+
 const addrOptions = reactive<{
   provinceOps: Province[];
   districtOps: District[];
@@ -204,6 +210,12 @@ async function selectSubDistrict(id: string) {
 }
 
 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,
@@ -233,12 +245,40 @@ let subDistrictEnFilter: (
   update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
 ) => void;
 
+const rawOption = ref();
+const areaENOption = ref([]);
+
 onMounted(async () => {
+  const resultOption = await fetch('/option/option.json');
+  rawOption.value = await resultOption.json();
+  areaENOption.value = rawOption.value.eng.area;
+
   await fetchProvince();
   await fetchDistrict();
   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);
 </script>
@@ -315,26 +355,57 @@ watch(districtId, fetchSubDistrict);
                 ]
           "
         />
-        <q-input
+
-          outlined
+        <template v-if="provinceId !== '10'">
-          hide-bottom-space
+          <q-input
-          class="col"
+            outlined
-          v-model="employmentOffice"
+            hide-bottom-space
-          :dense="dense"
+            class="col"
-          :label="$t('customer.form.employmentOffice')"
+            v-model="employmentOffice"
-          :readonly="readonly || sameWithEmployer"
+            :dense="dense"
-          :for="`${prefixId}-${indexId !== undefined ? `input-address-${indexId}` : 'input-address'}`"
+            :label="$t('customer.form.employmentOffice')"
-        />
+            :readonly="readonly || sameWithEmployer"
-        <q-input
+            :for="`${prefixId}-${indexId !== undefined ? `input-address-${indexId}` : 'input-address'}`"
-          outlined
+          />
-          hide-bottom-space
+          <q-input
-          class="col"
+            outlined
-          v-model="employmentOfficeEN"
+            hide-bottom-space
-          :dense="dense"
+            class="col"
-          :label="`${$t('customer.form.employmentOffice')} (EN)`"
+            v-model="employmentOfficeEN"
-          :readonly="readonly || sameWithEmployer"
+            :dense="dense"
-          :for="`${prefixId}-${indexId !== undefined ? `input-address-${indexId}` : 'input-address'}`"
+            :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>
       </div>
 
       <template v-if="!hideIcon">