fix Load การลา

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

@@ -6,6 +6,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { tokenParsed } from "@/plugins/auth";
 import { useCounterMixin } from "@/stores/mixin";
+import { useLeaveStore } from "@/modules/05_leave/store";
 
 import FullCalendar from "@fullcalendar/vue3";
 import dayGridPlugin from "@fullcalendar/daygrid";
@@ -23,6 +24,7 @@ import type {
 import DialogDetail from "@/modules/05_leave/components/DialogDetail.vue";
 
 const $q = useQuasar();
+const store = useLeaveStore();
 const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError, monthYear2Thai } = mixin;
 const emit = defineEmits(["update:dateYear"]);
@@ -74,7 +76,6 @@ const dateMonth = ref<DataDateMonthObject>({
 
 /** function เรียกข้อมูล calendar*/
 async function fetchDataCalendar() {
-  showLoader();
   await http
     .post(config.API.leaveCalendar(), {
       year: dateMonth.value.year,
@@ -118,9 +119,6 @@ async function fetchDataCalendar() {
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
@@ -128,7 +126,6 @@ async function fetchDataCalendar() {
  * fetch วันหยุดในปฏิทิน
  */
 async function fetchData() {
-  showLoader();
   await http
     .get(
       config.API.listHolidayHistoryYearMonth(
@@ -138,7 +135,6 @@ async function fetchData() {
     )
     .then((res) => {
       const dataNormal = res.data.result.normal;
-      const dataSixDays = res.data.result.sixDays;
       const data = dataNormal;
       const event = data.map((e: any) => ({
         id: e.id,
@@ -155,23 +151,9 @@ async function fetchData() {
         ...calendarOptions.value.events,
         ...event,
       ];
-      // const dataSix = dataSixDays
-      // const eventSix = dataSix.map((e: any) => ({
-      // 	id: e.id,
-      // 	title: `${e.name} `,
-      // 	start: e.holidayDate,
-      // 	end: new Date(new Date(e.holidayDate).setHours(23, 59, 59)).toISOString(),
-      // 	allDay: e.holidayDate === e.holidayDate ? true : false,
-      // 	color: "#FFE5CC",
-      // 	textColor: "#FF8000",
-      // }))
-      // calendarOptions.value.events = [...calendarOptions.value.events, ...eventSix]
     })
     .catch((e) => {
       messageError($q, e);
-    })
-    .finally(async () => {
-      hideLoader();
     });
 }
 
@@ -184,14 +166,11 @@ function convertKeycloakId(id: any) {
 /** function เรียกประเภทการลา */
 const leaveType = ref<LeaveType[]>([]);
 async function fectOptionType() {
-  await http
-    .get(config.API.leaveType())
-    .then(async (res) => {
-      leaveType.value = res.data.result;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    });
+  const data = await store.fetchLeaveTypeData();
+  if (!data) {
+    return;
+  }
+  leaveType.value = data;
 }
 
 /**
@@ -205,11 +184,17 @@ function monthYearThai(val: DataDateMonthObject) {
 
 /** function อัปเดท Calendar */
 async function updateMonth() {
-  await fetchDataCalendar();
-  await fetchData();
-  const calen = fullCalendar.value.getApi();
-  const date = new Date(dateMonth.value.year, dateMonth.value.month);
-  calen.gotoDate(date);
+  try {
+    await fetchDataCalendar();
+    await fetchData();
+    const calen = fullCalendar.value.getApi();
+    const date = new Date(dateMonth.value.year, dateMonth.value.month);
+    calen.gotoDate(date);
+  } catch (error) {
+    messageError($q, error);
+  } finally {
+    hideLoader();
+  }
 }
 
 /**
@@ -226,10 +211,11 @@ async function onClickClose() {
   modal.value = false;
 }
 
-/**** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่Calendar */
+/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่Calendar */
 watch(
   () => filterVal.value,
   async () => {
+    showLoader();
     const eventData = filterVal.value.map((item: any) => {
       return mainData.value
         .filter(
@@ -250,24 +236,32 @@ watch(
     const allEventData = [].concat(...eventData);
     calendarOptions.value.events = allEventData;
     await fetchData();
+    hideLoader();
   }
 );
 
 /**Hook */
 onMounted(async () => {
-  const user = await tokenParsed();
-  keycloakId.value = await (user ? user.sub : "");
-  filterVal.value.push(keycloakId.value);
-  await fetchDataCalendar();
-  await fetchData();
-  await fectOptionType();
+  try {
+    showLoader();
+    // เรียกข้อมูล keycloakId
+    const user = await tokenParsed();
+    keycloakId.value = await (user ? user.sub : "");
+    filterVal.value.push(keycloakId.value);
+    await Promise.all([fetchDataCalendar(), fectOptionType()]);
+    await fetchData();
+  } catch (error) {
+    messageError($q, error);
+  } finally {
+    hideLoader();
+  }
 });
 </script>
 
 <template>
   <div class="row">
     <div class="col-xs-12 col-md-3 q-mt-sm q-pr-sm row">
-      <q-card class="col-12" flat bordered >
+      <q-card class="col-12" flat bordered>
         <q-scroll-area style="height: 38vw">
           <div class="q-gutter-sm col-12">
             <q-list class="rounded-borders q-pt-sm" dense>

src/modules/05_leave/components/ListView.vue

@@ -65,15 +65,12 @@ async function fetchDataTable() {
 
 /** function เรียกประเภทการลา */
 async function fectOptionType() {
-  await http
-    .get(config.API.leaveType())
-    .then(async (res) => {
-      leaveType.value = res.data.result;
-      LeaveData.fetchLeaveType(res.data.result);
-    })
-    .catch((err) => {
-      messageError($q, err);
-    });
+  const data = await LeaveData.fetchLeaveTypeData();
+  if (!data) {
+    return;
+  }
+  leaveType.value = data;
+  LeaveData.fetchLeaveType(data);
 }
 
 /**
@@ -95,25 +92,26 @@ async function onClickEdit(id: string) {
   router.push(`/leave/edit/${id}`);
 }
 
-//เเจ้งเตือนลบข้อมูล
-function clickDelete(id: string) {
-  dialogRemove($q, () => onClickDelete(id));
-}
-
 /**
- * function ลบรายการ
- * @param id
+ * ฟังก์ชันลบข้อมูลการลา
+ * @param id รายการลาที่ต้องการลบ
  */
-async function onClickDelete(id: string) {
-  await http
-    .delete(config.API.leaveUserId(id))
-    .then(async (res) => {
-      success($q, "ลบข้อมูลสำเร็จ");
-      fetchDataTable();
-    })
-    .catch((err) => {
-      messageError($q, err);
-    });
+function clickDelete(id: string) {
+  dialogRemove($q, async () => {
+    showLoader();
+    await http
+      .delete(config.API.leaveUserId(id))
+      .then(async () => {
+        await fetchDataTable();
+        success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
 }
 
 /** function closePopup*/
@@ -170,8 +168,15 @@ function convert(val: any) {
  * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
  */
 onMounted(async () => {
-  await fectOptionType();
-  await fetchDataTable();
+  try {
+    showLoader();
+    await fectOptionType();
+    await fetchDataTable();
+  } catch (error) {
+    messageError($q, error);
+  } finally {
+    hideLoader();
+  }
 });
 </script>
 <template>

src/modules/05_leave/components/Table.vue

@@ -134,6 +134,8 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
         </datepicker>
         <!-- ค้นหาข้อความใน table -->
         <q-select
+          fill-input
+          hide-selected
           outlined
           dense
           v-model="leaveStore.type"
@@ -173,6 +175,8 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
             /> </template
         ></q-select>
         <q-select
+          fill-input
+          hide-selected
           outlined
           dense
           v-model="leaveStore.status"