marco.pms.web/src/components/Project/ProjectBanner.jsx

114 lines
3.9 KiB
JavaScript

import React, { useState,useEffect } from "react";
import ManageProjectInfo from "./ManageProjectInfo";
import showToast from "../../services/toastService";
import ProjectRepository from "../../repositories/ProjectRepository";
import { cacheData,getCachedData } from "../../slices/apiDataManager";
import {hasUserPermission} from "../../utils/authUtils";
import moment from "moment";
import {useHasUserPermission} from "../../hooks/useHasUserPermission";
import {MANAGE_PROJECT} from "../../utils/constants";
const ProjectBanner = ( {project_data} ) =>
{
const [showModal, setShowModal] = useState(false);
const manageProject = useHasUserPermission(MANAGE_PROJECT)
const [ CurrentProject, setCurrentProject ] = useState( project_data )
if (project_data == null) {
return <span>incomplete project information</span>;
}
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>
{/* Project Banner */}
<div className="col-12">
<div className="card mb-6 pb-0">
<div className="d-flex align-items-center justify-content-between p-2 flex-wrap">
{/* Left: Icon + Name */}
<div className="d-flex align-items-center gap-3">
<img
src="../../assets/icons/civil-engineering.svg"
alt="user image"
className="rounded-3"
style={{ width: "40px", height: "40px" }}
/>
<h5 className="mb-0">
{CurrentProject.name ? CurrentProject.name : "N/A"}
</h5>
</div>
{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
</button>
)}
</div>
</div>
</div>
</>
);
};
export default ProjectBanner;