Phase 4 abgeschlossen: Personalakten, Dokumente, Beteiligte, Verknüpfungen
Die Dokumentebene aus docs/13 ist gebaut, additiv: Document, DocumentSection und DocumentSectionVersion neben Case, CaseSection und CaseEntry. Ein Dokument hängt an einer Fallakte, an einer Personalakte oder an nichts, höchstens an einem - gesichert durch eine CHECK-Bedingung. Es gibt kein DELETE; eine Zurücknahme lässt einen Grabstein stehen, der auch für den Admin zu ist. Eine neue Dokumentart ist damit ein Datensatz, kein Deployment. Im Seed stehen vier: vermerk, vorfallsbericht, sonderarbeitsvertrag (mehrseitiger Vertragstext mit Platzhaltern und Unterschriftenzeilen) und bussgeld. Zwei Umbenennungen, beide von Hand migriert, damit die vorhandenen Zeilen und Zählerstände stehen bleiben: - CaseTemplate -> DocumentTemplate, plus uses[] und layout - CaseCounter -> NumberSeries, ein Nummernkreis je Präfix für Aktenzeichen und Dokumentnummern Die Regeln für Abschnitte stehen jetzt einmal in lib/sections/render.ts und gelten für Fallakten und Dokumente gleichermaßen. Die Frage aus docs/13, ob CaseSection langfristig in die Dokumentebene wandert, ist damit verneint und begründet. Rückverweise auf der Personalakte laufen durch visibleCaseWhere, die Zahl daneben entsteht aus dem gefilterten Ergebnis. Auch die Rollengruppe verschwindet mit, sonst verriete "Betroffener" ohne Eintrag die Ermittlung. Die eigene Personalakte ist keine Ausnahme von der Freigabestufe. Vier neue Rechte: document.create, .edit, .finalize, .retract. Das letzte steht bei den zurückgehaltenen, es greift in Geschriebenes ein. 91 Tests im Web-Paket, 15 in der Datenbank, 28 e2e. Größte Route 118 kB gegen das Budget von 120 kB - die Luft wird knapp.
This commit is contained in:
Harlekin
@@ -0,0 +1,60 @@
|
||||
import Link from 'next/link'
|
||||
import { de } from '@/lib/i18n/de'
|
||||
import { StampMark, classificationEdgeStyle } from '@/components/StampMark'
|
||||
|
||||
type Eintrag = {
|
||||
id: string
|
||||
documentNumber: string
|
||||
title: string
|
||||
status: string
|
||||
layout: string
|
||||
classification: number
|
||||
createdAt: Date
|
||||
retractedAt: Date | null
|
||||
}
|
||||
|
||||
/**
|
||||
* Dokumente eines Besitzers. Die Liste ist bereits gefiltert — was hier
|
||||
* ankommt, darf der Leser sehen. Kein Ausblenden im Client.
|
||||
*/
|
||||
export function DocumentList({
|
||||
documents,
|
||||
levelName,
|
||||
}: {
|
||||
documents: Eintrag[]
|
||||
levelName: Map<number, string>
|
||||
}) {
|
||||
if (documents.length === 0) {
|
||||
return <p className="text-text-dim">{de.document.empty}</p>
|
||||
}
|
||||
|
||||
return (
|
||||
<ul className="border-t border-line">
|
||||
{documents.map((doc) => (
|
||||
<li key={doc.id} className="border-b border-line">
|
||||
<Link
|
||||
href={`/dokumente/${doc.documentNumber}`}
|
||||
prefetch
|
||||
className="flex flex-wrap items-baseline gap-x-4 gap-y-1 py-3 pl-3 text-text no-underline"
|
||||
style={classificationEdgeStyle(doc.classification)}
|
||||
>
|
||||
<span className="font-mono text-xs text-text-dim">{doc.documentNumber}</span>
|
||||
<span className={`grow ${doc.retractedAt ? 'line-through text-text-dim' : ''}`}>
|
||||
{doc.title}
|
||||
</span>
|
||||
<span className="font-condensed text-2xs text-text-dim">
|
||||
{de.document.layoutNames[doc.layout] ?? doc.layout}
|
||||
</span>
|
||||
<span className="font-condensed text-2xs text-text-dim">
|
||||
{de.document.statusNames[doc.status] ?? doc.status}
|
||||
</span>
|
||||
<StampMark
|
||||
level={doc.classification}
|
||||
name={levelName.get(doc.classification) ?? de.common.unknown}
|
||||
/>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,130 @@
|
||||
'use client'
|
||||
|
||||
import { useActionState, useState } from 'react'
|
||||
import { de } from '@/lib/i18n/de'
|
||||
import { createDocumentAction, type ActionResult } from '@/app/(app)/dokumente/actions'
|
||||
|
||||
/**
|
||||
* Dokument anlegen, an einer Fallakte oder an einer Personalakte.
|
||||
*
|
||||
* Die Vorlagenliste kommt vom Server und enthält nur, was an dieser Stelle
|
||||
* erlaubt ist. Geprüft wird das trotzdem noch einmal beim Anlegen — die
|
||||
* Auswahl im Formular ist eine Bequemlichkeit, keine Sicherung.
|
||||
*/
|
||||
export function NewDocument({
|
||||
templates,
|
||||
levels,
|
||||
defaultLevel,
|
||||
caseNumber,
|
||||
personnelFileId,
|
||||
}: {
|
||||
templates: { key: string; name: string; description: string | null; layout: string }[]
|
||||
levels: { level: number; name: string }[]
|
||||
defaultLevel: number
|
||||
caseNumber?: string
|
||||
personnelFileId?: string
|
||||
}) {
|
||||
const [open, setOpen] = useState(false)
|
||||
const [state, action, pending] = useActionState<ActionResult | null, FormData>(
|
||||
createDocumentAction,
|
||||
null,
|
||||
)
|
||||
|
||||
if (templates.length === 0) return null
|
||||
|
||||
if (!open) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen(true)}
|
||||
className="border border-line bg-raised px-3 py-1 font-condensed text-2xs text-accent"
|
||||
>
|
||||
{de.document.create}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<form action={action} className="border border-line p-4">
|
||||
{caseNumber ? <input type="hidden" name="caseNumber" value={caseNumber} /> : null}
|
||||
{personnelFileId ? (
|
||||
<input type="hidden" name="personnelFileId" value={personnelFileId} />
|
||||
) : null}
|
||||
|
||||
<p className="font-condensed text-xs text-text-dim">{de.document.createTitle}</p>
|
||||
|
||||
<div className="mt-3 grid gap-4 sm:grid-cols-2">
|
||||
<div>
|
||||
<label htmlFor="templateKey" className="font-condensed text-2xs text-text-dim">
|
||||
{de.document.kind}
|
||||
</label>
|
||||
<select
|
||||
id="templateKey"
|
||||
name="templateKey"
|
||||
required
|
||||
className="mt-1 block w-full 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-2xs text-text-dim">
|
||||
{de.clearance.classification}
|
||||
</label>
|
||||
<select
|
||||
id="classification"
|
||||
name="classification"
|
||||
defaultValue={defaultLevel}
|
||||
className="mt-1 block w-full 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>
|
||||
|
||||
<div className="sm:col-span-2">
|
||||
<label htmlFor="doc-title" className="font-condensed text-2xs text-text-dim">
|
||||
{de.document.title}
|
||||
</label>
|
||||
<input
|
||||
id="doc-title"
|
||||
name="title"
|
||||
maxLength={200}
|
||||
className="mt-1 block w-full border border-line bg-raised px-3 py-2 text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="mt-2 text-2xs text-text-dim">{de.document.createHint}</p>
|
||||
|
||||
{state && !state.ok ? (
|
||||
<p className="mt-2 font-condensed text-2xs text-stamp-4">{state.error}</p>
|
||||
) : null}
|
||||
|
||||
<div className="mt-3 flex gap-3">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={pending}
|
||||
className="border border-line bg-raised px-3 py-1 font-condensed text-2xs text-accent disabled:text-text-dim"
|
||||
>
|
||||
{pending ? de.common.loading : de.document.create}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen(false)}
|
||||
className="font-condensed text-2xs text-text-dim"
|
||||
>
|
||||
{de.common.cancel}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,213 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useRef, useState, useTransition } from 'react'
|
||||
import { de } from '@/lib/i18n/de'
|
||||
import type { SaveSection } from './types'
|
||||
|
||||
type Props = {
|
||||
/** Wohin gespeichert wird — gebundene Server Action der Akte oder des Dokuments. */
|
||||
save: SaveSection
|
||||
/** Eindeutig je Besitzer, damit Entwürfe zweier Akten sich nicht mischen. */
|
||||
scope: string
|
||||
fieldKey: string
|
||||
label: string
|
||||
type: string
|
||||
options?: string[]
|
||||
help?: string
|
||||
requiredToClose?: boolean
|
||||
initialValue: unknown
|
||||
initialVersion: number
|
||||
readOnly: boolean
|
||||
}
|
||||
|
||||
const AUTOSAVE_MS = 2000
|
||||
|
||||
/**
|
||||
* Ein Abschnitt zum Bearbeiten. Trägt einen Fallabschnitt genauso wie ein
|
||||
* Feld eines Dokuments — wohin gespeichert wird, kommt von außen.
|
||||
*
|
||||
* Entwürfe werden alle zwei Sekunden **lokal** gesichert, damit ein
|
||||
* versehentlicher Tab-Wechsel keinen Text kostet. Gespeichert wird erst auf
|
||||
* Knopfdruck: ein Abschnitt ist der Sachstand der Akte, nicht ein Chatbeitrag.
|
||||
* Siehe docs/09-performance-und-ux.md.
|
||||
*
|
||||
* Beim Speichern geht die geladene Version mit. Weicht sie ab, gibt es kein
|
||||
* stilles Überschreiben, sondern beide Fassungen nebeneinander.
|
||||
*/
|
||||
export function SectionEditor(props: Props) {
|
||||
const speicherSchluessel = `afis:abschnitt:${props.scope}:${props.fieldKey}`
|
||||
const [value, setValue] = useState(() => normalise(props.initialValue, props.type))
|
||||
const [version, setVersion] = useState(props.initialVersion)
|
||||
const [conflict, setConflict] = useState<{ value: unknown; version: number } | null>(null)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [saved, setSaved] = useState(false)
|
||||
const [draftKept, setDraftKept] = useState(false)
|
||||
const [pending, startTransition] = useTransition()
|
||||
const timer = useRef<ReturnType<typeof setTimeout> | null>(null)
|
||||
|
||||
// Entwurf aus dem letzten Besuch übernehmen, falls er neuer ist.
|
||||
useEffect(() => {
|
||||
try {
|
||||
const stored = localStorage.getItem(speicherSchluessel)
|
||||
if (stored !== null && stored !== normalise(props.initialValue, props.type)) {
|
||||
setValue(stored)
|
||||
setDraftKept(true)
|
||||
}
|
||||
} catch {
|
||||
// Privates Fenster oder gesperrter Speicher: dann eben ohne Entwurf.
|
||||
}
|
||||
}, [speicherSchluessel, props.initialValue, props.type])
|
||||
|
||||
function change(next: string) {
|
||||
setValue(next)
|
||||
setSaved(false)
|
||||
if (timer.current) clearTimeout(timer.current)
|
||||
timer.current = setTimeout(() => {
|
||||
try {
|
||||
localStorage.setItem(speicherSchluessel, next)
|
||||
setDraftKept(true)
|
||||
} catch {
|
||||
// still ignorieren, der Entwurf ist eine Bequemlichkeit
|
||||
}
|
||||
}, AUTOSAVE_MS)
|
||||
}
|
||||
|
||||
function submit(override?: unknown, baseVersion = version) {
|
||||
setError(null)
|
||||
startTransition(async () => {
|
||||
const result = await props.save({
|
||||
fieldKey: props.fieldKey,
|
||||
value: override ?? parse(value, props.type),
|
||||
baseVersion,
|
||||
})
|
||||
|
||||
if (result.ok) {
|
||||
setVersion(result.version)
|
||||
setConflict(null)
|
||||
setSaved(true)
|
||||
setDraftKept(false)
|
||||
try {
|
||||
localStorage.removeItem(speicherSchluessel)
|
||||
} catch {
|
||||
// egal
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
if (result.conflict) setConflict(result.current)
|
||||
else setError(result.error)
|
||||
})
|
||||
}
|
||||
|
||||
if (props.readOnly) {
|
||||
return (
|
||||
<p className="mt-1 max-w-(--container-measure) text-sm whitespace-pre-wrap">
|
||||
{String(value || '—')}
|
||||
</p>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mt-1.5">
|
||||
{props.type === 'select' ? (
|
||||
<select
|
||||
value={value}
|
||||
onChange={(event) => change(event.target.value)}
|
||||
className="border border-line bg-raised px-3 py-2 text-sm"
|
||||
>
|
||||
<option value="">—</option>
|
||||
{props.options?.map((option) => (
|
||||
<option key={option} value={option}>
|
||||
{option}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
) : props.type === 'longtext' ? (
|
||||
<textarea
|
||||
value={value}
|
||||
onChange={(event) => change(event.target.value)}
|
||||
rows={6}
|
||||
className="block w-full max-w-(--container-measure) border border-line bg-raised px-3 py-2 text-sm"
|
||||
/>
|
||||
) : (
|
||||
<input
|
||||
type={props.type === 'date' ? 'date' : props.type === 'number' ? 'number' : 'text'}
|
||||
value={value}
|
||||
onChange={(event) => change(event.target.value)}
|
||||
className="block w-full max-w-(--container-measure) border border-line bg-raised px-3 py-2 text-sm"
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="mt-2 flex flex-wrap items-center gap-3 text-2xs">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => submit()}
|
||||
disabled={pending}
|
||||
className="border border-line bg-raised px-3 py-1 font-condensed text-accent disabled:text-text-dim"
|
||||
>
|
||||
{pending ? de.section.saving : de.section.save}
|
||||
</button>
|
||||
{version > 0 ? (
|
||||
<span className="font-mono text-text-dim">{de.section.version(version)}</span>
|
||||
) : null}
|
||||
{saved ? <span className="font-condensed text-text-dim">{de.section.saved}</span> : null}
|
||||
{draftKept && !saved ? (
|
||||
<span className="font-condensed text-text-dim">{de.section.draftKept}</span>
|
||||
) : null}
|
||||
{error ? <span className="font-condensed text-stamp-4">{error}</span> : null}
|
||||
</div>
|
||||
|
||||
{conflict ? (
|
||||
<div className="mt-3 border border-stamp-4 p-3">
|
||||
<p className="font-condensed text-2xs text-stamp-4">{de.section.conflict}</p>
|
||||
<div className="mt-3 grid gap-4 md:grid-cols-2">
|
||||
<div>
|
||||
<p className="font-condensed text-2xs text-text-dim">{de.section.mine}</p>
|
||||
<p className="mt-1 border-l-(length:--spacing-edge) border-steel pl-3 text-sm whitespace-pre-wrap">
|
||||
{value}
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => submit(parse(value, props.type), conflict.version)}
|
||||
className="mt-2 font-condensed text-2xs text-accent"
|
||||
>
|
||||
{de.section.takeMine}
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-condensed text-2xs text-text-dim">{de.section.theirs}</p>
|
||||
<p className="mt-1 border-l-(length:--spacing-edge) border-line pl-3 text-sm whitespace-pre-wrap">
|
||||
{String(conflict.value ?? '')}
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setValue(normalise(conflict.value, props.type))
|
||||
setVersion(conflict.version)
|
||||
setConflict(null)
|
||||
}}
|
||||
className="mt-2 font-condensed text-2xs text-accent"
|
||||
>
|
||||
{de.section.takeTheirs}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function normalise(value: unknown, _type: string): string {
|
||||
if (value === null || value === undefined) return ''
|
||||
if (Array.isArray(value)) return value.join(', ')
|
||||
return String(value)
|
||||
}
|
||||
|
||||
function parse(value: string, type: string): unknown {
|
||||
if (type === 'number') return value === '' ? null : Number(value)
|
||||
if (type === 'multiselect' || type === 'checklist') {
|
||||
return value.split(',').map((part) => part.trim()).filter(Boolean)
|
||||
}
|
||||
return value === '' ? null : value
|
||||
}
|
||||
@@ -0,0 +1,122 @@
|
||||
import { de } from '@/lib/i18n/de'
|
||||
import { fillPlaceholders, isInputField } from '@/lib/templates/fields'
|
||||
import { RedactedText } from '@/components/Redacted'
|
||||
import { SectionEditor } from './SectionEditor'
|
||||
import type { SaveSection } from './types'
|
||||
import type { RenderedSection } from '@/lib/sections/render'
|
||||
|
||||
/**
|
||||
* Ausgefüllte Vorlage: der Sachstand einer Fallakte oder der Inhalt eines
|
||||
* Dokuments. Beide sind dasselbe Gebilde, deshalb dieselbe Darstellung.
|
||||
*
|
||||
* Feste Textbausteine der Vorlage werden gerendert, nicht bearbeitet — ihre
|
||||
* Platzhalter ziehen die Werte der Eingabefelder. Damit trägt dieselbe
|
||||
* Darstellung ein Formular und einen Vertragstext.
|
||||
*/
|
||||
export function Sections({
|
||||
scope,
|
||||
save,
|
||||
sections,
|
||||
canEdit,
|
||||
}: {
|
||||
scope: string
|
||||
save: SaveSection
|
||||
sections: RenderedSection[]
|
||||
canEdit: boolean
|
||||
}) {
|
||||
if (sections.length === 0) {
|
||||
return <p className="text-text-dim">{de.section.empty}</p>
|
||||
}
|
||||
|
||||
const werte = Object.fromEntries(
|
||||
sections.filter((s) => s.visible).map((s) => [s.fieldKey, s.value]),
|
||||
)
|
||||
|
||||
return (
|
||||
<dl className="space-y-8">
|
||||
{sections.map((section) => {
|
||||
const field = section.field
|
||||
|
||||
// Feste Bausteine der Vorlage.
|
||||
if (!isInputField(field)) {
|
||||
if (field.type === 'pagebreak') return <hr key={field.key} className="border-line" />
|
||||
if (field.type === 'signature') {
|
||||
return (
|
||||
<div key={field.key} className="pt-8">
|
||||
<div className="w-64 border-t border-line" />
|
||||
<p className="mt-1 text-2xs text-text-dim">
|
||||
{fillPlaceholders(field.label, werte)}
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
const text = fillPlaceholders(field.text ?? '', werte)
|
||||
return field.type === 'heading' ? (
|
||||
<h3 key={field.key} className="font-condensed">
|
||||
{text || field.label}
|
||||
</h3>
|
||||
) : (
|
||||
<p key={field.key} className="max-w-(--container-measure) text-sm whitespace-pre-wrap">
|
||||
{text}
|
||||
</p>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div key={field.key}>
|
||||
<dt className="flex flex-wrap items-baseline gap-x-3">
|
||||
<span className="font-condensed text-xs text-text-dim">{field.label}</span>
|
||||
{field.requiredToClose ? (
|
||||
<span className="font-condensed text-2xs text-stamp-3">
|
||||
{de.section.requiredToClose}
|
||||
</span>
|
||||
) : null}
|
||||
</dt>
|
||||
<dd>
|
||||
{!section.visible ? (
|
||||
// Serverseitig ersetzt: der echte Wert ist gar nicht erst hier.
|
||||
<p className="mt-1.5 flex items-center gap-2">
|
||||
<span className="redaction inline-block h-[1.1rem] w-40" aria-hidden />
|
||||
<span className="font-mono text-2xs text-text-dim">
|
||||
{de.section.lockedField(section.value.requiredLevel)}
|
||||
</span>
|
||||
</p>
|
||||
) : section.segments ? (
|
||||
<div className="mt-1.5">
|
||||
<RedactedText segments={section.segments} />
|
||||
{canEdit ? (
|
||||
<SectionEditor
|
||||
save={save}
|
||||
scope={scope}
|
||||
fieldKey={field.key}
|
||||
label={field.label}
|
||||
type={field.type}
|
||||
options={field.options}
|
||||
requiredToClose={field.requiredToClose}
|
||||
initialValue={section.value}
|
||||
initialVersion={section.version}
|
||||
readOnly={false}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
) : (
|
||||
<SectionEditor
|
||||
save={save}
|
||||
scope={scope}
|
||||
fieldKey={field.key}
|
||||
label={field.label}
|
||||
type={field.type}
|
||||
options={field.options}
|
||||
requiredToClose={field.requiredToClose}
|
||||
initialValue={section.value}
|
||||
initialVersion={section.version}
|
||||
readOnly={!canEdit}
|
||||
/>
|
||||
)}
|
||||
</dd>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</dl>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
/**
|
||||
* Ergebnis eines Abschnitt-Speicherns. Steht hier und nicht in der Server
|
||||
* Action, damit der Client den Typ importieren kann, ohne die Action selbst
|
||||
* ins Bündel zu ziehen.
|
||||
*/
|
||||
export type SaveSectionResult =
|
||||
| { ok: true; version: number }
|
||||
/** Kein stilles Überschreiben: die fremde Fassung kommt mit zurück. */
|
||||
| { ok: false; conflict: true; current: { value: unknown; version: number } }
|
||||
| { ok: false; conflict: false; error: string }
|
||||
|
||||
export type SaveSection = (input: {
|
||||
fieldKey: string
|
||||
value: unknown
|
||||
baseVersion: number
|
||||
}) => Promise<SaveSectionResult>
|
||||
Reference in New Issue
Block a user