Add Revit catalog creation flow

2026-08-02 18:08:18 +02:00
parent ab2449419b
commit bc2bc7ece5
8 changed files with 435 additions and 133 deletions
@@ -0,0 +1,107 @@
+"use client";
+
+import React, { type FormEvent, useState } from "react";
+import type { CreateRoomInput, FloorDto, RoomDto } from "../types";
+import { FormModal } from "./form-modal";
+
+interface RoomModalProps {
+  floors: FloorDto[];
+  initialRoom?: RoomDto;
+  initialValues?: Partial<CreateRoomInput>;
+  isSaving: boolean;
+  onClose: () => void;
+  onDelete?: () => void;
+  onSave: (input: CreateRoomInput) => Promise<void>;
+}
+
+export function RoomModal({
+  floors,
+  initialRoom,
+  initialValues,
+  isSaving,
+  onClose,
+  onDelete,
+  onSave,
+}: RoomModalProps) {
+  const [roomNumber, setRoomNumber] = useState(
+    initialRoom?.roomNumber ?? initialValues?.roomNumber ?? ""
+  );
+  const [roomName, setRoomName] = useState(
+    initialRoom?.roomName ?? initialValues?.roomName ?? ""
+  );
+  const [floorId, setFloorId] = useState(
+    initialRoom?.floorId ?? initialValues?.floorId ?? ""
+  );
+
+  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (!roomNumber.trim() || !roomName.trim()) return;
+    await onSave({
+      floorId: floorId || undefined,
+      roomNumber: roomNumber.trim(),
+      roomName: roomName.trim(),
+    });
+  }
+
+  return (
+    <FormModal
+      isSaving={isSaving}
+      onClose={onClose}
+      onSubmit={handleSubmit}
+      submitDisabled={!roomNumber.trim() || !roomName.trim()}
+      submitLabel={initialRoom ? "Änderungen speichern" : "Raum anlegen"}
+      title={initialRoom ? "Raum bearbeiten" : "Raum hinzufügen"}
+    >
+      <div className="row g-3">
+        <div className="col-12 col-md-4">
+          <label className="form-label" htmlFor="room-number">Raumnummer</label>
+          <input
+            autoFocus
+            className="form-control"
+            id="room-number"
+            onChange={(event) => setRoomNumber(event.target.value)}
+            required
+            value={roomNumber}
+          />
+        </div>
+        <div className="col-12 col-md-8">
+          <label className="form-label" htmlFor="room-name">Raumname</label>
+          <input
+            className="form-control"
+            id="room-name"
+            onChange={(event) => setRoomName(event.target.value)}
+            required
+            value={roomName}
+          />
+        </div>
+        <div className="col-12">
+          <label className="form-label" htmlFor="room-floor">Etage</label>
+          <select
+            className="form-select"
+            id="room-floor"
+            onChange={(event) => setFloorId(event.target.value)}
+            value={floorId}
+          >
+            <option value="">Ohne Etage</option>
+            {floors.map((floor) => <option key={floor.id} value={floor.id}>{floor.name}</option>)}
+          </select>
+        </div>
+      </div>
+      {initialRoom && onDelete ? (
+        <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={onDelete}
+            type="button"
+          >
+            Raum löschen
+          </button>
+        </div>
+      ) : null}
+    </FormModal>
+  );
+}