ผูก API รายการลา (user) *รอ ข้อมูล

src/modules/05_leave/componenst/Calendar.vue

@@ -1,5 +1,10 @@
 <script setup lang="ts">
-import { ref, watch, onMounted } from "vue";
+import { ref,  onMounted } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/**import calendar*/
 import FullCalendar from "@fullcalendar/vue3";
 import dayGridPlugin from "@fullcalendar/daygrid";
 import type { CalendarOptions } from "@fullcalendar/core";
@@ -7,9 +12,49 @@ import timeGridPlugin from "@fullcalendar/timegrid";
 import interactionPlugin from "@fullcalendar/interaction";
 import allLocales from "@fullcalendar/core/locales-all";
 import listPlugin from "@fullcalendar/list";
+
 import { useCounterMixin } from "@/stores/mixin";
 import type { DataDateMonthObject } from "@/modules/05_leave/interface/request/Calendar.ts";
 
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, date2Thai, monthYear2Thai } =
+  mixin;
+
+const $q = useQuasar();
+
+/**
+ * ตัวแปรทั้งหมด
+ */
+const modalCancel = ref(false);
+const title = ref("");
+const location = ref("บ้าน");
+const subject = ref("ลาป่วย");
+const dateStart = ref("20 ส.ค. 2566");
+const dateEnd = ref("21 ส.ค. 2566");
+const numDate = ref("20");
+const place = ref("บ้าน");
+const phone = ref("000-00000000");
+const reason = ref("ยกเลิกการลา");
+const model = ref(null);
+const modeCancel = ref(true);
+
+const dateYear = ref<number>(new Date().getFullYear());
+
+async function fetchDataCalendar() {
+  showLoader;
+  await http
+    .post(config.API.leaveCalendar(), { year: dateYear.value })
+    .then((res) => {
+      console.log(res);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 /**
  * Option ของปฏิทิน
  */
@@ -78,41 +123,23 @@ const calendarOptions = ref<CalendarOptions>({
   ],
 });
 
-/**
- * ตัวแปรทั้งหมด
- */
-const modalCancel = ref(false);
-const title = ref("");
-const location = ref("บ้าน");
-const subject = ref("ลาป่วย");
-const dateStart = ref("20 ส.ค. 2566");
-const dateEnd = ref("21 ส.ค. 2566");
-const numDate = ref("20");
-const place = ref("บ้าน");
-const phone = ref("000-00000000");
-const reason = ref("ยกเลิกการลา");
-const model = ref(null);
-const modeCancel = ref(true);
-
 const dateMonth = ref<DataDateMonthObject>({
   month: new Date().getMonth(),
   year: new Date().getFullYear(),
 });
 
-const dateYear = ref<number>(new Date().getFullYear());
 const emit = defineEmits(["update:dateYear"]);
-const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const { monthYear2Thai } = mixin;
+
 /**
  * แปลง ปีและเดือนเป็นภาษาไทย
  * @param val datepicker แบบเลือกปีและเดือน
  */
-const monthYearThai = (val: DataDateMonthObject) => {
+function monthYearThai(val: DataDateMonthObject) {
   if (val == null) return "";
   else return monthYear2Thai(val.month, val.year);
-};
+}
 
-const updateMonth = async (e: DataDateMonthObject) => {
+function updateMonth(e: DataDateMonthObject) {
   // console.log(dateMonth.value);
   if (e != null) {
     dateYear.value = e.year;
@@ -121,26 +148,26 @@ const updateMonth = async (e: DataDateMonthObject) => {
     const date = new Date(dateMonth.value.year, dateMonth.value.month);
     calen.gotoDate(date);
   }
-};
+}
 
 /**
  * ฟังก์ชั่นยกเลิก model
  * @param text
  */
-const cancel = async (text: string) => {
+async function cancel(text: string) {
   title.value = text;
   modalCancel.value = true;
   modeCancel.value = true;
-};
+}
 /**
  * ฟังก์ชั่นเปิด model
  * @param text
  */
-const view = async (text: string) => {
+async function view(text: string) {
   title.value = text;
   modalCancel.value = true;
   modeCancel.value = false;
-};
+}
 
 // filter calendar left
 const filterLists = ref<any[]>([
@@ -161,6 +188,12 @@ const filterLists = ref<any[]>([
   },
 ]);
 const filterVal = ref(["x1"]);
+
+onMounted(async () => {
+  console.log("calandar");
+
+  await fetchDataCalendar();
+});
 </script>
 
 <template>