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

Validate project device drop targets

Browse Source
This commit is contained in:
Julian Appel
2026-07-22 20:07:09 +02:00
parent b2f5ce77a5
commit fd62bf2e15
6 changed files with 231 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/frontend/components/circuit-tree-editor.tsx
+156 -28
View File
@@ -1,6 +1,10 @@
"use client";
import { DragEvent, KeyboardEvent, useEffect, useMemo, useRef, useState } from "react";
import {
inferProjectDeviceSectionKey,
isProjectDevicePlacementValid,
} from "../../domain/services/project-device-placement.service";
import {
createCircuit,
createCircuitDeviceRow,
@@ -126,8 +130,8 @@ interface CircuitSnapshot {
}
type ProjectDeviceDropIntent =
| { kind: "new-circuit"; sectionId: string }
| { kind: "add-to-circuit"; circuitId: string; sectionId: string };
| { kind: "new-circuit"; sectionId: string; valid: boolean }
| { kind: "add-to-circuit"; circuitId: string; sectionId: string; valid: boolean };
type DeviceRowMoveDropIntent =
| { kind: "move-to-circuit"; circuitId: string; sectionId: string }
@@ -1706,6 +1710,21 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
return projectDevices.find((device) => device.id === selectedProjectDeviceId) ?? null;
}
function isProjectDeviceTargetValid(device: ProjectDeviceDto, sectionId: string) {
const section = data?.sections.find((entry) => entry.id === sectionId);
return Boolean(section && isProjectDevicePlacementValid(device, section));
}
function getProjectDeviceTargetError(device: ProjectDeviceDto, sectionId: string) {
const target = data?.sections.find((entry) => entry.id === sectionId);
const expectedKey = inferProjectDeviceSectionKey(device);
const expected = data?.sections.find((entry) => entry.key === expectedKey);
if (!target) {
return "Invalid target section.";
}
return `${device.displayName || device.name} belongs in ${expected?.displayName ?? expectedKey}, not ${target.displayName}.`;
}
async function handleAddProjectDeviceAsNewCircuit() {
const device = resolveSelectedProjectDevice();
if (!device) {
@@ -1716,6 +1735,10 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
setError("Please select a target section.");
return;
}
if (!isProjectDeviceTargetValid(device, targetSectionId)) {
setError(getProjectDeviceTargetError(device, targetSectionId));
return;
}
let createdCircuitId: string | null = null;
let createdRowId: string | null = null;
await runCommand({
@@ -1764,6 +1787,11 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
setError("Please select a target circuit.");
return;
}
const sectionId = findCircuitSectionId(circuitId);
if (!sectionId || !isProjectDeviceTargetValid(device, sectionId)) {
setError(getProjectDeviceTargetError(device, sectionId ?? ""));
return;
}
let createdRowId: string | null = null;
await runCommand({
@@ -2076,6 +2104,10 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
setError("Invalid project device drop source.");
return;
}
if (!intent.valid || !isProjectDeviceTargetValid(device, intent.sectionId)) {
setError(getProjectDeviceTargetError(device, intent.sectionId));
return;
}
// Project-device drop logic is isolated from row/circuit move logic because
// it can create new rows/circuits instead of moving existing ones.
if (intent.kind === "new-circuit") {
@@ -2580,6 +2612,25 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
const activeDraggedCircuitIds =
draggingCircuitIds.length > 0 ? draggingCircuitIds : draggingCircuitId ? [draggingCircuitId] : [];
const draggingCircuitCount = activeDraggedCircuitIds.length;
const selectedProjectDevice = resolveSelectedProjectDevice();
const suggestedSection = selectedProjectDevice
? data.sections.find((section) => section.key === inferProjectDeviceSectionKey(selectedProjectDevice))
: null;
const selectedRowCircuitId = selectedCell ? findRow(selectedCell.rowKey)?.circuit?.id ?? null : null;
const resolvedSidebarTargetCircuitId = targetCircuitId ?? selectedRowCircuitId;
const resolvedSidebarTargetSectionId = resolvedSidebarTargetCircuitId
? findCircuitSectionId(resolvedSidebarTargetCircuitId)
: null;
const canAddToSelectedSection = Boolean(
selectedProjectDevice &&
targetSectionId &&
isProjectDeviceTargetValid(selectedProjectDevice, targetSectionId)
);
const canAddToSelectedCircuit = Boolean(
selectedProjectDevice &&
resolvedSidebarTargetSectionId &&
isProjectDeviceTargetValid(selectedProjectDevice, resolvedSidebarTargetSectionId)
);
return (
<div className="tree-editor-shell">
@@ -2722,14 +2773,24 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
onChange={(event) => setTargetSectionId(event.target.value || null)}
>
<option value="">Select section...</option>
{data.sections.map((section) => (
<option key={section.id} value={section.id}>
{section.displayName}
</option>
))}
{data.sections.map((section) => {
const valid = !selectedProjectDevice || isProjectDevicePlacementValid(selectedProjectDevice, section);
return (
<option key={section.id} value={section.id} disabled={!valid}>
{section.displayName}{valid ? "" : " (not valid)"}
</option>
);
})}
</select>
</label>
<button type="button" onClick={() => void handleAddProjectDeviceAsNewCircuit()}>
{selectedProjectDevice && suggestedSection ? (
<p className="notice muted">Suggested section: {suggestedSection.displayName}</p>
) : null}
<button
type="button"
disabled={!canAddToSelectedSection}
onClick={() => void handleAddProjectDeviceAsNewCircuit()}
>
Add as new circuit
</button>
<label>
@@ -2739,14 +2800,21 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
onChange={(event) => setTargetCircuitId(event.target.value || null)}
>
<option value="">Use selected row circuit...</option>
{circuitOptions.map((option) => (
<option key={option.id} value={option.id}>
{option.label}
</option>
))}
{circuitOptions.map((option) => {
const valid = !selectedProjectDevice || isProjectDeviceTargetValid(selectedProjectDevice, option.sectionId);
return (
<option key={option.id} value={option.id} disabled={!valid}>
{option.label}{valid ? "" : " (not valid)"}
</option>
);
})}
</select>
</label>
<button type="button" onClick={() => void handleAddProjectDeviceToCircuit()}>
<button
type="button"
disabled={!canAddToSelectedCircuit}
onClick={() => void handleAddProjectDeviceToCircuit()}
>
Add to selected circuit
</button>
</div>
@@ -2849,7 +2917,13 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
<tr
key={row.rowKey}
className={`section-row ${
dropIntent?.kind === "new-circuit" && dropIntent.sectionId === section.id ? "drop-target-active" : ""
dropIntent?.kind === "new-circuit" && dropIntent.sectionId === section.id && dropIntent.valid
? "drop-target-active"
: ""
} ${
dropIntent?.kind === "new-circuit" && dropIntent.sectionId === section.id && !dropIntent.valid
? "drop-target-invalid"
: ""
}`}
onDragOver={(event) => {
if (draggingCircuitCount > 0) {
@@ -2865,9 +2939,11 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
if (!draggingProjectDeviceId) {
return;
}
const device = projectDevices.find((entry) => entry.id === draggingProjectDeviceId);
const valid = Boolean(device && isProjectDevicePlacementValid(device, section));
event.preventDefault();
event.dataTransfer.dropEffect = "copy";
setDropIntent({ kind: "new-circuit", sectionId: section.id });
event.dataTransfer.dropEffect = valid ? "copy" : "none";
setDropIntent({ kind: "new-circuit", sectionId: section.id, valid });
}}
onDragLeave={() => {
if (dropIntent?.kind === "new-circuit" && dropIntent.sectionId === section.id) {
@@ -2879,7 +2955,12 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
}}
onDrop={(event) => {
if (draggingProjectDeviceId) {
void handleDropWithIntent(event, { kind: "new-circuit", sectionId: section.id });
const device = projectDevices.find((entry) => entry.id === draggingProjectDeviceId);
void handleDropWithIntent(event, {
kind: "new-circuit",
sectionId: section.id,
valid: Boolean(device && isProjectDevicePlacementValid(device, section)),
});
return;
}
if (draggingCircuitCount > 0) {
@@ -2910,7 +2991,9 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
</div>
</div>
{dropIntent?.kind === "new-circuit" && dropIntent.sectionId === section.id ? (
<span className="drop-hint">drop here to create new circuit</span>
<span className="drop-hint">
{dropIntent.valid ? "drop here to create new circuit" : "device does not match this section"}
</span>
) : null}
</td>
</tr>
@@ -2932,11 +3015,18 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
: ""
} ${
row.rowType === "placeholder" &&
((dropIntent?.kind === "new-circuit" && dropIntent.sectionId === row.sectionId) ||
((dropIntent?.kind === "new-circuit" && dropIntent.sectionId === row.sectionId && dropIntent.valid) ||
(deviceMoveIntent?.kind === "move-to-new-circuit" && deviceMoveIntent.sectionId === row.sectionId) ||
(circuitReorderIntent?.kind === "section-end" && circuitReorderIntent.sectionId === row.sectionId))
? "drop-target-active"
: ""
} ${
row.rowType === "placeholder" &&
dropIntent?.kind === "new-circuit" &&
dropIntent.sectionId === row.sectionId &&
!dropIntent.valid
? "drop-target-invalid"
: ""
} ${
row.rowType === "placeholder" &&
circuitReorderIntent?.kind === "section-end" &&
@@ -2944,6 +3034,20 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
!circuitReorderIntent.valid
? "drop-target-invalid"
: ""
} ${
row.circuit &&
dropIntent?.kind === "add-to-circuit" &&
dropIntent.circuitId === row.circuit.id &&
dropIntent.valid
? "drop-target-active"
: ""
} ${
row.circuit &&
dropIntent?.kind === "add-to-circuit" &&
dropIntent.circuitId === row.circuit.id &&
!dropIntent.valid
? "drop-target-invalid"
: ""
} ${
row.circuit &&
circuitReorderIntent &&
@@ -3014,16 +3118,24 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
return;
}
if (draggingProjectDeviceId) {
const device = projectDevices.find((entry) => entry.id === draggingProjectDeviceId);
const section = data.sections.find((entry) => entry.id === row.sectionId);
const valid = Boolean(device && section && isProjectDevicePlacementValid(device, section));
if (row.rowType === "placeholder") {
event.preventDefault();
event.dataTransfer.dropEffect = "copy";
setDropIntent({ kind: "new-circuit", sectionId: row.sectionId });
event.dataTransfer.dropEffect = valid ? "copy" : "none";
setDropIntent({ kind: "new-circuit", sectionId: row.sectionId, valid });
return;
}
if (row.circuit && row.rowType !== "deviceRow") {
event.preventDefault();
event.dataTransfer.dropEffect = "copy";
setDropIntent({ kind: "add-to-circuit", circuitId: row.circuit.id, sectionId: row.sectionId });
event.dataTransfer.dropEffect = valid ? "copy" : "none";
setDropIntent({
kind: "add-to-circuit",
circuitId: row.circuit.id,
sectionId: row.sectionId,
valid,
});
}
return;
}
@@ -3119,8 +3231,11 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
return;
}
if (draggingProjectDeviceId) {
const device = projectDevices.find((entry) => entry.id === draggingProjectDeviceId);
const section = data.sections.find((entry) => entry.id === row.sectionId);
const valid = Boolean(device && section && isProjectDevicePlacementValid(device, section));
if (row.rowType === "placeholder") {
void handleDropWithIntent(event, { kind: "new-circuit", sectionId: row.sectionId });
void handleDropWithIntent(event, { kind: "new-circuit", sectionId: row.sectionId, valid });
return;
}
if (row.circuit && row.rowType !== "deviceRow") {
@@ -3128,6 +3243,7 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
kind: "add-to-circuit",
circuitId: row.circuit.id,
sectionId: row.sectionId,
valid,
});
}
return;
@@ -3287,10 +3403,18 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
})}
<td
className={`action-cell ${
(dropIntent?.kind === "add-to-circuit" && dropIntent.circuitId === row.circuit?.id) ||
(dropIntent?.kind === "add-to-circuit" &&
dropIntent.circuitId === row.circuit?.id &&
dropIntent.valid) ||
(deviceMoveIntent?.kind === "move-to-circuit" && deviceMoveIntent.circuitId === row.circuit?.id)
? "drop-target-active"
: ""
} ${
dropIntent?.kind === "add-to-circuit" &&
dropIntent.circuitId === row.circuit?.id &&
!dropIntent.valid
? "drop-target-invalid"
: ""
}`}
>
{row.circuit && row.rowType !== "deviceRow" ? (
@@ -3317,10 +3441,14 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
</button>
) : null}
{dropIntent?.kind === "new-circuit" && row.rowType === "placeholder" && dropIntent.sectionId === row.sectionId ? (
<span className="drop-hint">new circuit in this section</span>
<span className="drop-hint">
{dropIntent.valid ? "new circuit in this section" : "device does not match this section"}
</span>
) : null}
{dropIntent?.kind === "add-to-circuit" && dropIntent.circuitId === row.circuit?.id ? (
<span className="drop-hint">add to this circuit</span>
<span className="drop-hint">
{dropIntent.valid ? "add to this circuit" : "device does not match this circuit section"}
</span>
) : null}
{deviceMoveIntent?.kind === "move-to-new-circuit" &&
row.rowType === "placeholder" &&