From 602ae6da0bf9dea8500efcd2ef60d8dba337ea8f Mon Sep 17 00:00:00 2001 From: Julian Appel Date: Wed, 29 Jul 2026 11:12:24 +0200 Subject: [PATCH] Compact circuit grid columns --- src/app/globals.css | 28 +++++++--- .../components/circuit-tree-editor.tsx | 20 ++++--- src/frontend/utils/circuit-grid-model.ts | 54 ++++++++++++++----- tests/circuit-grid-model.test.ts | 5 ++ 4 files changed, 82 insertions(+), 25 deletions(-) diff --git a/src/app/globals.css b/src/app/globals.css index 25a05de..e78dbaa 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -359,7 +359,7 @@ body { .tree-grid { width: max-content; - min-width: 100%; + min-width: 0; border-collapse: collapse; font-size: 0.9rem; } @@ -367,37 +367,50 @@ body { .tree-grid th, .tree-grid td { border: 1px solid #e4e9f2; - padding: 0.35rem 0.5rem; - white-space: nowrap; + padding: 0.35rem 0.4rem; vertical-align: middle; } .tree-grid th { + width: 1px; background: #f4f7fb; position: sticky; top: 0; z-index: 2; vertical-align: top; + white-space: normal; +} + +.tree-grid td { + white-space: nowrap; } .tree-grid .header-cell { display: flex; - align-items: center; - gap: 0.3rem; + flex-direction: column; + align-items: stretch; + gap: 0.2rem; + min-width: 0; } .tree-grid .header-filter-btn { + display: block; + width: 100%; border: 1px solid #c4cddc; background: #fff; border-radius: 3px; font-size: 0.75rem; padding: 0.15rem 0.35rem; + white-space: nowrap; } .tree-grid .header-sort-btn { - display: inline-flex; + display: flex; align-items: center; + justify-content: space-between; gap: 0.25rem; + width: 100%; + min-width: 0; border: 0; background: transparent; padding: 0; @@ -405,6 +418,9 @@ body { font: inherit; font-size: 0.78rem; font-weight: 600; + line-height: 1.15; + overflow-wrap: anywhere; + white-space: normal; text-align: left; cursor: pointer; } diff --git a/src/frontend/components/circuit-tree-editor.tsx b/src/frontend/components/circuit-tree-editor.tsx index 84e72fa..dea6ddd 100644 --- a/src/frontend/components/circuit-tree-editor.tsx +++ b/src/frontend/components/circuit-tree-editor.tsx @@ -155,6 +155,10 @@ function normalizeUiError(err: unknown): string { return message; } +function getFullColumnLabel(column: ColumnDef): string { + return column.fullLabel ?? column.label; +} + function isPrintableKey(event: KeyboardEvent) { return event.key.length === 1 && !event.metaKey && !event.ctrlKey && !event.altKey; } @@ -491,7 +495,9 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str const search = columnSearch.trim().toLocaleLowerCase("de-DE"); const matchingColumns = orderedColumns.filter((column) => - column.label.toLocaleLowerCase("de-DE").includes(search) + `${column.label} ${getFullColumnLabel(column)}` + .toLocaleLowerCase("de-DE") + .includes(search) ); return ( @@ -535,7 +541,7 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str onClick={() => toggleColumnVisibility(column.key)} > - {column.label} + {getFullColumnLabel(column)}
@@ -2812,7 +2818,7 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str value={filterValueSearch} onChange={(event) => setFilterValueSearch(event.target.value)} placeholder="Werte suchen …" - aria-label={`Werte für ${column.label} suchen`} + aria-label={`Werte für ${getFullColumnLabel(column)} suchen`} autoFocus />
diff --git a/src/frontend/utils/circuit-grid-model.ts b/src/frontend/utils/circuit-grid-model.ts index 573b84d..9022d1f 100644 --- a/src/frontend/utils/circuit-grid-model.ts +++ b/src/frontend/utils/circuit-grid-model.ts @@ -49,6 +49,7 @@ export type GridValue = string | number | boolean | undefined; export interface ColumnDef { key: CellKey; label: string; + fullLabel?: string; numeric?: boolean; defaultVisible?: boolean; locked?: boolean; @@ -57,35 +58,64 @@ export interface ColumnDef { // BMK stays locked as the first column because circuit identity and circuit drag // handles depend on an always-visible equipment identifier. export const allColumns: ColumnDef[] = [ - { key: "equipmentIdentifier", label: "Betriebsmittelkennzeichen", defaultVisible: true, locked: true }, + { + key: "equipmentIdentifier", + label: "SK-Nr.", + fullLabel: "Stromkreisnummer / Betriebsmittelkennzeichen", + defaultVisible: true, + locked: true, + }, { key: "displayName", label: "Anzeigename", defaultVisible: true }, { key: "quantity", label: "Anzahl", numeric: true, defaultVisible: true }, - { key: "powerPerUnit", label: "Leistung / Gerät [kW]", numeric: true, defaultVisible: true }, - { key: "simultaneityFactor", label: "Gleichzeitigkeit", numeric: true, defaultVisible: true }, - { key: "rowTotalPower", label: "Gesamtsumme [kW]", numeric: true, defaultVisible: true }, + { + key: "powerPerUnit", + label: "P/Stk. [kW]", + fullLabel: "Leistung je Gerät [kW]", + numeric: true, + defaultVisible: true, + }, + { + key: "simultaneityFactor", + label: "GZF", + fullLabel: "Gleichzeitigkeitsfaktor", + numeric: true, + defaultVisible: true, + }, + { + key: "rowTotalPower", + label: "Ges.-Leistung [kW]", + fullLabel: "Gesamtleistung [kW]", + numeric: true, + defaultVisible: true, + }, { key: "protectionSummary", label: "Schutz", defaultVisible: true }, { key: "cableSummary", label: "Kabel", defaultVisible: true }, { key: "roomSummary", label: "Raum", defaultVisible: true }, { key: "remark", label: "Bemerkung", defaultVisible: true }, - { key: "technicalName", label: "Technischer Name" }, - { key: "connectionKind", label: "Anschlussart" }, + { key: "technicalName", label: "Techn. Name", fullLabel: "Technischer Name" }, + { key: "connectionKind", label: "Anschluss", fullLabel: "Anschlussart" }, { key: "phaseType", label: "Phasenart" }, - { key: "costGroup", label: "Kostengruppe" }, + { key: "costGroup", label: "KG", fullLabel: "Kostengruppe" }, { key: "category", label: "Kategorie" }, { key: "level", label: "Ebene" }, - { key: "roomNumberSnapshot", label: "Raumnummer" }, + { key: "roomNumberSnapshot", label: "Raum-Nr.", fullLabel: "Raumnummer" }, { key: "roomNameSnapshot", label: "Raumname" }, { key: "cosPhi", label: "cos φ", numeric: true }, { key: "protectionType", label: "Schutzart" }, - { key: "protectionRatedCurrent", label: "Bemessungsstrom", numeric: true }, + { + key: "protectionRatedCurrent", + label: "Bem.-Strom", + fullLabel: "Bemessungsstrom", + numeric: true, + }, { key: "protectionCharacteristic", label: "Charakteristik" }, { key: "cableType", label: "Kabeltyp" }, - { key: "cableCrossSection", label: "Kabelquerschnitt" }, + { key: "cableCrossSection", label: "Querschnitt", fullLabel: "Kabelquerschnitt" }, { key: "cableLength", label: "Kabellänge", numeric: true }, { key: "rcdAssignment", label: "RCD-Zuordnung" }, - { key: "terminalDesignation", label: "Klemmenbezeichnung" }, + { key: "terminalDesignation", label: "Klemme", fullLabel: "Klemmenbezeichnung" }, { key: "voltage", label: "Spannung", numeric: true }, - { key: "controlRequirement", label: "Steuerungsanforderung" }, + { key: "controlRequirement", label: "Steuerung", fullLabel: "Steuerungsanforderung" }, { key: "status", label: "Status" }, { key: "isReserve", label: "Reserve" }, ]; diff --git a/tests/circuit-grid-model.test.ts b/tests/circuit-grid-model.test.ts index bce47ed..5f2a4eb 100644 --- a/tests/circuit-grid-model.test.ts +++ b/tests/circuit-grid-model.test.ts @@ -65,6 +65,11 @@ describe("circuit grid model", () => { it("keeps the equipment identifier locked as the first column", () => { assert.equal(allColumns[0].key, "equipmentIdentifier"); + assert.equal(allColumns[0].label, "SK-Nr."); + assert.equal( + allColumns[0].fullLabel, + "Stromkreisnummer / Betriebsmittelkennzeichen" + ); assert.equal(allColumns[0].locked, true); });