jappel/leistungsbilanz-ts
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compact circuit grid columns

Browse Source
This commit is contained in:
Julian Appel
2026-07-29 11:12:24 +02:00
parent 1b2ca84258
commit 602ae6da0b
4 changed files with 82 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/frontend/components/circuit-tree-editor.tsx
+13 -7
View File
@@ -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<HTMLElement>) {
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)}
>
<span className="selection-marker" aria-hidden="true">{visible ? "✓" : ""}</span>
<span>{column.label}</span>
<span>{getFullColumnLabel(column)}</span>
</button>
<div className="column-settings-order">
<button type="button" onClick={() => moveColumn(column.key, -1)} disabled={column.locked} title="Spalte nach links verschieben">
@@ -2760,8 +2766,8 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
<button
type="button"
className="header-sort-btn"
aria-label={`${column.label} sortieren`}
title="Zum Sortieren klicken"
aria-label={`${getFullColumnLabel(column)} sortieren`}
title={`${getFullColumnLabel(column)} – zum Sortieren klicken`}
onClick={() => {
setSortState((current) => {
if (!current || current.key !== column.key) {
@@ -2789,7 +2795,7 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
title={
(columnFilters[column.key]?.length ?? 0) > 0
? `${columnFilters[column.key]?.length} Filterwert(e) ausgewählt`
: `${column.label} filtern`
: `${getFullColumnLabel(column)} filtern`
}
>
Filtern{(columnFilters[column.key]?.length ?? 0) > 0 ? ` (${columnFilters[column.key]?.length})` : ""}
@@ -2798,7 +2804,7 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
{openFilterColumn === column.key ? (
<div className="header-filter-menu">
<div className="header-filter-title-row">
<strong>{column.label} filtern</strong>
<strong>{getFullColumnLabel(column)} filtern</strong>
<button type="button" className="header-filter-close" onClick={closeColumnFilterMenu} aria-label="Filter schließen">
×
</button>
@@ -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
/>
<div className="header-filter-selection-actions">