enhance modal handling by adding onClose prop to TaskModel and WorkAreaModel components
This commit is contained in:
parent
66c4e44ded
commit
d35f6e1c89
@ -26,7 +26,7 @@ const TaskModel = ({
|
||||
activities,
|
||||
onSubmit,
|
||||
clearTrigger,
|
||||
onClearComplete,
|
||||
onClearComplete,onClose
|
||||
}) => {
|
||||
const [formData, setFormData] = useState(defaultModel);
|
||||
const [selectedBuilding, setSelectedBuilding] = useState(null);
|
||||
@ -124,12 +124,7 @@ const TaskModel = ({
|
||||
<div className="modal-content">
|
||||
<div className="modal-body">
|
||||
<div className="row">
|
||||
<button
|
||||
type="button"
|
||||
className="btn-close"
|
||||
data-bs-dismiss="modal"
|
||||
aria-label="Close"
|
||||
></button>
|
||||
<button type="button" className="btn-close" aria-label="Close" onClick={onClose}/>
|
||||
<div className="text-center mb-1">
|
||||
<h5 className="mb-1">Manage Task</h5>
|
||||
</div>
|
||||
@ -290,10 +285,9 @@ const TaskModel = ({
|
||||
{formData.id !== "0" && formData.id !== "" ? "Edit Task" : "Add Task"}
|
||||
</button>
|
||||
<button
|
||||
type="reset"
|
||||
type="button"
|
||||
className="btn btn-label-secondary"
|
||||
data-bs-dismiss="modal"
|
||||
aria-label="Close"
|
||||
onClick={onClose}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
|
||||
@ -19,7 +19,7 @@ const defaultModel = {
|
||||
floorId: "0",
|
||||
};
|
||||
|
||||
const WorkAreaModel = ({ project, onSubmit, clearTrigger, onClearComplete }) => {
|
||||
const WorkAreaModel = ({ project, onSubmit, clearTrigger, onClearComplete, onClose }) => {
|
||||
const [selectedBuilding, setSelectedBuilding] = useState(null);
|
||||
const [ selectedFloor, setSelectedFloor ] = useState( null );
|
||||
const [selectdWorkArea,setWorkArea] = useState()
|
||||
@ -111,7 +111,7 @@ const WorkAreaModel = ({ project, onSubmit, clearTrigger, onClearComplete }) =>
|
||||
<div className="modal-content">
|
||||
<div className="modal-body">
|
||||
<div className="row">
|
||||
<button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
<button type="button" className="btn-close" aria-label="Close" onClick={onClose}/>
|
||||
<div className="text-center mb-1">
|
||||
<h5 className="mb-1">Manage Work Area</h5>
|
||||
</div>
|
||||
|
||||
@ -44,14 +44,14 @@ const ProjectInfra = ({ data, activityMaster, onDataChange,eachSiteEngineer }) =
|
||||
};
|
||||
const closeFloorModel = () => {
|
||||
setIsFloorModalOpen(false);
|
||||
|
||||
|
||||
};
|
||||
|
||||
|
||||
const openAssignModel=(assignData)=>{
|
||||
|
||||
setCurrentBuilding(assignData)
|
||||
setIsAssingRoleModal(true)
|
||||
|
||||
|
||||
setCurrentBuilding(assignData)
|
||||
setIsAssingRoleModal(true)
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -60,134 +60,134 @@ const ProjectInfra = ({ data, activityMaster, onDataChange,eachSiteEngineer }) =
|
||||
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
|
||||
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
|
||||
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
|
||||
? {
|
||||
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,
|
||||
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
|
||||
: []
|
||||
),
|
||||
// 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
|
||||
: building
|
||||
);
|
||||
|
||||
updatedProject.buildings = updatedBuildings;
|
||||
|
||||
// Cache the updated project
|
||||
cacheData( "projectInfo", {projectId: updatedProject.id, data: updatedProject} );
|
||||
setProject(updatedProject)
|
||||
}
|
||||
// Handle the work area data
|
||||
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) =>
|
||||
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)
|
||||
? {
|
||||
...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 },
|
||||
],
|
||||
? { ...workArea, areaName }
|
||||
: workArea
|
||||
)
|
||||
: [
|
||||
...floor.workAreas,
|
||||
{ id, areaName, workItems: null },
|
||||
],
|
||||
}
|
||||
: floor
|
||||
),
|
||||
}
|
||||
: building
|
||||
);
|
||||
: floor
|
||||
),
|
||||
}
|
||||
: building
|
||||
);
|
||||
|
||||
updatedProject.buildings = updatedBuildings;
|
||||
updatedProject.buildings = updatedBuildings;
|
||||
|
||||
// Update the cache for work areas
|
||||
// Update the cache for work areas
|
||||
cacheData( "projectInfo", {projectId: updatedProject.id, data: updatedProject} );
|
||||
setProject(updatedProject)
|
||||
}
|
||||
// Handle the task (workItem) data
|
||||
setProject(updatedProject)
|
||||
}
|
||||
// Handle the task (workItem) data
|
||||
|
||||
else {
|
||||
console.error("Unsupported data type for submitData", entity);
|
||||
}
|
||||
else {
|
||||
console.error("Unsupported data type for submitData", entity);
|
||||
}
|
||||
} catch ( Err )
|
||||
{
|
||||
showToast("Somthing wrong","error")
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
handleClose()
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
const closeBuildingModel = () => {
|
||||
setIsBuildingModalOpen(false);
|
||||
};
|
||||
@ -256,37 +256,37 @@ const ProjectInfra = ({ data, activityMaster, onDataChange,eachSiteEngineer }) =
|
||||
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,
|
||||
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)
|
||||
}
|
||||
@ -320,18 +320,18 @@ const ProjectInfra = ({ data, activityMaster, onDataChange,eachSiteEngineer }) =
|
||||
modal.show()
|
||||
};
|
||||
const closeModal = () => {
|
||||
setIsModalOpen(false);
|
||||
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) {
|
||||
@ -339,7 +339,7 @@ const ProjectInfra = ({ data, activityMaster, onDataChange,eachSiteEngineer }) =
|
||||
backdropElement.style.display = 'none'; // Hide the backdrop element
|
||||
}
|
||||
document.body.style.overflow = 'auto';
|
||||
|
||||
|
||||
};
|
||||
|
||||
const handleShow = () => setShowModal(true);
|
||||
@ -347,21 +347,21 @@ const ProjectInfra = ({ data, activityMaster, onDataChange,eachSiteEngineer }) =
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
<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>
|
||||
<BuildingModel
|
||||
project={data}
|
||||
onClose={handleClose}
|
||||
onSubmit={handleBuildingModelFormSubmit}
|
||||
clearTrigger={clearFormTrigger}
|
||||
onClearComplete={() => setClearFormTrigger(false)}
|
||||
></BuildingModel>
|
||||
</div>
|
||||
{isFloorModalOpen && (
|
||||
<div
|
||||
className="modal fade show"
|
||||
@ -383,10 +383,12 @@ const ProjectInfra = ({ data, activityMaster, onDataChange,eachSiteEngineer }) =
|
||||
|
||||
{isWorkAreaModelOpen && (
|
||||
<div
|
||||
className={`modal fade `}
|
||||
className="modal fade show"
|
||||
id="work-area-model"
|
||||
tabIndex="-1"
|
||||
aria-hidden="true"
|
||||
role="dialog"
|
||||
style={{ display: 'block' }}
|
||||
aria-hidden="false"
|
||||
>
|
||||
<WorkAreaModel
|
||||
project={data}
|
||||
@ -395,16 +397,18 @@ const ProjectInfra = ({ data, activityMaster, onDataChange,eachSiteEngineer }) =
|
||||
onSubmit={handleWorkAreaModelFormSubmit}
|
||||
clearTrigger={clearFormTrigger}
|
||||
onClearComplete={() => setClearFormTrigger(false)}
|
||||
></WorkAreaModel>
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isTaskModelOpen && (
|
||||
<div
|
||||
className={`modal fade `}
|
||||
className="modal fade show"
|
||||
id="task-model"
|
||||
tabIndex="-1"
|
||||
aria-hidden="true"
|
||||
role="dialog"
|
||||
style={{ display: 'block' }}
|
||||
aria-hidden="false"
|
||||
>
|
||||
<TaskModel
|
||||
project={data}
|
||||
@ -413,11 +417,11 @@ const ProjectInfra = ({ data, activityMaster, onDataChange,eachSiteEngineer }) =
|
||||
onSubmit={handleTaskModelFormSubmit}
|
||||
clearTrigger={clearFormTrigger}
|
||||
onClearComplete={() => setClearFormTrigger(false)}
|
||||
></TaskModel>
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
|
||||
{isModalOpen && (
|
||||
<ProjectModal modalConfig={modalConfig} closeModal={closeModal} />
|
||||
)}
|
||||
@ -432,27 +436,25 @@ const ProjectInfra = ({ data, activityMaster, onDataChange,eachSiteEngineer }) =
|
||||
<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>
|
||||
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>
|
||||
@ -460,9 +462,7 @@ const ProjectInfra = ({ data, activityMaster, onDataChange,eachSiteEngineer }) =
|
||||
</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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user