chamomind/jws-frontend
chamomind/jws-frontend
7
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

refactor: handle employmentOffice

Browse source
This commit is contained in:
Thanaphon Frappet 2024-10-28 19:57:46 +07:00
parent 0672b67cbf
commit 4ac06420f0
1 changed files with 91 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

111
src/components/form/AddressForm.vue
View file

@ -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
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 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>
</div>
<template v-if="!hideIcon">