feat: address form moo, soi, street
This commit is contained in:
puriphatt
parent
21ac39d538
commit
27059e7e35
3 changed files with 177 additions and 10 deletions
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted, watch, reactive, ref } from 'vue';
|
||||
import { onMounted, watch, reactive, ref, computed } from 'vue';
|
||||
import useAddressStore, {
|
||||
District,
|
||||
Province,
|
||||
|
|
@ -7,6 +7,7 @@ import useAddressStore, {
|
|||
} from 'stores/address';
|
||||
import { selectFilterOptionRefMod } from 'stores/utils';
|
||||
import { QSelect } from 'quasar';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
defineProps<{
|
||||
title?: string;
|
||||
|
|
@ -30,6 +31,12 @@ const workplace = defineModel<string>('workplace', { default: '' });
|
|||
const workplaceEN = defineModel<string>('workplaceEn', { default: '' });
|
||||
const address = defineModel('address', { default: '' });
|
||||
const addressEN = defineModel('addressEN', { default: '' });
|
||||
const street = defineModel('street', { default: '' });
|
||||
const streetEN = defineModel('streetEN', { default: '' });
|
||||
const moo = defineModel('moo', { default: '' });
|
||||
const mooEN = defineModel('mooEN', { default: '' });
|
||||
const soi = defineModel('soi', { default: '' });
|
||||
const soiEN = defineModel('soiEN', { default: '' });
|
||||
const provinceId = defineModel<string | null | undefined>('provinceId');
|
||||
const districtId = defineModel<string | null | undefined>('districtId');
|
||||
const subDistrictId = defineModel<string | null | undefined>('subDistrictId');
|
||||
|
|
@ -46,6 +53,74 @@ const addrOptions = reactive<{
|
|||
subDistrictOps: [],
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const fullAddress = computed(() => {
|
||||
const addressParts = [address.value];
|
||||
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,
|
||||
);
|
||||
|
||||
if (moo.value) addressParts.push(`${t('form.moo')} ${moo.value}`);
|
||||
if (soi.value) addressParts.push(`${t('form.soi')} ${soi.value}`);
|
||||
if (street.value) addressParts.push(`${t('form.street')} ${street.value}`);
|
||||
|
||||
if (subDistrictId.value && sDistrict) {
|
||||
addressParts.push(typeof sDistrict.name === 'string' ? sDistrict.name : '');
|
||||
}
|
||||
|
||||
if (districtId.value && district)
|
||||
addressParts.push(typeof district.name === 'string' ? district.name : '');
|
||||
|
||||
if (provinceId.value && province)
|
||||
addressParts.push(
|
||||
typeof province.name === 'string' ? `${province.name}` : '',
|
||||
);
|
||||
|
||||
if (zipCode.value) {
|
||||
addressParts.push(zipCode.value);
|
||||
}
|
||||
|
||||
return addressParts.join(' ');
|
||||
});
|
||||
|
||||
const fullAddressEN = computed(() => {
|
||||
const addressParts = [addressEN.value];
|
||||
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,
|
||||
);
|
||||
|
||||
if (mooEN.value) addressParts.push(`Moo ${mooEN.value}`);
|
||||
if (soiEN.value) addressParts.push(`Soi ${soiEN.value}`);
|
||||
if (streetEN.value) addressParts.push(`${streetEN.value} Street`);
|
||||
|
||||
if (subDistrictId.value && sDistrict) {
|
||||
addressParts.push(
|
||||
typeof sDistrict.nameEN === 'string' ? sDistrict.nameEN : '',
|
||||
);
|
||||
}
|
||||
|
||||
if (districtId.value && district)
|
||||
addressParts.push(
|
||||
typeof district.nameEN === 'string' ? district.nameEN : '',
|
||||
);
|
||||
|
||||
if (provinceId.value && province)
|
||||
addressParts.push(
|
||||
typeof province.nameEN === 'string' ? `${province.nameEN}` : '',
|
||||
);
|
||||
|
||||
if (zipCode.value) {
|
||||
addressParts.push(zipCode.value);
|
||||
}
|
||||
|
||||
return addressParts.join(' ');
|
||||
});
|
||||
|
||||
async function fetchProvince() {
|
||||
const result = await adrressStore.fetchProvince();
|
||||
|
||||
|
|
@ -228,18 +303,48 @@ watch(districtId, fetchSubDistrict);
|
|||
<q-input
|
||||
outlined
|
||||
hide-bottom-space
|
||||
class="col-12"
|
||||
class="col-6"
|
||||
v-model="address"
|
||||
:dense="dense"
|
||||
:label="$t('form.address')"
|
||||
:label="$t('form.addressNo')"
|
||||
:readonly="readonly || sameWithEmployer"
|
||||
:for="`${prefixId}-${indexId !== undefined ? `input-address-${indexId}` : 'input-address'}`"
|
||||
:for="`${prefixId}-${indexId !== undefined ? `input-address-no-${indexId}` : 'input-address-no'}`"
|
||||
:rules="
|
||||
disabledRule
|
||||
? []
|
||||
: [(val) => (val && val.length > 0) || $t('form.error.required')]
|
||||
"
|
||||
/>
|
||||
<q-input
|
||||
outlined
|
||||
hide-bottom-space
|
||||
class="col-2"
|
||||
v-model="moo"
|
||||
:dense="dense"
|
||||
:label="$t('form.moo')"
|
||||
:readonly="readonly || sameWithEmployer"
|
||||
:for="`${prefixId}-${indexId !== undefined ? `input-moo-${indexId}` : 'input-moo'}`"
|
||||
/>
|
||||
<q-input
|
||||
outlined
|
||||
hide-bottom-space
|
||||
class="col-2"
|
||||
v-model="soi"
|
||||
:dense="dense"
|
||||
:label="$t('form.soi')"
|
||||
:readonly="readonly || sameWithEmployer"
|
||||
:for="`${prefixId}-${indexId !== undefined ? `input-soi-${indexId}` : 'input-soi'}`"
|
||||
/>
|
||||
<q-input
|
||||
outlined
|
||||
hide-bottom-space
|
||||
class="col-2"
|
||||
v-model="street"
|
||||
:dense="dense"
|
||||
:label="$t('form.street')"
|
||||
:readonly="readonly || sameWithEmployer"
|
||||
:for="`${prefixId}-${indexId !== undefined ? `input-street-${indexId}` : 'input-street'}`"
|
||||
/>
|
||||
<q-select
|
||||
autocomplete="off"
|
||||
outlined
|
||||
|
|
@ -384,6 +489,17 @@ watch(districtId, fetchSubDistrict);
|
|||
.map((x) => x.zipCode)[0] ?? ''
|
||||
"
|
||||
/>
|
||||
<q-input
|
||||
outlined
|
||||
hide-bottom-space
|
||||
class="col-12"
|
||||
:model-value="address ? fullAddress : ''"
|
||||
:dense="dense"
|
||||
:label="$t('form.fullAddress')"
|
||||
readonly
|
||||
:disable="!readonly && !sameWithEmployer"
|
||||
:for="`${prefixId}-${indexId !== undefined ? `input-street-${indexId}` : 'input-street'}`"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-12 app-text-muted-2">
|
||||
|
|
@ -418,8 +534,8 @@ watch(districtId, fetchSubDistrict);
|
|||
:readonly="readonly || sameWithEmployer"
|
||||
outlined
|
||||
hide-bottom-space
|
||||
:label="$t('form.address', { suffix: '(EN)' })"
|
||||
class="col-12"
|
||||
label="Address No."
|
||||
class="col-6"
|
||||
v-model="addressEN"
|
||||
:rules="
|
||||
disabledRule
|
||||
|
|
@ -427,6 +543,36 @@ watch(districtId, fetchSubDistrict);
|
|||
: [(val) => (val && val.length > 0) || $t('form.error.required')]
|
||||
"
|
||||
/>
|
||||
<q-input
|
||||
outlined
|
||||
hide-bottom-space
|
||||
class="col-2"
|
||||
v-model="mooEN"
|
||||
:dense="dense"
|
||||
label="Moo"
|
||||
:readonly="readonly || sameWithEmployer"
|
||||
:for="`${prefixId}-${indexId !== undefined ? `input-moo-${indexId}` : 'input-moo'}`"
|
||||
/>
|
||||
<q-input
|
||||
outlined
|
||||
hide-bottom-space
|
||||
class="col-2"
|
||||
v-model="soiEN"
|
||||
:dense="dense"
|
||||
label="Soi"
|
||||
:readonly="readonly || sameWithEmployer"
|
||||
:for="`${prefixId}-${indexId !== undefined ? `input-soi-${indexId}` : 'input-soi'}`"
|
||||
/>
|
||||
<q-input
|
||||
outlined
|
||||
hide-bottom-space
|
||||
class="col-2"
|
||||
v-model="streetEN"
|
||||
:dense="dense"
|
||||
label="Street"
|
||||
:readonly="readonly || sameWithEmployer"
|
||||
:for="`${prefixId}-${indexId !== undefined ? `input-street-${indexId}` : 'input-street'}`"
|
||||
/>
|
||||
<q-select
|
||||
autocomplete="off"
|
||||
outlined
|
||||
|
|
@ -443,7 +589,7 @@ watch(districtId, fetchSubDistrict);
|
|||
option-label="nameEN"
|
||||
class="col-md-3 col-6"
|
||||
:dense="dense"
|
||||
:label="$t('form.province')"
|
||||
label="Province"
|
||||
:options="provinceOptions"
|
||||
:readonly="readonly || sameWithEmployer"
|
||||
:hide-dropdown-icon="readonly || sameWithEmployer"
|
||||
|
|
@ -486,7 +632,7 @@ watch(districtId, fetchSubDistrict);
|
|||
option-label="nameEN"
|
||||
class="col-md-3 col-6"
|
||||
:dense="dense"
|
||||
:label="$t('form.district')"
|
||||
label="District"
|
||||
:options="districtOptions"
|
||||
:readonly="readonly || sameWithEmployer"
|
||||
:hide-dropdown-icon="readonly || sameWithEmployer"
|
||||
|
|
@ -529,7 +675,7 @@ watch(districtId, fetchSubDistrict);
|
|||
class="col-md-3 col-6"
|
||||
v-model="subDistrictId"
|
||||
:dense="dense"
|
||||
:label="$t('form.subDistrict')"
|
||||
label="Sub-District"
|
||||
:options="subDistrictOptions"
|
||||
:readonly="readonly || sameWithEmployer"
|
||||
:hide-dropdown-icon="readonly || sameWithEmployer"
|
||||
|
|
@ -564,7 +710,7 @@ watch(districtId, fetchSubDistrict);
|
|||
readonly
|
||||
:disable="!readonly && !sameWithEmployer"
|
||||
zip="zip-en"
|
||||
:label="$t('form.zipCode')"
|
||||
label="Zip Code"
|
||||
class="col-md-2 col-6"
|
||||
:model-value="
|
||||
addrOptions.subDistrictOps
|
||||
|
|
@ -572,6 +718,17 @@ watch(districtId, fetchSubDistrict);
|
|||
.map((x) => x.zipCode)[0] ?? ''
|
||||
"
|
||||
/>
|
||||
<q-input
|
||||
outlined
|
||||
hide-bottom-space
|
||||
class="col-12"
|
||||
:model-value="addressEN ? fullAddressEN : ''"
|
||||
:dense="dense"
|
||||
label="Full Address"
|
||||
readonly
|
||||
:disable="!readonly && !sameWithEmployer"
|
||||
:for="`${prefixId}-${indexId !== undefined ? `input-street-${indexId}` : 'input-street'}`"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -123,8 +123,13 @@ export default {
|
|||
telephone: 'Telephone',
|
||||
gender: 'Gender',
|
||||
address: 'Address {suffix}',
|
||||
addressNo: 'Address No.',
|
||||
moo: 'Moo',
|
||||
soi: 'Soi',
|
||||
street: 'Street',
|
||||
province: 'Province',
|
||||
district: 'District',
|
||||
fullAddress: 'Full Address',
|
||||
subDistrict: 'Sub-district',
|
||||
zipCode: 'Zip Code',
|
||||
prefixName: 'Prefix',
|
||||
|
|
|
|||
|
|
@ -123,8 +123,13 @@ export default {
|
|||
gender: 'เพศ',
|
||||
telephone: 'เบอร์โทรศัพท์',
|
||||
address: 'ที่อยู่ {suffix}',
|
||||
addressNo: 'บ้านเลขที่',
|
||||
moo: 'หมู่',
|
||||
soi: 'ซอย',
|
||||
street: 'ถนน',
|
||||
province: 'จังหวัด',
|
||||
district: 'อำเภอ',
|
||||
fullAddress: 'ที่อยู่เต็ม',
|
||||
subDistrict: 'ตำบล',
|
||||
zipCode: 'รหัสไปรษณีย์',
|
||||
prefixName: 'คํานําหน้า',
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue