Phase 1: Stammdatenverwaltung
Ab hier fuehrt die Wehr ihren Bestand in FLORIAN. Datenmodell: - Standort, Geraeteraum, Geraetetyp, Qualifikationstyp und Qualifikation - Fahrzeug um Fahrgestellnummer, DIN-Typ, Erstzulassung, Sitzplaetze, Tankinhalt und UVV-Frist erweitert - Geraet um Geraetetyp, Lebensdauerkategorie, errechnetes Lebensdauerende, Anschaffungspreis und die Lagerung erweitert - Ein Geraet steht entweder an einem Standort oder ist auf einem Fahrzeug verlastet. Eine Pruefbedingung setzt das durch, ein Trigger stellt zusaetzlich sicher, dass ein angegebener Geraeteraum zum angegebenen Fahrzeug gehoert. - RLS auf allen neuen Tabellen, Trigram-Indizes fuer die Volltextsuche Fachlogik: - lib/stammdaten/fristen.ts rechnet Prueftermine, Lebensdauer und den abgeleiteten Geraetestatus. Der Geraetetyp gibt vor, das Geraet darf abweichen. - lib/stammdaten/qr.ts und qr-parser.ts erzeugen und lesen die Codes - lib/stammdaten/etiketten.ts baut den A4-Bogen mit 65 Etiketten - lib/stammdaten/import.ts liest CSV und Excel, erkennt deutsche Datums- und Zahlenformate, Windows-1252 und Dubletten innerhalb der Datei - lib/pdf.ts spricht Gotenberg an Oberflaeche: - Geraeteliste mit Volltextsuche, Statusfilter, serverseitiger Sortierung, Blaettern, Spaltenauswahl und Massenbearbeitung - Geraetedetail mit QR-Code, Pruefvorgabe aus dem Geraetetyp und Verlauf - Fahrzeugliste und -detail mit Beladung nach Beladeordnung - Mitgliederliste nach Abteilung, Mitgliedsdetail mit Qualifikationen - Qualifikationen mit Ablaufwarnung je Vorwarnzeit des Typs - Import-Assistent mit Zuordnung und Vorschau vor dem Uebernehmen - QR-Scanner ueber die Kamera, mit Eingabefeld als Rueckfallweg Behoben: - Fristenrechnung lief ueber startOfDay aus date-fns und damit in der Zeitzone des Servers. Ein DATE aus der Datenbank kommt als UTC-Mitternacht und wurde dadurch auf den Vortag geschoben — Fristen waeren einen Tag zu frueh faellig geworden. Jetzt eigene Kalenderarithmetik auf UTC-Bestandteilen. - ctx.sitzung blieb in tRPC-Prozeduren nullbar, weil t.middleware() die Verengung der vorigen Middleware verwirft. Middleware jetzt direkt an .use(). - CardTitle war ein div und damit keine Ueberschrift. Wer mit einer Sprachausgabe arbeitet, springt von Ueberschrift zu Ueberschrift; Karten tauchten in dieser Navigation nicht auf. Daten und Tests: - Seed um 3 Standorte, 20 Geraeteraeume, 14 Geraetetypen mit echten Pruefvorgaben, 49 Geraete und 107 Qualifikationen erweitert - 104 Vitest-Tests (vorher 32), 44 Playwright-Tests (vorher 10) - Anleitung um sieben bebilderte Abschnitte erweitert, Changelog, Devlog, Aufwandsschaetzung und Roadmap fortgeschrieben Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Florian Wilde
co-authored by
Claude Opus 5
Claude Opus 5
parent
4b3021bb50
commit
26b62a3477
@@ -0,0 +1,421 @@
|
||||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { AlertTriangle, CheckCircle2, FileSpreadsheet, Upload } from "lucide-react";
|
||||
import { trpc } from "@/lib/trpc/client";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Fehlermeldung } from "@/components/stammdaten/anzeige";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
/**
|
||||
* Import-Assistent.
|
||||
*
|
||||
* Drei Schritte, und der mittlere ist der eigentliche Punkt der Übung:
|
||||
*
|
||||
* 1. Datei wählen
|
||||
* 2. Zuordnung prüfen und Vorschau ansehen
|
||||
* 3. Übernehmen
|
||||
*
|
||||
* Zwischen 2 und 3 sitzt ein Mensch. Eine falsch zugeordnete Spalte verteilt
|
||||
* sonst Seriennummern auf Inventarnummern, und das merkt man erst Wochen
|
||||
* später am Regal.
|
||||
*
|
||||
* Die Datei wird beim Übernehmen erneut zum Server geschickt und dort neu
|
||||
* eingelesen. Das kostet eine Übertragung, verhindert aber, dass jemand die
|
||||
* Prüfung umgeht und eigene Werte einschleust.
|
||||
*/
|
||||
|
||||
type ImportArt = "geraet" | "person" | "fahrzeug";
|
||||
|
||||
const ART_BEZEICHNUNG: Record<ImportArt, string> = {
|
||||
geraet: "Geräte",
|
||||
person: "Mitglieder",
|
||||
fahrzeug: "Fahrzeuge",
|
||||
};
|
||||
|
||||
export function ImportAssistent() {
|
||||
const router = useRouter();
|
||||
const werkzeuge = trpc.useUtils();
|
||||
|
||||
const [art, setArt] = React.useState<ImportArt>("geraet");
|
||||
const [datei, setDatei] = React.useState<{ name: string; inhalt: string } | null>(null);
|
||||
const [zuordnung, setZuordnung] = React.useState<Record<string, string | null>>({});
|
||||
const [aktualisieren, setAktualisieren] = React.useState(false);
|
||||
const [fehler, setFehler] = React.useState<string | null>(null);
|
||||
const [ergebnis, setErgebnis] = React.useState<{
|
||||
angelegt: number;
|
||||
aktualisiert: number;
|
||||
uebersprungen: number;
|
||||
nichtUebernommen: number;
|
||||
fehler: string[];
|
||||
} | null>(null);
|
||||
|
||||
const vorschau = trpc.datenImport.vorschau.useMutation({
|
||||
onSuccess: (daten) => {
|
||||
setZuordnung(daten.zuordnung);
|
||||
setFehler(null);
|
||||
},
|
||||
onError: (ausnahme) => setFehler(ausnahme.message),
|
||||
});
|
||||
|
||||
const uebernehmen = trpc.datenImport.uebernehmen.useMutation({
|
||||
onSuccess: (daten) => {
|
||||
setErgebnis(daten);
|
||||
setFehler(null);
|
||||
void werkzeuge.geraet.liste.invalidate();
|
||||
void werkzeuge.organisation.kennzahlen.invalidate();
|
||||
},
|
||||
onError: (ausnahme) => setFehler(ausnahme.message),
|
||||
});
|
||||
|
||||
async function dateiWaehlen(ereignis: React.ChangeEvent<HTMLInputElement>) {
|
||||
const gewaehlt = ereignis.target.files?.[0];
|
||||
if (!gewaehlt) return;
|
||||
|
||||
setErgebnis(null);
|
||||
setFehler(null);
|
||||
|
||||
const puffer = await gewaehlt.arrayBuffer();
|
||||
// Blockweise umwandeln: bei großen Dateien sprengt ein einziger
|
||||
// String.fromCharCode-Aufruf den Aufrufstapel.
|
||||
const bytes = new Uint8Array(puffer);
|
||||
let roh = "";
|
||||
const block = 8192;
|
||||
for (let i = 0; i < bytes.length; i += block) {
|
||||
roh += String.fromCharCode(...bytes.subarray(i, i + block));
|
||||
}
|
||||
const inhalt = btoa(roh);
|
||||
|
||||
setDatei({ name: gewaehlt.name, inhalt });
|
||||
vorschau.mutate({ dateiname: gewaehlt.name, inhalt, art });
|
||||
}
|
||||
|
||||
function zuordnungAendern(spalte: string, feld: string) {
|
||||
const neu = { ...zuordnung, [spalte]: feld === "__keine__" ? null : feld };
|
||||
setZuordnung(neu);
|
||||
if (datei) {
|
||||
vorschau.mutate({ dateiname: datei.name, inhalt: datei.inhalt, art, zuordnung: neu });
|
||||
}
|
||||
}
|
||||
|
||||
const daten = vorschau.data;
|
||||
|
||||
// Schritt 3 geschafft.
|
||||
if (ergebnis) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-3">
|
||||
<CheckCircle2 className="size-6 text-[var(--einsatzbereit)]" aria-hidden />
|
||||
<div>
|
||||
<CardTitle>Import abgeschlossen</CardTitle>
|
||||
<CardDescription>Aus der Datei „{datei?.name}“.</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<dl className="grid gap-4 sm:grid-cols-4">
|
||||
{[
|
||||
["Neu angelegt", ergebnis.angelegt],
|
||||
["Aktualisiert", ergebnis.aktualisiert],
|
||||
["Übersprungen", ergebnis.uebersprungen],
|
||||
["Nicht übernommen", ergebnis.nichtUebernommen],
|
||||
].map(([bezeichnung, wert]) => (
|
||||
<div key={bezeichnung as string}>
|
||||
<dt className="text-xs uppercase tracking-wide text-[var(--muted-foreground)]">
|
||||
{bezeichnung}
|
||||
</dt>
|
||||
<dd className="text-2xl font-semibold tabellenzahlen">{wert}</dd>
|
||||
</div>
|
||||
))}
|
||||
</dl>
|
||||
|
||||
{ergebnis.uebersprungen > 0 && !aktualisieren && (
|
||||
<p className="text-sm text-[var(--muted-foreground)]">
|
||||
Übersprungen wurden Datensätze, die es schon gibt. Mit „Vorhandene
|
||||
aktualisieren“ werden sie stattdessen überschrieben.
|
||||
</p>
|
||||
)}
|
||||
|
||||
{ergebnis.fehler.length > 0 && (
|
||||
<div className="rounded-md border border-[var(--pruefung-faellig)]/40 bg-[var(--pruefung-faellig)]/10 p-3">
|
||||
<p className="mb-1 text-sm font-medium">
|
||||
{ergebnis.fehler.length} Zeilen ließen sich nicht schreiben:
|
||||
</p>
|
||||
<ul className="list-disc space-y-0.5 pl-5 text-xs">
|
||||
{ergebnis.fehler.slice(0, 20).map((meldung) => (
|
||||
<li key={meldung}>{meldung}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button onClick={() => router.push("/geraete")}>Zur Geräteliste</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
setErgebnis(null);
|
||||
setDatei(null);
|
||||
vorschau.reset();
|
||||
}}
|
||||
>
|
||||
Weitere Datei importieren
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{fehler && <Fehlermeldung meldung={fehler} />}
|
||||
|
||||
{/* Schritt 1 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>1. Datei wählen</CardTitle>
|
||||
<CardDescription>
|
||||
CSV oder Excel (.xlsx). Die erste Zeile muss die Spaltenüberschriften
|
||||
enthalten. Höchstens 10 MB und 5.000 Zeilen.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="art">Was wird importiert?</Label>
|
||||
<Select
|
||||
value={art}
|
||||
onValueChange={(wert) => {
|
||||
setArt(wert as ImportArt);
|
||||
setDatei(null);
|
||||
vorschau.reset();
|
||||
}}
|
||||
>
|
||||
<SelectTrigger id="art">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{Object.entries(ART_BEZEICHNUNG).map(([wert, text]) => (
|
||||
<SelectItem key={wert} value={wert}>
|
||||
{text}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="datei">Datei</Label>
|
||||
<input
|
||||
id="datei"
|
||||
type="file"
|
||||
accept=".csv,.txt,.xlsx,.xlsm"
|
||||
onChange={dateiWaehlen}
|
||||
className="block w-full cursor-pointer rounded-md border border-[var(--input)] bg-[var(--background)] text-sm file:mr-3 file:cursor-pointer file:rounded-l-md file:border-0 file:bg-[var(--secondary)] file:px-3 file:py-2 file:text-sm file:font-medium"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{datei && (
|
||||
<p className="flex items-center gap-2 text-sm text-[var(--muted-foreground)]">
|
||||
<FileSpreadsheet className="size-4" aria-hidden />
|
||||
{datei.name}
|
||||
</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{vorschau.isPending && (
|
||||
<p className="text-sm text-[var(--muted-foreground)]">Die Datei wird gelesen …</p>
|
||||
)}
|
||||
|
||||
{/* Schritt 2 */}
|
||||
{daten && (
|
||||
<>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>2. Spalten zuordnen</CardTitle>
|
||||
<CardDescription>
|
||||
Die Zuordnung wurde nach den Überschriften geraten. Bitte prüfen und
|
||||
nötigenfalls korrigieren — danach passt sich die Vorschau sofort an.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{daten.fehlendePflichtfelder.length > 0 && (
|
||||
<div className="flex items-start gap-2 rounded-md border border-[var(--destructive)]/40 bg-[var(--destructive)]/10 p-3 text-sm">
|
||||
<AlertTriangle
|
||||
className="mt-0.5 size-4 shrink-0 text-[var(--destructive)]"
|
||||
aria-hidden
|
||||
/>
|
||||
<span>
|
||||
Diesen Pflichtfeldern ist keine Spalte zugeordnet:{" "}
|
||||
<strong>{daten.fehlendePflichtfelder.join(", ")}</strong>. Ohne sie lässt
|
||||
sich nichts übernehmen.
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{daten.spalten.map((spalte) => (
|
||||
<div key={spalte} className="space-y-1">
|
||||
<Label className="text-xs text-[var(--muted-foreground)]">
|
||||
Spalte „{spalte}“
|
||||
</Label>
|
||||
<Select
|
||||
value={zuordnung[spalte] ?? "__keine__"}
|
||||
onValueChange={(wert) => zuordnungAendern(spalte, wert)}
|
||||
>
|
||||
<SelectTrigger aria-label={`Zielfeld für Spalte ${spalte}`}>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="__keine__">— nicht übernehmen —</SelectItem>
|
||||
{daten.felder.map((feld) => (
|
||||
<SelectItem key={feld.schluessel} value={feld.schluessel}>
|
||||
{feld.bezeichnung}
|
||||
{feld.pflicht ? " *" : ""}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Vorschau</CardTitle>
|
||||
<CardDescription>
|
||||
{daten.anzahlUebernehmbar} von {daten.zeilenGesamt} Zeilen sind
|
||||
übernehmbar
|
||||
{daten.anzahlFehlerhaft > 0 && `, ${daten.anzahlFehlerhaft} haben Fehler`}.
|
||||
{daten.gekuerzt && " Die Datei wurde auf 5.000 Zeilen gekürzt."}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="max-h-96 overflow-y-auto rounded-md border border-[var(--border)]">
|
||||
<Table>
|
||||
<TableHeader className="sticky top-0 bg-[var(--card)]">
|
||||
<TableRow>
|
||||
<TableHead className="w-12">Zeile</TableHead>
|
||||
{daten.felder
|
||||
.filter((feld) =>
|
||||
Object.values(zuordnung).includes(feld.schluessel),
|
||||
)
|
||||
.map((feld) => (
|
||||
<TableHead key={feld.schluessel}>{feld.bezeichnung}</TableHead>
|
||||
))}
|
||||
<TableHead>Hinweis</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{daten.zeilen.map((zeile) => (
|
||||
<TableRow
|
||||
key={zeile.nummer}
|
||||
className={cn(!zeile.uebernehmbar && "bg-[var(--destructive)]/5")}
|
||||
>
|
||||
<TableCell className="tabellenzahlen text-xs text-[var(--muted-foreground)]">
|
||||
{zeile.nummer}
|
||||
</TableCell>
|
||||
|
||||
{daten.felder
|
||||
.filter((feld) =>
|
||||
Object.values(zuordnung).includes(feld.schluessel),
|
||||
)
|
||||
.map((feld) => {
|
||||
const wert = zeile.werte[feld.schluessel];
|
||||
return (
|
||||
<TableCell key={feld.schluessel} className="max-w-48 truncate text-sm">
|
||||
{wert instanceof Date
|
||||
? wert.toLocaleDateString("de-DE")
|
||||
: wert === undefined || wert === null
|
||||
? "—"
|
||||
: String(wert)}
|
||||
</TableCell>
|
||||
);
|
||||
})}
|
||||
|
||||
<TableCell className="text-xs">
|
||||
{zeile.fehler.length === 0 ? (
|
||||
<span className="text-[var(--einsatzbereit)]">in Ordnung</span>
|
||||
) : (
|
||||
<span className="text-[var(--destructive)]">
|
||||
{zeile.fehler.map((f) => f.meldung).join("; ")}
|
||||
</span>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
<label className="flex cursor-pointer items-center gap-2 text-sm">
|
||||
<Checkbox
|
||||
checked={aktualisieren}
|
||||
onCheckedChange={(an) => setAktualisieren(Boolean(an))}
|
||||
/>
|
||||
Vorhandene Datensätze aktualisieren statt überspringen
|
||||
</label>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<Button
|
||||
disabled={
|
||||
!datei ||
|
||||
daten.anzahlUebernehmbar === 0 ||
|
||||
daten.fehlendePflichtfelder.length > 0 ||
|
||||
uebernehmen.isPending
|
||||
}
|
||||
onClick={() =>
|
||||
datei &&
|
||||
uebernehmen.mutate({
|
||||
dateiname: datei.name,
|
||||
inhalt: datei.inhalt,
|
||||
art,
|
||||
zuordnung,
|
||||
vorhandeneAktualisieren: aktualisieren,
|
||||
})
|
||||
}
|
||||
>
|
||||
<Upload aria-hidden />
|
||||
{uebernehmen.isPending
|
||||
? "Wird übernommen …"
|
||||
: `${daten.anzahlUebernehmbar} Zeilen übernehmen`}
|
||||
</Button>
|
||||
|
||||
{daten.anzahlFehlerhaft > 0 && (
|
||||
<p className="text-sm text-[var(--muted-foreground)]">
|
||||
Zeilen mit Fehlern werden übersprungen und bleiben in der Datei.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user