Configure circuit protection

src/frontend/components/circuit-tree-editor.tsx

@@ -38,6 +38,10 @@ import {
   buildCircuitDeviceRowInsertSnapshot,
   buildCircuitInsertSnapshot,
 } from "../utils/circuit-structure-command";
+import {
+  getCircuitProtectionEditorInitialValue,
+  toCircuitProtectionSnapshot,
+} from "../utils/circuit-protection-editing";
 import {
   buildCircuitDeviceRowMoveAssignments,
 } from "../utils/circuit-device-row-move-command";
@@ -95,6 +99,7 @@ import {
   redoProjectCommand,
   updateCircuitById,
   updateCircuitDeviceRowById,
+  updateCircuitProtectionCommand,
   updateCircuitGroupCommand,
   updateDistributionBoardComponentCommand,
   undoProjectCommand,
@@ -102,6 +107,7 @@ import {
 import type {
   CircuitTreeCircuitDto,
   CircuitTreeComponentDto,
+  CircuitTreeProtectionDeviceDto,
   CircuitTreeResponseDto,
   CreateCircuitDeviceRowInputDto,
   CreateCircuitInputDto,
@@ -117,6 +123,7 @@ import type {
 } from "../../domain/models/circuit-structure-project-command.model";
 import { DistributionBoardComponentModal } from "./distribution-board-component-modal";
 import { CircuitGroupModal } from "./circuit-group-modal";
+import { CircuitProtectionModal } from "./circuit-protection-modal";
 import type { CircuitGroupCategory } from "../../shared/constants/circuit-group";
 
 type SaveDirection = "stay" | "next" | "prev";
@@ -246,6 +253,8 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
     useState<StructureComponentEditorIntent | null>(null);
   const [circuitGroupEditorIntent, setCircuitGroupEditorIntent] =
     useState<CircuitGroupEditorIntent | null>(null);
+  const [protectionEditorCircuit, setProtectionEditorCircuit] =
+    useState<CircuitTreeCircuitDto | null>(null);
   const [projectDevices, setProjectDevices] = useState<ProjectDeviceDto[]>([]);
   const [isProjectDeviceDrawerOpen, setIsProjectDeviceDrawerOpen] =
     useState(false);
@@ -962,6 +971,7 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
       circuitListId,
       values: { ...values, voltage },
       deviceRows,
+      category: section.category,
     });
   }
 
@@ -1225,6 +1235,35 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
     });
   }
 
+  async function handleSaveCircuitProtection(
+    protection: CircuitTreeProtectionDeviceDto
+  ) {
+    const circuit = protectionEditorCircuit;
+    if (!circuit) {
+      return;
+    }
+    await runCommand({
+      label: "Stromkreisschutz bearbeiten",
+      redo: async () => {
+        const result = await updateCircuitProtectionCommand(
+          projectId,
+          getExpectedProjectRevision(),
+          circuit.id,
+          circuit.protectionDevice
+            ? toCircuitProtectionSnapshot(
+                circuit.id,
+                circuit.protectionDevice
+              )
+            : null,
+          toCircuitProtectionSnapshot(circuit.id, protection)
+        );
+        applyProjectCommandResult(result);
+        setProtectionEditorCircuit(null);
+        return null;
+      },
+    });
+  }
+
   async function handleRedo() {
     if (historyBusy || isSaving || !historyState || historyState.redoDepth === 0) {
       return;
@@ -2834,6 +2873,23 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
           onSave={handleSaveCircuitGroup}
         />
       ) : null}
+      {protectionEditorCircuit ? (
+        <CircuitProtectionModal
+          equipmentIdentifier={
+            protectionEditorCircuit.equipmentIdentifier
+          }
+          initialProtection={getCircuitProtectionEditorInitialValue(
+            data.sections.find(
+              (section) =>
+                section.id === protectionEditorCircuit.sectionId
+            )?.category,
+            protectionEditorCircuit.protectionDevice
+          )}
+          isSaving={isSaving}
+          onClose={() => setProtectionEditorCircuit(null)}
+          onSave={handleSaveCircuitProtection}
+        />
+      ) : null}
       <div className="editor-toolbar">
         <button
           type="button"
@@ -4033,6 +4089,15 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
                   >
                     {row.circuit && row.rowType !== "deviceRow" ? (
                       <>
+                        <button
+                          type="button"
+                          tabIndex={-1}
+                          onClick={() =>
+                            setProtectionEditorCircuit(row.circuit!)
+                          }
+                        >
+                          Schutzgerät
+                        </button>
                         <button
                           type="button"
                           tabIndex={-1}