Sven/muh
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add report templates and unify template storage

Browse Source
This commit is contained in:
Sven Carstensen
2026-03-13 19:20:54 +01:00
parent 5fd349dee2
commit e01afb9a10
13 changed files with 833 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/App.tsx
View File

@@ -14,6 +14,7 @@ import SearchFarmerPage from "./pages/SearchFarmerPage";
import SearchCalendarPage from "./pages/SearchCalendarPage";
import UserManagementPage from "./pages/UserManagementPage";
import InvoiceTemplatePage from "./pages/InvoiceTemplatePage";
import ReportTemplatePage from "./pages/ReportTemplatePage";
function ProtectedRoutes() {
const { user, ready } = useSession();
@@ -37,6 +38,7 @@ function ProtectedRoutes() {
<Route path="/samples/:sampleId/antibiogram" element={<AntibiogramPage />} />
<Route path="/samples/:sampleId/therapy" element={<TherapyPage />} />
<Route path="/invoice-template" element={<InvoiceTemplatePage />} />
<Route path="/report-template" element={<ReportTemplatePage />} />
<Route path="/admin" element={<Navigate to={isAdmin ? "/admin/landwirte" : "/admin/benutzer"} replace />} />
<Route path="/admin/benutzer" element={<UserManagementPage />} />
<Route path="/admin/landwirte" element={<AdministrationPage />} />

17
frontend/src/layout/AppShell.tsx
View File

@@ -5,7 +5,8 @@ const PAGE_TITLES: Record<string, string> = {
"/home": "Startseite",
"/samples/new": "Neuanlage einer Probe",
"/portal": "MUH-Portal",
"/invoice-template": "Rechnungstemplate",
"/invoice-template": "Rechnung",
"/report-template": "Bericht",
};
function resolvePageTitle(pathname: string) {
@@ -80,9 +81,17 @@ export default function AppShell() {
<div className="nav-group">
<div className="nav-group__label">Verwaltung</div>
<div className="nav-subnav">
<NavLink to="/invoice-template" className={({ isActive }) => `nav-sublink ${isActive ? "is-active" : ""}`}>
Rechnungstemplate
</NavLink>
<div className="nav-subgroup">
<div className="nav-subgroup__label">Vorlagen</div>
<div className="nav-subnav nav-subnav--nested">
<NavLink to="/invoice-template" className={({ isActive }) => `nav-sublink ${isActive ? "is-active" : ""}`}>
Rechnung
</NavLink>
<NavLink to="/report-template" className={({ isActive }) => `nav-sublink ${isActive ? "is-active" : ""}`}>
Bericht
</NavLink>
</div>
</div>
<NavLink to="/admin/landwirte" className={({ isActive }) => `nav-sublink ${isActive ? "is-active" : ""}`}>
Landwirte
</NavLink>

515
frontend/src/pages/InvoiceTemplatePage.tsx
View File

@@ -30,7 +30,7 @@ const MIN_LINE_THICKNESS = 1;
const MIN_LINE_LENGTH = 40;
const MIN_FONT_SIZE = 12;
const MAX_FONT_SIZE = 44;
const LOCKED_TEXT_PALETTE_IDS = new Set([
const INVOICE_LOCKED_TEXT_PALETTE_IDS = new Set([
"invoice-title",
"company-name",
"contact-person",
@@ -50,12 +50,39 @@ const LOCKED_TEXT_PALETTE_IDS = new Set([
"bic",
"footer",
]);
const REPORT_LOCKED_TEXT_PALETTE_IDS = new Set([
"report-title",
"report-farmer",
"report-cow",
"report-clinical-findings",
"report-treatment",
"report-examination-start",
"report-examination-end",
"report-sample-number",
"report-date",
"report-quarter-vl-label",
"report-quarter-vr-label",
"report-quarter-hl-label",
"report-quarter-hr-label",
"report-quarter-vl-result",
"report-quarter-vr-result",
"report-quarter-hl-result",
"report-quarter-hr-result",
"report-antibiogram-heading",
"report-antibiogram-summary",
"report-antibiogram-details",
"report-therapy-heading",
"report-therapy-text",
"report-misc-heading",
"report-misc-note",
"report-lab-note",
]);
type ElementKind = "text" | "line" | "image";
type LineOrientation = "horizontal" | "vertical";
type TextAlign = "left" | "center" | "right";
type FontWeight = 400 | 500 | 600 | 700;
type PaletteCategory = "master-data" | "customer-data" | "free-elements";
type PaletteCategory = string;
interface PaletteItem {
id: string;
@@ -118,6 +145,17 @@ interface InvoiceTemplateResponse {
updatedAt: string | null;
}
interface InvoiceTemplatePageProps {
buildStarterLayout?: (user: UserOption | null, paletteItems: PaletteItem[]) => TemplateElement[];
lockedTextPaletteIds?: ReadonlySet<string>;
paletteGroups?: Array<{ category: PaletteCategory; title: string }>;
paletteItems?: PaletteItem[];
pdfDownloadName?: string;
pdfPreviewTitle?: string;
templateApiPath?: string;
templateTitle?: string;
}
type DragPayload =
| {
kind: "palette";
@@ -158,7 +196,7 @@ const CP1252_MAP: Record<number, number> = {
8482: 153,
};
const PALETTE_ITEMS: PaletteItem[] = [
const INVOICE_PALETTE_ITEMS: PaletteItem[] = [
{
id: "invoice-title",
category: "master-data",
@@ -459,12 +497,338 @@ const PALETTE_ITEMS: PaletteItem[] = [
},
];
const PALETTE_GROUPS: Array<{ category: PaletteCategory; title: string }> = [
const INVOICE_PALETTE_GROUPS: Array<{ category: PaletteCategory; title: string }> = [
{ category: "master-data", title: "Stammdaten" },
{ category: "customer-data", title: "Kundendaten" },
{ category: "free-elements", title: "Freie Elemente" },
];
const REPORT_PALETTE_ITEMS: PaletteItem[] = [
{
id: "report-title",
category: "report-header",
label: "Berichtstitel",
description: "Titel der Probenauswertung",
width: 330,
fontSize: 28,
fontWeight: 700,
textAlign: "left",
defaultContent: () => "Milchprobenauswertung",
},
{
id: "report-sample-number",
category: "report-header",
label: "Probe",
description: "Probenummer",
width: 120,
fontSize: 16,
fontWeight: 600,
textAlign: "left",
defaultContent: () => "Probe: 10307",
},
{
id: "report-date",
category: "report-header",
label: "Datum",
description: "Berichtsdatum",
width: 120,
fontSize: 16,
fontWeight: 400,
textAlign: "left",
defaultContent: () => `Datum:\n${new Intl.DateTimeFormat("de-DE", { dateStyle: "medium" }).format(new Date())}`,
},
{
id: "report-farmer",
category: "report-data",
label: "Landwirt",
description: "Name des Landwirts",
width: 270,
fontSize: 16,
fontWeight: 600,
textAlign: "left",
defaultContent: () => "Landwirt: VoS, Dirk Schwissel",
},
{
id: "report-cow",
category: "report-data",
label: "Kuh",
description: "Kuh- oder Tiernummer",
width: 220,
fontSize: 16,
fontWeight: 600,
textAlign: "left",
defaultContent: () => "Kuh: 36",
},
{
id: "report-clinical-findings",
category: "report-data",
label: "Klinische Untersuchung",
description: "Klinischer Befund",
width: 320,
fontSize: 16,
fontWeight: 600,
textAlign: "left",
defaultContent: () => "Klinische Untersuchung:",
},
{
id: "report-treatment",
category: "report-data",
label: "Vorbehandelt",
description: "Vorbehandlung oder Medikation",
width: 340,
fontSize: 16,
fontWeight: 600,
textAlign: "left",
defaultContent: () => "Vorbehandelt mit: Ubrolexin; Betamox",
},
{
id: "report-examination-start",
category: "report-data",
label: "Untersuchungsbeginn",
description: "Startdatum der Untersuchung",
width: 280,
fontSize: 16,
fontWeight: 400,
textAlign: "left",
defaultContent: () => "Untersuchungsbeginn: 11.03.2026",
},
{
id: "report-examination-end",
category: "report-data",
label: "Untersuchungsende",
description: "Enddatum der Untersuchung",
width: 260,
fontSize: 16,
fontWeight: 400,
textAlign: "left",
defaultContent: () => "Untersuchungsende: 13.03.2026",
},
{
id: "report-quarter-vl-label",
category: "report-findings",
label: "VL",
description: "Linkes Vorderviertel",
width: 32,
fontSize: 16,
fontWeight: 700,
textAlign: "center",
defaultContent: () => "VL",
},
{
id: "report-quarter-vr-label",
category: "report-findings",
label: "VR",
description: "Rechtes Vorderviertel",
width: 32,
fontSize: 16,
fontWeight: 700,
textAlign: "center",
defaultContent: () => "VR",
},
{
id: "report-quarter-hl-label",
category: "report-findings",
label: "HL",
description: "Linkes Hinterviertel",
width: 32,
fontSize: 16,
fontWeight: 700,
textAlign: "center",
defaultContent: () => "HL",
},
{
id: "report-quarter-hr-label",
category: "report-findings",
label: "HR",
description: "Rechtes Hinterviertel",
width: 32,
fontSize: 16,
fontWeight: 700,
textAlign: "center",
defaultContent: () => "HR",
},
{
id: "report-quarter-vl-result",
category: "report-findings",
label: "Befund VL",
description: "Befundtext fuer VL",
width: 120,
fontSize: 15,
fontWeight: 400,
textAlign: "left",
defaultContent: () => "kein bakt.\nWachstum",
},
{
id: "report-quarter-vr-result",
category: "report-findings",
label: "Befund VR",
description: "Befundtext fuer VR",
width: 120,
fontSize: 15,
fontWeight: 400,
textAlign: "left",
defaultContent: () => "KNS",
},
{
id: "report-quarter-hl-result",
category: "report-findings",
label: "Befund HL",
description: "Befundtext fuer HL",
width: 120,
fontSize: 15,
fontWeight: 400,
textAlign: "left",
defaultContent: () => "kein bakt.\nWachstum",
},
{
id: "report-quarter-hr-result",
category: "report-findings",
label: "Befund HR",
description: "Befundtext fuer HR",
width: 120,
fontSize: 15,
fontWeight: 400,
textAlign: "left",
defaultContent: () => "kein bakt.\nWachstum",
},
{
id: "report-antibiogram-heading",
category: "report-sections",
label: "Antibiogramm Titel",
description: "Ueberschrift des Antibiogramms",
width: 170,
fontSize: 18,
fontWeight: 700,
textAlign: "left",
defaultContent: () => "Antibiogramm 4/4",
},
{
id: "report-antibiogram-summary",
category: "report-sections",
label: "Antibiogramm Ergebnis",
description: "Kurzfassung zum Viertel",
width: 520,
fontSize: 15,
fontWeight: 600,
textAlign: "left",
defaultContent: () => "VR (sensibel): Penicillin, Cefalexin ...",
},
{
id: "report-antibiogram-details",
category: "report-sections",
label: "Antibiogramm Details",
description: "Ausfuehrliche Antibiogramm-Liste",
width: 610,
fontSize: 15,
fontWeight: 400,
textAlign: "left",
defaultContent: () =>
"Cefquinom, Enrofloxacin, Sulfadoxin Trimethoprim, Amoxicillin Clavulansaeure, Oxacillin, Ampicillin, Sulfadoxin Trimethoprim",
},
{
id: "report-therapy-heading",
category: "report-sections",
label: "Empfehlung/Therapie",
description: "Ueberschrift der Therapieempfehlung",
width: 230,
fontSize: 17,
fontWeight: 700,
textAlign: "left",
defaultContent: () => "Empfehlung/Therapie:",
},
{
id: "report-therapy-text",
category: "report-sections",
label: "Therapietext",
description: "Empfehlungstext",
width: 400,
fontSize: 16,
fontWeight: 400,
textAlign: "left",
defaultContent: () => "weiter wie begonnen",
},
{
id: "report-misc-heading",
category: "report-sections",
label: "Sonstiges",
description: "Ueberschrift fuer Hinweise",
width: 140,
fontSize: 18,
fontWeight: 700,
textAlign: "left",
defaultContent: () => "Sonstiges",
},
{
id: "report-misc-note",
category: "report-sections",
label: "Hinweis",
description: "Allgemeiner Hinweistext",
width: 620,
fontSize: 15,
fontWeight: 400,
textAlign: "left",
defaultContent: () =>
"· Bei Rueckfragen setzen Sie sich bitte mit Ihrem behandelnden Tierarzt in Verbindung.",
},
{
id: "report-lab-note",
category: "report-sections",
label: "Laborvermerk",
description: "Interner Vermerk",
width: 220,
fontSize: 15,
fontWeight: 400,
textAlign: "left",
defaultContent: () => "Interner Vermerk: Labor",
},
{
id: "free-text",
category: "free-elements",
label: "Freitext",
description: "Beliebig editierbarer Text",
width: 220,
fontSize: 16,
fontWeight: 400,
textAlign: "left",
defaultContent: () => "Freitext",
},
{
id: "line",
category: "free-elements",
label: "Linie",
description: "Linie mit umschaltbarer Ausrichtung",
kind: "line",
width: 260,
height: 3,
fontSize: 16,
fontWeight: 400,
textAlign: "left",
lineOrientation: "horizontal",
defaultContent: () => "",
},
{
id: "image",
category: "free-elements",
label: "Bild",
description: "Logo, Kopfgrafik oder Gestaltungselement",
kind: "image",
width: 180,
height: 120,
fontSize: 16,
fontWeight: 400,
textAlign: "left",
defaultContent: () => "Bild",
},
];
const REPORT_PALETTE_GROUPS: Array<{ category: PaletteCategory; title: string }> = [
{ category: "report-header", title: "Kopfbereich" },
{ category: "report-data", title: "Probendaten" },
{ category: "report-findings", title: "Befunde" },
{ category: "report-sections", title: "Abschnitte" },
{ category: "free-elements", title: "Freie Elemente" },
];
function clamp(value: number, minimum: number, maximum: number) {
return Math.min(Math.max(value, minimum), maximum);
}
@@ -915,12 +1279,12 @@ function normalizeElement(element: TemplateElement): TemplateElement {
};
}
function findPaletteItem(paletteId: string) {
return PALETTE_ITEMS.find((entry) => entry.id === paletteId) ?? null;
function findPaletteItem(paletteItems: PaletteItem[], paletteId: string) {
return paletteItems.find((entry) => entry.id === paletteId) ?? null;
}
function requirePaletteItem(paletteId: string) {
const paletteItem = findPaletteItem(paletteId);
function requirePaletteItem(paletteItems: PaletteItem[], paletteId: string) {
const paletteItem = findPaletteItem(paletteItems, paletteId);
if (!paletteItem) {
throw new Error(`Palette item ${paletteId} is not configured.`);
}
@@ -937,8 +1301,11 @@ function getPalettePreviewText(paletteItem: PaletteItem, user: UserOption | null
return paletteItem.defaultContent(user);
}
function isElementContentEditable(element: Pick<TemplateElement, "kind" | "paletteId">) {
return element.kind === "text" && !LOCKED_TEXT_PALETTE_IDS.has(element.paletteId);
function isElementContentEditable(
element: Pick<TemplateElement, "kind" | "paletteId">,
lockedTextPaletteIds: ReadonlySet<string>,
) {
return element.kind === "text" && !lockedTextPaletteIds.has(element.paletteId);
}
function createElementFromPalette(
@@ -966,18 +1333,66 @@ function createElementFromPalette(
});
}
function createStarterLayout(user: UserOption | null) {
function createInvoiceStarterLayout(user: UserOption | null, paletteItems: PaletteItem[]) {
return [
createElementFromPalette(requirePaletteItem("company-name"), user, { x: 56, y: 56 }),
createElementFromPalette(requirePaletteItem("street"), user, { x: 56, y: 104 }),
createElementFromPalette(requirePaletteItem("house-number"), user, { x: 288, y: 104 }),
createElementFromPalette(requirePaletteItem("postal-code"), user, { x: 56, y: 132 }),
createElementFromPalette(requirePaletteItem("city"), user, { x: 164, y: 132 }),
createElementFromPalette(requirePaletteItem("invoice-title"), user, { x: 56, y: 238 }),
createElementFromPalette(requirePaletteItem("invoice-date"), user, { x: 538, y: 64 }),
createElementFromPalette(requirePaletteItem("invoice-number"), user, { x: 538, y: 96 }),
createElementFromPalette(requirePaletteItem("amount"), user, { x: 558, y: 432 }),
createElementFromPalette(requirePaletteItem("footer"), user, { x: 56, y: 1008 }),
createElementFromPalette(requirePaletteItem(paletteItems, "company-name"), user, { x: 56, y: 56 }),
createElementFromPalette(requirePaletteItem(paletteItems, "street"), user, { x: 56, y: 104 }),
createElementFromPalette(requirePaletteItem(paletteItems, "house-number"), user, { x: 288, y: 104 }),
createElementFromPalette(requirePaletteItem(paletteItems, "postal-code"), user, { x: 56, y: 132 }),
createElementFromPalette(requirePaletteItem(paletteItems, "city"), user, { x: 164, y: 132 }),
createElementFromPalette(requirePaletteItem(paletteItems, "invoice-title"), user, { x: 56, y: 238 }),
createElementFromPalette(requirePaletteItem(paletteItems, "invoice-date"), user, { x: 538, y: 64 }),
createElementFromPalette(requirePaletteItem(paletteItems, "invoice-number"), user, { x: 538, y: 96 }),
createElementFromPalette(requirePaletteItem(paletteItems, "amount"), user, { x: 558, y: 432 }),
createElementFromPalette(requirePaletteItem(paletteItems, "footer"), user, { x: 56, y: 1008 }),
];
}
function createReportStarterLayout(user: UserOption | null, paletteItems: PaletteItem[]) {
const horizontalLine = (x: number, y: number, width: number) =>
normalizeElement({
...createElementFromPalette(requirePaletteItem(paletteItems, "line"), user, { x, y }),
width,
});
const verticalLine = (x: number, y: number, height: number) =>
normalizeElement({
...createElementFromPalette(requirePaletteItem(paletteItems, "line"), user, { x, y }),
height,
lineOrientation: "vertical",
width: 3,
});
return [
createElementFromPalette(requirePaletteItem(paletteItems, "report-title"), user, { x: 56, y: 108 }),
createElementFromPalette(requirePaletteItem(paletteItems, "report-farmer"), user, { x: 56, y: 154 }),
createElementFromPalette(requirePaletteItem(paletteItems, "report-cow"), user, { x: 56, y: 186 }),
createElementFromPalette(requirePaletteItem(paletteItems, "report-clinical-findings"), user, { x: 56, y: 218 }),
createElementFromPalette(requirePaletteItem(paletteItems, "report-treatment"), user, { x: 56, y: 250 }),
createElementFromPalette(requirePaletteItem(paletteItems, "report-examination-start"), user, { x: 56, y: 282 }),
createElementFromPalette(requirePaletteItem(paletteItems, "report-examination-end"), user, { x: 56, y: 314 }),
createElementFromPalette(requirePaletteItem(paletteItems, "report-sample-number"), user, { x: 430, y: 108 }),
createElementFromPalette(requirePaletteItem(paletteItems, "report-date"), user, { x: 572, y: 108 }),
createElementFromPalette(requirePaletteItem(paletteItems, "report-quarter-vl-label"), user, { x: 538, y: 206 }),
createElementFromPalette(requirePaletteItem(paletteItems, "report-quarter-vr-label"), user, { x: 628, y: 206 }),
createElementFromPalette(requirePaletteItem(paletteItems, "report-quarter-hl-label"), user, { x: 538, y: 236 }),
createElementFromPalette(requirePaletteItem(paletteItems, "report-quarter-hr-label"), user, { x: 628, y: 236 }),
createElementFromPalette(requirePaletteItem(paletteItems, "report-quarter-vl-result"), user, { x: 430, y: 168 }),
createElementFromPalette(requirePaletteItem(paletteItems, "report-quarter-vr-result"), user, { x: 618, y: 184 }),
createElementFromPalette(requirePaletteItem(paletteItems, "report-quarter-hl-result"), user, { x: 430, y: 272 }),
createElementFromPalette(requirePaletteItem(paletteItems, "report-quarter-hr-result"), user, { x: 618, y: 272 }),
horizontalLine(520, 254, 170),
verticalLine(606, 196, 106),
createElementFromPalette(requirePaletteItem(paletteItems, "report-antibiogram-heading"), user, { x: 56, y: 426 }),
createElementFromPalette(requirePaletteItem(paletteItems, "report-antibiogram-summary"), user, { x: 56, y: 458 }),
createElementFromPalette(requirePaletteItem(paletteItems, "report-antibiogram-details"), user, { x: 56, y: 490 }),
horizontalLine(56, 396, 646),
horizontalLine(56, 548, 646),
createElementFromPalette(requirePaletteItem(paletteItems, "report-therapy-heading"), user, { x: 56, y: 574 }),
createElementFromPalette(requirePaletteItem(paletteItems, "report-therapy-text"), user, { x: 292, y: 574 }),
horizontalLine(56, 628, 646),
createElementFromPalette(requirePaletteItem(paletteItems, "report-misc-heading"), user, { x: 56, y: 656 }),
createElementFromPalette(requirePaletteItem(paletteItems, "report-misc-note"), user, { x: 56, y: 702 }),
createElementFromPalette(requirePaletteItem(paletteItems, "report-lab-note"), user, { x: 56, y: 754 }),
];
}
@@ -1130,7 +1545,16 @@ function readDragPayload(event: DragEvent<HTMLElement>): DragPayload | null {
}
}
export default function InvoiceTemplatePage() {
export default function InvoiceTemplatePage({
buildStarterLayout = createInvoiceStarterLayout,
lockedTextPaletteIds = INVOICE_LOCKED_TEXT_PALETTE_IDS,
paletteGroups = INVOICE_PALETTE_GROUPS,
paletteItems = INVOICE_PALETTE_ITEMS,
pdfDownloadName = "rechnung-template.pdf",
pdfPreviewTitle = "PDF-Vorschau Rechnungsvorlage",
templateApiPath = "/session/invoice-template",
templateTitle = "Rechnungsvorlage",
}: InvoiceTemplatePageProps) {
const { user } = useSession();
const pageRef = useRef<HTMLDivElement | null>(null);
const cardRef = useRef<HTMLElement | null>(null);
@@ -1140,7 +1564,9 @@ export default function InvoiceTemplatePage() {
const mouseDragCleanupRef = useRef<(() => void) | null>(null);
const moveOffsetRef = useRef<{ x: number; y: number } | null>(null);
const [elements, setElements] = useState<TemplateElement[]>(() => createStarterLayout(user));
const [elements, setElements] = useState<TemplateElement[]>(() =>
buildStarterLayout(user, paletteItems),
);
const [selectedElementId, setSelectedElementId] = useState<string | null>(null);
const [isCanvasActive, setIsCanvasActive] = useState(false);
const [draggingElementId, setDraggingElementId] = useState<string | null>(null);
@@ -1163,7 +1589,7 @@ export default function InvoiceTemplatePage() {
const selectedElement = elements.find((entry) => entry.id === selectedElementId) ?? null;
const selectedElementHeight = selectedElement ? getElementHeight(selectedElement) : null;
const selectedElementContentEditable = selectedElement
? isElementContentEditable(selectedElement)
? isElementContentEditable(selectedElement, lockedTextPaletteIds)
: false;
const selectedElementMinimumWidth = selectedElement
? getMinimumWidthForElement(selectedElement.kind, selectedElement.lineOrientation)
@@ -1176,10 +1602,11 @@ export default function InvoiceTemplatePage() {
)
: MIN_MEDIA_HEIGHT;
const templateTimestampLabel = formatTemplateTimestamp(templateUpdatedAt);
const emptyCanvasMessage = `Ziehen Sie links ein Element auf diese Fläche, um Ihre ${templateTitle} zu starten.`;
useEffect(() => {
if (!user) {
const starterLayout = createStarterLayout(null);
const starterLayout = buildStarterLayout(null, paletteItems);
setElements(starterLayout);
setSelectedElementId(starterLayout[0]?.id ?? null);
setResizingElementId(null);
@@ -1194,7 +1621,7 @@ export default function InvoiceTemplatePage() {
setTemplateError(null);
setIsTemplateLoading(true);
void apiGet<InvoiceTemplateResponse>("/session/invoice-template")
void apiGet<InvoiceTemplateResponse>(templateApiPath)
.then((response) => {
if (cancelled) {
return;
@@ -1203,7 +1630,7 @@ export default function InvoiceTemplatePage() {
setIsTemplateApiAvailable(true);
setTemplateUpdatedAt(response.updatedAt);
if (!response.stored) {
const starterLayout = createStarterLayout(user);
const starterLayout = buildStarterLayout(user, paletteItems);
setElements(starterLayout);
setSelectedElementId(starterLayout[0]?.id ?? null);
setResizingElementId(null);
@@ -1222,7 +1649,7 @@ export default function InvoiceTemplatePage() {
.catch((error) => {
if (!cancelled) {
if (error instanceof ApiError && error.status === 404) {
const starterLayout = createStarterLayout(user);
const starterLayout = buildStarterLayout(user, paletteItems);
setElements(starterLayout);
setSelectedElementId(starterLayout[0]?.id ?? null);
setResizingElementId(null);
@@ -1243,7 +1670,7 @@ export default function InvoiceTemplatePage() {
return () => {
cancelled = true;
};
}, [user]);
}, [buildStarterLayout, paletteItems, templateApiPath, user]);
useEffect(() => {
if (selectedElementId && elements.some((entry) => entry.id === selectedElementId)) {
@@ -1390,7 +1817,7 @@ export default function InvoiceTemplatePage() {
entry.id === elementId
? normalizeElement({
...entry,
...(!isElementContentEditable(entry) &&
...(!isElementContentEditable(entry, lockedTextPaletteIds) &&
Object.prototype.hasOwnProperty.call(patch, "content")
? { ...patch, content: entry.content }
: patch),
@@ -1408,7 +1835,7 @@ export default function InvoiceTemplatePage() {
}
function placePaletteElement(paletteId: string, clientX: number, clientY: number) {
const paletteItem = findPaletteItem(paletteId);
const paletteItem = findPaletteItem(paletteItems, paletteId);
const canvasElement = canvasRef.current;
if (!paletteItem || !canvasElement) {
return;
@@ -1481,7 +1908,7 @@ export default function InvoiceTemplatePage() {
function handleResetToStarter() {
mouseDragCleanupRef.current?.();
const starterLayout = createStarterLayout(user);
const starterLayout = buildStarterLayout(user, paletteItems);
setElements(starterLayout);
setSelectedElementId(starterLayout[0]?.id ?? null);
setResizingElementId(null);
@@ -1523,7 +1950,7 @@ export default function InvoiceTemplatePage() {
setIsTemplateSaving(true);
try {
const response = await apiPut<InvoiceTemplateResponse>("/session/invoice-template", {
const response = await apiPut<InvoiceTemplateResponse>(templateApiPath, {
elements,
});
const savedElements = normalizeTemplateElements(response.elements);
@@ -1808,14 +2235,14 @@ export default function InvoiceTemplatePage() {
</div>
<div className="invoice-template__palette">
{PALETTE_GROUPS.map((group) => (
{paletteGroups.map((group) => (
<section key={group.category} className="invoice-template__palette-group">
<div className="invoice-template__palette-group-header">
<h5>{group.title}</h5>
</div>
<div className="invoice-template__palette-grid">
{PALETTE_ITEMS.filter((item) => item.category === group.category).map((item) => (
{paletteItems.filter((item) => item.category === group.category).map((item) => (
<button
key={item.id}
type="button"
@@ -1844,7 +2271,7 @@ export default function InvoiceTemplatePage() {
<div className="invoice-template__canvas-column">
<div className="invoice-template__canvas-header">
<div>
<h4>Rechnungsvorlage</h4>
<h4>{templateTitle}</h4>
<span className="invoice-template__panel-note">
{isTemplateLoading
? "Gespeicherte Vorlage wird geladen..."
@@ -1931,10 +2358,7 @@ export default function InvoiceTemplatePage() {
</button>
))
) : (
<div className="invoice-template__canvas-empty">
Ziehen Sie links ein Element auf diese Fläche, um Ihr Rechnungstemplate zu
starten.
</div>
<div className="invoice-template__canvas-empty">{emptyCanvasMessage}</div>
)}
</div>
</div>
@@ -2174,7 +2598,7 @@ export default function InvoiceTemplatePage() {
<div className="dialog__actions">
<a
href={pdfPreviewUrl}
download="rechnung-template.pdf"
download={pdfDownloadName}
className="secondary-button"
>
PDF herunterladen
@@ -2193,7 +2617,7 @@ export default function InvoiceTemplatePage() {
<iframe
className="dialog__frame"
src={pdfPreviewUrl}
title="PDF-Vorschau Rechnungstemplate"
title={pdfPreviewTitle}
/>
</div>
</div>
@@ -2202,3 +2626,10 @@ export default function InvoiceTemplatePage() {
</div>
);
}
export {
REPORT_LOCKED_TEXT_PALETTE_IDS,
REPORT_PALETTE_GROUPS,
REPORT_PALETTE_ITEMS,
createReportStarterLayout,
};

21
frontend/src/pages/ReportTemplatePage.tsx Normal file
View File

@@ -0,0 +1,21 @@
import InvoiceTemplatePage, {
REPORT_LOCKED_TEXT_PALETTE_IDS,
REPORT_PALETTE_GROUPS,
REPORT_PALETTE_ITEMS,
createReportStarterLayout,
} from "./InvoiceTemplatePage";
export default function ReportTemplatePage() {
return (
<InvoiceTemplatePage
buildStarterLayout={createReportStarterLayout}
lockedTextPaletteIds={REPORT_LOCKED_TEXT_PALETTE_IDS}
paletteGroups={REPORT_PALETTE_GROUPS}
paletteItems={REPORT_PALETTE_ITEMS}
pdfDownloadName="bericht-template.pdf"
pdfPreviewTitle="PDF-Vorschau Berichtsvorlage"
templateApiPath="/session/report-template"
templateTitle="Berichtsvorlage"
/>
);
}

17
frontend/src/styles/global.css
View File

@@ -137,6 +137,23 @@ a {
padding-left: 14px;
}
.nav-subgroup {
display: grid;
gap: 6px;
}
.nav-subgroup__label {
padding: 4px 14px 0;
color: rgba(248, 243, 237, 0.56);
font-size: 0.78rem;
font-weight: 600;
}
.nav-subnav--nested {
gap: 6px;
padding-left: 12px;
}
.nav-sublink {
padding: 10px 14px;
border-radius: 14px;