Merge branch 'phatt_dev' into develop

src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue

@@ -6,22 +6,16 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 import { useCounterMixin } from "@/stores/mixin";
-import { useProfileDataStore } from "@/modules/04_registry/store";
-import type { InformationOps } from "@/modules/04_registry/interface/index/Main";
-import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
-import type {
-  RequestItemsHistoryObject,
-  Columns,
-} from "@/modules/04_registry/interface/request/Information";
-import type {
-  Information,
-  DataOption,
-} from "@/modules/04_registry/components/profileType";
 import HistoryTable from "@/components/TableHistory.vue";
+import DialogHeader from "@/components/DialogHeader.vue";
+import type {
+  InformationOps,
+  DataOption,
+} from "@/modules/04_registryNew/interface/index/Main";
+import type { RequestItemsHistoryObject } from "@/modules/04_registryNew/interface/request/Information";
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const profileStore = useProfileDataStore();
 const { showLoader, hideLoader, date2Thai, messageError } = mixin;
 
 const modal = ref<boolean>(false);
@@ -366,7 +360,6 @@ async function fetchPerson() {
     .catch((e: any) => {})
     .finally(() => {
       // hideLoader();
-      profileStore.isLoad++;
     });
 }
 
@@ -478,7 +471,6 @@ function onSubmit() {
   myForm.value.validate().then(async (result: boolean) => {
     if (result) {
       // await saveData();
-      console.log("Hello");
       modal.value = false;
     }
   });
@@ -490,8 +482,6 @@ onMounted(async () => {
 </script>
 <template>
   <div class="row q-gutter-sm items-center">
-    <div class="toptitle col text-dark">ประวัติส่วนตัว</div>
-
     <div class="toptitle col text-right">
       <q-btn
         flat
@@ -510,8 +500,8 @@ onMounted(async () => {
 
   <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-7 col-12 row">
-        <!-- column 1 -->
         <div class="col-md-4 col-5 text-grey-6 text-weight-medium">
           <div
             v-for="label in Object.keys(dataLabel).slice(0, 6)"
@@ -552,6 +542,7 @@ onMounted(async () => {
           </div>
         </div>
       </div>
+
       <!-- column 2 -->
       <div class="col-md-5 col-12 row">
         <div class="col-md-4 col-5 col text-grey-6 text-weight-medium">
@@ -704,7 +695,7 @@ onMounted(async () => {
                       (val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`,
                     ]"
                   >
-                    <template v-slot:append>
+                    <template v-slot:prepend>
                       <q-icon
                         name="event"
                         class="cursor-pointer"
@@ -843,13 +834,15 @@ onMounted(async () => {
         <q-separator />
         <div class="text-right q-pa-sm">
           <q-btn
-            flat
-            round
+            dense
+            unelevated
+            label="บันทึก"
+            id="onSubmit"
             type="submit"
-            icon="mdi-content-save-outline"
-            color="secondary"
+            color="public"
+            class="q-px-md"
           >
-            <q-tooltip>บันทึก</q-tooltip>
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
           </q-btn>
         </div>
       </q-form>
@@ -858,13 +851,13 @@ onMounted(async () => {
 
   <history-table
     :rows="rowsHistory"
-    :columns="columnsHistory"
     :filter="filterHistory"
+    :columns="columnsHistory"
     :visible-columns="visibleColumnsHistory"
     v-model:modal="modalHistory"
+    v-model:tittle="tittleHistory"
     v-model:inputfilter="filterHistory"
     v-model:inputvisible="visibleColumnsHistory"
-    v-model:tittle="tittleHistory"
   >
     <template #columns="props">
       <q-tr :props="props">

src/modules/04_registryNew/components/detail/PersonalInformation/02_NameChangeHistory.vue

@@ -7,13 +7,10 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 import { useCounterMixin } from "@/stores/mixin";
-import type { Pagination } from "@/modules/04_registry/interface/index/Main";
 import HistoryTable from "@/components/TableHistory.vue";
 import type { ResponseObject } from "@/components/information/interface/response/OldName";
-import type {
-  RequestItemsObject,
-  DataProps,
-} from "@/components/information/interface/request/OldName";
+import type { Pagination } from "@/modules/04_registryNew/interface/index/Main";
+import type { RequestItemsObject } from "@/components/information/interface/request/OldName";
 
 const $q = useQuasar();
 const route = useRoute();
@@ -278,9 +275,7 @@ onMounted(async () => {
 });
 </script>
 <template>
-  <div class="row q-gutter-sm items-center">
-    <div class="toptitle col text-dark">ประวัติการเปลี่ยนชื่อ-นามสกุล</div>
-
+  <div class="row justify-end items-center">
     <div class="toptitle row">
       <q-input
         dense
@@ -290,7 +285,7 @@ onMounted(async () => {
         ref="filterRef"
         v-model="filterSearch"
         placeholder="ค้นหา"
-        style="max-width: 150px"
+        style="max-width: 200px"
       >
         <template v-slot:append>
           <q-icon name="search" v-if="filterSearch == ''" />

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 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 type { ResponseObject } from "@/modules/04_registryNew/interface/response/Address";
+import type { RequestItemsHistoryObject } from "@/modules/04_registryNew/interface/request/Address";
+
+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>

src/modules/04_registryNew/interface/index/Main.ts

@@ -11,4 +11,65 @@ interface DataOption2 {
   name: string;
 }
 
-export type { Pagination, DataOption, DataOption2 };
+interface zipCodeOption {
+  id: string;
+  name: string;
+  zipCode: string;
+}
+
+interface InformationOps {
+  prefixOps: DataOption[];
+  prefixOldOps: DataOption[];
+  genderOps: DataOption[];
+  bloodOps: DataOption[];
+  statusOps: DataOption[];
+  religionOps: DataOption[];
+  employeeClassOps: DataOption[];
+  employeeTypeOps: DataOption[];
+}
+
+interface AddressOps {
+  provinceOps: DataOption[];
+  districtOps: DataOption[];
+  districtCOps: DataOption[];
+  subdistrictOps: zipCodeOption[];
+  subdistrictCOps: zipCodeOption[];
+}
+
+interface Address {
+  address: string | null;
+  provinceId: string | null;
+  districtId: string | null;
+  subdistrictId: string | null;
+  addressC: string | null;
+  provinceIdC: string | null;
+  districtIdC: string | null;
+  subdistrictIdC: string | null;
+  same: string | null;
+  codec: string | null;
+  codep: string | null;
+}
+
+const defaultAddress: Address = {
+  address: null,
+  provinceId: null,
+  districtId: null,
+  subdistrictId: null,
+  addressC: null,
+  provinceIdC: null,
+  districtIdC: null,
+  subdistrictIdC: null,
+  codec: null,
+  codep: null,
+  same: "0",
+};
+export { defaultAddress };
+export type {
+  Pagination,
+  DataOption,
+  DataOption2,
+  zipCodeOption,
+  InformationOps,
+  AddressOps,
+  Address,
+};

src/modules/04_registryNew/interface/request/Address.ts

@@ -0,0 +1,55 @@
+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;
+  };
+}
+
+export type {
+  RequestItemsObject,
+  Columns,
+  DataProps,
+  RequestItemsHistoryObject,
+};

src/modules/04_registryNew/interface/request/Information.ts

@@ -0,0 +1,59 @@
+interface DataProps {
+  row: RequestItemsObject;
+  rowIndex: number;
+}
+
+//ข้อมูล
+interface RequestItemsObject {
+  birthDate: Date | null;
+  bloodGroupId: string | null;
+  citizenId: string | null;
+  firstName: string | null;
+  genderId: string | null;
+  lastName: string | null;
+  nationality: string | null;
+  prefixId: string | null;
+  race: string | null;
+  relationshipId: string | null;
+  religionId: string | null;
+  telephoneNumber: string | null;
+  employeeType: string | null;
+  employeeClass: string | null;
+}
+
+interface RequestItemsHistoryObject {
+  citizenId: string | null;
+  prefix: string | null;
+  firstName: string | null;
+  lastName: string | null;
+  birthDate: Date;
+  gender: string | null;
+  relationship: string | null;
+  bloodGroup: string | null;
+  nationality: string | null;
+  race: string | null;
+  religion: string | null;
+  telephoneNumber: string | null;
+  createdFullName: string | null;
+  createdAt: Date;
+  employeeType: string | null;
+  employeeClass: string | null;
+}
+
+//columns
+interface Columns {
+  name: String;
+  align: String;
+  label: String;
+  sortable: Boolean;
+  field: String;
+  headerStyle: String;
+  style: String;
+}
+
+export type {
+  RequestItemsObject,
+  Columns,
+  DataProps,
+  RequestItemsHistoryObject,
+};

src/modules/04_registryNew/interface/response/Address.ts

@@ -0,0 +1,34 @@
+//ข้อมูล
+interface ResponseObject {
+  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;
+  createdFullName: string | null;
+  createdAt: Date;
+}
+
+interface ResponseHistory {
+  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: string | null;
+  registrationSubDistrictId: string | null;
+  registrationZipCode: string | null;
+  createdFullName: string | null;
+  createdAt: Date;
+}
+
+export type { ResponseObject, ResponseHistory };