Skip to content

Commit ea7ec97

Browse files
niemyjskiniemyjski
committed
Fixed issues with paging issues grid as it didn't support page numbers over aggs
1 parent 3511d95 commit ea7ec97

File tree

9 files changed

+66
-25
lines changed

9 files changed

+66
-25
lines changed

‎src/Exceptionless.Web/ClientApp/src/lib/features/events/api.svelte.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@ export interface GetEventsParams {
7474
limit?: number;
7575
mode?: GetEventsMode;
7676
offset?: string;
77+
page?: number;
7778
sort?: string;
7879
time?: string;
7980
}

‎src/Exceptionless.Web/ClientApp/src/lib/features/events/components/table/EventsDataTable.svelte

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,11 @@
4343
{@render footerChildren()}
4444
{:else}
4545
<DataTable.Selection {table} />
46+
<DataTable.PageSize bind:value={limit} {table}></DataTable.PageSize>
47+
<div class="flex items-center space-x-6 lg:space-x-8">
48+
<DataTable.PageCount {table} />
49+
<DataTable.Pagination {table} />
50+
</div>
4651
{/if}
47-
<DataTable.PageSize bind:value={limit} {table}></DataTable.PageSize>
48-
<DataTable.Pagination {table} />
4952
</DataTable.Footer>
5053
</DataTable.Root>

‎src/Exceptionless.Web/ClientApp/src/lib/features/events/components/table/options.svelte.ts

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -170,11 +170,15 @@ export function getTableContext<TSummaryModel extends SummaryModel<SummaryTempla
170170
setPagination(updaterOrValue);
171171

172172
const currentPageInfo = pagination();
173+
const nextLink = _meta.links?.next?.after as string;
174+
const previousLink = _meta.links?.previous?.before as string;
175+
173176
_parameters = {
174177
..._parameters,
175-
after: currentPageInfo.pageIndex > previousPageIndex ? (_meta.links.next?.after as string) : undefined,
176-
before: currentPageInfo.pageIndex < previousPageIndex && currentPageInfo.pageIndex > 0 ? (_meta.links.previous?.before as string) : undefined,
177-
limit: currentPageInfo.pageSize
178+
after: currentPageInfo.pageIndex > previousPageIndex ? nextLink : undefined,
179+
before: currentPageInfo.pageIndex < previousPageIndex && currentPageInfo.pageIndex > 0 ? previousLink : undefined,
180+
limit: currentPageInfo.pageSize,
181+
page: !nextLink && !previousLink && currentPageInfo.pageIndex !== 0 ? currentPageInfo.pageIndex + 1 : undefined
178182
};
179183
};
180184

@@ -185,6 +189,7 @@ export function getTableContext<TSummaryModel extends SummaryModel<SummaryTempla
185189
..._parameters,
186190
after: undefined,
187191
before: undefined,
192+
page: undefined,
188193
sort:
189194
sorting().length > 0
190195
? sorting()

‎src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-footer.svelte

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
99
import { type Table as SvelteTable } from '@tanstack/svelte-table';
1010
11+
import DataTablePageCount from './data-table-page-count.svelte';
1112
import DataTablePagination from './data-table-pagination.svelte';
1213
import DataTableSelection from './data-table-selection.svelte';
1314
@@ -25,6 +26,7 @@
2526
{:else}
2627
<DataTableSelection {table} />
2728
<div class="flex items-center space-x-6 lg:space-x-8">
29+
<DataTablePageCount {table} />
2830
<DataTablePagination {table} />
2931
</div>
3032
{/if}

‎src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-page-count.svelte

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<script module lang="ts">
2+
type TData = unknown;
3+
</script>
4+
5+
<script generics="TData" lang="ts">
6+
import type { Table } from '@tanstack/svelte-table';
7+
8+
import Number from '$comp/formatters/Number.svelte';
9+
10+
interface Props {
11+
table: Table<TData>;
12+
}
13+
14+
let { table }: Props = $props();
15+
</script>
16+
17+
<div class="flex w-[100px] items-center justify-center text-sm font-medium">
18+
Page <Number value={table.getState().pagination.pageIndex + 1} /> of <Number value={table.getPageCount()} />
19+
</div>

‎src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-pagination.svelte

Lines changed: 14 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
<script generics="TData" lang="ts">
66
import type { Table } from '@tanstack/svelte-table';
77
8-
import Number from '$comp/formatters/Number.svelte';
98
import { Button } from '$comp/ui/button';
109
import IconChevronDoubleLeft from '~icons/mdi/chevron-double-left';
1110
import IconChevronLeft from '~icons/mdi/chevron-left';
@@ -18,24 +17,19 @@
1817
let { table }: Props = $props();
1918
</script>
2019

21-
<div class="flex items-center space-x-6 lg:space-x-8">
22-
<div class="flex w-[100px] items-center justify-center text-sm font-medium">
23-
Page <Number value={table.getState().pagination.pageIndex + 1} /> of <Number value={table.getPageCount()} />
24-
</div>
25-
<div class="flex items-center space-x-2">
26-
{#if table.getState().pagination.pageIndex > 1}
27-
<Button class="hidden size-8 p-0 lg:flex" onclick={() => table.resetPageIndex(true)} variant="outline">
28-
<span class="sr-only">Go to first page</span>
29-
<IconChevronDoubleLeft class="mr-2 size-4" />
30-
</Button>
31-
{/if}
32-
<Button class="size-8 p-0" disabled={!table.getCanPreviousPage()} onclick={() => table.previousPage()} variant="outline">
33-
<span class="sr-only">Go to previous page</span>
34-
<IconChevronLeft class="size-4" />
20+
<div class="flex items-center space-x-2">
21+
{#if table.getState().pagination.pageIndex > 1}
22+
<Button class="hidden size-8 p-0 lg:flex" onclick={() => table.resetPageIndex(true)} variant="outline">
23+
<span class="sr-only">Go to first page</span>
24+
<IconChevronDoubleLeft class="size-4" />
3525
</Button>
36-
<Button class="size-8 p-0" disabled={!table.getCanNextPage()} onclick={() => table.nextPage()} variant="outline">
37-
<span class="sr-only">Go to next page</span>
38-
<IconChevronRight class="size-4" />
39-
</Button>
40-
</div>
26+
{/if}
27+
<Button class="size-8 p-0" disabled={!table.getCanPreviousPage()} onclick={() => table.previousPage()} variant="outline">
28+
<span class="sr-only">Go to previous page</span>
29+
<IconChevronLeft class="size-4" />
30+
</Button>
31+
<Button class="size-8 p-0" disabled={!table.getCanNextPage()} onclick={() => table.nextPage()} variant="outline">
32+
<span class="sr-only">Go to next page</span>
33+
<IconChevronRight class="size-4" />
34+
</Button>
4135
</div>

‎src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/index.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import Body from './data-table-body.svelte';
22
import Empty from './data-table-empty.svelte';
33
import Footer from './data-table-footer.svelte';
44
import Loading from './data-table-loading.svelte';
5+
import PageCount from './data-table-page-count.svelte';
56
import PageSize from './data-table-page-size.svelte';
67
import Pagination from './data-table-pagination.svelte';
78
import Refresh from './data-table-refresh.svelte';
@@ -16,6 +17,7 @@ export {
1617
Empty as DataTableEmpty,
1718
Footer as DataTableFooter,
1819
Loading as DataTableLoading,
20+
PageCount as DataTablePageCount,
1921
PageSize as DataTablePageSize,
2022
Pagination as DataTablePagination,
2123
Refresh as DataTableRefresh,
@@ -24,6 +26,7 @@ export {
2426
Empty,
2527
Footer,
2628
Loading,
29+
PageCount,
2730
PageSize,
2831
Pagination,
2932
Refresh,

‎src/Exceptionless.Web/ClientApp/src/routes/(app)/+page.svelte

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import type { EventSummaryModel, SummaryTemplateKeys } from '$features/events/components/summary/index';
33
44
import AutomaticRefreshIndicatorButton from '$comp/AutomaticRefreshIndicatorButton.svelte';
5+
import * as DataTable from '$comp/data-table';
56
import * as FacetedFilter from '$comp/faceted-filter';
67
import { toFacetedFilters } from '$comp/filters/facets';
78
import { DateFilter, filterChanged, filterRemoved, FilterSerializer, getDefaultFilters, type IFilter, toFilter } from '$comp/filters/filters.svelte';
@@ -129,6 +130,12 @@
129130
<EventsBulkActionsDropdownMenu {table} />
130131
{/if}
131132
</div>
133+
134+
<DataTable.PageSize bind:value={limit.value} {table}></DataTable.PageSize>
135+
<div class="flex items-center space-x-6 lg:space-x-8">
136+
<DataTable.PageCount {table} />
137+
<DataTable.Pagination {table} />
138+
</div>
132139
{/snippet}
133140
</EventsDataTable>
134141
</Card.Content>

‎src/Exceptionless.Web/ClientApp/src/routes/(app)/issues/+page.svelte

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import type { EventSummaryModel, SummaryTemplateKeys } from '$features/events/components/summary/index';
33
44
import AutomaticRefreshIndicatorButton from '$comp/AutomaticRefreshIndicatorButton.svelte';
5+
import * as DataTable from '$comp/data-table';
56
import * as FacetedFilter from '$comp/faceted-filter';
67
import { toFacetedFilters } from '$comp/filters/facets';
78
import { DateFilter, filterChanged, filterRemoved, FilterSerializer, getDefaultFilters, type IFilter, toFilter } from '$comp/filters/filters.svelte';
@@ -146,6 +147,12 @@
146147
<TableStacksBulkActionsDropdownMenu {table} />
147148
{/if}
148149
</div>
150+
151+
<DataTable.PageSize bind:value={limit.value} {table}></DataTable.PageSize>
152+
<div class="flex items-center space-x-6 lg:space-x-8">
153+
<DataTable.PageCount {table} />
154+
<DataTable.Pagination {table} />
155+
</div>
149156
{/snippet}
150157
</EventsDataTable>
151158
</Card.Content>

0 commit comments

Comments
 (0)