feat: Implement counter in oracles page (#527)

aeternity · Oct 19, 2023 · 9489d33 · 9489d33
1 parent df5fa97
commit 9489d33
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 2 deletions.
diff --git a/src/components/OraclesPanel.vue b/src/components/OraclesPanel.vue
@@ -1,8 +1,10 @@
 <template>
   <app-panel>
     <paginated-content
+      v-model:page-index="pageIndex"
       :entities="oracles"
       :limit="limit"
+      :total-count="getOraclesCount(selectedOracleState.stateQuery)"
       @prev-clicked="loadPrevOracles"
       @next-clicked="loadNextOracles">
       <template #header>
@@ -20,7 +22,7 @@
 
 <script setup>
 import { storeToRefs } from 'pinia'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { useRoute, useRouter } from 'nuxt/app'
 import { useOraclesStore } from '@/stores/oracles'
 import OraclesTableCondensed from '@/components/OraclesTableCondensed'
@@ -29,12 +31,13 @@ import PaginatedContent from '@/components/PaginatedContent'
 import { isDesktop } from '@/utils/screen'
 
 const oraclesStore = useOraclesStore()
-const { fetchOracles } = oraclesStore
+const { fetchOracles, fetchOraclesCount, getOraclesCount } = oraclesStore
 const { oracles } = storeToRefs(oraclesStore)
 const route = useRoute()
 const { push, replace } = useRouter()
 
 const limit = computed(() => process.client && isDesktop() ? 10 : 3)
+const pageIndex = ref(1)
 
 function loadPrevOracles() {
   fetchOracles(oracles.value.prev)
@@ -49,6 +52,8 @@ async function loadOracles() {
   const oracleStateOption = ORACLE_STATES_OPTIONS.find(option => option.stateQuery === state)
   selectedOracleState.value = oracleStateOption || ORACLE_STATES_OPTIONS[0]
   await fetchOracles(`/v2/oracles?limit=${limit.value}${selectedOracleState.value.stateQuery ? '&state=' + selectedOracleState.value.stateQuery : ''}`)
+  await fetchOraclesCount()
+  pageIndex.value = 1
 }
 
 const selectedOracleState = computed({

diff --git a/src/stores/oracles.js b/src/stores/oracles.js
@@ -11,13 +11,29 @@ export const useOraclesStore = defineStore('oracles', () => {
   const { blockHeight } = storeToRefs(recentBlocksStore)
 
   const rawOracles = ref(null)
+  const rawOraclesCount = ref(null)
+
+  const activeOraclesCount = computed(() => {
+    return rawOraclesCount.value?.activeOracles
+  })
+  const inativeOracles = computed(() => {
+    return rawOraclesCount.value?.inactiveOracles
+  })
 
   const oracles = computed(() => {
     return rawOracles.value
       ? adaptOracles(rawOracles.value, blockHeight.value)
       : null
   })
 
+  function getOraclesCount(state) {
+    if (state === 'active') {
+      return activeOraclesCount.value
+    } else {
+      return inativeOracles.value
+    }
+  }
+
   async function fetchOracles(queryParameters = null) {
     rawOracles.value = null
     const defaultParameters = '/v2/oracles?direction=backward&limit=10'
@@ -27,8 +43,16 @@ export const useOraclesStore = defineStore('oracles', () => {
     rawOracles.value = data
   }
 
+  async function fetchOraclesCount() {
+    rawOraclesCount.value = null
+    const { data } = await axios.get(`${MIDDLEWARE_URL}/v2/totalstats?limit=1`)
+    rawOraclesCount.value = data.data[0]
+  }
+
   return {
     oracles,
     fetchOracles,
+    fetchOraclesCount,
+    getOraclesCount,
   }
 })