ข้อมูลทะเบียนประวัติ => fix bug

src/modules/10_registry/01_Information/03_Address.vue

@@ -2,12 +2,19 @@
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar, type QTableProps } from "quasar";
 import { ref, reactive, onMounted } from "vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type {
+  Address,
+  Provinces,
+  Districts,
+  SubDistricts,
+} from "@/modules/10_registry/interface/response/01_Information";
 
 //history dialog
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
 
-import http from "@/plugins/http";
-import config from "@/app.config";
 import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
 
 const store = useRegistryInFormationStore();
@@ -19,7 +26,7 @@ const { showLoader, hideLoader, messageError, date2Thai } = mixin;
 const modalHistory = ref<boolean>(false);
 /** ตัวแปรข้อมูล */
 
-const formData = reactive<any>({
+const formData = reactive({
   registrationAddress: "", //ที่อยู่ตามทะเบียนบ้าน
   registrationProvince: "", //จังหวัด
   registrationDistrict: "", //เขต / อำเภอ
@@ -33,6 +40,12 @@ const formData = reactive<any>({
   currentZipCode: "", //รหัสไปรษณีย์
 });
 
+const provinceData = ref<Provinces[]>([]);
+const districtRegistration = ref<Districts[]>([]);
+const districtCurrent = ref<Districts[]>([]);
+const subDistrictRegistration = ref<SubDistricts[]>([]);
+const subDistrictCurrent = ref<SubDistricts[]>([]);
+
 const visibleColumnsHistory = ref<string[]>([
   "currentAddress",
   "currentDistrict",
@@ -216,23 +229,31 @@ function getData() {
   http
     .get(config.API.dataUserAddress)
     .then((res) => {
-      const data = res.data.result;
+      const data: Address = res.data.result;
+      fetchDistrict(data.registrationProvinceId, "1");
+      fetchDistrict(data.currentProvinceId, "2");
+      fetchSubDistrict(data.registrationDistrictId, "1");
+      fetchSubDistrict(data.currentDistrictId, "2");
+
       formData.registrationAddress = data.registrationAddress;
-      formData.registrationProvince = data.registrationProvince;
-      formData.registrationDistrict = data.registrationDistrict;
-      formData.registrationSubDistrict = data.registrationSubDistrict;
+      formData.registrationProvince = data.registrationProvinceId;
+      formData.registrationDistrict = data.registrationDistrictId;
+      formData.registrationSubDistrict = data.registrationSubDistrictId;
       formData.registrationZipCode = data.registrationZipCode;
+
       formData.currentAddress = data.currentAddress;
-      formData.currentProvince = data.currentProvince;
-      formData.currentDistrict = data.currentDistrict;
-      formData.currentSubDistrict = data.currentSubDistrict;
+      formData.currentProvince = data.currentProvinceId;
+      formData.currentDistrict = data.currentDistrictId;
+      formData.currentSubDistrict = data.currentSubDistrictId;
       formData.currentZipCode = data.currentZipCode;
     })
     .catch((e) => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      setTimeout(() => {
+        hideLoader();
+      }, 2000);
     });
 }
 
@@ -257,8 +278,101 @@ function getHistory() {
     });
 }
 
-onMounted(() => {
-  getData();
+/**
+ *function fetch ข้อมูลจังหวัด
+ */
+function fetchProvince() {
+  http
+    .get(config.API.profileNewProvince)
+    .then((res) => {
+      const data = res.data.result;
+      provinceData.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+}
+
+/**
+ * function fetch ข้อมูลอำเภอ
+ * @param id จังหวัด
+ * @param position ที่อยู่ตามทะเบียนบ้าน,ที่อยู่ปัจจุบัน
+ */
+function fetchDistrict(id: string | null, position: string) {
+  if (!id) return;
+  http
+    .get(config.API.profileNewDistrictByPId(id))
+    .then((res) => {
+      const data = res.data.result.districts;
+      if (position === "1") {
+        districtRegistration.value = data;
+      } else {
+        districtCurrent.value = data;
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+}
+
+/**
+ * function fetch ข้อมูลตำบล
+ * @param id อำเภอ
+ * @param position ที่อยู่ตามทะเบียนบ้าน,ที่อยู่ปัจจุบัน
+ */
+function fetchSubDistrict(id: string | null, position: string) {
+  if (!id) return;
+  http
+    .get(config.API.profileNewSubDistrictByDId(id))
+    .then((res) => {
+      const data = res.data.result.subDistricts;
+      if (position === "1") {
+        subDistrictRegistration.value = data;
+      } else {
+        subDistrictCurrent.value = data;
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+}
+
+/**
+ * function แปลงชื่อจังหวัด
+ * @param id จังหวัด
+ */
+function convertProvinceName(id: string) {
+  const province = provinceData.value.find((e: Provinces) => e.id === id);
+  return province?.name;
+}
+
+/**
+ * function แปลงชื่ออำเภอ
+ * @param id อำเภอ
+ * @param type ที่อยู่ตามทะเบียนบ้าน,ที่อยู่ปัจจุบัน
+ */
+function convertDistrictName(id: string, type: string) {
+  const data =
+    type === "1" ? districtRegistration.value : districtCurrent.value;
+  const district = data.find((e: Districts) => e.id === id);
+  return district?.name;
+}
+
+/**
+ * function แปลงชื่อตำบล
+ * @param id ตำบล
+ * @param type ที่อยู่ตามทะเบียนบ้าน,ที่อยู่ปัจจุบัน
+ */
+function convertSubDistrictName(id: string, type: string) {
+  const data =
+    type === "1" ? subDistrictRegistration.value : subDistrictCurrent.value;
+  const district = data.find((e: SubDistricts) => e.id === id);
+  return district?.name;
+}
+
+onMounted(async () => {
+  await fetchProvince();
+  await getData();
 });
 </script>
 <template>
@@ -300,7 +414,7 @@ onMounted(() => {
             <div class="col-7">
               {{
                 formData.registrationProvince
-                  ? formData.registrationProvince
+                  ? convertProvinceName(formData.registrationProvince)
                   : "-"
               }}
             </div>
@@ -311,7 +425,7 @@ onMounted(() => {
             <div class="col-7">
               {{
                 formData.registrationDistrict
-                  ? formData.registrationDistrict
+                  ? convertDistrictName(formData.registrationDistrict, "1")
                   : "-"
               }}
             </div>
@@ -322,7 +436,10 @@ onMounted(() => {
             <div class="col-7">
               {{
                 formData.registrationSubDistrict
-                  ? formData.registrationSubDistrict
+                  ? convertSubDistrictName(
+                      formData.registrationSubDistrict,
+                      "1"
+                    )
                   : "-"
               }}
             </div>
@@ -352,20 +469,30 @@ onMounted(() => {
           <div class="row">
             <div class="col-5 text-grey-6 text-weight-medium">จังหวัด</div>
             <div class="col-7">
-              {{ formData.currentProvince ? formData.currentProvince : "-" }}
+              {{
+                formData.currentProvince
+                  ? convertProvinceName(formData.currentProvince)
+                  : "-"
+              }}
             </div>
           </div>
           <div class="row">
             <div class="col-5 text-grey-6 text-weight-medium">เขต / อำเภอ</div>
             <div class="col-7">
-              {{ formData.currentDistrict ? formData.currentDistrict : "-" }}
+              {{
+                formData.currentDistrict
+                  ? convertDistrictName(formData.currentDistrict, "2")
+                  : "-"
+              }}
             </div>
           </div>
           <div class="row">
             <div class="col-5 text-grey-6 text-weight-medium">แขวง / ตำบล</div>
             <div class="col-7">
               {{
-                formData.currentSubDistrict ? formData.currentSubDistrict : "-"
+                formData.currentSubDistrict
+                  ? convertSubDistrictName(formData.currentSubDistrict, "2")
+                  : "-"
               }}
             </div>
           </div>