แก้ไข loader

src/modules/03_recruiting/views/02_qualify/manageDetail.vue

@@ -37,7 +37,9 @@
         <div class="q-pa-md row col-12 no-wrap">
           <!-- การ์ดแสดงจำนวนข้อมูล -->
           <div class="col-12 row">
-            <div class="text-grey-7 q-pb-sm row text-weight-medium col-12 items-center">
+            <div
+              class="text-grey-7 q-pb-sm row text-weight-medium col-12 items-center"
+            >
               <!-- สรุปจำนวนผู้สมัครคัดเลือก -->
               <datepicker
                 v-model="dateFilter"
@@ -120,7 +122,8 @@
                     <div class="col-12 row items-center q-pa-sm">
                       <div
                         :class="
-                          'col-12 text-h5 text-weight-bold text-' + `${num.color}`
+                          'col-12 text-h5 text-weight-bold text-' +
+                          `${num.color}`
                         "
                       >
                         {{
@@ -282,7 +285,7 @@ import { useCounterMixin } from "@/stores/mixin";
 import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useDataStore } from "@/stores/data";
+
 import TableCandidate from "@/modules/03_recruiting/components/TableCandidate.vue";
 import ExamFinished from "@/modules/03_recruiting/components/ExamFinished.vue";
 import type { DataNumObject } from "@/modules/01_metadata/interface/request/Calendar";
@@ -290,9 +293,15 @@ import { useQuasar } from "quasar";
 
 const $q = useQuasar();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const { genColor15, dateToISO, date2Thai, messageError } = mixin;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+const {
+  genColor15,
+  dateToISO,
+  date2Thai,
+  messageError,
+  showLoader,
+  hideLoader,
+} = mixin;
+
 const router = useRouter();
 const route = useRoute();
 const status = ref<string>("all");
@@ -483,7 +492,7 @@ watch(status, (count: String, prevCount: String) => {
 });
 
 onMounted(async () => {
-  loaderPage(false);
+  hideLoader();
   await fetchDataCom();
 });
 
@@ -502,7 +511,7 @@ const fetchDataCom = async () => {
 };
 
 const fetchData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.candidateOfPeriodExam(status.value, examId.value))
     .then((res) => {
@@ -530,12 +539,12 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
 const fetchPeriodExam = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.periodExamStatus(examId.value))
     .then((res) => {
@@ -550,7 +559,7 @@ const fetchPeriodExam = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -559,7 +568,7 @@ const fetchPeriodExam = async () => {
  */
 const fetchDataSummary = async () => {
   dataNum.value = [];
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.countDashbordPeriodExam(examId.value))
     .then((res) => {
@@ -577,12 +586,12 @@ const fetchDataSummary = async () => {
       dataNum.value = [];
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
 const downloadFileDashboard = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .put(
       config.API.periodExamDownloadDashboard(examId.value),
@@ -606,7 +615,7 @@ const downloadFileDashboard = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };