ทะเบียนประวัติ: ประวัติส่วนตัว (คำนวณอายุ), เพิ่ม 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

src/modules/04_registryNew/stores/profile.ts

@@ -0,0 +1,92 @@
+import { ref, computed } from "vue";
+import { defineStore } from "pinia";
+
+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 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") || "{}");
+  }
+
+  const isLoad = ref<number>(0);
+
+  return {
+    isLoad,
+    isVerified,
+    isEdit,
+    profileData,
+    changeProfileColumns,
+    birthDate,
+    changeBirth,
+    retireText,
+    changeRetireText,
+    emplployeeClass,
+  };
+});