485 lines
14 KiB
JavaScript
485 lines
14 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
|
import "./ProjectInfra.css";
|
|
import BuildingModel from "./Infrastructure/BuildingModel";
|
|
import FloorModel from "./Infrastructure/FloorModel";
|
|
import showToast from "../../services/toastService";
|
|
import WorkAreaModel from "./Infrastructure/WorkAreaModel";
|
|
import TaskModel from "./Infrastructure/TaskModel";
|
|
import ProjectRepository, {TasksRepository} from "../../repositories/ProjectRepository";
|
|
import ProjectModal from "./ProjectModal";
|
|
import {useHasUserPermission} from "../../hooks/useHasUserPermission";
|
|
import {MANAGE_PROJECT_INFRA} from "../../utils/constants";
|
|
import InfraTable from "./Infrastructure/InfraTable";
|
|
import {cacheData} from "../../slices/apiDataManager";
|
|
|
|
|
|
|
|
const ProjectInfra = ({ data, activityMaster, onDataChange,eachSiteEngineer }) => {
|
|
const [expandedBuildings, setExpandedBuildings] = useState([]);
|
|
const [project, setProject] = useState(data);
|
|
const[modalConfig,setModalConfig] = useState({type:null,data:null});
|
|
const [ isModalOpen, setIsModalOpen ] = useState( false )
|
|
const ManageInfra = useHasUserPermission(MANAGE_PROJECT_INFRA)
|
|
|
|
const [buildings, setBuildings] = useState(data.buildings);
|
|
const [isBuildingModalOpen, setIsBuildingModalOpen] = useState(false);
|
|
const [isFloorModalOpen, setIsFloorModalOpen] = useState(false);
|
|
const [isWorkAreaModelOpen, setIsWorkAreaModalOpen] = useState(false);
|
|
const [isTaskModelOpen, setIsTaskModalOpen] = useState(false);
|
|
const [isAssignRoleModal,setIsAssingRoleModal] = useState(false)
|
|
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
|
|
const [clearFormTrigger, setClearFormTrigger] = useState(false);
|
|
const [ CurrentBuilding, setCurrentBuilding ] = useState( "" )
|
|
const [showModal, setShowModal] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setProject(data);
|
|
setBuildings(data.buildings);
|
|
}, [data]);
|
|
|
|
|
|
|
|
const openFloorModel = (projectData) => {
|
|
setIsFloorModalOpen(true);
|
|
};
|
|
const closeFloorModel = () => {
|
|
setIsFloorModalOpen(false);
|
|
|
|
};
|
|
|
|
const openAssignModel=(assignData)=>{
|
|
|
|
setCurrentBuilding(assignData)
|
|
setIsAssingRoleModal(true)
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const openBuildingModel = (projectData) => {
|
|
setIsBuildingModalOpen(true);
|
|
};
|
|
|
|
|
|
|
|
const submitData = async (infraObject) => {
|
|
|
|
try
|
|
{
|
|
console.log(infraObject)
|
|
let response = await ProjectRepository.manageProjectInfra( infraObject );
|
|
const entity = response.data;
|
|
|
|
const updatedProject = { ...project };
|
|
// Handle the building data
|
|
if (entity.building) {
|
|
const { id, name, description } = entity.building;
|
|
const updatedBuildings = updatedProject.buildings.map((building) =>
|
|
building.id === id
|
|
? { ...building, name, description }
|
|
: building
|
|
);
|
|
|
|
// Add building if it doesn't exist
|
|
if (!updatedProject.buildings.some((building) => building.id === id)) {
|
|
updatedBuildings.push({
|
|
id: id,
|
|
name,
|
|
description,
|
|
floor: [],
|
|
});
|
|
}
|
|
|
|
updatedProject.buildings = updatedBuildings;
|
|
|
|
// Update the cache for buildings
|
|
cacheData( "projectInfo", {projectId: updatedProject.id, data: updatedProject} );
|
|
setProject(updatedProject)
|
|
}
|
|
// Handle the floor data
|
|
else if ( entity.floor )
|
|
{
|
|
const { buildingId, id, floorName } = entity.floor;
|
|
const updatedBuildings = updatedProject.buildings.map((building) =>
|
|
building.id == buildingId
|
|
? {
|
|
...building,
|
|
floors: building.floors.map( ( floor ) =>
|
|
|
|
floor.id === id
|
|
? {
|
|
...floor,
|
|
floorName, // Update the floor name only
|
|
// Keep other properties as they are (including workArea)
|
|
}
|
|
: floor
|
|
)
|
|
// Add the new floor if it doesn't already exist
|
|
.concat(
|
|
!building.floors.some((floor) => floor.id === id)
|
|
? [{ id: id, floorName, workArea: null }] // New floor added with workArea set to null
|
|
: []
|
|
),
|
|
}
|
|
: building
|
|
);
|
|
|
|
updatedProject.buildings = updatedBuildings;
|
|
|
|
// Cache the updated project
|
|
cacheData( "projectInfo", {projectId: updatedProject.id, data: updatedProject} );
|
|
setProject(updatedProject)
|
|
}
|
|
// Handle the work area data
|
|
else if ( entity.workArea )
|
|
{
|
|
|
|
|
|
let buildingId = infraObject[0].workArea.buildingId
|
|
|
|
const { floorId, areaName, id } = entity.workArea;
|
|
// Check if the workArea exists, otherwise create a new one
|
|
const updatedBuildings = updatedProject.buildings.map((building) =>
|
|
building.id == buildingId
|
|
? {
|
|
...building,
|
|
floors: building.floors.map((floor) =>
|
|
floor.id == floorId
|
|
? {
|
|
...floor,
|
|
workAreas: floor.workAreas.some((workArea) => workArea.id === id)
|
|
? floor.workAreas.map((workArea) =>
|
|
workArea.id === id
|
|
? { ...workArea, areaName }
|
|
: workArea
|
|
)
|
|
: [
|
|
...floor.workAreas,
|
|
{ id, areaName, workItems: null },
|
|
],
|
|
}
|
|
: floor
|
|
),
|
|
}
|
|
: building
|
|
);
|
|
|
|
updatedProject.buildings = updatedBuildings;
|
|
|
|
// Update the cache for work areas
|
|
cacheData( "projectInfo", {projectId: updatedProject.id, data: updatedProject} );
|
|
setProject(updatedProject)
|
|
}
|
|
// Handle the task (workItem) data
|
|
|
|
else {
|
|
console.error("Unsupported data type for submitData", entity);
|
|
}
|
|
} catch ( Err )
|
|
{
|
|
showToast("Somthing wrong","error")
|
|
}
|
|
|
|
|
|
|
|
|
|
handleClose()
|
|
};
|
|
|
|
|
|
const closeBuildingModel = () => {
|
|
setIsBuildingModalOpen(false);
|
|
};
|
|
|
|
const handleBuildingModelFormSubmit = (buildingmodel) => {
|
|
if (buildingmodel.id == "" || buildingmodel.id == 0)
|
|
delete buildingmodel.id;
|
|
let data = [
|
|
{
|
|
building: buildingmodel,
|
|
floor: null,
|
|
workArea: null,
|
|
},
|
|
];
|
|
submitData(data);
|
|
};
|
|
const handleFloorModelFormSubmit = (updatedFloor) => {
|
|
if (updatedFloor.id == "") delete updatedFloor.id;
|
|
|
|
submitData([
|
|
{
|
|
building: null,
|
|
floor: updatedFloor,
|
|
workArea: null,
|
|
},
|
|
]);
|
|
};
|
|
|
|
const openWorkAreaModel = (projectData) => {
|
|
setIsWorkAreaModalOpen(true);
|
|
};
|
|
|
|
const closeWorkAreaModel = () => {
|
|
setIsWorkAreaModalOpen(false);
|
|
|
|
};
|
|
const handleWorkAreaModelFormSubmit = (updatedModel) => {
|
|
if (updatedModel.id == "") delete updatedModel.id;
|
|
|
|
submitData([
|
|
{
|
|
building: null,
|
|
floor: null,
|
|
workArea: updatedModel,
|
|
},
|
|
]);
|
|
};
|
|
|
|
const openTaskModel = (projectData) => {
|
|
setIsTaskModalOpen(true);
|
|
};
|
|
|
|
const closeTaskModel = () => {
|
|
setIsTaskModalOpen(false);
|
|
|
|
};
|
|
|
|
const handleTaskModelFormSubmit = ( updatedModel ) =>
|
|
{
|
|
if (updatedModel.id == "") updatedModel.id = 0;
|
|
const updatedProject = { ...project };
|
|
|
|
ProjectRepository.manageProjectTasks([updatedModel])
|
|
.then((response) => {
|
|
onDataChange("task-change");
|
|
showToast("Details updated successfully.", "success");
|
|
// setClearFormTrigger( true );
|
|
|
|
|
|
if (response?.data[0]) {
|
|
const { workItemId,workItem} = response.data[0];
|
|
const updatedBuildings = updatedProject.buildings.map((building) =>
|
|
building.id == updatedModel.buildingID
|
|
? {
|
|
...building,
|
|
floors: building.floors.map((floor) =>
|
|
floor.id == updatedModel.floorId
|
|
? {
|
|
...floor,
|
|
workAreas: floor.workAreas.map((workArea) =>
|
|
workArea.id === workItem?.workAreaId
|
|
? {
|
|
...workArea,
|
|
workItems: workArea.workItems.some((existingItem) => existingItem.workItemId === workItem.workItemId)
|
|
? workArea.workItems // If the workItemId already exists, keep the current workItems
|
|
: [...workArea.workItems, workItem],
|
|
}
|
|
: workArea
|
|
),
|
|
}
|
|
: floor
|
|
),
|
|
}
|
|
: building
|
|
);
|
|
|
|
updatedProject.buildings = updatedBuildings;
|
|
|
|
|
|
cacheData( "projectInfo", {projectId: updatedProject.id, data: updatedProject} );
|
|
setProject(updatedProject)
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
})
|
|
.catch((error) => {
|
|
showToast(error.message, "error");
|
|
});
|
|
};
|
|
|
|
const toggleBuilding = (id) => {
|
|
setExpandedBuildings((prev) =>
|
|
prev.includes(id) ? prev.filter((bid) => bid !== id) : [...prev, id]
|
|
);
|
|
};
|
|
|
|
const handleModalData = (type,modaldata)=>{
|
|
setModalConfig({type:type,data:modaldata})
|
|
}
|
|
const openModal = () => {
|
|
const modalElement = document.getElementById('building-model');
|
|
const modal = new Modal(modalElement, {
|
|
backdrop: false,
|
|
keyboard: true,
|
|
focus: true
|
|
});
|
|
modal.show()
|
|
};
|
|
const closeModal = () => {
|
|
setIsModalOpen(false);
|
|
setModalConfig(null)
|
|
|
|
|
|
const modalElement = document.getElementById('building-model');
|
|
if (modalElement) {
|
|
modalElement.classList.remove('show'); // Remove modal visibility class
|
|
modalElement.style.display = 'none'; // Hide the modal element
|
|
}
|
|
|
|
document.body.classList.remove('modal-open'); // Remove modal-open class from body
|
|
|
|
// Remove the modal backdrop
|
|
const backdropElement = document.querySelector('.modal-backdrop');
|
|
if (backdropElement) {
|
|
backdropElement.classList.remove('modal-backdrop'); // Remove backdrop class
|
|
backdropElement.style.display = 'none'; // Hide the backdrop element
|
|
}
|
|
document.body.style.overflow = 'auto';
|
|
|
|
};
|
|
|
|
const handleShow = () => setShowModal(true);
|
|
const handleClose = () => setShowModal( false );
|
|
|
|
return (
|
|
<>
|
|
<div
|
|
className={`modal fade ${showModal ? 'show' : ''}`}
|
|
tabIndex="-1"
|
|
role="dialog"
|
|
style={{ display: showModal ? 'block' : 'none' }}
|
|
aria-hidden={!showModal}
|
|
>
|
|
<BuildingModel
|
|
project={data}
|
|
onClose={handleClose}
|
|
onSubmit={handleBuildingModelFormSubmit}
|
|
clearTrigger={clearFormTrigger}
|
|
onClearComplete={() => setClearFormTrigger(false)}
|
|
></BuildingModel>
|
|
</div>
|
|
{isFloorModalOpen && (
|
|
<div
|
|
className="modal fade show"
|
|
id="floor-model"
|
|
tabIndex="-1"
|
|
role="dialog"
|
|
style={{ display: 'block' }}
|
|
aria-hidden="false"
|
|
>
|
|
<FloorModel
|
|
project={data}
|
|
onClose={closeFloorModel}
|
|
onSubmit={handleFloorModelFormSubmit}
|
|
clearTrigger={clearFormTrigger}
|
|
onClearComplete={() => setClearFormTrigger(false)}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{isWorkAreaModelOpen && (
|
|
<div
|
|
className={`modal fade `}
|
|
id="work-area-model"
|
|
tabIndex="-1"
|
|
aria-hidden="true"
|
|
>
|
|
<WorkAreaModel
|
|
project={data}
|
|
// building={null}
|
|
onClose={closeWorkAreaModel}
|
|
onSubmit={handleWorkAreaModelFormSubmit}
|
|
clearTrigger={clearFormTrigger}
|
|
onClearComplete={() => setClearFormTrigger(false)}
|
|
></WorkAreaModel>
|
|
</div>
|
|
)}
|
|
|
|
{isTaskModelOpen && (
|
|
<div
|
|
className={`modal fade `}
|
|
id="task-model"
|
|
tabIndex="-1"
|
|
aria-hidden="true"
|
|
>
|
|
<TaskModel
|
|
project={data}
|
|
activities={activityMaster}
|
|
onClose={closeTaskModel}
|
|
onSubmit={handleTaskModelFormSubmit}
|
|
clearTrigger={clearFormTrigger}
|
|
onClearComplete={() => setClearFormTrigger(false)}
|
|
></TaskModel>
|
|
</div>
|
|
)}
|
|
|
|
|
|
{isModalOpen && (
|
|
<ProjectModal modalConfig={modalConfig} closeModal={closeModal} />
|
|
)}
|
|
|
|
<div className="col-md-12 col-lg-12 col-xl-12 order-0 mb-4">
|
|
<div className="card">
|
|
|
|
<div className="card-body" style={{ padding: "0.5rem" }}>
|
|
<div className="align-items-center">
|
|
<div className="row ">
|
|
<div className={`col-12 text-end mb-1 ${!ManageInfra && 'd-none'} `} >
|
|
<button
|
|
type="button"
|
|
className="link-button link-button-sm m-1 "
|
|
|
|
onClick={handleShow}
|
|
>
|
|
<i className="bx bx-plus-circle me-2"></i>
|
|
Manage Building
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="link-button m-1"
|
|
onClick={() => openFloorModel()}
|
|
>
|
|
<i className="bx bx-plus-circle me-2"></i>
|
|
Manage Floors
|
|
</button>
|
|
|
|
|
|
<button
|
|
type="button"
|
|
data-bs-toggle="modal"
|
|
className="link-button m-1"
|
|
data-bs-target="#work-area-model"
|
|
onClick={() => openWorkAreaModel()}
|
|
>
|
|
<i className="bx bx-plus-circle me-2"></i>
|
|
Manage Work Areas
|
|
</button>
|
|
<button
|
|
type="button"
|
|
data-bs-toggle="modal"
|
|
className="link-button m-1"
|
|
data-bs-target="#task-model"
|
|
onClick={() => openTaskModel()}
|
|
>
|
|
<i className="bx bx-plus-circle me-2"></i>
|
|
Create Tasks
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="row ">
|
|
<InfraTable buildings={project.buildings} project={data}/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ProjectInfra;
|