refector code

src/components/TableHistory.vue

@@ -1,18 +1,20 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
-import type { QTableProps } from 'quasar'
+
 import { useCounterMixin } from '@/stores/mixin'
-
 import { useChekIn } from '@/stores/chekin'
-import Popup from '@/components/PopUp.vue' // dialog เพิ่ม/ขอแก้ไขลงเวลากรณีพิเศษ
 
-const mixin = useCounterMixin()
-const { date2Thai } = mixin
+import type { QTableProps } from 'quasar'
+import type { Pagination, DataCheckIn } from '@/interface/index/Main'
+
+import Popup from '@/components/PopUp.vue' // dialog เพิ่ม/ขอแก้ไขลงเวลากรณีพิเศษ
+const { date2Thai } = useCounterMixin()
 
 const stores = useChekIn()
-const selected = ref<string[]>([])
 
-/** props from page */
+/**
+ * props ข้อมูลจาก Components Page HistoryView
+ */
 const props = defineProps({
   paging: {
     type: Boolean,
@@ -48,13 +50,13 @@ const props = defineProps({
     default: () => console.log('not function'),
   },
 })
+const emit = defineEmits(['update:change-page'])
 
 const keyword = ref<string>('')
 const tab = ref<string>(props.tab?.toString())
+const selected = ref<string[]>([])
 
-const emit = defineEmits(['update:change-page'])
-
-/** column history table */
+// column history table
 const columns = ref<QTableProps['columns']>(
   props.tab == 'history'
     ? [
@@ -181,35 +183,23 @@ const visibleColumns = ref<string[]>([
   'checkOutStatus',
 ])
 
+const currentPage = ref<number>(1) //หน้าปัจจุบัน
 // Pagination - initial pagination
-const initialPagination = ref({
+const initialPagination = ref<Pagination>({
   sortBy: null,
   descending: false,
   page: 1,
   rowsPerPage: props.pageSize, // set ตาม page หลักส่งมา
 })
 
-// Pagination - page & change page & get new data
-const currentPage = ref<number>(1)
-watch(
-  [() => currentPage.value, () => initialPagination.value.rowsPerPage],
-  () => {
-    emit(
-      'update:change-page',
-      currentPage.value,
-      initialPagination.value.rowsPerPage,
-      keyword.value
-    )
-  }
-)
-
 // Pagination - update rowsPerPage
-async function updatePagination(newPagination: any) {
+async function updatePagination(newPagination: Pagination) {
   initialPagination.value = newPagination
   currentPage.value = 1 // set current page เป็น 1 เสมอเมื่อเปลี่ยน per row
 }
 
 async function filterFn() {
+  // ส่งอีเวนต์ 'update:change-page' เมื่อหน้าเปลี่ยนแปลง
   emit(
     'update:change-page',
     1,
@@ -217,24 +207,34 @@ async function filterFn() {
     keyword.value
   )
 }
+const modalPopup = ref<boolean>(false) //  popup แก้ไขลงเวลา
+const titlePopup = ref<string>('') //  หัวขข้อ popup แก้ไขลงเวลา
+const dataRow = ref<DataCheckIn>() // ข้อมูลการลงเวลา
 
-// popup
-const modalPopup = ref<boolean>(false)
-const titlePopup = ref<string>('')
-const dataRow = ref<any>()
-function openPopup(data: any) {
-  console.log(data)
-
+/**
+ * เปิด popup แก้ไขลงเวลา
+ * กำหนดค่า titlePopup เป็น แก้ไขลงเวลา
+ * @param data ข้อมูลการลงเวลา
+ */
+function openPopup(data: DataCheckIn) {
   const title = 'แก้ไขลงเวลา'
   modalPopup.value = true
   titlePopup.value = title
   dataRow.value = data
 }
 
+/**
+ * ปิด popup แก้ไขลงเวลา
+ */
 function closePopup() {
   modalPopup.value = false
 }
 
+/**
+ * ฟังก์ชั่นสำหรับ convert ข้อความสถานะของการลงเวลา ปกติ, ขาดราชการ หรือสาย
+ * @param status ฟิลด์สถานะ
+ * @returns ข้อความสถานะ ปกติ, ขาดราชการ ,สาย หรือปฏิบัติงานไม่ครบตามกำหนดเวลา
+ */
 function classStatus(status: string) {
   switch (status) {
     case 'ขาดราชการ':
@@ -250,14 +250,35 @@ function classStatus(status: string) {
   }
 }
 
-const modalReject = ref<boolean>(false)
-const reasonRejrct = ref<string>('')
-function onClickOpenPopupRejrct(data: any) {
+const modalReject = ref<boolean>(false) // modal popup หมายเหตุการไม่อนุมัติ
+const reasonRejrct = ref<string>('') // หมายเหตุการไม่อนุมัติ
+
+/**
+ * เปิด popup หมายเหตุการไม่อนุมัติ
+ * @param data  ข้อมูลการลงเวลา
+ */
+function onClickOpenPopupRejrct(data: DataCheckIn) {
   if (data.editStatus === 'ไม่อนุมัติ') {
     reasonRejrct.value = data.editReason
     modalReject.value = true
   }
 }
+
+/**
+ * watch currentPage และ rowsPerPage
+ */
+watch(
+  [() => currentPage.value, () => initialPagination.value.rowsPerPage],
+  () => {
+    // ส่งอีเวนต์ 'update:change-page' เมื่อหน้าเปลี่ยนแปลง
+    emit(
+      'update:change-page',
+      currentPage.value,
+      initialPagination.value.rowsPerPage,
+      keyword.value
+    )
+  }
+)
 </script>
 
 <template>
@@ -295,6 +316,7 @@ function onClickOpenPopupRejrct(data: any) {
       />
     </div>
   </div>
+
   <q-table
     flat
     bordered
@@ -442,6 +464,7 @@ function onClickOpenPopupRejrct(data: any) {
     </template>
   </q-table>
 
+  <!-- หมายเหตุการไม่อนุมัติ -->
   <q-dialog v-model="modalReject">
     <q-card style="width: 35vw; max-width: 35vw">
       <q-toolbar>
@@ -466,12 +489,13 @@ function onClickOpenPopupRejrct(data: any) {
     </q-card>
   </q-dialog>
 
+  <!-- แก้ไขลงเวลา -->
   <Popup
-    :fetchData="props.fetchData"
+    :fetch-data="props.fetchData"
     :modal="modalPopup"
-    :clickClose="closePopup"
+    :click-close="closePopup"
     :title="titlePopup"
-    :dataById="dataRow"
+    :data-ById="dataRow"
   />
 </template>