Visitenbuch/src/lib/components/table/FilteredEntryTable.svelte
2024-05-14 00:40:10 +02:00

80 lines
2.1 KiB
Svelte

<script lang="ts">
import { browser } from "$app/environment";
import { goto } from "$app/navigation";
import { z } from "zod";
import type { PaginationRequest } from "$lib/shared/model";
import type { ZEntriesQuery } from "$lib/shared/model/validation";
import { type RouterOutput } from "$lib/shared/trpc";
import { getQueryUrl } from "$lib/shared/util";
import FilterBar from "$lib/components/filter/FilterBar.svelte";
import { ENTRY_FILTERS } from "$lib/components/filter/filters";
import type { FilterQdata } from "$lib/components/filter/types";
import EntryTable from "$lib/components/table/EntryTable.svelte";
import PaginationButtons from "$lib/components/ui/PaginationButtons.svelte";
export let query: z.infer<typeof ZEntriesQuery>;
export let entries: RouterOutput["entry"]["list"];
export let baseUrl: string;
export let patientId: number | null = null;
export let view: string | undefined = undefined;
function paginationUpdate(pagination: PaginationRequest): void {
updateQuery({
filter: query.filter,
pagination,
sort: query.sort,
});
}
function filterUpdate(filter: FilterQdata | undefined): void {
updateQuery({ filter, sort: query.sort });
}
function sortUpdate(sort: string[] | undefined): void {
updateQuery({
filter: query.filter,
pagination: query.pagination,
sort,
});
}
function updateQuery(q: typeof query): void {
if (browser) {
if (patientId !== null && q.filter?.patient) delete q.filter.patient;
// Update page URL
const url = getQueryUrl(q, baseUrl);
void goto(url, { replaceState: true, keepFocus: true });
}
}
</script>
<FilterBar
FILTERS={ENTRY_FILTERS}
filterData={query.filter}
hiddenFilters={patientId !== null ? ["patient"] : []}
onUpdate={filterUpdate}
{view}
>
<slot name="filterbar" />
</FilterBar>
<slot />
<EntryTable
{baseUrl}
{entries}
perPatient={patientId !== null}
sortData={query.sort}
{sortUpdate}
/>
<PaginationButtons
data={entries}
onUpdate={paginationUpdate}
paginationData={query.pagination}
/>