forked from jappel/leistungsbilanz-ts
97 lines
3 KiB
TypeScript
97 lines
3 KiB
TypeScript
"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>
|
|
);
|
|
}
|