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

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

@ -6,27 +6,29 @@ import { useHasUserPermission } from "../../../hooks/useHasUserPermission";
import { MANAGE_PROJECT_INFRA, MANAGE_TASK } from "../../../utils/constants"; import { MANAGE_PROJECT_INFRA, MANAGE_TASK } from "../../../utils/constants";
import ConfirmModal from "../../common/ConfirmModal"; import ConfirmModal from "../../common/ConfirmModal";
import ProjectRepository from '../../../repositories/ProjectRepository' import ProjectRepository from "../../../repositories/ProjectRepository";
import {useProjectDetails} from '../../../hooks/useProjects' import { useProjectDetails } from "../../../hooks/useProjects";
import showToast from "../../../services/toastService"; import showToast from "../../../services/toastService";
import {cacheData, getCachedData} from "../../../slices/apiDataManager"; import { cacheData, getCachedData } from "../../../slices/apiDataManager";
import {useDispatch} from "react-redux"; import { useDispatch } from "react-redux";
import {refreshData} from "../../../slices/localVariablesSlice"; import { refreshData } from "../../../slices/localVariablesSlice";
const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => { const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
const { projectId } = useParams(); const { projectId } = useParams();
const [itemName, setItemName] = useState(""); const [itemName, setItemName] = useState("");
const [NewWorkItem, setNewWorkItem] = useState(); const [NewWorkItem, setNewWorkItem] = useState();
const [isModalOpen, setIsModalOpen] = useState(false); const [isModalOpen, setIsModalOpen] = useState(false);
const [ showModal, setShowModal ] = useState( false ); const [showModal, setShowModal] = useState(false);
const [showModal2, setShowModal2] = useState(false); const [showModal2, setShowModal2] = useState(false);
const ManageTasks = useHasUserPermission(MANAGE_TASK); const ManageTasks = useHasUserPermission(MANAGE_TASK);
const ManageInfra = useHasUserPermission( MANAGE_PROJECT_INFRA ); const ManageInfra = useHasUserPermission(MANAGE_PROJECT_INFRA);
const [ loadingDelete, setLoadingDelete ] = useState( false ) const [loadingDelete, setLoadingDelete] = useState(false);
const project = getCachedData("projectInfo"); 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 openModal = () => setIsModalOpen(true);
const closeModal = () => setIsModalOpen(false); const closeModal = () => setIsModalOpen(false);
@ -55,24 +57,20 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
document.querySelectorAll('[data-bs-toggle="tooltip"]') document.querySelectorAll('[data-bs-toggle="tooltip"]')
); );
tooltipTriggerList.forEach((el) => new bootstrap.Tooltip(el)); tooltipTriggerList.forEach((el) => new bootstrap.Tooltip(el));
}, [] ); }, []);
const showModal1 = () => setShowModal(true); const showModal1 = () => setShowModal(true);
const closeModal1 = () => setShowModal( false ); const closeModal1 = () => setShowModal(false);
const showModalDelete = () => setShowModal2(true); const showModalDelete = () => setShowModal2(true);
const closeModalDelete = () => setShowModal2( false ); const closeModalDelete = () => setShowModal2(false);
const handleSubmit = async() => { const handleSubmit = async () => {
setLoadingDelete(true); setLoadingDelete(true);
try try {
{
const updatedProject = { ...projects_Details }; const updatedProject = { ...projects_Details };
const response = await ProjectRepository.deleteProjectTask( workItem.workItemId ); const response = await ProjectRepository.deleteProjectTask(
debugger workItem.workItemId
);
const newProject = { const newProject = {
...updatedProject, ...updatedProject,
buildings: updatedProject.buildings.map((building) => buildings: updatedProject.buildings.map((building) =>
@ -102,28 +100,26 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
: building : building
), ),
}; };
cacheData("projectInfo", { cacheData("projectInfo", {
projectId: newProject.id, projectId: newProject.id,
data: newProject, data: newProject,
}); });
dispatch( refreshData( true ) ); dispatch(refreshData(true));
closeModalDelete() closeModalDelete();
setLoadingDelete(false) setLoadingDelete(false);
showToast("Activity Deleted Successfully","success") showToast("Activity Deleted Successfully", "success");
} catch ( error ) } catch (error) {
{ setLoadingDelete(false);
setLoadingDelete( false ) closeModalDelete();
closeModalDelete()
const message = const message =
error.response?.data?.message || error.response?.data?.message ||
error.message || error.message ||
"An unexpected error occurred"; "An unexpected error occurred";
showToast( message, "error" ); showToast(message, "error");
} }
}; };
return ( return (
<> <>
{isModalOpen && ( {isModalOpen && (
@ -138,32 +134,45 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
</div> </div>
)} )}
{showModal && <div {showModal && (
className={`modal fade ${showModal ? "show" : ""}`} <div
tabIndex="-1" className={`modal fade ${showModal ? "show" : ""}`}
role="dialog" tabIndex="-1"
style={{ display: showModal ? "block" : "none" }} role="dialog"
aria-hidden={!showModal} style={{ display: showModal ? "block" : "none" }}
> aria-hidden={!showModal}
<EditActivityModal >
workItem={workItem} <EditActivityModal
workArea={forWorkArea} workItem={workItem}
building={forBuilding} workArea={forWorkArea}
floor={forFloor} building={forBuilding}
onClose={closeModal1} floor={forFloor}
/> onClose={closeModal1}
</div>} />
</div>
)}
{showModal2 && <div
className={`modal fade ${showModal2 ? "show" : ""}`} {showModal2 && (
tabIndex="-1" <div
role="dialog" className={`modal fade ${showModal2 ? "show" : ""}`}
style={{ display: showModal2 ? "block" : "none" }} tabIndex="-1"
aria-hidden='false' role="dialog"
> style={{
<ConfirmModal type={"delete"} header={"Delete Activity"} message={"Are you sure you want delete?"} onSubmit={ handleSubmit} onClose={closeModalDelete} loading={loadingDelete}/> display: showModal2 ? "block" : "none",
</div> } 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>
)}
<tr> <tr>
<td className="text-start table-cell-small"> <td className="text-start table-cell-small">
@ -177,23 +186,30 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
</td> </td>
{/* for mobile view */} {/* for mobile view */}
<td className="text-center d-sm-none d-sm-table-cell"> <td className="text-center d-sm-none d-sm-table-cell">
{hasWorkItem {hasWorkItem
? NewWorkItem?.workItem?.completedWork ?? workItem?.completedWork ?? "NA" ? NewWorkItem?.workItem?.completedWork ??
: "NA"}/{" "} workItem?.completedWork ??
"NA"
: "NA"}
/{" "}
{hasWorkItem {hasWorkItem
? NewWorkItem?.workItem?.plannedWork || workItem?.plannedWork ? NewWorkItem?.workItem?.plannedWork || workItem?.plannedWork
: "NA"} : "NA"}
</td> </td>
{/* for greather than mobile view ************* */} {/* for greather than mobile view ************* */}
<td className="text-center d-none d-md-table-cell"> <td className="text-center d-none d-md-table-cell">
{hasWorkItem {hasWorkItem
? NewWorkItem?.workItem?.plannedWork ?? workItem?.plannedWork ?? "NA" ? NewWorkItem?.workItem?.plannedWork ??
: "NA"} workItem?.plannedWork ??
"NA"
: "NA"}
</td> </td>
<td className="text-center d-none d-md-table-cell"> <td className="text-center d-none d-md-table-cell">
{hasWorkItem {hasWorkItem
? NewWorkItem?.workItem?.completedWork ?? workItem?.completedWork ?? "NA" ? NewWorkItem?.workItem?.completedWork ??
: "NA"} workItem?.completedWork ??
"NA"
: "NA"}
</td> </td>
<td className="text-center" style={{ width: "15%" }}> <td className="text-center" style={{ width: "15%" }}>
<div className="progress p-0"> <div className="progress p-0">
@ -234,7 +250,7 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
</span> </span>
</button> </button>
)} )}
{ ManageInfra && ( {ManageInfra && (
<> <>
<button <button
aria-label="Modify" aria-label="Modify"