128 lines
4.1 KiB
JavaScript
128 lines
4.1 KiB
JavaScript
import React, { useState, useEffect, useCallback } from "react";
|
|
import { useDispatch } from "react-redux";
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
import ProjectOverview from "../../components/Project/ProjectOverview";
|
|
import AboutProject from "../../components/Project/AboutProject";
|
|
import ProjectNav from "../../components/Project/ProjectNav";
|
|
import Teams from "../../components/Project/Team/Teams";
|
|
import ProjectInfra from "../../components/Project/ProjectInfra";
|
|
import Loader from "../../components/common/Loader";
|
|
import WorkPlan from "../../components/Project/WorkPlan";
|
|
import Breadcrumb from "../../components/common/Breadcrumb";
|
|
import { useSelectedProject } from "../../slices/apiDataManager";
|
|
import { useProjectDetails, useProjectName } from "../../hooks/useProjects";
|
|
import { ComingSoonPage } from "../Misc/ComingSoonPage";
|
|
import eventBus from "../../services/eventBus";
|
|
import ProjectProgressChart from "../../components/Dashboard/ProjectProgressChart";
|
|
import AttendanceOverview from "../../components/Dashboard/AttendanceChart";
|
|
import { setProjectId } from "../../slices/localVariablesSlice";
|
|
import ProjectDocuments from "../../components/Project/ProjectDocuments";
|
|
import ProjectSetting from "../../components/Project/ProjectSetting";
|
|
import DirectoryPage from "../Directory/DirectoryPage";
|
|
import { useProjectAccess } from "../../hooks/useProjectAccess";
|
|
|
|
import "./ProjectDetails.css";
|
|
import ProjectOrganizations from "../../components/Project/ProjectOrganizations";
|
|
|
|
const ProjectDetails = () => {
|
|
const projectId = useSelectedProject();
|
|
const dispatch = useDispatch();
|
|
|
|
const { projectNames } = useProjectName();
|
|
const {
|
|
projects_Details,
|
|
loading: projectLoading,
|
|
refetch,
|
|
} = useProjectDetails(projectId);
|
|
|
|
// const { canView, loading: permsLoading } = useProjectAccess(projectId);
|
|
|
|
useEffect(() => {
|
|
if (!projectId && projectNames.length > 0) {
|
|
dispatch(setProjectId(projectNames[0].id));
|
|
}
|
|
}, [projectId, projectNames, dispatch]);
|
|
|
|
const [activePill, setActivePill] = useState(
|
|
localStorage.getItem("lastActiveProjectTab") || "profile"
|
|
);
|
|
|
|
const handler = useCallback(
|
|
(msg) => {
|
|
if (
|
|
msg.keyword === "Update_Project" &&
|
|
projects_Details?.id === msg.response.id
|
|
) {
|
|
refetch();
|
|
}
|
|
},
|
|
[projects_Details, refetch]
|
|
);
|
|
|
|
useEffect(() => {
|
|
eventBus.on("project", handler);
|
|
return () => eventBus.off("project", handler);
|
|
}, [handler]);
|
|
|
|
const handlePillClick = (pillKey) => {
|
|
setActivePill(pillKey);
|
|
localStorage.setItem("lastActiveProjectTab", pillKey);
|
|
};
|
|
|
|
if (projectLoading || !projects_Details) {
|
|
return <Loader />;
|
|
}
|
|
|
|
const renderContent = () => {
|
|
switch (activePill) {
|
|
case "profile":
|
|
return (
|
|
<div className="row">
|
|
<div className="col-lg-4 col-md-5 mt-2">
|
|
<AboutProject />
|
|
{/* <ProjectOverview project={projectId} /> */}
|
|
</div>
|
|
<div className="col-lg-8 col-md-7 mt-2">
|
|
<AttendanceOverview />
|
|
</div>
|
|
</div>
|
|
);
|
|
case "teams":
|
|
return <Teams />;
|
|
case "infra":
|
|
return <ProjectInfra data={projects_Details} onDataChange={refetch} />;
|
|
case "workplan":
|
|
return <WorkPlan data={projects_Details} onDataChange={refetch} />;
|
|
case "directory":
|
|
return <DirectoryPage IsPage={false} projectId={projects_Details.id} />;
|
|
case "documents":
|
|
return <ProjectDocuments />;
|
|
case "setting":
|
|
return <ProjectSetting />;
|
|
case "organization":
|
|
return <ProjectOrganizations />;
|
|
default:
|
|
return <ComingSoonPage />;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="container-fluid">
|
|
<Breadcrumb
|
|
data={[
|
|
{ label: "Home", link: "/dashboard" },
|
|
{ label: "Projects", link: "/projects" },
|
|
{ label: projects_Details?.name || "Project", link: null },
|
|
]}
|
|
/>
|
|
<div className="row">
|
|
<ProjectNav onPillClick={handlePillClick} activePill={activePill} />
|
|
</div>
|
|
{renderContent()}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ProjectDetails;
|