143 lines
3.9 KiB
JavaScript
143 lines
3.9 KiB
JavaScript
import { useSelector, useDispatch } from "react-redux"; // Import useSelector
|
|
import React, { useState, useEffect, useCallback } from "react";
|
|
|
|
import ProjectOverview from "../../components/Project/ProjectOverview";
|
|
import AboutProject from "../../components/Project/AboutProject";
|
|
import ProjectNav from "../../components/Project/ProjectNav";
|
|
import Teams from "../../components/Project/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 {
|
|
cacheData,
|
|
clearCacheKey,
|
|
getCachedData,
|
|
} from "../../slices/apiDataManager";
|
|
import "./ProjectDetails.css";
|
|
import {
|
|
useProjectDetails,
|
|
} from "../../hooks/useProjects";
|
|
import { ComingSoonPage } from "../Misc/ComingSoonPage";
|
|
import Directory from "../Directory/Directory";
|
|
import eventBus from "../../services/eventBus";
|
|
import ProjectProgressChart from "../../components/Dashboard/ProjectProgressChart";
|
|
import { useProjectName } from "../../hooks/useProjects";
|
|
import AttendanceOverview from "../../components/Dashboard/AttendanceChart";
|
|
import { setProjectId } from "../../slices/localVariablesSlice";
|
|
|
|
const ProjectDetails = () => {
|
|
|
|
|
|
const projectId = useSelector((store) => store.localVariables.projectId);
|
|
|
|
const { projectNames, fetchData } = useProjectName();
|
|
const dispatch = useDispatch()
|
|
|
|
useEffect(() => {
|
|
if (projectId == null) {
|
|
dispatch(setProjectId(projectNames[0]?.id));
|
|
}
|
|
}, [projectNames])
|
|
|
|
const {
|
|
projects_Details,
|
|
loading: projectLoading,
|
|
error: projectError,
|
|
refetch,
|
|
} = useProjectDetails(projectId);
|
|
|
|
const [activePill, setActivePill] = useState("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);
|
|
};
|
|
|
|
const renderContent = () => {
|
|
if (projectLoading || !projects_Details) return <Loader />;
|
|
|
|
switch (activePill) {
|
|
case "profile":
|
|
return (
|
|
<>
|
|
<div className="row">
|
|
<div className="col-lg-4 col-md-5 mt-5">
|
|
<AboutProject></AboutProject>
|
|
<ProjectOverview project={projectId} />
|
|
</div>
|
|
<div className="col-lg-8 col-md-7 mt-5">
|
|
<ProjectProgressChart ShowAllProject="false" DefaultRange="1M" />
|
|
<div className="mt-5"> <AttendanceOverview /></div>
|
|
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
|
|
case "teams":
|
|
return (
|
|
<div className="row">
|
|
<div className="col-lg-12">
|
|
<Teams />
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
case "infra":
|
|
return (
|
|
<ProjectInfra data={projects_Details} onDataChange={refetch} />
|
|
);
|
|
|
|
case "workplan":
|
|
return (
|
|
<WorkPlan data={projects_Details} onDataChange={refetch} />
|
|
);
|
|
|
|
case "directory":
|
|
return (
|
|
<div className="row mt-2">
|
|
<Directory IsPage={false} prefernceContacts={projects_Details.id} />
|
|
</div>
|
|
);
|
|
|
|
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; |