diff --git a/src/lib/components/database/DatabaseGridWithProvider.svelte b/src/lib/components/database/DatabaseGridWithProvider.svelte index 204d3533..dd455783 100644 --- a/src/lib/components/database/DatabaseGridWithProvider.svelte +++ b/src/lib/components/database/DatabaseGridWithProvider.svelte @@ -12,6 +12,7 @@ import type { CollectionFilterState } from '$lib/components/collection/CollectionFilters.svelte' import { onMount, onDestroy } from 'svelte' import { goto } from '$app/navigation' + import { page } from '$app/stores' import type { Snippet } from 'svelte' @@ -19,10 +20,11 @@ resource: 'weapons' | 'characters' | 'summons' columns: IColumn[] pageSize?: number + leftActions?: Snippet headerActions?: Snippet } - const { resource, columns, pageSize: initialPageSize = 20, headerActions }: Props = $props() + const { resource, columns, pageSize: initialPageSize = 20, leftActions, headerActions }: Props = $props() // State let data = $state([]) @@ -72,13 +74,25 @@ // Grid API reference let api: any + // Update URL with current page (without triggering navigation) + function updateUrl(pageNum: number) { + const url = new URL($page.url) + if (pageNum === 1) { + url.searchParams.delete('page') + } else { + url.searchParams.set('page', String(pageNum)) + } + // Use replaceState to update URL without adding history entry + goto(url.pathname + url.search, { replaceState: true, noScroll: true, keepFocus: true }) + } + // Load data - async function loadData(page: number = 1) { + async function loadData(pageNum: number = 1, updateUrlParam: boolean = true) { loading = true try { - const result = await provider.loadPage(page) + const result = await provider.loadPage(pageNum) data = result - currentPage = page + currentPage = pageNum // Get pagination metadata from provider const meta = provider.getPaginationMeta() @@ -90,6 +104,11 @@ pageSize = meta.pageSize } } + + // Update URL to reflect current page + if (updateUrlParam) { + updateUrl(pageNum) + } } catch (error) { console.error('Failed to load data:', error) } finally { @@ -205,9 +224,11 @@ const startItem = $derived((currentPage - 1) * pageSize + 1) const endItem = $derived(Math.min(currentPage * pageSize, total)) - // Load initial data + // Load initial data from URL page param onMount(() => { - loadData() + const pageParam = $page.url.searchParams.get('page') + const initialPage = pageParam ? Math.max(1, parseInt(pageParam, 10) || 1) : 1 + loadData(initialPage, false) // Don't update URL on initial load }) // Clean up timeout on destroy @@ -224,6 +245,10 @@
+ {#if leftActions} + {@render leftActions()} + {/if} +