ผูก API และปรับหน้าประวัติการลงเวลาในระบบ checkin

src/views/HistoryView.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, computed, watch } from 'vue'
 import { useQuasar } from 'quasar'
 import { useRouter } from 'vue-router'
-import Table from '@/components/TableHistory.vue'
+
+import TableHistory from '@/components/TableHistory.vue'
 import ToolBar from '@/components/ToolBar.vue'
+
 import http from '@/plugins/http'
 import config from '@/app.config'
 import { useCounterMixin } from '@/stores/mixin'
@@ -17,12 +19,13 @@ const { showLoader, hideLoader, messageError } = mixin
 const { fetchHistoryList } = stores
 const $q = useQuasar() //ใช้ noti quasar
 
-const tab = ref<string>('1')
+const tab = ref<string>('history')
 
 // paging
 const page = ref<number>(1)
 const year = ref<number>(new Date().getFullYear())
-const pageSize = ref<number>(10)
+const month = ref<number>(new Date().getMonth())
+const pageSize = ref<number>(3)
 const total = ref<number>(0)
 const maxPage = ref<number>(1)
 const filter = ref<string>('') //search data table
@@ -31,26 +34,26 @@ const filter = ref<string>('') //search data table
  * ฟังก์ชั่น api เปลี่ยนหน้า
  * @param pageVal page
  * @param pageSizeVal pagesize
- * @param loading loading
+ *
  */
-async function changePage(
-  pageVal: number,
-  pageSizeVal: number,
-  loading: false,
-  key: string
-) {
+async function changePage(pageVal: number, pageSizeVal: number, key: string) {
   page.value = await pageVal
   pageSize.value = await pageSizeVal
   filter.value = await key
-  fetchlistHistory(loading)
+  functionFetch.value
 }
 
+const functionFetch = computed(() => {
+  const result = tab.value === 'history' ? fetchlistHistory() : fetchlistTime()
+  return result
+})
+
 /**
  * ฟังก์ชั่นดึงข้อมูลรายการประวัติการลงเวลาจาก api มาแสดง
  * @param loading แสดง loading ไหม true คือแสดง, false คือไม่แสดง
  */
-async function fetchlistHistory(loading = true) {
-  loading === true && showLoader()
+async function fetchlistHistory() {
+  showLoader()
   await http
     .get(
       config.API.history() +
@@ -62,7 +65,31 @@ async function fetchlistHistory(loading = true) {
       const data = res.data.result.data
       total.value = res.data.result.total
       maxPage.value = await Math.ceil(total.value / pageSize.value)
+      fetchHistoryList(data) // ปิดกรณีมี total
+    })
+    .catch((err) => {
+      messageError($q, err)
+    })
+    .finally(() => {
+      hideLoader()
+    })
+}
 
+async function fetchlistTime() {
+  showLoader()
+  await http
+    .get(
+      config.API.historyTime() +
+        `?year=${year.value}&month=${month.value + 1}&page=${
+          page.value
+        }&pageSize=${pageSize.value}&keyword=${
+          filter.value ? filter.value : ''
+        }`
+    )
+    .then(async (res) => {
+      const data = res.data.result.data
+      total.value = res.data.result.total
+      maxPage.value = await Math.ceil(total.value / pageSize.value)
       fetchHistoryList(data) // ปิดกรณีมี total
     })
     .catch((err) => {
@@ -79,13 +106,21 @@ async function fetchlistHistory(loading = true) {
  */
 async function updateYear(y: number) {
   year.value = y
-  y && fetchlistHistory(true)
+  y && functionFetch.value
 }
 
 /** Hook*/
-onMounted(() => {
-  fetchlistHistory(true)
+onMounted(async () => {
+  await functionFetch.value
 })
+
+watch(
+  () => tab.value,
+  () => {
+    page.value = 1
+    functionFetch.value
+  }
+)
 </script>
 <template>
   <div class="col-12 row justify-center">
@@ -123,35 +158,37 @@ onMounted(() => {
               active-bg-color="teal-1"
               active-class="text-primary"
             >
-              <q-tab name="1" label="ประวัติการลงเวลา" />
-              <q-tab name="2" label="รายการลงเวลากรณีพิเศษ" />
+              <q-tab name="history" label="ประวัติการลงเวลา" />
+              <q-tab name="time" label="รายการลงเวลากรณีพิเศษ" />
             </q-tabs>
 
             <q-separator />
 
             <q-tab-panels v-model="tab" animated>
-              <q-tab-panel name="1">
-                <Table
-            :fetchData="fetchlistHistory"
-            :page-size="pageSize"
-            :total="total"
-            :page="page"
-            :paging="true"
-            @update:change-page="changePage"
-            :max-page="maxPage"
-          />
+              <q-tab-panel name="history">
+                <TableHistory
+                  :fetchData="fetchlistHistory"
+                  :page-size="pageSize"
+                  :total="total"
+                  :page="page"
+                  :paging="true"
+                  @update:change-page="changePage"
+                  :max-page="maxPage"
+                  :tab="tab"
+                />
               </q-tab-panel>
 
-              <q-tab-panel name="2">
-                <Table
-            :fetchData="fetchlistHistory"
-            :page-size="pageSize"
-            :total="total"
-            :page="page"
-            :paging="true"
-            @update:change-page="changePage"
-            :max-page="maxPage"
-          />
+              <q-tab-panel name="time">
+                <TableHistory
+                  :fetchData="fetchlistHistory"
+                  :page-size="pageSize"
+                  :total="total"
+                  :page="page"
+                  :paging="true"
+                  @update:change-page="changePage"
+                  :max-page="maxPage"
+                  :tab="tab"
+                />
               </q-tab-panel>
             </q-tab-panels>
             <!-- </q-card> -->