fix: displaying and editing dashboard groups list

- add doptimistic response for adding, editing and deleting
- remove client pagination

Author: enzo-bitfly

frontend/components/DashboardIndex.vue

@@ -6,7 +6,11 @@
 import type { HashTab } from '~/components/bc/tab/BcTabList.vue'
 import type { ValidatorDashboard } from '~/types/api/dashboard'
 import type { SlotVizEpoch } from '~/types/api/slot_viz'
-import type { VDBOverviewData } from '~/types/api/validator_dashboard'
+import type {
+  VDBOverviewData,
+  VDBOverviewGroup,
+} from '~/types/api/validator_dashboard'
+
 // import type { TableQueryParams } from '~/types/datatable'
 
 // const route = useRoute()
@@ -222,6 +226,7 @@ const onAddValidator = () => {
 
 const emit = defineEmits<{
   (e: 'change-validators', validators: string[]): void,
+  (e: 'change-groups', value: VDBOverviewGroup[]): void,
 }>()
 
 // const tab = ref('summary')
@@ -265,7 +270,9 @@ const { key } = useDashboard()
     <DashboardControls
       v-model:is-visible-management-modal="isVisibleManagementModal"
       :validator-dashboards
-      @change-validators=" emit('change-validators', $event)"
+      :dashboard-title="overview?.name ?? ''"
+      @change-validators="emit('change-validators', $event)"
+      @change-groups="emit('change-groups', $event)"
     />
     <DashboardValidatorOverview
       :overview

frontend/components/bc/table/BcTable.vue

@@ -223,6 +223,7 @@ const sortOrder = computed(() => query.value.sort?.split(':')[1] === 'desc' ? 1
           <slot name="bc-table-footer-right" />
         </template>
       </BcTablePager>
+      <slot name="bc-table-footer-bottom" />
     </template>
   </DataTable>
 </template>

frontend/components/dashboard/DashboardControls.vue

@@ -10,9 +10,11 @@ import type {
   MenuBarButton, MenuBarEntry,
 } from '~/types/menuBar'
 import type { Icon } from '~/components/bc/icon/BcIcon.vue'
+import type { VDBOverviewGroup } from '~/types/api/validator_dashboard'
 import type { ValidatorDashboard } from '~/types/api/dashboard'
 
 const props = defineProps<{
+  dashboardTitle: string,
   validatorDashboards: null | ValidatorDashboard[],
 }>()
 
@@ -314,12 +316,14 @@ const editDashboard = () => {
 }
 const emit = defineEmits<{
   (e: 'change-validators', value: string[]): void,
+  (e: 'change-groups', value: VDBOverviewGroup[]): void,
 }>()
 </script>
 
 <template>
   <DashboardGroupManagementModal
     v-model="manageGroupsModalVisisble"
+    @change-groups="emit('change-groups', $event)"
   />
   <LazyDashboardValidatorManagementModal
     v-if="isVisibleManagementModal"