load pagination votes

src/components/ProposalListItem.vue

@@ -110,7 +110,7 @@ const proposalInfo = ref();
           </td>
 
           <td v-if="statusMap?.[item?.status] === 'VOTING'" class="w-40">
-            <div class="" v-show="item?.voterStatus === 'No With Veto'">
+            <div class="">
               <label
                 for="vote"
                 class="btn btn-xs btn-primary rounded-sm"

src/libs/api.ts

@@ -66,7 +66,7 @@ export const DEFAULT: RequestRegistry = {
     adapter,
   },
   gov_proposals_votes: {
-    url: '/cosmos/gov/v1beta1/proposals/{proposal_id}/votes?pagination.key={next_key}',
+    url: '/cosmos/gov/v1beta1/proposals/{proposal_id}/votes',
     adapter,
   },
   gov_proposals_votes_voter: {

src/libs/client.ts

@@ -116,11 +116,11 @@ export class CosmosRestClient extends BaseRestClient<RequestRegistry> {
   async getGovProposalTally(proposal_id: string) {
     return this.request(this.registry.gov_proposals_tally, { proposal_id });
   }
-  async getGovProposalVotes(proposal_id: string, next_key?: string) {
-    return this.request(this.registry.gov_proposals_votes, {
-      proposal_id,
-      next_key,
-    });
+  async getGovProposalVotes(proposal_id: string, page?: PageRequest) {
+    if(!page) page = new PageRequest()
+    page.reverse = true
+    const query =`?proposal_status={status}&${page.toQueryString()}`;
+    return this.request(this.registry.gov_proposals_votes, { proposal_id }, query);
   }
   async getGovProposalVotesVoter(proposal_id: string, voter: string) {
     return this.request(this.registry.gov_proposals_votes_voter, {

src/modules/[chain]/gov/[proposal_id].vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { computed } from '@vue/reactivity';
 import ObjectElement from '@/components/dynamic/ObjectElement.vue';
 import {
   useBaseStore,
@@ -7,15 +8,16 @@ import {
   useStakingStore,
   useTxDialog,
 } from '@/stores';
-import type {
-  GovProposal,
-  GovVote,
-  PaginatedProposalDeposit,
-  Pagination,
+import {
+PageRequest,
+  type GovProposal,
+  type GovVote,
+  type PaginatedProposalDeposit,
+  type Pagination,
 } from '@/types';
 import { ref, reactive } from 'vue';
 import Countdown from '@/components/Countdown.vue';
-import { computed } from '@vue/reactivity';
+import PaginationBar from '@/components/PaginationBar.vue'
 
 const props = defineProps(['proposal_id', 'chain']);
 const proposal = ref({} as GovProposal);
@@ -53,27 +55,14 @@ const deposit = ref({} as PaginatedProposalDeposit);
 store.fetchProposalDeposits(props.proposal_id).then((x) => (deposit.value = x));
 
 const votes = ref({} as GovVote[]);
-const votePage = ref({} as Pagination);
-const loading = ref(false);
+const pageRequest = ref(new PageRequest())
+const pageResponse = ref({} as Pagination)
 
 store.fetchProposalVotes(props.proposal_id).then((x) => {
   votes.value = x.votes;
-  votePage.value = x.pagination;
+  pageResponse.value = x.pagination;
 });
 
-function loadMore() {
-  if (votePage.value.next_key) {
-    loading.value = true;
-    store
-      .fetchProposalVotes(props.proposal_id, votePage.value.next_key)
-      .then((x) => {
-        votes.value = votes.value.concat(x.votes);
-        votePage.value = x.pagination;
-        loading.value = false;
-      });
-  }
-}
-
 function shortTime(v: string) {
   if (v) {
     return format.toDay(v, 'from');
@@ -159,6 +148,16 @@ const processList = computed(() => {
     { name: 'Abstain', value: abstain.value, class: 'bg-warning' },
   ];
 });
+
+function pageload(p: number) {
+  pageRequest.value.setPage(p)
+  store
+      .fetchProposalVotes(props.proposal_id, pageRequest.value)
+      .then((x) => {
+        votes.value = x.votes;
+        pageResponse.value = x.pagination;
+      });
+}
 </script>
 
 <template>
@@ -338,15 +337,7 @@ const processList = computed(() => {
             </tr>
           </tbody>
         </table>
-
-        <button
-          @click="loadMore()"
-          v-if="votePage.next_key"
-          :disabled="loading"
-          class="btn btn-outline btn-primary w-full mt-4"
-        >
-          Load more
-        </button>
+        <PaginationBar :limit="pageRequest.limit" :total="pageResponse.total" :callback="pageload"/>
       </div>
     </div>
   </div>