Visitenbuch/src/lib/components/entry/EntryBody.svelte

102 lines
3.1 KiB
Svelte

<script lang="ts">
import { mdiPencil } from "@mdi/js";
import type { RouterOutput } from "$lib/shared/trpc";
import { formatDate, humanDate } from "$lib/shared/util";
import PatientCard from "$lib/components/entry/PatientCard.svelte";
import CategoryField from "$lib/components/table/CategoryField.svelte";
import UserField from "$lib/components/table/UserField.svelte";
import Header from "$lib/components/ui/Header.svelte";
import Icon from "$lib/components/ui/Icon.svelte";
import Markdown from "$lib/components/ui/markdown/Markdown.svelte";
import VersionsButton from "$lib/components/ui/VersionsButton.svelte";
export let entry: RouterOutput["entry"]["get"];
export let withExecution = false;
export let backBtn = false;
$: basePath = `/entry/${entry.id}`;
</script>
<svelte:head>
<title>Eintrag #{entry.id}</title>
</svelte:head>
<Header backHref={backBtn ? basePath : undefined} title="Eintrag #{entry.id}">
{#if entry.current_version.category}
<CategoryField category={entry.current_version.category} />
{/if}
{#if entry.current_version.priority}
<div class="badge ellipsis badge-warning">Priorität</div>
{/if}
<a slot="rightBtn" class="btn btn-sm btn-primary ml-auto" href="{basePath}/edit">
Bearbeiten
</a>
</Header>
<p class="text-sm flex gap-2">
<span>Erstellt {humanDate(entry.created_at, true)}</span>
<span>·</span>
{#if entry.execution?.done}
<span>Erledigt {humanDate(entry.execution.created_at)}</span>
{:else}
<span>Zu erledigen {humanDate(entry.current_version.date)}</span>
{/if}
</p>
<PatientCard patient={entry.patient} />
<div class="card2">
<div class="row c-light text-sm items-center justify-between">
Beschreibung
<div>
<VersionsButton href="{basePath}/versions" n={entry.n_versions} />
<a class="btn btn-circle btn-xs btn-ghost" href="{basePath}/edit">
<Icon path={mdiPencil} size={1.2} />
</a>
</div>
</div>
<div class="row">
<Markdown src={entry.current_version.text} />
</div>
<div class="rowb c-vlight text-sm">
Zuletzt bearbeitet am {formatDate(entry.current_version.created_at, true)} von
<UserField filterName="author" user={entry.current_version.author} />
</div>
</div>
{#if withExecution && entry.execution}
<div class="card2">
<div
class="row c-light text-sm items-center justify-between"
class:done={entry.execution.done}
class:note={!entry.execution.done}>
<p>
{entry.execution.done ? "Erledigt am" : "Notiz von"} {formatDate(entry.execution.created_at, true)} von
<UserField filterName="executor" user={entry.execution.author} />
</p>
<div>
<VersionsButton href="{basePath}/executions" n={entry.n_executions} />
<a class="btn btn-circle btn-xs btn-ghost" href="{basePath}/editExecution">
<Icon path={mdiPencil} size={1.2} />
</a>
</div>
</div>
{#if entry.execution?.text}
<div class="row">
<Markdown src={entry.execution?.text} />
</div>
{/if}
</div>
{/if}
<style lang="postcss">
.done {
@apply bg-success/20;
}
.note {
@apply bg-warning/20;
}
</style>