Compare commits
No commits in common. "ced4917a860a00984f097599b848970241c91df8" and "2e3e85a8e52cfd1bd3434b9cc03af22bf164119d" have entirely different histories.
ced4917a86
...
2e3e85a8e5
5 changed files with 15 additions and 159 deletions
|
|
@ -164,9 +164,6 @@ Keyboard behavior:
|
||||||
- Escape cancels
|
- Escape cancels
|
||||||
- Tab / Shift+Tab navigates editable cells
|
- Tab / Shift+Tab navigates editable cells
|
||||||
- Arrow keys navigate cells when not editing
|
- Arrow keys navigate cells when not editing
|
||||||
- Alt+ArrowDown on a GZF cell opens the AMEV table (`GzfPickerModal`); the
|
|
||||||
selected GZF cell also shows a small table-icon button. The picked value is
|
|
||||||
committed like a typed edit.
|
|
||||||
|
|
||||||
Support Ctrl+Plus and Ctrl+Shift+Plus for insertion.
|
Support Ctrl+Plus and Ctrl+Shift+Plus for insertion.
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -44,7 +44,6 @@ Selection, keyboard movement, and editability checks run against this normalized
|
||||||
- arrow keys: move selected cell in grid when not editing
|
- arrow keys: move selected cell in grid when not editing
|
||||||
- type-to-edit: printable keys open edit mode and replace current display value with typed character
|
- type-to-edit: printable keys open edit mode and replace current display value with typed character
|
||||||
- `Ctrl+Plus` / `Ctrl+Shift+Plus`: insert below the selected circuit or device context
|
- `Ctrl+Plus` / `Ctrl+Shift+Plus`: insert below the selected circuit or device context
|
||||||
- `Alt+ArrowDown` on a GZF cell (selected or editing): open the AMEV simultaneity-factor table
|
|
||||||
- `Delete`: delete the selected circuit or device context after confirmation
|
- `Delete`: delete the selected circuit or device context after confirmation
|
||||||
|
|
||||||
For insertion, a circuit-level cell creates a reserve circuit directly after the selected circuit. A device-level cell creates a manual device row directly after the selected device. On the virtual `-frei-` row, or without a valid row selection, the shortcut creates a circuit at the end of the active section. Insertions use command history and never renumber existing equipment identifiers.
|
For insertion, a circuit-level cell creates a reserve circuit directly after the selected circuit. A device-level cell creates a manual device row directly after the selected device. On the virtual `-frei-` row, or without a valid row selection, the shortcut creates a circuit at the end of the active section. Insertions use command history and never renumber existing equipment identifiers.
|
||||||
|
|
@ -53,17 +52,6 @@ For deletion, a circuit-level cell targets the complete circuit and a device-lev
|
||||||
|
|
||||||
Creating or deleting a device row updates the row and the circuit reserve state in one SQLite transaction.
|
Creating or deleting a device row updates the row and the circuit reserve state in one SQLite transaction.
|
||||||
|
|
||||||
## AMEV Simultaneity Factor
|
|
||||||
|
|
||||||
The selected GZF cell shows a small table-icon button; it and `Alt+ArrowDown` open
|
|
||||||
the shared `GzfPickerModal` (AMEV Planungshilfe, Tabelle 3), which the project
|
|
||||||
device dialog uses as well. "Übernehmen" commits the mean value of the chosen
|
|
||||||
consumer group through the same path as a typed edit (`commitEdit` with an
|
|
||||||
explicit target cell), so it is one undoable command and works on device rows,
|
|
||||||
compact circuits, reserve circuits and the `-frei-` row. A running inline edit
|
|
||||||
of the cell is discarded when the picker opens. The button only appears on the
|
|
||||||
selected cell; the grid keeps its static-text cells.
|
|
||||||
|
|
||||||
## Equipment Identifier Validation
|
## Equipment Identifier Validation
|
||||||
|
|
||||||
Equipment identifiers are compared case-insensitively after trimming whitespace. A conflicting edit is highlighted before submission and cannot be committed. Existing conflicts are highlighted in the grid. Validation errors remain dismissible above the editor instead of replacing the complete workspace.
|
Equipment identifiers are compared case-insensitively after trimming whitespace. A conflicting edit is highlighted before submission and cannot be committed. Existing conflicts are highlighted in the grid. Validation errors remain dismissible above the editor instead of replacing the complete workspace.
|
||||||
|
|
|
||||||
|
|
@ -1230,38 +1230,6 @@ a.kpi:hover {
|
||||||
outline-offset: -2px;
|
outline-offset: -2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Picker trigger on the selected GZF cell. Positioned over the cell so the
|
|
||||||
column width does not change while the selection moves. */
|
|
||||||
.tree-grid td:has(> .cell-picker-trigger) {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree-grid .cell-picker-trigger {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 0.2rem;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 1.15rem;
|
|
||||||
height: 1.15rem;
|
|
||||||
border: 1px solid var(--accent-blue-strong-border);
|
|
||||||
border-radius: 3px;
|
|
||||||
padding: 0;
|
|
||||||
background: var(--panel-bg);
|
|
||||||
color: var(--color-primary);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
:root[data-bs-theme="dark"] .tree-grid .cell-picker-trigger {
|
|
||||||
color: var(--color-accent-pale);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree-grid .cell-picker-trigger:hover {
|
|
||||||
background: var(--accent-blue-soft-bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree-grid .section-title {
|
.tree-grid .section-title {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: baseline;
|
align-items: baseline;
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,5 @@
|
||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { ArrowLeft } from "lucide-react";
|
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { useParams } from "next/navigation";
|
import { useParams } from "next/navigation";
|
||||||
import { CircuitTreeEditor } from "../../../../../../frontend/components/circuit-tree-editor";
|
import { CircuitTreeEditor } from "../../../../../../frontend/components/circuit-tree-editor";
|
||||||
|
|
@ -11,20 +10,10 @@ export default function CircuitTreeEditPage() {
|
||||||
return (
|
return (
|
||||||
<main className="container-fluid px-3 px-xxl-4 py-4">
|
<main className="container-fluid px-3 px-xxl-4 py-4">
|
||||||
<div className="d-flex flex-wrap justify-content-between align-items-center gap-3 mb-3">
|
<div className="d-flex flex-wrap justify-content-between align-items-center gap-3 mb-3">
|
||||||
<div className="d-flex align-items-center gap-2">
|
|
||||||
<Link
|
|
||||||
aria-label="Zurück zur Verteilerübersicht"
|
|
||||||
className="btn btn-outline-secondary btn-sm"
|
|
||||||
href={`/projects/${params.projectId}`}
|
|
||||||
title="Zurück zur Verteilerübersicht"
|
|
||||||
>
|
|
||||||
<ArrowLeft aria-hidden="true" size={18} />
|
|
||||||
</Link>
|
|
||||||
<div>
|
<div>
|
||||||
<h1 className="h4 mb-1">Stromkreisliste</h1>
|
<h1 className="h4 mb-1">Stromkreisliste</h1>
|
||||||
<p className="text-secondary mb-0">Stromkreise und zugeordnete Geräte bearbeiten.</p>
|
<p className="text-secondary mb-0">Stromkreise und zugeordnete Geräte bearbeiten.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div className="d-flex gap-2">
|
<div className="d-flex gap-2">
|
||||||
<Link href={`/projects/${params.projectId}`} className="btn btn-outline-secondary btn-sm">
|
<Link href={`/projects/${params.projectId}`} className="btn btn-outline-secondary btn-sm">
|
||||||
Zum Projekt
|
Zum Projekt
|
||||||
|
|
|
||||||
|
|
@ -135,8 +135,6 @@ import type {
|
||||||
CircuitSnapshot,
|
CircuitSnapshot,
|
||||||
} from "../../domain/models/circuit-structure-project-command.model";
|
} from "../../domain/models/circuit-structure-project-command.model";
|
||||||
import { DistributionBoardComponentModal } from "./distribution-board-component-modal";
|
import { DistributionBoardComponentModal } from "./distribution-board-component-modal";
|
||||||
import { GzfPickerModal } from "./gzf-picker-modal";
|
|
||||||
import { TableProperties } from "lucide-react";
|
|
||||||
import { CircuitGroupModal } from "./circuit-group-modal";
|
import { CircuitGroupModal } from "./circuit-group-modal";
|
||||||
import { CircuitProtectionModal } from "./circuit-protection-modal";
|
import { CircuitProtectionModal } from "./circuit-protection-modal";
|
||||||
import {
|
import {
|
||||||
|
|
@ -278,8 +276,6 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
|
||||||
useState<StructureComponentEditorIntent | null>(null);
|
useState<StructureComponentEditorIntent | null>(null);
|
||||||
const [circuitGroupEditorIntent, setCircuitGroupEditorIntent] =
|
const [circuitGroupEditorIntent, setCircuitGroupEditorIntent] =
|
||||||
useState<CircuitGroupEditorIntent | null>(null);
|
useState<CircuitGroupEditorIntent | null>(null);
|
||||||
// GZF cell the AMEV picker writes to; null while the picker is closed.
|
|
||||||
const [gzfPickerCell, setGzfPickerCell] = useState<SelectedCell | null>(null);
|
|
||||||
const [protectionEditorCircuit, setProtectionEditorCircuit] =
|
const [protectionEditorCircuit, setProtectionEditorCircuit] =
|
||||||
useState<CircuitTreeCircuitDto | null>(null);
|
useState<CircuitTreeCircuitDto | null>(null);
|
||||||
const [projectDevices, setProjectDevices] = useState<ProjectDeviceDto[]>([]);
|
const [projectDevices, setProjectDevices] = useState<ProjectDeviceDto[]>([]);
|
||||||
|
|
@ -1833,26 +1829,22 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
|
||||||
}
|
}
|
||||||
|
|
||||||
// Commits the active editor input through command history so edits remain undoable.
|
// Commits the active editor input through command history so edits remain undoable.
|
||||||
// `target` commits a value for a cell without an open inline editor
|
|
||||||
// (AMEV GZF picker); the regular edit path passes no target.
|
|
||||||
async function commitEdit(
|
async function commitEdit(
|
||||||
direction: SaveDirection = "stay",
|
direction: SaveDirection = "stay",
|
||||||
draftOverride?: string,
|
draftOverride?: string
|
||||||
target?: SelectedCell
|
|
||||||
) {
|
) {
|
||||||
const session = target ?? editingCell;
|
if (!editingCell) {
|
||||||
if (!session) {
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const row = findRow(session.rowKey);
|
const row = findRow(editingCell.rowKey);
|
||||||
const cell = row?.cells.find((entry) => entry.cellKey === session.cellKey);
|
const cell = row?.cells.find((entry) => entry.cellKey === editingCell.cellKey);
|
||||||
if (!row || !cell || !cell.editable) {
|
if (!row || !cell || !cell.editable) {
|
||||||
setEditingCell(null);
|
setEditingCell(null);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const draft = draftOverride ?? editingCell?.draft ?? "";
|
const draft = draftOverride ?? editingCell.draft;
|
||||||
if (
|
if (
|
||||||
session.cellKey === "equipmentIdentifier" &&
|
editingCell.cellKey === "equipmentIdentifier" &&
|
||||||
row.circuit &&
|
row.circuit &&
|
||||||
hasEquipmentIdentifierConflict(allCircuits, row.circuit.id, draft)
|
hasEquipmentIdentifierConflict(allCircuits, row.circuit.id, draft)
|
||||||
) {
|
) {
|
||||||
|
|
@ -1860,7 +1852,7 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
let targetSelection: SelectedCell = { rowKey: session.rowKey, cellKey: session.cellKey };
|
let targetSelection: SelectedCell = { rowKey: editingCell.rowKey, cellKey: editingCell.cellKey };
|
||||||
const nextSelectionIntent = () => {
|
const nextSelectionIntent = () => {
|
||||||
let selected = targetSelection;
|
let selected = targetSelection;
|
||||||
if (direction !== "stay") {
|
if (direction !== "stay") {
|
||||||
|
|
@ -1883,7 +1875,7 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
|
||||||
redo: async () => {
|
redo: async () => {
|
||||||
const selection = await createFromPlaceholder(
|
const selection = await createFromPlaceholder(
|
||||||
row.sectionId,
|
row.sectionId,
|
||||||
session.cellKey,
|
editingCell.cellKey,
|
||||||
draft
|
draft
|
||||||
);
|
);
|
||||||
targetSelection = selection;
|
targetSelection = selection;
|
||||||
|
|
@ -1900,7 +1892,7 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
|
||||||
const command: HistoryCommand = {
|
const command: HistoryCommand = {
|
||||||
label: "Stromkreisfeld bearbeiten",
|
label: "Stromkreisfeld bearbeiten",
|
||||||
redo: async () => {
|
redo: async () => {
|
||||||
await patchCircuit(row.circuit!.id, session.cellKey, next);
|
await patchCircuit(row.circuit!.id, editingCell.cellKey, next);
|
||||||
return nextSelectionIntent();
|
return nextSelectionIntent();
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
@ -1914,7 +1906,7 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
|
||||||
const command: HistoryCommand = {
|
const command: HistoryCommand = {
|
||||||
label: "Gerätefeld bearbeiten",
|
label: "Gerätefeld bearbeiten",
|
||||||
redo: async () => {
|
redo: async () => {
|
||||||
await patchDeviceRow(row.device!.id, session.cellKey, next);
|
await patchDeviceRow(row.device!.id, editingCell.cellKey, next);
|
||||||
return nextSelectionIntent();
|
return nextSelectionIntent();
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
@ -1929,7 +1921,7 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
|
||||||
label: "Gerätezeile im Reservestromkreis erstellen",
|
label: "Gerätezeile im Reservestromkreis erstellen",
|
||||||
redo: async () => {
|
redo: async () => {
|
||||||
const editValues = createValuesFromEditPatch(
|
const editValues = createValuesFromEditPatch(
|
||||||
buildDeviceRowEditPatch(session.cellKey, next)
|
buildDeviceRowEditPatch(editingCell.cellKey, next)
|
||||||
);
|
);
|
||||||
const snapshot = createDeviceRowSnapshot(
|
const snapshot = createDeviceRowSnapshot(
|
||||||
row.circuit!.id,
|
row.circuit!.id,
|
||||||
|
|
@ -1949,7 +1941,7 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
|
||||||
snapshot,
|
snapshot,
|
||||||
"Gerätezeile im Reservestromkreis erstellen"
|
"Gerätezeile im Reservestromkreis erstellen"
|
||||||
);
|
);
|
||||||
targetSelection = { rowKey: `circuitCompact:${row.circuit!.id}`, cellKey: session.cellKey };
|
targetSelection = { rowKey: `circuitCompact:${row.circuit!.id}`, cellKey: editingCell.cellKey };
|
||||||
return nextSelectionIntent();
|
return nextSelectionIntent();
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
@ -1958,42 +1950,6 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function isGzfPickerCell(target: SelectedCell | null): target is SelectedCell {
|
|
||||||
return Boolean(
|
|
||||||
target &&
|
|
||||||
target.cellKey === "simultaneityFactor" &&
|
|
||||||
findCell(target.rowKey, target.cellKey)?.editable
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Opens the AMEV simultaneity-factor table for one GZF cell. A running
|
|
||||||
// inline edit is discarded because the picked value replaces it.
|
|
||||||
function openGzfPicker(target: SelectedCell) {
|
|
||||||
setEditingCell(null);
|
|
||||||
setSelectedCell(target);
|
|
||||||
setGzfPickerCell(target);
|
|
||||||
}
|
|
||||||
|
|
||||||
function closeGzfPicker() {
|
|
||||||
setGzfPickerCell(null);
|
|
||||||
focusGridWithoutScroll();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Commits the picked mean value like a typed edit (undoable command).
|
|
||||||
function handleGzfPicked(value: number) {
|
|
||||||
const target = gzfPickerCell;
|
|
||||||
setGzfPickerCell(null);
|
|
||||||
if (!target) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// parseNumeric accepts only the German decimal comma.
|
|
||||||
const draft = value.toLocaleString("de-DE", {
|
|
||||||
maximumFractionDigits: 2,
|
|
||||||
useGrouping: false,
|
|
||||||
});
|
|
||||||
void commitEdit("stay", draft, target);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Cancels current edit session and restores grid keyboard focus.
|
// Cancels current edit session and restores grid keyboard focus.
|
||||||
function cancelEdit() {
|
function cancelEdit() {
|
||||||
if (!editingCell) {
|
if (!editingCell) {
|
||||||
|
|
@ -2937,14 +2893,6 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
|
||||||
// - printable key starts overwrite edit (type-to-edit)
|
// - printable key starts overwrite edit (type-to-edit)
|
||||||
// - Arrow/Tab move selectedCell when not editing
|
// - Arrow/Tab move selectedCell when not editing
|
||||||
function handleContainerKeyDown(event: KeyboardEvent<HTMLDivElement>) {
|
function handleContainerKeyDown(event: KeyboardEvent<HTMLDivElement>) {
|
||||||
// The picker modal sits outside the grid; keep grid keys from acting behind it.
|
|
||||||
if (gzfPickerCell) {
|
|
||||||
if (event.key === "Escape") {
|
|
||||||
event.preventDefault();
|
|
||||||
closeGzfPicker();
|
|
||||||
}
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (editingCell) {
|
if (editingCell) {
|
||||||
if (event.key === "Tab") {
|
if (event.key === "Tab") {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
|
@ -3012,11 +2960,6 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
|
||||||
moveHorizontal(-1);
|
moveHorizontal(-1);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (event.altKey && event.key === "ArrowDown" && isGzfPickerCell(selectedCell)) {
|
|
||||||
event.preventDefault();
|
|
||||||
openGzfPicker(selectedCell);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (event.key === "ArrowDown") {
|
if (event.key === "ArrowDown") {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
moveVertical(1);
|
moveVertical(1);
|
||||||
|
|
@ -3179,9 +3122,6 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
|
||||||
onSave={handleSaveCircuitGroup}
|
onSave={handleSaveCircuitGroup}
|
||||||
/>
|
/>
|
||||||
) : null}
|
) : null}
|
||||||
{gzfPickerCell ? (
|
|
||||||
<GzfPickerModal onClose={closeGzfPicker} onSelect={handleGzfPicked} />
|
|
||||||
) : null}
|
|
||||||
{protectionEditorCircuit ? (
|
{protectionEditorCircuit ? (
|
||||||
<CircuitProtectionModal
|
<CircuitProtectionModal
|
||||||
equipmentIdentifier={
|
equipmentIdentifier={
|
||||||
|
|
@ -4483,13 +4423,6 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
|
||||||
} else if (event.key === "Tab") {
|
} else if (event.key === "Tab") {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
void commitEdit(event.shiftKey ? "prev" : "next");
|
void commitEdit(event.shiftKey ? "prev" : "next");
|
||||||
} else if (
|
|
||||||
event.altKey &&
|
|
||||||
event.key === "ArrowDown" &&
|
|
||||||
column.key === "simultaneityFactor"
|
|
||||||
) {
|
|
||||||
event.preventDefault();
|
|
||||||
openGzfPicker({ rowKey: row.rowKey, cellKey: column.key });
|
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
onBlur={() => {
|
onBlur={() => {
|
||||||
|
|
@ -4502,25 +4435,6 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
|
||||||
});
|
});
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
) : column.key === "simultaneityFactor" &&
|
|
||||||
cell.editable &&
|
|
||||||
isSelected ? (
|
|
||||||
<>
|
|
||||||
<button
|
|
||||||
aria-label="Gleichzeitigkeitsfaktor nach AMEV wählen"
|
|
||||||
className="cell-picker-trigger"
|
|
||||||
onClick={(event) => {
|
|
||||||
event.stopPropagation();
|
|
||||||
openGzfPicker({ rowKey: row.rowKey, cellKey: column.key });
|
|
||||||
}}
|
|
||||||
onDoubleClick={(event) => event.stopPropagation()}
|
|
||||||
title="Gleichzeitigkeitsfaktor nach AMEV wählen (Alt+↓)"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<TableProperties aria-hidden="true" size={13} />
|
|
||||||
</button>
|
|
||||||
{formatCellValue(cell.value, column.key)}
|
|
||||||
</>
|
|
||||||
) : (
|
) : (
|
||||||
formatCellValue(cell.value, column.key)
|
formatCellValue(cell.value, column.key)
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue