From 7251cdc021a9e4ca102cdbcf52fa4c6d10adc7d7 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Tue, 12 Mar 2024 18:10:35 +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=97=E0=B8=B5=E0=B9=88=E0=B8=AD=E0=B8=A2=E0=B8=B9?=
 =?UTF-8?q?=E0=B9=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/PersonalInformation/03_Address.vue | 964 +++++++++++++++++-
 1 file changed, 962 insertions(+), 2 deletions(-)

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 2bb5eb5c5..02a43a18d 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/03_Address.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/03_Address.vue
@@ -1,6 +1,966 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { useRoute } from "vue-router";
+import { useQuasar } from "quasar";
+import type { QTableProps } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+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 DialogHeader from "@/modules/04_registryNew/components/DialogHeader.vue";
+import type { ResponseObject } from "@/modules/04_registryNew/interface/response/Address";
+import type { RequestItemsHistoryObject } from "@/modules/04_registryNew/interface/request/Address";
+import HistoryTable from "@/components/TableHistory.vue";
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const route = useRoute();
+const { date2Thai, success, messageError, showLoader, hideLoader } = mixin;
+
+const statusAdd = ref(false);
+const isLoad = ref<number>(0);
+const modal = ref<boolean>(false);
+const myForm = ref<any>();
+const rowsHistory = ref<RequestItemsHistoryObject[]>([]);
+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",
+
+  currentAddress: "66664444",
+  currentProvinceId: "24b22b3c-67aa-4631-bf7c-69ec6b735767",
+  currentDistrictId: "ce9a2984-938f-454c-a758-26dcf8176afe",
+  currentSubDistrictId: "97dba284-7cdc-45c6-863c-9590810fe8e2",
+  currentZipCode: "50100",
+  registrationSame: "1",
+});
+
+const dataLabel = {
+  registrationAddress: "ที่อยู่ตามทะเบียนบ้าน",
+  registrationProvince: "จังหวัด",
+  registrationDistrict: "เขต / อำเภอ",
+  registrationSubDistrict: "แขวง / ตำบล",
+  registrationZipCode: "รหัสไปรษณีย์",
+
+  currentAddress: "ที่อยู่ปัจจุบัน",
+  currentProvince: "จังหวัด",
+  currentDistrict: "เขต / อำเภอ",
+  currentSubDistrict: "แขวง / ตำบล",
+  currentZipCode: "รหัสไปรษณีย์",
+
+  registrationSame: "ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน",
+};
+
+const visibleColumnsHistory = ref<String[]>([
+  "currentAddress",
+  "currentDistrict",
+  "currentProvince",
+  "currentSubDistrict",
+  "currentZipCode",
+  "registrationAddress",
+  "registrationDistrict",
+  "registrationProvince",
+  "registrationSame",
+  "registrationSubDistrict",
+  "registrationZipCode",
+  "createdFullName",
+  "createdAt",
+]);
+
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "registrationAddress",
+    align: "left",
+    label: "ที่อยู่ตามทะเบียนบ้าน",
+    sortable: true,
+    field: "registrationAddress",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "registrationProvince",
+    align: "left",
+    label: "จังหวัดตามทะเบียนบ้าน",
+    sortable: true,
+    field: "registrationProvince",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "registrationDistrict",
+    align: "left",
+    label: "เขต/อำเภอตามทะเบียนบ้าน",
+    sortable: true,
+    field: "registrationDistrict",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "registrationSubDistrict",
+    align: "left",
+    label: "แขวง/ตำบลตามทะเบียนบ้าน",
+    sortable: true,
+    field: "registrationSubDistrict",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "registrationZipCode",
+    align: "left",
+    label: "รหัสไปรษณีย์ตามทะเบียนบ้าน",
+    sortable: true,
+    field: "registrationZipCode",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "registrationSame",
+    align: "left",
+    label: "ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน",
+    sortable: true,
+    field: "registrationSame",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "currentAddress",
+    align: "left",
+    label: "ที่อยู่ปัจจุบัน",
+    sortable: true,
+    field: "currentAddress",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "currentProvince",
+    align: "left",
+    label: "จังหวัดปัจจุบัน",
+    sortable: true,
+    field: "currentProvince",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "currentDistrict",
+    align: "left",
+    label: "เขต/อำเภอปัจจุบัน",
+    sortable: true,
+    field: "currentDistrict",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "currentSubDistrict",
+    align: "left",
+    label: "แขวง/ตำบลปัจจุบัน",
+    sortable: true,
+    field: "currentSubDistrict",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "currentZipCode",
+    align: "left",
+    label: "รหัสไปรษณีย์ปัจจุบัน",
+    sortable: true,
+    field: "currentZipCode",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+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() {
+  // 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() {
+  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;
+
+      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 = "";
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .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 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;
+
+          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;
+
+          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 getNewData() {
+  await fetchData();
+  await fetchProvince();
+  await fetchDistrict(resultData.value.registrationProvinceId, "1");
+  await fetchDistrict(resultData.value.currentProvinceId, "2");
+  await fetchSubDistrict(resultData.value.registrationDistrictId, "1");
+  await fetchSubDistrict(resultData.value.currentDistrictId, "2");
+}
+
+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;
+  }
+}
+
+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();
+  //   });
+}
+
+function onSubmit() {
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      // await saveData();
+      console.log("Hello");
+      modal.value = false;
+    }
+  });
+}
+
+onMounted(async () => {
+  await getNewData();
+  defaultAdd();
+});
+</script>
 <template>
-  <div>3</div>
+  <div class="row q-gutter-sm items-center">
+    <div class="toptitle col text-right">
+      <q-btn
+        flat
+        round
+        icon="mdi-pencil-outline"
+        color="primary"
+        @click="modal = true"
+      >
+        <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+      </q-btn>
+      <q-btn flat round icon="mdi-history" color="info" @click="clickHistory">
+        <q-tooltip>ประวัติข้อมูลที่อยู่</q-tooltip>
+      </q-btn>
+    </div>
+  </div>
+
+  <q-card bordered class="my-card bg-grey-1 q-pa-md">
+    <div :class="$q.screen.gt.xs ? 'row' : 'column'">
+      <!-- column 1 -->
+      <div class="col-md-6 col-12 row">
+        <div class="col-4 text-grey-6 text-weight-medium">
+          <div
+            v-for="label in Object.keys(dataLabel).slice(0, 5)"
+            class="q-py-xs"
+          >
+            {{ dataLabel[label as keyof typeof dataLabel] }}
+          </div>
+        </div>
+        <!-- data -->
+        <div class="col-8">
+          <div class="q-py-xs">
+            {{ resultData.registrationAddress }}
+          </div>
+          <div class="q-py-xs">
+            {{
+              resultData.registrationProvinceId
+                ? (
+                    Ops.provinceOps.find(
+                      (r) => r.id === resultData.registrationProvinceId
+                    ) || {}
+                  ).name
+                : "-"
+            }}
+          </div>
+          <div class="q-py-xs">
+            {{
+              resultData.registrationDistrictId
+                ? (
+                    Ops.districtOps.find(
+                      (r) => r.id === resultData.registrationDistrictId
+                    ) || {}
+                  ).name
+                : "-"
+            }}
+          </div>
+          <div class="q-py-xs">
+            {{
+              resultData.registrationSubDistrictId
+                ? (
+                    Ops.subdistrictOps.find(
+                      (r) => r.id === resultData.registrationSubDistrictId
+                    ) || {}
+                  ).name
+                : "-"
+            }}
+          </div>
+          <div class="q-py-xs">
+            {{ resultData.registrationZipCode }}
+          </div>
+        </div>
+      </div>
+
+      <!-- column 2 -->
+      <div
+        class="text-grey-6 text-weight-medium"
+        v-if="resultData.registrationSame === '1'"
+      >
+        ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน
+      </div>
+      <div class="col-md-6 col-12 row" v-else>
+        <div class="col-4 text-grey-6 text-weight-medium">
+          <div
+            v-for="label in Object.keys(dataLabel).slice(5, 10)"
+            class="q-py-xs"
+          >
+            {{ dataLabel[label as keyof typeof dataLabel] }}
+          </div>
+        </div>
+        <!-- data -->
+        <div class="col-8">
+          <div class="q-py-xs">
+            {{ resultData.currentAddress }}
+          </div>
+          <div class="q-py-xs">
+            {{
+              resultData.currentProvinceId
+                ? (
+                    Ops.provinceOps.find(
+                      (r) => r.id === resultData.currentProvinceId
+                    ) || {}
+                  ).name
+                : "-"
+            }}
+          </div>
+          <div class="q-py-xs">
+            {{
+              resultData.currentDistrictId
+                ? (
+                    Ops.districtOps.find(
+                      (r) => r.id === resultData.currentDistrictId
+                    ) || {}
+                  ).name
+                : "-"
+            }}
+          </div>
+          <div class="q-py-xs">
+            {{
+              resultData.currentSubDistrictId
+                ? (
+                    Ops.subdistrictOps.find(
+                      (r) => r.id === resultData.currentSubDistrictId
+                    ) || {}
+                  ).name
+                : "-"
+            }}
+          </div>
+          <div class="q-py-xs">
+            {{ resultData.registrationZipCode }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </q-card>
+
+  <!-- Edit Dialog -->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm" @submit="onSubmit">
+        <DialogHeader
+          tittle="แก้ไขข้อมูลที่อยู่"
+          :close="() => (modal = false)"
+        />
+        <q-separator />
+        <!-- regis address -->
+        <q-card-section class="q-p-sm">
+          <div class="col-12 q-pb-xs">
+            <q-input
+              dense
+              outlined
+              lazy-rules
+              hide-bottom-space
+              type="textarea"
+              v-model="resultData.registrationAddress"
+              :label="dataLabel.registrationAddress"
+              :rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ตามทะเบียนบ้าน'}`]"
+            />
+          </div>
+          <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <selector
+                dense
+                outlined
+                use-input
+                lazy-rules
+                emit-value
+                map-options
+                hide-bottom-space
+                option-value="id"
+                option-label="name"
+                input-debounce="0"
+                v-model="resultData.registrationProvinceId"
+                :options="Ops.provinceOps"
+                :label="dataLabel.registrationProvince"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
+                @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'provinceOps'
+                      ) "
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <selector
+                dense
+                outlined
+                use-input
+                lazy-rules
+                emit-value
+                map-options
+                hide-bottom-space
+                option-value="id"
+                option-label="name"
+                input-debounce="0"
+                v-model="resultData.registrationDistrictId"
+                :options="Ops.districtOps"
+                :label="dataLabel.registrationDistrict"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
+                @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'districtOps'
+                      ) "
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <selector
+                dense
+                outlined
+                use-input
+                lazy-rules
+                emit-value
+                map-options
+                hide-bottom-space
+                option-value="id"
+                option-label="name"
+                input-debounce="0"
+                v-model="resultData.registrationSubDistrictId"
+                :options="Ops.subdistrictOps"
+                :label="dataLabel.registrationSubDistrict"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
+                @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'subdistrictOps'
+                      ) "
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                readonly
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="resultData.registrationZipCode"
+                :label="dataLabel.registrationZipCode"
+              />
+            </div>
+          </div>
+          <!-- same address ? -->
+          <div class="col-xs-12 q-gutter-sm items-center flex q-my-sm">
+            <label class="text-medium"
+              >ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน</label
+            >
+            <q-radio
+              v-model="resultData.registrationSame"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="1"
+              label="ใช่"
+              dense
+            />
+            <q-radio
+              v-model="resultData.registrationSame"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="0"
+              label="ไม่"
+              dense
+            />
+          </div>
+          <!-- current address -->
+          <div v-if="resultData.registrationSame === '0'">
+            <div class="col-12 q-pb-xs">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                type="textarea"
+                v-model="resultData.currentAddress"
+                :label="dataLabel.currentAddress"
+                :rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ปัจจุบัน'}`]"
+              />
+            </div>
+            <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
+              <div class="col-xs-6 col-sm-6 col-md-6">
+                <selector
+                  dense
+                  outlined
+                  use-input
+                  lazy-rules
+                  emit-value
+                  map-options
+                  hide-bottom-space
+                  option-value="id"
+                  option-label="name"
+                  input-debounce="0"
+                  v-model="resultData.currentProvinceId"
+                  :options="Ops.provinceOps"
+                  :label="dataLabel.currentProvince"
+                  :rules="[(val:string) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
+                  @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'provinceOps'
+                      ) "
+                />
+              </div>
+              <div class="col-xs-6 col-sm-6 col-md-6">
+                <selector
+                  dense
+                  outlined
+                  use-input
+                  lazy-rules
+                  emit-value
+                  map-options
+                  hide-bottom-space
+                  option-value="id"
+                  option-label="name"
+                  input-debounce="0"
+                  v-model="resultData.currentDistrictId"
+                  :options="Ops.districtOps"
+                  :label="dataLabel.currentDistrict"
+                  :rules="[(val:string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
+                  @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'districtOps'
+                      ) "
+                />
+              </div>
+              <div class="col-xs-6 col-sm-6 col-md-6">
+                <selector
+                  dense
+                  outlined
+                  use-input
+                  lazy-rules
+                  emit-value
+                  map-options
+                  hide-bottom-space
+                  option-value="id"
+                  option-label="name"
+                  input-debounce="0"
+                  v-model="resultData.currentSubDistrictId"
+                  :options="Ops.subdistrictOps"
+                  :label="dataLabel.currentSubDistrict"
+                  :rules="[(val:string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
+                  @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'subdistrictOps'
+                      ) "
+                />
+              </div>
+              <div class="col-xs-6 col-sm-6 col-md-6">
+                <q-input
+                  dense
+                  readonly
+                  outlined
+                  lazy-rules
+                  hide-bottom-space
+                  v-model="resultData.registrationZipCode"
+                  :label="dataLabel.registrationZipCode"
+                />
+              </div>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <div class="text-right q-pa-sm">
+          <q-btn
+            id="onSubmit"
+            type="submit"
+            dense
+            unelevated
+            label="บันทึก"
+            color="public"
+            class="q-px-md"
+          >
+            <q-tooltip>บันทึก</q-tooltip>
+          </q-btn>
+        </div>
+      </q-form>
+    </q-card>
+  </q-dialog>
+
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div v-if="col.name == 'createdAt'" class="table_ellipsis">
+            {{ date2Thai(col.value) }}
+          </div>
+          <div
+            v-else-if="col.name == 'registrationSame'"
+            class="table_ellipsis"
+          >
+            {{ col.value ? "ใช่" : "ไม่" }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
 </template>
 
 <style scoped></style>