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

refactor: address form => use format address

Browse source
This commit is contained in:
puriphatt 2024-11-11 11:29:56 +07:00
parent b03774957b
commit a2720d0f76
1 changed files with 37 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -8,6 +8,7 @@ import useAddressStore, {
import { selectFilterOptionRefMod } from 'stores/utils'; import { selectFilterOptionRefMod } from 'stores/utils';
import { QSelect } from 'quasar'; import { QSelect } from 'quasar';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { formatAddress } from 'src/utils/address';
import SelectInput from 'src/components/shared/SelectInput.vue'; import SelectInput from 'src/components/shared/SelectInput.vue';
import useOptionStore from 'stores/options'; import useOptionStore from 'stores/options';
@ -71,8 +72,6 @@ const areaOptions = ref<Record<string, unknown>[]>([]);
const addrOptions = reactive<{ const addrOptions = reactive<{
provinceOps: Province[]; provinceOps: Province[];
districtOps: District[]; districtOps: District[];
province;
subDistrictOps: SubDistrict[]; subDistrictOps: SubDistrict[];
}>({ }>({
provinceOps: [], provinceOps: [],
@ -83,88 +82,54 @@ const addrOptions = reactive<{
const { t } = useI18n(); const { t } = useI18n();
const fullAddress = computed(() => { const fullAddress = computed(() => {
const addressParts = [`${address.value},`];
const province = provinceOptions.value.find((v) => v.id === provinceId.value); const province = provinceOptions.value.find((v) => v.id === provinceId.value);
const district = districtOptions.value.find((v) => v.id === districtId.value); const district = districtOptions.value.find((v) => v.id === districtId.value);
const sDistrict = subDistrictOptions.value.find( const sDistrict = subDistrictOptions.value.find(
(v) => v.id === subDistrictId.value, (v) => v.id === subDistrictId.value,
); );
if (moo.value) addressParts.push(`หมู่ ${moo.value},`); if (province && district && sDistrict) {
if (soi.value) addressParts.push(`ซอย ${soi.value},`); const fullAddress = formatAddress({
if (street.value) addressParts.push(`ถนน ${street.value},`); address: address.value,
moo: moo.value ? moo.value : '',
if (subDistrictId.value && sDistrict) { mooEN: mooEN.value ? mooEN.value : '',
addressParts.push( soi: soi.value ? soi.value : '',
typeof sDistrict.name === 'string' soiEN: soiEN.value ? soiEN.value : '',
? `${!!province && province.id === '10' ? t('addressBangkok.subdistrict') : t('address.subdistrict')}${sDistrict.name},` street: street.value ? street.value : '',
: '', streetEN: streetEN.value ? streetEN.value : '',
); province: province as unknown as Province,
district: district as unknown as District,
subDistrict: sDistrict as unknown as SubDistrict,
});
return fullAddress;
} }
return '-';
if (districtId.value && district)
addressParts.push(
typeof district.name === 'string'
? `${!!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}`
: '',
);
sDistrict &&
addressParts.push(
typeof sDistrict.zipCode === 'string' ? `${sDistrict.zipCode}` : '',
);
}
return addressParts.join(' ');
}); });
const fullAddressEN = computed(() => { const fullAddressEN = computed(() => {
const addressParts = [`${addressEN.value},`];
const province = provinceOptions.value.find((v) => v.id === provinceId.value); const province = provinceOptions.value.find((v) => v.id === provinceId.value);
const district = districtOptions.value.find((v) => v.id === districtId.value); const district = districtOptions.value.find((v) => v.id === districtId.value);
const sDistrict = subDistrictOptions.value.find( const sDistrict = subDistrictOptions.value.find(
(v) => v.id === subDistrictId.value, (v) => v.id === subDistrictId.value,
); );
if (mooEN.value) addressParts.push(`Moo ${mooEN.value},`); if (province && district && sDistrict) {
if (soiEN.value) addressParts.push(`Soi ${soiEN.value},`); const fullAddress = formatAddress({
if (streetEN.value) addressParts.push(`${streetEN.value} Rd.`); address: address.value,
moo: moo.value ? moo.value : '',
if (subDistrictId.value && sDistrict) { mooEN: mooEN.value ? mooEN.value : '',
addressParts.push( soi: soi.value ? soi.value : '',
typeof sDistrict.nameEN === 'string' soiEN: soiEN.value ? soiEN.value : '',
? `${sDistrict.nameEN} ${t('addressEn.subdistrict')},` street: street.value ? street.value : '',
: '', streetEN: streetEN.value ? streetEN.value : '',
); province: province as unknown as Province,
district: district as unknown as District,
subDistrict: sDistrict as unknown as SubDistrict,
en: true,
});
return fullAddress;
} }
return '-';
if (districtId.value && district)
addressParts.push(
typeof district.nameEN === 'string'
? `${district.nameEN} ${t('addressEn.district')}`
: '',
);
if (provinceId.value && province) {
addressParts.push(
typeof province.nameEN === 'string'
? `${province.nameEN} ${t('addressEn.province')}`
: '',
);
sDistrict &&
addressParts.push(
typeof sDistrict.zipCode === 'string' ? `${sDistrict.zipCode}` : '',
);
}
return addressParts.join(' ');
}); });
async function fetchProvince() { async function fetchProvince() {
@ -296,9 +261,11 @@ function getOfficeName(isEnglish: boolean) {
}, },
]; ];
console.log(districtName); const foundArea = areas.find((area) =>
const foundArea = areas.find((area) => area.value.includes(districtName)); area.value.includes(
console.log(foundArea); typeof districtName === 'string' ? districtName : '',
),
);
if (foundArea) { if (foundArea) {
return foundArea.name; return foundArea.name;