From a2720d0f7697b0d203cf4a8edabb787ee3439a9a Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Mon, 11 Nov 2024 11:29:56 +0700
Subject: [PATCH] refactor: address form => use format address

---
 src/components/form/AddressForm.vue | 107 ++++++++++------------------
 1 file changed, 37 insertions(+), 70 deletions(-)

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