add pagination

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

@@ -2,8 +2,13 @@
 import { useGovStore } from '@/stores';
 import ProposalListItem from '@/components/ProposalListItem.vue';
 import { ref, onMounted } from 'vue';
+import PaginationBar from '@/components/PaginationBar.vue';
+import { PageRequest } from '@/types';
+
 const tab = ref('2');
 const store = useGovStore();
+const pageNo = ref({} as Record<string, number>)
+const pageRequest = ref(new PageRequest())
 
 onMounted(() => {
   store.fetchProposals('2').then((x) => {
@@ -11,17 +16,25 @@ onMounted(() => {
       tab.value = '3';
       store.fetchProposals('3');
     }
+    store.fetchProposals('3');
+    store.fetchProposals('4');
   });
 });
 
 const changeTab = (val: '2' | '3' | '4') => {
   tab.value = val;
-  store.fetchProposals(val);
 };
+
+function page(p: number) {
+  pageNo.value[tab.value] = p
+  pageRequest.value.setPage(p)
+  store.fetchProposals(tab.value, pageRequest.value)
+}
+
 </script>
 <template>
   <div>
-    <div class="tabs tabs-boxed bg-transparent mb-4">
+    <div class="tabs tabs-boxed bg-transparent mb-4 text-center">
       <a
         class="tab text-gray-400 uppercase"
         :class="{ 'tab-active': tab === '2' }"
@@ -42,6 +55,7 @@ const changeTab = (val: '2' | '3' | '4') => {
       >
     </div>
     <ProposalListItem :proposals="store?.proposals[tab]"/>
+    <PaginationBar :total="store?.proposals[tab]?.pagination?.total" :limit="pageRequest.limit" :current="pageNo[tab]" :load="page"/>
   </div>
 </template>
 <route>