108 lines
3.2 KiB
TypeScript
108 lines
3.2 KiB
TypeScript
"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>
|
|
);
|
|
}
|