Skip to content

Commit c2c6f8c

Browse files
marcel-bitflymarcel-bitfly
committed
--wip-- [skip ci]
1 parent 9c0ece4 commit c2c6f8c

17 files changed

Lines changed: 8475 additions & 408 deletions

File tree

‎frontend/Api.ts‎

Lines changed: 2720 additions & 0 deletions
Large diffs are not rendered by default.

‎frontend/components/bc/table/BcTable.vue‎

Lines changed: 32 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,22 @@
11
<script setup lang="ts">
2+
import type { DataTableSortEvent } from 'primevue/datatable'
23
import type { ApiPagingResponse } from '~/types/api/common'
3-
import type { Cursor } from '~/types/datatable'
44
5-
interface Props {
5+
const props = defineProps<{
66
addSpacer?: boolean,
7-
cursor?: Cursor,
7+
// cursor?: Cursor,
88
data?: ApiPagingResponse<any>,
99
dataKey: string, // Required Unique identifier for a data row
1010
expandable?: boolean,
11+
hasSelectionMode?: boolean,
1112
hidePager?: boolean,
1213
isRowExpandable?: (item: any) => boolean,
14+
// limit?: number,
1315
loading?: boolean,
1416
pageSize?: number,
15-
selectedSort?: string,
16-
selectionMode?: 'multiple' | 'single',
1717
tableClass?: string,
18-
}
19-
const props = defineProps<Props>()
20-
21-
const emit = defineEmits<{
22-
(e: 'setCursor', value: Cursor): void,
23-
(e: 'setPageSize', value: number): void,
2418
}>()
19+
const query = defineModel<Query>('query')
2520
2621
const expandedRows = ref<Record<any, boolean>>({})
2722
@@ -70,14 +65,23 @@ const toggleItem = (item: any) => {
7065
expandedRows.value = { ...expandedRows.value }
7166
}
7267
73-
const setCursor = (value: Cursor) => {
68+
const setCursor = (value: string | undefined) => {
69+
if (!query.value) return
7470
toggleAll(true)
75-
emit('setCursor', value)
71+
query.value.cursor = value
7672
}
7773
78-
const setPageSize = (value: number) => {
74+
const setLimit = (value: number) => {
75+
if (!query.value) return
76+
toggleAll(true)
77+
query.value.limit = value
78+
}
79+
const onSort = (event: DataTableSortEvent) => {
80+
if (!query.value) return
7981
toggleAll(true)
80-
emit('setPageSize', value)
82+
const order = event.sortOrder === -1 ? 'asc' : 'desc'
83+
const { sortField } = event
84+
query.value.sort = `${sortField}:${order}` as const
8185
}
8286
8387
watch(
@@ -94,17 +98,6 @@ watch(
9498
toggleAll(true)
9599
},
96100
)
97-
98-
const sort = computed(() => {
99-
if (!props.selectedSort?.includes(':')) {
100-
return
101-
}
102-
const split = props.selectedSort?.split(':')
103-
return {
104-
field: split[0],
105-
order: split[1] === 'asc' ? -1 : 1,
106-
}
107-
})
108101
</script>
109102

110103
<template>
@@ -113,15 +106,14 @@ const sort = computed(() => {
113106
class="bc-table"
114107
sort-mode="single"
115108
lazy
116-
:sort-field="sort?.field"
117-
:sort-order="sort?.order"
118109
:value="data?.data"
119110
:data-key
120111
:loading
112+
@sort="onSort"
121113
>
122114
<Column
123-
v-if="selectionMode"
124-
:selection-mode
115+
v-if="hasSelectionMode"
116+
selection-mode="multiple"
125117
class="selection"
126118
/>
127119
<Column
@@ -190,12 +182,11 @@ const sort = computed(() => {
190182
</template>
191183
<template #footer>
192184
<BcTablePager
193-
v-if="!hidePager && data?.paging"
194-
:page-size="pageSize ?? 0"
185+
v-if="!hidePager && data?.paging && query?.limit"
186+
:page-size="query.limit"
195187
:paging="data?.paging"
196-
:cursor
197188
@set-cursor="setCursor"
198-
@set-page-size="setPageSize"
189+
@set-page-size="setLimit"
199190
>
200191
<template #bc-table-footer-left>
201192
<slot name="bc-table-footer-left" />
@@ -217,10 +208,6 @@ const sort = computed(() => {
217208
width: 32px;
218209
}
219210
220-
:deep(.selection) {
221-
width: 20px;
222-
}
223-
224211
:deep(.p-datatable-emptymessage) {
225212
height: 140px;
226213
background: transparent;
@@ -231,6 +218,13 @@ const sort = computed(() => {
231218
}
232219
}
233220
221+
.bc-table-footer {
222+
display: flex;
223+
justify-content: space-between;
224+
align-items: center;
225+
padding-block: var(--padding-medium);
226+
}
227+
234228
.toggle {
235229
cursor: pointer;
236230
}

‎frontend/components/bc/table/TablePager.vue‎

Lines changed: 68 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,28 @@
11
<script setup lang="ts">
22
import type { Paging } from '~/types/api/common'
3-
import type { Cursor } from '~/types/datatable'
3+
// import type { Cursor } from '~/types/datatable'
44
55
interface Props {
6-
cursor: Cursor,
6+
// cursor: Cursor,
77
pageSize: number,
88
paging?: Paging,
9-
stepperOnly?: boolean,
109
}
1110
const props = defineProps<Props>()
1211
1312
const emit = defineEmits<{
14-
(e: 'setCursor', value: Cursor): void,
13+
(e: 'setCursor', value: string | undefined): void,
1514
(e: 'setPageSize', value: number): void,
1615
}>()
1716
18-
const pageSizes = [
17+
const limits = [
1918
5,
2019
10,
2120
25,
2221
50,
2322
100,
24-
]
23+
] as const
2524
26-
const currentOffset = computed<number>(() =>
27-
typeof props.cursor === 'number' ? props.cursor : 0,
28-
)
25+
const currentOffset = ref(0)
2926
3027
const data = computed(() => {
3128
if (!props.paging) {
@@ -58,54 +55,54 @@ const data = computed(() => {
5855
}
5956
})
6057
61-
const next = () => {
62-
emit(
63-
'setCursor',
64-
Math.min(
65-
currentOffset.value + props.pageSize,
66-
((data.value.lastPage ?? 1) - 1) * props.pageSize,
67-
),
68-
)
69-
}
58+
// const next = () => {
59+
// emit(
60+
// 'setCursor',
61+
// Math.min(
62+
// currentOffset.value + props.pageSize,
63+
// ((data.value.lastPage ?? 1) - 1) * props.pageSize,
64+
// ),
65+
// )
66+
// }
7067
71-
const prev = () => {
72-
emit('setCursor', Math.max(0, currentOffset.value - props.pageSize))
73-
}
68+
// const prev = () => {
69+
// emit('setCursor', Math.max(0, currentOffset.value - props.pageSize))
70+
// }
7471
7572
const first = () => {
7673
emit('setCursor', undefined)
7774
}
7875
79-
const last = () => {
80-
emit('setCursor', (data.value.lastPage! - 1) * props.pageSize)
81-
}
76+
// const last = () => {
77+
// emit('setCursor', (data.value.lastPage! - 1) * props.pageSize)
78+
// }
8279
8380
const setPageSize = (size: number) => {
84-
if (data.value.mode === 'offset') {
85-
// in case we increase the page size we must adjust the offset
86-
const off = currentOffset.value % size
87-
if (off > 0) {
88-
emit('setCursor', currentOffset.value - off)
89-
}
90-
}
81+
// if (data.value.mode === 'offset') {
82+
// // in case we increase the page size we must adjust the offset
83+
// const off = currentOffset.value % size
84+
// if (off > 0) {
85+
// emit('setCursor', currentOffset.value - off)
86+
// }
87+
// }
9188
emit('setPageSize', size)
9289
}
9390
94-
// in case the totalCount decreased
95-
watch(
96-
() => data.value.lastPage && data.value.lastPage < data.value.page,
97-
(match) => {
98-
if (data.value.lastPage !== undefined && match) {
99-
last()
100-
}
101-
},
102-
)
91+
// // in case the totalCount decreased
92+
// watch(
93+
// () => data.value.lastPage && data.value.lastPage < data.value.page,
94+
// (match) => {
95+
// if (data.value.lastPage !== undefined && match) {
96+
// last()
97+
// }
98+
// },
99+
// )
103100
</script>
104101

105102
<template>
106103
<div class="bc-pageinator">
107104
<div class="pager">
108-
<template v-if="data.mode === 'offset'">
105+
<!-- <template v-if="data.mode === 'offset'">
109106
<div
110107
class="item button"
111108
:disabled="!currentOffset"
@@ -143,46 +140,43 @@ watch(
143140
>
144141
{{ $t("table.last") }}
145142
</div>
146-
</template>
147-
<template v-else-if="data.mode === 'cursor'">
148-
<div
149-
class="item button"
150-
:disabled="!data.prev_cursor"
151-
@click="first"
152-
>
153-
{{ $t("table.first") }}
154-
</div>
155-
<div
156-
class="item button"
157-
:disabled="!data.prev_cursor"
158-
@click="emit('setCursor', data.prev_cursor)"
159-
>
160-
<BcIcon
161-
name="chevron-left"
162-
class="toggle"
163-
/>
164-
</div>
165-
<div
166-
class="item button"
167-
:disabled="!data.next_cursor"
168-
@click="emit('setCursor', data.next_cursor)"
169-
>
170-
<BcIcon
171-
name="chevron-right"
172-
class="toggle"
173-
/>
174-
</div>
175-
</template>
143+
</template> -->
144+
<div
145+
class="item button"
146+
:disabled="!data.prev_cursor"
147+
@click="first"
148+
>
149+
{{ $t("table.first") }}
150+
</div>
151+
<div
152+
class="item button"
153+
:disabled="!data.prev_cursor"
154+
@click="emit('setCursor', data.prev_cursor)"
155+
>
156+
<BcIcon
157+
name="chevron-left"
158+
class="toggle"
159+
/>
160+
</div>
161+
<div
162+
class="item button"
163+
:disabled="!data.next_cursor"
164+
@click="emit('setCursor', data.next_cursor)"
165+
>
166+
<BcIcon
167+
name="chevron-right"
168+
class="toggle"
169+
/>
170+
</div>
176171
<Select
177-
v-if="props.pageSize && !stepperOnly"
172+
v-if="props.pageSize"
178173
:model-value="props.pageSize"
179-
:options="pageSizes"
174+
:options="[...limits]"
180175
class="table small"
181176
@change="(event) => setPageSize(event.value)"
182177
/>
183178
</div>
184179
<div
185-
v-if="!stepperOnly"
186180
class="left-info"
187181
>
188182
<slot name="bc-table-footer-left">

‎frontend/components/dashboard/DashboardControls.vue‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -341,9 +341,12 @@ const editDashboard = () => {
341341
</script>
342342

343343
<template>
344-
<DashboardGroupManagementModal v-model="manageGroupsModalVisisble" />
345-
<DashboardValidatorManagementModal
346-
v-if="dashboardType == 'validator'"
344+
<DashboardGroupManagementModal
345+
v-if="manageGroupsModalVisisble"
346+
v-model="manageGroupsModalVisisble"
347+
/>
348+
<LazyDashboardValidatorManagementModal
349+
v-if="dashboardType == 'validator' && manageValidatorsModalVisisble"
347350
v-model="manageValidatorsModalVisisble"
348351
/>
349352
<div class="header-row">

‎frontend/components/dashboard/DashboardGroupManagementModal.vue‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,7 @@ import {
66
} from '#components'
77
import type { ApiPagingResponse } from '~/types/api/common'
88
import type { VDBOverviewGroup } from '~/types/api/validator_dashboard'
9-
import type {
10-
Cursor, SortOrder,
11-
} from '~/types/datatable'
12-
import { getSortOrder } from '~/utils/table'
9+
import type { Cursor } from '~/types/datatable'
1310
1411
const { t: $t } = useTranslation()
1512
const { fetch } = useCustomFetch()

0 commit comments

Comments
 (0)