เพิ่มลงเวลากรณีพิเศษ (USER) #32

src/views/HistoryView.vue

@@ -17,14 +17,10 @@ const { showLoader, hideLoader, messageError } = mixin
 const { fetchHistoryList } = stores
 const $q = useQuasar() //ใช้ noti quasar
 
-onMounted(() => {
-  fetchlistHistory()
-})
-
 // paging
 const page = ref<number>(1)
-const year = ref<number>(2023)
-const pageSize = ref<number>(2)
+const year = ref<number>(new Date().getFullYear())
+const pageSize = ref<number>(10)
 const total = ref<number>(0)
 const maxPage = ref<number>(1)
 const filter = ref<string>('') //search data table
@@ -47,22 +43,20 @@ async function changePage(
 
 /**
  * ฟังก์ชั่นดึงข้อมูลรายการประวัติการลงเวลาจาก api มาแสดง
- * @param loading แสดง loading ไหม true คือแสดง, false คือไม่แสดง 
+ * @param loading แสดง loading ไหม true คือแสดง, false คือไม่แสดง
  */
-const fetchlistHistory = async (loading = true) => {
-  loading === true ?? showLoader()
+async function fetchlistHistory(loading = true) {
+  loading === true && showLoader()
   await http
     .get(
       config.API.history() +
         `?year=${year.value}&page=${page.value}&pageSize=${pageSize.value}&keyword=${filter.value}`
     )
     .then(async (res) => {
-      const data = res.data.result
-      total.value = data.total ? data.total : 5
+      const data = res.data.result.data
+      total.value = res.data.result.total
       maxPage.value = await Math.ceil(total.value / pageSize.value)
-      maxPage.value = maxPage.value < 1 ? 1 : maxPage.value
       fetchHistoryList(data) // ปิดกรณีมี total
-      // fetchHistoryList(data.data) // เปิดกรณีมี total
     })
     .catch((err) => {
       messageError($q, err)
@@ -71,6 +65,20 @@ const fetchlistHistory = async (loading = true) => {
       hideLoader()
     })
 }
+
+/**
+ * function updateYear
+ * @param y ปีที่อัปเดท
+ */
+async function updateYear(y: number) {
+  year.value = y
+  y && fetchlistHistory(true)
+}
+
+/** Hook*/
+onMounted(() => {
+  fetchlistHistory()
+})
 </script>
 <template>
   <div class="col-12 row justify-center">
@@ -96,7 +104,7 @@ const fetchlistHistory = async (loading = true) => {
           <div class="col-2"></div>
         </div>
         <div class="col-12 q-pa-md text-grey-9">
-          <ToolBar />
+          <ToolBar :fetchData="fetchlistHistory" @update:year="updateYear" />
           <Table
             :page-size="pageSize"
             :total="total"