fix leave Skeleton Load

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 {
-  date2Thai,
-  dateToISO,
-  messageError,
-  convertDateToAPI,
-  showLoader,
-  hideLoader,
-} = mixin;
+const { date2Thai, messageError, convertDateToAPI } = 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) => {
-        hideLoader();
+      .then((res) => {
         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) => {
-        hideLoader();
-        // totalCheck.value = null;
+      .catch((e) => {
         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>