dashboard: all transaction support pagination

dashboard/src/components.d.ts

@@ -7,6 +7,7 @@ declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     ABreadcrumb: typeof import('ant-design-vue/es')['Breadcrumb']
     ABreadcrumbItem: typeof import('ant-design-vue/es')['BreadcrumbItem']
+    AButton: typeof import('ant-design-vue/es')['Button']
     ALayout: typeof import('ant-design-vue/es')['Layout']
     ALayoutContent: typeof import('ant-design-vue/es')['LayoutContent']
     ALayoutHeader: typeof import('ant-design-vue/es')['LayoutHeader']

dashboard/src/views/Dashboard/GlobalTransactions/AllTransactions.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <a-table :columns="columns" :data-source="dataSource" :pagination="false" :loading="loading" @change="handleTableChange">
+        <a-table :columns="columns" :data-source="dataSource" :loading="loading" :pagination="false">
             <template #bodyCell="{column, record}">
                 <template v-if="column.key === 'status'">
                     <span>
@@ -15,6 +15,10 @@
                 </template>
             </template>
         </a-table>
+        <div class="flex justify-center mt-2 text-lg pager" v-if="canPrev || canNext">
+            <a-button type="text" :disabled="!canPrev" @click="handlePrevPage">Previous</a-button>
+            <a-button type="text" :disabled="!canNext" @click="handleNextPage">Next</a-button>
+        </div>
     </div>
 </template>
 <script setup lang="ts">
@@ -49,6 +53,21 @@ const columns = [
     }
 ]
 
+const pager = ref([""])
+const currentState = ref(1)
+
+const canPrev = computed(() => {
+    if (currentState.value === 1) {
+        return false;
+    }
+
+    return true;
+})
+
+const canNext = computed(() => {
+    return data.value?.data.next_position !== ""
+})
+
 type Data = {
     transactions: {
         gid: string
@@ -76,24 +95,28 @@ const { data, run, current, loading, pageSize } = usePagination(queryData, {
 })
 
 const dataSource = computed(() => data.value?.data.transactions || [])
-const pagination = computed(() => ({
-    current: 1,
-    pageSize: pageSize.value,
-    showSizeChanger: true,
 
-}))
+const handlePrevPage = () => {
+    currentState.value -= 1;
+    const params = {
+        limit: 100
+    }
+    if (pager.value[currentState.value - 1]) {
+        params.position = pager.value[currentState.value - 1]
+    }
+    run(params)
+}
 
-const handleTableChange = (pag: {current:number, pageSize: number}) => {
+const handleNextPage = () => {
-    if (pag.pageSize !== pageSize.value) {
+    currentState.value += 1;
-        run({
+    if (currentState.value >= 2) {
-            limit: pag.pageSize
+        pager.value[currentState.value - 1] = data.value?.data.next_position
-        })
-    } else {
-        run({
-            position: data.value?.data.next_position,
-            limit: pag.pageSize
-        })
     }
+
+    run({
+        position: data.value?.data.next_position,
+        limit: 5
+    })
 }
 </script>
 
@@ -101,4 +124,10 @@ const handleTableChange = (pag: {current:number, pageSize: number}) => {
 ::v-deep .ant-pagination-item {
     display: none;
 }
+.pager .ant-btn-text {
+    font-weight: 500;
+}1
+.pager .ant-btn {
+    padding: 6px;
+}
 </style>