admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Updated inline styles to conditionally set 'display' and 'backgroundColor' based on showModal2 state.

Browse Source 
Ensures modal appears with a dark overlay when active and is hidden otherwise.
This commit is contained in:
Pramod Mahajan 2025-05-09 10:20:26 +05:30 committed by Vikas Nale
parent a896a722f1
commit 11adad64d5
1 changed files with 91 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
src/components/Project/Infrastructure/WorkItem.jsx
View File

@ -6,8 +6,8 @@ import { useHasUserPermission } from "../../../hooks/useHasUserPermission";
import { MANAGE_PROJECT_INFRA, MANAGE_TASK } from "../../../utils/constants";
import ConfirmModal from "../../common/ConfirmModal";
import ProjectRepository from '../../../repositories/ProjectRepository'
import {useProjectDetails} from '../../../hooks/useProjects'
import ProjectRepository from "../../../repositories/ProjectRepository";
import { useProjectDetails } from "../../../hooks/useProjects";
import showToast from "../../../services/toastService";
import { cacheData, getCachedData } from "../../../slices/apiDataManager";
import { useDispatch } from "react-redux";
@ -22,11 +22,13 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
const [showModal2, setShowModal2] = useState(false);
const ManageTasks = useHasUserPermission(MANAGE_TASK);
const ManageInfra = useHasUserPermission(MANAGE_PROJECT_INFRA);
const [ loadingDelete, setLoadingDelete ] = useState( false )
const [loadingDelete, setLoadingDelete] = useState(false);
const project = getCachedData("projectInfo");
const dispatch = useDispatch()
const dispatch = useDispatch();
const {projects_Details} = useProjectDetails(projectId || project?.projectId)
const { projects_Details } = useProjectDetails(
projectId || project?.projectId
);
const openModal = () => setIsModalOpen(true);
const closeModal = () => setIsModalOpen(false);
@ -57,22 +59,18 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
tooltipTriggerList.forEach((el) => new bootstrap.Tooltip(el));
}, []);
const showModal1 = () => setShowModal(true);
const closeModal1 = () => setShowModal(false);
const showModalDelete = () => setShowModal2(true);
const closeModalDelete = () => setShowModal2(false);
const handleSubmit = async () => {
setLoadingDelete(true);
try
{
try {
const updatedProject = { ...projects_Details };
const response = await ProjectRepository.deleteProjectTask( workItem.workItemId );
debugger
const response = await ProjectRepository.deleteProjectTask(
workItem.workItemId
);
const newProject = {
...updatedProject,
buildings: updatedProject.buildings.map((building) =>
@ -109,19 +107,17 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
});
dispatch(refreshData(true));
closeModalDelete()
setLoadingDelete(false)
showToast("Activity Deleted Successfully","success")
} catch ( error )
{
setLoadingDelete( false )
closeModalDelete()
closeModalDelete();
setLoadingDelete(false);
showToast("Activity Deleted Successfully", "success");
} catch (error) {
setLoadingDelete(false);
closeModalDelete();
const message =
error.response?.data?.message ||
error.message ||
"An unexpected error occurred";
showToast(message, "error");
}
};
return (
@ -138,7 +134,8 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
</div>
)}
{showModal && <div
{showModal && (
<div
className={`modal fade ${showModal ? "show" : ""}`}
tabIndex="-1"
role="dialog"
@ -152,18 +149,30 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
floor={forFloor}
onClose={closeModal1}
/>
</div>}
</div>
)}
{showModal2 && <div
{showModal2 && (
<div
className={`modal fade ${showModal2 ? "show" : ""}`}
tabIndex="-1"
role="dialog"
style={{ display: showModal2 ? "block" : "none" }}
aria-hidden='false'
style={{
display: showModal2 ? "block" : "none",
backgroundColor: showModal2 ? "rgba(0,0,0,0.5)" : "transparent",
}}
aria-hidden="false"
>
<ConfirmModal type={"delete"} header={"Delete Activity"} message={"Are you sure you want delete?"} onSubmit={ handleSubmit} onClose={closeModalDelete} loading={loadingDelete}/>
</div> }
<ConfirmModal
type={"delete"}
header={"Delete Activity"}
message={"Are you sure you want delete?"}
onSubmit={handleSubmit}
onClose={closeModalDelete}
loading={loadingDelete}
/>
</div>
)}
<tr>
<td className="text-start table-cell-small">
@ -178,8 +187,11 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
{/* for mobile view */}
<td className="text-center d-sm-none d-sm-table-cell">
{hasWorkItem
? NewWorkItem?.workItem?.completedWork ?? workItem?.completedWork ?? "NA"
: "NA"}/{" "}
? NewWorkItem?.workItem?.completedWork ??
workItem?.completedWork ??
"NA"
: "NA"}
/{" "}
{hasWorkItem
? NewWorkItem?.workItem?.plannedWork || workItem?.plannedWork
: "NA"}
@ -187,12 +199,16 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
{/* for greather than mobile view ************* */}
<td className="text-center d-none d-md-table-cell">
{hasWorkItem
? NewWorkItem?.workItem?.plannedWork ?? workItem?.plannedWork ?? "NA"
? NewWorkItem?.workItem?.plannedWork ??
workItem?.plannedWork ??
"NA"
: "NA"}
</td>
<td className="text-center d-none d-md-table-cell">
{hasWorkItem
? NewWorkItem?.workItem?.completedWork ?? workItem?.completedWork ?? "NA"
? NewWorkItem?.workItem?.completedWork ??
workItem?.completedWork ??
"NA"
: "NA"}
</td>
<td className="text-center" style={{ width: "15%" }}>