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

refactor: handle employment office

Browse source
This commit is contained in:
Thanaphon Frappet 2024-11-08 16:47:58 +07:00
parent 959fb9b45f
commit 2ddbe58201
1 changed files with 118 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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">