Visitenbuch/src/routes/(app)/entry/new/+page.svelte

<script lang="ts">
  import { defaults, superForm } from "sveltekit-superforms";

  import { trpc } from "$lib/shared/trpc";
  import { superformConfig } from "$lib/shared/util";
  import { toastError } from "$lib/shared/util/toast";

  import Autocomplete from "$lib/components/filter/Autocomplete.svelte";
  import FormField from "$lib/components/ui/FormField.svelte";
  import MarkdownInput from "$lib/components/ui/markdown/MarkdownInput.svelte";

  import { SchemaNewEntryWithPatient } from "./schema";

  const formData = defaults(SchemaNewEntryWithPatient);
  const {
    form, errors, constraints, enhance,
  } = superForm(formData, {
    validators: SchemaNewEntryWithPatient,
    ...superformConfig("Eintrag"),
  });
</script>

<svelte:head>
  <title>Neuer Eintrag</title>
</svelte:head>

<h1 class="heading">Neuer Eintrag</h1>

<form method="POST" use:enhance>
  <div class="flex flex-wrap gap-2">
    <FormField label="Zimmer">
      <Autocomplete
        idInputName="room_id"
        inputCls="input input-bordered w-full max-w-xs"
        items={async () => trpc().room.list.query()}
        onSelect={(item) => {
          $form.room_id = item.id;
          return { newValue: item.name ?? "", close: true };
        }}
        onUnselect={() => {
          $form.room_id = null;
        }}
      />
    </FormField>

    <FormField label="Patient">
      <Autocomplete
        clearBtn
        filterFn={(itm) => $form.room_id === null || itm.room_id === $form.room_id}
        idInputName="patient_id"
        inputCls="input input-bordered w-full max-w-xs"
        items={async () => trpc().patient.getNames.query()}
        noAutoselect1
        onSelect={(item) => {
          $form.patient_id = item.id;
          trpc()
            .patient.get.query(item.id)
            .then((p) => {
              $form.patient_first_name = p.first_name;
              $form.patient_last_name = p.last_name;
              $form.patient_age = p.age;
            }).catch((e) => toastError("Konnte Patient nicht laden:\n" + e));
          return { newValue: item.name ?? "", close: true };
        }}
        onUnselect={() => {
          $form.patient_id = null;
          $form.patient_first_name = null;
          $form.patient_last_name = null;
          $form.patient_age = null;
        }}
        placeholder="Neuer Patient"
      />
    </FormField>
  </div>

  <div class="flex flex-wrap gap-2">
    <FormField errors={$errors.patient_first_name} label="Vorname">
      <input
        name="patient_first_name"
        aria-invalid={Boolean($errors.patient_first_name)}
        disabled={$form.patient_id !== null}
        type="text"
        bind:value={$form.patient_first_name}
        {...$constraints.patient_first_name}
      />
    </FormField>

    <FormField errors={$errors.patient_last_name} label="Nachname">
      <input
        name="patient_last_name"
        aria-invalid={Boolean($errors.patient_last_name)}
        disabled={$form.patient_id !== null}
        type="text"
        bind:value={$form.patient_last_name}
        {...$constraints.patient_last_name}
      />
    </FormField>

    <FormField errors={$errors.patient_age} label="Alter">
      <input
        name="patient_age"
        aria-invalid={Boolean($errors.patient_age)}
        disabled={$form.patient_id !== null}
        type="number"
        bind:value={$form.patient_age}
        {...$constraints.patient_age}
      />
    </FormField>
  </div>

  <div class="flex flex-wrap gap-2">
    <FormField errors={$errors.category_id} label="Kategorie">
      <Autocomplete
        idInputName="category_id"
        inputCls="input input-bordered w-full max-w-xs"
        items={async () => trpc().category.list.query()}
        onSelect={(item) => {
          $form.category_id = item.id;
          return { newValue: item.name ?? "", close: true };
        }}
        onUnselect={() => {
          $form.category_id = null;
        }}
      />
    </FormField>

    <FormField errors={$errors.date} label="Zu erledigen am">
      <input
        name="date"
        aria-invalid={Boolean($errors.date)}
        type="date"
        bind:value={$form.date}
        {...$constraints.date}
      />
    </FormField>

    <div class="form-control w-full max-w-xs">
      <label class="label cursor-pointer gap-2 justify-start">
        <span class="label-text text-right">Priorität</span>
        <input
          name="priority"
          class="checkbox checkbox-warning"
          type="checkbox"
          bind:checked={$form.priority}
        />
      </label>
    </div>
  </div>

  <MarkdownInput
    name="text"
    ariaInvalid={Boolean($errors.text)}
    errors={$errors.text}
    label="Beschreibung"
    marginTop
    bind:value={$form.text}
  />

  <button class="btn btn-primary max-w-32 mt-4" type="submit">Speichern</button>
</form>