ทะเบียนประวัติ: ประวัติส่วนตัว (คำนวณอายุ), เพิ่ม clearable

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

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { onMounted, watch, ref } from "vue";
 import { useQuasar } from "quasar";
 import type { QTableColumn, QForm } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
 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 {
@@ -18,7 +19,16 @@ import type { RequestItemsHistoryObject } from "@/modules/04_registryNew/interfa
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, date2Thai, messageError } = mixin;
+const profileStore = useProfileDataStore();
+const {
+  showLoader,
+  hideLoader,
+  date2Thai,
+  messageError,
+  convertDate,
+  dateToISO,
+} = mixin;
+const { changeRetireText, changeBirth } = profileStore;
 
 const informaData = ref<Information>(defaultInformation);
 const modal = ref<boolean>(false);
@@ -490,6 +500,35 @@ async function clickHistory() {
   //   });
 }
 
+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) {
@@ -499,6 +538,18 @@ function onSubmit() {
   });
 }
 
+watch(
+  () => informaData.value.birthDate,
+  (value) => {
+    // const dateVal = convertDate(value);
+    if (value) {
+      calRetire(value);
+    } else {
+      informaData.value.age = "";
+    }
+  }
+);
+
 onMounted(async () => {
   await fetchPerson();
   await fetchData();
@@ -651,7 +702,6 @@ onMounted(async () => {
               <q-select
                 dense
                 outlined
-                use-input
                 lazy-rules
                 emit-value
                 map-options
@@ -749,7 +799,7 @@ onMounted(async () => {
               <q-select
                 dense
                 outlined
-                use-input
+                clearable
                 lazy-rules
                 emit-value
                 map-options
@@ -769,7 +819,7 @@ onMounted(async () => {
               <q-select
                 dense
                 outlined
-                use-input
+                clearable
                 lazy-rules
                 emit-value
                 map-options
@@ -809,7 +859,7 @@ onMounted(async () => {
               <q-select
                 dense
                 outlined
-                use-input
+                clearable
                 lazy-rules
                 emit-value
                 map-options
@@ -829,7 +879,7 @@ onMounted(async () => {
               <q-select
                 dense
                 outlined
-                use-input
+                clearable
                 lazy-rules
                 emit-value
                 map-options