155 lines
4.3 KiB
JavaScript
155 lines
4.3 KiB
JavaScript
import { useEffect, useState } from "react";
|
|
import Building from "./Building";
|
|
import Floor from "./Floor";
|
|
import FloorModel from "./FloorModel";
|
|
import showToast from "../../../services/toastService";
|
|
import ProjectRepository from "../../../repositories/ProjectRepository";
|
|
|
|
const InfraTable = ({ buildings }) => {
|
|
const [projectBuilding, setProjectBuilding] = useState([]);
|
|
const [expandedBuildings, setExpandedBuildings] = useState([]);
|
|
const [showFloorModal, setShowFloorModal] = useState(false);
|
|
const [selectedBuilding, setSelectedBuilding] = useState(null);
|
|
const [clearTrigger, setClearTrigger] = useState(false);
|
|
|
|
const toggleBuilding = (buildingId) => {
|
|
setExpandedBuildings((prevExpanded) =>
|
|
prevExpanded.includes(buildingId)
|
|
? prevExpanded.filter((id) => id !== buildingId)
|
|
: [...prevExpanded, buildingId]
|
|
);
|
|
};
|
|
|
|
const handleAddFloor = (building) => {
|
|
setSelectedBuilding(building);
|
|
setShowFloorModal(true);
|
|
};
|
|
|
|
const handleFloorSubmit = async (data) => {
|
|
try {
|
|
const payload = [
|
|
{
|
|
building: null,
|
|
floor: {
|
|
id: data.id || "0",
|
|
floorName: data.floorName,
|
|
buildingId: data.buildingId,
|
|
},
|
|
workArea: null,
|
|
},
|
|
];
|
|
|
|
const res = await ProjectRepository.manageProjectInfra(payload);
|
|
|
|
if (res?.success) {
|
|
showToast("Floor saved successfully!", "success");
|
|
|
|
// Find and update the correct building
|
|
const updatedBuildings = projectBuilding.map((b) => {
|
|
if (b.id === parseInt(data.buildingId)) {
|
|
const newFloor = {
|
|
id: res.data?.[0]?.floor?.id || Math.random(),
|
|
floorName: res.data?.[0]?.floor?.floorName || data.floorName,
|
|
workAreas: [],
|
|
};
|
|
|
|
return {
|
|
...b,
|
|
floors: [...(b.floors || []), newFloor],
|
|
};
|
|
}
|
|
return b;
|
|
});
|
|
|
|
setProjectBuilding(updatedBuildings);
|
|
setShowFloorModal(false);
|
|
setClearTrigger(true);
|
|
} else {
|
|
showToast("Failed to save floor", "error");
|
|
}
|
|
} catch (err) {
|
|
console.error("Error adding floor", err);
|
|
showToast("Error occurred while saving floor", "error");
|
|
}
|
|
};
|
|
|
|
|
|
const handleClearComplete = () => {
|
|
setClearTrigger(false);
|
|
};
|
|
|
|
const getContent = (building) => {
|
|
return building.floors?.length > 0 ? (
|
|
building.floors.map((floor) => (
|
|
<Floor
|
|
key={floor.id}
|
|
forBuilding={building}
|
|
floor={floor}
|
|
workAreas={floor.workAreas}
|
|
/>
|
|
))
|
|
) : (
|
|
<tr>
|
|
<td colSpan="4">
|
|
<div className="alert alert-warning text-center mb-0" role="alert">
|
|
<p>No floors have been added yet. Please add floors to start managing your building.</p>
|
|
<button
|
|
type="button"
|
|
className="btn btn-xs btn-primary"
|
|
onClick={() => handleAddFloor(building)}
|
|
>
|
|
<i className="bx bx-plus-circle me-2"></i>
|
|
Add Floors
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
);
|
|
};
|
|
useEffect(() => {
|
|
setProjectBuilding(buildings);
|
|
}, [buildings]);
|
|
|
|
return (
|
|
<div >
|
|
{projectBuilding && projectBuilding.length > 0 && (
|
|
<table className="table table-bordered">
|
|
<tbody>
|
|
{projectBuilding.map((building) => (
|
|
<Building
|
|
key={building.id}
|
|
building={building}
|
|
toggleBuilding={toggleBuilding}
|
|
expandedBuildings={expandedBuildings}
|
|
getContent={getContent}
|
|
/>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
)}
|
|
{showFloorModal && selectedBuilding && (
|
|
<div
|
|
className="modal fade show"
|
|
id="floor-model"
|
|
tabIndex="-1"
|
|
style={{ display: "block" }}
|
|
aria-modal="true"
|
|
role="dialog"
|
|
>
|
|
<FloorModel
|
|
project={{
|
|
buildings: [selectedBuilding]
|
|
}}
|
|
onClose={() => setShowFloorModal(false)}
|
|
onSubmit={handleFloorSubmit}
|
|
onClearComplete={handleClearComplete}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default InfraTable;
|