Harlekin
a278c44e78
Das Formular der Personalabteilung ist übernommen, nicht durch eine Bildschirmansicht ersetzt: schwarzer Rahmen, Kopf mit Kennung und Klassifizierungsbalken, Raster aus fünf Spalten, Unterschriftenzeilen, Fußzeile. Es steht bewusst außerhalb des Design-Systems — es wird gedruckt und muss auf Papier aussehen wie das Blatt daneben. Datengetrieben bleibt es trotzdem. Kein Feld steht im Programm: sheetTitle und sheetSubtitle an der Vorlage, span für die Zellbreite, rows für das Lichtbild, dateKey für das Datum unter einer Unterschrift, slot für den Klassifizierungsbalken. Eine weitere Dokumentart mit layout = DOSSIER braucht keine Zeile Code. Der Balken zeigt die Foundation-Stufe aus der neuen Tabelle FoundationClearance. Sie ist Inhalt, kein Zugriff — was jemand sehen darf, entscheidet weiterhin allein die interne Stufe. Ohne Auswahl bleibt der Balken neutral, statt eine Einstufung zu behaupten. Die Dienstnummer ist entfallen, es gibt sie nicht. Der Status ist zu mehreren Etiketten geworden: "Gekündigt" und "Verhaftet" schließen einander nicht aus. Unbekannte Schlüssel werden verworfen und die Reihenfolge kommt aus der Konfiguration, nicht aus der Eingabe. PersonnelAssignment hängt AfiS-Mitglieder an eine Person — Aktenführung, Ermittler, Ansprechpartner — und ist zugleich der ausnahmsweise Zugang, wie CaseParticipant bei der Fallakte. Betroffen zu sein gibt weiterhin keinen Zugang: das ist eine Eigenschaft der Person, die Zuordnung eine Entscheidung der Abteilung. Fall und Person lassen sich von beiden Seiten verknüpfen und schon beim Anlegen einer Fallakte. Alle drei Wege laufen in addParticipant zusammen. Noch offen: das Lichtbild. Feldtyp und Platz stehen, hochladen kommt mit der Prüfkette in Phase 5 — ein Bild als Data-URL im Abschnittswert verstiesse gegen harte Regel 4. 102 Tests im Web-Paket, davon sechs auf dem gerenderten Blatt selbst.
111 lines
3.4 KiB
TypeScript
111 lines
3.4 KiB
TypeScript
'use client'
|
|
|
|
import { useActionState } from 'react'
|
|
import { de } from '@/lib/i18n/de'
|
|
import { createCaseAction, type CreateState } from '../actions'
|
|
|
|
export function NewCaseForm({
|
|
templates,
|
|
levels,
|
|
people,
|
|
defaultLevel,
|
|
}: {
|
|
templates: { key: string; name: string }[]
|
|
levels: { level: number; name: string }[]
|
|
people: { id: string; displayName: string }[]
|
|
defaultLevel: number
|
|
}) {
|
|
const [state, action, pending] = useActionState<CreateState, FormData>(createCaseAction, {})
|
|
|
|
return (
|
|
<form action={action} className="mt-6 space-y-5">
|
|
<div>
|
|
<label htmlFor="title" className="font-condensed text-xs text-text-dim">
|
|
{de.case.title}
|
|
</label>
|
|
<input
|
|
id="title"
|
|
name="title"
|
|
required
|
|
minLength={3}
|
|
maxLength={200}
|
|
className="mt-1.5 block w-full border border-line bg-raised px-3 py-2 text-sm"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="templateKey" className="font-condensed text-xs text-text-dim">
|
|
{de.case.type}
|
|
</label>
|
|
<select
|
|
id="templateKey"
|
|
name="templateKey"
|
|
required
|
|
className="mt-1.5 block border border-line bg-raised px-3 py-2 text-sm"
|
|
>
|
|
{templates.map((template) => (
|
|
<option key={template.key} value={template.key}>
|
|
{template.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="classification" className="font-condensed text-xs text-text-dim">
|
|
{de.clearance.classification}
|
|
</label>
|
|
{/* Die Auswahl zeigt nur, was erlaubt ist. Geprüft wird trotzdem serverseitig. */}
|
|
<select
|
|
id="classification"
|
|
name="classification"
|
|
defaultValue={defaultLevel}
|
|
className="mt-1.5 block border border-line bg-raised px-3 py-2 text-sm"
|
|
>
|
|
{levels.map((level) => (
|
|
<option key={level.level} value={level.level}>
|
|
{level.level} · {level.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
{people.length > 0 ? (
|
|
<div>
|
|
<label htmlFor="personnelFileId" className="font-condensed text-xs text-text-dim">
|
|
{de.case.subject}
|
|
</label>
|
|
{/* Gleich beim Anlegen verknüpfen erspart den zweiten Schritt, den
|
|
man sonst vergisst. Nachträglich geht es genauso. */}
|
|
<select
|
|
id="personnelFileId"
|
|
name="personnelFileId"
|
|
defaultValue=""
|
|
className="mt-1.5 block w-full border border-line bg-raised px-3 py-2 text-sm"
|
|
>
|
|
<option value="">{de.case.subjectNone}</option>
|
|
{people.map((person) => (
|
|
<option key={person.id} value={person.id}>
|
|
{person.displayName}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
) : null}
|
|
|
|
<div className="flex items-center gap-3">
|
|
<button
|
|
type="submit"
|
|
disabled={pending}
|
|
className="border border-line bg-raised px-4 py-2 font-condensed text-xs text-accent disabled:text-text-dim"
|
|
>
|
|
{pending ? de.case.saving : de.case.create}
|
|
</button>
|
|
{state.error ? (
|
|
<span className="font-condensed text-2xs text-stamp-4">{state.error}</span>
|
|
) : null}
|
|
</div>
|
|
</form>
|
|
)
|
|
}
|