no message

src/modules/11_discipline/components/3_InvestigateDisciplinary/Calendar.vue

@@ -7,13 +7,18 @@ import timeGridPlugin from "@fullcalendar/timegrid";
 import interactionPlugin from "@fullcalendar/interaction";
 import allLocales from "@fullcalendar/core/locales-all";
 import listPlugin from "@fullcalendar/list";
+import { useQuasar } from "quasar";
+import config from "@/app.config";
+import http from "@/plugins/http";
+
+import type { DataDateMonthObject } from "@/modules/09_leave/interface/response/leave";
 
 import { useCounterMixin } from "@/stores/mixin";
 
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const { monthYear2Thai } = mixin;
+const { monthYear2Thai, showLoader, hideLoader, messageError } = mixin;
 
-import type { DataDateMonthObject } from "@/modules/09_leave/interface/response/leave";
+const $q = useQuasar();
 
 /**
  * Option ของปฏิทิน
@@ -123,21 +128,48 @@ const reason = ref("ยกเลิกการลา");
 const model = ref(null);
 const modeCancel = ref(true);
 
+async function fetchCalendar() {
+  showLoader();
+  await http
+    .post(config.API.disciplinaryCalendar(), {
+      year: dateMonth.value.year,
+      mouth: dateMonth.value.month,
+    })
+    .then((res) => {
+      console.log(res);
+    })
+    .catch((err) => {
+      messageError($q);
+    })
+    .finally(() => {
+      setTimeout(() => {
+        if (fullCalendar !== undefined) {
+          const calen = fullCalendar.value.getApi();
+          const date = new Date(dateMonth.value.year, dateMonth.value.month);
+          calen.gotoDate(date);
+        }
+        hideLoader();
+      }, 1000);
+    });
+}
+
 /**
  * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
  */
 onMounted(async () => {
-  if (fullCalendar !== undefined) {
-    const calen = fullCalendar.value.getApi();
-    const date = new Date(dateMonth.value.year, dateMonth.value.month);
-    calen.gotoDate(date);
-  }
+  fetchCalendar();
+  // if (fullCalendar !== undefined) {
+  //   const calen = fullCalendar.value.getApi();
+  //   const date = new Date(dateMonth.value.year, dateMonth.value.month);
+  //   calen.gotoDate(date);
+  // }
 });
 
 function changCalendar() {
-  const calen = fullCalendar.value.getApi();
-  const date = new Date(dateMonth.value.year, dateMonth.value.month);
-  calen.gotoDate(date);
+  fetchCalendar();
+  // const calen = fullCalendar.value.getApi();
+  // const date = new Date(dateMonth.value.year, dateMonth.value.month);
+  // calen.gotoDate(date);
 }
 
 /**
@@ -274,7 +306,7 @@ const monthYearThai = (val: DataDateMonthObject) => {
               </template>
             </FullCalendar>
             <div class="row q-col-gutter-lg justify-end q-pb-lg">
-              <div class="items-center row">
+              <!-- <div class="items-center row">
                 <q-icon
                   size="10px"
                   color="light-green"
@@ -282,8 +314,8 @@ const monthYearThai = (val: DataDateMonthObject) => {
                   class="q-mr-sm"
                 />
                 <span class="text-caption text-grey-8">สถานะอนุมัติ</span>
-              </div>
-              <div class="items-center row">
+              </div> -->
+              <!-- <div class="items-center row">
                 <q-icon
                   size="10px"
                   color="red-6"
@@ -291,7 +323,7 @@ const monthYearThai = (val: DataDateMonthObject) => {
                   class="q-mr-sm"
                 />
                 <span class="text-caption text-grey-8">สถานะไม่อนุมัติ</span>
-              </div>
+              </div> -->
               <div class="items-center row">
                 <q-icon
                   size="10px"
@@ -299,11 +331,9 @@ const monthYearThai = (val: DataDateMonthObject) => {
                   name="mdi-circle"
                   class="q-mr-sm"
                 />
-                <span class="text-caption text-grey-8"
-                  >สถานะอยู่ระหว่างดำเนินการ</span
-                >
+                <span class="text-caption text-grey-8">สอบสวน</span>
               </div>
-              <div class="items-center row">
+              <!-- <div class="items-center row">
                 <q-icon
                   size="10px"
                   color="orange"
@@ -311,7 +341,7 @@ const monthYearThai = (val: DataDateMonthObject) => {
                   class="q-mr-sm"
                 />
                 <span class="text-caption text-grey-8">สถานะใหม่</span>
-              </div>
+              </div> -->
             </div>
           </div>
         </div>