Use icon buttons in the circuit list editor
- New IconButton/IconButtonSeparator component based on lucide-react. - Toolbar: icon plus text, grouped into history, view and insert blocks. - Group headers: compact icons for add circuit, upstream fuse (VS), group RCD (FI), edit, move up/down, renumber and delete; the header no longer overflows the grid. - Rows: add device, delete circuit (trash) and delete device (ListX). - The previous German labels remain accessible names and tooltips; destructive actions highlight in the danger color. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Grovy311
parent
2e3e85a8e5
commit
e394ff93f4
4 changed files with 374 additions and 205 deletions
|
|
@ -1,6 +1,28 @@
|
|||
"use client";
|
||||
|
||||
import { DragEvent, KeyboardEvent, useEffect, useMemo, useRef, useState } from "react";
|
||||
import {
|
||||
ArrowDown,
|
||||
ArrowDown01,
|
||||
ArrowUp,
|
||||
Check,
|
||||
Columns3,
|
||||
FilterX,
|
||||
FolderPlus,
|
||||
ListOrdered,
|
||||
ListPlus,
|
||||
ListX,
|
||||
PackagePlus,
|
||||
PanelRightClose,
|
||||
PanelRightOpen,
|
||||
Pencil,
|
||||
Plus,
|
||||
Redo2,
|
||||
ShieldPlus,
|
||||
Trash2,
|
||||
Undo2,
|
||||
} from "lucide-react";
|
||||
import { IconButton, IconButtonSeparator } from "./icon-button";
|
||||
import {
|
||||
inferProjectDeviceSectionKey,
|
||||
isProjectDevicePlacementValid,
|
||||
|
|
@ -2995,32 +3017,37 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
|
|||
return (
|
||||
<div className="tree-editor-shell">
|
||||
<div className="editor-toolbar">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void handleUndo()}
|
||||
<IconButton
|
||||
disabled={!historyState || historyState.undoDepth === 0 || historyBusy || isSaving}
|
||||
>
|
||||
Rückgängig
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void handleRedo()}
|
||||
icon={Undo2}
|
||||
label="Rückgängig"
|
||||
onClick={() => void handleUndo()}
|
||||
showLabel
|
||||
/>
|
||||
<IconButton
|
||||
disabled={!historyState || historyState.redoDepth === 0 || historyBusy || isSaving}
|
||||
>
|
||||
Wiederholen
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={clearSortAndFilters}
|
||||
disabled={!Boolean(sortState) && !hasActiveFilters}
|
||||
>
|
||||
Sortierung/Filter zurücksetzen
|
||||
</button>
|
||||
<button type="button" onClick={toggleColumnSettingsMenu} aria-expanded={isColumnMenuOpen}>
|
||||
Spalten
|
||||
</button>
|
||||
{renderColumnSettingsMenu("col-empty")}
|
||||
</div>
|
||||
icon={Redo2}
|
||||
label="Wiederholen"
|
||||
onClick={() => void handleRedo()}
|
||||
showLabel
|
||||
/>
|
||||
<IconButtonSeparator />
|
||||
<IconButton
|
||||
ariaExpanded={isColumnMenuOpen}
|
||||
icon={Columns3}
|
||||
label="Spalten"
|
||||
onClick={toggleColumnSettingsMenu}
|
||||
showLabel
|
||||
/>
|
||||
<IconButton
|
||||
disabled={!Boolean(sortState) && !hasActiveFilters}
|
||||
icon={FilterX}
|
||||
label="Sortierung/Filter zurücksetzen"
|
||||
onClick={clearSortAndFilters}
|
||||
showLabel
|
||||
/>
|
||||
{renderColumnSettingsMenu("col-empty")}
|
||||
</div>
|
||||
{renderActiveViewSummary()}
|
||||
{renderDistributionPowerSummary()}
|
||||
{error ? (
|
||||
|
|
@ -3140,82 +3167,90 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
|
|||
/>
|
||||
) : null}
|
||||
<div className="editor-toolbar">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void handleUndo()}
|
||||
<IconButton
|
||||
disabled={!historyState || historyState.undoDepth === 0 || historyBusy || isSaving}
|
||||
icon={Undo2}
|
||||
label="Rückgängig"
|
||||
onClick={() => void handleUndo()}
|
||||
showLabel
|
||||
title={
|
||||
historyState?.undoDepth
|
||||
? `${historyState.undoDepth} Änderung(en) können rückgängig gemacht werden.`
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
Rückgängig
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void handleRedo()}
|
||||
/>
|
||||
<IconButton
|
||||
disabled={!historyState || historyState.redoDepth === 0 || historyBusy || isSaving}
|
||||
icon={Redo2}
|
||||
label="Wiederholen"
|
||||
onClick={() => void handleRedo()}
|
||||
showLabel
|
||||
title={
|
||||
historyState?.redoDepth
|
||||
? `${historyState.redoDepth} Änderung(en) können wiederholt werden.`
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
Wiederholen
|
||||
</button>
|
||||
/>
|
||||
<IconButtonSeparator />
|
||||
{isSortedView ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void handleApplySortedOrder()}
|
||||
<IconButton
|
||||
disabled={hasActiveFilters || isSaving || historyBusy}
|
||||
icon={Check}
|
||||
label="Sortierung übernehmen"
|
||||
onClick={() => void handleApplySortedOrder()}
|
||||
showLabel
|
||||
title={hasActiveFilters ? "Vor dem Übernehmen der Sortierung zuerst die Filter zurücksetzen." : undefined}
|
||||
>
|
||||
Sortierung übernehmen
|
||||
</button>
|
||||
/>
|
||||
) : null}
|
||||
<button type="button" onClick={toggleColumnSettingsMenu} aria-expanded={isColumnMenuOpen}>
|
||||
Spalten
|
||||
</button>
|
||||
<button
|
||||
aria-controls="project-device-drawer"
|
||||
aria-expanded={isProjectDeviceDrawerOpen}
|
||||
className="project-device-drawer-toggle"
|
||||
type="button"
|
||||
onClick={() =>
|
||||
setIsProjectDeviceDrawerOpen((current) => !current)
|
||||
}
|
||||
>
|
||||
{isProjectDeviceDrawerOpen
|
||||
? "Projektgeräte schließen"
|
||||
: `Projektgeräte öffnen (${projectDevices.length})`}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
<IconButton
|
||||
ariaExpanded={isColumnMenuOpen}
|
||||
icon={Columns3}
|
||||
label="Spalten"
|
||||
onClick={toggleColumnSettingsMenu}
|
||||
showLabel
|
||||
/>
|
||||
<IconButton
|
||||
disabled={!isSortedView && !hasActiveFilters}
|
||||
icon={FilterX}
|
||||
label="Sortierung/Filter zurücksetzen"
|
||||
onClick={clearSortAndFilters}
|
||||
showLabel
|
||||
/>
|
||||
<IconButtonSeparator />
|
||||
<IconButton
|
||||
disabled={isSaving || historyBusy}
|
||||
icon={FolderPlus}
|
||||
label="Stromkreisgruppe hinzufügen"
|
||||
onClick={() => setCircuitGroupEditorIntent({ kind: "create" })}
|
||||
showLabel
|
||||
/>
|
||||
<IconButton
|
||||
disabled={isSaving || historyBusy}
|
||||
icon={PackagePlus}
|
||||
label="Verteilergerät hinzufügen"
|
||||
onClick={() =>
|
||||
setComponentEditorIntent({
|
||||
kind: "create",
|
||||
role: "auxiliary",
|
||||
})
|
||||
}
|
||||
>
|
||||
Verteilergerät hinzufügen
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
disabled={isSaving || historyBusy}
|
||||
onClick={() => setCircuitGroupEditorIntent({ kind: "create" })}
|
||||
>
|
||||
Stromkreisgruppe hinzufügen
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={clearSortAndFilters}
|
||||
disabled={!isSortedView && !hasActiveFilters}
|
||||
>
|
||||
Sortierung/Filter zurücksetzen
|
||||
</button>
|
||||
showLabel
|
||||
/>
|
||||
<IconButton
|
||||
ariaControls="project-device-drawer"
|
||||
ariaExpanded={isProjectDeviceDrawerOpen}
|
||||
className="project-device-drawer-toggle"
|
||||
icon={isProjectDeviceDrawerOpen ? PanelRightClose : PanelRightOpen}
|
||||
label={
|
||||
isProjectDeviceDrawerOpen
|
||||
? "Projektgeräte schließen"
|
||||
: `Projektgeräte öffnen (${projectDevices.length})`
|
||||
}
|
||||
onClick={() =>
|
||||
setIsProjectDeviceDrawerOpen((current) => !current)
|
||||
}
|
||||
showLabel
|
||||
/>
|
||||
{renderColumnSettingsMenu("col")}
|
||||
</div>
|
||||
{renderActiveViewSummary()}
|
||||
|
|
@ -3717,105 +3752,21 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
|
|||
</span>
|
||||
</div>
|
||||
<div className="section-actions">
|
||||
<button
|
||||
type="button"
|
||||
tabIndex={-1}
|
||||
disabled={!section.category || !section.groupNumber}
|
||||
onClick={() =>
|
||||
setCircuitGroupEditorIntent({
|
||||
kind: "edit",
|
||||
section,
|
||||
})
|
||||
}
|
||||
>
|
||||
Gruppe bearbeiten
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
tabIndex={-1}
|
||||
disabled={
|
||||
isSaving ||
|
||||
!buildCircuitGroupReorderAssignments(
|
||||
data.sections,
|
||||
section.id,
|
||||
-1
|
||||
)
|
||||
}
|
||||
onClick={() =>
|
||||
void handleMoveCircuitGroup(section.id, -1)
|
||||
}
|
||||
title="Innerhalb derselben Kategorie nach oben verschieben"
|
||||
>
|
||||
Gruppe nach oben
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
tabIndex={-1}
|
||||
disabled={
|
||||
isSaving ||
|
||||
!buildCircuitGroupReorderAssignments(
|
||||
data.sections,
|
||||
section.id,
|
||||
1
|
||||
)
|
||||
}
|
||||
onClick={() =>
|
||||
void handleMoveCircuitGroup(section.id, 1)
|
||||
}
|
||||
title="Innerhalb derselben Kategorie nach unten verschieben"
|
||||
>
|
||||
Gruppe nach unten
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
tabIndex={-1}
|
||||
disabled={
|
||||
isSaving ||
|
||||
hasActiveSortOrFilter ||
|
||||
!section.category ||
|
||||
!canRenumberCircuitGroups(
|
||||
data.sections,
|
||||
section.category
|
||||
)
|
||||
}
|
||||
onClick={() =>
|
||||
section.category
|
||||
? void handleRenumberCircuitGroups(
|
||||
section.category
|
||||
)
|
||||
: undefined
|
||||
}
|
||||
title={
|
||||
hasActiveSortOrFilter
|
||||
? "Vor der Gruppenneunummerierung Sortierung und Filter zurücksetzen."
|
||||
: "Alle Gruppen dieser Kategorie gemäß ihrer Reihenfolge neu nummerieren"
|
||||
}
|
||||
>
|
||||
Gruppen-BMK neu nummerieren
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
tabIndex={-1}
|
||||
<IconButton
|
||||
disabled={isSaving}
|
||||
title={
|
||||
canDeleteCircuitGroup(section)
|
||||
? "Leere Stromkreisgruppe entfernen"
|
||||
: "Befüllte Stromkreisgruppe mit vollständiger Warnung entfernen"
|
||||
}
|
||||
onClick={() =>
|
||||
void handleDeleteCircuitGroup(section)
|
||||
}
|
||||
>
|
||||
Gruppe entfernen
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
icon={Plus}
|
||||
label="Stromkreis hinzufügen"
|
||||
onClick={() => void handleAddReserveCircuit(section.id)}
|
||||
tabIndex={-1}
|
||||
/>
|
||||
<IconButton
|
||||
disabled={
|
||||
hasUpstreamProtection ||
|
||||
!section.category ||
|
||||
!section.groupNumber
|
||||
}
|
||||
icon={ShieldPlus}
|
||||
label="Vorsicherung hinzufügen"
|
||||
onClick={() =>
|
||||
setComponentEditorIntent({
|
||||
kind: "create",
|
||||
|
|
@ -3828,17 +3779,18 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
|
|||
),
|
||||
})
|
||||
}
|
||||
>
|
||||
Vorsicherung hinzufügen
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
tabIndex={-1}
|
||||
>
|
||||
<span className="icon-button-text">VS</span>
|
||||
</IconButton>
|
||||
<IconButton
|
||||
disabled={
|
||||
hasGroupRcd ||
|
||||
!section.category ||
|
||||
!section.groupNumber
|
||||
}
|
||||
icon={ShieldPlus}
|
||||
label="Gruppen-FI hinzufügen"
|
||||
onClick={() =>
|
||||
setComponentEditorIntent({
|
||||
kind: "create",
|
||||
|
|
@ -3851,26 +3803,112 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
|
|||
),
|
||||
})
|
||||
}
|
||||
>
|
||||
Gruppen-FI hinzufügen
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
tabIndex={-1}
|
||||
disabled={isSaving}
|
||||
onClick={() => void handleAddReserveCircuit(section.id)}
|
||||
>
|
||||
Stromkreis hinzufügen
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
<span className="icon-button-text">FI</span>
|
||||
</IconButton>
|
||||
<IconButtonSeparator />
|
||||
<IconButton
|
||||
disabled={!section.category || !section.groupNumber}
|
||||
icon={Pencil}
|
||||
label="Gruppe bearbeiten"
|
||||
onClick={() =>
|
||||
setCircuitGroupEditorIntent({
|
||||
kind: "edit",
|
||||
section,
|
||||
})
|
||||
}
|
||||
tabIndex={-1}
|
||||
/>
|
||||
<IconButton
|
||||
disabled={
|
||||
isSaving ||
|
||||
!buildCircuitGroupReorderAssignments(
|
||||
data.sections,
|
||||
section.id,
|
||||
-1
|
||||
)
|
||||
}
|
||||
icon={ArrowUp}
|
||||
label="Gruppe nach oben"
|
||||
onClick={() =>
|
||||
void handleMoveCircuitGroup(section.id, -1)
|
||||
}
|
||||
tabIndex={-1}
|
||||
title="Gruppe nach oben (innerhalb derselben Kategorie)"
|
||||
/>
|
||||
<IconButton
|
||||
disabled={
|
||||
isSaving ||
|
||||
!buildCircuitGroupReorderAssignments(
|
||||
data.sections,
|
||||
section.id,
|
||||
1
|
||||
)
|
||||
}
|
||||
icon={ArrowDown}
|
||||
label="Gruppe nach unten"
|
||||
onClick={() =>
|
||||
void handleMoveCircuitGroup(section.id, 1)
|
||||
}
|
||||
tabIndex={-1}
|
||||
title="Gruppe nach unten (innerhalb derselben Kategorie)"
|
||||
/>
|
||||
<IconButtonSeparator />
|
||||
<IconButton
|
||||
disabled={hasActiveSortOrFilter || isSaving}
|
||||
icon={ArrowDown01}
|
||||
label="Bereich neu nummerieren"
|
||||
onClick={() => void handleRenumberSection(section.id)}
|
||||
title={hasActiveSortOrFilter ? "Vor der Neunummerierung Sortierung und Filter zurücksetzen." : undefined}
|
||||
>
|
||||
Bereich neu nummerieren
|
||||
</button>
|
||||
tabIndex={-1}
|
||||
title={
|
||||
hasActiveSortOrFilter
|
||||
? "Vor der Neunummerierung Sortierung und Filter zurücksetzen."
|
||||
: "Stromkreise dieser Gruppe neu nummerieren"
|
||||
}
|
||||
/>
|
||||
<IconButton
|
||||
disabled={
|
||||
isSaving ||
|
||||
hasActiveSortOrFilter ||
|
||||
!section.category ||
|
||||
!canRenumberCircuitGroups(
|
||||
data.sections,
|
||||
section.category
|
||||
)
|
||||
}
|
||||
icon={ListOrdered}
|
||||
label="Gruppen-BMK neu nummerieren"
|
||||
onClick={() =>
|
||||
section.category
|
||||
? void handleRenumberCircuitGroups(
|
||||
section.category
|
||||
)
|
||||
: undefined
|
||||
}
|
||||
tabIndex={-1}
|
||||
title={
|
||||
hasActiveSortOrFilter
|
||||
? "Vor der Gruppenneunummerierung Sortierung und Filter zurücksetzen."
|
||||
: "Gruppen-BMK: alle Gruppen dieser Kategorie gemäß ihrer Reihenfolge neu nummerieren"
|
||||
}
|
||||
/>
|
||||
<IconButtonSeparator />
|
||||
<IconButton
|
||||
disabled={isSaving}
|
||||
icon={Trash2}
|
||||
label="Gruppe entfernen"
|
||||
onClick={() =>
|
||||
void handleDeleteCircuitGroup(section)
|
||||
}
|
||||
tabIndex={-1}
|
||||
title={
|
||||
canDeleteCircuitGroup(section)
|
||||
? "Leere Stromkreisgruppe entfernen"
|
||||
: "Befüllte Stromkreisgruppe entfernen (mit Warnung)"
|
||||
}
|
||||
variant="danger"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{dropIntent?.kind === "new-circuit" && dropIntent.sectionId === section.id ? (
|
||||
|
|
@ -4467,28 +4505,32 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
|
|||
>
|
||||
{row.circuit && row.rowType !== "deviceRow" ? (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
tabIndex={-1}
|
||||
<IconButton
|
||||
disabled={isSaving}
|
||||
icon={ListPlus}
|
||||
label="Manuelles Gerät hinzufügen"
|
||||
onClick={() => void handleAddManualDevice(row.circuit!, row.sectionId)}
|
||||
>
|
||||
Manuelles Gerät hinzufügen
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
tabIndex={-1}
|
||||
/>
|
||||
<IconButton
|
||||
disabled={isSaving}
|
||||
icon={Trash2}
|
||||
label="Stromkreis löschen"
|
||||
onClick={() => void handleDeleteCircuit(row.circuit!.id)}
|
||||
>
|
||||
Stromkreis löschen
|
||||
</button>
|
||||
tabIndex={-1}
|
||||
variant="danger"
|
||||
/>
|
||||
</>
|
||||
) : null}
|
||||
{row.device ? (
|
||||
<button type="button" tabIndex={-1} disabled={isSaving} onClick={() => void handleDeleteDevice(row.device!.id)}>
|
||||
Gerät löschen
|
||||
</button>
|
||||
<IconButton
|
||||
disabled={isSaving}
|
||||
icon={ListX}
|
||||
label="Gerät löschen"
|
||||
onClick={() => void handleDeleteDevice(row.device!.id)}
|
||||
tabIndex={-1}
|
||||
variant="danger"
|
||||
/>
|
||||
) : null}
|
||||
{dropIntent?.kind === "new-circuit" && row.rowType === "placeholder" && dropIntent.sectionId === row.sectionId ? (
|
||||
<span className="drop-hint">
|
||||
|
|
|
|||
59
src/frontend/components/icon-button.tsx
Normal file
59
src/frontend/components/icon-button.tsx
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
"use client";
|
||||
|
||||
import type { LucideIcon } from "lucide-react";
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
/**
|
||||
* Compact editor button with a lucide icon. `label` is always the accessible
|
||||
* name; it is also the tooltip unless a more specific `title` is given.
|
||||
* With `showLabel` the label (or `children`) is rendered next to the icon.
|
||||
*/
|
||||
export function IconButton({
|
||||
icon: Icon,
|
||||
label,
|
||||
title,
|
||||
onClick,
|
||||
disabled,
|
||||
variant = "default",
|
||||
showLabel = false,
|
||||
children,
|
||||
className,
|
||||
tabIndex,
|
||||
ariaExpanded,
|
||||
ariaControls,
|
||||
}: {
|
||||
icon: LucideIcon;
|
||||
label: string;
|
||||
title?: string;
|
||||
onClick: () => void;
|
||||
disabled?: boolean;
|
||||
variant?: "default" | "danger" | "primary";
|
||||
showLabel?: boolean;
|
||||
children?: ReactNode;
|
||||
className?: string;
|
||||
tabIndex?: number;
|
||||
ariaExpanded?: boolean;
|
||||
ariaControls?: string;
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
aria-controls={ariaControls}
|
||||
aria-expanded={ariaExpanded}
|
||||
aria-label={showLabel ? undefined : label}
|
||||
className={`icon-button icon-button-${variant}${className ? ` ${className}` : ""}`}
|
||||
disabled={disabled}
|
||||
onClick={onClick}
|
||||
tabIndex={tabIndex}
|
||||
title={title ?? label}
|
||||
type="button"
|
||||
>
|
||||
<Icon aria-hidden="true" size={15} strokeWidth={2} />
|
||||
{showLabel ? <span>{children ?? label}</span> : children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
/** Thin vertical divider between groups of icon buttons. */
|
||||
export function IconButtonSeparator() {
|
||||
return <span aria-hidden="true" className="icon-button-separator" />;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue