BEDS-97/refactor-data-fetching

frontend/components/bc/table/BcTable.vue

@@ -1,27 +1,22 @@
 <script setup lang="ts">
+import type { DataTableSortEvent } from 'primevue/datatable'
 import type { ApiPagingResponse } from '~/types/api/common'
-import type { Cursor } from '~/types/datatable'
 
-interface Props {
+const props = defineProps<{
   addSpacer?: boolean,
-  cursor?: Cursor,
+  // cursor?: Cursor,
   data?: ApiPagingResponse<any>,
   dataKey: string, // Required Unique identifier for a data row
   expandable?: boolean,
+  hasSelectionMode?: boolean,
   hidePager?: boolean,
   isRowExpandable?: (item: any) => boolean,
+  // limit?: number,
   loading?: boolean,
   pageSize?: number,
-  selectedSort?: string,
-  selectionMode?: 'multiple' | 'single',
   tableClass?: string,
-}
-const props = defineProps<Props>()
-
-const emit = defineEmits<{
-  (e: 'setCursor', value: Cursor): void,
-  (e: 'setPageSize', value: number): void,
 }>()
+const query = defineModel<Query>('query')
 
 const expandedRows = ref<Record<any, boolean>>({})
 
@@ -70,14 +65,23 @@ const toggleItem = (item: any) => {
   expandedRows.value = { ...expandedRows.value }
 }
 
-const setCursor = (value: Cursor) => {
+const setCursor = (value: string | undefined) => {
+  if (!query.value) return
   toggleAll(true)
-  emit('setCursor', value)
+  query.value.cursor = value
 }
 
-const setPageSize = (value: number) => {
+const setLimit = (value: number) => {
+  if (!query.value) return
+  toggleAll(true)
+  query.value.limit = value
+}
+const onSort = (event: DataTableSortEvent) => {
+  if (!query.value) return
   toggleAll(true)
-  emit('setPageSize', value)
+  const order = event.sortOrder === -1 ? 'asc' : 'desc'
+  const { sortField } = event
+  query.value.sort = `${sortField}:${order}` as const
 }
 
 watch(
@@ -94,17 +98,6 @@ watch(
     toggleAll(true)
   },
 )
-
-const sort = computed(() => {
-  if (!props.selectedSort?.includes(':')) {
-    return
-  }
-  const split = props.selectedSort?.split(':')
-  return {
-    field: split[0],
-    order: split[1] === 'asc' ? -1 : 1,
-  }
-})
 </script>
 
 <template>
@@ -113,15 +106,14 @@ const sort = computed(() => {
     class="bc-table"
     sort-mode="single"
     lazy
-    :sort-field="sort?.field"
-    :sort-order="sort?.order"
     :value="data?.data"
     :data-key
     :loading
+    @sort="onSort"
   >
     <Column
-      v-if="selectionMode"
-      :selection-mode
+      v-if="hasSelectionMode"
+      selection-mode="multiple"
       class="selection"
     />
     <Column
@@ -190,12 +182,11 @@ const sort = computed(() => {
     </template>
     <template #footer>
       <BcTablePager
-        v-if="!hidePager && data?.paging"
-        :page-size="pageSize ?? 0"
+        v-if="!hidePager && data?.paging && query?.limit"
+        :page-size="query.limit"
         :paging="data?.paging"
-        :cursor
         @set-cursor="setCursor"
-        @set-page-size="setPageSize"
+        @set-page-size="setLimit"
       >
         <template #bc-table-footer-left>
           <slot name="bc-table-footer-left" />
@@ -217,10 +208,6 @@ const sort = computed(() => {
     width: 32px;
   }
 
-  :deep(.selection) {
-    width: 20px;
-  }
-
   :deep(.p-datatable-emptymessage) {
     height: 140px;
     background: transparent;
@@ -231,6 +218,13 @@ const sort = computed(() => {
   }
 }
 
+.bc-table-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-block: var(--padding-medium);
+}
+
 .toggle {
   cursor: pointer;
 }

frontend/components/bc/table/TablePager.vue

@@ -1,31 +1,28 @@
 <script setup lang="ts">
 import type { Paging } from '~/types/api/common'
-import type { Cursor } from '~/types/datatable'
+// import type { Cursor } from '~/types/datatable'
 
 interface Props {
-  cursor: Cursor,
+  // cursor: Cursor,
   pageSize: number,
   paging?: Paging,
-  stepperOnly?: boolean,
 }
 const props = defineProps<Props>()
 
 const emit = defineEmits<{
-  (e: 'setCursor', value: Cursor): void,
+  (e: 'setCursor', value: string | undefined): void,
   (e: 'setPageSize', value: number): void,
 }>()
 
-const pageSizes = [
+const limits = [
   5,
   10,
   25,
   50,
   100,
-]
+] as const
 
-const currentOffset = computed<number>(() =>
-  typeof props.cursor === 'number' ? props.cursor : 0,
-)
+const currentOffset = ref(0)
 
 const data = computed(() => {
   if (!props.paging) {
@@ -58,54 +55,54 @@ const data = computed(() => {
   }
 })
 
-const next = () => {
-  emit(
-    'setCursor',
-    Math.min(
-      currentOffset.value + props.pageSize,
-      ((data.value.lastPage ?? 1) - 1) * props.pageSize,
-    ),
-  )
-}
+// const next = () => {
+//   emit(
+//     'setCursor',
+//     Math.min(
+//       currentOffset.value + props.pageSize,
+//       ((data.value.lastPage ?? 1) - 1) * props.pageSize,
+//     ),
+//   )
+// }
 
-const prev = () => {
-  emit('setCursor', Math.max(0, currentOffset.value - props.pageSize))
-}
+// const prev = () => {
+//   emit('setCursor', Math.max(0, currentOffset.value - props.pageSize))
+// }
 
 const first = () => {
   emit('setCursor', undefined)
 }
 
-const last = () => {
-  emit('setCursor', (data.value.lastPage! - 1) * props.pageSize)
-}
+// const last = () => {
+//   emit('setCursor', (data.value.lastPage! - 1) * props.pageSize)
+// }
 
 const setPageSize = (size: number) => {
-  if (data.value.mode === 'offset') {
-    // in case we increase the page size we must adjust the offset
-    const off = currentOffset.value % size
-    if (off > 0) {
-      emit('setCursor', currentOffset.value - off)
-    }
-  }
+  // if (data.value.mode === 'offset') {
+  //   // in case we increase the page size we must adjust the offset
+  //   const off = currentOffset.value % size
+  //   if (off > 0) {
+  //     emit('setCursor', currentOffset.value - off)
+  //   }
+  // }
   emit('setPageSize', size)
 }
 
-// in case the totalCount decreased
-watch(
-  () => data.value.lastPage && data.value.lastPage < data.value.page,
-  (match) => {
-    if (data.value.lastPage !== undefined && match) {
-      last()
-    }
-  },
-)
+// // in case the totalCount decreased
+// watch(
+//   () => data.value.lastPage && data.value.lastPage < data.value.page,
+//   (match) => {
+//     if (data.value.lastPage !== undefined && match) {
+//       last()
+//     }
+//   },
+// )
 </script>
 
 <template>
   <div class="bc-pageinator">
     <div class="pager">
-      <template v-if="data.mode === 'offset'">
+      <!-- <template v-if="data.mode === 'offset'">
         <div
           class="item button"
           :disabled="!currentOffset"
@@ -143,46 +140,43 @@ watch(
         >
           {{ $t("table.last") }}
         </div>
-      </template>
-      <template v-else-if="data.mode === 'cursor'">
-        <div
-          class="item button"
-          :disabled="!data.prev_cursor"
-          @click="first"
-        >
-          {{ $t("table.first") }}
-        </div>
-        <div
-          class="item button"
-          :disabled="!data.prev_cursor"
-          @click="emit('setCursor', data.prev_cursor)"
-        >
-          <BcIcon
-            name="chevron-left"
-            class="toggle"
-          />
-        </div>
-        <div
-          class="item button"
-          :disabled="!data.next_cursor"
-          @click="emit('setCursor', data.next_cursor)"
-        >
-          <BcIcon
-            name="chevron-right"
-            class="toggle"
-          />
-        </div>
-      </template>
+      </template> -->
+      <div
+        class="item button"
+        :disabled="!data.prev_cursor"
+        @click="first"
+      >
+        {{ $t("table.first") }}
+      </div>
+      <div
+        class="item button"
+        :disabled="!data.prev_cursor"
+        @click="emit('setCursor', data.prev_cursor)"
+      >
+        <BcIcon
+          name="chevron-left"
+          class="toggle"
+        />
+      </div>
+      <div
+        class="item button"
+        :disabled="!data.next_cursor"
+        @click="emit('setCursor', data.next_cursor)"
+      >
+        <BcIcon
+          name="chevron-right"
+          class="toggle"
+        />
+      </div>
       <Select
-        v-if="props.pageSize && !stepperOnly"
+        v-if="props.pageSize"
         :model-value="props.pageSize"
-        :options="pageSizes"
+        :options="[...limits]"
         class="table small"
         @change="(event) => setPageSize(event.value)"
       />
     </div>
     <div
-      v-if="!stepperOnly"
       class="left-info"
     >
       <slot name="bc-table-footer-left">

frontend/components/dashboard/DashboardControls.vue

@@ -341,9 +341,12 @@ const editDashboard = () => {
 </script>
 
 <template>
-  <DashboardGroupManagementModal v-model="manageGroupsModalVisisble" />
-  <DashboardValidatorManagementModal
-    v-if="dashboardType == 'validator'"
+  <DashboardGroupManagementModal
+    v-if="manageGroupsModalVisisble"
+    v-model="manageGroupsModalVisisble"
+  />
+  <LazyDashboardValidatorManagementModal
+    v-if="dashboardType == 'validator' && manageValidatorsModalVisisble"
     v-model="manageValidatorsModalVisisble"
   />
   <div class="header-row">

frontend/components/dashboard/DashboardGroupManagementModal.vue

@@ -6,10 +6,7 @@ import {
 } from '#components'
 import type { ApiPagingResponse } from '~/types/api/common'
 import type { VDBOverviewGroup } from '~/types/api/validator_dashboard'
-import type {
-  Cursor, SortOrder,
-} from '~/types/datatable'
-import { getSortOrder } from '~/utils/table'
+import type { Cursor } from '~/types/datatable'
 
 const { t: $t } = useTranslation()
 const { fetch } = useCustomFetch()