Visitenbuch/src/lib/components/table/FilteredPatientTable.svelte

68 lines
1.8 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 { ZPatientsQuery } 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 { PATIENT_FILTER } from "$lib/components/filter/filters";
import type { FilterQdata } from "$lib/components/filter/types";
import PatientTable from "$lib/components/table/PatientTable.svelte";
import PaginationButtons from "$lib/components/ui/PaginationButtons.svelte";
export let query: z.infer<typeof ZPatientsQuery>;
export let patients: RouterOutput["patient"]["list"];
export let baseUrl: string;
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) {
// Update page URL
const url = getQueryUrl(q, baseUrl);
goto(url, { replaceState: true, keepFocus: true });
}
}
</script>
<FilterBar
FILTERS={PATIENT_FILTER}
filterData={query.filter}
onUpdate={filterUpdate}
search
view="patients"
>
<slot />
</FilterBar>
<PatientTable {baseUrl} {patients} sortData={query.sort} {sortUpdate} />
<PaginationButtons
data={patients}
onUpdate={paginationUpdate}
paginationData={query.pagination}
/>