Add editable project floors and rooms

src/app/projects/[projectId]/page.tsx

@@ -11,7 +11,9 @@ import {
   createFloor,
   createProjectDevice,
   createRoom,
+  deleteFloor,
   deleteProjectDevice,
+  deleteRoom,
   deleteDistributionBoard,
   disconnectProjectDeviceRows,
   exportProjectTransfer,
@@ -26,8 +28,10 @@ import {
   importProjectTransfer,
   synchronizeProjectDeviceRows,
   updateDistributionBoard,
+  updateFloor,
   updateProjectDevice,
   updateProjectSettings,
+  updateRoom,
 } from "../../../frontend/utils/api";
 import type {
   CircuitListDto,
@@ -95,9 +99,11 @@ export default function ProjectDetailPage() {
   ] = useState("1");
   const [editingBoardCopyName, setEditingBoardCopyName] = useState("");
   const [floorName, setFloorName] = useState("");
+  const [editingFloor, setEditingFloor] = useState<FloorDto | null>(null);
   const [roomNumber, setRoomNumber] = useState("");
   const [roomName, setRoomName] = useState("");
   const [roomFloorId, setRoomFloorId] = useState("");
+  const [editingRoom, setEditingRoom] = useState<RoomDto | null>(null);
   const [isProjectSettingsOpen, setIsProjectSettingsOpen] = useState(false);
   const [structureModal, setStructureModal] = useState<
     "board" | "floor" | "room" | null
@@ -239,7 +245,7 @@ export default function ProjectDetailPage() {
     }
   }
 
-  async function handleCreateFloor(event: FormEvent<HTMLFormElement>) {
+  async function handleSaveFloor(event: FormEvent<HTMLFormElement>) {
     event.preventDefault();
     if (!projectId || !project || !floorName.trim()) {
       return;
@@ -247,23 +253,37 @@ export default function ProjectDetailPage() {
     setIsSaving(true);
     setError(null);
     try {
-      const result = await createFloor(
-        projectId,
-        { name: floorName.trim() },
-        project.currentRevision
+      const result = editingFloor
+        ? await updateFloor(
+            projectId,
+            editingFloor.id,
+            { name: floorName.trim() },
+            project.currentRevision
+          )
+        : await createFloor(
+            projectId,
+            { name: floorName.trim() },
+            project.currentRevision
+          );
+      setFloors((current) =>
+        editingFloor
+          ? current.map((floor) =>
+              floor.id === result.floor.id ? result.floor : floor
+            )
+          : [...current, result.floor]
       );
-      setFloors((current) => [...current, result.floor]);
       applyProjectRevision(result.history.currentRevision);
       setFloorName("");
+      setEditingFloor(null);
       setStructureModal(null);
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Etage konnte nicht erstellt werden.");
+      setError(err instanceof Error ? err.message : "Etage konnte nicht gespeichert werden.");
     } finally {
       setIsSaving(false);
     }
   }
 
-  async function handleCreateRoom(event: FormEvent<HTMLFormElement>) {
+  async function handleSaveRoom(event: FormEvent<HTMLFormElement>) {
     event.preventDefault();
     if (
       !projectId ||
@@ -276,23 +296,34 @@ export default function ProjectDetailPage() {
     setIsSaving(true);
     setError(null);
     try {
-      const result = await createRoom(
-        projectId,
-        {
-          floorId: roomFloorId || undefined,
-          roomNumber: roomNumber.trim(),
-          roomName: roomName.trim(),
-        },
-        project.currentRevision
+      const input = {
+        floorId: roomFloorId || undefined,
+        roomNumber: roomNumber.trim(),
+        roomName: roomName.trim(),
+      };
+      const result = editingRoom
+        ? await updateRoom(
+            projectId,
+            editingRoom.id,
+            input,
+            project.currentRevision
+          )
+        : await createRoom(projectId, input, project.currentRevision);
+      setRooms((current) =>
+        editingRoom
+          ? current.map((room) =>
+              room.id === result.room.id ? result.room : room
+            )
+          : [...current, result.room]
       );
-      setRooms((current) => [...current, result.room]);
       applyProjectRevision(result.history.currentRevision);
       setRoomNumber("");
       setRoomName("");
       setRoomFloorId("");
+      setEditingRoom(null);
       setStructureModal(null);
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Raum konnte nicht erstellt werden.");
+      setError(err instanceof Error ? err.message : "Raum konnte nicht gespeichert werden.");
     } finally {
       setIsSaving(false);
     }
@@ -467,6 +498,74 @@ export default function ProjectDetailPage() {
     }
   }
 
+  function openCreateFloor() {
+    setEditingFloor(null);
+    setFloorName("");
+    setStructureModal("floor");
+  }
+
+  function openEditFloor(floor: FloorDto) {
+    setEditingFloor(floor);
+    setFloorName(floor.name);
+    setStructureModal("floor");
+  }
+
+  function openCreateRoom() {
+    setEditingRoom(null);
+    setRoomNumber("");
+    setRoomName("");
+    setRoomFloorId("");
+    setStructureModal("room");
+  }
+
+  function openEditRoom(room: RoomDto) {
+    setEditingRoom(room);
+    setRoomNumber(room.roomNumber);
+    setRoomName(room.roomName);
+    setRoomFloorId(room.floorId ?? "");
+    setStructureModal("room");
+  }
+
+  async function handleDeleteFloor() {
+    if (!projectId || !project || !editingFloor) return;
+    if (!window.confirm(`Etage „${editingFloor.name}“ wirklich löschen?`)) return;
+    setIsSaving(true);
+    setError(null);
+    try {
+      const result = await deleteFloor(projectId, editingFloor.id, project.currentRevision);
+      setFloors((current) => current.filter((floor) => floor.id !== editingFloor.id));
+      applyProjectRevision(result.history.currentRevision);
+      setEditingFloor(null);
+      setFloorName("");
+      setStructureModal(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Etage konnte nicht gelöscht werden.");
+    } finally {
+      setIsSaving(false);
+    }
+  }
+
+  async function handleDeleteRoom() {
+    if (!projectId || !project || !editingRoom) return;
+    if (!window.confirm(`Raum „${editingRoom.roomNumber} ${editingRoom.roomName}“ wirklich löschen?`)) return;
+    setIsSaving(true);
+    setError(null);
+    try {
+      const result = await deleteRoom(projectId, editingRoom.id, project.currentRevision);
+      setRooms((current) => current.filter((room) => room.id !== editingRoom.id));
+      applyProjectRevision(result.history.currentRevision);
+      setEditingRoom(null);
+      setRoomNumber("");
+      setRoomName("");
+      setRoomFloorId("");
+      setStructureModal(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Raum konnte nicht gelöscht werden.");
+    } finally {
+      setIsSaving(false);
+    }
+  }
+
   async function handleCopyBoard() {
     if (
       !projectId ||
@@ -907,7 +1006,7 @@ export default function ProjectDetailPage() {
               </div>
               <button
                 className="btn btn-sm btn-outline-primary"
-                onClick={() => setStructureModal("floor")}
+                onClick={openCreateFloor}
                 type="button"
               >
                 Hinzufügen
@@ -915,8 +1014,11 @@ export default function ProjectDetailPage() {
             </div>
             <ul className="list-group list-group-flush">
               {floors.map((floor) => (
-                <li className="list-group-item" key={floor.id}>
-                  {floor.name}
+                <li className="list-group-item d-flex justify-content-between align-items-center gap-2" key={floor.id}>
+                  <span>{floor.name}</span>
+                  <button className="btn btn-sm btn-outline-secondary" onClick={() => openEditFloor(floor)} type="button">
+                    Bearbeiten
+                  </button>
                 </li>
               ))}
               {!floors.length ? (
@@ -935,7 +1037,7 @@ export default function ProjectDetailPage() {
               </div>
               <button
                 className="btn btn-sm btn-outline-primary"
-                onClick={() => setStructureModal("room")}
+                onClick={openCreateRoom}
                 type="button"
               >
                 Hinzufügen
@@ -948,6 +1050,7 @@ export default function ProjectDetailPage() {
                     <th>Raumnummer</th>
                     <th>Raumname</th>
                     <th>Etage</th>
+                    <th className="text-end">Aktionen</th>
                   </tr>
                 </thead>
                 <tbody>
@@ -956,11 +1059,16 @@ export default function ProjectDetailPage() {
                       <td>{room.roomNumber}</td>
                       <td>{room.roomName}</td>
                       <td>{room.floorId ? floorById.get(room.floorId)?.name ?? "-" : "-"}</td>
+                      <td className="text-end">
+                        <button className="btn btn-sm btn-outline-secondary" onClick={() => openEditRoom(room)} type="button">
+                          Bearbeiten
+                        </button>
+                      </td>
                     </tr>
                   ))}
                   {!rooms.length ? (
                     <tr>
-                      <td colSpan={3} className="text-center text-secondary py-4">
+                      <td colSpan={4} className="text-center text-secondary py-4">
                         Noch keine Räume vorhanden.
                       </td>
                     </tr>
@@ -1432,11 +1540,14 @@ export default function ProjectDetailPage() {
       {structureModal === "floor" ? (
         <FormModal
           isSaving={isSaving}
-          onClose={() => setStructureModal(null)}
-          onSubmit={handleCreateFloor}
+          onClose={() => {
+            setStructureModal(null);
+            setEditingFloor(null);
+          }}
+          onSubmit={handleSaveFloor}
           submitDisabled={!floorName.trim()}
-          submitLabel="Etage hinzufügen"
-          title="Etage hinzufügen"
+          submitLabel={editingFloor ? "Änderungen speichern" : "Etage hinzufügen"}
+          title={editingFloor ? "Etage bearbeiten" : "Etage hinzufügen"}
         >
           <label className="form-label" htmlFor="floor-name">
             Bezeichnung
@@ -1450,17 +1561,30 @@ export default function ProjectDetailPage() {
             required
             value={floorName}
           />
+          {editingFloor ? (
+            <div className="border-top mt-4 pt-3">
+              <p className="text-secondary small mb-2">
+                Etagen mit zugeordneten Räumen oder Verteilungen können nicht gelöscht werden.
+              </p>
+              <button className="btn btn-outline-danger" disabled={isSaving} onClick={() => void handleDeleteFloor()} type="button">
+                Etage löschen
+              </button>
+            </div>
+          ) : null}
         </FormModal>
       ) : null}
 
       {structureModal === "room" ? (
         <FormModal
           isSaving={isSaving}
-          onClose={() => setStructureModal(null)}
-          onSubmit={handleCreateRoom}
+          onClose={() => {
+            setStructureModal(null);
+            setEditingRoom(null);
+          }}
+          onSubmit={handleSaveRoom}
           submitDisabled={!roomNumber.trim() || !roomName.trim()}
-          submitLabel="Raum anlegen"
-          title="Raum hinzufügen"
+          submitLabel={editingRoom ? "Änderungen speichern" : "Raum anlegen"}
+          title={editingRoom ? "Raum bearbeiten" : "Raum hinzufügen"}
         >
           <div className="row g-3">
             <div className="col-12 col-md-4">
@@ -1507,6 +1631,16 @@ export default function ProjectDetailPage() {
               </select>
             </div>
           </div>
+          {editingRoom ? (
+            <div className="border-top mt-4 pt-3">
+              <p className="text-secondary small mb-2">
+                In Stromkreisen verwendete Räume können nicht gelöscht werden.
+              </p>
+              <button className="btn btn-outline-danger" disabled={isSaving} onClick={() => void handleDeleteRoom()} type="button">
+                Raum löschen
+              </button>
+            </div>
+          ) : null}
         </FormModal>
       ) : null}