feat(L1-L3): Dokumente-Generator — Briefpapier+Block-System+Drag&Drop-Editor+Renderer
Check Cross-Plugin Imports / check (push) Has been cancelled
Check Cross-Plugin Imports / check (push) Has been cancelled
- Briefpapier (letterheads): Seiten-Setup (A4/A5/Letter, Ränder), Header/Footer-Blöcke, Wasserzeichen, Logo-Upload (DocumentAsset, data:-URI-only) - Druckvorlagen (print_templates): Block-Komposition mit Briefpapier-Ref + entity_type - Block-Registry (document_blocks.py): text/image/shape(line/rect/circle)/table/spacer/divider/placeholder/pagebreak + Modul-Beiträge via document_blocks()-Contract - Renderer (document_renderer.py): Blocks→HTML→PDF via WeasyPrint (SSRF-Sandbox data:-URI-only), @page-Frame mit running header/footer, Placeholder-Beispiel-Defaults gegen StrictUndefined - Contract-Beitrag contacts: document_placeholders/document_data (#359-Muster wie importexport_entities) - 13 neue Endpoints in documents.py: Letterhead-CRUD, Template-CRUD, Assets, document-blocks, document-placeholders, preview (HTML), render (PDF) - Migration: Plugin-SQL 0003 (idempotent) + Alembic 0143 (Dual-Path, RLS fail-closed crm_api) - Frontend: api/documents.ts, Settings→Dokumente (settings_pages), BlockEditor (@dnd-kit Palette/Canvas/Config/Live-Preview-iframe), LetterheadEditor, PrintTemplateEditor, DocumentGenerationDialog (global, ContactDetailPage-Integration) - i18n de/en, api-documentation.md, plugin-development-guide.md, PROGRESS.md Verifikation: 32/32 neue Tests + 9/9 Regressionen, tsc exit 0, Build OK 2.79s, Alembic-Fresh-DB 0143 mit RLS bewiesen, ruff clean
This commit is contained in:
Agent Zero
@@ -0,0 +1,225 @@
|
||||
/**
|
||||
* Document Settings — Verwaltungsoberfläche für den Dokumente-Generator
|
||||
* (Phase L): Briefpapiere + Druckvorlagen mit Drag&Drop-Block-Editor.
|
||||
*/
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { FileText, Layers } from 'lucide-react';
|
||||
import { Card } from '@/components/ui/Card';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { Skeleton } from '@/components/ui/Skeleton';
|
||||
import { useToast } from '@/components/ui/Toast';
|
||||
import {
|
||||
useLetterheads,
|
||||
usePrintTemplates,
|
||||
useCreateLetterhead,
|
||||
useDeleteLetterhead,
|
||||
useCreatePrintTemplate,
|
||||
useDeletePrintTemplate,
|
||||
} from '@/api/documents';
|
||||
import { LetterheadEditor } from '@/components/documents/LetterheadEditor';
|
||||
import { PrintTemplateEditor } from '@/components/documents/PrintTemplateEditor';
|
||||
import type { Letterhead, PrintTemplate } from '@/api/documents';
|
||||
|
||||
export function DocumentSettingsPage() {
|
||||
const { t } = useTranslation();
|
||||
const toast = useToast();
|
||||
const [tab, setTab] = useState<'letterheads' | 'templates'>('letterheads');
|
||||
const [editingLetterhead, setEditingLetterhead] = useState<Letterhead | 'new' | null>(null);
|
||||
const [editingTemplate, setEditingTemplate] = useState<PrintTemplate | 'new' | null>(null);
|
||||
|
||||
const { data: letterheads = [], isLoading: lhLoading } = useLetterheads();
|
||||
const { data: templates = [], isLoading: tplLoading } = usePrintTemplates();
|
||||
const createLh = useCreateLetterhead();
|
||||
const deleteLh = useDeleteLetterhead();
|
||||
const createTpl = useCreatePrintTemplate();
|
||||
const deleteTpl = useDeletePrintTemplate();
|
||||
|
||||
return (
|
||||
<div className="max-w-6xl mx-auto space-y-6" data-testid="document-settings-page">
|
||||
<div className="flex items-center gap-3">
|
||||
<FileText className="w-6 h-6 text-primary-600" aria-hidden="true" />
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-secondary-900">{t('settings.documents', 'Dokumente')}</h1>
|
||||
<p className="text-sm text-secondary-500">
|
||||
{t('documents.settings.subtitle', 'Briefpapiere und Druckvorlagen mit Drag&Drop-Editor verwalten')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2" role="tablist" aria-label={t('documents.settings.tabs', 'Dokumente-Bereiche')}>
|
||||
<button
|
||||
role="tab"
|
||||
aria-selected={tab === 'letterheads'}
|
||||
onClick={() => setTab('letterheads')}
|
||||
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
|
||||
tab === 'letterheads' ? 'bg-primary-100 text-primary-700' : 'text-secondary-600 hover:bg-secondary-100'
|
||||
}`}
|
||||
data-testid="documents-tab-letterheads"
|
||||
>
|
||||
{t('documents.letterheads', 'Briefpapiere')} ({letterheads.length})
|
||||
</button>
|
||||
<button
|
||||
role="tab"
|
||||
aria-selected={tab === 'templates'}
|
||||
onClick={() => setTab('templates')}
|
||||
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
|
||||
tab === 'templates' ? 'bg-primary-100 text-primary-700' : 'text-secondary-600 hover:bg-secondary-100'
|
||||
}`}
|
||||
data-testid="documents-tab-templates"
|
||||
>
|
||||
{t('documents.printTemplates', 'Druckvorlagen')} ({templates.length})
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{tab === 'letterheads' && (
|
||||
<Card className="p-4">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-lg font-semibold text-secondary-900">{t('documents.letterheads', 'Briefpapiere')}</h2>
|
||||
<Button
|
||||
size="sm"
|
||||
icon={<FileText className="w-4 h-4" aria-hidden="true" />}
|
||||
onClick={() => setEditingLetterhead('new')}
|
||||
data-testid="documents-create-letterhead"
|
||||
>
|
||||
{t('documents.letterhead.create', 'Neues Briefpapier')}
|
||||
</Button>
|
||||
</div>
|
||||
{lhLoading ? (
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-12 w-full" />
|
||||
<Skeleton className="h-12 w-full" />
|
||||
</div>
|
||||
) : letterheads.length === 0 ? (
|
||||
<p className="text-sm text-secondary-500 py-8 text-center">
|
||||
{t('documents.letterhead.empty', 'Noch kein Briefpapier angelegt.')}
|
||||
</p>
|
||||
) : (
|
||||
<ul className="divide-y divide-secondary-100" data-testid="documents-letterhead-list">
|
||||
{letterheads.map((lh) => (
|
||||
<li key={lh.id} className="flex items-center justify-between py-3 gap-3">
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium text-secondary-900 truncate">{lh.name}</span>
|
||||
{lh.is_default && (
|
||||
<span className="text-xs px-2 py-0.5 rounded-full bg-primary-100 text-primary-700">
|
||||
{t('documents.letterhead.default', 'Standard')}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs text-secondary-500 truncate">{lh.description || '—'}</p>
|
||||
</div>
|
||||
<div className="flex gap-2 shrink-0">
|
||||
<Button size="sm" variant="secondary" onClick={() => setEditingLetterhead(lh)}>
|
||||
{t('common.edit', 'Bearbeiten')}
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="danger"
|
||||
onClick={async () => {
|
||||
if (!window.confirm(t('documents.letterhead.deleteConfirm', 'Briefpapier wirklich löschen?'))) return;
|
||||
try {
|
||||
await deleteLh.mutateAsync(lh.id);
|
||||
toast.success(t('documents.letterhead.deleted', 'Briefpapier gelöscht'));
|
||||
} catch (e) {
|
||||
toast.error(t('common.error', 'Fehler beim Löschen'));
|
||||
}
|
||||
}}
|
||||
aria-label={t('common.delete', 'Löschen')}
|
||||
>
|
||||
{t('common.delete', 'Löschen')}
|
||||
</Button>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{tab === 'templates' && (
|
||||
<Card className="p-4">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-lg font-semibold text-secondary-900">{t('documents.printTemplates', 'Druckvorlagen')}</h2>
|
||||
<Button
|
||||
size="sm"
|
||||
icon={<Layers className="w-4 h-4" aria-hidden="true" />}
|
||||
onClick={() => setEditingTemplate('new')}
|
||||
data-testid="documents-create-template"
|
||||
>
|
||||
{t('documents.template.create', 'Neue Vorlage')}
|
||||
</Button>
|
||||
</div>
|
||||
{tplLoading ? (
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-12 w-full" />
|
||||
<Skeleton className="h-12 w-full" />
|
||||
</div>
|
||||
) : templates.length === 0 ? (
|
||||
<p className="text-sm text-secondary-500 py-8 text-center">
|
||||
{t('documents.template.empty', 'Noch keine Druckvorlage angelegt.')}
|
||||
</p>
|
||||
) : (
|
||||
<ul className="divide-y divide-secondary-100" data-testid="documents-template-list">
|
||||
{templates.map((tpl) => {
|
||||
const lh = letterheads.find((l) => l.id === tpl.letterhead_id);
|
||||
return (
|
||||
<li key={tpl.id} className="flex items-center justify-between py-3 gap-3">
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium text-secondary-900 truncate">{tpl.name}</span>
|
||||
<span className="text-xs px-2 py-0.5 rounded-full bg-secondary-100 text-secondary-600">
|
||||
{tpl.entity_type}
|
||||
</span>
|
||||
<span className="text-xs text-secondary-400">{tpl.blocks.length} Blöcke</span>
|
||||
</div>
|
||||
<p className="text-xs text-secondary-500 truncate">
|
||||
{lh ? `${t('documents.letterhead', 'Briefpapier')}: ${lh.name}` : t('documents.template.noLetterhead', 'Ohne Briefpapier')}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-2 shrink-0">
|
||||
<Button size="sm" variant="secondary" onClick={() => setEditingTemplate(tpl)}>
|
||||
{t('common.edit', 'Bearbeiten')}
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="danger"
|
||||
onClick={async () => {
|
||||
if (!window.confirm(t('documents.template.deleteConfirm', 'Vorlage wirklich löschen?'))) return;
|
||||
try {
|
||||
await deleteTpl.mutateAsync(tpl.id);
|
||||
toast.success(t('documents.template.deleted', 'Vorlage gelöscht'));
|
||||
} catch (e) {
|
||||
toast.error(t('common.error', 'Fehler beim Löschen'));
|
||||
}
|
||||
}}
|
||||
aria-label={t('common.delete', 'Löschen')}
|
||||
>
|
||||
{t('common.delete', 'Löschen')}
|
||||
</Button>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{editingLetterhead && (
|
||||
<LetterheadEditor
|
||||
letterhead={editingLetterhead === 'new' ? null : editingLetterhead}
|
||||
onClose={() => setEditingLetterhead(null)}
|
||||
/>
|
||||
)}
|
||||
{editingTemplate && (
|
||||
<PrintTemplateEditor
|
||||
template={editingTemplate === 'new' ? null : editingTemplate}
|
||||
letterheads={letterheads}
|
||||
onClose={() => setEditingTemplate(null)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user