zramsay/cosmos-explorer
1
0
Fork 0
forked from cerc-io/cosmos-explorer
Code Pull Requests Actions Activity

add paginations

Browse Source
This commit is contained in:
liangping 2023-05-21 17:38:02 +08:00
parent 4b70b90cc1
commit 8945c1d703
7 changed files with 87 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/PaginationBar.vue
View File

@ -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>

8
src/libs/client.ts
View File

@ -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(

19
src/modules/[chain]/cosmwasm/WasmStore.ts
View File

@ -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);
}
}

40
src/modules/[chain]/cosmwasm/[code_id]/contracts.vue
View File

@ -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>

15
src/modules/[chain]/cosmwasm/index.vue
View File

@ -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>

4
src/modules/[chain]/gov/index.vue
View File

@ -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>

19
src/modules/[chain]/ibc/index.vue
View File

@ -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>