marco.pms.web/src/components/Project/AboutProject.jsx
2025-07-08 09:53:08 +05:30

164 lines
5.9 KiB
JavaScript

import React, { useEffect, useState } from "react";
import moment from "moment";
import { getProjectStatusName } from "../../utils/projectStatus";
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import { MANAGE_PROJECT } from "../../utils/constants";
import { cacheData, getCachedData } from "../../slices/apiDataManager";
import ManageProjectInfo from "./ManageProjectInfo";
import ProjectRepository from "../../repositories/ProjectRepository";
import showToast from "../../services/toastService";
const AboutProject = ({ data }) => {
const [CurrentProject, setCurrentProject] = useState(data);
const [showModal, setShowModal] = useState(false);
useEffect(() => {
setCurrentProject(data);
}, [data]);
const manageProject = useHasUserPermission(MANAGE_PROJECT);
const handleShow = () => setShowModal(true);
const handleClose = () => setShowModal(false);
const handleFormSubmit = (updatedProject, setLoading) => {
if ( CurrentProject?.id )
{
ProjectRepository.updateProject(CurrentProject.id, updatedProject)
.then((response) => {
const updatedProjectData = {
...CurrentProject,
...response.data,
building: CurrentProject.building,
};
setCurrentProject(updatedProject);
cacheData(`projectinfo-${CurrentProject.id}`, updatedProjectData);
const projects_list = getCachedData("projectslist");
if (projects_list) {
const updatedProjectsList = projects_list.map((project) =>
project.id === CurrentProject.id
? {
...project,
...response.data,
// tenant:project.tenant
}
: project
);
cacheData("projectslist", updatedProjectsList);
}
showToast( "Project updated successfully.", "success" );
setLoading(false);
setShowModal(false);
})
.catch((error) => {
showToast(error.message, "error");
});
}
};
return (
<>
<div
className={`modal fade ${showModal ? "show" : ""}`}
tabIndex="-1"
role="dialog"
style={{ display: showModal ? "block" : "none" }}
aria-hidden={!showModal}
>
<ManageProjectInfo
project={CurrentProject}
handleSubmitForm={handleFormSubmit}
onClose={handleClose}
></ManageProjectInfo>
</div>
{data && (
<div className="card mb-6">
<div className="card-header text-start">
<h6 className="card-action-title mb-0">
{" "}
<i className="fa fa-building rounded-circle text-primary"></i>
<span className="ms-2">Project Profile</span>
</h6>
</div>
<div className="card-body">
<ul className="list-unstyled my-3 ps-2">
<li className="d-flex align-items-center mb-3">
<i className="bx bx-cog"></i>
<span className="fw-medium mx-2">Name:</span>{" "}
<span>{data.name}</span>
</li>
<li className="d-flex align-items-center mb-3">
<i className="bx bx-fingerprint"></i>
<span className="fw-medium mx-2">Nick Name:</span>{" "}
<span> {data.shortName} </span>
</li>
<li className="d-flex align-items-center mb-3">
<i className="bx bx-check"></i>
<span className="fw-medium mx-2">Start Date:</span>{" "}
<span>
{data.startDate
? moment(data.startDate).format("DD-MMM-YYYY")
: "N/A"}
</span>
</li>
<li className="d-flex align-items-center mb-3">
<i className="bx bx-stop-circle"></i>{" "}
<span className="fw-medium mx-2">End Date:</span>{" "}
<span>
{data.endDate
? moment(data.endDate).format("DD-MMM-YYYY")
: "N/A"}
</span>
</li>
<li className="d-flex align-items-center mb-3">
<i className="bx bx-trophy"></i>
<span className="fw-medium mx-2">Status:</span>{" "}
<span>{getProjectStatusName(data.projectStatusId)}</span>
</li>
<li className="d-flex align-items-center mb-3">
<i className="bx bx-user"></i>
<span className="fw-medium mx-2">Contact:</span>{" "}
<span>{data.contactPerson}</span>
</li>
<li className="d-flex flex-column align-items-start mb-3">
<div className="d-flex align-items-center">
<i className="bx bx-flag"></i>
<span className="fw-medium mx-2">Address:</span>
{data.projectAddress?.length <= 20 && (
<span>{data.projectAddress}</span>
)}
</div>
{data.projectAddress?.length > 20 && (
<div className="ms-4 text-start">{data.projectAddress}</div>
)}
</li>
<li className="d-flex justify-content-center mb-3">
{manageProject && (
<button
type="button"
className={`btn btn-sm btn-primary ${
!manageProject && "d-none"
}`}
data-bs-toggle="modal"
data-bs-target="#edit-project-modal"
onClick={handleShow}
>
Modify Details
</button>
)}
</li>
</ul>
</div>
</div>
)}
{!data && <span>loading...</span>}
</>
);
};
export default AboutProject;