Visitenbuch/src/lib/components/table/PatientTable.svelte
ThetaDev c6abf633f8
All checks were successful
Visitenbuch CI / test (push) Successful in 2m22s
Visitenbuch CI / release (push) Has been skipped
feat: select table entries on doubleclick
2024-05-16 20:19:55 +02:00

79 lines
2.5 KiB
Svelte

<script lang="ts">
import { goto } from "$app/navigation";
import { mdiFilter } from "@mdi/js";
import { URL_ENTRIES } from "$lib/shared/constants";
import type { RouterOutput } from "$lib/shared/trpc";
import { formatDate, gotoEntityQuery } from "$lib/shared/util";
import Icon from "$lib/components/ui/Icon.svelte";
import RoomField from "./RoomField.svelte";
import SortHeader from "./SortHeader.svelte";
export let patients: RouterOutput["patient"]["list"];
export let sortData: string[] | undefined;
export let sortUpdate: (sort: string[] | undefined) => void = () => {};
export let baseUrl: string;
</script>
<div class="overflow-x-auto">
<table class="table" data-testid="patient-table">
<thead>
<tr>
<SortHeader key="id" {sortData} {sortUpdate} title="ID" />
<SortHeader key="name" {sortData} {sortUpdate} title="Name" />
<SortHeader key="age" {sortData} {sortUpdate} title="Alter" />
<SortHeader key="room" {sortData} {sortUpdate} title="Zimmer" />
<SortHeader key="created_at" {sortData} {sortUpdate} title="Erstellt am" />
<th />
</tr>
</thead>
<tbody>
{#each patients.items as patient (patient.id)}
{@const full_name = `${patient.first_name} ${patient.last_name}`}
<tr
class="transition-colors hover:bg-neutral-content/10"
class:p-hidden={patient.hidden}
on:dblclick={() => { void goto("/patient/" + patient.id); }}
>
<td
><a
class="btn btn-xs btn-primary btn-id"
aria-label="Eintrag anzeigen"
href="/patient/{patient.id}">{patient.id}</a
></td
>
<td>{full_name}</td>
<td>{patient.age ?? ""}</td>
<td>
{#if patient.room}
<RoomField {baseUrl} room={patient.room} />
{/if}
</td>
<td>{formatDate(patient.created_at, true)}</td>
<td class="text-right">
<button
class="btn btn-circle btn-ghost btn-xs inline"
on:click={() => {
gotoEntityQuery(
{ filter: { patient: [{ id: patient.id, name: full_name }] } },
URL_ENTRIES,
);
}}
>
<Icon path={mdiFilter} size={1.2} />
</button>
</td>
</tr>
{/each}
</tbody>
</table>
</div>
<style lang="postcss">
.p-hidden {
@apply bg-error/20;
}
</style>