From 8945c1d703a2361d5a8b0337d13d6f933677c802 Mon Sep 17 00:00:00 2001
From: liangping <18786721@qq.com>
Date: Sun, 21 May 2023 17:38:02 +0800
Subject: [PATCH] add paginations

---
 src/components/PaginationBar.vue              | 21 ++++++----
 src/libs/client.ts                            |  8 ++--
 src/modules/[chain]/cosmwasm/WasmStore.ts     | 19 ++++++---
 .../[chain]/cosmwasm/[code_id]/contracts.vue  | 40 ++++++++++++++-----
 src/modules/[chain]/cosmwasm/index.vue        | 15 +++++--
 src/modules/[chain]/gov/index.vue             |  4 +-
 src/modules/[chain]/ibc/index.vue             | 19 +++++++--
 7 files changed, 87 insertions(+), 39 deletions(-)

diff --git a/src/components/PaginationBar.vue b/src/components/PaginationBar.vue
index 99ae0858..55ca352b 100644
--- a/src/components/PaginationBar.vue
+++ b/src/components/PaginationBar.vue
@@ -2,29 +2,29 @@
 import TwoFactorAuthDialog from '@/plugins/vuetify/@core/components/TwoFactorAuthDialog.vue';
 import { PageRequest } from '@/types';
 import type { PropType } from 'vue';
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 
 const props = defineProps({
     total: { type: Number },
     limit: { type: Number },
-    current: { type: Number, default: 1},
-    load: { type: Function, required: true },
+    callback: { type: Function, required: true },
 });
+const current = ref(1)
 const showSize = 3
 const pages = computed(() => {
     const pages: {color: string, page: number}[] = [] 
     if(props.total && props.limit && props.total > props.limit) {
         let page = 0
         while(true) {
-            page += 1
             if( page * props.limit > props.total ) break
-            if( page > showSize && page < (props.total / props.limit - showSize + 1)) {
-                if(!(page >= props.current - 1 && page <= props.current + 1)){
+            page += 1
+            if( props.total / props.limit > 10 && page > showSize && page < (props.total / props.limit - showSize + 1)) {
+                if(!(page >= current.value - 1 && page <= current.value + 1)){
                     continue
                 }
             } 
             pages.push({
-                color: page === props.current? 'btn-primary': '',
+                color: page === current.value? 'btn-primary': '',
                 page: page,
             })
         }
@@ -32,11 +32,16 @@ const pages = computed(() => {
     return pages
 })
 
+function gotoPage(pageNum: number) {
+    current.value = pageNum
+    props.callback(pageNum)
+}
+
 </script>
 <template>
     <div class="my-5 text-center">
         <div v-if="total && limit" class="btn-group">
-            <button v-for="{page, color} in pages" class="btn btn-md" :class="color" @click="load(page)">{{ page }}</button>
+            <button v-for="{page, color} in pages" class="btn btn-md" :class="color" @click="gotoPage(page)">{{ page }}</button>
         </div>
     </div>
 </template>
diff --git a/src/libs/client.ts b/src/libs/client.ts
index 4085822e..81979b8e 100644
--- a/src/libs/client.ts
+++ b/src/libs/client.ts
@@ -199,14 +199,12 @@ export class CosmosRestClient extends BaseRestClient<RequestRegistry> {
     return this.request(this.registry.base_tendermint_node_info, {});
   }
   async getBaseValidatorsetAt(height: string | number, offset: number) {
-    console.log("offset", offset)
     const query = `?pagination.limit=100&pagination.offset=${offset}`
     return this.request(this.registry.base_tendermint_validatorsets_height, {
       height,
     }, query);
   }
   async getBaseValidatorsetLatest(offset: number) {
-    console.log(offset)
     const query = `?pagination.limit=100&pagination.offset=${offset}`
     return this.request(this.registry.base_tendermint_validatorsets_latest, {}, query);
   }
@@ -239,8 +237,10 @@ export class CosmosRestClient extends BaseRestClient<RequestRegistry> {
       hash,
     });
   }
-  async getIBCConnections() {
-    return this.request(this.registry.ibc_core_connection_connections, {});
+  async getIBCConnections(page?: PageRequest) {
+    if(!page) page = new PageRequest()
+    const query =`?${page.toQueryString()}`;
+    return this.request(this.registry.ibc_core_connection_connections, {}, query);
   }
   async getIBCConnectionsById(connection_id: string) {
     return this.request(
diff --git a/src/modules/[chain]/cosmwasm/WasmStore.ts b/src/modules/[chain]/cosmwasm/WasmStore.ts
index 6f4cdd22..515053ea 100644
--- a/src/modules/[chain]/cosmwasm/WasmStore.ts
+++ b/src/modules/[chain]/cosmwasm/WasmStore.ts
@@ -12,6 +12,7 @@ import type {
 } from './types';
 import { toBase64 } from '@cosmjs/encoding';
 import { useBlockchain } from '@/stores';
+import { PageRequest } from '@/types';
 
 export interface WasmRequestRegistry extends AbstractRegistry {
   cosmwasm_code: Request<PaginabledCodeInfos>;
@@ -59,14 +60,18 @@ export const DEFAULT: WasmRequestRegistry = {
 };
 
 class WasmRestClient extends BaseRestClient<WasmRequestRegistry> {
-  getWasmCodeList() {
-    return this.request(this.registry.cosmwasm_code, {});
+  getWasmCodeList(pr?: PageRequest) {
+    if(!pr) pr = new PageRequest()
+    const query = `?${pr.toQueryString()}`
+    return this.request(this.registry.cosmwasm_code, {}, query);
   }
   getWasmCodeById(code_id: string) {
     return this.request(this.registry.cosmwasm_code, { code_id }); // `code_id` is a param in above url
   }
-  getWasmCodeContracts(code_id: string) {
-    return this.request(this.registry.cosmwasm_code_id_contracts, { code_id });
+  getWasmCodeContracts(code_id: string, page?: PageRequest) {
+    if(!page) page = new PageRequest()
+    const query = `?${page.toQueryString()}`
+    return this.request(this.registry.cosmwasm_code_id_contracts, { code_id }, query);
   }
   getWasmParams() {
     return this.request(this.registry.cosmwasm_param, {});
@@ -93,10 +98,12 @@ class WasmRestClient extends BaseRestClient<WasmRequestRegistry> {
       { address, query_data }
     );
   }
-  getWasmContractStates(address: string) {
+  getWasmContractStates(address: string, pr: PageRequest) {    
+    if(!pr) pr = new PageRequest()
+    const query = `?${pr.toQueryString()}`
     return this.request(this.registry.cosmwasm_contract_address_state, {
       address,
-    });
+    }, query);
   }
 }
 
diff --git a/src/modules/[chain]/cosmwasm/[code_id]/contracts.vue b/src/modules/[chain]/cosmwasm/[code_id]/contracts.vue
index c38cdbfb..2d013ce8 100644
--- a/src/modules/[chain]/cosmwasm/[code_id]/contracts.vue
+++ b/src/modules/[chain]/cosmwasm/[code_id]/contracts.vue
@@ -9,15 +9,24 @@ import type {
 import DynamicComponent from '@/components/dynamic/DynamicComponent.vue';
 import type { CustomInputContent } from '@/plugins/vuetify/@core/types';
 import { useFormatter } from '@/stores';
+import PaginationBar from '@/components/PaginationBar.vue';
+import { PageRequest } from '@/types';
 
 const props = defineProps(['code_id', 'chain']);
 
+const pageRequest = ref(new PageRequest())
 const response = ref({} as PaginabledContracts);
 
 const wasmStore = useWasmStore();
-wasmStore.wasmClient.getWasmCodeContracts(props.code_id).then((x) => {
-  response.value = x;
-});
+function loadContract(pageNum: number) {
+  const pr = new PageRequest()
+  pr.setPage(pageNum)
+  wasmStore.wasmClient.getWasmCodeContracts(props.code_id, pr).then((x) => {
+    response.value = x;
+  });
+}
+loadContract(1)
+
 const format = useFormatter();
 const infoDialog = ref(false);
 const stateDialog = ref(false);
@@ -32,10 +41,17 @@ function showInfo(address: string) {
   });
 }
 function showState(address: string) {
-  wasmStore.wasmClient.getWasmContractStates(address).then((x) => {
+  selected.value = address
+  pageload(1)
+}
+
+function pageload(p: number) {
+  pageRequest.value.setPage(p)
+  wasmStore.wasmClient.getWasmContractStates(selected.value, pageRequest.value).then((x) => {
     state.value = x;
   });
 }
+
 function showQuery(address: string) {
   selected.value = address;
   query.value = '';
@@ -129,6 +145,7 @@ const result = ref('');
             </tr>
           </tbody>
         </table>
+        <PaginationBar :limit="50" :total="response.pagination?.total" :callback="loadContract"/>
       </div>
     </div>
 
@@ -154,7 +171,7 @@ const result = ref('');
 
     <input type="checkbox" id="modal-contract-states" class="modal-toggle" />
     <label for="modal-contract-states" class="modal cursor-pointer">
-      <label class="modal-box relative p-2" for="">
+      <label class="modal-box w-11/12 max-w-5xl" for="">
         <div>
           <div class="flex items-center justify-between px-3 pt-2">
             <div class="text-lg">Contract States</div>
@@ -168,22 +185,23 @@ const result = ref('');
           <div class="overflow-auto">
             <table class="table table-compact w-full text-sm">
               <tr v-for="(v, index) in state.models" :key="index">
-                <td class="">
-                  {{ format.hexToString(v.key) }}
+                <td class="text-right" :data-tip="format.hexToString(v.key)">
+                    <span class="font-bold float-right">{{ format.hexToString(v.key) }}</span>
                 </td>
-                <td class="" :title="format.base64ToString(v.value)">
+                <td class="text-left w-3/4" :title="format.base64ToString(v.value)">
                   {{ format.base64ToString(v.value) }}
                 </td>
               </tr>
-            </table>
+            </table>            
+            <PaginationBar :limit="pageRequest.limit" :total="state.pagination?.total" :callback="pageload"/>
           </div>
         </div>
       </label>
     </label>
 
     <input type="checkbox" id="modal-contract-query" class="modal-toggle" />
-    <label for="modal-contract-states" class="modal cursor-pointer">
-      <label class="modal-box relative p-2" for="">
+    <label for="modal-contract-query" class="modal cursor-pointer">
+      <label class="modal-box w-11/12 max-w-5xl" for="">
         <div>
           <div class="flex items-center justify-between px-3 pt-2 mb-4">
             <div class="text-lg font-semibold">Query Contract</div>
diff --git a/src/modules/[chain]/cosmwasm/index.vue b/src/modules/[chain]/cosmwasm/index.vue
index 9f8bb287..0ea317aa 100644
--- a/src/modules/[chain]/cosmwasm/index.vue
+++ b/src/modules/[chain]/cosmwasm/index.vue
@@ -3,15 +3,23 @@ import { useBlockchain, useFormatter } from '@/stores';
 import { useWasmStore } from './WasmStore';
 import { ref } from 'vue';
 import type { PaginabledCodeInfos } from './types';
+import { PageRequest } from '@/types';
+import PaginationBar from '@/components/PaginationBar.vue';
 
 const props = defineProps(['chain']);
 
 const codes = ref({} as PaginabledCodeInfos);
 
+const pageRequest = ref(new PageRequest())
 const wasmStore = useWasmStore();
-wasmStore.wasmClient.getWasmCodeList().then((x) => {
-  codes.value = x;
-});
+
+function pageload(pageNum: number) {
+  pageRequest.value.setPage(pageNum)
+  wasmStore.wasmClient.getWasmCodeList(pageRequest.value).then((x) => {
+    codes.value = x;
+  });
+}
+pageload(1)
 </script>
 <template>
   <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
@@ -49,6 +57,7 @@ wasmStore.wasmClient.getWasmCodeList().then((x) => {
           </tr>
         </tbody>
       </table>
+      <PaginationBar :limit="pageRequest.limit" :total="codes.pagination?.total" :callback="pageload"/>
     </div>
   </div>
 </template>
diff --git a/src/modules/[chain]/gov/index.vue b/src/modules/[chain]/gov/index.vue
index 3fcaa323..49e77eb3 100644
--- a/src/modules/[chain]/gov/index.vue
+++ b/src/modules/[chain]/gov/index.vue
@@ -7,7 +7,6 @@ import { PageRequest } from '@/types';
 
 const tab = ref('2');
 const store = useGovStore();
-const pageNo = ref({} as Record<string, number>)
 const pageRequest = ref(new PageRequest())
 
 onMounted(() => {
@@ -26,7 +25,6 @@ const changeTab = (val: '2' | '3' | '4') => {
 };
 
 function page(p: number) {
-  pageNo.value[tab.value] = p
   pageRequest.value.setPage(p)
   store.fetchProposals(tab.value, pageRequest.value)
 }
@@ -55,7 +53,7 @@ function page(p: number) {
       >
     </div>
     <ProposalListItem :proposals="store?.proposals[tab]"/>
-    <PaginationBar :total="store?.proposals[tab]?.pagination?.total" :limit="pageRequest.limit" :current="pageNo[tab]" :load="page"/>
+    <PaginationBar :total="store?.proposals[tab]?.pagination?.total" :limit="pageRequest.limit" :callback="page"/>
   </div>
 </template>
 <route>
diff --git a/src/modules/[chain]/ibc/index.vue b/src/modules/[chain]/ibc/index.vue
index 1ae96b85..4ea1c987 100644
--- a/src/modules/[chain]/ibc/index.vue
+++ b/src/modules/[chain]/ibc/index.vue
@@ -1,18 +1,28 @@
 <script lang="ts" setup>
+import PaginationBar from '@/components/PaginationBar.vue';
 import { useBlockchain, useFormatter } from '@/stores';
-import type { Connection } from '@/types';
+import { PageRequest, type Connection, type Pagination } from '@/types';
 import { onMounted } from 'vue';
 import { ref } from 'vue';
 
 const props = defineProps(['chain']);
 const chainStore = useBlockchain();
 const list = ref([] as Connection[]);
+const pageRequest = ref(new PageRequest())
+const pageResponse = ref({} as Pagination)
+
 onMounted(() => {
-  chainStore.rpc.getIBCConnections().then((x) => {
-    list.value = x.connections;
-  });
+  pageload(1)
 });
 
+function pageload(p: number) {
+  pageRequest.value.setPage(p)
+  chainStore.rpc.getIBCConnections(pageRequest.value).then((x) => {
+    list.value = x.connections;
+    pageResponse.value = x.pagination
+  });
+}
+
 function color(v: string) {
   if (v && v.indexOf('_OPEN') > -1) {
     return 'success';
@@ -62,6 +72,7 @@ function color(v: string) {
             </tr>
           </tbody>
         </table>
+        <PaginationBar :limit="pageRequest.limit" :total="pageResponse.total" :callback="pageload"/>
       </div>
     </div>
   </div>