feat: address form moo, soi, street

src/components/form/AddressForm.vue

@@ -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)' })"
+          label="Address No."
-          class="col-12"
+          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>

src/i18n/eng/index.ts

@@ -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',

src/i18n/tha/index.ts

@@ -123,8 +123,13 @@ export default {
     gender: 'เพศ',
     telephone: 'เบอร์โทรศัพท์',
     address: 'ที่อยู่ {suffix}',
+    addressNo: 'บ้านเลขที่',
+    moo: 'หมู่',
+    soi: 'ซอย',
+    street: 'ถนน',
     province: 'จังหวัด',
     district: 'อำเภอ',
+    fullAddress: 'ที่อยู่เต็ม',
     subDistrict: 'ตำบล',
     zipCode: 'รหัสไปรษณีย์',
     prefixName: 'คํานําหน้า',