fix leave Skeleton Load

src/modules/05_leave/components/FormLeave/01_SickForm.vue

@@ -15,8 +15,7 @@ const typeForm = defineModel<string>("type", { required: true });
 const $q = useQuasar();
 const dataStore = useLeaveStore();
 const mixin = useCounterMixin();
-const { date2Thai, messageError, convertDateToAPI, showLoader, hideLoader } =
+const { date2Thai, messageError, convertDateToAPI } = mixin;
-  mixin;
 const edit = ref<boolean>(true);
 const leaveDocumentRef = ref<any>(null);
 
@@ -66,6 +65,8 @@ const leaveNumberRef = ref<object | null>(null);
 const leaveAddressRef = ref<object | null>(null);
 const leaveDetailRef = ref<object | null>(null);
 
+const isLoadLeaveDate = ref<boolean>(false);
+
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const FormRef: FormRef = {
   leaveWrote: leaveWroteRef,
@@ -149,7 +150,7 @@ const checkDate = computed(() => {
 // const totalCheck = ref<number | null>(null);
 async function fetchCheck() {
   if (formDataSick.leaveStartDate && formDataSick.leaveEndDate) {
-    showLoader();
+    isLoadLeaveDate.value = true;
     await http
       .post(config.API.leaveCheck(), {
         type: dataStore.typeId ?? null,
@@ -177,11 +178,10 @@ async function fetchCheck() {
       .catch((e: any) => {
         messageError($q, e);
         // totalCheck.value = null;
-        hideLoader();
       })
       .finally(() => {
-        hideLoader();
         leaveDocumentRef.value.resetValidation();
+        isLoadLeaveDate.value = false;
       });
   }
 }
@@ -425,6 +425,7 @@ onMounted(() => {
                 v-model="formDataSick.leaveTotal"
                 label="จำนวนวันที่ลา (วัน)"
                 readonly
+                :loading="isLoadLeaveDate"
               >
                 <template v-slot:hint>
                   <span style="color: red">
@@ -626,8 +627,10 @@ onMounted(() => {
         :disable="!isLeave"
         class="q-px-md items-center btnBlue"
         label="บันทึก"
-        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+        :loading="isLoadLeaveDate"
       >
+        <q-tooltip>บันทึกแบบร่าง</q-tooltip>
+      </q-btn>
       <q-btn
         v-if="data && statusCheck != 'NEW'"
         id="onSubmit"
@@ -637,8 +640,10 @@ onMounted(() => {
         color="primary"
         label="ยื่นใบลา"
         @click="onConfirm()"
-        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+        :loading="isLoadLeaveDate"
       >
+        <q-tooltip>ยื่นใบลา</q-tooltip>
+      </q-btn>
     </q-card-actions>
   </q-form>
 </template>

src/modules/05_leave/components/FormLeave/03_Birth.vue

@@ -13,14 +13,7 @@ import type { FormRef } from "@/modules/05_leave/interface/request/BirthForm";
 const $q = useQuasar();
 const dataStore = useLeaveStore();
 const mixin = useCounterMixin();
-const {
+const { date2Thai, messageError, convertDateToAPI } = mixin;
-  date2Thai,
-  dateToISO,
-  messageError,
-  convertDateToAPI,
-  showLoader,
-  hideLoader,
-} = mixin;
 
 const edit = ref<boolean>(true);
 const leaveId = ref<string>("");
@@ -45,6 +38,8 @@ const props = defineProps({
   },
 });
 
+const isLoadCheck = ref<boolean>(false);
+
 /** ข้อมูล v-model ของฟอร์ม */
 const formDataBirth = reactive<any>({
   type: dataStore.typeId,
@@ -145,14 +140,10 @@ const checkDate = computed(() => {
   }
 });
 
-/**
+/**  ตรวจสอบวันลา */
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-// const totalCheck = ref<number | null>(null);
 async function fetchCheck() {
   if (formDataBirth.leaveStartDate && formDataBirth.leaveEndDate) {
-    showLoader();
+    isLoadCheck.value = true;
     const checkDate = computed(() => {
       if (
         convertDateToAPI(formDataBirth.leaveEndDate) ==
@@ -163,9 +154,7 @@ async function fetchCheck() {
         return false;
       }
     });
-    // console.log("checkDate.value", checkDate.value);
+
-    // console.log("formDataBirth.leaveRangeEnd", formDataBirth.leaveRangeEnd);
-    // console.log("formDataBirth.leaveRange", formDataBirth.leaveRange);
     await http
       .post(config.API.leaveCheck(), {
         type: dataStore.typeId ?? null,
@@ -176,11 +165,9 @@ async function fetchCheck() {
           ? formDataBirth.leaveRange
           : formDataBirth.leaveRangeEnd,
       })
-      .then((res: any) => {
+      .then((res) => {
-        hideLoader();
         const data = res.data.result;
         formDataBirth.leaveTotal = data.totalDate;
-        // totalCheck.value = data.totalDate;
         reasonLeave.value =
           data.message != ""
             ? data.message
@@ -189,10 +176,11 @@ async function fetchCheck() {
             : "ช่วงวันลาที่ระบุไม่ถูกต้อง";
         isLeave.value = formDataBirth.leaveTotal > 0 ? data.isLeave : false;
       })
-      .catch((e: any) => {
+      .catch((e) => {
-        hideLoader();
-        // totalCheck.value = null;
         messageError($q, e);
+      })
+      .finally(() => {
+        isLoadCheck.value = false;
       });
   }
 }
@@ -433,6 +421,7 @@ onMounted(() => {
                 v-model="formDataBirth.leaveTotal"
                 label="จำนวนวันที่ลา (วัน)"
                 readonly
+                :loading="isLoadCheck"
               >
                 <template v-slot:hint>
                   <span style="color: red">
@@ -596,30 +585,31 @@ onMounted(() => {
 
     <div class="row col-12 q-pt-md">
       <q-space />
-      <!-- <div v-if="totalCheck == 0" class="text-red q-mr-sm">**จำนวนวันลาของท่านไม่ถูกต้อง หรือวันที่ยื่นลาของท่านตรงกับวันหยุด</div> -->
       <q-btn
         v-if="!props.data || props.data.status == 'DRAFT'"
         id="onSubmit"
         type="submit"
         unelevated
-        dense
         :disable="!isLeave"
         class="q-px-md items-center btnBlue"
         label="บันทึก"
-        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+        :loading="isLoadCheck"
       >
+        <q-tooltip>บันทึกแบบร่าง</q-tooltip>
+      </q-btn>
       <q-btn
         v-if="data && statusCheck != 'NEW'"
         id="onSubmit"
         type="button"
         unelevated
-        dense
         class="q-px-md items-center q-ml-sm"
         color="primary"
         label="ยื่นใบลา"
         @click="onConfirm()"
-        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+        :loading="isLoadCheck"
       >
+        <q-tooltip>ยื่นใบลา</q-tooltip>
+      </q-btn>
     </div>
   </form>
 </template>

src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted, computed, watch } from "vue";
 import { useQuasar } from "quasar";
-import { useRouter } from "vue-router";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -14,17 +13,8 @@ import type { FormRef } from "@/modules/05_leave/interface/request/HelpWifeForm"
 const $q = useQuasar();
 const dataStore = useLeaveStore();
 const mixin = useCounterMixin();
-const {
+const { date2Thai, messageError, convertDateToAPI } = mixin;
-  date2Thai,
-  calculateDurationYmd,
-  dateToISO,
-  messageError,
-  convertDateToAPI,
-  showLoader,
-  hideLoader,
-} = mixin;
 
-const leaveText = ref<string>("");
 const edit = ref<boolean>(true);
 const leaveId = ref<string>("");
 
@@ -161,14 +151,12 @@ const checkDate = computed(() => {
   }
 });
 
-/**
+const isLoadCheck = ref<boolean>(false);
- * check ว่าลาได้ไหม จาก api
+
- * @param formData
+/** fetchCheck ว่าลาได้ไหม จาก api */
- */
-// const totalCheck = ref<number | null>(null);
 async function fetchCheck() {
   if (formDataHelpWife.leaveStartDate && formDataHelpWife.leaveEndDate) {
-    showLoader();
+    isLoadCheck.value = true;
     await http
       .post(config.API.leaveCheck(), {
         type: dataStore.typeId ?? null,
@@ -184,8 +172,6 @@ async function fetchCheck() {
         const data = res.data.result;
         formDataHelpWife.leaveTotal =
           data.totalDate - data.sumDateWork - data.sumDateHoliday;
-        // totalCheck.value =
-        //   data.totalDate - data.sumDateWork - data.sumDateHoliday;
         reasonLeave.value =
           data.message != ""
             ? data.message
@@ -193,23 +179,21 @@ async function fetchCheck() {
             ? "จำนวนวันลาเกินที่กำหนด"
             : "ช่วงวันลาที่ระบุไม่ถูกต้อง";
         isLeave.value = formDataHelpWife.leaveTotal > 0 ? data.isLeave : false;
-        hideLoader();
       })
-      .catch((e: any) => {
+      .catch((e) => {
         messageError($q, e);
-        // totalCheck.value = null;
+      })
-        hideLoader();
+      .finally(() => {
+        isLoadCheck.value = false;
       });
   }
 }
 
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
-
 watch(
   () => props.data,
   async () => {
     if (props.data) {
-      // totalCheck.value = null;
       formDataHelpWife.leaveWrote = props.data.leaveWrote;
       formDataHelpWife.wifeDayName = props.data.wifeDayName;
       formDataHelpWife.wifeDayDateBorn = props.data.wifeDayDateBorn;
@@ -229,7 +213,6 @@ watch(
 /**Hook */
 onMounted(async () => {
   if (props.data) {
-    // totalCheck.value = null;
     formDataHelpWife.leaveWrote = props.data.leaveWrote;
     formDataHelpWife.wifeDayName = props.data.wifeDayName;
     formDataHelpWife.wifeDayDateBorn = props.data.wifeDayDateBorn;
@@ -438,6 +421,7 @@ onMounted(async () => {
                 v-model="formDataHelpWife.leaveTotal"
                 label="จำนวนวันที่ลา (วัน)"
                 readonly
+                :loading="isLoadCheck"
               >
                 <template v-slot:hint>
                   <span style="color: red">
@@ -656,24 +640,26 @@ onMounted(async () => {
         id="onSubmit"
         type="submit"
         unelevated
-        dense
         :disable="!isLeave"
         class="q-px-md items-center btnBlue"
         label="บันทึก"
-        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+        :loading="isLoadCheck"
       >
+        <q-tooltip>บันทึกแบบร่าง</q-tooltip>
+      </q-btn>
       <q-btn
         v-if="data && statusCheck != 'NEW'"
         id="onSubmit"
         type="button"
         unelevated
-        dense
         class="q-px-md items-center q-ml-sm"
         color="primary"
         label="ยื่นใบลา"
         @click="onConfirm()"
-        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+        :loading="isLoadCheck"
       >
+        <q-tooltip>ยื่นใบลา</q-tooltip>
+      </q-btn>
     </div>
   </form>
 </template>

src/modules/05_leave/components/FormLeave/05_VacationForm.vue

@@ -14,14 +14,7 @@ import type { DataOption } from "@/modules/14_IDP/interface/Main";
 const $q = useQuasar();
 const dataStore = useLeaveStore();
 const mixin = useCounterMixin();
-const {
+const { date2Thai, messageError, convertDateToAPI } = mixin;
-  date2Thai,
-  dateToISO,
-  messageError,
-  convertDateToAPI,
-  showLoader,
-  hideLoader,
-} = mixin;
 
 const edit = ref<boolean>(true);
 const leaveId = ref<string>("");
@@ -164,10 +157,11 @@ const checkDate = computed(() => {
   }
 });
 
-// const totalCheck = ref<number | null>(null);
+const isLoadCheck = ref<boolean>(false);
+
 async function fetchCheck() {
   if (formDataVacation.leaveStartDate && formDataVacation.leaveEndDate) {
-    showLoader();
+    isLoadCheck.value = true;
     await http
       .post(config.API.leaveCheck(), {
         type: dataStore.typeId ?? null,
@@ -183,8 +177,6 @@ async function fetchCheck() {
         const data = res.data.result;
         formDataVacation.leaveTotal =
           data.totalDate - data.sumDateWork - data.sumDateHoliday;
-        // totalCheck.value =
-        //   data.totalDate - data.sumDateWork - data.sumDateHoliday;
 
         reasonLeave.value =
           data.message != ""
@@ -193,12 +185,12 @@ async function fetchCheck() {
             ? "จำนวนวันลาเกินที่กำหนด"
             : "ช่วงวันลาที่ระบุไม่ถูกต้อง";
         isLeave.value = formDataVacation.leaveTotal > 0 ? data.isLeave : false;
-        hideLoader();
       })
       .catch((e: any) => {
         messageError($q, e);
-        // totalCheck.value = null;
+      })
-        hideLoader();
+      .finally(() => {
+        isLoadCheck.value = false;
       });
   }
 }
@@ -207,7 +199,6 @@ watch(
   () => props.data,
   () => {
     if (props.data) {
-      // totalCheck.value = null;
       formDataVacation.leaveWrote = props.data.leaveWrote;
       formDataVacation.restDayOldTotal = props.data.restDayOldTotal;
       formDataVacation.restDayCurrentTotal = props.data.restDayCurrentTotal;
@@ -456,6 +447,7 @@ onMounted(() => {
             v-model="formDataVacation.leaveTotal"
             label="จำนวนวันที่ลา (วัน)"
             readonly
+            :loading="isLoadCheck"
           >
             <template v-slot:hint>
               <span style="color: red">
@@ -630,30 +622,31 @@ onMounted(() => {
     <q-separator class="q-mt-sm" />
     <div class="row col-12 q-pt-md items-center">
       <q-space />
-      <!-- <div v-if="totalCheck == 0" class="text-red q-mr-sm">**จำนวนวันลาของท่านไม่ถูกต้อง หรือวันที่ยื่นลาของท่านตรงกับวันหยุด</div> -->
       <q-btn
         v-if="!props.data || props.data.status == 'DRAFT'"
         id="onSubmit"
         type="submit"
         unelevated
-        dense
         :disable="!isLeave"
         class="q-px-md items-center btnBlue"
         label="บันทึก"
-        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+        :loading="isLoadCheck"
       >
+        <q-tooltip>บันทึกแบบร่าง</q-tooltip>
+      </q-btn>
       <q-btn
         v-if="data && statusCheck != 'NEW'"
         id="onSubmit"
         type="button"
         unelevated
-        dense
         class="q-px-md items-center q-ml-sm"
         color="primary"
         label="ยื่นใบลา"
         @click="onConfirm()"
-        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+        :loading="isLoadCheck"
       >
+        <q-tooltip>ยื่นใบลา</q-tooltip>
+      </q-btn>
     </div>
   </form>
 </template>

src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue

@@ -13,8 +13,7 @@ import type { OrdinationForm } from "@/modules/05_leave/interface/request/AddAbs
 const $q = useQuasar();
 const dataStore = useLeaveStore();
 const mixin = useCounterMixin();
-const { date2Thai, messageError, convertDateToAPI, showLoader, hideLoader } =
+const { date2Thai, messageError, convertDateToAPI } = mixin;
-  mixin;
 const edit = ref<boolean>(true);
 const leaveId = ref<string>("");
 /** รับ props มาจากหน้าหลัก */
@@ -179,14 +178,12 @@ const checkDate = computed(() => {
   }
 });
 
-/**
+const isLoadCheck = ref<boolean>(false);
- * check ว่าลาได้ไหม จาก api
+
- * @param formData
+/** check ว่าลาได้ไหม จาก api*/
- */
-//  const totalCheck = ref<number|null>(null)
 async function fetchCheck() {
   if (formDataOrdination.leaveStartDate && formDataOrdination.leaveEndDate) {
-    showLoader();
+    isLoadCheck.value = true;
     await http
       .post(config.API.leaveCheck(), {
         type: dataStore.typeId ?? null,
@@ -201,7 +198,6 @@ async function fetchCheck() {
       .then((res: any) => {
         const data = res.data.result;
         formDataOrdination.leaveTotal = data.totalDate;
-        // totalCheck.value = data.totalDate;
         reasonLeave.value =
           data.message != ""
             ? data.message
@@ -210,12 +206,12 @@ async function fetchCheck() {
             : "ช่วงวันลาที่ระบุไม่ถูกต้อง";
         isLeave.value =
           formDataOrdination.leaveTotal > 0 ? data.isLeave : false;
-        hideLoader();
       })
       .catch((e: any) => {
         messageError($q, e);
-        // totalCheck.value = null;
+      })
-        hideLoader();
+      .finally(() => {
+        isLoadCheck.value = false;
       });
   }
 }
@@ -488,6 +484,7 @@ onMounted(async () => {
                 v-model="formDataOrdination.leaveTotal"
                 label="จำนวนวันที่ลา (วัน)"
                 readonly
+                :loading="isLoadCheck"
               >
                 <template v-slot:hint>
                   <span style="color: red">
@@ -843,24 +840,26 @@ onMounted(async () => {
         id="onSubmit"
         type="submit"
         unelevated
-        dense
         class="q-px-md items-center btnBlue"
         label="บันทึก"
         :disable="!isLeave"
-        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+        :loading="isLoadCheck"
       >
+        <q-tooltip>บันทึกแบบร่าง</q-tooltip>
+      </q-btn>
       <q-btn
         v-if="data && statusCheck != 'NEW'"
         id="onSubmit"
         type="button"
         unelevated
-        dense
         class="q-px-md items-center q-ml-sm"
         color="primary"
         label="ยื่นใบลา"
         @click="onConfirm()"
-        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+        :loading="isLoadCheck"
       >
+        <q-tooltip>ยื่นใบลา</q-tooltip>
+      </q-btn>
     </div>
   </form>
 </template>

src/modules/05_leave/components/FormLeave/07_HajjForm.vue

@@ -17,10 +17,8 @@ const {
   date2Thai,
   calculateDurationYmd,
   messageError,
-  dateToISO,
+
   convertDateToAPI,
-  showLoader,
-  hideLoader,
 } = mixin;
 
 const edit = ref<boolean>(true);
@@ -79,7 +77,6 @@ const formRef: HajiForm = {
 };
 
 /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("");
 const fileDocDataUpload = ref<File[]>([]);
 const fileUploadDoc = async (files: any) => {
   files.forEach((file: any) => {
@@ -145,10 +142,10 @@ const checkDate = computed(() => {
   }
 });
 
-// const totalCheck = ref<number | null>(null);
+const isLoadCheck = ref<boolean>(false);
 async function fetchCheck() {
   if (formDataHaji.leaveStartDate && formDataHaji.leaveEndDate) {
-    showLoader();
+    isLoadCheck.value = true;
     await http
       .post(config.API.leaveCheck(), {
         type: dataStore.typeId ?? null,
@@ -161,9 +158,7 @@ async function fetchCheck() {
       })
       .then((res: any) => {
         const data = res.data.result;
-        // isLeave.value = data.isLeave;
         formDataHaji.leaveTotal = data.totalDate;
-        // totalCheck.value = data.totalDate;
         leaveText.value = calculateDurationYmd(
           convertDateToAPI(formDataHaji.leaveStartDate),
           convertDateToAPI(formDataHaji.leaveEndDate)
@@ -175,12 +170,12 @@ async function fetchCheck() {
             ? "จำนวนวันลาเกินที่กำหนด"
             : "ช่วงวันลาที่ระบุไม่ถูกต้อง";
         isLeave.value = formDataHaji.leaveTotal > 0 ? data.isLeave : false;
-        hideLoader();
       })
       .catch((e: any) => {
         messageError($q, e);
-        // totalCheck.value = null;
+      })
-        hideLoader();
+      .finally(() => {
+        isLoadCheck.value = false;
       });
   }
 }
@@ -415,6 +410,7 @@ onMounted(async () => {
                 v-model="formDataHaji.leaveTotal"
                 label="จำนวนวันที่ลา (วัน)"
                 readonly
+                :loading="isLoadCheck"
               >
                 <template v-slot:hint>
                   <span style="color: red">
@@ -589,24 +585,26 @@ onMounted(async () => {
         id="onSubmit"
         type="submit"
         unelevated
-        dense
         class="q-px-md items-center btnBlue"
         label="บันทึก"
         :disable="!isLeave"
-        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+        :loading="isLoadCheck"
       >
+        <q-tooltip>บันทึกแบบร่าง</q-tooltip>
+      </q-btn>
       <q-btn
         v-if="data && statusCheck != 'NEW'"
         id="onSubmit"
         type="button"
         unelevated
-        dense
         class="q-px-md items-center q-ml-sm"
         color="primary"
         label="ยื่นใบลา"
         @click="onConfirm()"
-        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+        :loading="isLoadCheck"
       >
+        <q-tooltip>ยื่นใบลา</q-tooltip>
+      </q-btn>
     </div>
   </form>
 </template>

src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue

@@ -13,15 +13,8 @@ import type { MilitaryForm } from "@/modules/05_leave/interface/request/AddAbsen
 const dataStore = useLeaveStore();
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const {
+const { date2Thai, calculateDurationYmd, messageError, convertDateToAPI } =
-  date2Thai,
+  mixin;
-  calculateDurationYmd,
-  dateToISO,
-  messageError,
-  convertDateToAPI,
-  showLoader,
-  hideLoader,
-} = mixin;
 const edit = ref<boolean>(true);
 const leaveId = ref<string>("");
 const leaveText = ref<string>("");
@@ -163,14 +156,12 @@ const checkDate = computed(() => {
   }
 });
 
-/**
+const isLoadCheck = ref<boolean>(false);
- * check ว่าลาได้ไหม จาก api
+
- * @param formData
+/** check ว่าลาได้ไหม จาก api*/
- */
-//  const totalCheck = ref<number|null>(null)
 async function fetchCheck() {
   if (formDataMilitary.leaveStartDate && formDataMilitary.leaveEndDate) {
-    showLoader();
+    isLoadCheck.value = true;
     await http
       .post(config.API.leaveCheck(), {
         type: dataStore.typeId ?? null,
@@ -186,35 +177,22 @@ async function fetchCheck() {
         const data = res.data.result;
         isLeave.value = data.isLeave;
         formDataMilitary.leaveTotal = data.totalDate;
-        // totalCheck.value = data.totalDate;
         leaveText.value = calculateDurationYmd(
           convertDateToAPI(formDataMilitary.leaveStartDate),
           convertDateToAPI(formDataMilitary.leaveEndDate)
         );
         reasonLeave.value =
           data.message != "" ? data.message : "จำนวนวันลาเกินที่กำหนด";
-
-        hideLoader();
       })
       .catch((e: any) => {
         messageError($q, e);
-        // totalCheck.value = null
+      })
-        hideLoader();
+      .finally(() => {
+        isLoadCheck.value = false;
       });
   }
 }
 
-// /**
-//  * function อัพเดทค่า LeaveTotal
-//  */
-// function updateLeaveTotal() {
-//   const newLeaveTotal = calculateDurationYmd(
-//     formDataMilitary.leaveStartDate,
-//     formDataMilitary.leaveEndDate
-//   );
-//   formDataMilitary.leaveTotal = newLeaveTotal;
-// }
-
 watch(
   () => props.data,
   async () => {
@@ -463,6 +441,7 @@ onMounted(async () => {
                 v-model="leaveText"
                 label="จำนวนวันที่ลา"
                 readonly
+                :loading="isLoadCheck"
               >
                 <template v-slot:hint>
                   <span style="color: red">
@@ -675,24 +654,26 @@ onMounted(async () => {
         id="onSubmit"
         type="submit"
         unelevated
-        dense
         class="q-px-md items-center btnBlue"
         label="บันทึก"
         :disable="!isLeave"
-        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+        :loading="isLoadCheck"
       >
+        <q-tooltip>บันทึกแบบร่าง</q-tooltip>
+      </q-btn>
       <q-btn
         v-if="data && statusCheck != 'NEW'"
         id="onSubmit"
         type="button"
         unelevated
-        dense
         class="q-px-md items-center q-ml-sm"
         color="primary"
         label="ยื่นใบลา"
         @click="onConfirm()"
-        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+        :loading="isLoadCheck"
       >
+        <q-tooltip>ยื่นใบลา</q-tooltip>
+      </q-btn>
     </div>
   </form>
 </template>

src/modules/05_leave/components/FormLeave/09_StudyForm.vue

@@ -16,12 +16,9 @@ const mixin = useCounterMixin();
 const {
   date2Thai,
   calculateDurationYmd,
-  dateToISO,
   messageError,
   arabicNumberToText,
   convertDateToAPI,
-  showLoader,
-  hideLoader,
 } = mixin;
 
 const leaveText = ref<string>("");
@@ -182,10 +179,10 @@ const checkDate = computed(() => {
   }
 });
 
-// const totalCheck = ref<number | null>(null);
+const isLoadCheck = ref<boolean>(false);
 async function fetchCheck() {
   if (formDataStudy.leaveStartDate && formDataStudy.leaveEndDate) {
-    showLoader();
+    isLoadCheck.value = true;
     await http
       .post(config.API.leaveCheck(), {
         type: dataStore.typeId ?? null,
@@ -200,7 +197,7 @@ async function fetchCheck() {
         const data = res.data.result;
         isLeave.value = data.isLeave;
         formDataStudy.leaveTotal = data.totalDate;
-        // totalCheck.value = data.totalDate;
+
         leaveText.value = calculateDurationYmd(
           convertDateToAPI(formDataStudy.leaveStartDate),
           convertDateToAPI(formDataStudy.leaveEndDate)
@@ -208,27 +205,16 @@ async function fetchCheck() {
         reasonLeave.value = data.message
           ? data.message
           : "จำนวนวันลาเกินที่กำหนด";
-        hideLoader();
       })
       .catch((e: any) => {
         messageError($q, e);
-        // totalCheck.value = null;
+      })
-        hideLoader();
+      .finally(() => {
+        isLoadCheck.value = false;
       });
   }
 }
 
-// /**
-//  * function อัพเดทค่า LeaveTotal
-//  */
-// function updateLeaveTotal() {
-//   const newLeaveTotal = calculateDurationYmd(
-//     formDataStudy.leaveStartDate,
-//     formDataStudy.leaveEndDate
-//   );
-//   formDataStudy.leaveTotal = newLeaveTotal;
-// }
-
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 watch(
   () => props.data,
@@ -490,6 +476,7 @@ onMounted(async () => {
                 v-model="leaveText"
                 label="มีกำหนด"
                 readonly
+                :loading="isLoadCheck"
               >
                 <template v-slot:hint>
                   <span style="color: red">
@@ -828,24 +815,26 @@ onMounted(async () => {
         id="onSubmit"
         type="submit"
         unelevated
-        dense
         class="q-px-md items-center btnBlue"
         label="บันทึก"
         :disable="!isLeave"
-        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+        :loading="isLoadCheck"
       >
+        <q-tooltip>บันทึกแบบร่าง</q-tooltip>
+      </q-btn>
       <q-btn
         v-if="data && statusCheck != 'NEW'"
         id="onSubmit"
         type="button"
         unelevated
-        dense
         class="q-px-md items-center q-ml-sm"
         color="primary"
         label="ยื่นใบลา"
         @click="onConfirm()"
-        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+        :loading="isLoadCheck"
       >
+        <q-tooltip>ยื่นใบลา</q-tooltip>
+      </q-btn>
     </div>
   </form>
 </template>

src/modules/05_leave/components/FormLeave/10_TrainForm.vue

@@ -19,8 +19,6 @@ const {
   calculateDurationYmd,
   messageError,
   convertDateToAPI,
-  showLoader,
-  hideLoader,
 } = mixin;
 
 const leaveText = ref<string>("");
@@ -167,10 +165,11 @@ const checkDate = computed(() => {
   }
 });
 
-// const totalCheck = ref<number | null>(null);
+const isLoadCheck = ref<boolean>(false);
+
 async function fetchCheck() {
   if (formDataTrain.leaveStartDate && formDataTrain.leaveEndDate) {
-    showLoader();
+    isLoadCheck.value = true;
     await http
       .post(config.API.leaveCheck(), {
         type: dataStore.typeId ?? null,
@@ -185,7 +184,7 @@ async function fetchCheck() {
         const data = res.data.result;
         isLeave.value = data.isLeave;
         formDataTrain.leaveTotal = data.totalDate;
-        // totalCheck.value = data.totalDate;
+
         leaveText.value = calculateDurationYmd(
           convertDateToAPI(formDataTrain.leaveStartDate),
           convertDateToAPI(formDataTrain.leaveEndDate)
@@ -193,32 +192,20 @@ async function fetchCheck() {
         reasonLeave.value = data.message
           ? data.message
           : "จำนวนวันลาเกินที่กำหนด";
-        hideLoader();
       })
       .catch((e: any) => {
-        // totalCheck.value = null;
         messageError($q, e);
-        hideLoader();
+      })
+      .finally(() => {
+        isLoadCheck.value = false;
       });
   }
 }
 
-/**
- * function อัพเดทค่า LeaveTotal
- */
-function updateLeaveTotal() {
-  const newLeaveTotal = calculateDurationYmd(
-    formDataTrain.leaveStartDate,
-    formDataTrain.leaveEndDate
-  );
-  formDataTrain.leaveTotal = newLeaveTotal;
-}
-
 watch(
   () => props.data,
   async () => {
     if (props.data) {
-      // totalCheck.value = null;
       formDataTrain.leaveWrote = props.data.leaveWrote;
       formDataTrain.leaveStartDate = props.data.leaveStartDate;
       formDataTrain.leaveEndDate = props.data.leaveEndDate;
@@ -470,6 +457,7 @@ onMounted(async () => {
                 v-model="leaveText"
                 label="มีกำหนด"
                 readonly
+                :loading="isLoadCheck"
               >
                 <template v-slot:hint>
                   <span style="color: red">
@@ -789,24 +777,26 @@ onMounted(async () => {
         id="onSubmit"
         type="submit"
         unelevated
-        dense
         class="q-px-md items-center btnBlue"
         label="บันทึก"
         :disable="!isLeave"
-        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+        :loading="isLoadCheck"
       >
+        <q-tooltip>บันทึกแบบร่าง</q-tooltip>
+      </q-btn>
       <q-btn
         v-if="data && statusCheck != 'NEW'"
         id="onSubmit"
         type="button"
         unelevated
-        dense
         class="q-px-md items-center q-ml-sm"
         color="primary"
         label="ยื่นใบลา"
         @click="onConfirm()"
-        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+        :loading="isLoadCheck"
       >
+        <q-tooltip>ยื่นใบลา</q-tooltip>
+      </q-btn>
     </div>
   </form>
 </template>

src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ref, reactive, watch, onMounted, computed } from "vue";
-import { useRouter } from "vue-router";
 import { useQuasar } from "quasar";
 
 import http from "@/plugins/http";
@@ -79,8 +78,6 @@ const FormRef: FormRef = {
 };
 
 /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("");
-const nameFileDraft = ref<string>("");
 const fileDocDataUpload = ref<File[]>([]);
 const fileUploadDoc = async (files: any) => {
   files.forEach((file: any) => {
@@ -171,12 +168,13 @@ const checkDate = computed(() => {
  * @param formData
  */
 const isLeave = ref<boolean>(true);
-// const totalCheck = ref<number|null>(null)
+const isLoadCheck = ref<boolean>(false);
 async function fetchCheck() {
   if (
     formDataWorkInternational.leaveStartDate &&
     formDataWorkInternational.leaveEndDate
   ) {
+    isLoadCheck.value = true;
     await http
       .post(config.API.leaveCheck(), {
         type: dataStore.typeId ?? null,
@@ -193,7 +191,6 @@ async function fetchCheck() {
         const data = res.data.result;
         isLeave.value = data.isLeave;
         formDataWorkInternational.leaveTotal = data.totalDate;
-        // totalCheck.value = data.totalDate;
         leaveText.value = calculateDurationYmd(
           convertDateToAPI(formDataWorkInternational.leaveStartDate),
           convertDateToAPI(formDataWorkInternational.leaveEndDate)
@@ -203,8 +200,10 @@ async function fetchCheck() {
           : "จำนวนวันลาเกินที่กำหนด";
       })
       .catch((e: any) => {
-        // totalCheck.value = null;
         messageError($q, e);
+      })
+      .finally(() => {
+        isLoadCheck.value = false;
       });
   }
 }
@@ -249,17 +248,17 @@ watch(
   }
 );
 
-watch(
+// watch(
-  () => formDataWorkInternational.leaveEndDate,
+//   () => formDataWorkInternational.leaveEndDate,
-  () => {
+//   () => {
-    if (
+//     if (
-      formDataWorkInternational.leaveStartDate !== null &&
+//       formDataWorkInternational.leaveStartDate !== null &&
-      formDataWorkInternational.leaveEndDate !== null
+//       formDataWorkInternational.leaveEndDate !== null
-    ) {
+//     ) {
-      fetchCheck();
+//       fetchCheck();
-    }
+//     }
-  }
+//   }
-);
+// );
 
 /**Hook */
 onMounted(async () => {
@@ -475,6 +474,7 @@ onMounted(async () => {
                 v-model="leaveText"
                 label="มีกำหนด"
                 readonly
+                :loading="isLoadCheck"
               >
                 <template v-slot:hint>
                   <span style="color: red">
@@ -644,24 +644,26 @@ onMounted(async () => {
           id="onSubmit"
           type="submit"
           unelevated
-          dense
           class="q-px-md items-center btnBlue"
           label="บันทึก"
           :disable="!isLeave"
-          ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+          :loading="isLoadCheck"
         >
+          <q-tooltip>บันทึกแบบร่าง</q-tooltip>
+        </q-btn>
         <q-btn
           v-if="data && statusCheck != 'NEW'"
           id="onSubmit"
           type="button"
           unelevated
-          dense
           class="q-px-md items-center q-ml-sm"
           color="primary"
           label="ยื่นใบลา"
           @click="onConfirm()"
-          ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+          :loading="isLoadCheck"
         >
+          <q-tooltip>ยื่นใบลา</q-tooltip>
+        </q-btn>
       </div>
     </div>
   </form>

src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue

@@ -4,7 +4,6 @@ import { useQuasar } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useLeaveStore } from "@/modules/05_leave/store";
 
@@ -15,15 +14,8 @@ const dataStore = useLeaveStore();
 const $q = useQuasar();
 const mixin = useCounterMixin();
 
-const {
+const { date2Thai, calculateDurationYmd, messageError, convertDateToAPI } =
-  date2Thai,
+  mixin;
-  calculateDurationYmd,
-  dateToISO,
-  messageError,
-  convertDateToAPI,
-  showLoader,
-  hideLoader,
-} = mixin;
 
 const leaveText = ref<string>("");
 const edit = ref<boolean>(true);
@@ -209,13 +201,13 @@ const reasonLeave = ref<string>("");
  * @param formData
  */
 const isLeave = ref<boolean>(true);
-// const totalCheck = ref<number | null>(null);
+const isLoadCheck = ref<boolean>(false);
 async function fetchCheck() {
   if (
     formDataFollowSpouse.leaveStartDate &&
     formDataFollowSpouse.leaveEndDate
   ) {
-    showLoader();
+    isLoadCheck.value = true;
     await http
       .post(config.API.leaveCheck(), {
         type: dataStore.typeId ?? null,
@@ -241,12 +233,12 @@ async function fetchCheck() {
           ? data.message
           : "จำนวนวันลาเกินที่กำหนด";
         checkTotalHistory();
-        hideLoader();
       })
       .catch((e: any) => {
         messageError($q, e);
-        // totalCheck.value = null
+      })
-        hideLoader();
+      .finally(() => {
+        isLoadCheck.value = false;
       });
   }
 }
@@ -568,6 +560,7 @@ onMounted(async () => {
                 v-model="leaveText"
                 label="เป็นเวลา"
                 readonly
+                :loading="isLoadCheck"
               >
                 <template v-slot:hint>
                   <span style="color: red">
@@ -917,24 +910,26 @@ onMounted(async () => {
         id="onSubmit"
         type="submit"
         unelevated
-        dense
         class="q-px-md items-center btnBlue"
         label="บันทึก"
         :disable="!isLeave"
-        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+        :loading="isLoadCheck"
       >
+        <q-tooltip>บันทึกแบบร่าง</q-tooltip>
+      </q-btn>
       <q-btn
         v-if="data && statusCheck != 'NEW'"
         id="onSubmit"
         type="button"
         unelevated
-        dense
         class="q-px-md items-center q-ml-sm"
         color="primary"
         label="ยื่นใบลา"
         @click="onConfirm()"
-        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+        :loading="isLoadCheck"
       >
+        <q-tooltip>ยื่นใบลา</q-tooltip>
+      </q-btn>
     </div>
   </form>
 </template>

src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, computed, watch } from "vue";
-import { useQuasar } from "quasar";
+import { is, useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 
 import type { RehabilitationForm } from "@/modules/05_leave/interface/request/AddAbsence";
@@ -8,6 +8,7 @@ import { useLeaveStore } from "@/modules/05_leave/store";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import genReport from "@/plugins/genreport";
+import { load } from "@/router/loader";
 
 const $q = useQuasar();
 const dataStore = useLeaveStore();
@@ -125,17 +126,14 @@ const checkDate = computed(() => {
   }
 });
 
-/**
+const isLoadCheck = ref<boolean>(false);
- * check ว่าลาได้ไหม จาก api
+/** check ว่าลาได้ไหม จาก api */
- * @param formData
- */
-//  const totalCheck = ref<number|null>(null)
 async function fetchCheck() {
   if (
     formDataRehabilitation.leaveStartDate &&
     formDataRehabilitation.leaveEndDate
   ) {
-    showLoader();
+    isLoadCheck.value = true;
     await http
       .post(config.API.leaveCheck(), {
         type: dataStore.typeId ?? null,
@@ -167,7 +165,7 @@ async function fetchCheck() {
         // totalCheck.value = null
       })
       .finally(() => {
-        hideLoader();
+        isLoadCheck.value = false;
       });
   }
 }
@@ -438,6 +436,7 @@ onMounted(async () => {
                 v-model="leaveText"
                 label="เป็นเวลา"
                 readonly
+                :loading="isLoadCheck"
               >
                 <template v-slot:hint>
                   <span style="color: red">
@@ -600,24 +599,26 @@ onMounted(async () => {
           id="onSubmit"
           type="submit"
           unelevated
-          dense
           class="q-px-md items-center btnBlue"
           label="บันทึก"
           :disable="!isLeave"
-          ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+          :loading="isLoadCheck"
         >
+          <q-tooltip>บันทึกแบบร่าง</q-tooltip>
+        </q-btn>
         <q-btn
           v-if="data && statusCheck != 'NEW'"
           id="onSubmit"
           type="button"
           unelevated
-          dense
           class="q-px-md items-center q-ml-sm"
           color="primary"
           label="ยื่นใบลา"
           @click="onConfirm()"
-          ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+          :loading="isLoadCheck"
         >
+          <q-tooltip>ยื่นใบลา</q-tooltip>
+        </q-btn>
       </div>
     </div>
   </q-form>

src/modules/05_leave/components/FormLeave/Form.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
+import { useQuasar, type QTableProps } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -8,7 +9,7 @@ import { useLeaveStore } from "@/modules/05_leave/store";
 import { useDataStore } from "@/stores/data";
 
 import DialogHeader from "@/components/DialogHeader.vue";
-import { useQuasar, type QTableProps } from "quasar";
+import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const mixin = useCounterMixin();
 const dataStore = useLeaveStore();
@@ -37,6 +38,7 @@ const pagination = ref({
 });
 
 const selected = ref<any[]>([]);
+const isLoading = ref<boolean>(false);
 const rows = ref<any[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
@@ -93,7 +95,7 @@ function closeDialog() {
 }
 
 async function getCommander() {
-  showLoader();
+  isLoading.value = true;
   await http
     .put(config.API.commanderOperate, {
       isAct: isAct.value,
@@ -108,17 +110,20 @@ async function getCommander() {
     })
     .then((res) => {
       rows.value = res.data.result.data;
+      total.value = res.data.result.total;
+      totalList.value = Math.ceil(
+        res.data.result.total / pagination.value.rowsPerPage
+      );
     })
     .catch((e) => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
 function updatePagination(newPagination: any) {
-  pagination.value.page = 1;
   pagination.value.rowsPerPage = newPagination.rowsPerPage;
 }
 
@@ -345,7 +350,9 @@ onMounted(() => {
               </div>
             </div>
             <div class="col-12">
+              <SkeletonTable v-if="isLoading" :columns="columns" />
               <d-table
+                v-else
                 ref="table"
                 :columns="columns"
                 :rows="rows"
@@ -357,6 +364,7 @@ onMounted(() => {
                 :rows-per-page-options="[10, 25, 50, 100]"
                 selection="single"
                 @update:pagination="updatePagination"
+                v-model:pagination="pagination"
                 v-model:selected="selected"
               >
                 <template v-slot:pagination="scope">

src/modules/05_leave/store.ts

@@ -28,6 +28,7 @@ export const useLeaveStore = defineStore("Leave", () => {
   const fiscalYearyear = ref<Number | null>(new Date().getFullYear());
   const rows = ref<ListLeaveTable[]>([]);
   const leaveTypeData = ref<TypeLeave[]>([]);
+  const isLoadingProfile = ref<boolean>(false); // สถานะการโหลดข้อมูลโปรไฟล์
 
   /**
    * function เรียกข้อมูลรายการลา Table
@@ -307,7 +308,8 @@ export const useLeaveStore = defineStore("Leave", () => {
 
   //ดึงข้อมูล profile จาก API
   async function fetchProfile() {
-    showLoader();
+    // showLoader();
+    isLoadingProfile.value = true;
     await http
       .post(config.API.leaveProfile(), { type: typeId.value })
       .then((res: any) => {
@@ -345,7 +347,8 @@ export const useLeaveStore = defineStore("Leave", () => {
         console.log(e);
       })
       .finally(() => {
-        hideLoader();
+        // hideLoader();
+        isLoadingProfile.value = false;
       });
   }
 
@@ -474,5 +477,6 @@ export const useLeaveStore = defineStore("Leave", () => {
     converstType,
 
     fetchLeaveTypeData,
+    isLoadingProfile,
   };
 });

src/modules/05_leave/views/AddPage.vue

@@ -209,11 +209,92 @@ onMounted(async () => {
                     ข้อมูลการลา
                   </div>
                 </div>
-                <FormPart2 :model="model" />
+                <q-card
+                  bordered
+                  class="q-pa-md bg-grey-1"
+                  v-if="dataStore.isLoadingProfile"
+                >
+                  <div class="row q-col-gutter-sm">
+                    <div class="col-12">
+                      <div class="row q-col-gutter-sm">
+                        <div class="col-md-4 col-xs-12">
+                          <q-skeleton height="40px" />
+                        </div>
+                        <div class="col-md-4 col-xs-12">
+                          <q-skeleton height="40px" />
+                        </div>
+                      </div>
+                    </div>
+                    <div class="col-md-6 col-xs-12">
+                      <q-skeleton height="40px" />
+                    </div>
+                    <div class="col-md-6 col-xs-12">
+                      <q-skeleton height="40px" />
+                    </div>
+                    <div class="col-md-4 col-xs-12">
+                      <q-skeleton height="40px" />
+                    </div>
+                    <div class="col-md-4 col-xs-12">
+                      <q-skeleton height="40px" />
+                    </div>
+                    <div class="col-md-4 col-xs-12">
+                      <q-skeleton height="40px" />
+                    </div>
+                    <div class="col-md-4 col-xs-12">
+                      <q-skeleton height="40px" />
+                    </div>
+                  </div>
+                </q-card>
+
+                <FormPart2 v-else :model="model" />
               </div>
             </div>
 
-            <div class="col-12">
+            <div class="col-12" v-if="dataStore.isLoadingProfile">
+              <div style="display: flex; align-items: center">
+                <q-icon
+                  name="mdi-numeric-3-circle"
+                  size="20px"
+                  color="primary"
+                />
+                <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+              </div>
+              <q-card bordered class="q-pa-md bg-grey-1">
+                <div class="row q-col-gutter-sm">
+                  <div class="col-12">
+                    <q-skeleton height="40px" />
+                  </div>
+                  <div class="col-12">
+                    <div class="row q-col-gutter-sm">
+                      <div class="col-md-3 col-xs-6">
+                        <q-skeleton height="40px" />
+                      </div>
+                      <div class="col-md-3 col-xs-6">
+                        <q-skeleton height="40px" />
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-12">
+                    <div class="row q-col-gutter-sm">
+                      <div class="col-md-3 col-xs-12">
+                        <q-skeleton height="40px" />
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-12">
+                    <q-skeleton height="40px" />
+                  </div>
+                  <div class="col-12">
+                    <q-skeleton height="120px" />
+                  </div>
+                  <div class="col-12">
+                    <q-skeleton height="40px" />
+                  </div>
+                </div>
+              </q-card>
+            </div>
+
+            <div class="col-12" v-else>
               <SickForm
                 v-if="model === 'LV-001' || model === 'LV-002'"
                 v-model:type="model"