Skip to content

Commit 72d46ee

Browse files
niemyjskiniemyjski
committed
Work arounds for slot forwarding, couldn't reuse let:variable syntax and had to use writables for page.
sveltejs/svelte#7021
1 parent f77353a commit 72d46ee

File tree

6 files changed

+182
-89
lines changed

6 files changed

+182
-89
lines changed

‎src/Exceptionless.Web/ClientApp/src/lib/components/events/EventsTable.svelte

Lines changed: 45 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -22,25 +22,17 @@
2222
import Summary from '$comp/events/summary/Summary.svelte';
2323
import { nameof } from '$lib/utils';
2424
import StackUsersSummary from './StackUsersSummaryColumn.svelte';
25-
import Pager from '$comp/table/Pager.svelte';
2625
import NumberFormatter from '$comp/formatters/NumberFormatter.svelte';
2726
import EventsUserIdentitySummaryColumn from './EventsUserIdentitySummaryColumn.svelte';
28-
import PagerSummary from '$comp/table/PagerSummary.svelte';
29-
import Loading from '$comp/Loading.svelte';
30-
import ErrorMessage from '$comp/ErrorMessage.svelte';
31-
import Table from '$comp/table/Table.svelte';
3227
import { createEventDispatcher } from 'svelte';
33-
import {
34-
DEFAULT_LIMIT,
35-
hasNextPage,
36-
hasPreviousPage,
37-
canNavigateToFirstPage
38-
} from '$lib/helpers/api';
28+
import { DEFAULT_LIMIT } from '$lib/helpers/api';
3929
import {
4030
type FetchClientResponse,
4131
globalFetchClient as api,
4232
globalLoading as loading
4333
} from '$api/FetchClient';
34+
import TableWithPaging from '$comp/table/TableWithPaging.svelte';
35+
import TableWithPagingFooter from '$comp/table/TableWithPagingFooter.svelte';
4436
4537
export let mode: GetEventsMode = 'summary';
4638
export let filter: Readable<string>;
@@ -189,7 +181,7 @@
189181
});
190182
191183
const table = createSvelteTable<SummaryModel<SummaryTemplateKeys>>(options);
192-
let page = 0;
184+
const page = writable(0);
193185
194186
let response: FetchClientResponse<EventSummaryModel<SummaryTemplateKeys>[]>;
195187
const parameters = writable<IGetEventsParams>({ mode });
@@ -220,7 +212,7 @@
220212
}
221213
222214
function onNavigateToFirstPage() {
223-
page = 0;
215+
page.update(() => 0);
224216
parameters.update((params) => ({
225217
...params,
226218
before: undefined,
@@ -229,7 +221,7 @@
229221
}
230222
231223
function onPreviousPage() {
232-
page = Math.max(page - 1, 0);
224+
page.update((page) => Math.max(page - 1, 0));
233225
parameters.update((params) => ({
234226
...params,
235227
before: response?.links.next?.before,
@@ -238,7 +230,7 @@
238230
}
239231
240232
function onNextPage() {
241-
page = page + 1;
233+
page.update((page) => page + 1);
242234
parameters.update((params) => ({
243235
...params,
244236
before: undefined,
@@ -249,46 +241,44 @@
249241
const dispatch = createEventDispatcher();
250242
</script>
251243

252-
<Table {table} on:rowclick={(event) => dispatch('rowclick', event.detail)}>
253-
<div slot="header">
254-
<slot name="header" {table} problem={response?.problem} />
255-
</div>
256-
<div slot="footer">
257-
<slot name="footer" {table} problem={response?.problem} />
258-
</div>
259-
</Table>
260-
261-
<div class="flex flex-1 items-center justify-between text-xs text-gray-700">
262-
<div class="py-2">
263-
{#if $loading}
264-
<Loading></Loading>
265-
{:else if response?.problem?.errors.general}
266-
<ErrorMessage message={response?.problem?.errors.general}></ErrorMessage>
267-
{/if}
268-
</div>
269-
270-
{#if response?.total}
271-
<PagerSummary
272-
{page}
244+
<TableWithPaging
245+
{table}
246+
loading={$loading}
247+
error={response?.problem?.errors.general}
248+
page={$page}
249+
pageTotal={response?.data?.length || 0}
250+
limit={DEFAULT_LIMIT}
251+
total={response?.total || 0}
252+
{onNavigateToFirstPage}
253+
{onPreviousPage}
254+
{onNextPage}
255+
on:rowclick={(event) => dispatch('rowclick', event.detail)}
256+
>
257+
<slot slot="header" name="header" {table} />
258+
<slot
259+
slot="footer"
260+
name="footer"
261+
{table}
262+
loading={$loading}
263+
error={response?.problem?.errors.general}
264+
page={$page}
265+
pageTotal={response?.data?.length || 0}
266+
limit={DEFAULT_LIMIT}
267+
total={response?.total || 0}
268+
{onNavigateToFirstPage}
269+
{onPreviousPage}
270+
{onNextPage}
271+
>
272+
<TableWithPagingFooter
273+
loading={$loading}
274+
error={response?.problem?.errors.general}
275+
page={$page}
273276
pageTotal={response?.data?.length || 0}
274277
limit={DEFAULT_LIMIT}
275278
total={response?.total || 0}
276-
></PagerSummary>
277-
278-
<div class="py-2">
279-
<Pager
280-
canNavigateToFirstPage={canNavigateToFirstPage(page)}
281-
on:navigatetofirstpage={() => onNavigateToFirstPage()}
282-
hasPrevious={hasPreviousPage(page)}
283-
on:previous={() => onPreviousPage()}
284-
hasNext={hasNextPage(
285-
page,
286-
response?.data?.length || 0,
287-
DEFAULT_LIMIT,
288-
response?.total || 0
289-
)}
290-
on:next={() => onNextPage()}
291-
></Pager>
292-
</div>
293-
{/if}
294-
</div>
279+
{onNavigateToFirstPage}
280+
{onPreviousPage}
281+
{onNextPage}
282+
></TableWithPagingFooter>
283+
</slot>
284+
</TableWithPaging>

‎src/Exceptionless.Web/ClientApp/src/lib/components/events/EventsTailLogTable.svelte

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -159,22 +159,25 @@
159159
<WebSocketMessage type="PersistentEventChanged" on:message={onPersistentEvent}></WebSocketMessage>
160160

161161
<Table {table} on:rowclick={(event) => dispatch('rowclick', event.detail)}>
162-
<div slot="header">
163-
<slot name="header" {table} problem={response?.problem} />
164-
</div>
165-
<div slot="footer">
166-
<slot name="footer" {table} problem={response?.problem} {loading} {lastUpdated}>
167-
<p class="py-2 text-center text-xs text-gray-700">
168-
{#if $loading}
169-
<Loading></Loading>
170-
{:else if response?.problem?.errors.general}
171-
<ErrorMessage message={response?.problem?.errors.general}></ErrorMessage>
172-
{:else}
173-
Streaming events... Last updated <span class="font-medium"
174-
><Time live={true} relative={true} timestamp={lastUpdated}></Time></span
175-
>
176-
{/if}
177-
</p>
178-
</slot>
179-
</div>
162+
<slot slot="header" name="header" {table} />
163+
<slot
164+
slot="footer"
165+
name="footer"
166+
{table}
167+
error={response?.problem?.errors.general}
168+
{loading}
169+
{lastUpdated}
170+
>
171+
<p class="py-2 text-center text-xs text-gray-700">
172+
{#if $loading}
173+
<Loading></Loading>
174+
{:else if response?.problem?.errors.general}
175+
<ErrorMessage message={response?.problem?.errors.general}></ErrorMessage>
176+
{:else}
177+
Streaming events... Last updated <span class="font-medium"
178+
><Time live={true} relative={true} timestamp={lastUpdated}></Time></span
179+
>
180+
{/if}
181+
</p>
182+
</slot>
180183
</Table>

‎src/Exceptionless.Web/ClientApp/src/lib/components/table/PagerSummary.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
export let total: number;
99
1010
$: start = getPageStart(page, limit);
11-
$: end = getPageEnd(page, pageTotal, limit);
11+
$: end = Math.min(getPageEnd(page, pageTotal, limit), total);
1212
</script>
1313

1414
{#if pageTotal !== 0 && total !== 0}

‎src/Exceptionless.Web/ClientApp/src/lib/components/table/Table.svelte

Lines changed: 9 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@
22
import KeyboardArrowDownIcon from '~icons/mdi/keyboard-arrow-down';
33
import KeyboardArrowUpIcon from '~icons/mdi/keyboard-arrow-up';
44
5-
import { flexRender, type Header, type Table } from '@tanstack/svelte-table';
5+
import { flexRender, type Header, type Table as TableType } from '@tanstack/svelte-table';
66
import { createEventDispatcher } from 'svelte';
77
import type { Readable } from 'svelte/store';
88
99
type TData = $$Generic;
10-
export let table: Readable<Table<TData>>;
10+
export let table: Readable<TableType<TData>>;
1111
1212
const dispatch = createEventDispatcher();
1313
@@ -16,9 +16,7 @@
1616
}
1717
</script>
1818

19-
<div>
20-
<slot name="header" {table} />
21-
</div>
19+
<slot name="header" {table} />
2220

2321
<table class="table table-zebra table-xs border">
2422
<thead>
@@ -51,13 +49,11 @@
5149
{/each}
5250
</thead>
5351
<tbody>
54-
{#if !$table.getRowModel().rows.length}
55-
<tr>
56-
<td colspan={$table.getVisibleLeafColumns().length} class="text-center">
57-
No data was found with the current filter.
58-
</td>
59-
</tr>
60-
{/if}
52+
<tr class="hidden only:table-row text-center">
53+
<td colspan={$table.getVisibleLeafColumns().length}>
54+
No data was found with the current filter.
55+
</td>
56+
</tr>
6157
{#each $table.getRowModel().rows as row}
6258
<tr
6359
class="hover cursor-pointer"
@@ -75,6 +71,4 @@
7571
</tbody>
7672
</table>
7773

78-
<div>
79-
<slot name="footer" {table} />
80-
</div>
74+
<slot name="footer" {table} />

‎src/Exceptionless.Web/ClientApp/src/lib/components/table/TableWithPaging.svelte

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<script lang="ts">
2+
import type { Readable } from 'svelte/store';
3+
4+
import { DEFAULT_LIMIT } from '$lib/helpers/api';
5+
6+
import type { Table as TableType } from '@tanstack/svelte-table';
7+
import { createEventDispatcher } from 'svelte';
8+
import Table from './Table.svelte';
9+
import TableWithPagingFooter from './TableWithPagingFooter.svelte';
10+
11+
type TData = $$Generic;
12+
export let table: Readable<TableType<TData>>;
13+
14+
export let loading: boolean;
15+
export let error: string[] | undefined;
16+
17+
export let page: number;
18+
export let pageTotal: number;
19+
export let limit = DEFAULT_LIMIT;
20+
export let total: number;
21+
22+
export let onNavigateToFirstPage: () => void;
23+
export let onPreviousPage: () => void;
24+
export let onNextPage: () => void;
25+
26+
const dispatch = createEventDispatcher();
27+
</script>
28+
29+
<Table {table} on:rowclick={(event) => dispatch('rowclick', event.detail)}>
30+
<slot slot="header" name="header" {table} />
31+
<slot
32+
slot="footer"
33+
name="footer"
34+
{table}
35+
{loading}
36+
{error}
37+
{page}
38+
{pageTotal}
39+
{limit}
40+
{total}
41+
{onNavigateToFirstPage}
42+
{onPreviousPage}
43+
{onNextPage}
44+
>
45+
<TableWithPagingFooter
46+
{loading}
47+
{error}
48+
{page}
49+
{pageTotal}
50+
{limit}
51+
{total}
52+
{onNavigateToFirstPage}
53+
{onPreviousPage}
54+
{onNextPage}
55+
></TableWithPagingFooter>
56+
</slot>
57+
</Table>

‎src/Exceptionless.Web/ClientApp/src/lib/components/table/TableWithPagingFooter.svelte

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<script lang="ts">
2+
import ErrorMessage from '$comp/ErrorMessage.svelte';
3+
import Loading from '$comp/Loading.svelte';
4+
import {
5+
DEFAULT_LIMIT,
6+
canNavigateToFirstPage,
7+
hasPreviousPage,
8+
hasNextPage
9+
} from '$lib/helpers/api';
10+
import Pager from './Pager.svelte';
11+
import PagerSummary from './PagerSummary.svelte';
12+
13+
export let loading: boolean;
14+
export let error: string[] | undefined;
15+
16+
export let page: number;
17+
export let pageTotal: number;
18+
export let limit = DEFAULT_LIMIT;
19+
export let total: number;
20+
21+
export let onNavigateToFirstPage: () => void;
22+
export let onPreviousPage: () => void;
23+
export let onNextPage: () => void;
24+
</script>
25+
26+
<div class="flex flex-1 items-center justify-between text-xs text-gray-700">
27+
<div class="py-2">
28+
{#if loading}
29+
<Loading></Loading>
30+
{:else if error}
31+
<ErrorMessage message={error}></ErrorMessage>
32+
{/if}
33+
</div>
34+
35+
{#if total}
36+
<PagerSummary {page} {pageTotal} {limit} {total}></PagerSummary>
37+
38+
<div class="py-2">
39+
<Pager
40+
canNavigateToFirstPage={canNavigateToFirstPage(page)}
41+
on:navigatetofirstpage={() => onNavigateToFirstPage()}
42+
hasPrevious={hasPreviousPage(page)}
43+
on:previous={() => onPreviousPage()}
44+
hasNext={hasNextPage(page, pageTotal, limit, total)}
45+
on:next={() => onNextPage()}
46+
></Pager>
47+
</div>
48+
{/if}
49+
</div>

0 commit comments

Comments
 (0)