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

src/api/api.history.ts

@@ -4,5 +4,6 @@ const TimeStamp = `${env.API_URI}/leave`
 
 export default {
   history: () => `${history}`,
+  historyTime: () => `${TimeStamp}/edit/history`,
   createTimeStamp: () => `${TimeStamp}/user/edit`,
 }

src/components/TableHistory.vue

@@ -17,10 +17,6 @@ const props = defineProps({
     type: Boolean,
     defualt: false,
   },
-  // selected: {
-  //   type: Array,
-  //   defualt: [],
-  // },
   pageSize: {
     type: Number,
     defualt: 10,
@@ -37,6 +33,11 @@ const props = defineProps({
     type: Number,
     defualt: 0,
   },
+  tab: {
+    type: String,
+    defualt: '',
+    required: true,
+  },
   nornmalData: {
     type: Boolean,
     defualt: false,
@@ -77,7 +78,8 @@ const props = defineProps({
   },
 })
 
-const keyword = ref<string>()
+const keyword = ref<string>('')
+const tab = ref<string>(props.tab?.toString())
 
 const emit = defineEmits(['update:change-page'])
 
@@ -98,7 +100,6 @@ watch(
       'update:change-page',
       currentPage.value,
       initialPagination.value.rowsPerPage,
-      true,
       keyword.value
     )
   }
@@ -115,7 +116,6 @@ async function filterFn() {
     'update:change-page',
     1,
     initialPagination.value.rowsPerPage,
-    true,
     keyword.value
   )
 }
@@ -222,17 +222,6 @@ function classStatus(status: string) {
       break
   }
 }
-
-const checkRequestEdit = (checkInStatus: string, checkOutStatus: string) => {
-  if (
-    checkInStatus === 'ขาด' ||
-    checkInStatus === 'สาย' ||
-    checkOutStatus === 'ขาด' ||
-    checkOutStatus === 'สาย'
-  )
-    return true
-  else false
-}
 </script>
 
 <template>
@@ -313,14 +302,9 @@ const checkRequestEdit = (checkInStatus: string, checkOutStatus: string) => {
             {{ col.value }}
           </div>
         </q-td>
-        <q-td>
+        <q-td v-if="tab === 'history'">
           <q-btn
-            v-if="
-              checkRequestEdit(
-                props.row.checkInStatus,
-                props.row.checkOutStatus
-              )
-            "
+            v-if="!props.row.isEdit"
             style="min-width: 110px"
             outline
             icon="edit"
@@ -329,8 +313,9 @@ const checkRequestEdit = (checkInStatus: string, checkOutStatus: string) => {
             color="cyan-6"
             @click="openPopup(props.row)"
           />
+        </q-td>
+        <q-td v-else-if="tab === 'time'">
           <q-chip
-            v-else-if="props.row.editStatus != ''"
             :color="`${stores.classColorStatus(props.row.editStatus)}-2`"
             :text-color="`${stores.classColorStatus(props.row.editStatus)}-7`"
             >{{ props.row.editStatus }}</q-chip
@@ -369,16 +354,8 @@ const checkRequestEdit = (checkInStatus: string, checkOutStatus: string) => {
             </q-item>
           </q-list>
           <q-card-section>
-            <div class="row">
-              <div
-                class="col"
-                v-if="
-                  checkRequestEdit(
-                    props.row.checkInStatus,
-                    props.row.checkOutStatus
-                  )
-                "
-              >
+            <div class="row" v-if="tab === 'history'">
+              <div class="col" v-if="!props.row.isEdit">
                 <q-btn
                   class="full-width text-cen"
                   outline
@@ -389,7 +366,10 @@ const checkRequestEdit = (checkInStatus: string, checkOutStatus: string) => {
                   @click="openPopup(props.row)"
                 />
               </div>
-              <div class="col" v-else>
+            </div>
+
+            <div class="row" v-else-if="tab === 'time'">
+              <div>
                 <q-chip
                   :color="`${stores.classColorStatus(props.row.editStatus)}-2`"
                   :text-color="`${stores.classColorStatus(

src/interface/response/checkin.ts

@@ -16,6 +16,7 @@ interface FormData {
   checkOutLocation: string
   editStatus: string
   editReason: string
+  isEdit: boolean
 }
 interface Datalist {
   checkInId: string
@@ -29,6 +30,7 @@ interface Datalist {
   checkOutLocation: string
   editStatus: string
   editReason: string
+  isEdit: boolean
 }
 
 interface FormTimeStemp {

src/stores/chekin.ts

@@ -15,6 +15,7 @@ export const useChekIn = defineStore('checkin', () => {
    */
   async function fetchHistoryList(data: FormData[]) {
     rows.value = []
+
     const dataList: Datalist[] = await data.map((e: FormData) => ({
       checkInId: e.checkInId,
       checkInDate: e.checkInDate ? date2Thai(e.checkInDate) : null,
@@ -28,6 +29,7 @@ export const useChekIn = defineStore('checkin', () => {
       checkOutLocation: e.checkOutLocation != '' ? e.checkOutLocation : '-',
       editStatus: e.editStatus != '' ? convertEditStatus(e.editStatus) : '',
       editReason: e.editReason,
+      isEdit: e.isEdit,
     }))
     rows.value = dataList
   }

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> -->