From 79f08f75694aabe53a9923e42c1eb2843cd28f58 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Fri, 22 Mar 2024 19:20:35 +0700
Subject: [PATCH 1/3] =?UTF-8?q?=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=B5=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=95=E0=B8=B4:=20=E0=B8=9B=E0=B8=A3=E0=B8=B0?=
 =?UTF-8?q?=E0=B8=A7=E0=B8=B1=E0=B8=95=E0=B8=B4=E0=B8=AA=E0=B9=88=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=99=E0=B8=95=E0=B8=B1=E0=B8=A7=20(GET,=20PUT)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/registry/api.registry.ts              |  15 +
 .../detail/PersonalInformation/01_Profile.vue | 523 +++++-------------
 .../interface/request/Profile.ts              |  24 +
 .../interface/response/Profile.ts             | 108 ++++
 src/modules/04_registryNew/stores/profile.ts  | 193 ++++---
 5 files changed, 409 insertions(+), 454 deletions(-)
 create mode 100644 src/modules/04_registryNew/interface/request/Profile.ts
 create mode 100644 src/modules/04_registryNew/interface/response/Profile.ts

diff --git a/src/api/registry/api.registry.ts b/src/api/registry/api.registry.ts
index 8647a7385..b3c917ffd 100644
--- a/src/api/registry/api.registry.ts
+++ b/src/api/registry/api.registry.ts
@@ -1,11 +1,26 @@
 import env from "../index";
 
 const registryNew = `${env.API_URI}/org/profile/`;
+const metadata = `${env.API_URI}/org/metadata/`;
 
 export default {
   registryNew,
   registryNewByProfileId: (profileId: string) => `${registryNew}${profileId}`,
 
+  // metadata
+  profileNewGender: `${metadata}gender`,
+  profileNewReligion: `${metadata}religion`,
+  profileNewRelationship: `${metadata}relationship`,
+  profileNewBloodGroup: `${metadata}bloodGroup`,
+
+  // ประวัติส่วนตัว
+  profileNewProfileByProfileId: (profileId: string) =>
+  `${registryNew}${profileId}`,
+  profileNewProfileById: (dataId: string) =>
+  `${registryNew}${dataId}`,
+  profileNewProfileHisById: (dataId: string) =>
+  `${registryNew}history/${dataId}`,
+
   // บันทึกวันที่ไม่ได้รับเงินเดือนฯ
   profileNewNoPaid: `${registryNew}nopaid`,
   profileNewNoPaidByProfileId: (profileId: string) =>
diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue
index 18a575e3d..659d5180a 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { onMounted, watch, ref } from "vue";
+import { onMounted, watch, ref, reactive } from "vue";
+import { useRoute } from "vue-router";
 import { useQuasar } from "quasar";
 import type { QTableColumn, QForm } from "quasar";
 import http from "@/plugins/http";
@@ -9,18 +10,16 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useProfileDataStore } from "@/modules/04_registryNew/stores/profile";
 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 { RequestObject } from "@/modules/04_registryNew/interface/request/Profile";
+import type { ResponseObject } from "@/modules/04_registryNew/interface/response/Profile";
 import type { RequestItemsHistoryObject } from "@/modules/04_registryNew/interface/request/Information";
 
 const $q = useQuasar();
+const route = useRoute();
 const mixin = useCounterMixin();
-const profileStore = useProfileDataStore();
+const store = useProfileDataStore();
 const {
+  success,
   showLoader,
   hideLoader,
   date2Thai,
@@ -28,73 +27,45 @@ const {
   convertDate,
   dateToISO,
 } = mixin;
-const { changeRetireText, changeBirth } = profileStore;
+const { calculateAge, getGender, getRelationship, getReligion, getBloodGroup } =
+  store;
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
 
-const informaData = ref<Information>(defaultInformation);
 const modal = ref<boolean>(false);
 const myForm = ref<any>();
+const informaData = ref<ResponseObject>();
 const rowsHistory = ref<RequestItemsHistoryObject[]>([]);
 const tittleHistory = ref<string>("ประวัติแก้ไขข้อมูลส่วนตัว");
 const filterHistory = ref<string>("");
 const modalHistory = ref<boolean>(false);
 
-const Ops = ref<InformationOps>({
-  prefixOps: [],
-  prefixOldOps: [],
-  genderOps: [],
-  bloodOps: [],
-  statusOps: [],
-  religionOps: [],
-  employeeClassOps: [
-    { id: "perm", name: "ลูกจ้างประจำ" },
-    { id: "temp", name: "ลูกจ้างชั่วคราว" },
-  ],
-  employeeTypeOps: [
-    { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
-    { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
-  ],
-});
-
-const OpsFilter = ref<InformationOps>({
-  prefixOps: [],
-  prefixOldOps: [],
-  genderOps: [],
-  bloodOps: [],
-  statusOps: [],
-  religionOps: [],
-  employeeClassOps: [
-    { id: "perm", name: "ลูกจ้างประจำ" },
-    { id: "temp", name: "ลูกจ้างชั่วคราว" },
-  ],
-  employeeTypeOps: [
-    { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
-    { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
-  ],
-});
-
-// mock data
-const resultData = ref({
-  citizenId: "3101502080439",
-  prefixId: "71ed89df-8257-43e8-8fba-0b42fb2c55e0",
-  prefix: "นางสาว",
-  firstName: "อรัญญาสาร",
-  lastName: "พรไชยะสิทธฺ์",
-  birthDate: new Date("1968-11-24T00:00:00"),
-  age: "55 ปี 3 เดือน 16 วัน",
-  genderId: "e2693577-6633-499b-9f0a-fec0bff0be6b",
-  gender: "หญิง",
-  relationshipId: null,
-  bloodGroupId: null,
-  nationality: "ไทย",
-  race: "ไทย",
-  religionId: "ceaec498-71b4-4f82-b5a2-7d6ec988b753",
+const id = ref<string>("");
+const age = ref<string>("");
+// หลังบ้านไม่มีข้อมูล สัญชาติ
+const nationality = ref<string>("")
+const formData = reactive<RequestObject>({
+  citizenId: "",
+  prefix: "",
+  firstName: "",
+  lastName: "",
+  birthDate: null,
+  genderId: "",
+  relationshipId: "",
+  // nationality: "",
+  ethnicity: "",
+  religionId: "",
+  bloodGroupId: "",
+  phone: "",
+  posTypeId: "",
+  posLevelId: "",
   telephoneNumber: null,
-  profileType: "officer",
-  employeeType: null,
-  employeeClass: null,
-  changeName: true,
-  isVerified: true,
-  isSendVerified: false,
+  dateRetire: null,
+  isProbation: false,
+  keycloak: "",
+  email: null,
+  position: "",
 });
 
 const dataLabel = {
@@ -105,10 +76,10 @@ const dataLabel = {
   gender: "เพศ",
   relationship: "สถานภาพ",
   nationality: "สัญชาติ",
-  race: "เชื้อชาติ",
+  ethnicity: "เชื้อชาติ",
   religion: "ศาสนา",
   bloodGroup: "หมู่เลือด",
-  telephoneNumber: "เบอร์โทร",
+  phone: "เบอร์โทร",
 
   prefix: "คำนำหน้าชื่อ",
   firstName: "ชื่อ",
@@ -238,11 +209,11 @@ const columnsHistory = ref<QTableColumn[]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "telephoneNumber",
+    name: "phone",
     align: "left",
     label: "เบอร์โทร",
     sortable: true,
-    field: "telephoneNumber",
+    field: "phone",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -306,253 +277,89 @@ const visibleColumnsHistory = ref<String[]>([
   "nationality",
   "race",
   "religion",
-  "telephoneNumber",
+  "phone",
   "employeeType",
   "employeeClass",
   "createdFullName",
   "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();
+async function getData() {
+  showLoader();
   await http
-    .get(config.API.person)
+    .get(config.API.profileNewProfileByProfileId(profileId.value))
     .then((res) => {
-      const data = res.data.result;
-      let optionbloodGroups: DataOption[] = [];
-      data.bloodGroups.map((r: any) => {
-        optionbloodGroups.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      Ops.value.bloodOps = optionbloodGroups;
-      OpsFilter.value.bloodOps = optionbloodGroups;
-
-      let optiongenders: DataOption[] = [];
-      data.genders.map((r: any) => {
-        optiongenders.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      Ops.value.genderOps = optiongenders;
-      OpsFilter.value.genderOps = optiongenders;
-
-      let optionprefixs: DataOption[] = [];
-      data.prefixs.map((r: any) => {
-        optionprefixs.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      Ops.value.prefixOps = optionprefixs;
-      OpsFilter.value.prefixOps = optionprefixs;
-
-      let optionrelationships: DataOption[] = [];
-      data.relationships.map((r: any) => {
-        optionrelationships.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      Ops.value.statusOps = optionrelationships;
-      OpsFilter.value.statusOps = optionrelationships;
-
-      let optionreligions: DataOption[] = [];
-      data.religions.map((r: any) => {
-        optionreligions.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      Ops.value.religionOps = optionreligions;
-      OpsFilter.value.religionOps = optionreligions;
+      informaData.value = res.data.result;
+      if (informaData.value) {
+        age.value = calculateAge(informaData.value.birthDate);
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
     })
-    .catch((e: any) => {})
     .finally(() => {
-      // hideLoader();
+      hideLoader();
     });
 }
 
-function filterSelector(val: any, update: Function, refData: string) {
-  switch (refData) {
-    case "prefixOps":
-      update(() => {
-        Ops.value.prefixOps = OpsFilter.value.prefixOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "genderOps":
-      update(() => {
-        Ops.value.genderOps = OpsFilter.value.genderOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "bloodOps":
-      update(() => {
-        Ops.value.bloodOps = OpsFilter.value.bloodOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "statusOps":
-      update(() => {
-        Ops.value.statusOps = OpsFilter.value.statusOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "religionOps":
-      update(() => {
-        Ops.value.religionOps = OpsFilter.value.religionOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "employeeClassOps":
-      update(() => {
-        Ops.value.employeeClassOps = OpsFilter.value.employeeClassOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "employeeTypeOps":
-      update(() => {
-        Ops.value.employeeTypeOps = OpsFilter.value.employeeTypeOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
+function onClickOpenDialog() {
+  if (!informaData.value) return;
+  modal.value = true;
 
-    default:
-      break;
-  }
+  id.value = informaData.value.id;
+  age.value = calculateAge(informaData.value.birthDate);
+  formData.citizenId = informaData.value.citizenId;
+  formData.prefix = informaData.value.prefix;
+  formData.firstName = informaData.value.firstName;
+  formData.lastName = informaData.value.lastName;
+  formData.birthDate = informaData.value.birthDate;
+  formData.genderId = informaData.value.genderId;
+  formData.relationshipId = informaData.value.relationshipId;
+  // formData.nationality = informaData.value.nationality;
+  formData.ethnicity = informaData.value.ethnicity;
+  formData.religionId = informaData.value.religionId;
+  formData.bloodGroupId = informaData.value.bloodGroupId;
+  formData.phone = informaData.value.phone;
 }
 
-async function clickHistory() {
-  modalHistory.value = true;
-  // showLoader();
-  // await http
-  //   .get(config.API.profileInforHisId(route.params.id.toString()))
-  //   .then((res) => {
-  //     let data = res.data.result;
-  //     rowsHistory.value = [];
-  //     data.map((e: RequestItemsHistoryObject) => {
-  //       rowsHistory.value.push({
-  //         citizenId: e.citizenId,
-  //         prefix: e.prefix,
-  //         firstName: e.firstName,
-  //         lastName: e.lastName,
-  //         birthDate: new Date(e.birthDate),
-  //         gender: e.gender,
-  //         relationship: e.relationship,
-  //         bloodGroup: e.bloodGroup,
-  //         nationality: e.nationality,
-  //         race: e.race,
-  //         religion: e.religion,
-  //         telephoneNumber: e.telephoneNumber,
-  //         employeeType:
-  //           e.employeeType == "gov"
-  //             ? "งบประมาณเงินอุดหนุนรัฐบาล"
-  //             : e.employeeType == "bkk"
-  //             ? "งบประมาณกรุงเทพมหานคร"
-  //             : "-",
-  //         employeeClass:
-  //           e.employeeClass == "perm"
-  //             ? "ลูกจ้างประจำ"
-  //             : e.employeeClass == "temp"
-  //             ? "ลูกจ้างชั่วคราว"
-  //             : "-",
-  //         createdFullName: e.createdFullName,
-  //         createdAt: new Date(e.createdAt),
-  //       });
-  //     });
-  //   })
-  //   .catch((e) => {
-  //     messageError($q, e);
-  //   })
-  //   .finally(() => {
-  //     hideLoader();
-  //   });
-}
-
-async function calRetire(birth: Date) {
-  const body = {
-    birthDate: dateToISO(birth),
-  };
-  const dateBefore = ref<Date>(new Date());
-  if (dateToISO(dateBefore.value) != dateToISO(birth)) {
-    showLoader();
-    await http
-      .post(config.API.profileCalRetire, body)
-      .then((res: any) => {
-        const data = res.data.result;
-        informaData.value.age = data.age;
-        informaData.value.birthDate = birth;
-        changeRetireText(data.retireDate);
-        dateBefore.value = birth;
-      })
-      .catch((e: any) => {
-        messageError($q, e);
-        const retire = new Date(`${birth.getFullYear() + 60}-09-30`);
-        informaData.value.birthDate = dateBefore.value;
-        // inputBirthDate.value = dateBefore.value;
-        changeRetireText(date2Thai(retire));
-      })
-      .finally(() => {
-        hideLoader();
-      });
-  }
-}
-
-function onSubmit() {
-  myForm.value.validate().then(async (result: boolean) => {
-    if (result) {
-      // await saveData();
-      modal.value = false;
-    }
-  });
+async function editData() {
+  showLoader();
+  await http
+    .put(config.API.profileNewProfileById(id.value), {
+      ...formData,
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      getData(), (modal.value = false);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 watch(
-  () => informaData.value.birthDate,
-  (value) => {
-    // const dateVal = convertDate(value);
-    if (value) {
-      calRetire(value);
-    } else {
-      informaData.value.age = "";
+  () => formData.birthDate,
+  (v) => {
+    if (v) {
+      age.value = calculateAge(v);
     }
   }
 );
 
+function onSubmit() {
+  editData();
+  modal.value = false;
+}
+
 onMounted(async () => {
-  await fetchPerson();
-  await fetchData();
+  await getData();
+  store.genderOp.length === 0 ? await getGender() : "";
+  store.relationshipOp.length === 0 ? await getRelationship() : "";
+  store.religionOp.length === 0 ? await getReligion() : "";
+  store.bloodGroupOp.length === 0 ? await getBloodGroup() : "";
 });
 </script>
 <template>
@@ -563,18 +370,18 @@ onMounted(async () => {
         round
         icon="mdi-pencil-outline"
         color="primary"
-        @click="modal = true"
+        @click="onClickOpenDialog"
       >
         <q-tooltip>แก้ไขข้อมูล</q-tooltip>
       </q-btn>
-      <q-btn flat round icon="mdi-history" color="info" @click="clickHistory">
+      <q-btn flat round icon="mdi-history" color="info">
         <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'">
+    <div v-if="informaData" :class="$q.screen.gt.xs ? 'row' : 'column'">
       <!-- column 1 -->
       <div class="col-md-7 col-12 row">
         <div class="col-md-4 col-5 text-grey-6 text-weight-medium">
@@ -588,38 +395,24 @@ onMounted(async () => {
         <!-- data -->
         <div class="col-md-8 col-7">
           <div class="q-py-xs">
-            {{ informaData.cardid }}
+            {{ informaData.citizenId }}
           </div>
           <div class="q-py-xs">
             {{
-              `${informaData.prefix} ${informaData.firstname} ${informaData.lastname}`
+              `${informaData.prefix} ${informaData.firstName} ${informaData.lastName}`
             }}
           </div>
           <div class="q-py-xs">
             {{ date2Thai(informaData.birthDate) }}
           </div>
           <div class="q-py-xs">
-            {{ informaData.age ? informaData.age : "-" }}
+            {{ age ? age : "-" }}
           </div>
           <div class="q-py-xs">
-            {{
-              informaData.genderId
-                ? (
-                    Ops.genderOps.find((r) => r.id === informaData.genderId) ||
-                    {}
-                  ).name
-                : "-"
-            }}
+            {{ informaData.gender ? informaData.gender.name : "-" }}
           </div>
           <div class="q-py-xs">
-            {{
-              informaData.statusId
-                ? (
-                    Ops.statusOps.find((r) => r.id === informaData.statusId) ||
-                    {}
-                  ).name
-                : "-"
-            }}
+            {{ informaData.relationship ? informaData.relationship.name : "-" }}
           </div>
         </div>
       </div>
@@ -643,26 +436,13 @@ onMounted(async () => {
             {{ informaData.ethnicity ? informaData.ethnicity : "-" }}
           </div>
           <div class="q-py-xs">
-            {{
-              informaData.religionId
-                ? (
-                    Ops.religionOps.find(
-                      (r) => r.id === informaData.religionId
-                    ) || {}
-                  ).name
-                : "-"
-            }}
+            {{ informaData.religion ? informaData.religion.name : "-" }}
           </div>
           <div class="q-py-xs">
-            {{
-              informaData.bloodId
-                ? (Ops.bloodOps.find((b) => b.id === informaData.bloodId) || {})
-                    .name
-                : "-"
-            }}
+            {{ informaData.bloodGroup ? informaData.bloodGroup.name : "-" }}
           </div>
           <div class="q-py-xs">
-            {{ informaData.tel ? informaData.tel : "-" }}
+            {{ informaData.phone ? informaData.phone : "-" }}
           </div>
         </div>
       </div>
@@ -672,7 +452,7 @@ onMounted(async () => {
   <!-- Edit Dialog -->
   <q-dialog v-model="modal" persistent>
     <q-card style="width: 600px">
-      <q-form ref="myForm" @submit="onSubmit">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
         <DialogHeader
           tittle="แก้ไขประวัติส่วนตัว"
           :close="() => (modal = false)"
@@ -688,7 +468,8 @@ onMounted(async () => {
                 hide-bottom-space
                 maxlength="13"
                 mask="#############"
-                v-model="informaData.cardid"
+                v-model="formData.citizenId"
+                class="inputgreen"
                 :label="dataLabel.citizenId"
                 :rules="[
                 (val: string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
@@ -702,20 +483,17 @@ onMounted(async () => {
               <q-select
                 dense
                 outlined
+                use-input
                 lazy-rules
                 emit-value
                 map-options
                 hide-bottom-space
-                option-value="id"
-                option-label="name"
                 input-debounce="0"
-                v-model="informaData.prefixId"
-                :options="Ops.prefixOps"
+                v-model="formData.prefix"
+                class="inputgreen"
+                :options="store.prefixOp"
                 :label="dataLabel.prefix"
                 :rules="[(val: string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
-                @filter="(inputValue: any,
-              doneFn: Function) => filterSelector(inputValue, doneFn, 'prefixOps'
-              )"
               />
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
@@ -724,7 +502,8 @@ onMounted(async () => {
                 outlined
                 lazy-rules
                 hide-bottom-space
-                v-model="informaData.firstname"
+                v-model="formData.firstName"
+                class="inputgreen"
                 :label="dataLabel.firstName"
                 :rules="[(val: string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
               />
@@ -735,7 +514,8 @@ onMounted(async () => {
                 outlined
                 lazy-rules
                 hide-bottom-space
-                v-model="informaData.lastname"
+                v-model="formData.lastName"
+                class="inputgreen"
                 :label="dataLabel.lastName"
                 :rules="[(val: string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
               />
@@ -746,7 +526,7 @@ onMounted(async () => {
                 borderless
                 week-start="0"
                 menu-class-name="modalfix"
-                v-model="informaData.birthDate"
+                v-model="formData.birthDate"
                 :locale="'th'"
               >
                 <template #year="{ year }">
@@ -762,9 +542,10 @@ onMounted(async () => {
                     outlined
                     dense
                     hide-bottom-space
+                    class="inputgreen"
                     :model-value="
-                      informaData.birthDate != null
-                        ? date2Thai(informaData.birthDate)
+                      formData.birthDate != null
+                        ? date2Thai(formData.birthDate)
                         : null
                     "
                     :label="dataLabel.birthDate"
@@ -791,7 +572,8 @@ onMounted(async () => {
                 lazy-rules
                 hide-bottom-space
                 readonly
-                v-model="informaData.age"
+                class="inputgreen"
+                v-model="age"
                 :label="dataLabel.age"
               />
             </div>
@@ -804,15 +586,13 @@ onMounted(async () => {
                 emit-value
                 map-options
                 hide-bottom-space
-                option-value="id"
-                option-label="name"
                 input-debounce="0"
-                v-model="informaData.genderId"
-                :options="Ops.genderOps"
+                option-label="name"
+                option-value="id"
+                v-model="formData.genderId"
+                class="inputgreen"
+                :options="store.genderOp"
                 :label="dataLabel.gender"
-                @filter="(inputValue: any,
-              doneFn: Function) => filterSelector(inputValue, doneFn, 'genderOps'
-              )"
               />
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
@@ -827,12 +607,10 @@ onMounted(async () => {
                 option-value="id"
                 option-label="name"
                 input-debounce="0"
-                v-model="informaData.statusId"
-                :options="Ops.statusOps"
+                class="inputgreen"
+                v-model="formData.relationshipId"
+                :options="store.relationshipOp"
                 :label="dataLabel.relationship"
-                @filter="(inputValue: any,
-              doneFn: Function) => filterSelector(inputValue, doneFn, 'statusOps'
-              )"
               />
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
@@ -841,7 +619,8 @@ onMounted(async () => {
                 outlined
                 lazy-rules
                 hide-bottom-space
-                v-model="informaData.nationality"
+                class="inputgreen"
+                v-model="nationality"
                 :label="dataLabel.nationality"
               />
             </div>
@@ -851,8 +630,9 @@ onMounted(async () => {
                 outlined
                 lazy-rules
                 hide-bottom-space
-                v-model="informaData.ethnicity"
-                :label="dataLabel.race"
+                class="inputgreen"
+                v-model="formData.ethnicity"
+                :label="dataLabel.ethnicity"
               />
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
@@ -867,12 +647,10 @@ onMounted(async () => {
                 option-value="id"
                 option-label="name"
                 input-debounce="0"
-                v-model="informaData.religionId"
-                :options="Ops.religionOps"
+                v-model="formData.religionId"
+                class="inputgreen"
+                :options="store.religionOp"
                 :label="dataLabel.religion"
-                @filter="(inputValue: any,
-              doneFn: Function) => filterSelector(inputValue, doneFn, 'religionOps'
-              )"
               />
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
@@ -887,12 +665,10 @@ onMounted(async () => {
                 option-value="id"
                 option-label="name"
                 input-debounce="0"
-                v-model="informaData.bloodId"
-                :options="Ops.bloodOps"
+                v-model="formData.bloodGroupId"
+                class="inputgreen"
+                :options="store.bloodGroupOp"
                 :label="dataLabel.bloodGroup"
-                @filter="(inputValue: any,
-              doneFn: Function) => filterSelector(inputValue, doneFn, 'bloodOps'
-              )"
               />
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
@@ -902,8 +678,9 @@ onMounted(async () => {
                 lazy-rules
                 hide-bottom-space
                 mask="##########"
-                v-model="informaData.tel"
-                :label="dataLabel.telephoneNumber"
+                class="inputgreen"
+                v-model="formData.phone"
+                :label="dataLabel.phone"
               />
             </div>
           </div>
diff --git a/src/modules/04_registryNew/interface/request/Profile.ts b/src/modules/04_registryNew/interface/request/Profile.ts
new file mode 100644
index 000000000..fa15a0cdb
--- /dev/null
+++ b/src/modules/04_registryNew/interface/request/Profile.ts
@@ -0,0 +1,24 @@
+interface RequestObject {
+  bloodGroupId: string | null;
+  relationshipId: string | null;
+  genderId: string | null;
+  posTypeId: string;
+  posLevelId: string;
+  religionId: string | null;
+  citizenId: string;
+  telephoneNumber: string | null;
+  // nationality: string | null;
+  ethnicity: string | null;
+  birthDate: Date | null;
+  dateRetire: Date | null;
+  isProbation: boolean;
+  keycloak: string;
+  phone: string | null;
+  email: string | null;
+  position: string;
+  lastName: string;
+  firstName: string;
+  prefix: string;
+}
+
+export type { RequestObject };
diff --git a/src/modules/04_registryNew/interface/response/Profile.ts b/src/modules/04_registryNew/interface/response/Profile.ts
new file mode 100644
index 000000000..61efa58d8
--- /dev/null
+++ b/src/modules/04_registryNew/interface/response/Profile.ts
@@ -0,0 +1,108 @@
+interface ResponseObject {
+  id: string;
+  createdAt: Date;
+  createdUserId: string;
+  lastUpdatedAt: Date;
+  lastUpdateUserId: string;
+  createdFullName: string;
+  lastUpdateFullName: string;
+  prefix: string;
+  firstName: string;
+  lastName: string;
+  citizenId: string;
+  position: string;
+  posLevelId: string | null;
+  posTypeId: string | null;
+  email: string | null;
+  phone: string | null;
+  keycloak: string | null;
+  isProbation: boolean;
+  dateRetire: Date | null;
+  birthDate: Date;
+  ethnicity: string | null;
+  religionId: string | null;
+  religion: Religion | null;
+  telephoneNumber: null | null;
+  genderId: string | null;
+  gender: Gender | null;
+  relationshipId: string | null;
+  relationship: Relationship | null;
+  bloodGroupId: string | null;
+  bloodGroup: BloodGroup | null;
+  posLevel: PosLevel | null;
+  posType: PosType | null;
+
+  nationality?: string;
+}
+
+interface Religion {
+  id: string;
+  createdAt: Date;
+  lastUpdatedAt: Date;
+  createdFullName: string;
+  lastUpdateFullName: string;
+  name: string;
+}
+
+interface Gender {
+  id: string;
+  createdAt: Date;
+  lastUpdatedAt: Date;
+  createdFullName: string;
+  lastUpdateFullName: string;
+  name: string;
+}
+
+interface Relationship {
+  id: string;
+  createdAt: Date;
+  lastUpdatedAt: Date;
+  createdFullName: string;
+  lastUpdateFullName: string;
+  name: string;
+}
+
+interface BloodGroup {
+  id: string;
+  createdAt: Date;
+  lastUpdatedAt: Date;
+  createdFullName: string;
+  lastUpdateFullName: string;
+  name: string;
+}
+
+interface PosLevel {
+  id: string;
+  createdAt: Date;
+  createdUserId: string;
+  lastUpdatedAt: Date;
+  lastUpdateUserId: string;
+  createdFullName: string;
+  lastUpdateFullName: string;
+  posLevelName: string;
+  posLevelRank: number;
+  posLevelAuthority: null;
+  posTypeId: string;
+}
+
+interface PosType {
+  id: string;
+  createdAt: Date;
+  createdUserId: string;
+  lastUpdatedAt: Date;
+  lastUpdateUserId: string;
+  createdFullName: string;
+  lastUpdateFullName: string;
+  posTypeName: string;
+  posTypeRank: number;
+}
+
+export type {
+  ResponseObject,
+  Religion,
+  Gender,
+  Relationship,
+  BloodGroup,
+  PosLevel,
+  PosType,
+};
diff --git a/src/modules/04_registryNew/stores/profile.ts b/src/modules/04_registryNew/stores/profile.ts
index 4296aba60..00b7d21e7 100644
--- a/src/modules/04_registryNew/stores/profile.ts
+++ b/src/modules/04_registryNew/stores/profile.ts
@@ -1,92 +1,123 @@
-import { ref, computed } from "vue";
+import { ref } from "vue";
 import { defineStore } from "pinia";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type {
+  Gender,
+  Religion,
+  Relationship,
+  BloodGroup,
+} from "@/modules/04_registryNew/interface/response/Profile";
 
 export const useProfileDataStore = defineStore("profile", () => {
-  const isVerified = ref<boolean>(false);
-  const isEdit = ref<boolean>(false);
-  const emplployeeClass = ref<string | null>("");
-  interface profile {
-    main: { columns: String[] };
-    education: { columns: String[] };
-    oldName: { columns: String[] };
-    certicate: { columns: String[] };
-    train: { columns: String[] };
-    insignia: { columns: String[] };
-    coined: { columns: String[] };
-    assessment: { columns: String[] };
-    salary: { columns: String[] };
-    discipline: { columns: String[] };
-    leave: { columns: String[] };
-    talent: { columns: String[] };
-    work: { columns: String[] };
-    record: { columns: String[] };
-    other: { columns: String[] };
-    document: { columns: String[] };
+  const $q = useQuasar();
+  const mixin = useCounterMixin();
+  const {
+    showLoader,
+    hideLoader,
+    date2Thai,
+    messageError,
+    convertDate,
+    dateToISO,
+  } = mixin;
+
+  const genderOp = ref<Gender[]>([]);
+  const religionOp = ref<Religion[]>([]);
+  const relationshipOp = ref<Relationship[]>([]);
+  const bloodGroupOp = ref<BloodGroup[]>([]);
+  const prefixOp = ref<string[]>(["นาย", "นาง", "นางสาว"]);
+
+  function calculateAge(birthDate: Date): string {
+    const birthDateTimeStamp = new Date(birthDate).getTime();
+    const now = new Date();
+    const diff = now.getTime() - birthDateTimeStamp;
+
+    const ageDate = new Date(diff);
+    const years = ageDate.getUTCFullYear() - 1970;
+    const months = ageDate.getUTCMonth();
+    const days = ageDate.getUTCDate() - 1;
+
+    if (years > 60) {
+      return "อายุเกิน 60 ปี";
+    }
+
+    return `${years} ปี ${months} เดือน ${days} วัน`;
   }
 
-  const birthDate = ref<Date>(new Date());
-  const retireText = ref<string | null>(null);
-  const changeRetireText = (val: string | null) => {
-    retireText.value = val;
-  };
-  const changeBirth = (val: Date) => {
-    birthDate.value = val;
-  };
-  const profileData = ref<profile>({
-    main: { columns: [] },
-    education: { columns: [] },
-    oldName: { columns: [] },
-    certicate: { columns: [] },
-    train: { columns: [] },
-    insignia: { columns: [] },
-    coined: { columns: [] },
-    assessment: { columns: [] },
-    salary: { columns: [] },
-    discipline: { columns: [] },
-    leave: { columns: [] },
-    talent: { columns: [] },
-    work: { columns: [] },
-    record: { columns: [] },
-    other: { columns: [] },
-    document: { columns: [] },
-  });
-
-  const changeProfileColumns = (system: String, val: String[]) => {
-    if (system == "main") profileData.value.main.columns = val;
-    if (system == "education") profileData.value.education.columns = val;
-    if (system == "oldName") profileData.value.oldName.columns = val;
-    if (system == "certicate") profileData.value.certicate.columns = val;
-    if (system == "train") profileData.value.train.columns = val;
-    if (system == "insignia") profileData.value.insignia.columns = val;
-    if (system == "coined") profileData.value.coined.columns = val;
-    if (system == "assessment") profileData.value.assessment.columns = val;
-    if (system == "salary") profileData.value.salary.columns = val;
-    if (system == "discipline") profileData.value.discipline.columns = val;
-    if (system == "leave") profileData.value.leave.columns = val;
-    if (system == "talent") profileData.value.talent.columns = val;
-    if (system == "work") profileData.value.work.columns = val;
-    if (system == "record") profileData.value.record.columns = val;
-    if (system == "other") profileData.value.other.columns = val;
-    if (system == "document") profileData.value.document.columns = val;
-    localStorage.setItem("profile", JSON.stringify(profileData.value));
-  };
-
-  if (localStorage.getItem("profile") !== null) {
-    profileData.value = JSON.parse(localStorage.getItem("profile") || "{}");
+  async function getGender() {
+    showLoader();
+    await http
+      .get(config.API.profileNewGender)
+      .then((res) => {
+        genderOp.value = res.data.result;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
   }
 
-  const isLoad = ref<number>(0);
+  async function getRelationship() {
+    showLoader();
+    await http
+      .get(config.API.profileNewRelationship)
+      .then((res) => {
+        relationshipOp.value = res.data.result;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
+
+  async function getReligion() {
+    showLoader();
+    await http
+      .get(config.API.profileNewReligion)
+      .then((res) => {
+        religionOp.value = res.data.result;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
+
+  async function getBloodGroup() {
+    showLoader();
+    await http
+      .get(config.API.profileNewBloodGroup)
+      .then((res) => {
+        bloodGroupOp.value = res.data.result;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
 
   return {
-    isLoad,
-    isVerified,
-    isEdit,
-    profileData,
-    changeProfileColumns,
-    birthDate,
-    changeBirth,
-    retireText,
-    changeRetireText,
-    emplployeeClass,
+    prefixOp,
+    genderOp,
+    religionOp,
+    relationshipOp,
+    bloodGroupOp,
+
+    calculateAge,
+    getGender,
+    getRelationship,
+    getReligion,
+    getBloodGroup,
   };
 });

From 0d7f6cdbde63b6aeb3f59274d17c903cd3d0ee50 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Fri, 22 Mar 2024 19:26:32 +0700
Subject: [PATCH 2/3] =?UTF-8?q?=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=B5=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=95=E0=B8=B4:=20=E0=B8=9B=E0=B8=A3=E0=B8=B0?=
 =?UTF-8?q?=E0=B8=81=E0=B8=B2=E0=B8=A8=E0=B9=80=E0=B8=81=E0=B8=B5=E0=B8=A2?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=95=E0=B8=B4=E0=B8=84=E0=B8=B8=E0=B8=93=20(refac?=
 =?UTF-8?q?tor)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Achievement/04_DeclarationHonor.vue       | 159 ++++++++----------
 .../interface/request/DeclarationHonor.ts     |  30 +---
 2 files changed, 68 insertions(+), 121 deletions(-)

diff --git a/src/modules/04_registryNew/components/detail/Achievement/04_DeclarationHonor.vue b/src/modules/04_registryNew/components/detail/Achievement/04_DeclarationHonor.vue
index 7e0796b33..93e6c99fa 100644
--- a/src/modules/04_registryNew/components/detail/Achievement/04_DeclarationHonor.vue
+++ b/src/modules/04_registryNew/components/detail/Achievement/04_DeclarationHonor.vue
@@ -10,7 +10,6 @@ import { useCounterMixin } from "@/stores/mixin";
 import HistoryTable from "@/components/TableHistory.vue";
 import DialogHeader from "@/components/DialogHeader.vue";
 import type { RequestItemsObject } from "@/modules/04_registryNew/interface/request/DeclarationHonor";
-import type { FormData } from "@/modules/04_registryNew/interface/request/DeclarationHonor";
 import type { ResponseObject } from "@/modules/04_registryNew/interface/response/DeclarationHonor";
 
 const $q = useQuasar();
@@ -29,20 +28,18 @@ const profileId = ref<string>(
   route.params.id ? route.params.id.toString() : ""
 );
 
-const declHonorData = reactive<FormData>({
-  id: "",
-  isActive: true,
+const id = ref<string>("");
+const issueDateYear = ref<number>(0);
+const declHonorForm = reactive<RequestItemsObject>({
   isDate: "false",
   issuer: "",
   detail: "",
   issueDate: null,
-  issueDateYear: 0,
   refCommandNo: "",
   refCommandDate: null,
 });
 
 const isEdit = ref<boolean>(false);
-const editRow = ref<boolean>(false);
 const myForm = ref<QForm>();
 const modal = ref<boolean>(false);
 const modelView = ref<string>("table");
@@ -234,21 +231,17 @@ async function addEditData(editStatus: boolean = false) {
   if (!profileId.value) return;
 
   const url = editStatus
-    ? config.API.profileNewHonorById(declHonorData.id)
+    ? config.API.profileNewHonorById(id.value)
     : config.API.profileNewHonor;
   const method = editStatus ? "patch" : "post";
   const reqBody: RequestItemsObject = {
+    ...declHonorForm,
     profileId: editStatus ? undefined : profileId.value,
-    isActive: declHonorData.isActive,
-    detail: declHonorData.detail,
+    isDate: declHonorForm.isDate === "true" ? true : false,
     issueDate:
-      declHonorData.isDate === "true"
-        ? declHonorData.issueDate
-        : new Date(`${declHonorData.issueDateYear}-01-01`),
-    issuer: declHonorData.issuer,
-    refCommandDate: declHonorData.refCommandDate,
-    refCommandNo: declHonorData.refCommandNo,
-    isDate: declHonorData.isDate === "true" ? true : false,
+      declHonorForm.isDate === true
+        ? declHonorForm.issueDate
+        : new Date(`${issueDateYear.value}-01-01`),
   };
 
   try {
@@ -262,57 +255,41 @@ async function addEditData(editStatus: boolean = false) {
   }
 }
 
-async function clickDelete(dataId: string) {
-  try {
-    await http.delete(config.API.profileNewHonorById(dataId));
-    success($q, "ลบข้อมูลสำเร็จ");
-    await fetchData();
-    modal.value = false;
-  } catch (error) {
-    messageError($q, error);
-  } finally {
-    hideLoader();
-  }
-}
+// async function clickDelete(dataId: string) {
+//   try {
+//     await http.delete(config.API.profileNewHonorById(dataId));
+//     success($q, "ลบข้อมูลสำเร็จ");
+//     await fetchData();
+//     modal.value = false;
+//   } catch (error) {
+//     messageError($q, error);
+//   } finally {
+//     hideLoader();
+//   }
+// }
 
 function onClickOpenDialog(editStatus: boolean = false, row?: ResponseObject) {
   modal.value = true;
-  editRow.value = false;
   isEdit.value = editStatus;
 
   if (editStatus && row) {
-    Object.assign(declHonorData, row);
-    declHonorData.isDate = row.isDate.toString();
-    declHonorData.issueDate = row.issueDate;
-    declHonorData.issueDateYear = new Date(row.issueDate).getFullYear();
-    declHonorData.refCommandDate = row.refCommandDate;
+    id.value = row.id;
+
+    issueDateYear.value = new Date(row.issueDate).getFullYear();
+    declHonorForm.issuer = row.issuer;
+    declHonorForm.detail = row.detail;
+    declHonorForm.issueDate = row.issueDate;
+    declHonorForm.refCommandNo = row.refCommandNo;
+    declHonorForm.refCommandDate = row.refCommandDate;
+    declHonorForm.isDate = row.isDate ? "true" : "false";
   } else {
-    declHonorData.id = "";
-    declHonorData.isActive = true;
-    declHonorData.issuer = "";
-    declHonorData.detail = "";
-    declHonorData.issueDate = null;
-    declHonorData.issueDateYear = 0;
-    declHonorData.refCommandNo = "";
-    declHonorData.refCommandDate = null;
-    declHonorData.isDate = "false";
+    clearData();
   }
 }
 
 async function clickClose() {
-  if (editRow.value == true) {
-    dialogConfirm(
-      $q,
-      async () => {
-        modal.value = false;
-        editRow.value = false;
-      },
-      "ข้อมูลมีการแก้ไข",
-      "ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?"
-    );
-  } else {
-    modal.value = false;
-  }
+  clearData();
+  modal.value = false;
 }
 
 async function clickHistory(row: ResponseObject) {
@@ -334,30 +311,37 @@ function onSubmit() {
   dialogConfirm(
     $q,
     async () => {
-      myForm.value?.validate().then(async (result: boolean) => {
-        if (result) {
-          addEditData(isEdit.value);
-          modal.value = false;
-        }
-      });
+      addEditData(isEdit.value);
+      modal.value = false;
     },
     "ยืนยันการบันทึกข้อมูล",
     "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
   );
 }
 
+function clearData() {
+  id.value = "";
+  issueDateYear.value = 0;
+  declHonorForm.issuer = "";
+  declHonorForm.detail = "";
+  declHonorForm.issueDate = null;
+  declHonorForm.refCommandNo = "";
+  declHonorForm.refCommandDate = null;
+  declHonorForm.isDate = "false";
+}
+
 onMounted(async () => {
   await fetchData();
 });
 
 watch(
-  () => declHonorData.isDate,
+  () => declHonorForm.isDate,
   () => {
-    if (declHonorData.isDate === "true") {
-      declHonorData.issueDateYear = 0;
+    if (declHonorForm.isDate === "true") {
+      issueDateYear.value = 0;
     }
-    if (declHonorData.isDate === "false") {
-      declHonorData.issueDate = null;
+    if (declHonorForm.isDate === "false") {
+      declHonorForm.issueDate = null;
     }
   }
 );
@@ -557,14 +541,14 @@ watch(
 
   <q-dialog v-model="modal" persistent>
     <q-card style="width: 600px">
-      <q-form greedy ref="myForm" @submit="onSubmit">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
         <DialogHeader tittle="ประกาศเกียรติคุณ" :close="clickClose" />
         <q-separator />
         <q-card-section class="q-p-sm">
           <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
             <div class="row col-12 q-gutter-md q-py-sm text-grey-7">
               <q-radio
-                v-model="declHonorData.isDate"
+                v-model="declHonorForm.isDate as string"
                 checked-icon="task_alt"
                 unchecked-icon="panorama_fish_eye"
                 val="false"
@@ -572,7 +556,7 @@ watch(
                 dense
               />
               <q-radio
-                v-model="declHonorData.isDate"
+                v-model="declHonorForm.isDate as string"
                 checked-icon="task_alt"
                 unchecked-icon="panorama_fish_eye"
                 val="true"
@@ -584,12 +568,12 @@ watch(
               <datepicker
                 autoApply
                 year-picker
-                v-model="declHonorData.issueDateYear"
+                v-model="issueDateYear"
                 week-start="0"
                 menu-class-name="modalfix"
                 :locale="'th'"
                 :enableTimePicker="false"
-                v-if="declHonorData.isDate === 'false'"
+                v-if="declHonorForm.isDate === 'false'"
               >
                 <template #year="{ year }">{{ year + 543 }}</template>
                 <template #year-overlay-value="{ value }">{{
@@ -599,21 +583,15 @@ watch(
                   <q-input
                     dense
                     outlined
-                    lazy-rules
                     hide-bottom-space
                     class="inputgreen"
-                    :model-value="
-                      declHonorData.issueDateYear
-                        ? declHonorData.issueDateYear + 543
-                        : null
-                    "
+                    :model-value="issueDateYear ? issueDateYear + 543 : null"
                     :rules="[
                       (val:string) =>
                         !!val ||
                         `${'กรุณาเลือกปีที่ได้รับ'}`,
                     ]"
                     :label="`${'ปีที่ได้รับ'}`"
-                    @update:modelValue="() => (editRow = true)"
                   >
                     <template v-slot:prepend>
                       <q-icon
@@ -630,7 +608,7 @@ watch(
                 borderless
                 week-start="0"
                 menu-class-name="modalfix"
-                v-model="declHonorData.issueDate"
+                v-model="declHonorForm.issueDate"
                 :locale="'th'"
                 :enableTimePicker="false"
                 v-else
@@ -649,10 +627,9 @@ watch(
                     for="inputDatereceive"
                     ref="dateReceivedRef"
                     class="inputgreen"
-                    :model-value="date2Thai(declHonorData.issueDate as Date)"
+                    :model-value="date2Thai(declHonorForm.issueDate as Date)"
                     :label="`${'วันที่ได้รับ'}`"
                     :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`]"
-                    @update:modelValue="() => (editRow = true)"
                   >
                     <template v-slot:prepend>
                       <q-icon
@@ -672,9 +649,8 @@ watch(
                 lazy-rules
                 hide-bottom-space
                 class="inputgreen"
-                v-model="declHonorData.issuer"
+                v-model="declHonorForm.issuer"
                 :label="`${'ผู้มีอำนาจลงนาม'}`"
-                @update:modelValue="() => (editRow = true)"
               />
             </div>
             <div class="col-12">
@@ -684,10 +660,9 @@ watch(
                 lazy-rules
                 hide-bottom-space
                 class="inputgreen"
-                v-model="declHonorData.detail"
+                v-model="declHonorForm.detail"
                 :label="`${'รายละเอียด'}`"
                 :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
-                @update:modelValue="() => (editRow = true)"
               />
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
@@ -697,9 +672,8 @@ watch(
                 lazy-rules
                 hide-bottom-space
                 class="inputgreen"
-                v-model="declHonorData.refCommandNo"
+                v-model="declHonorForm.refCommandNo"
                 :label="`${'เลขที่คำสั่ง'}`"
-                @update:modelValue="() => (editRow = true)"
               >
                 <template v-slot:append>
                   <q-icon name="mdi-file" class="cursor-pointer" />
@@ -712,7 +686,7 @@ watch(
                 borderless
                 week-start="0"
                 menu-class-name="modalfix"
-                v-model="declHonorData.refCommandDate"
+                v-model="declHonorForm.refCommandDate"
                 :locale="'th'"
                 :enableTimePicker="false"
               >
@@ -730,13 +704,12 @@ watch(
                     hide-bottom-space
                     class="inputgreen"
                     :model-value="
-                      declHonorData.refCommandDate == null
+                      declHonorForm.refCommandDate == null
                         ? null
-                        : date2Thai(declHonorData.refCommandDate)
+                        : date2Thai(declHonorForm.refCommandDate)
                     "
                     :label="`${'เอกสารอ้างอิง (ลงวันที่)'}`"
-                    @clear="declHonorData.refCommandDate = null"
-                    @update:modelValue="() => (editRow = true)"
+                    @clear="declHonorForm.refCommandDate = null"
                   >
                     <template v-slot:prepend>
                       <q-icon
diff --git a/src/modules/04_registryNew/interface/request/DeclarationHonor.ts b/src/modules/04_registryNew/interface/request/DeclarationHonor.ts
index c0ad5799e..cae79aba1 100644
--- a/src/modules/04_registryNew/interface/request/DeclarationHonor.ts
+++ b/src/modules/04_registryNew/interface/request/DeclarationHonor.ts
@@ -1,37 +1,11 @@
 interface RequestItemsObject {
   profileId?: string;
-  isActive: boolean;
   detail: string;
   issueDate: Date | null;
   issuer: string;
   refCommandDate: Date | null;
   refCommandNo: string;
-  isDate: boolean;
+  isDate: boolean | string;
 }
 
-interface FormData {
-  id: string;
-  isActive: boolean;
-  isDate: string | null;
-  issuer: string;
-  detail: string;
-  issueDate: Date | null;
-  issueDateYear: number;
-  refCommandNo: string;
-  refCommandDate: Date | null;
-}
-
-//columns
-interface Columns {
-  [index: number]: {
-    name: String;
-    align: String;
-    label: String;
-    sortable: Boolean;
-    field: String;
-    headerStyle: String;
-    style: String;
-  };
-}
-
-export type { RequestItemsObject, FormData, Columns };
+export type { RequestItemsObject };

From 6e7351d4c179f2093f1dba42f85ce55b9332f48a Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Fri, 22 Mar 2024 19:27:55 +0700
Subject: [PATCH 3/3] =?UTF-8?q?=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=B5=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=95=E0=B8=B4:=20=E0=B8=82=E0=B9=89=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=B9=E0=B8=A5=E0=B8=AD=E0=B8=B7=E0=B9=88=E0=B8=99?=
 =?UTF-8?q?=E0=B9=86,=20=E0=B8=9C=E0=B8=A5=E0=B8=9B=E0=B8=A3=E0=B8=B0?=
 =?UTF-8?q?=E0=B9=80=E0=B8=A1=E0=B8=B4=E0=B8=99=E0=B8=AF=20(refactor)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Achievement/05_ResultsPerformance.vue     | 10 ++-----
 .../detail/Other/01_OtherInformation.vue      | 30 ++++---------------
 .../Other/01_OtherInformationHistory.vue      | 25 +++-------------
 3 files changed, 13 insertions(+), 52 deletions(-)

diff --git a/src/modules/04_registryNew/components/detail/Achievement/05_ResultsPerformance.vue b/src/modules/04_registryNew/components/detail/Achievement/05_ResultsPerformance.vue
index 6f92cced5..c653756f1 100644
--- a/src/modules/04_registryNew/components/detail/Achievement/05_ResultsPerformance.vue
+++ b/src/modules/04_registryNew/components/detail/Achievement/05_ResultsPerformance.vue
@@ -365,12 +365,8 @@ function onSubmit() {
   dialogConfirm(
     $q,
     async () => {
-      myForm.value?.validate().then(async (result: boolean) => {
-        if (result) {
-          addEditData(isEdit.value);
-          modal.value = false;
-        }
-      });
+      addEditData(isEdit.value);
+      modal.value = false;
     },
     "ยืนยันการบันทึกข้อมูล",
     "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
@@ -587,7 +583,7 @@ onMounted(async () => {
 
   <q-dialog v-model="modal" persistent>
     <q-card style="width: 600px">
-      <q-form greedy ref="myForm" @submit="onSubmit">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
         <DialogHeader
           tittle="ผลการประเมินการปฏิบัติราชการ"
           :close="clickClose"
diff --git a/src/modules/04_registryNew/components/detail/Other/01_OtherInformation.vue b/src/modules/04_registryNew/components/detail/Other/01_OtherInformation.vue
index 7012b3064..6c9c4751d 100644
--- a/src/modules/04_registryNew/components/detail/Other/01_OtherInformation.vue
+++ b/src/modules/04_registryNew/components/detail/Other/01_OtherInformation.vue
@@ -127,22 +127,10 @@ function validateForm() {
   dialogConfirm(
     $q,
     async () => {
-      const hasError = [];
-      for (const key in objectRef) {
-        if (Object.prototype.hasOwnProperty.call(objectRef, key)) {
-          const property = objectRef[key];
-          if (property.value && typeof property.value.validate === "function") {
-            const isValid = property.value.validate();
-            hasError.push(isValid);
-          }
-        }
-      }
-      if (hasError.every((result) => result === true)) {
-        if (edit.value) {
-          editData();
-        } else {
-          saveData();
-        }
+      if (edit.value) {
+        editData();
+      } else {
+        saveData();
       }
     },
     "ยืนยันการบันทึกข้อมูล",
@@ -228,12 +216,6 @@ async function getData() {
 //     });
 // }
 
-const infoRows = [
-  { title: "รายละเอียด", value: "" },
-  { title: "ล้างมลทิน", value: "" },
-  { title: "เลขที่คำสั่ง", value: "" },
-  { title: "เอกสารอ้างอิง (ลงวันที่)", value: "" },
-];
 onMounted(() => {
   getData();
 });
@@ -467,7 +449,7 @@ onMounted(() => {
   <!-- dialog add edit -->
   <q-dialog v-model="modal" persistent>
     <q-card style="min-width: 600px">
-      <form @submit.prevent="validateForm">
+      <q-form greedy @submit.prevent @validation-success="validateForm">
         <q-card-section class="flex justify-between" style="padding: 0">
           <DialogHeader tittle="อื่นๆ" :close="closeDialog" />
         </q-card-section>
@@ -541,7 +523,7 @@ onMounted(() => {
             <q-tooltip>บันทึกข้อมูล</q-tooltip>
           </q-btn>
         </q-card-actions>
-      </form>
+      </q-form>
     </q-card>
   </q-dialog>
 
diff --git a/src/modules/04_registryNew/components/detail/Other/01_OtherInformationHistory.vue b/src/modules/04_registryNew/components/detail/Other/01_OtherInformationHistory.vue
index 0b2142c41..2ef2777a6 100644
--- a/src/modules/04_registryNew/components/detail/Other/01_OtherInformationHistory.vue
+++ b/src/modules/04_registryNew/components/detail/Other/01_OtherInformationHistory.vue
@@ -3,9 +3,7 @@ import { ref, watch, reactive } from "vue";
 import DialogHeader from "@/components/DialogHeader.vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar, type QTableProps } from "quasar";
-import type {
-  RowList,
-} from "@/modules/04_registryNew/interface/index/other";
+import type { RowList } from "@/modules/04_registryNew/interface/index/other";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -93,7 +91,8 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 function getHistory() {
   showLoader();
-  http.get(config.API.profileNewOtherHisById(id.value))
+  http
+    .get(config.API.profileNewOtherHisById(id.value))
     .then((res) => {
       let data = res.data.result;
       rows.value = [];
@@ -201,23 +200,7 @@ watch(modal, (status) => {
           <template v-slot:body="props">
             <q-tr :props="props" class="cursor-pointer">
               <q-td v-for="col in props.cols" :key="col.id">
-                <div v-if="col.name === 'no'">
-                  {{
-                    (formFilter.page - 1) * formFilter.pageSize +
-                    props.rowIndex +
-                    1
-                  }}
-                </div>
-                <div
-                  v-else-if="
-                    col.name == 'refCommandDate' ||
-                    col.name == 'date' ||
-                    col.name == 'createdAt'
-                  "
-                >
-                  {{ col.value == null ? null : date2Thai(col.value) }}
-                </div>
-                <div v-else>
+                <div>
                   {{ col.value ? col.value : "-" }}
                 </div>
               </q-td>