Maximilian Stubhan
f14f1cb8df
Six divisions, each with its departments beside it, ran off the edge of the sheet. The cause was structural, not cosmetic: every level spread horizontally, so width multiplied with depth. Six divisions times three departments is eighteen boxes across a landscape A4 — about two millimetres each, if they had fitted at all, which they did not. They overlapped and were clipped at the margin. Now only one level spreads sideways. The divisions stand in a row and everything below them hangs lengthwise off a vertical line, so width is the number of divisions and nothing else. Depth costs height instead, and on a landscape page height is what there is to spare. What still overhangs is scaled down as a whole. The sheet in the preview now carries the print area's exact dimensions rather than growing with its contents, so the fit is measured against the real page: what you see is what the printer gets. If a sheet has to shrink below 55% to fit, it says so and points at A3, instead of quietly producing something nobody can read. With names switched on, each department gets its own sheet — a whole division with every name was never going to be legible on one page — and long name lists set in two columns so the box grows sideways rather than pushing the scale down. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
594 lines
24 KiB
TypeScript
594 lines
24 KiB
TypeScript
"use client";
|
|
|
|
import { ChevronRight, Printer } from "lucide-react";
|
|
import Link from "next/link";
|
|
import { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
|
|
import { Button } from "@/components/ui/Button";
|
|
import { fmtDate } from "@/lib/format";
|
|
import type { PrintModel, PrintPerson, PrintUnit } from "@/lib/orgchart-print";
|
|
|
|
// Auswahl, dann Vorschau, dann Papier.
|
|
//
|
|
// Drei Entscheidungen prägen das hier:
|
|
//
|
|
// **Erstens wird gefragt, bevor gedruckt wird.** Ein Organigramm mit 810
|
|
// Personen auf Papier ist fast nie das, was jemand braucht — meist geht es um
|
|
// einen Bereich, oder um die oberen zwei Ebenen für eine Besprechung. Wer
|
|
// alles bekommt, druckt vierzig Blätter und wirft achtunddreissig weg.
|
|
//
|
|
// **Zweitens wird hierarchisch gezeichnet, nicht aufgelistet.** Kästen mit
|
|
// Verbindungslinien zeigen die Über- und Unterordnung; eine Spaltenliste
|
|
// zeigt sie nicht, egal wie sauber sie gesetzt ist. Die Linien entstehen aus
|
|
// Rahmen von Pseudo-Elementen — damit sind sie im PDF Vektoren und bleiben
|
|
// beim Hineinzoomen scharf.
|
|
//
|
|
// **Drittens breitet sich nur eine Ebene waagrecht aus.** Ein Baum, der auf
|
|
// jeder Stufe in die Breite geht, wächst exponentiell: sechs Bereiche mit je
|
|
// drei Abteilungen sind achtzehn Kästen nebeneinander, und quer über ein A4
|
|
// bleiben davon zwei Millimeter je Kasten — die erste Fassung lief genau
|
|
// deshalb über den Blattrand hinaus. Jetzt stehen die Bereiche in einer
|
|
// Reihe, und alles darunter hängt längs an einer Linie: die Breite ist die
|
|
// Zahl der Bereiche, unabhängig von der Tiefe. Was dann immer noch übersteht,
|
|
// wird als Ganzes so weit verkleinert, bis es aufs Blatt passt.
|
|
|
|
type Tiefe = "bereich" | "abteilung" | "team" | "personen";
|
|
|
|
const TIEFEN: { wert: Tiefe; label: string; hinweis: string }[] = [
|
|
{ wert: "bereich", label: "Bereiche", hinweis: "Gesellschaft und Bereiche — ein Blatt" },
|
|
{ wert: "abteilung", label: "bis Abteilung", hinweis: "eine Ebene tiefer, noch immer ein Blatt" },
|
|
{ wert: "team", label: "bis Team", hinweis: "je Bereich ein Blatt, ohne Namen" },
|
|
{ wert: "personen", label: "mit Personen", hinweis: "je Abteilung ein Blatt, mit allen Namen" },
|
|
];
|
|
|
|
type Format = "a4" | "a3";
|
|
// Die Satzfläche ist die Blattgrösse abzüglich der Ränder aus @page, ein
|
|
// wenig knapper gerechnet. Die Vorschau bekommt genau diese Masse fest
|
|
// zugewiesen — dadurch ist das, was am Bildschirm zu sehen ist, dasselbe, was
|
|
// aufs Papier passt, und nicht bloss ungefähr.
|
|
const FORMATE: Record<Format, { label: string; css: string; blatt: string; satzBreite: string; satzHoehe: string }> = {
|
|
a4: { label: "A4 quer", css: "A4 landscape", blatt: "297mm", satzBreite: "268mm", satzHoehe: "182mm" },
|
|
a3: { label: "A3 quer", css: "A3 landscape", blatt: "420mm", satzBreite: "390mm", satzHoehe: "269mm" },
|
|
};
|
|
|
|
/** Unter diesem Massstab wird es auf A4 mühsam — dann lieber A3. */
|
|
const LESBAR = 0.55;
|
|
|
|
type Seite = {
|
|
key: string;
|
|
titel: string;
|
|
unterzeile: string;
|
|
wurzel: PrintUnit;
|
|
/** Nur auf der Übersicht: die gewählten Bereiche statt aller Kinder. */
|
|
kinder?: PrintUnit[];
|
|
/** Wie viele Ebenen unter der Wurzel gezeichnet werden. */
|
|
ebenen: number;
|
|
mitPersonen: boolean;
|
|
};
|
|
|
|
function seitenBauen(model: PrintModel, bereiche: PrintUnit[], tiefe: Tiefe, asOf: string): Seite[] {
|
|
const stand = `Stand ${fmtDate(asOf)}`;
|
|
const seiten: Seite[] = [];
|
|
|
|
if (model.root) {
|
|
seiten.push({
|
|
key: "uebersicht",
|
|
titel: model.root.name,
|
|
unterzeile: `Organigramm · ${stand} · ${model.totals.people} Personen`,
|
|
wurzel: model.root,
|
|
kinder: bereiche,
|
|
// Bei „bis Abteilung" ist die Übersicht das ganze Ergebnis. Sonst folgen
|
|
// Detailblätter, und dann bleibt sie eine reine Bereichsübersicht.
|
|
ebenen: tiefe === "abteilung" ? 2 : 1,
|
|
mitPersonen: false,
|
|
});
|
|
}
|
|
|
|
if (tiefe === "team") {
|
|
for (const b of bereiche) {
|
|
seiten.push({
|
|
key: b.id,
|
|
titel: b.name,
|
|
unterzeile: `${b.totalPeople} Personen · ${stand}`,
|
|
wurzel: b,
|
|
ebenen: 2,
|
|
mitPersonen: false,
|
|
});
|
|
}
|
|
}
|
|
|
|
if (tiefe === "personen") {
|
|
for (const b of bereiche) {
|
|
// Wer unmittelbar im Bereich sitzt, hätte sonst kein Blatt — die
|
|
// Leitung steht auf der Übersicht, die übrigen nirgends.
|
|
if (b.members.length > 0) {
|
|
seiten.push({
|
|
key: `${b.id}-direkt`,
|
|
titel: b.name,
|
|
unterzeile: `Bereichsleitung und Stab · ${stand}`,
|
|
wurzel: b,
|
|
ebenen: 0,
|
|
mitPersonen: true,
|
|
});
|
|
}
|
|
for (const a of b.children) {
|
|
seiten.push({
|
|
key: a.id,
|
|
titel: `${b.name} · ${a.name}`,
|
|
unterzeile: `${a.totalPeople} Personen · ${stand}`,
|
|
wurzel: a,
|
|
ebenen: 1,
|
|
mitPersonen: true,
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
return seiten;
|
|
}
|
|
|
|
export function PrintChart({ model, asOf, today }: { model: PrintModel; asOf: string; today: string }) {
|
|
const [format, setFormat] = useState<Format>("a4");
|
|
const [tiefe, setTiefe] = useState<Tiefe>("team");
|
|
const [gewaehlt, setGewaehlt] = useState<Set<string>>(() => new Set(model.divisions.map((d) => d.id)));
|
|
const [schritt, setSchritt] = useState<"auswahl" | "vorschau">("auswahl");
|
|
|
|
const bereiche = useMemo(() => model.divisions.filter((d) => gewaehlt.has(d.id)), [model.divisions, gewaehlt]);
|
|
const seiten = useMemo(() => seitenBauen(model, bereiche, tiefe, asOf), [model, bereiche, tiefe, asOf]);
|
|
|
|
// Der kleinste Massstab aller Blätter — daran hängt der Hinweis auf A3.
|
|
//
|
|
// Die gemeldeten Werte tragen die Auswahl mit, für die sie gemessen wurden:
|
|
// ändert sie sich, sind die alten Werte nicht mehr gültig und werden
|
|
// verworfen, sobald das erste Blatt der neuen Auswahl meldet. Das erspart
|
|
// einen Effekt, der beim Wechsel aufräumt — und damit eine Renderrunde,
|
|
// in der noch der Hinweis der vorherigen Auswahl stünde.
|
|
const signatur = `${format}|${tiefe}|${[...gewaehlt].sort().join(",")}`;
|
|
const [gemessen, setGemessen] = useState<{ signatur: string; werte: Record<string, number> }>({ signatur, werte: {} });
|
|
const meldeMassstab = useCallback(
|
|
(key: string, faktor: number) => {
|
|
setGemessen((prev) =>
|
|
prev.signatur === signatur
|
|
? { signatur, werte: { ...prev.werte, [key]: faktor } }
|
|
: { signatur, werte: { [key]: faktor } }
|
|
);
|
|
},
|
|
[signatur]
|
|
);
|
|
const engste = Math.min(1, ...Object.values(gemessen.signatur === signatur ? gemessen.werte : {}));
|
|
|
|
function umschalten(id: string) {
|
|
setGewaehlt((prev) => {
|
|
const next = new Set(prev);
|
|
if (next.has(id)) next.delete(id);
|
|
else next.add(id);
|
|
return next;
|
|
});
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col gap-6">
|
|
<style>{`
|
|
@page { size: ${FORMATE[format].css}; margin: 12mm 14mm 14mm; }
|
|
@media print {
|
|
html, body { background: #fff; }
|
|
.nur-bildschirm { display: none !important; }
|
|
.blatt {
|
|
box-shadow: none !important; border: 0 !important; border-radius: 0 !important;
|
|
margin: 0 !important; width: auto !important; padding: 0 !important;
|
|
break-after: page;
|
|
}
|
|
.blatt:last-child { break-after: auto; }
|
|
/* Die Satzfläche behält ihre Masse — der Massstab wurde für genau
|
|
diese berechnet. Nur der Rand fällt weg, den setzt @page. */
|
|
.satz { margin: 0 !important; }
|
|
}
|
|
|
|
/* Eine Reihe: waagrechte Geschwister mit Winkeln nach oben. Das erste
|
|
und das letzte Kind lassen ihre Aussenseite weg — zusammen ergibt
|
|
das eine durchgehende Querlinie ohne ein einziges Hilfselement. */
|
|
ul.reihe {
|
|
position: relative; display: flex; justify-content: center;
|
|
list-style: none; margin: 0; padding: 18px 0 0;
|
|
}
|
|
ul.reihe::before {
|
|
content: ""; position: absolute; top: 0; left: 50%;
|
|
height: 18px; border-left: 1px solid var(--color-border);
|
|
}
|
|
ul.reihe > li { position: relative; width: var(--spalte); padding: 18px 6px 0; }
|
|
ul.reihe > li::before, ul.reihe > li::after {
|
|
content: ""; position: absolute; top: 0; width: 50%; height: 18px;
|
|
border-top: 1px solid var(--color-border);
|
|
}
|
|
ul.reihe > li::before { right: 50%; }
|
|
ul.reihe > li::after { left: 50%; border-left: 1px solid var(--color-border); }
|
|
ul.reihe > li:first-child::before { border-top: 0; }
|
|
ul.reihe > li:last-child::after { border-top: 0; }
|
|
|
|
/* Ein Stapel: längs an einer Linie, mit Winkel in jeden Kasten. Kostet
|
|
Höhe statt Breite — und Höhe ist auf einem Querformat übrig. */
|
|
ul.stapel { list-style: none; margin: 0; padding: 0; text-align: left; }
|
|
ul.stapel > li { position: relative; padding: 8px 0 0 20px; }
|
|
ul.stapel > li::before {
|
|
content: ""; position: absolute; left: 9px; top: 0; bottom: 0;
|
|
border-left: 1px solid var(--color-border);
|
|
}
|
|
ul.stapel > li:last-child::before { bottom: auto; height: 22px; }
|
|
ul.stapel > li::after {
|
|
content: ""; position: absolute; left: 9px; top: 22px; width: 11px;
|
|
border-top: 1px solid var(--color-border);
|
|
}
|
|
`}</style>
|
|
|
|
{/* ── Auswahl ─────────────────────────────────────────── */}
|
|
<section className="nur-bildschirm rounded border border-border bg-white p-5">
|
|
<div className="flex flex-wrap items-start justify-between gap-4">
|
|
<div>
|
|
<h2 className="text-sm font-bold text-ink">Was soll aufs Papier?</h2>
|
|
<p className="mt-0.5 max-w-prose text-sm text-ink-muted">
|
|
Das vollständige Organigramm sind {model.totals.people} Personen. Gedruckt wird selten alles — hier steht,
|
|
wie tief und welche Bereiche.
|
|
</p>
|
|
</div>
|
|
<p className="whitespace-nowrap text-sm text-ink-muted">
|
|
Stand {fmtDate(asOf)}
|
|
{asOf !== today && " · abweichender Stichtag"}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mt-5">
|
|
<p className="mb-2 text-xs font-bold uppercase tracking-wide text-ink-muted">Tiefe</p>
|
|
<div className="flex flex-wrap gap-2">
|
|
{TIEFEN.map((t) => (
|
|
<button
|
|
key={t.wert}
|
|
type="button"
|
|
onClick={() => setTiefe(t.wert)}
|
|
aria-pressed={tiefe === t.wert}
|
|
className={`rounded-md border px-3 py-2 text-left focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-500 ${
|
|
tiefe === t.wert ? "border-brand-500 bg-brand-50" : "border-border hover:bg-surface"
|
|
}`}
|
|
>
|
|
<span className="block text-sm font-semibold text-ink">{t.label}</span>
|
|
<span className="block text-xs text-ink-muted">{t.hinweis}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-5">
|
|
<div className="mb-2 flex items-center justify-between">
|
|
<p className="text-xs font-bold uppercase tracking-wide text-ink-muted">
|
|
Bereiche ({gewaehlt.size} von {model.divisions.length})
|
|
</p>
|
|
<div className="flex gap-3 text-xs">
|
|
<button
|
|
type="button"
|
|
onClick={() => setGewaehlt(new Set(model.divisions.map((d) => d.id)))}
|
|
className="rounded font-semibold text-brand-700 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-500"
|
|
>
|
|
Alle
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setGewaehlt(new Set())}
|
|
className="rounded font-semibold text-brand-700 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-500"
|
|
>
|
|
Keine
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3">
|
|
{model.divisions.map((d) => (
|
|
<label
|
|
key={d.id}
|
|
className={`flex cursor-pointer items-start gap-2 rounded-md border px-3 py-2 ${
|
|
gewaehlt.has(d.id) ? "border-brand-500 bg-brand-50" : "border-border"
|
|
}`}
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
checked={gewaehlt.has(d.id)}
|
|
onChange={() => umschalten(d.id)}
|
|
className="mt-0.5 h-4 w-4 rounded border-border text-brand-600"
|
|
/>
|
|
<span>
|
|
<span className="block text-sm font-semibold text-ink">{d.name}</span>
|
|
<span className="block text-xs text-ink-muted">
|
|
{d.totalPeople} Personen · {d.children.length} Abteilungen
|
|
</span>
|
|
</span>
|
|
</label>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-5 flex flex-wrap items-center justify-between gap-3 border-t border-border-subtle pt-4">
|
|
<p className="text-sm text-ink-muted">
|
|
{gewaehlt.size === 0 ? (
|
|
<span className="text-danger-text">Kein Bereich gewählt — es bliebe nur die Übersicht.</span>
|
|
) : (
|
|
<>
|
|
Ergibt <strong className="text-ink">{seiten.length}</strong> {seiten.length === 1 ? "Seite" : "Seiten"}
|
|
</>
|
|
)}
|
|
</p>
|
|
<div className="flex items-center gap-3">
|
|
<Link
|
|
href="/orgchart"
|
|
className="rounded-md border border-border px-3 py-2 text-sm font-semibold text-ink hover:bg-brand-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-500"
|
|
>
|
|
Zurück
|
|
</Link>
|
|
<Button onClick={() => setSchritt("vorschau")}>
|
|
Vorschau <ChevronRight className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{schritt === "vorschau" && (
|
|
<>
|
|
<div className="nur-bildschirm flex flex-wrap items-center justify-between gap-3">
|
|
<p className="text-sm text-ink-muted">
|
|
{seiten.length} {seiten.length === 1 ? "Seite" : "Seiten"} · so kommt es aus dem Drucker
|
|
</p>
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex rounded-md border border-border p-0.5">
|
|
{(Object.keys(FORMATE) as Format[]).map((f) => (
|
|
<button
|
|
key={f}
|
|
type="button"
|
|
onClick={() => setFormat(f)}
|
|
aria-pressed={format === f}
|
|
className={`rounded px-3 py-1.5 text-xs font-semibold focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-500 ${
|
|
format === f ? "bg-brand-500 text-white" : "text-ink-muted hover:bg-surface"
|
|
}`}
|
|
>
|
|
{FORMATE[f].label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
<Button onClick={() => window.print()}>
|
|
<Printer className="h-4 w-4" />
|
|
Als PDF speichern
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{format === "a4" && engste < LESBAR && (
|
|
<p className="nur-bildschirm rounded border border-warning-text/30 bg-warning-bg px-3 py-2 text-sm text-warning-text">
|
|
Ein Blatt musste auf {Math.round(engste * 100)} % verkleinert werden, damit es passt — auf A4 kaum noch
|
|
lesbar. A3 wählen oder weniger Bereiche.
|
|
</p>
|
|
)}
|
|
|
|
<p className="nur-bildschirm max-w-prose text-xs leading-relaxed text-ink-muted">
|
|
Im Druckdialog „Als PDF speichern“ wählen. Hintergrundgrafiken müssen dort eingeschaltet sein,
|
|
sonst fehlen die farbigen Kopfzeilen — in Chrome unter „Weitere Einstellungen“.
|
|
</p>
|
|
|
|
<div className="flex flex-col items-center gap-8">
|
|
{seiten.map((seite, i) => (
|
|
<Blatt key={seite.key} format={format}>
|
|
<Kopf
|
|
titel={seite.titel}
|
|
unterzeile={seite.unterzeile}
|
|
seite={i === 0 ? "Übersicht" : `Seite ${i + 1} von ${seiten.length}`}
|
|
/>
|
|
<Skaliert kennung={`${seite.key}|${format}|${tiefe}`} onFaktor={(f) => meldeMassstab(seite.key, f)}>
|
|
<Chart seite={seite} />
|
|
</Skaliert>
|
|
</Blatt>
|
|
))}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Blatt({ children, format }: { children: React.ReactNode; format: Format }) {
|
|
const { blatt, satzBreite, satzHoehe } = FORMATE[format];
|
|
return (
|
|
<div className="blatt rounded border border-border bg-white shadow-[var(--shadow-card)]" style={{ width: blatt }}>
|
|
<div className="satz flex flex-col" style={{ width: satzBreite, height: satzHoehe, margin: "12mm 14mm 14mm" }}>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Kopf({ titel, unterzeile, seite }: { titel: string; unterzeile: string; seite: string }) {
|
|
return (
|
|
<header className="mb-5 flex shrink-0 items-end justify-between border-b-2 border-brand-500 pb-2">
|
|
<div>
|
|
<h1 className="text-lg font-extrabold tracking-tight text-ink">{titel}</h1>
|
|
<p className="mt-0.5 text-xs text-ink-muted">{unterzeile}</p>
|
|
</div>
|
|
<p className="whitespace-nowrap text-xs font-semibold text-ink-muted">{seite}</p>
|
|
</header>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Verkleinert den Inhalt so weit, dass er in die Satzfläche passt.
|
|
*
|
|
* Ein Organigramm hat keine Grösse, die man vorher kennt — sie hängt daran,
|
|
* wie viele Bereiche jemand angehakt hat und wie tief. Statt zu raten wird
|
|
* gemessen: die natürliche Grösse steht im Layout, die verfügbare auch, und
|
|
* `transform: scale` ändert nur die Darstellung, nicht das Layout. Damit ist
|
|
* die Messung stabil und läuft nicht gegen sich selbst.
|
|
*/
|
|
function Skaliert({
|
|
kennung,
|
|
onFaktor,
|
|
children,
|
|
}: {
|
|
kennung: string;
|
|
onFaktor: (faktor: number) => void;
|
|
children: React.ReactNode;
|
|
}) {
|
|
const rahmen = useRef<HTMLDivElement>(null);
|
|
const inhalt = useRef<HTMLDivElement>(null);
|
|
const [faktor, setFaktor] = useState(1);
|
|
const [versatz, setVersatz] = useState(0);
|
|
|
|
useLayoutEffect(() => {
|
|
const aussen = rahmen.current;
|
|
const innen = inhalt.current;
|
|
if (!aussen || !innen) return;
|
|
|
|
function messen() {
|
|
if (!aussen || !innen) return;
|
|
const breite = aussen.clientWidth;
|
|
const hoehe = aussen.clientHeight;
|
|
const noetigeBreite = innen.offsetWidth;
|
|
const noetigeHoehe = innen.offsetHeight;
|
|
if (!breite || !hoehe || !noetigeBreite || !noetigeHoehe) return;
|
|
const f = Math.min(1, breite / noetigeBreite, hoehe / noetigeHoehe);
|
|
setFaktor(f);
|
|
// Waagrecht mittig: die Verkleinerung geht von links oben aus, sonst
|
|
// klebt ein schmales Diagramm am linken Blattrand.
|
|
setVersatz(Math.max(0, (breite - noetigeBreite * f) / 2));
|
|
onFaktor(f);
|
|
}
|
|
|
|
messen();
|
|
// Schriften kommen nach dem ersten Layout — bis dahin sind alle Kästen in
|
|
// der Ersatzschrift gesetzt und damit anders breit.
|
|
void document.fonts?.ready.then(messen);
|
|
const beobachter = new ResizeObserver(messen);
|
|
beobachter.observe(aussen);
|
|
return () => beobachter.disconnect();
|
|
}, [kennung, onFaktor]);
|
|
|
|
return (
|
|
<div ref={rahmen} className="min-h-0 flex-1 overflow-hidden">
|
|
<div
|
|
ref={inhalt}
|
|
style={{
|
|
width: "max-content",
|
|
transform: `scale(${faktor})`,
|
|
transformOrigin: "top left",
|
|
marginLeft: versatz,
|
|
}}
|
|
>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Chart({ seite }: { seite: Seite }) {
|
|
const kinder = seite.kinder ?? seite.wurzel.children;
|
|
const zeigeKinder = seite.ebenen > 0 && kinder.length > 0;
|
|
|
|
return (
|
|
// Feste Spaltenbreite: dadurch sitzt jeder Kasten mittig unter seiner
|
|
// Verbindungslinie, und die Gesamtbreite ist die Zahl der Spalten mal
|
|
// dieser Breite — berechenbar, statt vom längsten Namen abzuhängen.
|
|
<div className="inline-block text-center" style={{ ["--spalte" as string]: "13rem" }}>
|
|
<div className="mx-auto w-[15rem]">
|
|
<Kasten unit={seite.wurzel} mitPersonen={seite.mitPersonen} />
|
|
</div>
|
|
{zeigeKinder && (
|
|
<ul className="reihe">
|
|
{kinder.map((k) => (
|
|
<li key={k.id}>
|
|
<Kasten unit={k} mitPersonen={seite.mitPersonen} />
|
|
<Stapel units={k.children} ebenen={seite.ebenen - 1} mitPersonen={seite.mitPersonen} />
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Stapel({ units, ebenen, mitPersonen }: { units: PrintUnit[]; ebenen: number; mitPersonen: boolean }) {
|
|
if (ebenen <= 0 || units.length === 0) return null;
|
|
return (
|
|
<ul className="stapel">
|
|
{units.map((u) => (
|
|
<li key={u.id}>
|
|
<Kasten unit={u} mitPersonen={mitPersonen} />
|
|
<Stapel units={u.children} ebenen={ebenen - 1} mitPersonen={mitPersonen} />
|
|
</li>
|
|
))}
|
|
</ul>
|
|
);
|
|
}
|
|
|
|
const KOPFFARBE: Record<PrintUnit["unitType"], string> = {
|
|
// Nach unten hin blasser: so bleibt die Rangfolge auch auf dem
|
|
// Schwarzweissdrucker sichtbar, auf dem die meisten Ausdrucke landen.
|
|
Gesellschaft: "bg-brand-500 text-white",
|
|
Bereich: "bg-brand-100 text-ink",
|
|
Abteilung: "bg-brand-50 text-ink",
|
|
Team: "bg-surface text-ink",
|
|
};
|
|
|
|
function Kasten({ unit, mitPersonen }: { unit: PrintUnit; mitPersonen: boolean }) {
|
|
const offen = unit.vacancies.filter((v) => !v.isChief);
|
|
// Lange Namenslisten in zwei Spalten: sonst wächst der Kasten in die Höhe,
|
|
// und die Höhe ist es, die den Massstab drückt.
|
|
const zweispaltig = mitPersonen && unit.members.length > 8;
|
|
|
|
return (
|
|
<div className="w-full overflow-hidden rounded border border-border text-left">
|
|
<div className={`px-2 py-1 ${KOPFFARBE[unit.unitType]}`}>
|
|
<p className="text-[11px] font-bold leading-tight">{unit.name}</p>
|
|
<p
|
|
className={`text-[9px] uppercase tracking-wide ${
|
|
unit.unitType === "Gesellschaft" ? "text-white/75" : "text-ink-muted"
|
|
}`}
|
|
>
|
|
{unit.unitType} · {unit.totalPeople}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="px-2 py-1">
|
|
{unit.chief ? (
|
|
<PersonZeile p={unit.chief} leitung />
|
|
) : (
|
|
<p className="text-[10px] italic text-ink-muted">Leitung unbesetzt</p>
|
|
)}
|
|
|
|
{mitPersonen && unit.members.length > 0 && (
|
|
<div className={`mt-1 border-t border-border-subtle pt-1 ${zweispaltig ? "columns-2 gap-2" : ""}`}>
|
|
{unit.members.map((p) => (
|
|
<div key={p.id} className="break-inside-avoid">
|
|
<PersonZeile p={p} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{mitPersonen &&
|
|
offen.map((v) => (
|
|
<p key={v.positionNumber} className="text-[10px] italic text-ink-muted">
|
|
offen · {v.jobTitle}
|
|
</p>
|
|
))}
|
|
|
|
{!mitPersonen && unit.members.length > 0 && (
|
|
<p className="text-[10px] text-ink-muted">
|
|
{unit.members.length} {unit.members.length === 1 ? "Person" : "Personen"}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function PersonZeile({ p, leitung }: { p: PrintPerson; leitung?: boolean }) {
|
|
return (
|
|
<p className="text-[10px] leading-tight">
|
|
<span className={leitung ? "font-bold text-ink" : "text-ink"}>{p.name}</span>
|
|
{p.absent && <span className="text-ink-muted"> · abwesend</span>}
|
|
<br />
|
|
<span className="text-ink-muted">{p.jobTitle}</span>
|
|
</p>
|
|
);
|
|
}
|