การฝึกอบรม/ดูงาน

เอา error ออก

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

@@ -26,15 +26,19 @@
               <div v-if="col.name == 'startDate'" class="table_ellipsis">
                 {{
                   props.row.isDate == "true"
-                    ? date2Thai(props.row.startDate2)
+                    ? props.row.startDate2 !== null
-                    : col.value + 543
+                      ? date2Thai(props.row.startDate2)
+                      : "-"
+                    :  props.row.startDate2 !== null ? col.value + 543:'-'
                 }}
               </div>
               <div v-else-if="col.name == 'endDate'" class="table_ellipsis">
                 {{
                   props.row.isDate == "true"
-                    ? date2Thai(props.row.endDate2)
+                    ? props.row.endDate2 !== null
-                    : col.value + 543
+                      ? date2Thai(props.row.endDate2)
+                      : "-"
+                    : props.row.endDate2 !== null ? col.value + 543:'-'
                 }}
               </div>
 
@@ -138,9 +142,6 @@
                         :label="`${'ปี เริ่มต้นการฝึกอบรม/ดูงาน'}`"
                         mask="####"
                         dense
-                        hide-bottom-space
-                        :error="dayChecked"
-                        error-message="กรุณากรอก ปีเริ่มต้นการฝึกอบรม/ดูงาน"
                       />
                       <datepicker
                         v-else
@@ -165,13 +166,7 @@
                             dense
                             lazy-rules
                             :borderless="!edit"
-                            :model-value="Number(startDate) + 543"
+                            :model-value="startDate !== 0 ? Number(startDate) + 543:null"
-                            :rules="[
-                              (val) =>
-                                !!val ||
-                                `${'กรุณากรอกปี เริ่มต้นการฝึกอบรม/ดูงาน'}`,
-                            ]"
-                            hide-bottom-space
                             :label="`${'ปี เริ่มต้นการฝึกอบรม/ดูงาน'}`"
                           >
                             <template v-slot:prepend>
@@ -199,9 +194,6 @@
                         label="วัน/เดือน/ปี เริ่มต้นการฝึกอบรม/ดูงาน"
                         mask="##/##/####"
                         dense
-                        hide-bottom-space
-                        :error="dayChecked2"
-                        error-message="กรุณากรอก วัน/เดือน/ปี เริ่มต้นการฝึกอบรม/ดูงาน"
                       />
                       <datepicker
                         v-else
@@ -225,7 +217,7 @@
                             dense
                             lazy-rules
                             :borderless="!edit"
-                            :model-value="date2Thai(startDate2 as Date)"
+                            :model-value="startDate2 ? date2Thai(startDate2 as Date):null"
                             :rules="[
                               (val) =>
                                 !!val ||
@@ -261,9 +253,6 @@
                         :label="`${'ปี สิ้นสุดการฝึกอบรม/ดูงาน'}`"
                         mask="####"
                         dense
-                        hide-bottom-space
-                        :error="dayEndChecked"
-                        error-message="กรุณากรอก ปีสิ้นสุดการฝึกอบรม/ดูงาน"
                       />
                       <datepicker
                         v-else
@@ -289,7 +278,7 @@
                             dense
                             lazy-rules
                             :borderless="!edit"
-                            :model-value="Number(endDate) + 543"
+                            :model-value="endDate !== 0 ? Number(endDate) + 543:null"
                             :rules="[
                               (val) =>
                                 !!val ||
@@ -322,9 +311,6 @@
                         label="วัน/เดือน/ปี สิ้นสุดการฝึกอบรม/ดูงาน"
                         mask="##/##/####"
                         dense
-                        hide-bottom-space
-                        :error="dayEndChecked2"
-                        error-message="กรุณากรอก วัน/เดือน/ปี สิ้นสุดการฝึกอบรม/ดูงาน"
                       />
                       <datepicker
                         v-else
@@ -348,7 +334,7 @@
                             dense
                             lazy-rules
                             :borderless="!edit"
-                            :model-value="date2Thai(endDate2 as Date)"
+                            :model-value="endDate2 ? date2Thai(endDate2 as Date):null"
                             :rules="[
                               (val) =>
                                 !!val ||
@@ -647,11 +633,6 @@ const inputEndDate2 = ref<string>("");
 const yearlyInput = ref<string>("");
 const dateOrderInput = ref<string>("");
 
-const dayChecked = ref<boolean>(false);
-const dayEndChecked = ref<boolean>(false);
-const dayChecked2 = ref<boolean>(false);
-const dayEndChecked2 = ref<boolean>(false);
-
 const $q = useQuasar();
 const store = useProfileDataStore();
 const { profileData, changeProfileColumns } = store;
@@ -677,10 +658,10 @@ const duration = ref<string>();
 const department = ref<string>();
 const numberOrder = ref<string>();
 const dateOrder = ref<Date | null | string>(new Date());
-const startDate = ref<Date | string | number>(new Date().getFullYear());
+const startDate = ref<Date | string | number>(0);
-const startDate2 = ref<Date | string | null>(new Date());
+const startDate2 = ref<Date | string | null>(null);
-const endDate = ref<Date | string | number>(new Date().getFullYear());
+const endDate = ref<Date | string | number>(0);
-const endDate2 = ref<Date | string | null>(new Date());
+const endDate2 = ref<Date | string | null>(null);
 const minDate = ref<Date>();
 const myForm = ref<any>(); //form data input
 const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
@@ -1009,13 +990,16 @@ const fetchData = async () => {
             numberOrder: e.numberOrder,
             dateOrder: e.dateOrder,
             isDate: e.isDate == null ? null : e.isDate.toString(),
-            startDate: new Date(e.startDate).getFullYear(),
+            startDate:
-            endDate: new Date(e.endDate).getFullYear(),
+              e.startDate !== null ? new Date(e.startDate).getFullYear() : null,
-            startDate2: new Date(e.startDate),
+            endDate:
-            endDate2: new Date(e.endDate),
+              e.endDate !== null ? new Date(e.endDate).getFullYear() : null,
+            startDate2: e.startDate !== null ? new Date(e.startDate) : null,
+            endDate2: e.endDate !== null ? new Date(e.endDate) : null,
             createdFullName: e.createdFullName,
             createdAt: new Date(e.createdAt),
           });
+          console.log(data);
         });
       })
       .catch((e) => {
@@ -1062,16 +1046,23 @@ const getData = () => {
   numberOrder.value = row.numberOrder;
   dateOrder.value = row.dateOrder;
   isDate.value = row.isDate;
-  startDate.value = row.startDate;
+  startDate.value = row.startDate !== null ? row.startDate as number:0;
-  endDate.value = row.endDate;
+  endDate.value = row.endDate !== null ? row.endDate as number:0;
   startDate2.value = row.startDate2;
   endDate2.value = row.endDate2;
   id.value = row.id;
-  inputStartDate.value = (Number(row.startDate) + 543).toLocaleString();
+  inputStartDate.value =
-  inputEndDate.value = (Number(row.endDate) + 543).toLocaleString();
+    row.startDate !== null
-  yearlyInput.value = (Number(row.yearly) + 543).toLocaleString();
+      ? (Number(row.startDate) + 543).toLocaleString()
-  inputStartDate2.value = convertDateDisplay(row.startDate2);
+      : "";
-  inputEndDate2.value = convertDateDisplay(row.endDate2);
+  inputEndDate.value =
+    row.endDate !== null ? (Number(row.endDate) + 543).toLocaleString() : "";
+  yearlyInput.value =
+    row.yearly !== 0 ? (Number(row.yearly) + 543).toLocaleString() : "";
+  inputStartDate2.value =
+    row.startDate2 !== null ? convertDateDisplay(row.startDate2 as Date) : "";
+  inputEndDate2.value =
+    row.endDate2 !== null ? convertDateDisplay(row.endDate2 as Date) : "";
   dateOrderInput.value = row.dateOrder ? convertDateDisplay(row.dateOrder) : "";
 };
 
@@ -1114,32 +1105,16 @@ const clickSave = async () => {
   myForm.value.validate().then(async (result: boolean) => {
     if (result) {
       if (isDate.value == "false") {
-        dayChecked2.value = false;
+        if (modalEdit.value) {
-        dayEndChecked2.value = false;
+          await editData();
-        if (inputStartDate.value == "") {
-          dayChecked.value = true;
-        } else if (inputEndDate.value === "") {
-          dayEndChecked.value = true;
         } else {
-          if (modalEdit.value) {
+          await saveData();
-            await editData();
-          } else {
-            await saveData();
-          }
         }
       } else {
-        dayChecked.value = false;
+        if (modalEdit.value) {
-        dayEndChecked.value = false;
+          await editData();
-        if (inputStartDate2.value === "") {
-          dayChecked2.value = true;
-        } else if (inputEndDate2.value === "") {
-          dayEndChecked2.value = true;
         } else {
-          if (modalEdit.value) {
+          await saveData();
-            await editData();
-          } else {
-            await saveData();
-          }
         }
       }
     }
@@ -1151,6 +1126,8 @@ const clickSave = async () => {
  */
 const saveData = async () => {
   if (profileId.value) {
+    console.log(startDate2.value);
+    console.log(endDate2.value);
     showLoader();
     await http
       .post(config.API.profileTrainId(profileId.value), {
@@ -1166,12 +1143,16 @@ const saveData = async () => {
         isDate: isDate.value == "true" ? true : false,
         startDate:
           isDate.value == "true"
-            ? dateToISO(startDate2.value as Date)
+            ? startDate2.value
-            : new Date(`${startDate.value}-01-01`),
+              ? dateToISO(startDate2.value as Date)
+              : null
+            : startDate.value !== 0 ? new Date(`${startDate.value}-01-01`):null,
         endDate:
           isDate.value == "true"
-            ? dateToISO(endDate2.value as Date)
+            ? endDate2.value
-            : new Date(`${endDate.value}-01-01`),
+              ? dateToISO(endDate2.value as Date)
+              : null
+            : endDate.value !== 0 ? new Date(`${endDate.value}-01-01`):null,
       })
       .then((res) => {
         success($q, "บันทึกข้อมูลสำเร็จ");
@@ -1283,6 +1264,7 @@ const clickClose = async () => {
  * @param props ค่า props ใน row ที่เลือก
  */
 const selectData = async (props: DataProps) => {
+  console.log(props)
   modalEdit.value = true;
   modal.value = true;
   edit.value = false;
@@ -1298,18 +1280,30 @@ const selectData = async (props: DataProps) => {
   numberOrder.value = props.row.numberOrder;
   dateOrder.value = props.row.dateOrder;
   isDate.value = props.row.isDate;
-  startDate.value = props.row.startDate;
+  startDate.value = props.row.startDate !== null ? props.row.startDate as number:0;
-  endDate.value = props.row.endDate;
+  endDate.value = props.row.endDate !== null ? props.row.endDate as number:0;
   startDate2.value = props.row.startDate2;
   endDate2.value = props.row.endDate2;
-  inputStartDate.value = (Number(props.row.startDate) + 543).toLocaleString();
+  inputStartDate.value =
-  inputEndDate.value = (Number(props.row.endDate) + 543).toLocaleString();
+    props.row.startDate !== null
+      ? (Number(props.row.startDate) + 543).toLocaleString()
+      : "";
+  inputEndDate.value =
+    props.row.endDate !== null
+      ? (Number(props.row.endDate) + 543).toLocaleString()
+      : "";
   yearlyInput.value =
     props.row.yearly !== 0
       ? (Number(props.row.yearly) + 543).toLocaleString()
       : "";
-  inputStartDate2.value = convertDateDisplay(props.row.startDate2);
+  inputStartDate2.value =
-  inputEndDate2.value = convertDateDisplay(props.row.endDate2);
+    props.row.startDate2 !== null
+      ? convertDateDisplay(props.row.startDate2 as Date)
+      : "";
+  inputEndDate2.value =
+    props.row.endDate2 !== null
+      ? convertDateDisplay(props.row.endDate2 as Date)
+      : "";
   dateOrderInput.value = props.row.dateOrder
     ? convertDateDisplay(props.row.dateOrder)
     : "";
@@ -1333,19 +1327,16 @@ const addData = () => {
   numberOrder.value = "";
   dateOrder.value = null;
   isDate.value = "true";
-  startDate.value = new Date().getFullYear();
+  startDate.value = 0;
-  endDate.value = new Date().getFullYear();
+  endDate.value = 0;
-  startDate2.value = new Date();
+  startDate2.value = null;
-  endDate2.value = new Date();
+  endDate2.value = null;
   inputStartDate2.value = "";
   inputEndDate2.value = "";
   inputStartDate.value = "";
   inputEndDate.value = "";
   yearlyInput.value = "";
   dateOrderInput.value = "";
-
-  dayChecked.value = false;
-  dayEndChecked.value = false;
 };
 
 /**
@@ -1448,10 +1439,8 @@ watch(
     if (value.length === 10) {
       const dateVal = convertDate(value);
       if (dateVal.isValid) {
-        dayChecked2.value = false;
         startDate2.value = dateVal.value;
       } else {
-        dayChecked.value = true;
         inputStartDate2.value = "";
       }
     }
@@ -1463,10 +1452,8 @@ watch(
     if (value.length === 10) {
       const dateVal = convertDate(value);
       if (dateVal.isValid) {
-        dayEndChecked2.value = false;
         endDate2.value = dateVal.value;
       } else {
-        dayEndChecked.value = true;
         inputEndDate2.value = "";
       }
     }
@@ -1490,7 +1477,6 @@ watch(
   (value: string) => {
     if (value.length === 4) {
       const dateVal = Number(value) - 543;
-      dayChecked.value = false;
       startDate.value = dateVal;
     }
   }
@@ -1500,7 +1486,6 @@ watch(
   (value: string) => {
     if (value.length === 4) {
       const dateVal = Number(value) - 543;
-      dayEndChecked.value = false;
       endDate.value = dateVal;
     }
   }

src/modules/04_registry/interface/request/Train.ts

@@ -15,10 +15,10 @@ interface RequestItemsObject {
   department: string;
   numberOrder: string;
   dateOrder: Date;
-  startDate: number;
+  startDate: number|null;
-  endDate: number;
+  endDate: number|null;
-  startDate2: Date;
+  startDate2: Date|null;
-  endDate2: Date;
+  endDate2: Date|null;
   createdFullName: string;
   createdAt: Date;
 }