From ba9fea55153d9f59ec20dfc207d45cda5bfc0974 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Wed, 27 Mar 2024 18:32:03 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A=E0=B8=B5?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B4:=20=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=B9=E0=B8=A5=E0=B8=97=E0=B8=B5=E0=B9=88=E0=B8=AD=E0=B8=A2?=
 =?UTF-8?q?=E0=B8=B9=E0=B9=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/registry/api.registry.ts              |   7 +
 .../detail/PersonalInformation/03_Address.vue | 721 +++++++-----------
 .../interface/request/Address.ts              |  63 +-
 .../interface/response/Address.ts             |  27 +-
 src/modules/04_registryNew/stores/Address.ts  | 211 +++++
 5 files changed, 510 insertions(+), 519 deletions(-)
 create mode 100644 src/modules/04_registryNew/stores/Address.ts

diff --git a/src/api/registry/api.registry.ts b/src/api/registry/api.registry.ts
index 9a82231f3..b23bb1ee7 100644
--- a/src/api/registry/api.registry.ts
+++ b/src/api/registry/api.registry.ts
@@ -22,6 +22,13 @@ export default {
   profileNewProfileHisById: (dataId: string) =>
     `${registryNew}history/${dataId}`,
 
+  // ข้อมูลที่อยู่
+  profileNewAddressByProfileId: (profileId: string) =>
+    `${registryNew}address/${profileId}`,
+  profileNewAddressById: (dataId: string) => `${registryNew}address/${dataId}`,
+  profileNewAddressHisById: (dataId: string) =>
+    `${registryNew}address/history/${dataId}`,
+
   // บันทึกวันที่ไม่ได้รับเงินเดือนฯ
   profileNewNoPaid: `${registryNew}nopaid`,
   profileNewNoPaidByProfileId: (profileId: string) =>
diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/03_Address.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/03_Address.vue
index cc16c88a5..16593da7d 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/03_Address.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/03_Address.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { onMounted, ref, reactive, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useQuasar } from "quasar";
 import type { QTableProps } from "quasar";
@@ -9,45 +9,54 @@ import config from "@/app.config";
 import DialogHeader from "@/components/DialogHeader.vue";
 import HistoryTable from "@/components/TableHistory.vue";
 import { useCounterMixin } from "@/stores/mixin";
-import type {
-  DataOption,
-  AddressOps,
-  zipCodeOption,
-  Address,
-} from "@/modules/04_registryNew/interface/index/Main";
-import { defaultAddress } from "@/modules/04_registryNew/interface/index/Main";
+import { useAddressDataStore } from "@/modules/04_registryNew/stores/Address";
+
 import type { ResponseObject } from "@/modules/04_registryNew/interface/response/Address";
-import type { RequestItemsHistoryObject } from "@/modules/04_registryNew/interface/request/Address";
+import type { RequestObject } from "@/modules/04_registryNew/interface/request/Address";
 
 const $q = useQuasar();
+const store = useAddressDataStore();
 const mixin = useCounterMixin();
 const route = useRoute();
-const { date2Thai, success, messageError, showLoader, hideLoader } = mixin;
+const {
+  fetchProvince,
+  fetchDistrict,
+  fetchSubDistrict,
+  findData,
+  filterSelector,
+} = store;
+const {
+  date2Thai,
+  success,
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+} = mixin;
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
 
 const statusAdd = ref(false);
-const isLoad = ref<number>(0);
 const modal = ref<boolean>(false);
-const myForm = ref<any>();
-const rowsHistory = ref<RequestItemsHistoryObject[]>([]);
+const modalHistory = ref<boolean>(false);
+const rowsHistory = ref<ResponseObject[]>([]);
 const tittleHistory = ref<string>("ประวัติแก้ไขข้อมูลที่อยู่"); //
 const filterHistory = ref<string>("");
-const modalHistory = ref<boolean>(false);
-const addressData = ref<Address>(defaultAddress);
 
-// mock data
-const resultData = ref({
-  registrationAddress: "123123488",
-  registrationProvinceId: "24b22b3c-67aa-4631-bf7c-69ec6b735767",
-  registrationDistrictId: "ce9a2984-938f-454c-a758-26dcf8176afe",
-  registrationSubDistrictId: "97dba284-7cdc-45c6-863c-9590810fe8e2",
-  registrationZipCode: "50100",
+const id = ref<string>("");
+const sameAddress = ref<string>("0");
+const addressData = reactive<ResponseObject>(store.defaultAddress);
+const formData = reactive<RequestObject>(store.defaultAddressForm);
 
-  currentAddress: "66664444",
-  currentProvinceId: "24b22b3c-67aa-4631-bf7c-69ec6b735767",
-  currentDistrictId: "ce9a2984-938f-454c-a758-26dcf8176afe",
-  currentSubDistrictId: "97dba284-7cdc-45c6-863c-9590810fe8e2",
-  currentZipCode: "50100",
-  registrationSame: "0",
+const adsName = reactive({
+  regisP: "",
+  regisD: "",
+  regisSD: "",
+
+  currentP: "",
+  currentD: "",
+  currentSD: "",
 });
 
 const dataLabel = {
@@ -228,135 +237,21 @@ const columnsHistory = ref<QTableProps["columns"]>([
   },
 ]);
 
-const Ops = ref<AddressOps>({
-  provinceOps: [],
-  districtOps: [],
-  districtCOps: [],
-  subdistrictOps: [],
-  subdistrictCOps: [],
-});
-const OpsFilter = ref<AddressOps>({
-  provinceOps: [],
-  districtOps: [],
-  districtCOps: [],
-  subdistrictOps: [],
-  subdistrictCOps: [],
-});
-
-function defaultAdd() {
-  if (statusAdd) {
-    addressData.value = {
-      address: null,
-      provinceId: null,
-      districtId: null,
-      subdistrictId: null,
-      addressC: null,
-      provinceIdC: null,
-      districtIdC: null,
-      subdistrictIdC: null,
-      codep: null,
-      codec: null,
-      same: "0",
-    };
-  }
-}
-
-async function fetchData() {
-  // mock data
-  addressData.value.address = resultData.value.registrationAddress;
-  addressData.value.provinceId = resultData.value.registrationProvinceId;
-  addressData.value.districtId = resultData.value.registrationDistrictId;
-  addressData.value.subdistrictId = resultData.value.registrationSubDistrictId;
-  addressData.value.codep = resultData.value.registrationZipCode;
-
-  addressData.value.same = resultData.value.registrationSame;
-
-  addressData.value.addressC = resultData.value.currentAddress;
-  addressData.value.provinceIdC = resultData.value.currentProvinceId;
-  addressData.value.districtIdC = resultData.value.currentDistrictId;
-  addressData.value.subdistrictIdC = resultData.value.currentSubDistrictId;
-  addressData.value.codec = resultData.value.currentZipCode;
-  // if (route.params.id) {
-  //   // showLoader();
-  //   await http
-  //     .get(config.API.profileAdrsId(route.params.id.toString()))
-  //     .then((res) => {
-  //       const data: ResponseObject = res.data.result;
-  //       addressData.value.address = data.registrationAddress;
-  //       addressData.value.addressC = data.currentAddress;
-  //       addressData.value.districtId =
-  //         data.registrationDistrictId !== "00000000-0000-0000-0000-000000000000"
-  //           ? data.registrationDistrictId
-  //           : "";
-  //       addressData.value.districtIdC =
-  //         data.currentDistrictId !== "00000000-0000-0000-0000-000000000000"
-  //           ? data.currentDistrictId
-  //           : "";
-  //       addressData.value.provinceId =
-  //         data.registrationProvinceId !== "00000000-0000-0000-0000-000000000000"
-  //           ? data.registrationProvinceId
-  //           : "";
-  //       addressData.value.provinceIdC =
-  //         data.currentProvinceId !== "00000000-0000-0000-0000-000000000000"
-  //           ? data.currentProvinceId
-  //           : "";
-  //       addressData.value.subdistrictId =
-  //         data.registrationSubDistrictId !==
-  //         "00000000-0000-0000-0000-000000000000"
-  //           ? data.registrationSubDistrictId
-  //           : "";
-  //       addressData.value.subdistrictIdC =
-  //         data.currentSubDistrictId !== "00000000-0000-0000-0000-000000000000"
-  //           ? data.currentSubDistrictId
-  //           : "";
-  //       addressData.value.same = data.registrationSame ? "1" : "0";
-  //       addressData.value.codec = data.currentZipCode;
-  //       addressData.value.codep = data.registrationZipCode;
-  //     })
-  //     .catch((e) => {
-  //       messageError($q, e);
-  //     })
-  //     .finally(() => {
-  //       // hideLoader();
-  //       isLoad.value++;
-  //     });
-  // }
-}
-
-async function fetchProvince() {
+async function getData() {
   showLoader();
   await http
-    .get(config.API.province)
-    .then(async (res) => {
-      const data = res.data.result;
-      let option: DataOption[] = [];
-      data.map((r: any) => {
-        option.push({ id: r.id.toString(), name: r.name.toString() });
-      });
-      Ops.value.provinceOps = option;
-      OpsFilter.value.provinceOps = option;
+    .get(config.API.profileNewAddressByProfileId(profileId.value))
+    .then((res) => {
+      Object.assign(addressData, res.data.result);
 
-      const checkRegistProvinceId = await option.find(
-        (e: any) => e.id === addressData.value.provinceId
-      );
-      if (checkRegistProvinceId) {
-        addressData.value = addressData.value;
-      } else {
-        addressData.value.provinceId = "";
-        addressData.value.districtId = "";
-        addressData.value.subdistrictId = "";
-        addressData.value.codep = "";
-      }
-      const checkCurrentProvinceId = await option.find(
-        (e: any) => e.id === addressData.value.provinceIdC
-      );
-      if (checkCurrentProvinceId) {
-        addressData.value = addressData.value;
-      } else {
-        addressData.value.provinceIdC = "";
-        addressData.value.districtIdC = "";
-        addressData.value.subdistrictIdC = "";
-        addressData.value.codec = "";
+      if (addressData) {
+        id.value = addressData.id;
+        if (
+          addressData.currentAddress === addressData.registrationAddress &&
+          addressData.currentZipCode === addressData.registrationZipCode
+        ) {
+          sameAddress.value = "1";
+        }
       }
     })
     .catch((e) => {
@@ -364,132 +259,89 @@ async function fetchProvince() {
     })
     .finally(() => {
       hideLoader();
-      isLoad.value++;
     });
 }
 
-async function fetchDistrict(id: string | null, position: string) {
-  if (id != null && id != "") {
-    showLoader();
-    await http
-      .get(config.API.listDistrict(id))
-      .then(async (res) => {
-        const data = res.data.result;
-        let option: DataOption[] = [];
-        data.map((r: any) => {
-          option.push({ id: r.id.toString(), name: r.name.toString() });
-        });
-        if (position == "1") {
-          Ops.value.districtOps = option;
-          OpsFilter.value.districtOps = option;
-
-          const checkRegistDistrictId = await option.find(
-            (e: any) => e.id === addressData.value.districtId
-          );
-          if (checkRegistDistrictId) {
-            addressData.value.districtId = addressData.value.districtId;
-            addressData.value.subdistrictId = addressData.value.subdistrictId;
-            addressData.value.codep = addressData.value.codep;
-          } else {
-            addressData.value.districtId = "";
-            addressData.value.subdistrictId = "";
-            addressData.value.codep = "";
-          }
-        } else {
-          Ops.value.districtCOps = option;
-          OpsFilter.value.districtCOps = option;
-
-          const checkCurrentDistrictIdC = await option.find(
-            (e: any) => e.id === addressData.value.districtIdC
-          );
-          if (checkCurrentDistrictIdC) {
-            addressData.value.districtIdC = addressData.value.districtIdC;
-            addressData.value.subdistrictIdC = addressData.value.subdistrictIdC;
-            addressData.value.codec = addressData.value.codec;
-          } else {
-            addressData.value.districtIdC = "";
-            addressData.value.subdistrictIdC = "";
-            addressData.value.codec = "";
-          }
-        }
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        hideLoader();
-        isLoad.value++;
-      });
-  } else isLoad.value++;
+async function getProvince() {
+  await fetchProvince();
+  const checkRegistProvinceId = await store.Ops.provinceOps.find(
+    (e: any) => e.id === addressData.registrationProvinceId
+  );
+  if (!checkRegistProvinceId) {
+    addressData.registrationProvinceId = "";
+    addressData.registrationDistrictId = "";
+    addressData.registrationSubDistrictId = "";
+    addressData.registrationZipCode = "";
+  }
+  const checkCurrentProvinceId = await store.Ops.provinceOps.find(
+    (e: any) => e.id === addressData.currentProvinceId
+  );
+  if (!checkCurrentProvinceId) {
+    addressData.currentProvinceId = "";
+    addressData.currentDistrictId = "";
+    addressData.currentSubDistrictId = "";
+    addressData.currentZipCode = "";
+  }
 }
 
-async function fetchSubDistrict(id: string | null, position: string) {
-  if (id != null && id != "") {
-    showLoader();
-    await http
-      .get(config.API.listSubDistrict(id))
-      .then(async (res) => {
-        const data = res.data.result;
-        let option: zipCodeOption[] = [];
-        data.map((r: any) => {
-          option.push({
-            id: r.id.toString(),
-            name: r.name.toString(),
-            zipCode: r.zipCode.toString(),
-          });
-        });
-        if (position == "1") {
-          Ops.value.subdistrictOps = option;
-          OpsFilter.value.subdistrictOps = option;
+async function getDistrict(id: string | null, position: string) {
+  if (!id) return;
+  await fetchDistrict(id, position);
 
-          const checkRegistSubdistrictId = await option.find(
-            (e: any) => e.id === addressData.value.subdistrictId
-          );
-          if (checkRegistSubdistrictId) {
-            addressData.value.subdistrictId = addressData.value.subdistrictId;
-            addressData.value.codep = addressData.value.codep;
-          } else {
-            addressData.value.subdistrictId = "";
-            addressData.value.codep = "";
-          }
-        } else {
-          Ops.value.subdistrictCOps = option;
-          OpsFilter.value.subdistrictCOps = option;
+  if (position == "1") {
+    const checkRegistDistrictId = await store.Ops.districtOps.find(
+      (e: any) => e.id === addressData.registrationDistrictId
+    );
+    if (!checkRegistDistrictId) {
+      addressData.registrationDistrictId = "";
+      addressData.registrationSubDistrictId = "";
+      addressData.registrationZipCode = "";
+    }
+  } else {
+    const checkCurrentDistrictIdC = await store.Ops.districtCOps.find(
+      (e: any) => e.id === addressData.currentDistrictId
+    );
+    if (!checkCurrentDistrictIdC) {
+      addressData.currentDistrictId = "";
+      addressData.currentSubDistrictId = "";
+      addressData.currentZipCode = "";
+    }
+  }
+}
 
-          const checkCurrentSubdistrictIdC = await option.find(
-            (e: any) => e.id === addressData.value.subdistrictIdC
-          );
-          if (checkCurrentSubdistrictIdC) {
-            addressData.value.subdistrictIdC = addressData.value.subdistrictIdC;
-            addressData.value.codec = addressData.value.codec;
-          } else {
-            addressData.value.subdistrictIdC = "";
-            addressData.value.codec = "";
-          }
-        }
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        hideLoader();
-        isLoad.value++;
-      });
-  } else isLoad.value++;
+async function getSubDistrict(id: string | null, position: string) {
+  if (!id) return;
+  await fetchSubDistrict(id, position);
+  if (position == "1") {
+    const checkRegistSubdistrictId = await store.Ops.subdistrictOps.find(
+      (e: any) => e.id === addressData.registrationSubDistrictId
+    );
+    if (!checkRegistSubdistrictId) {
+      addressData.registrationSubDistrictId = "";
+      addressData.registrationZipCode = "";
+    }
+  } else {
+    const checkCurrentSubdistrictIdC = await store.Ops.subdistrictCOps.find(
+      (e: any) => e.id === addressData.currentSubDistrictId
+    );
+    if (!checkCurrentSubdistrictIdC) {
+      addressData.currentSubDistrictId = "";
+      addressData.currentZipCode = "";
+    }
+  }
 }
 
 async function selectProvince(e: string | null, name: string) {
   if (e != null) {
     if (name == "1") {
-      addressData.value.districtId = "";
-      addressData.value.subdistrictId = "";
-      addressData.value.codep = "";
+      formData.registrationDistrictId = "";
+      formData.registrationSubDistrictId = "";
+      formData.registrationZipCode = "";
     } else {
-      addressData.value.districtIdC = "";
-      addressData.value.subdistrictIdC = "";
-      addressData.value.codec = "";
+      formData.currentDistrictId = "";
+      formData.currentSubDistrictId = "";
+      formData.currentZipCode = "";
     }
-    myForm.value.resetValidation();
     await fetchDistrict(e, name);
   }
 }
@@ -497,13 +349,12 @@ async function selectProvince(e: string | null, name: string) {
 async function selectDistrict(e: string | null, name: string) {
   if (e != null) {
     if (name == "1") {
-      addressData.value.subdistrictId = "";
-      addressData.value.codep = "";
+      formData.registrationSubDistrictId = "";
+      formData.registrationZipCode = "";
     } else {
-      addressData.value.subdistrictIdC = "";
-      addressData.value.codec = "";
+      formData.currentSubDistrictId = "";
+      formData.currentZipCode = "";
     }
-    myForm.value.resetValidation();
     await fetchSubDistrict(e, name);
   }
 }
@@ -511,115 +362,131 @@ async function selectDistrict(e: string | null, name: string) {
 function selectSubDistrict(e: string | null, name: string) {
   if (e != null) {
     if (name == "1") {
-      const findcode = Ops.value.subdistrictOps.filter((r) => r.id == e);
+      const findcode = store.Ops.subdistrictOps.filter((r) => r.id == e);
       const namecode = findcode.length > 0 ? findcode[0].zipCode : "";
-      addressData.value.codep = namecode;
+      formData.registrationZipCode = namecode;
     } else {
-      const findcode = Ops.value.subdistrictCOps.filter((r) => r.id == e);
+      const findcode = store.Ops.subdistrictCOps.filter((r) => r.id == e);
       const namecode = findcode.length > 0 ? findcode[0].zipCode : "";
-      addressData.value.codec = namecode;
+      formData.currentZipCode = namecode;
     }
   }
 }
 
-async function getNewData() {
-  await fetchData();
-  await fetchProvince();
-  await fetchDistrict(addressData.value.provinceId, "1");
-  await fetchDistrict(addressData.value.provinceIdC, "2");
-  await fetchSubDistrict(addressData.value.districtId, "1");
-  await fetchSubDistrict(addressData.value.districtIdC, "2");
+async function fetchAll() {
+  await getData();
+  if (
+    store.Ops.provinceOps.length === 0 ||
+    store.Ops.districtOps.length === 0 ||
+    store.Ops.districtCOps.length === 0 ||
+    store.Ops.subdistrictOps.length === 0 ||
+    store.Ops.subdistrictCOps.length === 0
+  ) {
+    await getProvince();
+    await getDistrict(addressData.registrationProvinceId, "1");
+    await getDistrict(addressData.currentProvinceId, "2");
+    await getSubDistrict(addressData.registrationDistrictId, "1");
+    await getSubDistrict(addressData.currentDistrictId, "2");
+  }
+
+  adsName.regisP = findData(
+    store.Ops.provinceOps,
+    addressData.registrationProvinceId
+  ).name;
+  adsName.regisD = findData(
+    store.Ops.districtOps,
+    addressData.registrationDistrictId
+  ).name;
+  adsName.regisSD = findData(
+    store.Ops.subdistrictOps,
+    addressData.registrationSubDistrictId
+  ).name;
+
+  adsName.currentP = findData(
+    store.Ops.provinceOps,
+    addressData.currentProvinceId
+  ).name;
+  adsName.currentD = findData(
+    store.Ops.districtCOps,
+    addressData.currentDistrictId
+  ).name;
+  adsName.currentSD = findData(
+    store.Ops.subdistrictCOps,
+    addressData.currentSubDistrictId
+  ).name;
 }
 
-function filterSelector(val: any, update: Function, refData: string) {
-  switch (refData) {
-    case "provinceOps":
-      update(() => {
-        Ops.value.provinceOps = OpsFilter.value.provinceOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "districtOps":
-      update(() => {
-        Ops.value.districtOps = OpsFilter.value.districtOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "districtCOps":
-      update(() => {
-        Ops.value.districtCOps = OpsFilter.value.districtCOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "subdistrictOps":
-      update(() => {
-        Ops.value.subdistrictOps = OpsFilter.value.subdistrictOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "subdistrictCOps":
-      update(() => {
-        Ops.value.subdistrictCOps = OpsFilter.value.subdistrictCOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
+async function editData() {
+  showLoader();
+  await http
+    .patch(config.API.profileNewAddressById(id.value), {
+      ...formData,
+      id: undefined,
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      fetchAll();
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
 
-    default:
-      break;
-  }
+function onClickOpenDialog() {
+  if (!addressData) return;
+  modal.value = true;
+  Object.assign(formData, addressData);
 }
 
 async function clickHistory() {
   modalHistory.value = true;
-  // showLoader();
-  // await http
-  //   .get(config.API.profileAdrsHisId(route.params.id.toString()))
-  //   .then((res) => {
-  //     let data = res.data.result;
-  //     rowsHistory.value = [];
-  //     data.map((e: RequestItemsHistoryObject) => {
-  //       rowsHistory.value.push({
-  //         currentAddress: e.currentAddress ?? "-",
-  //         currentDistrict: e.currentDistrict ?? "-",
-  //         currentProvince: e.currentProvince ?? "-",
-  //         currentSubDistrict: e.currentSubDistrict ?? "-",
-  //         currentZipCode: e.currentZipCode ?? "-",
-  //         registrationSame: e.registrationSame,
-  //         registrationAddress: e.registrationAddress ?? "-",
-  //         registrationDistrict: e.registrationDistrict ?? "-",
-  //         registrationProvince: e.registrationProvince ?? "-",
-  //         registrationSubDistrict: e.registrationSubDistrict ?? "-",
-  //         registrationZipCode: e.registrationZipCode ?? "-",
-  //         createdFullName: e.createdFullName ?? "-",
-  //         createdAt: new Date(e.createdAt) ?? "-",
-  //       });
-  //     });
-  //   })
-  //   .catch((e) => {
-  //     messageError($q, e);
-  //   })
-  //   .finally(() => {
-  //     hideLoader();
-  //   });
+  await http
+    .get(config.API.profileNewAddressHisById(id.value))
+    .then((res) => {
+      rowsHistory.value = res.data.result;
+      console.log(rowsHistory.value);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 function onSubmit() {
-  myForm.value.validate().then(async (result: boolean) => {
-    if (result) {
-      // await saveData();
+  dialogConfirm(
+    $q,
+    async () => {
+      editData();
       modal.value = false;
-    }
-  });
+    },
+    "ยืนยันการบันทึกข้อมูล",
+    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+  );
 }
 
+watch(
+  () => sameAddress.value,
+  (v) => {
+    if (v === "1") {
+      formData.currentAddress = formData.registrationAddress;
+      formData.currentProvinceId = formData.registrationProvinceId;
+      formData.currentDistrictId = formData.registrationDistrictId;
+      formData.currentSubDistrictId = formData.registrationSubDistrictId;
+      formData.currentZipCode = formData.registrationZipCode;
+      store.Ops.districtCOps = store.Ops.districtOps
+      store.Ops.subdistrictCOps = store.Ops.subdistrictOps
+    }
+  }
+);
+
 onMounted(async () => {
-  defaultAdd();
-  await getNewData();
+  await fetchAll();
 });
 </script>
 <template>
@@ -630,7 +497,7 @@ onMounted(async () => {
         round
         icon="mdi-pencil-outline"
         color="primary"
-        @click="modal = true"
+        @click="onClickOpenDialog"
       >
         <q-tooltip>แก้ไขข้อมูล</q-tooltip>
       </q-btn>
@@ -644,7 +511,7 @@ onMounted(async () => {
     <div :class="$q.screen.gt.xs ? 'row' : 'column'">
       <!-- column 1 -->
       <div class="col-md-6 col-12 row">
-        <div class="col-5 text-grey-6 text-weight-medium">
+        <div class="col-6 text-grey-6 text-weight-medium">
           <div
             v-for="label in Object.keys(dataLabel).slice(0, 5)"
             class="q-py-xs"
@@ -653,58 +520,34 @@ onMounted(async () => {
           </div>
         </div>
         <!-- data -->
-        <div class="col-7">
+        <div class="col-6">
           <div class="q-py-xs">
-            {{ addressData.address }}
+            {{ addressData.registrationAddress || "-" }}
           </div>
           <div class="q-py-xs">
-            {{
-              addressData.provinceId
-                ? (
-                    Ops.provinceOps.find(
-                      (r) => r.id === addressData.provinceId
-                    ) || {}
-                  ).name
-                : "-"
-            }}
+            {{ adsName.regisP || "-" }}
           </div>
           <div class="q-py-xs">
-            {{
-              addressData.districtId
-                ? (
-                    Ops.districtOps.find(
-                      (r) => r.id === addressData.districtId
-                    ) || {}
-                  ).name
-                : "-"
-            }}
+            {{ adsName.regisD || "-" }}
           </div>
           <div class="q-py-xs">
-            {{
-              addressData.subdistrictId
-                ? (
-                    Ops.subdistrictOps.find(
-                      (r) => r.id === addressData.subdistrictId
-                    ) || {}
-                  ).name
-                : "-"
-            }}
+            {{ adsName.regisSD || "-" }}
           </div>
           <div class="q-py-xs">
-            {{ addressData.codep }}
+            {{ addressData.registrationZipCode || "-" }}
           </div>
         </div>
       </div>
 
       <!-- column 2 -->
-      <div
+      <!-- <div
         class="text-grey-6 text-weight-medium"
         v-if="addressData.same === '1'"
       >
         ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน
-      </div>
-      <div class="col-md-6 col-12 row" v-else>
-        <div class="col-5 text-grey-6 text-weight-medium">
+      </div> -->
+      <div class="col-md-6 col-12 row">
+        <div class="col-6 text-grey-6 text-weight-medium">
           <div
             v-for="label in Object.keys(dataLabel).slice(5, 10)"
             class="q-py-xs"
@@ -713,45 +556,21 @@ onMounted(async () => {
           </div>
         </div>
         <!-- data -->
-        <div class="col-7">
+        <div class="col-6">
           <div class="q-py-xs">
-            {{ addressData.addressC }}
+            {{ addressData.currentAddress || "-" }}
           </div>
           <div class="q-py-xs">
-            {{
-              addressData.provinceIdC
-                ? (
-                    Ops.provinceOps.find(
-                      (r) => r.id === addressData.provinceIdC
-                    ) || {}
-                  ).name
-                : "-"
-            }}
+            {{ adsName.currentP || "-" }}
           </div>
           <div class="q-py-xs">
-            {{
-              addressData.districtIdC
-                ? (
-                    Ops.districtCOps.find(
-                      (r) => r.id === addressData.districtIdC
-                    ) || {}
-                  ).name
-                : "-"
-            }}
+            {{ adsName.currentD || "-" }}
           </div>
           <div class="q-py-xs">
-            {{
-              addressData.subdistrictIdC
-                ? (
-                    Ops.subdistrictCOps.find(
-                      (r) => r.id === addressData.subdistrictIdC
-                    ) || {}
-                  ).name
-                : "-"
-            }}
+            {{ adsName.currentSD || "-" }}
           </div>
           <div class="q-py-xs">
-            {{ addressData.codec }}
+            {{ addressData.currentZipCode || "-" }}
           </div>
         </div>
       </div>
@@ -761,7 +580,7 @@ onMounted(async () => {
   <!-- Edit Dialog -->
   <q-dialog v-model="modal" persistent>
     <q-card style="width: 600px">
-      <q-form ref="myForm" @submit="onSubmit">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
         <DialogHeader
           tittle="แก้ไขข้อมูลที่อยู่"
           :close="() => (modal = false)"
@@ -776,7 +595,8 @@ onMounted(async () => {
               lazy-rules
               hide-bottom-space
               type="textarea"
-              v-model="addressData.address"
+              class="inputgreen"
+              v-model="formData.registrationAddress"
               :label="dataLabel.registrationAddress"
               :rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ตามทะเบียนบ้าน'}`]"
             />
@@ -794,8 +614,9 @@ onMounted(async () => {
                 option-value="id"
                 option-label="name"
                 input-debounce="0"
-                v-model="addressData.provinceId"
-                :options="Ops.provinceOps"
+                class="inputgreen"
+                v-model="formData.registrationProvinceId"
+                :options="store.Ops.provinceOps"
                 :label="dataLabel.registrationProvince"
                 :rules="[(val:string) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
                 @update:model-value="(value:string) => selectProvince(value, '1')"
@@ -816,8 +637,9 @@ onMounted(async () => {
                 option-value="id"
                 option-label="name"
                 input-debounce="0"
-                v-model="addressData.districtId"
-                :options="Ops.districtOps"
+                class="inputgreen"
+                v-model="formData.registrationDistrictId"
+                :options="store.Ops.districtOps"
                 :label="dataLabel.registrationDistrict"
                 :rules="[(val:string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
                 @update:model-value="(value:string) => selectDistrict(value, '1')"
@@ -838,8 +660,9 @@ onMounted(async () => {
                 option-value="id"
                 option-label="name"
                 input-debounce="0"
-                v-model="addressData.subdistrictId"
-                :options="Ops.subdistrictOps"
+                class="inputgreen"
+                v-model="formData.registrationSubDistrictId"
+                :options="store.Ops.subdistrictOps"
                 :label="dataLabel.registrationSubDistrict"
                 :rules="[(val:string) => !!val || `${'กรุณาเลือก แขวง / ตำบล'}`]"
                 @update:model-value="(value:string) => selectSubDistrict(value, '1')"
@@ -855,7 +678,8 @@ onMounted(async () => {
                 outlined
                 lazy-rules
                 hide-bottom-space
-                v-model="addressData.codep"
+                class="inputgreen"
+                v-model="formData.registrationZipCode"
                 :label="dataLabel.registrationZipCode"
               />
             </div>
@@ -870,7 +694,8 @@ onMounted(async () => {
               val="1"
               label="ใช่"
               checked-icon="task_alt"
-              v-model="addressData.same"
+              class="inputgreen"
+              v-model="sameAddress"
               unchecked-icon="panorama_fish_eye"
             />
             <q-radio
@@ -878,12 +703,13 @@ onMounted(async () => {
               val="0"
               label="ไม่"
               checked-icon="task_alt"
-              v-model="addressData.same"
+              class="inputgreen"
+              v-model="sameAddress"
               unchecked-icon="panorama_fish_eye"
             />
           </div>
           <!-- current address -->
-          <div v-if="addressData.same === '0'">
+          <div v-if="sameAddress === '0'">
             <div class="col-12 q-pb-xs">
               <q-input
                 dense
@@ -891,7 +717,8 @@ onMounted(async () => {
                 lazy-rules
                 hide-bottom-space
                 type="textarea"
-                v-model="addressData.addressC"
+                class="inputgreen"
+                v-model="formData.currentAddress"
                 :label="dataLabel.currentAddress"
                 :rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ปัจจุบัน'}`]"
               />
@@ -909,8 +736,9 @@ onMounted(async () => {
                   option-value="id"
                   option-label="name"
                   input-debounce="0"
-                  v-model="addressData.provinceIdC"
-                  :options="Ops.provinceOps"
+                  class="inputgreen"
+                  v-model="formData.currentProvinceId"
+                  :options="store.Ops.provinceOps"
                   :label="dataLabel.currentProvince"
                   :rules="[(val:string) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
                   @update:model-value="(value:string) => selectProvince(value, '2')"
@@ -931,8 +759,9 @@ onMounted(async () => {
                   option-value="id"
                   option-label="name"
                   input-debounce="0"
-                  v-model="addressData.districtIdC"
-                  :options="Ops.districtCOps"
+                  class="inputgreen"
+                  v-model="formData.currentDistrictId"
+                  :options="store.Ops.districtCOps"
                   :label="dataLabel.currentDistrict"
                   :rules="[(val:string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
                   @update:model-value="(value:string) => selectDistrict(value, '2')"
@@ -953,8 +782,9 @@ onMounted(async () => {
                   option-value="id"
                   option-label="name"
                   input-debounce="0"
-                  v-model="addressData.subdistrictIdC"
-                  :options="Ops.subdistrictCOps"
+                  class="inputgreen"
+                  v-model="formData.currentSubDistrictId"
+                  :options="store.Ops.subdistrictCOps"
                   :label="dataLabel.currentSubDistrict"
                   :rules="[(val:string) => !!val || `${'กรุณาเลือก แขวง / ตำบล'}`]"
                   @update:model-value="(value:string) => selectSubDistrict(value, '2')"
@@ -970,7 +800,8 @@ onMounted(async () => {
                   outlined
                   lazy-rules
                   hide-bottom-space
-                  v-model="addressData.codec"
+                  class="inputgreen"
+                  v-model="formData.currentZipCode"
                   :label="dataLabel.registrationZipCode"
                 />
               </div>
diff --git a/src/modules/04_registryNew/interface/request/Address.ts b/src/modules/04_registryNew/interface/request/Address.ts
index f8cff7753..208a47369 100644
--- a/src/modules/04_registryNew/interface/request/Address.ts
+++ b/src/modules/04_registryNew/interface/request/Address.ts
@@ -1,55 +1,16 @@
-interface DataProps {
-  row: RequestItemsObject;
-  rowIndex: number;
-}
-
-//ข้อมูล
-interface RequestItemsObject {
-  currentAddress: String | null;
-  currentDistrictId: String | null;
-  currentProvinceId: String | null;
-  currentSubDistrictId: String | null;
-  currentZipCode: String | null;
-  registrationAddress: String | null;
-  registrationDistrictId: String | null;
-  registrationProvinceId: String | null;
-  registrationSame: Boolean | null;
-  registrationSubDistrictId: String | null;
-  registrationZipCode: String | null;
-}
-
-interface RequestItemsHistoryObject {
-  currentAddress: String | null;
-  currentDistrict: String | null;
-  currentProvince: String | null;
-  currentSubDistrict: String | null;
-  currentZipCode: String | null;
-  registrationAddress: String | null;
-  registrationDistrict: String | null;
-  registrationProvince: String | null;
-  registrationSame: Boolean | null;
-  registrationSubDistrict: String | null;
-  registrationZipCode: String | null;
-  createdFullName: String | null;
-  createdAt: Date;
-}
-
-//columns
-interface Columns {
-  [index: number]: {
-    name: String;
-    align: String;
-    label: String;
-    sortable: Boolean;
-    field: String;
-    headerStyle: String;
-    style: String;
-  };
+interface RequestObject {
+  currentZipCode: string | null;
+  currentSubDistrictId: string | null;
+  currentDistrictId: string | null;
+  currentProvinceId: string | null;
+  currentAddress: string | null;
+  registrationZipCode: string | null;
+  registrationSubDistrictId: string | null;
+  registrationDistrictId: string | null;
+  registrationProvinceId: string | null;
+  registrationAddress: string | null;
 }
 
 export type {
-  RequestItemsObject,
-  Columns,
-  DataProps,
-  RequestItemsHistoryObject,
+  RequestObject,
 };
diff --git a/src/modules/04_registryNew/interface/response/Address.ts b/src/modules/04_registryNew/interface/response/Address.ts
index 8769bd1b4..c446955fa 100644
--- a/src/modules/04_registryNew/interface/response/Address.ts
+++ b/src/modules/04_registryNew/interface/response/Address.ts
@@ -1,34 +1,15 @@
-//ข้อมูล
 interface ResponseObject {
-  currentAddress: string | null;
-  currentDistrictId: string | null;
-  currentProvinceId: string | null;
-  currentSubDistrictId: string | null;
-  currentZipCode: string | null;
+  id: string;
   registrationAddress: string | null;
-  registrationDistrictId: string | null;
   registrationProvinceId: string | null;
-  registrationSame: Boolean | null;
+  registrationDistrictId: string | null;
   registrationSubDistrictId: string | null;
   registrationZipCode: string | null;
-  createdFullName: string | null;
-  createdAt: Date;
-}
-
-interface ResponseHistory {
   currentAddress: string | null;
-  currentDistrictId: string | null;
   currentProvinceId: string | null;
+  currentDistrictId: string | null;
   currentSubDistrictId: string | null;
   currentZipCode: string | null;
-  registrationAddress: string | null;
-  registrationDistrictId: string | null;
-  registrationProvinceId: string | null;
-  registrationSame: string | null;
-  registrationSubDistrictId: string | null;
-  registrationZipCode: string | null;
-  createdFullName: string | null;
-  createdAt: Date;
 }
 
-export type { ResponseObject, ResponseHistory };
+export type { ResponseObject };
diff --git a/src/modules/04_registryNew/stores/Address.ts b/src/modules/04_registryNew/stores/Address.ts
new file mode 100644
index 000000000..ac72fe4c5
--- /dev/null
+++ b/src/modules/04_registryNew/stores/Address.ts
@@ -0,0 +1,211 @@
+import { ref } from "vue";
+import { defineStore } from "pinia";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type { RequestObject } from "@/modules/04_registryNew/interface/request/Address";
+import type { ResponseObject } from "@/modules/04_registryNew/interface/response/Address";
+import type {
+  DataOption,
+  AddressOps,
+  zipCodeOption,
+  Address,
+} from "@/modules/04_registryNew/interface/index/Main";
+
+export const useAddressDataStore = defineStore("addess", () => {
+  const $q = useQuasar();
+  const mixin = useCounterMixin();
+  const {
+    showLoader,
+    hideLoader,
+    date2Thai,
+    messageError,
+    convertDate,
+    dateToISO,
+  } = mixin;
+
+  const Ops = ref<AddressOps>({
+    provinceOps: [],
+    districtOps: [],
+    districtCOps: [],
+    subdistrictOps: [],
+    subdistrictCOps: [],
+  });
+  const OpsFilter = ref<AddressOps>({
+    provinceOps: [],
+    districtOps: [],
+    districtCOps: [],
+    subdistrictOps: [],
+    subdistrictCOps: [],
+  });
+
+  const defaultAddress: ResponseObject = {
+    id: "",
+    currentZipCode: "",
+    currentSubDistrictId: "",
+    currentDistrictId: "",
+    currentProvinceId: "",
+    currentAddress: "",
+    registrationZipCode: "",
+    registrationSubDistrictId: "",
+    registrationDistrictId: "",
+    registrationProvinceId: "",
+    registrationAddress: "",
+  };
+
+  const defaultAddressForm: RequestObject = {
+    currentZipCode: "",
+    currentSubDistrictId: "",
+    currentDistrictId: "",
+    currentProvinceId: "",
+    currentAddress: "",
+    registrationZipCode: "",
+    registrationSubDistrictId: "",
+    registrationDistrictId: "",
+    registrationProvinceId: "",
+    registrationAddress: "",
+  };
+
+  function findData(ops: any, id: string | null) {
+    if(id === null) return "";
+    return ops.find((r: { id: string }) => r.id === id) || {};
+  }
+
+  async function fetchProvince() {
+    showLoader();
+    await http
+      .get(config.API.province)
+      .then(async (res) => {
+        const data = res.data.result;
+        let option: DataOption[] = [];
+        data.map((r: any) => {
+          option.push({ id: r.id.toString(), name: r.name.toString() });
+        });
+        Ops.value.provinceOps = option;
+        OpsFilter.value.provinceOps = option;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
+
+  async function fetchDistrict(id: string, position: string) {
+    if (!id) return;
+    showLoader();
+    await http
+      .get(config.API.listDistrict(id))
+      .then(async (res) => {
+        const data = res.data.result;
+        let option: DataOption[] = [];
+        data.map((r: any) => {
+          option.push({ id: r.id.toString(), name: r.name.toString() });
+        });
+        if (position == "1") {
+          Ops.value.districtOps = option;
+          OpsFilter.value.districtOps = option;
+        } else {
+          Ops.value.districtCOps = option;
+          OpsFilter.value.districtCOps = option;
+        }
+        return option;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
+
+  async function fetchSubDistrict(id: string | null, position: string) {
+    if (!id) return;
+    showLoader();
+    await http
+      .get(config.API.listSubDistrict(id))
+      .then(async (res) => {
+        const data = res.data.result;
+        let option: zipCodeOption[] = [];
+        data.map((r: any) => {
+          option.push({
+            id: r.id.toString(),
+            name: r.name.toString(),
+            zipCode: r.zipCode.toString(),
+          });
+        });
+        if (position == "1") {
+          Ops.value.subdistrictOps = option;
+          OpsFilter.value.subdistrictOps = option;
+        } else {
+          Ops.value.subdistrictCOps = option;
+          OpsFilter.value.subdistrictCOps = option;
+        }
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
+
+  function filterSelector(val: any, update: Function, refData: string) {
+    switch (refData) {
+      case "provinceOps":
+        update(() => {
+          Ops.value.provinceOps = OpsFilter.value.provinceOps.filter(
+            (v: DataOption) => v.name.indexOf(val) > -1
+          );
+        });
+        break;
+      case "districtOps":
+        update(() => {
+          Ops.value.districtOps = OpsFilter.value.districtOps.filter(
+            (v: DataOption) => v.name.indexOf(val) > -1
+          );
+        });
+        break;
+      case "districtCOps":
+        update(() => {
+          Ops.value.districtCOps = OpsFilter.value.districtCOps.filter(
+            (v: DataOption) => v.name.indexOf(val) > -1
+          );
+        });
+        break;
+      case "subdistrictOps":
+        update(() => {
+          Ops.value.subdistrictOps = OpsFilter.value.subdistrictOps.filter(
+            (v: DataOption) => v.name.indexOf(val) > -1
+          );
+        });
+        break;
+      case "subdistrictCOps":
+        update(() => {
+          Ops.value.subdistrictCOps = OpsFilter.value.subdistrictCOps.filter(
+            (v: DataOption) => v.name.indexOf(val) > -1
+          );
+        });
+        break;
+
+      default:
+        break;
+    }
+  }
+
+  return {
+    defaultAddress,
+    defaultAddressForm,
+    Ops,
+    OpsFilter,
+
+    findData,
+    fetchProvince,
+    fetchDistrict,
+    fetchSubDistrict,
+    filterSelector,
+  };
+});