From 592365d00134cebf39dac0b41928581adc6ed3a8 Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Wed, 15 Nov 2023 11:04:14 +0700
Subject: [PATCH] Update TableHistory.vue

---
 src/components/TableHistory.vue | 83 ++++++++++++++++++++++++++++++++-
 1 file changed, 82 insertions(+), 1 deletion(-)

diff --git a/src/components/TableHistory.vue b/src/components/TableHistory.vue
index a2e36d1..219b381 100644
--- a/src/components/TableHistory.vue
+++ b/src/components/TableHistory.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { QTableProps } from 'quasar'
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 
 // importStores
 import { useChekIn } from '@/stores/chekin'
@@ -9,7 +9,87 @@ import { useChekIn } from '@/stores/chekin'
 import Popup from '@/components/PopUp.vue'
 
 const stores = useChekIn()
+const props = defineProps({
+  paging: {
+    type: Boolean,
+    defualt: false,
+  },
+  pageSize: {
+    type: Number,
+    defualt: 25,
+  },
+  page: {
+    type: Number,
+    defualt: 1,
+  },
+  maxPage: {
+    type: Number,
+    defualt: 1,
+  },
+  total: {
+    type: Number,
+    defualt: 0,
+  },
+  nornmalData: {
+    type: Boolean,
+    defualt: false,
+  },
+  nextPageVisible: {
+    type: Boolean,
+    defualt: false,
+  },
+  publicData: {
+    type: Boolean,
+    defualt: true,
+    required: false,
+  },
+  updateData: {
+    type: Boolean,
+    defualt: true,
+    required: false,
+  },
+  statusPayment: {
+    type: Boolean,
+    required: false,
+  },
+  setSeat: {
+    type: Boolean,
+    required: false,
+  },
+  publicNoBtn: {
+    type: Boolean,
+    defualt: false,
+  },
+  fetchData: {
+    type: Function,
+    default: () => console.log('not function'),
+  },
+  changePage: {
+    type: Function,
+    default: () => console.log('not function'),
+  },
+})
 
+// Pagination - page & change page & get new data
+const currentPage = ref<number>(1)
+watch(currentPage, () => {
+  console.log(currentPage.value)
+  props.changePage(currentPage.value, props.pageSize, true)
+})
+
+// Pagination - initial pagination
+const initialPagination = ref<any>({
+  sortBy: null,
+  descending: false,
+  page: 1,
+  rowsPerPage: props.pageSize,
+})
+
+// Pagination - update rowsPerPage
+async function updatePagination(newPagination: any) {
+  props.changePage(1, newPagination.rowsPerPage, true)
+  initialPagination.value = newPagination
+}
 const columns = ref<QTableProps['columns']>([
   {
     name: 'date',
@@ -127,6 +207,7 @@ const pagination = ref({
     :style="$q.screen.gt.xs ? 'max-height: 64vh' : ''"
     :grid="$q.screen.gt.xs ? false : true"
     v-model:pagination="pagination"
+    @update:pagination="updatePagination"
   >
     <template v-slot:header="props">
       <q-tr :props="props">