ปรับ code ประวัติการลงเวลา

src/components/TableHistory.vue

@@ -329,12 +329,12 @@ const checkRequestEdit = (checkInStatus: string, checkOutStatus: string) => {
             color="cyan-6"
             @click="openPopup(props.row)"
           />
-          <!-- <q-chip
-            v-else
-            :color="`${stores.classColorStatus(props.row.statusEdit)}-1`"
-            :text-color="`${stores.classColorStatus(props.row.statusEdit)}-7`"
-            >{{ props.row.statusEdit }}</q-chip
-          > -->
+          <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
+          >
         </q-td>
       </q-tr>
     </template>
@@ -391,12 +391,12 @@ const checkRequestEdit = (checkInStatus: string, checkOutStatus: string) => {
               </div>
               <div class="col" v-else>
                 <q-chip
-                  :color="`${stores.classColorStatus(props.row.statusEdit)}-1`"
+                  :color="`${stores.classColorStatus(props.row.editStatus)}-2`"
                   :text-color="`${stores.classColorStatus(
-                    props.row.statusEdit
+                    props.row.editStatus
                   )}-7`"
                 >
-                  {{ props.row.statusEdit }}
+                  {{ props.row.editStatus }}
                 </q-chip>
               </div>
             </div>
@@ -404,19 +404,7 @@ const checkRequestEdit = (checkInStatus: string, checkOutStatus: string) => {
         </q-card>
       </div>
     </template>
-    <!-- <template v-slot:pagination="scope">
-      <q-pagination
-        v-model="currentPage"
-        active-color="primary"
-        color="dark"
-        :max="scope.pagesNumber"
-        :max-pages="5"
-        size="sm"
-        boundary-links
-        direction-links
-      ></q-pagination>
-    </template> -->
-    <template v-slot:pagination="scope">
+    <template v-slot:pagination>
       ทั้งหมด {{ props.total }} รายการ
       <q-pagination
         v-model="currentPage"

src/interface/response/checkin.ts

@@ -14,6 +14,8 @@ interface FormData {
   checkOutStatus: string
   checkInLocation: string
   checkOutLocation: string
+  editStatus: string
+  editReason: string
 }
 interface Datalist {
   checkInId: string
@@ -25,6 +27,8 @@ interface Datalist {
   checkOutStatus: string
   checkInLocation: string
   checkOutLocation: string
+  editStatus: string
+  editReason: string
 }
 
 interface FormTimeStemp {

src/stores/chekin.ts

@@ -1,20 +1,21 @@
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
-
 import type { FormData, Datalist } from '@/interface/response/checkin'
-
-// importStores
 import { useCounterMixin } from '@/stores/mixin'
-
 const mixin = useCounterMixin()
 const { date2Thai } = mixin
 
+/** store for checkin history*/
 export const useChekIn = defineStore('checkin', () => {
   const rows = ref<Datalist[]>()
 
+  /**
+   * ฟังก์ชั่นสำหรับ map ข้อมูล เพื่อแสดงรายการในตารางประวัติการลงเวลา
+   * @param data รายการข้อมูลทีต้องการ map เป็น array ที่ประกอบด้วย object ตาม FormData
+   */
   async function fetchHistoryList(data: FormData[]) {
     rows.value = []
-    const datalist: Datalist[] = await data.map((e: FormData) => ({
+    const dataList: Datalist[] = await data.map((e: FormData) => ({
       checkInId: e.checkInId,
       checkInDate: e.checkInDate ? date2Thai(e.checkInDate) : null,
       checkInDateTime: e.checkInDate,
@@ -25,11 +26,17 @@ export const useChekIn = defineStore('checkin', () => {
         e.checkOutStatus != null ? convertStatus(e.checkOutStatus) : '-',
       checkInLocation: e.checkInLocation,
       checkOutLocation: e.checkOutLocation != '' ? e.checkOutLocation : '-',
-      // statusEditName: convertStatusEdit(e.statusEdit),
+      editStatus: e.editStatus != '' ? convertEditStatus(e.editStatus) : '',
+      editReason: e.editReason,
     }))
-    rows.value = datalist
+    rows.value = dataList
   }
 
+  /**
+   * ฟังก์ชั่นสำหรับ convert ข้อความสถานะของการลงเวลา ปกติ, ขาดราชการ หรือสาย
+   * @param status ฟิลด์สถานะที่มาจาก API
+   * @returns ข้อความสถานะ ปกติ, ขาดราชการ หรือสาย
+   */
   function convertStatus(status: string) {
     switch (status) {
       case '':
@@ -42,24 +49,40 @@ export const useChekIn = defineStore('checkin', () => {
         return ''
     }
   }
-  // function convertStatusEdit(val: string) {
-  //   switch (val) {
-  //     case 'edit':
-  //       return 'ขอแก้ไข'
-  //     case 'wait':
-  //       return 'รออนุมัติ'
-  //     case 'approve':
-  //       return 'อนุมัติ'
-  //   }
-  // }
+
+  /**
+   * ฟังก์ชั่นสำหรับ convert ข้อความสถานะการขอแก้ไข/การขอลงเวลาพิเศษ
+   * @param val ฟิลด์สถานะการขอแก้ไข/การขอลงเวลาพิเศษที่มาจาก API
+   * @returns ข้อความสถานะการขอแก้ไข/การขอลงเวลาพิเศษ
+   */
+  function convertEditStatus(val: string) {
+    switch (val) {
+      case 'PENDING':
+        return 'รออนุมัติ'
+      case 'APPROVE':
+        return 'อนุมัติ'
+      case 'REJECT':
+        return 'ไม่อนุมัติ'
+      default:
+        return ''
+    }
+  }
+
+  /**
+   * ฟังก์ชั่นสำหรับแสดง class กรณีสถานะการขอลงเวลาพิเศษ
+   * @param val ข้อความสถานะการขอลงเวลาพิเศษที่ convert แล้ว
+   * @returns ค่าสีที่ต้องการแสดงตามข้อความสถานะ
+   */
   function classColorStatus(val: string) {
     switch (val) {
-      case 'wait':
+      case 'รออนุมัติ':
         return 'orange'
-      case 'approve':
+      case 'อนุมัติ':
         return 'green'
-      case 'reject':
+      case 'ไม่อนุมัติ':
         return 'red'
+      default:
+        return ''
     }
   }
 
@@ -67,6 +90,5 @@ export const useChekIn = defineStore('checkin', () => {
     rows,
     fetchHistoryList,
     classColorStatus,
-    // fetchlistHistory,
   }
 })