Merge branch 'phatt_dev' into develop

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

@@ -10,14 +10,17 @@ import HistoryTable from "@/components/TableHistory.vue";
 import DialogHeader from "@/components/DialogHeader.vue";
 import type {
   InformationOps,
+  Information,
   DataOption,
 } from "@/modules/04_registryNew/interface/index/Main";
+import { defaultInformation } from "@/modules/04_registryNew/interface/index/Main";
 import type { RequestItemsHistoryObject } from "@/modules/04_registryNew/interface/request/Information";
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const { showLoader, hideLoader, date2Thai, messageError } = mixin;
 
+const informaData = ref<Information>(defaultInformation);
 const modal = ref<boolean>(false);
 const myForm = ref<any>();
 const rowsHistory = ref<RequestItemsHistoryObject[]>([]);
@@ -300,6 +303,26 @@ const visibleColumnsHistory = ref<String[]>([
   "createdAt",
 ]);
 
+async function fetchData() {
+  informaData.value.cardid = resultData.value.citizenId;
+  informaData.value.prefixId = resultData.value.prefixId;
+  informaData.value.prefix = resultData.value.prefix;
+  informaData.value.firstname = resultData.value.firstName;
+  informaData.value.lastname = resultData.value.lastName;
+  informaData.value.birthDate = resultData.value.birthDate;
+  informaData.value.age = resultData.value.age;
+  informaData.value.genderId = resultData.value.genderId;
+  informaData.value.bloodId = resultData.value.bloodGroupId;
+  informaData.value.nationality = resultData.value.nationality;
+  informaData.value.ethnicity = resultData.value.race;
+  informaData.value.statusId = resultData.value.relationshipId;
+  informaData.value.religionId = resultData.value.religionId;
+  informaData.value.tel = resultData.value.telephoneNumber;
+  informaData.value.employeeType = resultData.value.employeeType;
+  informaData.value.employeeClass = resultData.value.employeeClass;
+  informaData.value.profileType = resultData.value.profileType;
+}
+
 // get person detail list
 async function fetchPerson() {
   // showLoader();
@@ -478,6 +501,7 @@ function onSubmit() {
 
 onMounted(async () => {
   await fetchPerson();
+  await fetchData();
 });
 </script>
 <template>
@@ -513,29 +537,35 @@ onMounted(async () => {
         <!-- data -->
         <div class="col-md-8 col-7">
           <div class="q-py-xs">
-            {{ resultData.citizenId }}
+            {{ informaData.cardid }}
           </div>
           <div class="q-py-xs">
             {{
-              `${resultData.prefix} ${resultData.firstName} ${resultData.lastName}`
+              `${informaData.prefix} ${informaData.firstname} ${informaData.lastname}`
             }}
           </div>
           <div class="q-py-xs">
-            {{ date2Thai(resultData.birthDate) }}
+            {{ date2Thai(informaData.birthDate) }}
           </div>
           <div class="q-py-xs">
-            {{ resultData.age ? resultData.age : "-" }}
+            {{ informaData.age ? informaData.age : "-" }}
-          </div>
-          <div class="q-py-xs">
-            {{ resultData.gender ? resultData.gender : "-" }}
           </div>
           <div class="q-py-xs">
             {{
-              resultData.relationshipId
+              informaData.genderId
                 ? (
-                    Ops.statusOps.find(
+                    Ops.genderOps.find((r) => r.id === informaData.genderId) ||
-                      (r) => r.id === resultData.relationshipId
+                    {}
-                    ) || {}
+                  ).name
+                : "-"
+            }}
+          </div>
+          <div class="q-py-xs">
+            {{
+              informaData.statusId
+                ? (
+                    Ops.statusOps.find((r) => r.id === informaData.statusId) ||
+                    {}
                   ).name
                 : "-"
             }}
@@ -556,17 +586,17 @@ onMounted(async () => {
         <!-- data -->
         <div class="col-md-8 col-7">
           <div class="q-py-xs">
-            {{ resultData.nationality ? resultData.nationality : "-" }}
+            {{ informaData.nationality ? informaData.nationality : "-" }}
           </div>
           <div class="q-py-xs">
-            {{ resultData.race ? resultData.race : "-" }}
+            {{ informaData.ethnicity ? informaData.ethnicity : "-" }}
           </div>
           <div class="q-py-xs">
             {{
-              resultData.religionId
+              informaData.religionId
                 ? (
                     Ops.religionOps.find(
-                      (r) => r.id === resultData.religionId
+                      (r) => r.id === informaData.religionId
                     ) || {}
                   ).name
                 : "-"
@@ -574,17 +604,14 @@ onMounted(async () => {
           </div>
           <div class="q-py-xs">
             {{
-              resultData.bloodGroupId
+              informaData.bloodId
-                ? (
+                ? (Ops.bloodOps.find((b) => b.id === informaData.bloodId) || {})
-                    Ops.bloodOps.find(
+                    .name
-                      (b) => b.id === resultData.bloodGroupId
-                    ) || {}
-                  ).name
                 : "-"
             }}
           </div>
           <div class="q-py-xs">
-            {{ resultData.telephoneNumber ? resultData.telephoneNumber : "-" }}
+            {{ informaData.tel ? informaData.tel : "-" }}
           </div>
         </div>
       </div>
@@ -610,7 +637,7 @@ onMounted(async () => {
                 hide-bottom-space
                 maxlength="13"
                 mask="#############"
-                v-model="resultData.citizenId"
+                v-model="informaData.cardid"
                 :label="dataLabel.citizenId"
                 :rules="[
                 (val: string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
@@ -621,7 +648,7 @@ onMounted(async () => {
               />
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
-              <selector
+              <q-select
                 dense
                 outlined
                 use-input
@@ -632,7 +659,7 @@ onMounted(async () => {
                 option-value="id"
                 option-label="name"
                 input-debounce="0"
-                v-model="resultData.prefixId"
+                v-model="informaData.prefixId"
                 :options="Ops.prefixOps"
                 :label="dataLabel.prefix"
                 :rules="[(val: string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
@@ -647,7 +674,7 @@ onMounted(async () => {
                 outlined
                 lazy-rules
                 hide-bottom-space
-                v-model="resultData.firstName"
+                v-model="informaData.firstname"
                 :label="dataLabel.firstName"
                 :rules="[(val: string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
               />
@@ -658,7 +685,7 @@ onMounted(async () => {
                 outlined
                 lazy-rules
                 hide-bottom-space
-                v-model="resultData.lastName"
+                v-model="informaData.lastname"
                 :label="dataLabel.lastName"
                 :rules="[(val: string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
               />
@@ -669,7 +696,7 @@ onMounted(async () => {
                 borderless
                 week-start="0"
                 menu-class-name="modalfix"
-                v-model="resultData.birthDate"
+                v-model="informaData.birthDate"
                 :locale="'th'"
               >
                 <template #year="{ year }">
@@ -686,8 +713,8 @@ onMounted(async () => {
                     dense
                     hide-bottom-space
                     :model-value="
-                      resultData.birthDate != null
+                      informaData.birthDate != null
-                        ? date2Thai(resultData.birthDate)
+                        ? date2Thai(informaData.birthDate)
                         : null
                     "
                     :label="dataLabel.birthDate"
@@ -714,12 +741,12 @@ onMounted(async () => {
                 lazy-rules
                 hide-bottom-space
                 readonly
-                v-model="resultData.age"
+                v-model="informaData.age"
                 :label="dataLabel.age"
               />
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
-              <selector
+              <q-select
                 dense
                 outlined
                 use-input
@@ -730,7 +757,7 @@ onMounted(async () => {
                 option-value="id"
                 option-label="name"
                 input-debounce="0"
-                v-model="resultData.genderId"
+                v-model="informaData.genderId"
                 :options="Ops.genderOps"
                 :label="dataLabel.gender"
                 @filter="(inputValue: any,
@@ -739,7 +766,7 @@ onMounted(async () => {
               />
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
-              <selector
+              <q-select
                 dense
                 outlined
                 use-input
@@ -750,7 +777,7 @@ onMounted(async () => {
                 option-value="id"
                 option-label="name"
                 input-debounce="0"
-                v-model="resultData.relationshipId"
+                v-model="informaData.statusId"
                 :options="Ops.statusOps"
                 :label="dataLabel.relationship"
                 @filter="(inputValue: any,
@@ -764,7 +791,7 @@ onMounted(async () => {
                 outlined
                 lazy-rules
                 hide-bottom-space
-                v-model="resultData.nationality"
+                v-model="informaData.nationality"
                 :label="dataLabel.nationality"
               />
             </div>
@@ -774,12 +801,12 @@ onMounted(async () => {
                 outlined
                 lazy-rules
                 hide-bottom-space
-                v-model="resultData.race"
+                v-model="informaData.ethnicity"
                 :label="dataLabel.race"
               />
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
-              <selector
+              <q-select
                 dense
                 outlined
                 use-input
@@ -790,7 +817,7 @@ onMounted(async () => {
                 option-value="id"
                 option-label="name"
                 input-debounce="0"
-                v-model="resultData.religionId"
+                v-model="informaData.religionId"
                 :options="Ops.religionOps"
                 :label="dataLabel.religion"
                 @filter="(inputValue: any,
@@ -799,7 +826,7 @@ onMounted(async () => {
               />
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
-              <selector
+              <q-select
                 dense
                 outlined
                 use-input
@@ -810,7 +837,7 @@ onMounted(async () => {
                 option-value="id"
                 option-label="name"
                 input-debounce="0"
-                v-model="resultData.bloodGroupId"
+                v-model="informaData.bloodId"
                 :options="Ops.bloodOps"
                 :label="dataLabel.bloodGroup"
                 @filter="(inputValue: any,
@@ -825,7 +852,7 @@ onMounted(async () => {
                 lazy-rules
                 hide-bottom-space
                 mask="##########"
-                v-model="resultData.telephoneNumber"
+                v-model="informaData.tel"
                 :label="dataLabel.telephoneNumber"
               />
             </div>

src/modules/04_registryNew/components/detail/PersonalInformation/03_Address.vue

@@ -47,7 +47,7 @@ const resultData = ref({
   currentDistrictId: "ce9a2984-938f-454c-a758-26dcf8176afe",
   currentSubDistrictId: "97dba284-7cdc-45c6-863c-9590810fe8e2",
   currentZipCode: "50100",
-  registrationSame: "1",
+  registrationSame: "0",
 });
 
 const dataLabel = {
@@ -262,6 +262,20 @@ function defaultAdd() {
 }
 
 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
@@ -464,13 +478,57 @@ async function fetchSubDistrict(id: string | null, position: string) {
   } else isLoad.value++;
 }
 
+async function selectProvince(e: string | null, name: string) {
+  if (e != null) {
+    if (name == "1") {
+      addressData.value.districtId = "";
+      addressData.value.subdistrictId = "";
+      addressData.value.codep = "";
+    } else {
+      addressData.value.districtIdC = "";
+      addressData.value.subdistrictIdC = "";
+      addressData.value.codec = "";
+    }
+    myForm.value.resetValidation();
+    await fetchDistrict(e, name);
+  }
+};
+
+async function selectDistrict(e: string | null, name: string) {
+  if (e != null) {
+    if (name == "1") {
+      addressData.value.subdistrictId = "";
+      addressData.value.codep = "";
+    } else {
+      addressData.value.subdistrictIdC = "";
+      addressData.value.codec = "";
+    }
+    myForm.value.resetValidation();
+    await fetchSubDistrict(e, name);
+  }
+};
+
+function selectSubDistrict(e: string | null, name: string) {
+  if (e != null) {
+    if (name == "1") {
+      const findcode = Ops.value.subdistrictOps.filter((r) => r.id == e);
+      const namecode = findcode.length > 0 ? findcode[0].zipCode : "";
+      addressData.value.codep = namecode;
+    } else {
+      const findcode = Ops.value.subdistrictCOps.filter((r) => r.id == e);
+      const namecode = findcode.length > 0 ? findcode[0].zipCode : "";
+      addressData.value.codec = namecode;
+    }
+  }
+};
+
 async function getNewData() {
   await fetchData();
   await fetchProvince();
-  await fetchDistrict(resultData.value.registrationProvinceId, "1");
+  await fetchDistrict(addressData.value.provinceId, "1");
-  await fetchDistrict(resultData.value.currentProvinceId, "2");
+  await fetchDistrict(addressData.value.provinceIdC, "2");
-  await fetchSubDistrict(resultData.value.registrationDistrictId, "1");
+  await fetchSubDistrict(addressData.value.districtId, "1");
-  await fetchSubDistrict(resultData.value.currentDistrictId, "2");
+  await fetchSubDistrict(addressData.value.districtIdC, "2");
 }
 
 function filterSelector(val: any, update: Function, refData: string) {
@@ -554,15 +612,14 @@ function onSubmit() {
   myForm.value.validate().then(async (result: boolean) => {
     if (result) {
       // await saveData();
-      console.log("Hello");
       modal.value = false;
     }
   });
 }
 
 onMounted(async () => {
-  await getNewData();
   defaultAdd();
+  await getNewData();
 });
 </script>
 <template>
@@ -587,7 +644,7 @@ onMounted(async () => {
     <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 class="col-5 text-grey-6 text-weight-medium">
           <div
             v-for="label in Object.keys(dataLabel).slice(0, 5)"
             class="q-py-xs"
@@ -596,16 +653,16 @@ onMounted(async () => {
           </div>
         </div>
         <!-- data -->
-        <div class="col-8">
+        <div class="col-7">
           <div class="q-py-xs">
-            {{ resultData.registrationAddress }}
+            {{ addressData.address }}
           </div>
           <div class="q-py-xs">
             {{
-              resultData.registrationProvinceId
+              addressData.provinceId
                 ? (
                     Ops.provinceOps.find(
-                      (r) => r.id === resultData.registrationProvinceId
+                      (r) => r.id === addressData.provinceId
                     ) || {}
                   ).name
                 : "-"
@@ -613,10 +670,10 @@ onMounted(async () => {
           </div>
           <div class="q-py-xs">
             {{
-              resultData.registrationDistrictId
+              addressData.districtId
                 ? (
                     Ops.districtOps.find(
-                      (r) => r.id === resultData.registrationDistrictId
+                      (r) => r.id === addressData.districtId
                     ) || {}
                   ).name
                 : "-"
@@ -624,17 +681,17 @@ onMounted(async () => {
           </div>
           <div class="q-py-xs">
             {{
-              resultData.registrationSubDistrictId
+              addressData.subdistrictId
                 ? (
                     Ops.subdistrictOps.find(
-                      (r) => r.id === resultData.registrationSubDistrictId
+                      (r) => r.id === addressData.subdistrictId
                     ) || {}
                   ).name
                 : "-"
             }}
           </div>
           <div class="q-py-xs">
-            {{ resultData.registrationZipCode }}
+            {{ addressData.codep }}
           </div>
         </div>
       </div>
@@ -642,12 +699,12 @@ onMounted(async () => {
       <!-- column 2 -->
       <div
         class="text-grey-6 text-weight-medium"
-        v-if="resultData.registrationSame === '1'"
+        v-if="addressData.same === '1'"
       >
         ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน
       </div>
       <div class="col-md-6 col-12 row" v-else>
-        <div class="col-4 text-grey-6 text-weight-medium">
+        <div class="col-5 text-grey-6 text-weight-medium">
           <div
             v-for="label in Object.keys(dataLabel).slice(5, 10)"
             class="q-py-xs"
@@ -656,16 +713,16 @@ onMounted(async () => {
           </div>
         </div>
         <!-- data -->
-        <div class="col-8">
+        <div class="col-7">
           <div class="q-py-xs">
-            {{ resultData.currentAddress }}
+            {{ addressData.addressC }}
           </div>
           <div class="q-py-xs">
             {{
-              resultData.currentProvinceId
+              addressData.provinceIdC
                 ? (
                     Ops.provinceOps.find(
-                      (r) => r.id === resultData.currentProvinceId
+                      (r) => r.id === addressData.provinceIdC
                     ) || {}
                   ).name
                 : "-"
@@ -673,10 +730,10 @@ onMounted(async () => {
           </div>
           <div class="q-py-xs">
             {{
-              resultData.currentDistrictId
+              addressData.districtIdC
                 ? (
-                    Ops.districtOps.find(
+                    Ops.districtCOps.find(
-                      (r) => r.id === resultData.currentDistrictId
+                      (r) => r.id === addressData.districtIdC
                     ) || {}
                   ).name
                 : "-"
@@ -684,17 +741,17 @@ onMounted(async () => {
           </div>
           <div class="q-py-xs">
             {{
-              resultData.currentSubDistrictId
+              addressData.subdistrictIdC
                 ? (
-                    Ops.subdistrictOps.find(
+                    Ops.subdistrictCOps.find(
-                      (r) => r.id === resultData.currentSubDistrictId
+                      (r) => r.id === addressData.subdistrictIdC
                     ) || {}
                   ).name
                 : "-"
             }}
           </div>
           <div class="q-py-xs">
-            {{ resultData.registrationZipCode }}
+            {{ addressData.codec }}
           </div>
         </div>
       </div>
@@ -719,14 +776,14 @@ onMounted(async () => {
               lazy-rules
               hide-bottom-space
               type="textarea"
-              v-model="resultData.registrationAddress"
+              v-model="addressData.address"
               :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
+              <q-select
                 dense
                 outlined
                 use-input
@@ -737,17 +794,18 @@ onMounted(async () => {
                 option-value="id"
                 option-label="name"
                 input-debounce="0"
-                v-model="resultData.registrationProvinceId"
+                v-model="addressData.provinceId"
                 :options="Ops.provinceOps"
                 :label="dataLabel.registrationProvince"
                 :rules="[(val:string) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
+                @update:model-value="(value:string) => selectProvince(value, '1')"
                 @filter="(inputValue:string,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'provinceOps'
                       ) "
               />
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
-              <selector
+              <q-select
                 dense
                 outlined
                 use-input
@@ -758,17 +816,18 @@ onMounted(async () => {
                 option-value="id"
                 option-label="name"
                 input-debounce="0"
-                v-model="resultData.registrationDistrictId"
+                v-model="addressData.districtId"
                 :options="Ops.districtOps"
                 :label="dataLabel.registrationDistrict"
                 :rules="[(val:string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
+                @update:model-value="(value:string) => selectDistrict(value, '1')"
                 @filter="(inputValue:string,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'districtOps'
                       ) "
               />
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
-              <selector
+              <q-select
                 dense
                 outlined
                 use-input
@@ -779,10 +838,11 @@ onMounted(async () => {
                 option-value="id"
                 option-label="name"
                 input-debounce="0"
-                v-model="resultData.registrationSubDistrictId"
+                v-model="addressData.subdistrictId"
                 :options="Ops.subdistrictOps"
                 :label="dataLabel.registrationSubDistrict"
-                :rules="[(val:string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือก แขวง / ตำบล'}`]"
+                @update:model-value="(value:string) => selectSubDistrict(value, '1')"
                 @filter="(inputValue:string,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'subdistrictOps'
                       ) "
@@ -795,7 +855,7 @@ onMounted(async () => {
                 outlined
                 lazy-rules
                 hide-bottom-space
-                v-model="resultData.registrationZipCode"
+                v-model="addressData.codep"
                 :label="dataLabel.registrationZipCode"
               />
             </div>
@@ -806,24 +866,24 @@ onMounted(async () => {
               >ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน</label
             >
             <q-radio
-              v-model="resultData.registrationSame"
+              dense
-              checked-icon="task_alt"
-              unchecked-icon="panorama_fish_eye"
               val="1"
               label="ใช่"
-              dense
+              checked-icon="task_alt"
+              v-model="addressData.same"
+              unchecked-icon="panorama_fish_eye"
             />
             <q-radio
-              v-model="resultData.registrationSame"
+              dense
-              checked-icon="task_alt"
-              unchecked-icon="panorama_fish_eye"
               val="0"
               label="ไม่"
-              dense
+              checked-icon="task_alt"
+              v-model="addressData.same"
+              unchecked-icon="panorama_fish_eye"
             />
           </div>
           <!-- current address -->
-          <div v-if="resultData.registrationSame === '0'">
+          <div v-if="addressData.same === '0'">
             <div class="col-12 q-pb-xs">
               <q-input
                 dense
@@ -831,14 +891,14 @@ onMounted(async () => {
                 lazy-rules
                 hide-bottom-space
                 type="textarea"
-                v-model="resultData.currentAddress"
+                v-model="addressData.addressC"
                 :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
+                <q-select
                   dense
                   outlined
                   use-input
@@ -849,17 +909,18 @@ onMounted(async () => {
                   option-value="id"
                   option-label="name"
                   input-debounce="0"
-                  v-model="resultData.currentProvinceId"
+                  v-model="addressData.provinceIdC"
                   :options="Ops.provinceOps"
                   :label="dataLabel.currentProvince"
                   :rules="[(val:string) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
+                  @update:model-value="(value:string) => selectProvince(value, '2')"
                   @filter="(inputValue:string,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'provinceOps'
                       ) "
                 />
               </div>
               <div class="col-xs-6 col-sm-6 col-md-6">
-                <selector
+                <q-select
                   dense
                   outlined
                   use-input
@@ -870,17 +931,18 @@ onMounted(async () => {
                   option-value="id"
                   option-label="name"
                   input-debounce="0"
-                  v-model="resultData.currentDistrictId"
+                  v-model="addressData.districtIdC"
-                  :options="Ops.districtOps"
+                  :options="Ops.districtCOps"
                   :label="dataLabel.currentDistrict"
                   :rules="[(val:string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
+                  @update:model-value="(value:string) => selectDistrict(value, '2')"
                   @filter="(inputValue:string,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'districtOps'
                       ) "
                 />
               </div>
               <div class="col-xs-6 col-sm-6 col-md-6">
-                <selector
+                <q-select
                   dense
                   outlined
                   use-input
@@ -891,10 +953,11 @@ onMounted(async () => {
                   option-value="id"
                   option-label="name"
                   input-debounce="0"
-                  v-model="resultData.currentSubDistrictId"
+                  v-model="addressData.subdistrictIdC"
-                  :options="Ops.subdistrictOps"
+                  :options="Ops.subdistrictCOps"
                   :label="dataLabel.currentSubDistrict"
-                  :rules="[(val:string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
+                  :rules="[(val:string) => !!val || `${'กรุณาเลือก แขวง / ตำบล'}`]"
+                  @update:model-value="(value:string) => selectSubDistrict(value, '2')"
                   @filter="(inputValue:string,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'subdistrictOps'
                       ) "
@@ -907,7 +970,7 @@ onMounted(async () => {
                   outlined
                   lazy-rules
                   hide-bottom-space
-                  v-model="resultData.registrationZipCode"
+                  v-model="addressData.codec"
                   :label="dataLabel.registrationZipCode"
                 />
               </div>
@@ -917,10 +980,10 @@ onMounted(async () => {
         <q-separator />
         <div class="text-right q-pa-sm">
           <q-btn
-            id="onSubmit"
-            type="submit"
             dense
             unelevated
+            id="onSubmit"
+            type="submit"
             label="บันทึก"
             color="public"
             class="q-px-md"
@@ -933,14 +996,14 @@ onMounted(async () => {
   </q-dialog>
 
   <HistoryTable
-    :rows="rowsHistory"
-    :columns="columnsHistory"
-    :filter="filterHistory"
-    :visible-columns="visibleColumnsHistory"
     v-model:modal="modalHistory"
+    v-model:tittle="tittleHistory"
     v-model:inputfilter="filterHistory"
     v-model:inputvisible="visibleColumnsHistory"
-    v-model:tittle="tittleHistory"
+    :rows="rowsHistory"
+    :filter="filterHistory"
+    :columns="columnsHistory"
+    :visible-columns="visibleColumnsHistory"
   >
     <template #columns="props">
       <q-tr :props="props">

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

@@ -28,6 +28,26 @@ interface InformationOps {
   employeeTypeOps: DataOption[];
 }
 
+interface Information {
+  cardid: string | null;
+  prefix: string | null;
+  age: string | null;
+  prefixId: string | null;
+  firstname: string | null;
+  lastname: string | null;
+  birthDate: Date | null;
+  genderId: string | null;
+  bloodId: string | null;
+  nationality: string | null;
+  ethnicity: string | null;
+  statusId: string | null;
+  religionId: string | null;
+  tel: string | null;
+  employeeType: string | null;
+  employeeClass: string | null;
+  profileType: string | null;
+}
+
 interface AddressOps {
   provinceOps: DataOption[];
   districtOps: DataOption[];
@@ -50,6 +70,26 @@ interface Address {
   codep: string | null;
 }
 
+const defaultInformation: Information = {
+  cardid: null,
+  age: null,
+  prefix: null,
+  prefixId: null,
+  firstname: null,
+  lastname: null,
+  birthDate: null,
+  genderId: null,
+  bloodId: null,
+  nationality: null,
+  ethnicity: null,
+  statusId: null,
+  religionId: null,
+  tel: null,
+  employeeType: null,
+  employeeClass: null,
+  profileType: null,
+};
+
 const defaultAddress: Address = {
   address: null,
   provinceId: null,
@@ -63,13 +103,15 @@ const defaultAddress: Address = {
   codep: null,
   same: "0",
 };
-export { defaultAddress };
+
+export { defaultAddress, defaultInformation };
 export type {
   Pagination,
   DataOption,
   DataOption2,
   zipCodeOption,
   InformationOps,
+  Information,
   AddressOps,
   Address,
 };