apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

statistics

Browse Source
This commit is contained in:
Mikola 2024-02-28 14:04:57 +03:00
parent 5dbf1421f0
commit c972df0656
1 changed files with 46 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
src/pages/Statistics/Statistics.jsx
View File

@ -5,15 +5,15 @@ import { Link, useParams } from "react-router-dom";
import { setToggleTab } from "@redux/projectsTrackerSlice"; import { setToggleTab } from "@redux/projectsTrackerSlice";
import { copyProjectLink } from "@utils/helper"; import { copyProjectLink } from "@utils/helper";
import { urlForLocal } from "@utils/helper";
import { apiRequest } from "@api/request";
import { Footer } from "@components/Common/Footer/Footer"; import { Footer } from "@components/Common/Footer/Footer";
import { Loader } from "@components/Common/Loader/Loader";
import { Navigation } from "@components/Navigation/Navigation"; import { Navigation } from "@components/Navigation/Navigation";
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs"; import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader"; import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
import { Loader } from "@components/Common/Loader/Loader";
import { urlForLocal } from "@utils/helper";
import { apiRequest } from "@api/request";
import arrow from "assets/icons/arrows/arrowCalendar.png"; import arrow from "assets/icons/arrows/arrowCalendar.png";
import emailImg from "assets/icons/emailStatistics.svg"; import emailImg from "assets/icons/emailStatistics.svg";
@ -29,20 +29,19 @@ const Statistics = () => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const params = useParams(); const params = useParams();
const [projectStatistic, setProjectStatistic] = useState(null) const [projectStatistic, setProjectStatistic] = useState(null);
const [projectInfo, setProjectInfo] = useState(null) const [projectInfo, setProjectInfo] = useState(null);
const [loader, setLoader] = useState(true) const [loader, setLoader] = useState(true);
useEffect(() => { useEffect(() => {
apiRequest(`/project/get-project?project_id=${params.id}`).then((res) => { apiRequest(`/project/get-project?project_id=${params.id}`).then((res) => {
setProjectInfo(res) setProjectInfo(res);
}); });
apiRequest(`/project/statistic?project_id=${params.id}`).then((res) => { apiRequest(`/project/statistic?project_id=${params.id}`).then((res) => {
setProjectStatistic(res) setProjectStatistic(res);
setLoader(false) setLoader(false);
}); });
}, []) }, []);
const teams = [ const teams = [
{ {
@ -92,8 +91,9 @@ const Statistics = () => {
/> />
<h2 className="tracker__title">Управление проектами с трекером</h2> <h2 className="tracker__title">Управление проектами с трекером</h2>
</div> </div>
{loader ? <Loader /> {loader ? (
: <Loader />
) : (
<div className="tracker__tabs"> <div className="tracker__tabs">
<div className="tracker__tabs__head"> <div className="tracker__tabs__head">
<Link <Link
@ -131,8 +131,8 @@ const Statistics = () => {
className="return-text" className="return-text"
onClick={() => copyProjectLink("62")} onClick={() => copyProjectLink("62")}
> >
ссылка на проект ссылка на проект
</span> </span>
</div> </div>
<div className="statistics-header__return"> <div className="statistics-header__return">
@ -154,21 +154,34 @@ const Statistics = () => {
<span className="return-text">Создатель проекта:</span> <span className="return-text">Создатель проекта:</span>
<div> <div>
<p>{projectInfo?.owner_info?.fio}</p>{" "} <p>{projectInfo?.owner_info?.fio}</p>{" "}
<img src={projectInfo?.owner_info?.avatar ? urlForLocal(projectInfo.owner_info.avatar) : mockAvatar} alt="#" /> <img
src={
projectInfo?.owner_info?.avatar
? urlForLocal(projectInfo.owner_info.avatar)
: mockAvatar
}
alt="#"
/>
</div> </div>
</div> </div>
<div className="project-info__tasks"> <div className="project-info__tasks">
<div className="task-quantity"> <div className="task-quantity">
<p>Открытые задачи</p> <p>Открытые задачи</p>
<span className="task-quantity_open">{projectStatistic?.open_tasks_count}</span> <span className="task-quantity_open">
{projectStatistic?.open_tasks_count}
</span>
</div> </div>
<div className="task-quantity"> <div className="task-quantity">
<p>Задач в работе</p> <p>Задач в работе</p>
<span className="task-quantity_work">{projectStatistic?.task_on_work_count}</span> <span className="task-quantity_work">
{projectStatistic?.task_on_work_count}
</span>
</div> </div>
<div className="task-quantity"> <div className="task-quantity">
<p>Закрыто задач</p> <p>Закрыто задач</p>
<span className="task-quantity_closed">{projectStatistic?.closed_task_count}</span> <span className="task-quantity_closed">
{projectStatistic?.closed_task_count}
</span>
</div> </div>
</div> </div>
</div> </div>
@ -189,7 +202,13 @@ const Statistics = () => {
<div className="list-team__item" key={index}> <div className="list-team__item" key={index}>
<div className="person-name"> <div className="person-name">
<img <img
src={person.avatar ? urlForLocal(person.avatar) : mockAvatar} alt="avatar" /> src={
person.avatar
? urlForLocal(person.avatar)
: mockAvatar
}
alt="avatar"
/>
<p>{person.username}</p> <p>{person.username}</p>
</div> </div>
<div className="person-email"> <div className="person-email">
@ -197,7 +216,9 @@ const Statistics = () => {
<p>{person.email}</p> <p>{person.email}</p>
</div> </div>
<p className="person-type">{person.role ? person.role : '-'}</p> <p className="person-type">
{person.role ? person.role : "-"}
</p>
{/* <span className="status status-active"> */} {/* <span className="status status-active"> */}
<span <span
@ -207,8 +228,8 @@ const Statistics = () => {
: "status status-none" : "status status-none"
} }
> >
{person.status ? "Активно" : "Не активно"} {person.status ? "Активно" : "Не активно"}
</span> </span>
</div> </div>
</> </>
); );
@ -224,7 +245,7 @@ const Statistics = () => {
</div> </div>
</div> </div>
</div> </div>
} )}
</div> </div>
<Footer /> <Footer />
</div> </div>