141 lines
4.1 KiB
JavaScript
141 lines
4.1 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
|
|
|
const defaultModel = {
|
|
id: "",
|
|
name: "",
|
|
description: "",
|
|
projectId: "",
|
|
};
|
|
const BuildingModel = ({
|
|
project,
|
|
onClose,
|
|
onSubmit,
|
|
clearTrigger,
|
|
onClearComplete,
|
|
}) => {
|
|
const [formData, setFormData] = useState(defaultModel);
|
|
|
|
useEffect(() => {
|
|
if (clearTrigger) {
|
|
setFormData(defaultModel); // Clear form
|
|
onClearComplete(); // Notify parent that clearing is done
|
|
}
|
|
}, [clearTrigger, onClearComplete]);
|
|
|
|
// Handle input change
|
|
const handleChange = (e) => {
|
|
const { name, value } = e.target;
|
|
setFormData({ ...formData, [name]: value });
|
|
};
|
|
|
|
const handleBuildigChange = (e) => {
|
|
const { name, value } = e.target;
|
|
const building = project.buildings.find((b) => b.id === Number(value));
|
|
if (building) {
|
|
delete building.floors;
|
|
building.projectId = project.id;
|
|
setFormData(building);
|
|
} else
|
|
setFormData({
|
|
id: "",
|
|
name: "",
|
|
description: "",
|
|
projectId: project.id,
|
|
});
|
|
//setFormData({ ...formData, [name]: value });
|
|
};
|
|
|
|
// Handle form submission
|
|
const handleSubmit = (e) => {
|
|
e.preventDefault();
|
|
formData.projectId = project.id;
|
|
|
|
onSubmit(formData); // Pass the updated data to the parent
|
|
};
|
|
|
|
return (
|
|
<div className="modal-dialog modal-lg modal-simple modal-edit-user">
|
|
<div className="modal-content">
|
|
<div className="modal-body">
|
|
<button
|
|
type="button"
|
|
className="btn-close"
|
|
data-bs-dismiss="modal"
|
|
aria-label="Close"
|
|
></button>
|
|
<div className="text-center mb-2">
|
|
<h5 className="mb-2">Manage Buildings - {project.name}</h5>
|
|
</div>
|
|
<form className="row g-2" onSubmit={handleSubmit}>
|
|
<div className="col-12 col-md-12">
|
|
<label className="form-label" htmlFor="name">
|
|
Select Building
|
|
</label>
|
|
<select
|
|
id="buildingId"
|
|
name="buildingId"
|
|
className="select2 form-select form-select-sm"
|
|
aria-label="Default select example"
|
|
onChange={handleBuildigChange}
|
|
value={formData.buildingId}
|
|
>
|
|
<option value="0">Add New Building</option>
|
|
{project.buildings.map((building) => (
|
|
<option key={building.id} value={building.id}>
|
|
{building.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div className="col-12 col-md-12">
|
|
<label className="form-label" htmlFor="name">
|
|
Building Name
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="name"
|
|
name="name"
|
|
className="form-control form-control-sm"
|
|
placeholder="Building Name"
|
|
onChange={handleChange}
|
|
value={formData.name}
|
|
/>
|
|
</div>
|
|
<div className="col-12 col-md-12">
|
|
<label className="form-label" htmlFor="description">
|
|
Description
|
|
</label>
|
|
<textarea
|
|
type="text"
|
|
id="description"
|
|
rows="5"
|
|
name="description"
|
|
className="form-control form-control-sm"
|
|
placeholder="Description"
|
|
onChange={handleChange}
|
|
value={formData.description}
|
|
/>
|
|
</div>
|
|
|
|
<div className="col-12 text-center">
|
|
<button type="submit" className="btn btn-primary me-3">
|
|
{formData.id ? "Edit Building" : "Add Building"}
|
|
</button>
|
|
<button
|
|
type="reset"
|
|
className="btn btn-label-secondary"
|
|
data-bs-dismiss="modal"
|
|
aria-label="Close"
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default BuildingModel;
|