feat(address): remove ',' and use addressFormat on BasicInformation(customer employee)

src/components/03_customer-management/employee/BasicInformation.vue

@@ -11,6 +11,7 @@ import {
 } from 'components/button';
 import { useI18n } from 'vue-i18n';
 import useOptionStore from 'stores/options';
+import { formatAddress } from 'src/utils/address';
 
 const { locale } = useI18n();
 
@@ -195,9 +196,20 @@ defineEmits<{
                 <span v-if="scope.opt.province" class="col">
                   {{ $t('general.address') }}
                   {{
-                    $i18n.locale === 'eng'
+                    formatAddress({
-                      ? `${scope.opt.addressEN || ''}, ${scope.opt.mooEN && `${$t('form.moo')} ${scope.opt.mooEN},`} ${scope.opt.soiEN && `${$t('form.soi')} ${scope.opt.soiEN},`} ${scope.opt.streetEN && `${scope.opt.streetEN} Rd,`} ${scope.opt.subDistrict.nameEN || ''}, ${scope.opt.district.nameEN || ''}, ${scope.opt.province.nameEN || ''}`
+                      address: scope.opt.address,
-                      : `${scope.opt.address || ''}, ${scope.opt.moo && `${$t('form.moo')} ${scope.opt.moo},`} ${scope.opt.soi && `${$t('form.soi')} ${scope.opt.soi},`} ${scope.opt.street && `${$t('form.road')} ${scope.opt.street},`} ${scope.opt.subDistrict.name || ''}, ${scope.opt.district.name || ''}, ${scope.opt.province.name || ''}`
+                      addressEN: scope.opt.addressEN,
+                      moo: scope.opt.moo,
+                      mooEN: scope.opt.mooEN,
+                      soi: scope.opt.soi,
+                      soiEN: scope.opt.soiEN,
+                      street: scope.opt.street,
+                      streetEN: scope.opt.streetEN,
+                      subDistrict: scope.opt.subDistrict,
+                      district: scope.opt.district,
+                      province: scope.opt.province,
+                      en: $i18n.locale === 'eng',
+                    })
                   }}
                   {{ scope.opt.subDistrict?.zipCode || '' }}
                 </span>
@@ -252,9 +264,20 @@ defineEmits<{
 
               {{ $t('general.address') }}
               {{
-                $i18n.locale === 'eng'
+                formatAddress({
-                  ? `${scope.opt.addressEN || ''}, ${scope.opt.mooEN && `${$t('form.moo')} ${scope.opt.mooEN},`} ${scope.opt.soiEN && `${$t('form.soi')} ${scope.opt.soiEN},`} ${scope.opt.streetEN && `${scope.opt.streetEN} Rd,`} ${scope.opt.subDistrict.nameEN || ''}, ${scope.opt.district.nameEN || ''}, ${scope.opt.province.nameEN || ''}`
+                  address: scope.opt.address,
-                  : `${scope.opt.address || ''}, ${scope.opt.moo && `${$t('form.moo')} ${scope.opt.moo},`} ${scope.opt.soi && `${$t('form.soi')} ${scope.opt.soi},`} ${scope.opt.street && `${$t('form.road')} ${scope.opt.street},`} ${scope.opt.subDistrict.name || ''}, ${scope.opt.district.name || ''}, ${scope.opt.province.name || ''}`
+                  addressEN: scope.opt.addressEN,
+                  moo: scope.opt.moo,
+                  mooEN: scope.opt.mooEN,
+                  soi: scope.opt.soi,
+                  soiEN: scope.opt.soiEN,
+                  street: scope.opt.street,
+                  streetEN: scope.opt.streetEN,
+                  subDistrict: scope.opt.subDistrict,
+                  district: scope.opt.district,
+                  province: scope.opt.province,
+                  en: $i18n.locale === 'eng',
+                })
               }}
               {{ scope.opt.subDistrict?.zipCode || '' }}
               <q-tooltip v-if="scope.opt.customer && scope.opt.province">
@@ -262,9 +285,20 @@ defineEmits<{
 
                 {{ $t('general.address') }}
                 {{
-                  $i18n.locale === 'eng'
+                  formatAddress({
-                    ? `${scope.opt.addressEN || ''}, ${scope.opt.mooEN && `${$t('form.moo')} ${scope.opt.mooEN},`} ${scope.opt.soiEN && `${$t('form.soi')} ${scope.opt.soiEN},`} ${scope.opt.streetEN && `${scope.opt.streetEN} Rd,`} ${scope.opt.subDistrict.nameEN || ''}, ${scope.opt.district.nameEN || ''}, ${scope.opt.province.nameEN || ''}`
+                    address: scope.opt.address,
-                    : `${scope.opt.address || ''}, ${scope.opt.moo && `${$t('form.moo')} ${scope.opt.moo},`} ${scope.opt.soi && `${$t('form.soi')} ${scope.opt.soi},`} ${scope.opt.street && `${$t('form.road')} ${scope.opt.street},`} ${scope.opt.subDistrict.name || ''}, ${scope.opt.district.name || ''}, ${scope.opt.province.name || ''}`
+                    addressEN: scope.opt.addressEN,
+                    moo: scope.opt.moo,
+                    mooEN: scope.opt.mooEN,
+                    soi: scope.opt.soi,
+                    soiEN: scope.opt.soiEN,
+                    street: scope.opt.street,
+                    streetEN: scope.opt.streetEN,
+                    subDistrict: scope.opt.subDistrict,
+                    district: scope.opt.district,
+                    province: scope.opt.province,
+                    en: $i18n.locale === 'eng',
+                  })
                 }}
                 {{ scope.opt.subDistrict?.zipCode || '' }}
               </q-tooltip>

src/utils/address.ts

@@ -19,34 +19,34 @@ export function formatAddress(opt: {
   let addressParts: string[];
   if (opt.en) {
     // en
-    addressParts = [`${opt.addressEN},`];
+    addressParts = [`${opt.addressEN}`];
-    if (opt.mooEN) addressParts.push(`Moo ${opt.mooEN},`);
+    if (opt.mooEN) addressParts.push(`Moo ${opt.mooEN}`);
-    if (opt.soiEN) addressParts.push(`Soi ${opt.soiEN},`);
+    if (opt.soiEN) addressParts.push(`Soi ${opt.soiEN}`);
     if (opt.streetEN) addressParts.push(`${opt.streetEN} Rd.`);
 
     if (opt.subDistrict) {
-      addressParts.push(`${opt.subDistrict.nameEN} sub-district,`);
+      addressParts.push(`${opt.subDistrict.nameEN} sub-district`);
     }
-    if (opt.district) addressParts.push(`${opt.district.nameEN} district,`);
+    if (opt.district) addressParts.push(`${opt.district.nameEN} distric`);
-    if (opt.province) addressParts.push(`${opt.province.nameEN},`);
+    if (opt.province) addressParts.push(`${opt.province.nameEN}`);
   } else {
     // th
-    addressParts = [`${opt.address},`];
+    addressParts = [`${opt.address}`];
-    if (opt.moo) addressParts.push(`หมู่ ${opt.moo},`);
+    if (opt.moo) addressParts.push(`หมู่ ${opt.moo}`);
-    if (opt.soi) addressParts.push(`ซอย ${opt.soi},`);
+    if (opt.soi) addressParts.push(`ซอย ${opt.soi}`);
-    if (opt.street) addressParts.push(`ถนน${opt.street},`);
+    if (opt.street) addressParts.push(`ถนน${opt.street}`);
 
     if (opt.subDistrict) {
       addressParts.push(
-        `${opt.province?.id === '10' ? 'แขวง' : 'ตำบล'}${opt.subDistrict.name},`,
+        `${opt.province?.id === '10' ? 'แขวง' : 'ตำบล'}${opt.subDistrict.name}`,
       );
     }
     if (opt.district) {
       addressParts.push(
-        `${opt.province?.id === '10' ? 'เขต' : 'อำเภอ'}${opt.district.name},`,
+        `${opt.province?.id === '10' ? 'เขต' : 'อำเภอ'}${opt.district.name}`,
       );
     }
-    if (opt.province) addressParts.push(`จังหวัด${opt.province.name},`);
+    if (opt.province) addressParts.push(`จังหวัด${opt.province.name}`);
     // addressParts.push(
     //   `${opt.province.id === '10' ? t('address.subArea') : t('address.subDistrict')}${opt.subDistrict.name},`,
     // );