flessinglabs/kundencenter
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases 1 Packages Wiki Activity Actions

Ticket-Anhänge: Bilder/PDF hochladen und anzeigen (geprüft anhand der Dateikennung)

Browse source
This commit is contained in:
Kundencenter 2026-09-27 08:53:27 +02:00
parent 236c76b4e2
commit 012f0aa0db
12 changed files with 254 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

31
apps/web/src/app/(app)/tickets/[id]/page.tsx
View file

@ -2,11 +2,23 @@
import { useCallback, useEffect, useState, type FormEvent } from 'react';
import { useParams } from 'next/navigation';
import Link from 'next/link';
import { api, errMsg } from '@/lib/api';
import { api, apiUpload, errMsg } from '@/lib/api';
import { useSession } from '@/lib/session';
import { Alert, Field, TicketStatusBadge, TICKET_PRIORITY, fmt } from '@/components/ui';
interface Msg { id: string; authorId: string; authorName: string; authorKind: 'customer' | 'staff'; body: string; internalNote: boolean; createdAt: string }
const MAX_FILES = 5;
const ALLOWED = 'image/png,image/jpeg,image/gif,image/webp,application/pdf';
interface Attachment { id: string; filename: string; contentType: string; sizeBytes: number }
function AttachmentList({ ticketId, atts }: { ticketId: string; atts: Attachment[] }) {
if (atts.length === 0) return null;
return (<div className="row" style={{ marginTop: 8, flexWrap: 'wrap', gap: 8 }}>
{atts.map((a) => { const href = `/api/tickets/${ticketId}/attachments/${a.id}`; const kb = Math.max(1, Math.round(a.sizeBytes / 1024));
return a.contentType.startsWith('image/')
? <a key={a.id} href={href} target="_blank" rel="noreferrer" title={`${a.filename} (${kb} KB)`}><img src={href} alt={a.filename} style={{ maxWidth: 160, maxHeight: 120, borderRadius: 6, border: '1px solid var(--border)', display: 'block' }} /></a>
: <a key={a.id} className="btn small" href={href} target="_blank" rel="noreferrer">📄 {a.filename} <span className="muted small">({kb} KB)</span></a>; })}
</div>);
}
interface Msg { id: string; authorId: string; authorName: string; authorKind: 'customer' | 'staff'; body: string; internalNote: boolean; createdAt: string; attachments: Attachment[] }
interface Detail { id: string; number: string; orgId: string; orgName: string; subject: string; status: string; priority: string; assignedTo: string | null; assignedName: string | null; messages: Msg[]; canWrite: boolean }
interface StaffUser { id: string; name: string; staffRole: string | null }
const STATUS_OPTIONS = { open: 'Offen', pending_customer: 'Wartet auf Kunde', pending_staff: 'Wartet auf Personal', resolved: 'Gelöst', closed: 'Geschlossen' };
@ -20,8 +32,15 @@ export default function TicketDetail() {
useEffect(() => { if (write) api<StaffUser[]>('GET', '/admin/users').then((l) => setStaffUsers(l.filter((u) => !!u.staffRole))).catch(() => undefined); }, [write]);
async function send(e: FormEvent<HTMLFormElement>) {
e.preventDefault(); setErr(''); setBusy(true); const f = e.currentTarget; const body = String(new FormData(f).get('body') ?? ''); const internal = new FormData(f).get('internal') === 'on';
try { await api('POST', `/tickets/${id}/messages`, { body, internalNote: internal }); f.reset(); void load(); } catch (x) { setErr(errMsg(x)); } finally { setBusy(false); }
e.preventDefault(); setErr(''); setBusy(true); const f = e.currentTarget; const fd = new FormData(f);
const body = String(fd.get('body') ?? ''); const internal = fd.get('internal') === 'on';
const files = (fd.getAll('files') as File[]).filter((x) => x instanceof File && x.size > 0);
try {
const { messageId } = await api<{ messageId: string }>('POST', `/tickets/${id}/messages`, { body, internalNote: internal });
f.reset();
if (files.length > 0) { try { await apiUpload(`/tickets/${id}/messages/${messageId}/attachments`, files); } catch (x) { setErr(`Nachricht gesendet, aber Anhang fehlgeschlagen: ${errMsg(x)}`); } }
void load();
} catch (x) { setErr(errMsg(x)); } finally { setBusy(false); }
}
async function patch(body: object, msg?: string) { setErr(''); setOk(''); try { await api('PATCH', `/tickets/${id}`, body); if (msg) setOk(msg); void load(); } catch (x) { setErr(errMsg(x)); } }
async function close() { setErr(''); try { await api('POST', `/tickets/${id}/close`); void load(); } catch (x) { setErr(errMsg(x)); } }
@ -40,10 +59,12 @@ export default function TicketDetail() {
<div className="card">
{t.messages.map((m) => (<div key={m.id} style={{ padding: '12px 0', borderBottom: '1px solid var(--border)' }}>
<div className="row between small muted"><span>{m.authorName} ({m.authorKind === 'staff' ? 'Personal' : 'Kunde'}){m.internalNote && <> · <span className="badge warn">nur intern</span></>}</span><span>{fmt(m.createdAt)}</span></div>
<p style={{ whiteSpace: 'pre-wrap', margin: '4px 0 0' }}>{m.body}</p></div>))}
<p style={{ whiteSpace: 'pre-wrap', margin: '4px 0 0' }}>{m.body}</p>
<AttachmentList ticketId={t.id} atts={m.attachments} /></div>))}
</div>
{t.status === 'closed' ? <p className="muted">Dieses Ticket ist geschlossen. Für neue Anliegen bitte ein neues Ticket eröffnen.</p> : t.canWrite && <form className="card" onSubmit={send}>
<Field id="body" label="Antwort"><textarea id="body" name="body" required rows={4} style={{ width: '100%' }} /></Field>
<Field id="files" label="Anhänge (optional)" hint={`Bilder oder PDF, höchstens ${MAX_FILES} Dateien, je 15 MB.`}><input id="files" name="files" type="file" accept={ALLOWED} multiple /></Field>
{staff && <label className="row small" style={{ marginBottom: 12 }}><input type="checkbox" name="internal" style={{ width: 20, minHeight: 20 }} /> Nur intern (für den Kunden nicht sichtbar)</label>}
<div className="row"><button className="btn primary" type="submit" disabled={busy}>Absenden</button>{!staff && canClose && <button className="btn" type="button" onClick={close}>Als erledigt schließen</button>}</div>
</form>}