Schreiben erzeugen, ausgeben und ablegen
Die Anschreiben gab es bisher nur als Text zum Kopieren. Danach war
Handarbeit: in Word nachbauen, ausdrucken, abschicken - und noch einmal
von Hand als Dokument in die Akte legen. Der letzte Schritt wurde am
haeufigsten vergessen, und dann fehlt der Nachweis im Bericht.
Neu unter /schreiben/neu: bearbeiten, als Word-Datei herunterladen, in
die Akte legen, Wiedervorlage setzen - in einem Zug. Eine Seite fuer alle
Arten und alle drei Empfaengerwege, statt die Bearbeitung dreimal an
Vertrag, Vorgang und Freitext nachzubauen.
Der dritte Weg ist der eigentliche Zugewinn: Schreiben an eine Stelle,
zu der es noch keinen Datensatz gibt. Am Anfang einer Betreuung ist das
der Normalfall - man fragt ja an, um zu erfahren, ob dort ueberhaupt
etwas besteht. Aus der freien Anschrift laesst sich mit einem Klick ein
Kontakt anlegen.
Zwei Entscheidungen, die erklaert gehoeren:
Die Akte bekommt ein PDF, heruntergeladen wird .docx. Der
Objektspeicher nimmt nur PDF und Bilder an, geprueft an den Magic Bytes.
Eine .docx ist ein ZIP-Archiv; sie durchzulassen hiesse jedes ZIP
durchzulassen, und diese Pruefung ist eine bewusste Zusage der
Anwendung. Sachlich ist PDF fuer den Nachweis ohnehin richtiger: Es
aendert sich nicht mehr. Die Oberflaeche sagt dazu, dass eine spaeter in
Word geaenderte Fassung von der Akte abweicht.
Der Berichtssatz in berichte/docx.ts bleibt unangetastet. Er setzt einen
Bericht mit Kopfzeilen und Unterschriftenblock; ein Brief braucht
Absender, Anschriftenfeld, Datumszeile und Grussformel. Beides in eine
Funktion zu zwingen haette beide Ausgaben schlechter gemacht. Der
Umsetzungshinweis im Issue ("muss nur angebunden werden") war insoweit
falsch - von mir selbst geschrieben.
Die vorhandenen Erzeuger (Rueckkaufswert, Kuendigung, Sachstandsanfrage)
bleiben unveraendert; ihr Wortlaut ist getestet und erprobt.
Geprueft: zehn Einheitstests, darunter der Gleichschritt der
Wiedervorlagefristen ueber zwei Module hinweg. Fuenf End-to-End-Tests
auf beiden Geraeteprofilen: Entwurf, Vertragsbezug, Word-Download,
Ablage samt Wiedervorlage, Kontakt aus freier Anschrift.
Refs #4
This commit is contained in:
Florian Wilde
@@ -0,0 +1,356 @@
|
||||
'use client'
|
||||
|
||||
import * as React from 'react'
|
||||
import { useActionState } from 'react'
|
||||
import Link from 'next/link'
|
||||
import {
|
||||
AlertCircle,
|
||||
CheckCircle2,
|
||||
Copy,
|
||||
FileDown,
|
||||
FolderInput,
|
||||
Info,
|
||||
UserPlus,
|
||||
} from 'lucide-react'
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import { Select } from '@/components/ui/select'
|
||||
import { Feld } from '@/components/feld'
|
||||
import { Absendeknopf } from '@/components/finanzen/eingaben'
|
||||
import {
|
||||
kontaktAusAnschrift,
|
||||
schreibenAblegen,
|
||||
type SchreibenZustand,
|
||||
} from '@/server/actions/schreiben'
|
||||
import type { SchreibenArt } from '@/lib/schreiben/arten'
|
||||
|
||||
export type KontaktAuswahl = {
|
||||
id: string
|
||||
name: string
|
||||
organisation: string | null
|
||||
strasse: string | null
|
||||
plz: string | null
|
||||
ort: string | null
|
||||
}
|
||||
|
||||
/**
|
||||
* Schreiben bearbeiten, herunterladen, ablegen.
|
||||
*
|
||||
* Der Text steht in einem gewöhnlichen Textfeld und ist vollständig
|
||||
* bearbeitbar. Das ist Absicht: Jeder Fall hat eine Besonderheit, die in
|
||||
* den Brief gehört. Ein Formulartext, den man nicht mehr ändern kann,
|
||||
* wird früher oder später falsch abgeschickt.
|
||||
*/
|
||||
export function SchreibenEditor({
|
||||
betreuteId,
|
||||
art,
|
||||
entwurf,
|
||||
kontakte,
|
||||
vertragId,
|
||||
vorgangId,
|
||||
fristBegruendung,
|
||||
warnungen,
|
||||
}: {
|
||||
betreuteId: string
|
||||
art: SchreibenArt
|
||||
entwurf: { betreff: string; text: string; empfaengerName: string; wiedervorlageAm: string }
|
||||
kontakte: KontaktAuswahl[]
|
||||
vertragId: string | null
|
||||
vorgangId: string | null
|
||||
fristBegruendung: string | null
|
||||
warnungen: string[]
|
||||
}) {
|
||||
const [text, setText] = React.useState(entwurf.text)
|
||||
const [betreff, setBetreff] = React.useState(entwurf.betreff)
|
||||
const [empfaengerName, setEmpfaengerName] = React.useState(entwurf.empfaengerName)
|
||||
const [empfaengerAnschrift, setEmpfaengerAnschrift] = React.useState('')
|
||||
const [versandAm, setVersandAm] = React.useState(new Date().toISOString().slice(0, 10))
|
||||
const [wiedervorlageAm, setWiedervorlageAm] = React.useState(entwurf.wiedervorlageAm)
|
||||
const [kopiert, setKopiert] = React.useState(false)
|
||||
|
||||
const [ablageZustand, ablegen] = useActionState<SchreibenZustand, FormData>(
|
||||
schreibenAblegen,
|
||||
{},
|
||||
)
|
||||
const [kontaktZustand, kontaktAnlegen] = useActionState<SchreibenZustand, FormData>(
|
||||
kontaktAusAnschrift,
|
||||
{},
|
||||
)
|
||||
|
||||
/** Gemeinsame versteckte Felder für beide Formulare und den Download. */
|
||||
function VersteckteFelder() {
|
||||
return (
|
||||
<>
|
||||
<input type="hidden" name="betreuteId" value={betreuteId} />
|
||||
<input type="hidden" name="art" value={art} />
|
||||
<input type="hidden" name="betreff" value={betreff} />
|
||||
<input type="hidden" name="text" value={text} />
|
||||
<input type="hidden" name="empfaengerName" value={empfaengerName} />
|
||||
<input type="hidden" name="empfaengerAnschrift" value={empfaengerAnschrift} />
|
||||
<input type="hidden" name="versandAm" value={versandAm} />
|
||||
<input type="hidden" name="wiedervorlageAm" value={wiedervorlageAm} />
|
||||
<input type="hidden" name="vertragId" value={vertragId ?? ''} />
|
||||
<input type="hidden" name="vorgangId" value={vorgangId ?? ''} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function kontaktUebernehmen(id: string) {
|
||||
const kontakt = kontakte.find((k) => k.id === id)
|
||||
if (!kontakt) return
|
||||
setEmpfaengerName(kontakt.organisation ?? kontakt.name)
|
||||
setEmpfaengerAnschrift(
|
||||
[kontakt.strasse, [kontakt.plz, kontakt.ort].filter(Boolean).join(' ')]
|
||||
.filter(Boolean)
|
||||
.join('\n'),
|
||||
)
|
||||
}
|
||||
|
||||
async function textKopieren() {
|
||||
try {
|
||||
await navigator.clipboard.writeText(text)
|
||||
setKopiert(true)
|
||||
window.setTimeout(() => setKopiert(false), 2500)
|
||||
} catch {
|
||||
/* Zwischenablage gesperrt - dann markiert man eben von Hand. */
|
||||
}
|
||||
}
|
||||
|
||||
const abgelegt = Boolean(ablageZustand.erfolg)
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{warnungen.length > 0 && (
|
||||
<Alert variant="warnung">
|
||||
<AlertCircle aria-hidden="true" />
|
||||
<AlertDescription>
|
||||
<p className="font-medium">Vor dem Abschicken klären:</p>
|
||||
<ul className="mt-1 list-disc space-y-1 pl-4">
|
||||
{warnungen.map((warnung) => (
|
||||
<li key={warnung}>{warnung}</li>
|
||||
))}
|
||||
</ul>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* --- Empfänger ---------------------------------------------------- */}
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-base">An wen geht das Schreiben?</CardTitle>
|
||||
<CardDescription>
|
||||
Der Empfänger steht im Brieftext darunter — was du hier einträgst, landet am Dokument
|
||||
in der Akte und im Dateinamen.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{kontakte.length > 0 && (
|
||||
<Feld
|
||||
id="kontaktAuswahl"
|
||||
beschriftung="Aus den Kontakten übernehmen"
|
||||
erklaerung="Spart das Abtippen, wenn die Stelle schon im System steht."
|
||||
>
|
||||
<Select
|
||||
id="kontaktAuswahl"
|
||||
defaultValue=""
|
||||
onChange={(ereignis) => kontaktUebernehmen(ereignis.target.value)}
|
||||
>
|
||||
<option value="">– Kontakt wählen –</option>
|
||||
{kontakte.map((kontakt) => (
|
||||
<option key={kontakt.id} value={kontakt.id}>
|
||||
{kontakt.organisation ?? kontakt.name}
|
||||
{kontakt.ort ? ` · ${kontakt.ort}` : ''}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
</Feld>
|
||||
)}
|
||||
|
||||
<Feld id="empfaengerName" beschriftung="Name oder Gesellschaft" pflicht>
|
||||
<Input
|
||||
id="empfaengerName"
|
||||
value={empfaengerName}
|
||||
onChange={(ereignis) => setEmpfaengerName(ereignis.target.value)}
|
||||
maxLength={200}
|
||||
placeholder="z. B. Allianz Lebensversicherungs-AG"
|
||||
/>
|
||||
</Feld>
|
||||
|
||||
<Feld
|
||||
id="empfaengerAnschrift"
|
||||
beschriftung="Anschrift"
|
||||
erklaerung="Straße, dann PLZ und Ort — je Zeile eine Angabe. Nur nötig, wenn du daraus einen Kontakt anlegen willst; in den Brieftext trägst du sie unten selbst ein."
|
||||
>
|
||||
<Textarea
|
||||
id="empfaengerAnschrift"
|
||||
value={empfaengerAnschrift}
|
||||
onChange={(ereignis) => setEmpfaengerAnschrift(ereignis.target.value)}
|
||||
rows={3}
|
||||
maxLength={500}
|
||||
/>
|
||||
</Feld>
|
||||
|
||||
{empfaengerName.trim() !== '' && empfaengerAnschrift.trim() !== '' && (
|
||||
<form action={kontaktAnlegen}>
|
||||
<VersteckteFelder />
|
||||
{kontaktZustand.fehler && (
|
||||
<Alert variant="fehler" className="mb-2">
|
||||
<AlertCircle aria-hidden="true" />
|
||||
<AlertDescription>{kontaktZustand.fehler}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
{kontaktZustand.erfolg && (
|
||||
<Alert variant="erfolg" className="mb-2">
|
||||
<CheckCircle2 aria-hidden="true" />
|
||||
<AlertDescription>{kontaktZustand.erfolg}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
<Absendeknopf variant="outline" size="sm" wartetext="Wird angelegt …">
|
||||
<UserPlus aria-hidden="true" />
|
||||
Als Kontakt merken
|
||||
</Absendeknopf>
|
||||
</form>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* --- Der Brief ---------------------------------------------------- */}
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-base">Der Brief</CardTitle>
|
||||
<CardDescription>
|
||||
Vollständig bearbeitbar. Was hier steht, steht auch in der Word-Datei und in der
|
||||
Fassung für die Akte.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<Feld
|
||||
id="betreff"
|
||||
beschriftung="Betreff"
|
||||
erklaerung="Wird zum Titel des Dokuments in der Akte."
|
||||
pflicht
|
||||
>
|
||||
<Input
|
||||
id="betreff"
|
||||
value={betreff}
|
||||
onChange={(ereignis) => setBetreff(ereignis.target.value)}
|
||||
maxLength={200}
|
||||
/>
|
||||
</Feld>
|
||||
|
||||
<Feld id="text" beschriftung="Brieftext" pflicht>
|
||||
<Textarea
|
||||
id="text"
|
||||
value={text}
|
||||
onChange={(ereignis) => setText(ereignis.target.value)}
|
||||
rows={26}
|
||||
className="font-mono text-sm leading-relaxed"
|
||||
spellCheck
|
||||
/>
|
||||
</Feld>
|
||||
|
||||
<Button type="button" variant="ghost" size="sm" onClick={() => void textKopieren()}>
|
||||
<Copy aria-hidden="true" />
|
||||
{kopiert ? 'Kopiert' : 'Text kopieren'}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* --- Ausgabe ------------------------------------------------------ */}
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-base">Und jetzt?</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-5">
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<Feld
|
||||
id="versandAm"
|
||||
beschriftung="Versandt am"
|
||||
erklaerung="Steht am Dokument in der Akte."
|
||||
>
|
||||
<Input
|
||||
id="versandAm"
|
||||
type="date"
|
||||
value={versandAm}
|
||||
onChange={(ereignis) => setVersandAm(ereignis.target.value)}
|
||||
/>
|
||||
</Feld>
|
||||
|
||||
<Feld
|
||||
id="wiedervorlageAm"
|
||||
beschriftung="Wiedervorlage am"
|
||||
erklaerung={fristBegruendung ?? 'Leer lassen, wenn du keine Antwort erwartest.'}
|
||||
>
|
||||
<Input
|
||||
id="wiedervorlageAm"
|
||||
type="date"
|
||||
value={wiedervorlageAm}
|
||||
onChange={(ereignis) => setWiedervorlageAm(ereignis.target.value)}
|
||||
/>
|
||||
</Feld>
|
||||
</div>
|
||||
|
||||
{/* Word-Datei: eigene Route, damit der Browser einen echten
|
||||
Download bekommt. */}
|
||||
<form action="/schreiben/docx" method="post" className="inline">
|
||||
<VersteckteFelder />
|
||||
<Button type="submit" variant="outline">
|
||||
<FileDown aria-hidden="true" />
|
||||
Als Word-Datei
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
<Alert variant="hinweis">
|
||||
<Info aria-hidden="true" />
|
||||
<AlertDescription>
|
||||
In die Akte kommt eine <strong>PDF-Fassung</strong> dieses Textes — sie ist der
|
||||
Nachweis, was hinausgegangen ist, und lässt sich nicht mehr ändern. Die Word-Datei
|
||||
ist die Arbeitsfassung zum Ausdrucken und Unterschreiben.{' '}
|
||||
<strong>Änderst du sie danach noch in Word</strong>, weicht die Akte davon ab — dann
|
||||
lieber erst dort fertig schreiben, den Text hierher zurückkopieren und dann ablegen.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
|
||||
{ablageZustand.fehler && (
|
||||
<Alert variant="fehler">
|
||||
<AlertCircle aria-hidden="true" />
|
||||
<AlertDescription>{ablageZustand.fehler}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{abgelegt && (
|
||||
<Alert variant="erfolg">
|
||||
<CheckCircle2 aria-hidden="true" />
|
||||
<AlertDescription>
|
||||
<p className="font-medium">{ablageZustand.erfolg}</p>
|
||||
{ablageZustand.meldung && (
|
||||
<ul className="mt-1 list-disc space-y-1 pl-4">
|
||||
{ablageZustand.meldung.map((zeile) => (
|
||||
<li key={zeile}>{zeile}</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
<p className="mt-2">
|
||||
<Link href="/dokumente?richtung=AUSGANG" className="underline">
|
||||
Zu den ausgehenden Dokumenten
|
||||
</Link>
|
||||
</p>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<form action={ablegen}>
|
||||
<VersteckteFelder />
|
||||
<Absendeknopf disabled={abgelegt} wartetext="Wird abgelegt …">
|
||||
<FolderInput aria-hidden="true" />
|
||||
{abgelegt ? 'Liegt in der Akte' : 'In die Akte legen'}
|
||||
</Absendeknopf>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user