Updated inline styles to conditionally set 'display' and 'backgroundColor' based on showModal2 state.
Ensures modal appears with a dark overlay when active and is hidden otherwise.
This commit is contained in:
Pramod Mahajan
parent
0ac2dc36ff
commit
89317079b7
@ -6,27 +6,29 @@ 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";
|
||||
import {refreshData} from "../../../slices/localVariablesSlice";
|
||||
import { cacheData, getCachedData } from "../../../slices/apiDataManager";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { refreshData } from "../../../slices/localVariablesSlice";
|
||||
|
||||
const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
|
||||
const { projectId } = useParams();
|
||||
const [itemName, setItemName] = useState("");
|
||||
const [NewWorkItem, setNewWorkItem] = useState();
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [ showModal, setShowModal ] = useState( false );
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [showModal2, setShowModal2] = useState(false);
|
||||
const ManageTasks = useHasUserPermission(MANAGE_TASK);
|
||||
const ManageInfra = useHasUserPermission( MANAGE_PROJECT_INFRA );
|
||||
const [ loadingDelete, setLoadingDelete ] = useState( false )
|
||||
const ManageInfra = useHasUserPermission(MANAGE_PROJECT_INFRA);
|
||||
const [loadingDelete, setLoadingDelete] = useState(false);
|
||||
const project = getCachedData("projectInfo");
|
||||
const dispatch = useDispatch()
|
||||
|
||||
const {projects_Details} = useProjectDetails(projectId || project?.projectId)
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const { projects_Details } = useProjectDetails(
|
||||
projectId || project?.projectId
|
||||
);
|
||||
|
||||
const openModal = () => setIsModalOpen(true);
|
||||
const closeModal = () => setIsModalOpen(false);
|
||||
@ -55,24 +57,20 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
|
||||
document.querySelectorAll('[data-bs-toggle="tooltip"]')
|
||||
);
|
||||
tooltipTriggerList.forEach((el) => new bootstrap.Tooltip(el));
|
||||
}, [] );
|
||||
|
||||
|
||||
}, []);
|
||||
|
||||
const showModal1 = () => setShowModal(true);
|
||||
const closeModal1 = () => setShowModal( false );
|
||||
const closeModal1 = () => setShowModal(false);
|
||||
const showModalDelete = () => setShowModal2(true);
|
||||
const closeModalDelete = () => setShowModal2( false );
|
||||
|
||||
const closeModalDelete = () => setShowModal2(false);
|
||||
|
||||
const handleSubmit = async() => {
|
||||
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) =>
|
||||
@ -102,28 +100,26 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
|
||||
: building
|
||||
),
|
||||
};
|
||||
|
||||
|
||||
cacheData("projectInfo", {
|
||||
projectId: newProject.id,
|
||||
data: newProject,
|
||||
});
|
||||
|
||||
dispatch( refreshData( true ) );
|
||||
closeModalDelete()
|
||||
setLoadingDelete(false)
|
||||
showToast("Activity Deleted Successfully","success")
|
||||
} catch ( error )
|
||||
{
|
||||
setLoadingDelete( false )
|
||||
closeModalDelete()
|
||||
|
||||
dispatch(refreshData(true));
|
||||
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" );
|
||||
|
||||
error.response?.data?.message ||
|
||||
error.message ||
|
||||
"An unexpected error occurred";
|
||||
showToast(message, "error");
|
||||
}
|
||||
};
|
||||
};
|
||||
return (
|
||||
<>
|
||||
{isModalOpen && (
|
||||
@ -138,32 +134,45 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showModal && <div
|
||||
className={`modal fade ${showModal ? "show" : ""}`}
|
||||
tabIndex="-1"
|
||||
role="dialog"
|
||||
style={{ display: showModal ? "block" : "none" }}
|
||||
aria-hidden={!showModal}
|
||||
>
|
||||
<EditActivityModal
|
||||
workItem={workItem}
|
||||
workArea={forWorkArea}
|
||||
building={forBuilding}
|
||||
floor={forFloor}
|
||||
onClose={closeModal1}
|
||||
/>
|
||||
</div>}
|
||||
|
||||
|
||||
{showModal2 && <div
|
||||
className={`modal fade ${showModal2 ? "show" : ""}`}
|
||||
tabIndex="-1"
|
||||
role="dialog"
|
||||
style={{ display: showModal2 ? "block" : "none" }}
|
||||
aria-hidden='false'
|
||||
>
|
||||
<ConfirmModal type={"delete"} header={"Delete Activity"} message={"Are you sure you want delete?"} onSubmit={ handleSubmit} onClose={closeModalDelete} loading={loadingDelete}/>
|
||||
</div> }
|
||||
{showModal && (
|
||||
<div
|
||||
className={`modal fade ${showModal ? "show" : ""}`}
|
||||
tabIndex="-1"
|
||||
role="dialog"
|
||||
style={{ display: showModal ? "block" : "none" }}
|
||||
aria-hidden={!showModal}
|
||||
>
|
||||
<EditActivityModal
|
||||
workItem={workItem}
|
||||
workArea={forWorkArea}
|
||||
building={forBuilding}
|
||||
floor={forFloor}
|
||||
onClose={closeModal1}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showModal2 && (
|
||||
<div
|
||||
className={`modal fade ${showModal2 ? "show" : ""}`}
|
||||
tabIndex="-1"
|
||||
role="dialog"
|
||||
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>
|
||||
)}
|
||||
|
||||
<tr>
|
||||
<td className="text-start table-cell-small">
|
||||
@ -177,23 +186,30 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
|
||||
</td>
|
||||
{/* for mobile view */}
|
||||
<td className="text-center d-sm-none d-sm-table-cell">
|
||||
{hasWorkItem
|
||||
? NewWorkItem?.workItem?.completedWork ?? workItem?.completedWork ?? "NA"
|
||||
: "NA"}/{" "}
|
||||
{hasWorkItem
|
||||
? NewWorkItem?.workItem?.completedWork ??
|
||||
workItem?.completedWork ??
|
||||
"NA"
|
||||
: "NA"}
|
||||
/{" "}
|
||||
{hasWorkItem
|
||||
? NewWorkItem?.workItem?.plannedWork || workItem?.plannedWork
|
||||
: "NA"}
|
||||
</td>
|
||||
{/* for greather than mobile view ************* */}
|
||||
<td className="text-center d-none d-md-table-cell">
|
||||
{hasWorkItem
|
||||
? NewWorkItem?.workItem?.plannedWork ?? workItem?.plannedWork ?? "NA"
|
||||
: "NA"}
|
||||
{hasWorkItem
|
||||
? 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"
|
||||
: "NA"}
|
||||
{hasWorkItem
|
||||
? NewWorkItem?.workItem?.completedWork ??
|
||||
workItem?.completedWork ??
|
||||
"NA"
|
||||
: "NA"}
|
||||
</td>
|
||||
<td className="text-center" style={{ width: "15%" }}>
|
||||
<div className="progress p-0">
|
||||
@ -234,7 +250,7 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
|
||||
</span>
|
||||
</button>
|
||||
)}
|
||||
{ ManageInfra && (
|
||||
{ManageInfra && (
|
||||
<>
|
||||
<button
|
||||
aria-label="Modify"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user