fix Load

src/components/SkeletonTable.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+/** importType*/
+import type { QTableProps } from 'quasar'
+
+const columns = defineModel<QTableProps['columns']>('columns', {
+  required: true,
+})
+
+const rows = ref<Array<{ id: string; name: string }>>([
+  {
+    id: '',
+    name: '',
+  },
+])
+
+/** ตัวอย่างการใช้งาน */
+/// <SkeletonTable v-if="isLoading" :columns="columns" />
+</script>
+
+<template>
+  <q-table
+    flat
+    class="custom-table2"
+    bordered
+    :columns="columns"
+    :rows="rows"
+    row-key="id"
+    hide-pagination
+    :grid="$q.screen.gt.xs ? false : true"
+  >
+    <template v-slot:header="props">
+      <q-tr :props="props">
+        <q-th v-for="col in props.cols" :key="col.name" :props="props">
+          <span class="text-weight-medium">{{ col.label }}</span>
+        </q-th>
+        <q-th auto-width> </q-th>
+      </q-tr>
+    </template>
+
+    <template v-slot:body="props">
+      <q-tr :props="props" class="cursor-pointer">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div>
+            <q-skeleton type="text" width="80px" />
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+
+    <template v-slot:item="props">
+      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
+        <q-card bordered flat>
+          <q-list dense>
+            <q-item v-for="col in props.cols" :key="col.name">
+              <q-item-section>
+                <q-item-label caption>{{ col.label }}</q-item-label>
+              </q-item-section>
+
+              <q-item-section>
+                <q-item-label class="text-dark text-weight-medium">
+                  <q-skeleton type="text" />
+                </q-item-label>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-card>
+      </div>
+    </template>
+  </q-table>
+</template>
+
+<style scoped lang="scss">
+.custom-table2 {
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+  }
+
+  .q-table td:nth-of-type(2) {
+    z-index: 3 !important;
+  }
+
+  .q-table th:nth-of-type(2),
+  .q-table td:nth-of-type(2) {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+  .text-caption {
+    text-align: left;
+  }
+}
+.q-card-section-last {
+  display: flex;
+  justify-content: flex-end;
+}
+</style>

src/components/TableHistory.vue

@@ -4,17 +4,16 @@ import { ref, watch } from 'vue'
 import { useCounterMixin } from '@/stores/mixin'
 import { useChekIn } from '@/stores/chekin'
 
-import type { QTableProps } from 'quasar'
+import { is, type QTableProps } from 'quasar'
 import type { Pagination, DataCheckIn } from '@/interface/index/Main'
 
 import Popup from '@/components/PopUp.vue' // dialog เพิ่ม/ขอแก้ไขลงเวลากรณีพิเศษ
-const { date2Thai } = useCounterMixin()
+import SkeletonTable from '@/components/SkeletonTable.vue' // skeleton table
 
+const { date2Thai } = useCounterMixin()
 const stores = useChekIn()
 
-/**
- * props ข้อมูลจาก Components Page HistoryView
- */
+/** props ข้อมูลจาก Components Page HistoryView */
 const props = defineProps({
   paging: {
     type: Boolean,
@@ -49,9 +48,12 @@ const props = defineProps({
     type: Function,
     default: () => console.log('not function'),
   },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
 })
 const emit = defineEmits(['update:change-page'])
-
 const keyword = ref<string>('')
 const tab = ref<string>(props.tab?.toString())
 const selected = ref<string[]>([])
@@ -270,9 +272,7 @@ function onClickOpenPopupRejrct(data: DataCheckIn) {
   }
 }
 
-/**
- * watch currentPage และ rowsPerPage
- */
+/** watch currentPage และ rowsPerPage*/
 watch(
   [() => currentPage.value, () => initialPagination.value.rowsPerPage],
   () => {
@@ -322,7 +322,10 @@ watch(
     </div>
   </div>
 
+  <SkeletonTable v-if="props.isLoading" :columns="columns" />
+
   <q-table
+    v-else
     flat
     bordered
     class="custom-table2"

src/views/HistoryView.vue

@@ -24,6 +24,7 @@ const pageSize = ref<number>(10) // จำนวนแถวต่อหน้
 const total = ref<number>(0) // จำนวนทั้งหมด
 const maxPage = ref<number>(1) // จำนวนวหน้าทั้งหมด
 const filter = ref<string>('') //search data table
+const isLoading = ref<boolean>(false) // ตัวแปรสำหรับเช็คการโหลดข้อมูล
 
 /**
  * ฟังก์ชั่น api เปลี่ยนหน้า
@@ -38,19 +39,15 @@ async function changePage(pageVal: number, pageSizeVal: number, key: string) {
   await functionFetch()
 }
 
-/**
- * ฟังก์ชันสำหรับดึงข้อมูลตามประเภทแท็บที่เลือก
- */
+/** ฟังก์ชันสำหรับดึงข้อมูลตามประเภทแท็บที่เลือก*/
 async function functionFetch() {
   stores.rows = []
   stores.tab === 'history' ? await fetchlistHistory() : await fetchlistTime()
 }
 
-/***
- * ฟังก์ชั่นดึงข้อมูลรายการประวัติการลงเวลา
- */
+/** ฟังก์ชั่นดึงข้อมูลรายการประวัติการลงเวลา*/
 async function fetchlistHistory() {
-  showLoader()
+  isLoading.value = true
   await http
     .get(
       config.API.history() +
@@ -72,7 +69,7 @@ async function fetchlistHistory() {
       messageError($q, err)
     })
     .finally(() => {
-      hideLoader()
+      isLoading.value = false
     })
 }
 
@@ -80,7 +77,7 @@ async function fetchlistHistory() {
  * ฟังก์ชั่นดึงรายการลงเวลากรณีพิเศษ
  */
 async function fetchlistTime() {
-  showLoader()
+  isLoading.value = true
   await http
     .get(
       config.API.historyTime() +
@@ -104,7 +101,7 @@ async function fetchlistTime() {
       messageError($q, err)
     })
     .finally(() => {
-      hideLoader()
+      isLoading.value = false
     })
 }
 
@@ -193,6 +190,7 @@ onMounted(() => {
                 @update:change-page="changePage"
                 :max-page="maxPage"
                 :tab="stores.tab"
+                :is-loading="isLoading"
               />
             </q-tab-panel>
 
@@ -211,6 +209,7 @@ onMounted(() => {
                 @update:change-page="changePage"
                 :max-page="maxPage"
                 :tab="stores.tab"
+                :is-loading="isLoading"
               />
             </q-tab-panel>
           </q-tab-panels>

src/views/HomeView.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from 'vue'
-import { useQuasar } from 'quasar'
+import { is, useQuasar } from 'quasar'
 import moment from 'moment'
 import Camera from 'simple-vue-camera'
 
@@ -26,11 +26,13 @@ const isDisabledCheckTime = ref<boolean>(false) // ข้อความแจ
 const isErr = ref<boolean | null>(null) // ข้อความแจ้งเตือน
 const endTimeAfternoon = ref<string>('12:00:00') //เวลาเช็คเอาท์ตามรอบ
 
+const isLoadingCheckTime = ref<boolean>(false) // ตัวแปรสำหรับการโหลด
+
 /**
  * fetch เช็คเวลาต้องลงเวลาเข้าหรือออกงาน
  */
 async function fetchCheckTime(load: any = true) {
-  load && showLoader()
+  if (load) isLoadingCheckTime.value = true
   await http
     .get(config.API.checkTime())
     .then(async (res) => {
@@ -48,7 +50,7 @@ async function fetchCheckTime(load: any = true) {
       } else messageError($q, err)
     })
     .finally(() => {
-      load && hideLoader()
+      if (load) isLoadingCheckTime.value = false
     })
 }
 
@@ -140,12 +142,12 @@ const intervalId = ref<number | undefined>(undefined) // ต้องใช้
  */
 async function startChecking() {
   try {
-    showLoader()
+    // showLoader()
     await fetchCheckStatus()
     await fetchCheckTime()
   } catch (error) {
     console.error('Error in startChecking:', error)
-    hideLoader()
+    // hideLoader()
   }
 }
 
@@ -157,7 +159,6 @@ async function fetchCheckStatus() {
   try {
     const res = await http.get(config.API.checkStatus())
     inQueue.value = res.data.result.inQueue
-
     if (res.data.result.inQueue) {
       /** inQueue เป็น true  */
       isDisabledCheckTime.value = true
@@ -453,7 +454,7 @@ const inQueue = ref<boolean>(false)
 
 /** Hook*/
 onMounted(async () => {
-  // await fetchCheckTime()
+  isLoadingCheckTime.value = true
   updateClock()
   startChecking() //เช็ค status จาก คิว #1
   mapRef.value?.requestLocationPermission()
@@ -471,7 +472,13 @@ onMounted(async () => {
           "
         >
           <!-- <q-header elevated class="bg-purple"> -->
-          <div :class="getClass(statusCheckin)" class="gt-xs">
+          <div
+            class="col-12 q-pa-md items-center gt-xs"
+            v-if="isLoadingCheckTime"
+          >
+            <q-skeleton type="QCard" width="100%" height="50px" />
+          </div>
+          <div v-else :class="getClass(statusCheckin)" class="gt-xs">
             <div class="col">
               <div class="row col-12 justify-center q-py-sm text-subtitle1">
                 <strong v-if="!statusCheckin && inQueue">
@@ -490,6 +497,7 @@ onMounted(async () => {
               </div>
             </div>
           </div>
+
           <div class="col-12 text-grey-9">
             <div class="col-12 row justify-center">
               <div class="col-12 row q-pt-md justify-center gt-xs">
@@ -849,7 +857,24 @@ onMounted(async () => {
 
   <!--  top page sticky  หน้ามือถือ-->
   <q-page-sticky expand position="top" v-if="$q.screen.xs">
-    <div :class="getClassXS(statusCheckin)">
+    <div
+      class="row q-col-gutter-sm col bg-white col-12 q-pa-md"
+      style="height: 100px"
+      v-if="isLoadingCheckTime"
+    >
+      <div class="col-7">
+        <div class="row col-12">
+          <q-skeleton type="text" width="90%" />
+          <q-skeleton type="text" width="50%" class="text-subtitle1" />
+        </div>
+      </div>
+      <div class="col-5">
+        <div class="row col-12">
+          <q-skeleton type="QBtn" width="100%" />
+        </div>
+      </div>
+    </div>
+    <div v-else :class="getClassXS(statusCheckin)">
       <div class="col">
         <div class="row col-12 justify-right items-center text-subtitle1">
           <strong v-if="!statusCheckin && inQueue">