From a69d9863401810f7cc17684c6eefab4d665118b8 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 9 Jul 2024 11:43:20 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=A5=E0=B8=87=E0=B9=80=E0=B8=A7=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=9E=E0=B8=B4=E0=B9=80=E0=B8=A8=E0=B8=A9=E0=B9=81?=
 =?UTF-8?q?=E0=B8=84=E0=B9=88=E0=B8=8A=E0=B9=88=E0=B8=A7=E0=B8=87=E0=B8=9A?=
 =?UTF-8?q?=E0=B9=88=E0=B8=B2=E0=B8=A2=E0=B8=A7=E0=B8=B1=E0=B8=99=E0=B8=97?=
 =?UTF-8?q?=E0=B8=B5=E0=B9=88=E0=B9=84=E0=B8=A1=E0=B9=88=E0=B9=81=E0=B8=AA?=
 =?UTF-8?q?=E0=B8=94=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TableHistory.vue   |  90 ++++++++++---------
 src/interface/index/Main.ts       |   8 ++
 src/interface/response/checkin.ts |   1 +
 src/stores/chekin.ts              |   4 +-
 src/views/HistoryView.vue         | 140 ++++++++++++++++--------------
 5 files changed, 133 insertions(+), 110 deletions(-)

diff --git a/src/components/TableHistory.vue b/src/components/TableHistory.vue
index 8b03e9d..2b0c0f9 100644
--- a/src/components/TableHistory.vue
+++ b/src/components/TableHistory.vue
@@ -1,10 +1,14 @@
 <script setup lang="ts">
-import type { QTableProps } from 'quasar'
 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
+
 const stores = useChekIn()
 const selected = ref<string[]>([])
 
@@ -50,43 +54,6 @@ const tab = ref<string>(props.tab?.toString())
 
 const emit = defineEmits(['update:change-page'])
 
-// Pagination - initial pagination
-const initialPagination = ref<any>({
-  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) {
-  initialPagination.value = newPagination
-  currentPage.value = 1 // set current page เป็น 1 เสมอเมื่อเปลี่ยน per row
-}
-
-async function filterFn() {
-  emit(
-    'update:change-page',
-    1,
-    initialPagination.value.rowsPerPage,
-    keyword.value
-  )
-}
-
 /** column history table */
 const columns = ref<QTableProps['columns']>(
   props.tab == 'history'
@@ -157,11 +124,11 @@ const columns = ref<QTableProps['columns']>(
       ]
     : [
         {
-          name: 'checkInDate',
+          name: 'checkInDateTime',
           align: 'left',
           label: 'วัน/เดือน/ปี',
           sortable: true,
-          field: 'checkInDate',
+          field: (v) => date2Thai(v.checkInDateTime),
           headerStyle: 'font-size: 14px',
           style: 'font-size: 14px; width:15%;',
         },
@@ -204,6 +171,7 @@ const columns = ref<QTableProps['columns']>(
       ]
 )
 const visibleColumns = ref<string[]>([
+  'checkInDateTime',
   'checkInDate',
   'checkInTime',
   'checkInLocation',
@@ -212,11 +180,51 @@ const visibleColumns = ref<string[]>([
   'checkOutLocation',
   'checkOutStatus',
 ])
+
+// Pagination - initial pagination
+const initialPagination = ref({
+  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) {
+  initialPagination.value = newPagination
+  currentPage.value = 1 // set current page เป็น 1 เสมอเมื่อเปลี่ยน per row
+}
+
+async function filterFn() {
+  emit(
+    'update:change-page',
+    1,
+    initialPagination.value.rowsPerPage,
+    keyword.value
+  )
+}
+
 // popup
 const modalPopup = ref<boolean>(false)
 const titlePopup = ref<string>('')
 const dataRow = ref<any>()
 function openPopup(data: any) {
+  console.log(data)
+
   const title = 'แก้ไขลงเวลา'
   modalPopup.value = true
   titlePopup.value = title
@@ -327,7 +335,7 @@ function onClickOpenPopupRejrct(data: any) {
             {{ props.row.checkOutStatus }}
           </div>
           <div v-else>
-            {{ col.value }}
+            {{ col.value ?? '-' }}
           </div>
         </q-td>
         <q-td v-if="tab === 'history'">
diff --git a/src/interface/index/Main.ts b/src/interface/index/Main.ts
index 140ad67..846c59c 100644
--- a/src/interface/index/Main.ts
+++ b/src/interface/index/Main.ts
@@ -25,10 +25,18 @@ interface LocationObject {
   longitude: number
 }
 
+interface Pagination {
+  sortBy: string
+  descending: boolean
+  page: number
+  rowsPerPage: number
+}
+
 export type {
   DataOption,
   FormRef,
   notiType,
   DataDateMonthObject,
   LocationObject,
+  Pagination,
 }
diff --git a/src/interface/response/checkin.ts b/src/interface/response/checkin.ts
index a1d3166..8ced7f0 100644
--- a/src/interface/response/checkin.ts
+++ b/src/interface/response/checkin.ts
@@ -7,6 +7,7 @@ interface FormRef {
 interface FormData {
   checkInId: string
   checkInDate: Date | null
+  checkOutDate: Date | null
   checkInDateTime: Date
   checkInTime: string
   checkOutTime: string
diff --git a/src/stores/chekin.ts b/src/stores/chekin.ts
index 66a37c4..a29e21d 100644
--- a/src/stores/chekin.ts
+++ b/src/stores/chekin.ts
@@ -2,7 +2,7 @@ import { defineStore } from 'pinia'
 import { ref } from 'vue'
 import type { FormData, Datalist } from '@/interface/response/checkin'
 import { useCounterMixin } from '@/stores/mixin'
-import moment from 'moment'
+
 const mixin = useCounterMixin()
 const { date2Thai } = mixin
 
@@ -22,7 +22,7 @@ export const useChekIn = defineStore('checkin', () => {
     const dataList: Datalist[] = await data.map((e: FormData) => ({
       checkInId: e.checkInId,
       checkInDate: e.checkInDate ? date2Thai(e.checkInDate) : null,
-      checkInDateTime: e.checkInDate,
+      checkInDateTime: e.checkInDate ? e.checkInDate : e.checkOutDate,
       checkInTime: e.checkInTime,
       checkOutTime: e.checkOutTime != '' ? e.checkOutTime : '-',
       checkInStatus: e.checkInStatus ? convertStatus(e.checkInStatus) : '-',
diff --git a/src/views/HistoryView.vue b/src/views/HistoryView.vue
index 3cbf114..d6bb798 100644
--- a/src/views/HistoryView.vue
+++ b/src/views/HistoryView.vue
@@ -1,17 +1,25 @@
 <script setup lang="ts">
-import { ref, onMounted, computed, watch } from 'vue'
+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'
 
-import http from '@/plugins/http'
-import config from '@/app.config'
-import { useCounterMixin } from '@/stores/mixin'
-// importStores
+/**
+ * importStores
+ */
 import { useChekIn } from '@/stores/chekin'
+import { useCounterMixin } from '@/stores/mixin'
 
+/**
+ * use
+ */
 const mixin = useCounterMixin()
 const router = useRouter()
 const stores = useChekIn()
@@ -19,8 +27,6 @@ const { showLoader, hideLoader, messageError } = mixin
 const { fetchHistoryList } = stores
 const $q = useQuasar() //ใช้ noti quasar
 
-const tab = ref<string>('history')
-
 // paging
 const page = ref<number>(1)
 const year = ref<number>(new Date().getFullYear())
@@ -130,73 +136,73 @@ watch(
         <div
           class="bg-secondary text-white col-12 row items-center q-px-md q-py-sm"
         >
-            <q-btn
-              icon="arrow_back"
-              round
-              dense
-              flat
-              color="white"
-              @click="router.go(-1)"
-            />
+          <q-btn
+            icon="arrow_back"
+            round
+            dense
+            flat
+            color="white"
+            @click="router.go(-1)"
+          />
           <span class="text-body1 text-weight-bold q-pl-md"
             >ประวัติการลงเวลา
           </span>
         </div>
         <div class="col-12 text-grey-9">
-            <q-tabs
-              v-model="stores.tab"
-              dense
-              align="left"
-              inline-label
-              class="rounded-borders"
-              indicator-color="primary"
-              active-bg-color="teal-1"
-              active-class="text-primary"
-            >
-              <q-tab name="history" label="ประวัติการลงเวลา" />
-              <q-tab name="time" label="รายการลงเวลากรณีพิเศษ" />
-            </q-tabs>
+          <q-tabs
+            v-model="stores.tab"
+            dense
+            align="left"
+            inline-label
+            class="rounded-borders"
+            indicator-color="primary"
+            active-bg-color="teal-1"
+            active-class="text-primary"
+          >
+            <q-tab name="history" label="ประวัติการลงเวลา" />
+            <q-tab name="time" label="รายการลงเวลากรณีพิเศษ" />
+          </q-tabs>
 
-            <q-separator />
+          <q-separator />
 
-            <q-tab-panels v-model="stores.tab" animated>
-              <q-tab-panel name="history">
-                <ToolBar
-                  :fetchData="functionFetch"
-                  @update:year="updateYear"
-                  :tab="stores.tab"
-                />
-                <TableHistory
-                  :fetchData="functionFetch"
-                  :page-size="pageSize"
-                  :total="total"
-                  :page="page"
-                  :paging="true"
-                  @update:change-page="changePage"
-                  :max-page="maxPage"
-                  :tab="stores.tab"
-                />
-              </q-tab-panel>
+          <q-tab-panels v-model="stores.tab" animated>
+            <q-tab-panel name="history">
+              <ToolBar
+                :fetchData="functionFetch"
+                @update:year="updateYear"
+                :tab="stores.tab"
+              />
+              <TableHistory
+                :fetchData="functionFetch"
+                :page-size="pageSize"
+                :total="total"
+                :page="page"
+                :paging="true"
+                @update:change-page="changePage"
+                :max-page="maxPage"
+                :tab="stores.tab"
+              />
+            </q-tab-panel>
 
-              <q-tab-panel name="time">
-                <ToolBar
-                  :fetchData="functionFetch"
-                  @update:year="updateYear"
-                  :tab="stores.tab"
-                />
-                <TableHistory
-                  :fetchData="functionFetch"
-                  :page-size="pageSize"
-                  :total="total"
-                  :page="page"
-                  :paging="true"
-                  @update:change-page="changePage"
-                  :max-page="maxPage"
-                  :tab="stores.tab"
-                />
-              </q-tab-panel>
-            </q-tab-panels>
-            <!-- </q-card> -->
+            <q-tab-panel name="time">
+              <ToolBar
+                :fetchData="functionFetch"
+                @update:year="updateYear"
+                :tab="stores.tab"
+              />
+              <TableHistory
+                :fetchData="functionFetch"
+                :page-size="pageSize"
+                :total="total"
+                :page="page"
+                :paging="true"
+                @update:change-page="changePage"
+                :max-page="maxPage"
+                :tab="stores.tab"
+              />
+            </q-tab-panel>
+          </q-tab-panels>
+          <!-- </q-card> -->
           <!-- <Table
             :fetchData="fetchlistHistory"
             :page-size="pageSize"
@@ -210,4 +216,4 @@ watch(
       </q-card>
     </div>
   </div>
-</template>
\ No newline at end of file
+</template>