refector code

src/views/HistoryView.vue

@@ -1,39 +1,28 @@
 <script setup lang="ts">
 import { ref, onMounted, watch } from 'vue'
 import { useQuasar } from 'quasar'
+
 import { useRouter } from 'vue-router'
 import http from '@/plugins/http'
 import config from '@/app.config'
-
-/**
- * import Components
- */
-import TableHistory from '@/components/TableHistory.vue'
-import ToolBar from '@/components/ToolBar.vue'
-
-/**
- * importStores
- */
 import { useChekIn } from '@/stores/chekin'
 import { useCounterMixin } from '@/stores/mixin'
 
-/**
- * use
- */
-const mixin = useCounterMixin()
+import TableHistory from '@/components/TableHistory.vue' //ตารางประวัติการลงเวลา
+import ToolBar from '@/components/ToolBar.vue' // เมนู Herder
+
+const $q = useQuasar() //ใช้ noti quasar
 const router = useRouter()
 const stores = useChekIn()
-const { showLoader, hideLoader, messageError } = mixin
+const { showLoader, hideLoader, messageError } = useCounterMixin()
 const { fetchHistoryList } = stores
-const $q = useQuasar() //ใช้ noti quasar
 
-// paging
-const page = ref<number>(1)
-const year = ref<number>(new Date().getFullYear())
-const month = ref<number>(new Date().getMonth())
-const pageSize = ref<number>(10)
-const total = ref<number>(0)
-const maxPage = ref<number>(1)
+const year = ref<number>(new Date().getFullYear()) // ปีงบปรมาณ
+const month = ref<number>(new Date().getMonth()) // เดือน
+const page = ref<number>(1) // หน้าปัจจุบัน
+const pageSize = ref<number>(10) // จำนวนแถวต่อหน้า
+const total = ref<number>(0) // จำนวนทั้งหมด
+const maxPage = ref<number>(1) // จำนวนวหน้าทั้งหมด
 const filter = ref<string>('') //search data table
 
 /**
@@ -43,17 +32,22 @@ const filter = ref<string>('') //search data table
  *
  */
 async function changePage(pageVal: number, pageSizeVal: number, key: string) {
-  page.value = await pageVal
-  pageSize.value = await pageSizeVal
-  filter.value = await key
-  functionFetch()
+  page.value = pageVal
+  pageSize.value = pageSizeVal
+  filter.value = key
+  await functionFetch()
 }
 
-function functionFetch() {
-  stores.tab === 'history' ? fetchlistHistory() : fetchlistTime()
+/**
+ * ฟังก์ชันสำหรับดึงข้อมูลตามประเภทแท็บที่เลือก
+ */
+async function functionFetch() {
+  stores.tab === 'history' ? await fetchlistHistory() : await fetchlistTime()
 }
 
-/*** ฟังก์ชั่นดึงข้อมูลรายการประวัติการลงเวลาจาก api มาแสดง */
+/***
+ * ฟังก์ชั่นดึงข้อมูลรายการประวัติการลงเวลา
+ */
 async function fetchlistHistory() {
   showLoader()
   await http
@@ -64,10 +58,14 @@ async function fetchlistHistory() {
         }&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
+      // ดึงข้อมูลและจำนวนทั้งหมด
+      const data = await res.data.result.data
+      total.value = await res.data.result.total
+
+      // คำนวณจำนวนหน้า
+      maxPage.value = Math.ceil(total.value / pageSize.value)
+
+      await fetchHistoryList(data)
     })
     .catch((err) => {
       messageError($q, err)
@@ -77,7 +75,9 @@ async function fetchlistHistory() {
     })
 }
 
-/** ฟังก์ชั่นดึงรายการลงเวลากรณีพิเศษ */
+/**
+ * ฟังก์ชั่นดึงรายการลงเวลากรณีพิเศษ
+ */
 async function fetchlistTime() {
   showLoader()
   await http
@@ -90,10 +90,14 @@ async function fetchlistTime() {
         }`
     )
     .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
+      // ดึงข้อมูลและจำนวนทั้งหมด
+      const data = await res.data.result.data
+      total.value = await res.data.result.total
+
+      // คำนวณจำนวนหน้า
+      maxPage.value = Math.ceil(total.value / pageSize.value)
+
+      await fetchHistoryList(data)
     })
     .catch((err) => {
       messageError($q, err)
@@ -104,21 +108,22 @@ async function fetchlistTime() {
 }
 
 /**
- * function updateYear
- * @param y ปีที่อัปเดท
+ * ฟังก์ชันสำหรับอัปเดตปีและเดือน
+ * @param y ปีที่ต้องการอัปเดต
+ * @param m เดือนที่ต้องการอัปเดต
  */
 async function updateYear(y: number, m: number) {
   year.value = y
   month.value = m
   stores.year = y
-  functionFetch()
+  await functionFetch() // เรียกใช้งานฟังก์ชัน functionFetch เพื่อดึงข้อมูลใหม่
 }
 
-/** Hook*/
-onMounted(async () => {
-  await functionFetch()
-})
-
+/**
+ * ดูการเปลี่ยนแปลงใน stores.tab เมื่อ stores.tab เปลี่ยนไป
+ * จะรีเซ็ตค่า page , filter เป็นสถานะเริ่มต้น
+ * แล้วเรียก functionFetch เพื่อดึงประวัติการลงเวลาใหม่
+ */
 watch(
   () => stores.tab,
   () => {
@@ -127,6 +132,12 @@ watch(
     functionFetch()
   }
 )
+/**
+ * Hook
+ */
+onMounted(() => {
+  functionFetch()
+})
 </script>
 
 <template>
@@ -168,12 +179,12 @@ watch(
           <q-tab-panels v-model="stores.tab" animated>
             <q-tab-panel name="history">
               <ToolBar
-                :fetchData="functionFetch"
+                :fetch-data="functionFetch"
                 @update:year="updateYear"
                 :tab="stores.tab"
               />
               <TableHistory
-                :fetchData="functionFetch"
+                :fetch-data="functionFetch"
                 :page-size="pageSize"
                 :total="total"
                 :page="page"
@@ -186,7 +197,7 @@ watch(
 
             <q-tab-panel name="time">
               <ToolBar
-                :fetchData="functionFetch"
+                :fetch-data="functionFetch"
                 @update:year="updateYear"
                 :tab="stores.tab"
               />
@@ -202,16 +213,6 @@ watch(
               />
             </q-tab-panel>
           </q-tab-panels>
-          <!-- </q-card> -->
-          <!-- <Table
-            :fetchData="fetchlistHistory"
-            :page-size="pageSize"
-            :total="total"
-            :page="page"
-            :paging="true"
-            @update:change-page="changePage"
-            :max-page="maxPage"
-          /> -->
         </div>
       </q-card>
     </div>