Manage circuit groups

src/frontend/components/circuit-group-modal.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { type FormEvent, useState } from "react";
+import {
+  circuitGroupCategories,
+  circuitGroupCategoryLabels,
+  type CircuitGroupCategory,
+} from "../../shared/constants/circuit-group";
+import type { CircuitTreeSectionDto } from "../types";
+import { FormModal } from "./form-modal";
+
+interface CircuitGroupModalProps {
+  initialSection?: CircuitTreeSectionDto;
+  isSaving: boolean;
+  onClose: () => void;
+  onSave: (values: {
+    category: CircuitGroupCategory;
+    displayName: string;
+  }) => Promise<void>;
+}
+
+export function CircuitGroupModal({
+  initialSection,
+  isSaving,
+  onClose,
+  onSave,
+}: CircuitGroupModalProps) {
+  const [category, setCategory] = useState<CircuitGroupCategory>(
+    initialSection?.category ?? "lighting"
+  );
+  const [displayName, setDisplayName] = useState(
+    initialSection?.displayName ?? ""
+  );
+
+  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    await onSave({ category, displayName });
+  }
+
+  return (
+    <FormModal
+      description={
+        initialSection
+          ? "Nur der Anzeigename wird geändert. Kategorie, Nummer, Präfix und vorhandene BMK bleiben stabil."
+          : "Die nächste freie Gruppennummer der gewählten Kategorie wird automatisch vergeben."
+      }
+      isSaving={isSaving}
+      onClose={onClose}
+      onSubmit={handleSubmit}
+      submitDisabled={Boolean(initialSection && !displayName.trim())}
+      submitLabel={initialSection ? "Änderungen speichern" : "Gruppe anlegen"}
+      title={initialSection ? "Stromkreisgruppe bearbeiten" : "Stromkreisgruppe hinzufügen"}
+    >
+      <div className="row g-3">
+        <div className="col-12 col-md-6">
+          <label className="form-label" htmlFor="circuit-group-category">
+            Kategorie
+          </label>
+          <select
+            autoFocus={!initialSection}
+            className="form-select"
+            disabled={Boolean(initialSection)}
+            id="circuit-group-category"
+            onChange={(event) =>
+              setCategory(event.target.value as CircuitGroupCategory)
+            }
+            value={category}
+          >
+            {circuitGroupCategories.map((entry) => (
+              <option key={entry} value={entry}>
+                {circuitGroupCategoryLabels[entry]}
+              </option>
+            ))}
+          </select>
+        </div>
+        <div className="col-12 col-md-6">
+          <label className="form-label" htmlFor="circuit-group-name">
+            Anzeigename
+          </label>
+          <input
+            autoFocus={Boolean(initialSection)}
+            className="form-control"
+            id="circuit-group-name"
+            onChange={(event) => setDisplayName(event.target.value)}
+            placeholder={
+              initialSection
+                ? undefined
+                : "Leer lassen für den automatisch erzeugten Namen"
+            }
+            required={Boolean(initialSection)}
+            value={displayName}
+          />
+        </div>
+      </div>
+    </FormModal>
+  );
+}