diff --git a/src/components/form/AddressForm.vue b/src/components/form/AddressForm.vue index cbdb0819..a071cc4c 100644 --- a/src/components/form/AddressForm.vue +++ b/src/components/form/AddressForm.vue @@ -12,7 +12,7 @@ import { formatAddress } from 'src/utils/address'; import useOptionStore from 'stores/options'; const optionStore = useOptionStore(); -defineProps<{ +const props = defineProps<{ title?: string; addressTitle?: string; addressTitleEN?: string; @@ -30,6 +30,7 @@ defineProps<{ useEmployment?: boolean; useWorkPlace?: boolean; + useForeignAddress?: boolean; }>(); const addressStore = useAddressStore(); @@ -57,6 +58,25 @@ const subDistrictId = defineModel('subDistrictId'); const zipCode = defineModel('zipCode'); const sameWithEmployer = defineModel('sameWithEmployer'); +const provinceTextEN = defineModel( + 'provinceTextEn', + { + default: '', + }, +); +const districtTextEN = defineModel( + 'districtTextEn', + { + default: '', + }, +); +const subDistrictTextEN = defineModel( + 'subDistrictTextEn', + { + default: '', + }, +); + const homeCode = defineModel('homeCode'); const employmentOffice = defineModel( 'employmentOffice', @@ -64,6 +84,7 @@ const employmentOffice = defineModel( const employmentOfficeEN = defineModel( 'employmentOfficeEn', ); +const addressForeign = defineModel('addressForeign'); const addrOptions = reactive<{ provinceOps: Province[]; @@ -78,14 +99,18 @@ const addrOptions = reactive<{ const area = ref([]); const fullAddress = computed(() => { - const province = provinceOptions.value.find((v) => v.id === provinceId.value); - const district = districtOptions.value.find((v) => v.id === districtId.value); - const sDistrict = subDistrictOptions.value.find( - (v) => v.id === subDistrictId.value, - ); + const province = addressForeign.value + ? { id: '1', name: provinceId.value } + : provinceOptions.value.find((v) => v.id === provinceId.value); + const district = addressForeign.value + ? { id: '1', name: districtId.value } + : districtOptions.value.find((v) => v.id === districtId.value); + const sDistrict = addressForeign.value + ? { id: '1', name: subDistrictId.value } + : subDistrictOptions.value.find((v) => v.id === subDistrictId.value); - if (province && district && sDistrict) { - const fullAddress = formatAddress({ + if (province?.name && district?.name && sDistrict?.name) { + const fullAddressText = formatAddress({ address: address.value, addressEN: addressEN.value, moo: moo.value ? moo.value : '', @@ -97,21 +122,26 @@ const fullAddress = computed(() => { province: province as unknown as Province, district: district as unknown as District, subDistrict: sDistrict as unknown as SubDistrict, + zipCode: addressForeign.value ? zipCode.value || ' ' : undefined, }); - return fullAddress; + return fullAddressText; } return '-'; }); const fullAddressEN = computed(() => { - const province = provinceOptions.value.find((v) => v.id === provinceId.value); - const district = districtOptions.value.find((v) => v.id === districtId.value); - const sDistrict = subDistrictOptions.value.find( - (v) => v.id === subDistrictId.value, - ); + const province = addressForeign.value + ? { nameEN: provinceTextEN.value } + : provinceOptions.value.find((v) => v.id === provinceId.value); + const district = addressForeign.value + ? { nameEN: districtTextEN.value } + : districtOptions.value.find((v) => v.id === districtId.value); + const sDistrict = addressForeign.value + ? { nameEN: subDistrictTextEN.value } + : subDistrictOptions.value.find((v) => v.id === subDistrictId.value); - if (province && district && sDistrict) { - const fullAddress = formatAddress({ + if (province?.nameEN && district?.nameEN && sDistrict?.nameEN) { + const fullAddressText = formatAddress({ address: address.value, addressEN: addressEN.value, moo: moo.value ? moo.value : '', @@ -124,8 +154,9 @@ const fullAddressEN = computed(() => { district: district as unknown as District, subDistrict: sDistrict as unknown as SubDistrict, en: true, + zipCode: addressForeign.value ? zipCode.value || ' ' : undefined, }); - return fullAddress; + return fullAddressText; } return '-'; }); @@ -149,7 +180,7 @@ async function fetchProvince() { } async function fetchDistrict() { - if (!provinceId.value) return; + if (!provinceId.value || addressForeign.value) return; const result = await addressStore.fetchDistrictByProvinceId(provinceId.value); if (result) addrOptions.districtOps = result; @@ -168,7 +199,7 @@ async function fetchDistrict() { } async function fetchSubDistrict() { - if (!districtId.value) return; + if (!districtId.value || addressForeign.value) return; const result = await addressStore.fetchSubDistrictByProvinceId( districtId.value, ); @@ -255,6 +286,16 @@ onMounted(async () => { await fetchSubDistrict(); }); +function clearAddress() { + provinceId.value = null; + districtId.value = null; + subDistrictId.value = null; + provinceTextEN.value = null; + districtTextEN.value = null; + subDistrictTextEN.value = null; + zipCode.value = null; +} + watch(provinceId, fetchDistrict); watch(districtId, fetchSubDistrict); @@ -313,6 +354,15 @@ watchEffect(async () => { {{ $t('customerEmployee.form.addressCustom') }} + +
+ + {{ $t('personnel.form.addressForeign') }} +
@@ -449,7 +499,24 @@ watchEffect(async () => { (v) => (typeof v === 'string' ? (street = v) : '') " /> + { + { + + { { (v) => (typeof v === 'string' ? (streetEN = v) : '') " /> + { + + { + + { :for="`${prefixId}-${indexId !== undefined ? `input-zip-code-${indexId}` : 'input-zip-code'}`" :dense="dense" outlined - readonly - :disable="!readonly && !sameWithEmployer" + :readonly="!addressForeign || readonly" + :disable="!addressForeign && !readonly && !sameWithEmployer" zip="zip-en" label="Zip Code" class="col-md-3 col-6" :model-value=" - addrOptions.subDistrictOps - ?.filter((x) => x.id === subDistrictId) - .map((x) => x.zipCode)[0] ?? '' + !addressForeign + ? (addrOptions.subDistrictOps + ?.filter((x) => x.id === subDistrictId) + .map((x) => x.zipCode)[0] ?? '') + : zipCode + " + @update:model-value="(v) => (zipCode = v.toString())" + :rules=" + !addressForeign + ? [] + : [(val) => (val && val.length > 0) || $t('form.error.required')] " /> ({ @@ -209,6 +217,14 @@ const formData = ref({ contactTel: '', remark: '', agencyStatus: '', + addressForeign: false, + provinceText: null, + districtText: null, + subDistrictText: null, + provinceTextEN: null, + districtTextEN: null, + subDistrictTextEN: null, + zipCodeText: null, }); const fieldSelectedOption = ref<{ label: string; value: string }[]>([ @@ -431,6 +447,28 @@ async function onSubmit(excludeDialog?: boolean) { ...formData.value, checkpointEN: formData.value.checkpoint, status: !statusToggle.value ? 'INACTIVE' : 'ACTIVE', + provinceId: formData.value.addressForeign + ? null + : formData.value.provinceId, + districtId: formData.value.addressForeign + ? null + : formData.value.districtId, + subDistrictId: formData.value.addressForeign + ? null + : formData.value.subDistrictId, + + provinceText: formData.value.addressForeign + ? formData.value.provinceId + : null, + districtText: formData.value.addressForeign + ? formData.value.districtId + : null, + subDistrictText: formData.value.addressForeign + ? formData.value.subDistrictId + : null, + zipCodeText: formData.value.addressForeign + ? formData.value.zipCode + : null, } as const; await userStore.editById(currentUser.value.id, formDataEdit); @@ -462,7 +500,31 @@ async function onSubmit(excludeDialog?: boolean) { : ''; formData.value.checkpointEN = formData.value.checkpoint; const result = await userStore.create( - formData.value, + { + ...formData.value, + provinceId: formData.value.addressForeign + ? null + : formData.value.provinceId, + districtId: formData.value.addressForeign + ? null + : formData.value.districtId, + subDistrictId: formData.value.addressForeign + ? null + : formData.value.subDistrictId, + + provinceText: formData.value.addressForeign + ? formData.value.provinceId + : null, + districtText: formData.value.addressForeign + ? formData.value.districtId + : null, + subDistrictText: formData.value.addressForeign + ? formData.value.subDistrictId + : null, + zipCodeText: formData.value.addressForeign + ? formData.value.zipCode + : null, + }, onCreateImageList.value, ); @@ -560,12 +622,20 @@ async function assignFormData(idEdit: string) { currentUser.value = foundUser; formData.value = { branchId: foundUser.branch[0]?.id, - provinceId: foundUser.provinceId, - districtId: foundUser.districtId, - subDistrictId: foundUser.subDistrictId, + provinceId: foundUser.addressForeign + ? foundUser.provinceText + : foundUser.provinceId, + districtId: foundUser.addressForeign + ? foundUser.districtText + : foundUser.districtId, + subDistrictId: foundUser.addressForeign + ? foundUser.subDistrictText + : foundUser.subDistrictId, telephoneNo: foundUser.telephoneNo, email: foundUser.email, - zipCode: foundUser.zipCode, + zipCode: foundUser.addressForeign + ? foundUser.zipCodeText + : foundUser.zipCode, gender: foundUser.gender, addressEN: foundUser.addressEN, address: foundUser.address, @@ -619,6 +689,10 @@ async function assignFormData(idEdit: string) { (foundUser.citizenExpire && new Date(foundUser.citizenExpire)) || null, remark: foundUser.remark || '', agencyStatus: foundUser.agencyStatus || '', + addressForeign: foundUser.addressForeign || false, + provinceTextEN: foundUser.provinceTextEN, + districtTextEN: foundUser.districtTextEN, + subDistrictTextEN: foundUser.subDistrictTextEN, }; formData.value.status === 'ACTIVE' || 'CREATED' @@ -745,7 +819,17 @@ watch( watch( () => formData.value.userType, - async () => { + async (type) => { + if (type !== 'AGENCY') { + formData.value.addressForeign = false; + formData.value.provinceId = null; + formData.value.districtId = null; + formData.value.subDistrictId = null; + formData.value.provinceTextEN = null; + formData.value.districtTextEN = null; + formData.value.subDistrictTextEN = null; + formData.value.zipCodeText = null; + } if (!infoDrawerEdit.value) return; formData.value.registrationNo = null; formData.value.startDate = null; @@ -1813,10 +1897,15 @@ watch( v-model:district-id="formData.districtId" v-model:sub-district-id="formData.subDistrictId" v-model:zip-code="formData.zipCode" + v-model:address-foreign="formData.addressForeign" + v-model:province-text-en="formData.provinceTextEN" + v-model:district-text-en="formData.districtTextEN" + v-model:sub-district-text-en="formData.subDistrictTextEN" :readonly="!infoDrawerEdit" prefix-id="drawer-info-personnel" :title="'personnel.form.addressInformation'" dense + :use-foreign-address="formData.userType === 'AGENCY'" class="q-mb-xl" />