fix loading Skeleton

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

@@ -26,7 +26,7 @@ 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 { messageError, monthYear2Thai } = mixin;
 const emit = defineEmits(["update:dateYear"]);
 
 const mainData = ref<DataCalendar[]>([]);
@@ -37,10 +37,10 @@ const leaveId = ref<string>("");
 /** filter calendar left */
 const filterLists = ref<any>([]);
 const filterVal = ref<any>([keycloakId.value]);
+const isLoading = ref<boolean>(false);
+const isLoadingHoliday = ref<boolean>(false);
 
-/**
- * Option ของปฏิทิน
- */
+/** Option ของปฏิทิน */
 const fullCalendar = ref<any>(); //ref calendar
 const calendarOptions = ref<any>({
   plugins: [
@@ -76,6 +76,7 @@ const dateMonth = ref<DataDateMonthObject>({
 
 /** function เรียกข้อมูล calendar*/
 async function fetchDataCalendar() {
+  isLoading.value = true;
   await http
     .post(config.API.leaveCalendar(), {
       year: dateMonth.value.year,
@@ -119,6 +120,9 @@ async function fetchDataCalendar() {
     })
     .catch((err) => {
       messageError($q, err);
+    })
+    .finally(() => {
+      isLoading.value = false;
     });
 }
 
@@ -126,6 +130,7 @@ async function fetchDataCalendar() {
  * fetch วันหยุดในปฏิทิน
  */
 async function fetchData() {
+  isLoadingHoliday.value = true;
   await http
     .get(
       config.API.listHolidayHistoryYearMonth(
@@ -154,6 +159,9 @@ async function fetchData() {
     })
     .catch((e) => {
       messageError($q, e);
+    })
+    .finally(() => {
+      isLoadingHoliday.value = false;
     });
 }
 
@@ -193,7 +201,6 @@ async function updateMonth() {
   } catch (error) {
     messageError($q, error);
   } finally {
-    hideLoader();
   }
 }
 
@@ -215,7 +222,6 @@ async function onClickClose() {
 watch(
   () => filterVal.value,
   async () => {
-    showLoader();
     const eventData = filterVal.value.map((item: any) => {
       return mainData.value
         .filter(
@@ -236,14 +242,13 @@ watch(
     const allEventData = [].concat(...eventData);
     calendarOptions.value.events = allEventData;
     await fetchData();
-    hideLoader();
   }
 );
 
 /**Hook */
 onMounted(async () => {
   try {
-    showLoader();
+    isLoading.value = true;
     // เรียกข้อมูล keycloakId
     const user = await tokenParsed();
     keycloakId.value = await (user ? user.sub : "");
@@ -253,7 +258,7 @@ onMounted(async () => {
   } catch (error) {
     messageError($q, error);
   } finally {
-    hideLoader();
+    isLoading.value = false;
   }
 });
 </script>
@@ -262,7 +267,8 @@ onMounted(async () => {
   <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-scroll-area style="height: 38vw">
+        <q-skeleton height="100%" square v-if="isLoading" />
+        <q-scroll-area style="height: 38vw" v-else>
           <div class="q-gutter-sm col-12">
             <q-list class="rounded-borders q-pt-sm" dense>
               <q-item
@@ -333,7 +339,13 @@ onMounted(async () => {
             </q-card>
 
             <div class="main-content">
+              <q-skeleton
+                height="100%"
+                square
+                v-if="isLoading || isLoadingHoliday"
+              />
               <FullCalendar
+                v-else
                 ref="fullCalendar"
                 class="demo-app-calendar"
                 :options="calendarOptions"

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

@@ -164,6 +164,7 @@ const formDataCancle = reactive<FromCancelDetail>({
   leaveRangeEnd: "",
   leaveDirectorComment: "",
 });
+const isLoading = ref<boolean>(false);
 
 /** form ขอยกเลิก*/
 const formDelete = reactive<FormDelete>({
@@ -187,7 +188,7 @@ const formDeleteRef: FormDeleteRef = {
  * @param id การลา
  */
 async function fetchDataDetail(id: string) {
-  showLoader();
+  isLoading.value = true;
   await http
     .get(config.API.leaveUserId(id), {})
     .then((res) => {
@@ -280,7 +281,7 @@ async function fetchDataDetail(id: string) {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
@@ -308,10 +309,7 @@ function checkLeaveType(leaveTypeId: string) {
       checkForm.value = "FormHajj";
     } else if (type === "LV-007") {
       checkForm.value = "FormCheckSelect";
-    } else if (
-      type === "LV-008" &&
-      formData.leaveSubTypeName === "ศึกษาต่อ"
-    ) {
+    } else if (type === "LV-008" && formData.leaveSubTypeName === "ศึกษาต่อ") {
       checkForm.value = "FormStudy";
     } else if (
       (type === "LV-008" && formData.leaveSubTypeName === "ฝึกอบรม") ||
@@ -334,7 +332,7 @@ function checkLeaveType(leaveTypeId: string) {
  * @param id ยกเลิกการลา
  */
 async function fetchDataCancelDetail(id: string) {
-  showLoader();
+  isLoading.value = true;
   await http
     .get(config.API.leaveCancelById(id))
     .then((res) => {
@@ -362,7 +360,7 @@ async function fetchDataCancelDetail(id: string) {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
@@ -401,7 +399,8 @@ async function onSubmit() {
   formData.append("doc", formDelete.doc);
   await http
     .post(config.API.leaveCancelById(id), formData)
-    .then(() => {
+    .then(async () => {
+      await props.fetchDataTable?.();
       success($q, "บันทึกข้อมูลสำเร็จ");
       props.onClickClose?.();
     })
@@ -409,7 +408,6 @@ async function onSubmit() {
       messageError($q, err);
     })
     .finally(() => {
-      props.fetchDataTable?.();
       hideLoader();
     });
 }
@@ -445,7 +443,9 @@ watch(
       <q-separator />
 
       <q-card-section class="scroll" style="max-height: 60vh">
-        <div class="row">
+        <q-skeleton height="400px" square v-if="isLoading" />
+
+        <div class="row" v-else>
           <div
             flat
             :class="
@@ -571,6 +571,7 @@ watch(
           label="ยืนยัน"
           unelevated
           color="secondary"
+          :loading="isLoading"
           @click="onClickSave"
         />
       </q-card-section>
@@ -584,7 +585,8 @@ watch(
 
       <q-separator />
       <q-card-section class="q-p-md row q-gutter-y-md">
-        <div flat class="col-12">
+        <q-skeleton height="400px" width="100%" square v-if="isLoading" />
+        <div flat class="col-12" v-else>
           <div class="col-12 q-col-gutter-sm row items-center"></div>
           <FormCancel :data="formDataCancle" />
         </div>

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

@@ -30,6 +30,7 @@ const year = ref<number>(new Date().getFullYear());
 const type = ref<string>("00000000-0000-0000-0000-000000000000");
 const status = ref<string>("ALL");
 const filter = ref<string>("");
+const isLoading = ref<boolean>(false);
 
 /** pagination*/
 const maxPage = ref<number>(1);
@@ -38,7 +39,7 @@ const pageSize = ref<number>(10);
 const total = ref<number>(0);
 /** function เรียกข้อมูลการลา*/
 async function fetchDataTable() {
-  showLoader();
+  isLoading.value = true;
   const body = {
     year: year.value, //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
     type: LeaveData.type, //*Id ประเภทการลา
@@ -59,7 +60,7 @@ async function fetchDataTable() {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
@@ -128,10 +129,10 @@ async function onClickClose() {
  */
 async function updateFilterTable(y: number, t: string, s: string, k: string) {
   if (t && s) {
-    year.value = await y;
-    type.value = await t;
-    status.value = await s;
-    filter.value = await k;
+    year.value = y;
+    type.value = t;
+    status.value = s;
+    filter.value = k;
     await fetchDataTable();
   }
 }
@@ -142,7 +143,7 @@ async function updateFilterTable(y: number, t: string, s: string, k: string) {
  * @param ps แถวต่อหน้า
  */
 async function updatePagination(p: number, ps: number) {
-  (page.value = await p), (pageSize.value = await ps);
+  (page.value = p), (pageSize.value = ps);
   await fetchDataTable();
 }
 
@@ -168,15 +169,8 @@ function convert(val: any) {
  * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
  */
 onMounted(async () => {
-  try {
-    showLoader();
-    await fectOptionType();
-    await fetchDataTable();
-  } catch (error) {
-    messageError($q, error);
-  } finally {
-    hideLoader();
-  }
+  await fectOptionType();
+  await fetchDataTable();
 });
 </script>
 <template>
@@ -194,6 +188,7 @@ onMounted(async () => {
     :pageSize="pageSize"
     :leaveType="leaveType"
     :total="total"
+    :isloadingData="isLoading"
   >
     <template #columns="props">
       <q-tr :props="props" class="cursor-pointer">

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

@@ -3,6 +3,7 @@ import { ref, useAttrs, watch } from "vue";
 import { useQuasar } from "quasar";
 
 import { useLeaveStore } from "@/modules/05_leave/store";
+import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const $q = useQuasar();
 const attrs = ref<any>(useAttrs());
@@ -15,7 +16,6 @@ const props = defineProps({
   pass: Number,
   notpass: Number,
   total: Number,
-
   name: String,
   icon: String,
   inputvisible: Array,
@@ -34,6 +34,10 @@ const props = defineProps({
     type: Object,
     require: true,
   },
+  isloadingData: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 /**
@@ -48,9 +52,7 @@ const emit = defineEmits([
 
 const table = ref<any>(null);
 
-/**
- * ตั้งค่า pagination
- */
+/** ตั้งค่า pagination*/
 const currentPage = ref<number>(1);
 const pagination = ref({
   sortBy: "dateSendLeave",
@@ -235,7 +237,9 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
     </q-card>
   </div>
   <div>
+    <SkeletonTable v-if="isloadingData" :columns="leaveStore.columns" />
     <d-table
+      v-else
       ref="table"
       flat
       bordered