ปรับปฏิทินทะเบียนประวัติ ส่วนการเพิ่มข้อมูลและแก้ไขวันเกิด

src/components/DialogAddEmployee.vue

@@ -21,6 +21,7 @@ const {
   dateToISO,
   dialogConfirm,
   success,
+  convertDate,
 } = useCounterMixin();
 const $q = useQuasar();
 
@@ -33,7 +34,7 @@ const informaData = ref<any>({
   prefixId: null,
   firstname: null,
   lastname: null,
-  birthDate: null,
+  birthDate: "",
   genderId: null,
   bloodId: null,
   nationality: "ไทย",
@@ -173,7 +174,6 @@ const calRetire = async (birth: Date) => {
     birthDate: dateToISO(birth),
   };
   if (dateToISO(dateBefore.value) != dateToISO(birth)) {
-    console.log(birth);
     showLoader();
     await http
       .post(config.API.profileCalRetire, body)
@@ -186,7 +186,8 @@ const calRetire = async (birth: Date) => {
       })
       .catch((e: any) => {
         messageError($q, e);
-        informaData.value.birthDate = null;
+        inputBirthDate.value = "";
+        informaData.value.birthDate = "";
         informaData.value.age = "";
       })
       .finally(() => {
@@ -201,7 +202,8 @@ const saveData = async () => {
   if (myform.value != null) {
     await myform.value.validate().then(async (saveDataTest: Boolean) => {
       if (saveDataTest) {
-        dialogConfirm($q, () => addData()); // validate ผ่านส่งไปบันทึกที่ api
+        if (inputBirthDate.value === "") dayChecked.value = true;
+        else dialogConfirm($q, () => addData()); // validate ผ่านส่งไปบันทึกที่ api
       }
     });
   }
@@ -227,11 +229,8 @@ const addData = async () => {
     formData.append("race", informaData.value.ethnicity);
   if (informaData.value.religionId != undefined)
     formData.append("religionId", informaData.value.religionId);
-  if (informaData.value.birthDate != undefined)
-    formData.append(
-      "birthDate",
-      dateToISO(informaData.value.birthDate) ?? dateToISO(new Date())
-    );
+  if (informaData.value.birthDate != "")
+    formData.append("birthDate", dateToISO(informaData.value.birthDate));
   if (informaData.value.bloodId != undefined)
     formData.append("bloodGroupId", informaData.value.bloodId);
   if (informaData.value.statusId != undefined)
@@ -248,6 +247,7 @@ const addData = async () => {
     .post(config.API.createProfileOfficer(), formData)
     .then((res) => {
       success($q, "บันทึกข้อมูลสำเร็จ");
+      clearForm();
     })
     .catch((e) => {
       messageError($q, e);
@@ -259,6 +259,28 @@ const addData = async () => {
     });
 };
 
+function clearForm() {
+  informaData.value = {
+    cardid: null,
+    age: null,
+    prefix: null,
+    prefixId: null,
+    firstname: null,
+    lastname: null,
+    birthDate: null,
+    genderId: null,
+    bloodId: null,
+    nationality: "ไทย",
+    ethnicity: "ไทย",
+    statusId: null,
+    religionId: "ceaec498-71b4-4f82-b5a2-7d6ec988b753",
+    tel: null,
+    employeeType: null,
+    employeeClass: null,
+    profileType: null,
+  };
+}
+
 /*** get รายการข้อมูลเกี่ยวกับบุคคล (dropdown list) */
 const fetchPerson = async () => {
   showLoader();
@@ -322,39 +344,31 @@ const fetchPerson = async () => {
     });
 };
 
-const id = ref<string>("");
+// change date input
+const inputBirthDate = ref<string>("");
 const dayChecked = ref<boolean>(false);
 watch(
-  () => id.value,
-  () => {
-    if (id.value.length === 10) {
-      const test = ref<string[]>([]);
-      test.value = id.value.split("/");
-      const test3: number = parseInt(test.value[2]) - 543;
-      const test2: string = `${test3}-${test.value[1]}-${test.value[0]}`;
+  () => inputBirthDate.value,
+  (value: string) => {
+    if (value.length === 10) {
+      const dateVal = convertDate(value);
 
-      const checked = moment(test2).isValid();
-
-      if (checked) {
+      if (dateVal.isValid) {
         dayChecked.value = false;
-        calRetire(new Date(test2));
+        calRetire(new Date(dateVal.value));
       } else {
         dayChecked.value = true;
-        id.value = "";
+        inputBirthDate.value = "";
+        informaData.value.age = "";
       }
-      // console.log(numDays);
-      // if (day <= numDays) {
-      //   console.log(test2);
-      // } else {
-      //   console.log("ผิดพลาด");
-      // }
     }
   }
 );
 </script>
+
 <template>
   <q-dialog v-model="modal">
-    <q-card style="min-width: 60vw">
+    <q-card style="min-width: 75vw">
       <Header
         tittle="เพิ่มข้อมูลทะเบียนประวัติข้าราชการ กทม.สามัญ"
         :close="() => (modal = false)"
@@ -477,13 +491,12 @@ watch(
                 </datepicker> -->
                 <q-input
                   outlined
-                  v-model="id"
-                  label="วัน/เดือน/ปี"
+                  v-model="inputBirthDate"
+                  label="วัน/เดือน/ปี เกิด"
                   mask="##/##/####"
                   dense
-                  hint="Mask: ##/##/####"
                   :error="dayChecked"
-                  error-message="ทดสอบ"
+                  error-message="กรุณากรอกวัน/เดือน/ปี เกิด"
                 />
               </div>
               <div class="col-xs-6 col-sm-2 col-md-2">

src/modules/04_registry/components/Information/Information.vue

@@ -91,7 +91,19 @@
           />
         </div>
         <div class="col-xs-6 col-sm-2 col-md-2">
+          <!-- change date input -->
+          <q-input
+            v-if="edit"
+            outlined
+            v-model="inputBirthDate"
+            label="วัน/เดือน/ปี เกิด"
+            mask="##/##/####"
+            dense
+            :error="dayChecked"
+            error-message="กรุณากรอกวัน/เดือน/ปี เกิด"
+          />
           <datepicker
+            v-else
             v-model="informaData.birthDate"
             :locale="'th'"
             autoApply
@@ -416,8 +428,9 @@
     </template>
   </HistoryTable>
 </template>
+
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, watch } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 
 import { useQuasar } from "quasar";
@@ -468,6 +481,8 @@ const {
   dialogMessage,
   showLoader,
   hideLoader,
+  convertDate, // change date input
+  convertDateDisplay, // change date input
 } = mixin;
 
 const profileStore = useProfileDataStore();
@@ -730,7 +745,7 @@ const defaultAdd = () => {
       prefixId: null,
       firstname: null,
       lastname: null,
-      birthDate: new Date(),
+      birthDate: null,
       genderId: null,
       bloodId: null,
       nationality: null,
@@ -997,6 +1012,7 @@ const calRetire = async (birth: Date) => {
       .then((res: any) => {
         const data = res.data.result;
         informaData.value.age = data.age;
+        informaData.value.birthDate = birth;
         changeRetireText(data.retireDate);
         dateBefore.value = birth;
       })
@@ -1004,6 +1020,7 @@ const calRetire = async (birth: Date) => {
         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(() => {
@@ -1029,6 +1046,7 @@ const fetchData = async () => {
         informaData.value.firstname = data.firstName;
         informaData.value.lastname = data.lastName;
         informaData.value.birthDate = new Date(data.birthDate);
+        inputBirthDate.value = convertDateDisplay(data.birthDate);
         informaData.value.genderId =
           data.genderId !== "00000000-0000-0000-0000-000000000000"
             ? data.genderId
@@ -1137,9 +1155,11 @@ const saveData = async () => {
     await myform.value.validate().then(async (success: boolean) => {
       if (success) {
         if (props.statusAdd) {
-          await addData();
+          if (inputBirthDate.value === "") dayChecked.value = true;
+          else await addData();
         } else {
-          await editData();
+          if (inputBirthDate.value === "") dayChecked.value = true;
+          else await editData();
         }
       } else {
       }
@@ -1165,4 +1185,25 @@ const getClass = (val: boolean) => {
     "full-width cursor-pointer": !val,
   };
 };
+
+// change date input
+const inputBirthDate = ref<string>("");
+const dayChecked = ref<boolean>(false);
+watch(
+  () => inputBirthDate.value,
+  (value: string) => {
+    if (value.length === 10) {
+      const dateVal = convertDate(value);
+
+      if (dateVal.isValid) {
+        dayChecked.value = false;
+        calRetire(new Date(dateVal.value));
+      } else {
+        dayChecked.value = true;
+        inputBirthDate.value = "";
+        informaData.value.age = "";
+      }
+    }
+  }
+);
 </script>

src/stores/mixin.ts

@@ -304,21 +304,44 @@ export const useCounterMixin = defineStore("mixin", () => {
     }
   }
 
-  function convertDate(date: string) {
+  const convertDate = (date: string) => {
     if (date != null && date.length == 10) {
-      const srcDate = date.split("/");
+      const srcDate = date.toString().split("/");
       const dateVal =
         Number(srcDate[2]) - 543 + "-" + srcDate[1] + "-" + srcDate[0];
+      const check = moment(dateVal).isValid();
 
-      if (moment(dateVal).isValid()) {
-        return dateVal;
+      if (check) {
+        return {
+          isValid: check,
+          value: dateVal,
+        };
       } else {
-        return ""
+        return {
+          isValid: check,
+          value: "",
+        };
       }
     } else {
-      return "";
+      return {
+        isValid: false,
+        value: "",
+      };
     }
-  }
+  };
+
+  const convertDateDisplay = (dateVal: Date) => {
+    const date = new Date(dateVal);
+    let dstYear = date.getFullYear() + 543;
+    let dstMonth = date.getMonth() + 1;
+    return (
+      date.getDate().toString().padStart(2, "0") +
+      "/" +
+      dstMonth.toString().padStart(2, "0") +
+      "/" +
+      dstYear
+    );
+  };
 
   function appendLeadingZeroes(n: number) {
     if (n <= 9) return "0" + n;
@@ -973,5 +996,6 @@ export const useCounterMixin = defineStore("mixin", () => {
     dialogMessageNotify,
     fails,
     convertDate,
+    convertDateDisplay,
   };
 });