add DokumentListe component: upload, thumbnails, image modal, PDF viewer

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-13 06:25:42 +01:00
parent 6bddd08e0c
commit e1329280c2
1 changed files with 192 additions and 0 deletions
--- a/src/features/prozess/components/dokument-liste.tsx
+++ b/src/features/prozess/components/dokument-liste.tsx
@@ -0,0 +1,192 @@
+import { FileText, Plus, Trash2, X } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import {
+	type Dokument,
+	deleteDokument,
+	getDokumente,
+	saveDokument,
+} from "@/shared/hooks/dokument-store";
+
+interface DokumentListeProps {
+	sprechstundeId: number;
+}
+
+export function DokumentListe({ sprechstundeId }: DokumentListeProps) {
+	const [dokumente, setDokumente] = useState<Dokument[]>([]);
+	const [viewDokument, setViewDokument] = useState<Dokument | null>(null);
+
+	const refresh = useCallback(async () => {
+		const docs = await getDokumente(sprechstundeId);
+		setDokumente(docs);
+	}, [sprechstundeId]);
+
+	useEffect(() => {
+		refresh();
+	}, [refresh]);
+
+	const handleFiles = async (files: FileList | null) => {
+		if (!files) return;
+		for (const file of files) {
+			await saveDokument(sprechstundeId, file);
+		}
+		await refresh();
+	};
+
+	const handleDelete = async (id: number) => {
+		if (!window.confirm("Dokument wirklich löschen?")) return;
+		await deleteDokument(id);
+		await refresh();
+	};
+
+	const handleView = (dok: Dokument) => {
+		if (dok.mimeType === "application/pdf") {
+			const url = URL.createObjectURL(dok.blob);
+			window.open(url, "_blank");
+			setTimeout(() => URL.revokeObjectURL(url), 60_000);
+		} else {
+			setViewDokument(dok);
+		}
+	};
+
+	return (
+		<div className="space-y-2">
+			<p className="text-xs font-medium text-muted-foreground">Dokumente</p>
+
+			{dokumente.length > 0 && (
+				<div className="grid grid-cols-3 gap-2">
+					{dokumente.map((dok) => (
+						<DokumentThumbnail
+							key={dok.id}
+							dokument={dok}
+							onView={() => handleView(dok)}
+							onDelete={() => handleDelete(dok.id)}
+						/>
+					))}
+				</div>
+			)}
+
+			<label className="inline-flex cursor-pointer items-center gap-1 rounded-md border border-input px-3 py-1.5 text-sm shadow-xs transition-colors hover:bg-accent">
+				<Plus className="size-4" />
+				Dokument hinzufügen
+				<input
+					type="file"
+					accept="image/*,application/pdf"
+					multiple
+					className="sr-only"
+					onChange={(e) => handleFiles(e.target.files)}
+				/>
+			</label>
+
+			{viewDokument && (
+				<ImageModal
+					dokument={viewDokument}
+					onClose={() => setViewDokument(null)}
+				/>
+			)}
+		</div>
+	);
+}
+
+function DokumentThumbnail({
+	dokument,
+	onView,
+	onDelete,
+}: {
+	dokument: Dokument;
+	onView: () => void;
+	onDelete: () => void;
+}) {
+	const [url, setUrl] = useState<string | null>(null);
+	const isImage = dokument.mimeType.startsWith("image/");
+
+	useEffect(() => {
+		if (isImage) {
+			const objectUrl = URL.createObjectURL(dokument.blob);
+			setUrl(objectUrl);
+			return () => URL.revokeObjectURL(objectUrl);
+		}
+	}, [dokument.blob, isImage]);
+
+	return (
+		<div className="group relative overflow-hidden rounded-md border">
+			<button
+				type="button"
+				onClick={onView}
+				className="flex aspect-square w-full items-center justify-center bg-muted"
+			>
+				{isImage && url ? (
+					<img
+						src={url}
+						alt={dokument.name}
+						className="size-full object-cover"
+					/>
+				) : (
+					<div className="flex flex-col items-center gap-1 p-2">
+						<FileText className="size-8 text-muted-foreground" />
+						<span className="line-clamp-1 text-xs text-muted-foreground">
+							{dokument.name}
+						</span>
+					</div>
+				)}
+			</button>
+			<button
+				type="button"
+				onClick={onDelete}
+				className="absolute right-1 top-1 rounded-full bg-background/80 p-1 sm:opacity-0 sm:transition-opacity sm:group-hover:opacity-100"
+			>
+				<Trash2 className="size-3 text-destructive" />
+			</button>
+		</div>
+	);
+}
+
+function ImageModal({
+	dokument,
+	onClose,
+}: {
+	dokument: Dokument;
+	onClose: () => void;
+}) {
+	const [url, setUrl] = useState<string | null>(null);
+
+	useEffect(() => {
+		const objectUrl = URL.createObjectURL(dokument.blob);
+		setUrl(objectUrl);
+		return () => URL.revokeObjectURL(objectUrl);
+	}, [dokument.blob]);
+
+	useEffect(() => {
+		const handleKeyDown = (e: KeyboardEvent) => {
+			if (e.key === "Escape") onClose();
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		return () => document.removeEventListener("keydown", handleKeyDown);
+	}, [onClose]);
+
+	return (
+		<div
+			role="dialog"
+			aria-label={dokument.name}
+			className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-4"
+			onClick={onClose}
+			onKeyDown={(e) => e.key === "Escape" && onClose()}
+		>
+			<button
+				type="button"
+				onClick={onClose}
+				className="absolute right-4 top-4 rounded-full bg-background/80 p-2"
+			>
+				<X className="size-5" />
+			</button>
+			{url && (
+				<img
+					src={url}
+					alt={dokument.name}
+					className="max-h-full max-w-full object-contain"
+					onClick={(e) => e.stopPropagation()}
+					onKeyDown={(e) => e.stopPropagation()}
+				/>
+			)}
+		</div>
+	);
+}