ปรับ fe sprint2

src/modules/03_recruiting/views/02_qualify/DisablePeriodAdd.vue

@@ -115,8 +115,9 @@
                   outlined
                   dense
                   class="full-width datepicker q-mb-md"
-                  :model-value="date2Thai(dateExam)"
+                  :model-value="dateExam != null ? date2Thai(dateExam) : null"
                   :label="`${'วันที่สอบ'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่สอบ'}`]"
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -154,6 +155,7 @@
                   class="full-width datepicker q-mb-md"
                   :model-value="dateThaiRange(dateAnnouncement)"
                   :label="`${'วันที่ประกาศ'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ประกาศ'}`]"
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -191,6 +193,7 @@
                   class="full-width datepicker q-mb-md"
                   :model-value="dateThaiRange(dateRegister)"
                   :label="`${'วันที่สมัคร'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่สมัคร'}`]"
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -228,6 +231,7 @@
                   class="full-width datepicker q-mb-md"
                   :model-value="dateThaiRange(datePayment)"
                   :label="`${'วันที่ชำระเงิน'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ชำระเงิน'}`]"
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -263,8 +267,11 @@
                   outlined
                   dense
                   class="full-width datepicker q-mb-md"
-                  :model-value="date2Thai(dateAnnounce)"
+                  :model-value="
+                    dateAnnounce != null ? date2Thai(dateAnnounce) : null
+                  "
                   :label="`${'วันประกาศผลสอบ'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกวันประกาศผลสอบ'}`]"
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -671,15 +678,7 @@ const $q = useQuasar(); // show dialog
 const mixin = useCounterMixin();
 const router = useRouter();
 const route = useRoute();
-const {
-  date2Thai,
-  success,
-  dateToISO,
-  notifyError,
-  messageError,
-  showLoader,
-  hideLoader,
-} = mixin;
+const { date2Thai, success, dateToISO, notifyError, messageError } = mixin;
 const myForm = ref<QForm | null>(null); //form data input
 const name = ref<string>("");
 const note = ref<string>("");
@@ -688,11 +687,11 @@ const announcementExam = ref<boolean>(true);
 const fee = ref<number>(0);
 const round = ref<number>(1);
 const yearly = ref<number>(new Date().getFullYear());
-const dateRegister = ref<[Date, Date]>([new Date(), new Date()]); //วันที่สมัคร
-const datePayment = ref<[Date, Date]>([new Date(), new Date()]); //วันที่จ่ายเงิน
-const dateAnnouncement = ref<[Date, Date]>([new Date(), new Date()]); //วันที่ประกาศ
-const dateExam = ref<Date>(new Date()); //วันที่สอบ
-const dateAnnounce = ref<Date>(new Date()); //วันที่ประกาศผล
+const dateRegister = ref<[Date, Date] | null>(null); //วันที่สมัคร
+const datePayment = ref<[Date, Date] | null>(null); //วันที่จ่ายเงิน
+const dateAnnouncement = ref<[Date, Date] | null>(null); //วันที่ประกาศ
+const dateExam = ref<Date | null>(null); //วันที่สอบ
+const dateAnnounce = ref<Date | null>(null); //วันที่ประกาศผล
 const positionPathOptions = ref<DataOption[]>([]);
 const organizationShortName = ref<DataOption>({ id: "", name: "" });
 const organizationName = ref<DataOption>({ id: "", name: "" });
@@ -727,7 +726,7 @@ onMounted(async () => {
   if (route.params.id != undefined) {
     edit.value = true;
     id.value = route.params.id.toString();
-    hideLoader();
+    loaderPage(false);
     await fetchData();
   } else {
     edit.value = false;
@@ -739,7 +738,7 @@ const clickBack = () => {
 };
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.getDisablePeriodById(id.value))
     .then((res) => {
@@ -749,22 +748,26 @@ const fetchData = async () => {
       round.value = data.round;
       yearly.value = data.year;
       fee.value = data.fee;
-      dateAnnouncement.value = [
-        new Date(data.announcementStartDate),
-        new Date(data.announcementEndDate),
-      ];
-      dateExam.value = new Date(data.examDate);
-      dateRegister.value = [
-        new Date(data.registerStartDate),
-        new Date(data.registerEndDate),
-      ];
-      datePayment.value = [
-        new Date(data.paymentStartDate),
-        new Date(data.paymentEndDate),
-      ];
+      dateAnnouncement.value =
+        data.announcementStartDate != null && data.announcementEndDate != null
+          ? [
+              new Date(data.announcementStartDate),
+              new Date(data.announcementEndDate),
+            ]
+          : null;
+      dateExam.value = data.examDate != null ? new Date(data.examDate) : null;
+      dateRegister.value =
+        data.registerStartDate != null && data.registerEndDate != null
+          ? [new Date(data.registerStartDate), new Date(data.registerEndDate)]
+          : null;
+      datePayment.value =
+        data.paymentStartDate != null && data.paymentEndDate != null
+          ? [new Date(data.paymentStartDate), new Date(data.paymentEndDate)]
+          : null;
       editor.value = data.detail;
       note.value = data.note;
-      dateAnnounce.value = new Date(data.announcementDate);
+      dateAnnounce.value =
+        data.announcementDate != null ? new Date(data.announcementDate) : null;
       fileDocs.value = data.documents;
       fileImgs.value = data.images;
     })
@@ -772,7 +775,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -796,27 +799,38 @@ const checkSave = async () => {
 
 const sendData = () => {
   const valueData: RequestPeriodDisable = {
-    announcementEndDate: dateToISO(dateAnnouncement.value[1]),
-    announcementStartDate: dateToISO(dateAnnouncement.value[0]),
-    examDate: dateToISO(dateExam.value),
+    announcementEndDate:
+      dateAnnouncement.value !== null
+        ? dateToISO(dateAnnouncement.value[1])
+        : null,
+    announcementStartDate:
+      dateAnnouncement.value !== null
+        ? dateToISO(dateAnnouncement.value[0])
+        : null,
+    examDate: dateExam.value !== null ? dateToISO(dateExam.value) : null,
     detail: editor.value,
     fee: fee.value,
     id: "",
     name: name.value,
     note: note.value,
-    paymentEndDate: dateToISO(datePayment.value[1]),
-    paymentStartDate: dateToISO(datePayment.value[0]),
-    registerEndDate: dateToISO(dateRegister.value[1]),
-    registerStartDate: dateToISO(dateRegister.value[0]),
+    paymentEndDate:
+      datePayment.value !== null ? dateToISO(datePayment.value[1]) : null,
+    paymentStartDate:
+      datePayment.value !== null ? dateToISO(datePayment.value[0]) : null,
+    registerEndDate:
+      dateRegister.value !== null ? dateToISO(dateRegister.value[1]) : null,
+    registerStartDate:
+      dateRegister.value !== null ? dateToISO(dateRegister.value[0]) : null,
     round: round.value,
     year: yearly.value,
-    announcementDate: dateToISO(dateAnnounce.value),
+    announcementDate:
+      dateAnnounce.value !== null ? dateToISO(dateAnnounce.value) : null,
   };
   return valueData;
 };
 
 const addData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .post(config.API.saveDisablePeriod, sendData())
     .then(async (res) => {
@@ -831,12 +845,12 @@ const addData = async () => {
       messageError($q, e);
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const editData = async (id: string) => {
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.editDisablePeriod(id), sendData())
     .then(async () => {
@@ -849,7 +863,7 @@ const editData = async (id: string) => {
       messageError($q, e);
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -876,7 +890,7 @@ const uploadImgData = async () => {
     fileImgDataUpload.value.forEach((file: any) => {
       formData.append("", file);
     });
-    showLoader();
+    loaderPage(true);
     await http
       .put(config.API.periodExamImg(id.value), formData)
       .then((res) => {})
@@ -884,7 +898,7 @@ const uploadImgData = async () => {
         messageError($q, e);
       })
       .finally(async () => {
-        hideLoader();
+        loaderPage(false);
       });
   }
 };
@@ -893,7 +907,7 @@ const deleteDocData = async (docId: string) => {
   const params = {
     documentId: docId,
   };
-  showLoader();
+  loaderPage(true);
   await http
     .delete(config.API.periodExamDoc(id.value.toString()), {
       params,
@@ -906,7 +920,7 @@ const deleteDocData = async (docId: string) => {
     })
     .finally(async () => {
       await fetchData();
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -937,7 +951,7 @@ const uploadDocData = async () => {
     fileDocDataUpload.value.forEach((file: any) => {
       formData.append("", file);
     });
-    showLoader();
+    loaderPage(true);
     await http
       .put(config.API.periodExamDoc(id.value), formData)
       .then((res) => {})
@@ -945,7 +959,7 @@ const uploadDocData = async () => {
         messageError($q, e);
       })
       .finally(async () => {
-        hideLoader();
+        loaderPage(false);
       });
   } else {
     clickBack();
@@ -956,7 +970,7 @@ const uploadDocData = async () => {
  * แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง
  * @param val ช่วงวันที่
  */
-const dateThaiRange = (val: [Date, Date]) => {
+const dateThaiRange = (val: [Date, Date] | null) => {
   if (val === null) {
     return "";
   } else if (date2Thai(val[0], true) === date2Thai(val[1], true)) {