refactor: replace fetching and query handling logic in dashboard tables

Author: enzo-bitfly

frontend/components/DashboardIndex.vue

@@ -171,18 +171,6 @@ const tabs: HashTabs = [
 //   { immediate: true },
 // )
 
-// Execution Layer Deposits data
-
-// Consensus Layer Deposits data
-
-// Execution Layer Withdrawals data
-
-// Consensus Layer Withdrawals data
-
-// Execution Layer Consolidations data
-
-// Consensus Layer Consolidations data
-
 // const activeTab = computed(() => route.hash)
 
 // const refreshActiveTab = () => {
@@ -315,62 +303,40 @@ const onTabChange = (value: string) => {
         />
       </template>
       <template #tab-panel-deposits>
-        <!-- <DashboardTableElDeposits
-            v-model:query="elDepositsQueryParams"
-            :el-deposits
-            :el-deposits-total-amount
-            :is-loading="elDepositsDataStatus === 'pending'"
-            @add-validator="onAddValidator"
-          /> -->
+        <DashboardTableElDeposits
+          @add-validator="onAddValidator"
+        />
         <BcIcon
           name="arrow-down"
           class="down_icon"
         />
-      <!-- <DashboardTableClDeposits
-            v-model:query="clDepositsQueryParams"
-            :cl-deposits
-            :cl-deposits-total-amount
-            :is-loading="clDepositsDataStatus === 'pending'"
-            @add-validator="onAddValidator"
-          /> -->
+        <DashboardTableClDeposits
+          @add-validator="onAddValidator"
+        />
       </template>
       <template #tab-panel-withdrawals>
-        <!-- <DashboardTableElWithdrawals
-            v-model:query="elWithdrawalsQueryParams"
-            :el-withdrawals
-            :el-withdrawals-total-amount
-            :is-loading="elWithdrawalsDataStatus === 'pending'"
-            @add-validator="onAddValidator"
-          /> -->
+        <DashboardTableElWithdrawals
+          @add-validator="onAddValidator"
+        />
         <BcIcon
           name="arrow-down"
           class="down_icon"
         />
-      <!-- <DashboardTableClWithdrawals
-            v-model:query="clWithdrawalsQueryParams"
-            :cl-withdrawals
-            :cl-withdrawals-total-amount
-            :is-loading="clWithdrawalsDataStatus === 'pending'"
-            @add-validator="onAddValidator"
-          /> -->
+        <DashboardTableClWithdrawals
+          @add-validator="onAddValidator"
+        />
       </template>
       <template #tab-panel-consolidations>
-        <!-- <DashboardTableElConsolidations
-            v-model:query="elConsolidationsQueryParams"
-            :el-consolidations
-            :is-loading="elConsolidationsDataStatus === 'pending'"
-            @add-validator="onAddValidator"
-          /> -->
+        <DashboardTableElConsolidations
+          @add-validator="onAddValidator"
+        />
         <BcIcon
           name="arrow-down"
           class="down_icon"
         />
-      <!-- <DashboardTableClConsolidations
-            v-model:query="clConsolidationsQueryParams"
-            :cl-consolidations
-            :is-loading="clConsolidationsDataStatus === 'pending'"
-            @add-validator="onAddValidator"
-          /> -->
+        <DashboardTableClConsolidations
+          @add-validator="onAddValidator"
+        />
       </template>
     </BcTabList>
   </NuxtLayout>

frontend/components/dashboard/table/DashboardTableClConsolidations.vue

@@ -1,52 +1,33 @@
 <script setup lang="ts">
-import type { DataTableSortEvent } from 'primevue/datatable'
-import type {
-  GetValidatorDashboardConsensusLayerConsolidationsResponse,
-  VDBConsolidationsClTableRow,
-} from '~/types/api/validator_dashboard'
-import type {
-  Cursor, TableQueryParams,
-} from '~/types/datatable'
+import type { VDBConsolidationsClTableRow } from '~/types/api/validator_dashboard'
 import BcTableControl from '~/components/bc/table/BcTableControl.vue'
 
 const {
-  clConsolidations,
-} = defineProps<{
-  clConsolidations?: GetValidatorDashboardConsensusLayerConsolidationsResponse,
-  isLoading: boolean,
-}>()
+  hasValidators,
+  key,
+} = useDashboard()
 
 const { width } = useWindowSize()
 const isMobile = computed(() => {
   return width.value < 768
 })
 
-const validatorDashboardOverviewStore = useValidatorDashboardOverviewStore()
-const {
-  hasValidators,
-} = storeToRefs(validatorDashboardOverviewStore)
-
 const {
   getTimestampFromSlot,
 } = useNetwork()
 
-const query = defineModel<TableQueryParams>('query')
+const query = useDefaultQuery({
+  sort: 'timestamp:desc',
+})
+
+const {
+  data: clConsolidations,
+  status,
+} = useApi(`/api/validator-dashboards/${key.value}/consensus-layer-consolidations`, {
+  immediate: key.value !== undefined,
+  query,
+})
 
-const onSort = (sort: DataTableSortEvent) => {
-  query.value = setQuerySort(sort, query.value)
-}
-const setCursor = (cursor: Cursor) => {
-  query.value = setQueryCursor(cursor, query.value)
-}
-const setPageSize = (limit: number) => {
-  query.value = setQueryPageSize(limit, query.value)
-}
-const setSearch = (value?: string) => {
-  query.value = {
-    ...query.value,
-    search: value,
-  }
-}
 const v1Domain = useV1Domain()
 const emit = defineEmits<{
   (e: 'add-validator'): void,
@@ -55,14 +36,15 @@ const emit = defineEmits<{
 
 <template>
   <BcTableControl
+    v-model:search="query.search"
     :title="$t('dashboard.validator.cl_consolidations.title')"
     :search-placeholder="$t('dashboard.validator.cl_consolidations.search_placeholder')"
-    @set-search="setSearch"
   >
     <template #table>
       <ClientOnly fallback-tag="span">
         <BcTable
           :data="clConsolidations"
+          :query
           expandable
           :row-class="(row: VDBConsolidationsClTableRow) =>
             row.status === 'queued' ? 'dashboard-table-cl-consolidations__row--grayed-out' : ''"
@@ -71,9 +53,7 @@ const emit = defineEmits<{
           :cursor="query?.cursor"
           :page-size="query?.limit"
           table-class="dashboard-table-cl-consolidations"
-          @set-cursor="setCursor"
-          @sort="onSort"
-          @set-page-size="setPageSize"
+          :is-loading="status === 'pending'"
         >
           <Column
             sortable

frontend/components/dashboard/table/DashboardTableClDeposits.vue

@@ -1,82 +1,52 @@
 <script setup lang="ts">
-import type { DataTableSortEvent } from 'primevue/datatable'
-import type {
-  GetValidatorDashboardConsensusLayerDepositsResponse,
-  GetValidatorDashboardTotalConsensusDepositsResponse,
-  VDBConsensusDepositsTableRow,
-} from '~/types/api/validator_dashboard'
-import type {
-  Cursor, TableQueryParams,
-} from '~/types/datatable'
-import { useValidatorDashboardOverviewStore } from '~/stores/dashboard/useValidatorDashboardOverviewStore'
+import type { VDBConsensusDepositsTableRow } from '~/types/api/validator_dashboard'
 
 const {
-  clDeposits,
-  clDepositsTotalAmount,
-} = defineProps<{
-  clDeposits?: GetValidatorDashboardConsensusLayerDepositsResponse,
-  clDepositsTotalAmount?: GetValidatorDashboardTotalConsensusDepositsResponse,
-  isLoading: boolean,
-}>()
-
-const {
-  isGuestDashboard,
-} = useDashboardKey()
+  hasValidators,
+  key,
+  variant,
+} = useDashboard()
 
 const { t: $t } = useTranslation()
 
 const {
   getTimestampFromSlot,
 } = useNetwork()
 
-const validatorDashboardOverviewStore = useValidatorDashboardOverviewStore()
-const {
-  hasValidators,
-} = storeToRefs(validatorDashboardOverviewStore)
-
 const { width } = useWindowSize()
 const isMobile = computed(() => {
   return width.value < 768
 })
 
-const clDepositsWithIdentifiers = computed(() =>
-  addIdentifier(clDeposits, 'slot', 'slot_index'),
-)
+const query = useDefaultQuery({
+  sort: 'timestamp:desc',
+})
+
+const {
+  data: clDeposits,
+  status,
+} = useApi(`/api/validator-dashboards/${key.value}/consensus-layer-deposits`, {
+  immediate: key.value !== undefined,
+  query,
+})
+
 const tableData = computed(() => {
-  if (!clDepositsWithIdentifiers.value?.data?.length) {
-    return
+  if (!clDeposits.value?.data?.length) {
+    return null
   }
 
   return {
     data: [
       {
-        amount: clDepositsTotalAmount?.data.total_amount,
+        amount: clDeposits.value.total_amount,
         isTotalAmountRow: true,
       },
-      ...clDepositsWithIdentifiers.value.data,
+      ...clDeposits.value.data,
     ],
-    paging: clDepositsWithIdentifiers.value.paging,
+    paging: clDeposits.value.paging,
   }
 })
 
-const query = defineModel<TableQueryParams>('query')
-
-const onSort = (sort: DataTableSortEvent) => {
-  query.value = setQuerySort(sort, query.value)
-}
-const setCursor = (cursor: Cursor) => {
-  query.value = setQueryCursor(cursor, query.value)
-}
-const setPageSize = (limit: number) => {
-  query.value = setQueryPageSize(limit, query.value)
-}
-const setSearch = (value?: string) => {
-  query.value = {
-    ...query.value,
-    search: value,
-  }
-}
-
 const getRowClass = (row: VDBConsensusDepositsTableRow) => {
   if (row.index === undefined) {
     return 'total-row'
@@ -103,20 +73,21 @@ const emit = defineEmits<{
 
 <template>
   <BcTableControl
+    v-model:search="query.search"
     :title="$t('dashboard.validator.cl_deposits.title')"
     :search-placeholder="
       $t(
-        isGuestDashboard
+        variant === 'guest-dashboard'
           ? 'dashboard.validator.cl_deposits.search_placeholder_guest_dashboard'
           : 'dashboard.validator.cl_deposits.search_placeholder_private_dashboard',
       )
     "
-    @set-search="setSearch"
   >
     <template #table>
       <ClientOnly fallback-tag="span">
         <BcTable
           :data="tableData"
+          :query
           data-key="identifier"
           expandable
           table-class="dashboard-table-cl-deposits"
@@ -125,10 +96,7 @@ const emit = defineEmits<{
           :page-size="query?.limit"
           :row-class="getRowClass"
           :is-row-expandable="(row: VDBConsensusDepositsTableRow) => row.index !== undefined"
-          :is-loading
-          @set-cursor="setCursor"
-          @sort="onSort"
-          @set-page-size="setPageSize"
+          :is-loading="status === 'pending'"
         >
           <Column
             field="timestamp"