v1.31: PDF-Lightbox mit Druck/E-Mail/Download, Mail-API Anhang-Support
This commit is contained in:
@@ -0,0 +1,162 @@
|
||||
import { useRef, useState } from 'react'
|
||||
import { Printer, Mail, Download, Send, X } from 'lucide-react'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from '@/components/ui/dialog'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { useStore } from '../store/store'
|
||||
import type { DocumentItem } from '../types'
|
||||
|
||||
/** PDF-Lightbox (v1.31): Inline-Vorschau erzeugter/gespeicherter PDFs mit
|
||||
* Drucken-, E-Mail- und Download-Option. Auth läuft über das Session-Cookie. */
|
||||
export default function PdfLightbox({ dokument, trigger }: {
|
||||
dokument: DocumentItem
|
||||
trigger: React.ReactNode
|
||||
}) {
|
||||
const { role, sendeDokumentEmail } = useStore()
|
||||
const [open, setOpen] = useState(false)
|
||||
const iframeRef = useRef<HTMLIFrameElement>(null)
|
||||
const [zeigeEmail, setZeigeEmail] = useState(false)
|
||||
const [an, setAn] = useState('')
|
||||
const [betreff, setBetreff] = useState('')
|
||||
const [nachricht, setNachricht] = useState('')
|
||||
const [sende, setSende] = useState(false)
|
||||
const [meldung, setMeldung] = useState<string | null>(null)
|
||||
|
||||
const drucken = () => {
|
||||
try {
|
||||
iframeRef.current?.contentWindow?.focus()
|
||||
iframeRef.current?.contentWindow?.print()
|
||||
} catch {
|
||||
window.open(`/api/documents/${dokument.id}/preview`, '_blank')
|
||||
}
|
||||
}
|
||||
|
||||
const emailFormularOeffnen = () => {
|
||||
setBetreff(`Dokument: ${dokument.title}`)
|
||||
setMeldung(null)
|
||||
setZeigeEmail(true)
|
||||
}
|
||||
|
||||
const senden = async () => {
|
||||
if (sende) return
|
||||
setSende(true)
|
||||
setMeldung(null)
|
||||
const err = await sendeDokumentEmail(dokument.id, {
|
||||
an: an.trim() || undefined,
|
||||
betreff: betreff.trim(),
|
||||
nachricht: nachricht.trim(),
|
||||
})
|
||||
setSende(false)
|
||||
if (err) return setMeldung(err)
|
||||
setMeldung('E-Mail wurde versendet.')
|
||||
setZeigeEmail(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogTrigger asChild>{trigger}</DialogTrigger>
|
||||
<DialogContent className="flex h-[90vh] max-w-4xl flex-col gap-0 p-0">
|
||||
<DialogHeader className="border-b px-5 py-4">
|
||||
<div className="flex items-center justify-between gap-3 pr-8">
|
||||
<div className="min-w-0">
|
||||
<DialogTitle className="truncate text-base">{dokument.title}</DialogTitle>
|
||||
<p className="truncate text-xs text-slate-500 dark:text-slate-400">
|
||||
{dokument.category} · {dokument.date}
|
||||
{dokument.fileName && ` · ${dokument.fileName}`}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex shrink-0 flex-wrap gap-2">
|
||||
<Button variant="outline" size="sm" className="gap-1.5" onClick={drucken}>
|
||||
<Printer className="h-3.5 w-3.5" /> Drucken
|
||||
</Button>
|
||||
{role === 'admin' && (
|
||||
<Button
|
||||
variant={zeigeEmail ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
className="gap-1.5"
|
||||
onClick={() => (zeigeEmail ? setZeigeEmail(false) : emailFormularOeffnen())}
|
||||
>
|
||||
<Mail className="h-3.5 w-3.5" /> E-Mail
|
||||
</Button>
|
||||
)}
|
||||
<Button variant="outline" size="sm" className="gap-1.5" asChild>
|
||||
<a
|
||||
href={`/api/documents/${dokument.id}/download`}
|
||||
download={dokument.fileName || `${dokument.title}.pdf`}
|
||||
>
|
||||
<Download className="h-3.5 w-3.5" /> Download
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DialogHeader>
|
||||
|
||||
{zeigeEmail && (
|
||||
<div className="space-y-3 border-b bg-slate-50 px-5 py-4 dark:border-slate-700 dark:bg-slate-800/60">
|
||||
<div className="flex items-center justify-between">
|
||||
<h4 className="text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
|
||||
PDF per E-Mail versenden
|
||||
</h4>
|
||||
<Button variant="ghost" size="sm" onClick={() => setZeigeEmail(false)} aria-label="E-Mail-Formular schließen">
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="pl-an">Empfänger</Label>
|
||||
<Input
|
||||
id="pl-an"
|
||||
type="email"
|
||||
placeholder="leer = Mieter der Wohnung"
|
||||
value={an}
|
||||
onChange={(e) => setAn(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="pl-betreff">Betreff</Label>
|
||||
<Input id="pl-betreff" value={betreff} onChange={(e) => setBetreff(e.target.value)} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="pl-text">Nachricht (optional)</Label>
|
||||
<textarea
|
||||
id="pl-text"
|
||||
className="min-h-16 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring dark:bg-slate-900"
|
||||
placeholder="Persönliche Mitteilung zum Dokument …"
|
||||
value={nachricht}
|
||||
onChange={(e) => setNachricht(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-slate-400 dark:text-slate-500">
|
||||
Das PDF wird als Anhang versendet; die Verwaltung erhält immer eine Kopie (CC).
|
||||
</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button size="sm" className="gap-1.5" onClick={senden} disabled={sende}>
|
||||
<Send className="h-3.5 w-3.5" /> {sende ? 'Wird versendet …' : 'Senden'}
|
||||
</Button>
|
||||
{meldung && (
|
||||
<span className={`text-xs ${meldung.startsWith('E-Mail') ? 'text-emerald-600 dark:text-emerald-400' : 'text-red-600 dark:text-red-400'}`}>
|
||||
{meldung}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<iframe
|
||||
ref={iframeRef}
|
||||
src={`/api/documents/${dokument.id}/preview`}
|
||||
title={`PDF-Vorschau: ${dokument.title}`}
|
||||
className="min-h-0 w-full flex-1 border-0 bg-slate-100 dark:bg-slate-800"
|
||||
/>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user