From 4281982e3495d81ea8d9839e609faa83b2f61100 Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Tue, 21 Nov 2023 00:24:26 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B9=80=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1=20?=
 =?UTF-8?q?=E0=B8=95=E0=B9=88=E0=B8=AD=20api=20History?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TableHistory.vue | 37 ++++++++++++++++----------------
 src/views/HistoryView.vue       | 38 ++++++++++++++++++++++++++++-----
 2 files changed, 51 insertions(+), 24 deletions(-)

diff --git a/src/components/TableHistory.vue b/src/components/TableHistory.vue
index 4d430a0..87c989b 100644
--- a/src/components/TableHistory.vue
+++ b/src/components/TableHistory.vue
@@ -109,6 +109,15 @@ const columns = ref<QTableProps['columns']>([
     headerStyle: 'font-size: 14px',
     style: 'font-size: 14px; width:15%;',
   },
+  {
+    name: 'loIn',
+    align: 'left',
+    label: 'พิกัด',
+    sortable: true,
+    field: 'loIn',
+    headerStyle: 'font-size: 14px',
+    style: 'font-size: 14px',
+  },
   {
     name: 'out',
     align: 'left',
@@ -118,6 +127,15 @@ const columns = ref<QTableProps['columns']>([
     headerStyle: 'font-size: 14px',
     style: 'font-size: 14px; width:15%;',
   },
+  {
+    name: 'loOut',
+    align: 'left',
+    label: 'พิกัด',
+    sortable: true,
+    field: 'loOut',
+    headerStyle: 'font-size: 14px',
+    style: 'font-size: 14px',
+  },
   {
     name: 'Morningstatus',
     align: 'left',
@@ -136,25 +154,6 @@ const columns = ref<QTableProps['columns']>([
     headerStyle: 'font-size: 14px',
     style: 'font-size: 14px; width:15%;',
   },
-  {
-    name: 'loIn',
-    align: 'left',
-    label: 'พิกัด',
-    sortable: true,
-    field: 'loIn',
-    headerStyle: 'font-size: 14px',
-    style: 'font-size: 14px',
-  },
-
-  {
-    name: 'loOut',
-    align: 'left',
-    label: 'พิกัด',
-    sortable: true,
-    field: 'loOut',
-    headerStyle: 'font-size: 14px',
-    style: 'font-size: 14px',
-  },
   {
     name: 'status',
     align: 'left',
diff --git a/src/views/HistoryView.vue b/src/views/HistoryView.vue
index b08c12a..1619728 100644
--- a/src/views/HistoryView.vue
+++ b/src/views/HistoryView.vue
@@ -23,13 +23,35 @@ onMounted(() => {
   fetchlistHistory()
 })
 
+// paging
+const page = ref<number>(1)
+const year = ref<number>(2023)
+const pageSize = ref<number>(25)
+const total = ref<number>(0)
+const maxPage = ref<number>(1)
+const filter = ref<string>('') //search data table
+async function changePage(
+  pageVal: number,
+  pageSizeVal: number,
+  loading: boolean = false
+) {
+  page.value = await pageVal
+  pageSize.value = await pageSizeVal
+  fetchlistHistory(loading)
+}
+
 //นำข้อมูลมาแสดง
-const fetchlistHistory = async () => {
-  showLoader()
+const fetchlistHistory = async (loading: boolean = true) => {
+  loading === true ?? showLoader()
   await http
-    .get(config.API.history() + '?year=2023&page=1&pageSize=5&keyword=')
-    .then((res) => {
+    .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
+      maxPage.value = await Math.ceil(data.total / pageSize.value)
       fetchHistoryList(data)
     })
     .catch((err) => {
@@ -120,7 +142,13 @@ const fetchlistHistory = async () => {
         </div>
         <div class="col-12 q-pa-md text-grey-9">
           <ToolBar />
-          <Table />
+          <Table
+            :page-size="pageSize"
+            :total="total"
+            :page="page"
+            :changePage="changePage"
+            :max-page="maxPage"
+          />
         </div>
       </q-card>
     </div>