statistics
This commit is contained in:
Mikola
parent
9b01381af1
commit
5dbf1421f0
@ -566,7 +566,6 @@ $maxWidthContainer: 1123;
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
flex-wrap: wrap;
|
|
||||||
@media (max-width: 600px) {
|
@media (max-width: 600px) {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -225,7 +225,7 @@
|
|||||||
|
|
||||||
&__report,
|
&__report,
|
||||||
&__login {
|
&__login {
|
||||||
width: 60%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__report {
|
&__report {
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
import React from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
import { useDispatch } from "react-redux";
|
import { useDispatch } from "react-redux";
|
||||||
import { Link } from "react-router-dom";
|
import { Link, useParams } from "react-router-dom";
|
||||||
|
|
||||||
import { setToggleTab } from "@redux/projectsTrackerSlice";
|
import { setToggleTab } from "@redux/projectsTrackerSlice";
|
||||||
|
|
||||||
@ -10,6 +10,10 @@ import { Footer } from "@components/Common/Footer/Footer";
|
|||||||
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";
|
||||||
@ -23,6 +27,22 @@ import "./statistics.scss";
|
|||||||
|
|
||||||
const Statistics = () => {
|
const Statistics = () => {
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
|
const params = useParams();
|
||||||
|
|
||||||
|
const [projectStatistic, setProjectStatistic] = useState(null)
|
||||||
|
const [projectInfo, setProjectInfo] = useState(null)
|
||||||
|
const [loader, setLoader] = useState(true)
|
||||||
|
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
apiRequest(`/project/get-project?project_id=${params.id}`).then((res) => {
|
||||||
|
setProjectInfo(res)
|
||||||
|
});
|
||||||
|
apiRequest(`/project/statistic?project_id=${params.id}`).then((res) => {
|
||||||
|
setProjectStatistic(res)
|
||||||
|
setLoader(false)
|
||||||
|
});
|
||||||
|
}, [])
|
||||||
|
|
||||||
const teams = [
|
const teams = [
|
||||||
{
|
{
|
||||||
@ -72,135 +92,139 @@ const Statistics = () => {
|
|||||||
/>
|
/>
|
||||||
<h2 className="tracker__title">Управление проектами с трекером</h2>
|
<h2 className="tracker__title">Управление проектами с трекером</h2>
|
||||||
</div>
|
</div>
|
||||||
<div className="tracker__tabs">
|
{loader ? <Loader />
|
||||||
<div className="tracker__tabs__head">
|
:
|
||||||
<Link
|
<div className="tracker__tabs">
|
||||||
to="/profile/tracker"
|
<div className="tracker__tabs__head">
|
||||||
className="tab active-tab"
|
<Link
|
||||||
onClick={() => toggleTabs(1)}
|
to="/profile/tracker"
|
||||||
>
|
className="tab active-tab"
|
||||||
<img src={project} alt="img" />
|
onClick={() => toggleTabs(1)}
|
||||||
<p>Проекты </p>
|
>
|
||||||
</Link>
|
<img src={project} alt="img" />
|
||||||
<Link
|
<p>Проекты </p>
|
||||||
to="/profile/tracker"
|
</Link>
|
||||||
className="tab"
|
<Link
|
||||||
onClick={() => toggleTabs(2)}
|
to="/profile/tracker"
|
||||||
>
|
className="tab"
|
||||||
<img src={tasks} alt="img" />
|
onClick={() => toggleTabs(2)}
|
||||||
<p>Все мои задачи</p>
|
>
|
||||||
</Link>
|
<img src={tasks} alt="img" />
|
||||||
<Link
|
<p>Все мои задачи</p>
|
||||||
to="/profile/tracker"
|
</Link>
|
||||||
className="tab"
|
<Link
|
||||||
onClick={() => toggleTabs(3)}
|
to="/profile/tracker"
|
||||||
>
|
className="tab"
|
||||||
<img src={archive} alt="img" />
|
onClick={() => toggleTabs(3)}
|
||||||
<p>Архив</p>
|
>
|
||||||
</Link>
|
<img src={archive} alt="img" />
|
||||||
</div>
|
<p>Архив</p>
|
||||||
<div className="tracker__tabs__content">
|
</Link>
|
||||||
<div className="tracker__tabs__content__wrapper statistics-body">
|
</div>
|
||||||
<div className="statistics-header">
|
<div className="tracker__tabs__content">
|
||||||
<div className="statistics-header__menu">
|
<div className="tracker__tabs__content__wrapper statistics-body">
|
||||||
<h1>Статистика проекта</h1>
|
<div className="statistics-header">
|
||||||
<img src={link} alt="#" />
|
<div className="statistics-header__menu">
|
||||||
<span
|
<h1>Статистика проекта</h1>
|
||||||
className="return-text"
|
<img src={link} alt="#" />
|
||||||
onClick={() => copyProjectLink("62")}
|
<span
|
||||||
>
|
className="return-text"
|
||||||
|
onClick={() => copyProjectLink("62")}
|
||||||
|
>
|
||||||
ссылка на проект
|
ссылка на проект
|
||||||
</span>
|
</span>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="statistics-header__return">
|
|
||||||
<img src={arrow} alt="#" />
|
|
||||||
|
|
||||||
<Link to={`/profile/tracker`} className="return-text">
|
|
||||||
К списку проектов
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="statistics-info">
|
|
||||||
<div className="statistics-info__head">
|
|
||||||
<p>Проект: </p>
|
|
||||||
<h1>{"Разработка трекера"}</h1>
|
|
||||||
</div>
|
|
||||||
<div className="statistics-info__team">
|
|
||||||
<div className="project-info">
|
|
||||||
<div className="project-info__creator">
|
|
||||||
<span className="return-text">Создатель проекта:</span>
|
|
||||||
<div>
|
|
||||||
<p>{"Василий Тарасов"}</p>{" "}
|
|
||||||
<img src={mockAvatar} alt="#" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="project-info__tasks">
|
|
||||||
<div className="task-quantity">
|
|
||||||
<p>Открытые задачи</p>
|
|
||||||
<span className="task-quantity_open">{4}</span>
|
|
||||||
</div>
|
|
||||||
<div className="task-quantity">
|
|
||||||
<p>Задач в работе</p>
|
|
||||||
<span className="task-quantity_work">{5}</span>
|
|
||||||
</div>
|
|
||||||
<div className="task-quantity">
|
|
||||||
<p>Закрыто задач</p>
|
|
||||||
<span className="task-quantity_closed">{434}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="list-team">
|
|
||||||
<div className="list-team__title">
|
|
||||||
<span className="return-text">Участники проекта:</span>
|
|
||||||
</div>
|
|
||||||
<div className="list-team__head">
|
|
||||||
<p>Имя</p>
|
|
||||||
<p>Почта</p>
|
|
||||||
<p>Роль</p>
|
|
||||||
<p>Статус</p>
|
|
||||||
</div>
|
|
||||||
<div className="list-team__body">
|
|
||||||
{teams.map((item) => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className="list-team__item">
|
|
||||||
<div className="person-name">
|
|
||||||
<img src={item.avatar} alt="#" />
|
|
||||||
<p>{item.name}</p>
|
|
||||||
</div>
|
|
||||||
<div className="person-email">
|
|
||||||
<img src={emailImg} alt="#" />
|
|
||||||
<p>{item.email}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p className="person-type">{item.role}</p>
|
<div className="statistics-header__return">
|
||||||
{/* <span className="status status-active"> */}
|
<img src={arrow} alt="#" />
|
||||||
|
|
||||||
<span
|
<Link to={`/profile/tracker`} className="return-text">
|
||||||
className={
|
К списку проектов
|
||||||
item.status
|
</Link>
|
||||||
? "status status-active"
|
</div>
|
||||||
: "status status-none"
|
</div>
|
||||||
}
|
<div className="statistics-info">
|
||||||
>
|
<div className="statistics-info__head">
|
||||||
{item.status ? "Активно" : "Не активно"}
|
<p>Проект: </p>
|
||||||
|
<h1>{projectInfo?.name}</h1>
|
||||||
|
</div>
|
||||||
|
<div className="statistics-info__team">
|
||||||
|
<div className="project-info">
|
||||||
|
<div className="project-info__creator">
|
||||||
|
<span className="return-text">Создатель проекта:</span>
|
||||||
|
<div>
|
||||||
|
<p>{projectInfo?.owner_info?.fio}</p>{" "}
|
||||||
|
<img src={projectInfo?.owner_info?.avatar ? urlForLocal(projectInfo.owner_info.avatar) : mockAvatar} alt="#" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="project-info__tasks">
|
||||||
|
<div className="task-quantity">
|
||||||
|
<p>Открытые задачи</p>
|
||||||
|
<span className="task-quantity_open">{projectStatistic?.open_tasks_count}</span>
|
||||||
|
</div>
|
||||||
|
<div className="task-quantity">
|
||||||
|
<p>Задач в работе</p>
|
||||||
|
<span className="task-quantity_work">{projectStatistic?.task_on_work_count}</span>
|
||||||
|
</div>
|
||||||
|
<div className="task-quantity">
|
||||||
|
<p>Закрыто задач</p>
|
||||||
|
<span className="task-quantity_closed">{projectStatistic?.closed_task_count}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="list-team">
|
||||||
|
<div className="list-team__title">
|
||||||
|
<span className="return-text">Участники проекта:</span>
|
||||||
|
</div>
|
||||||
|
<div className="list-team__head">
|
||||||
|
<p className="head__name">Имя</p>
|
||||||
|
<p className="head__email">Почта</p>
|
||||||
|
<p className="head__role">Роль</p>
|
||||||
|
<p className="head__status">Статус</p>
|
||||||
|
</div>
|
||||||
|
<div className="list-team__body">
|
||||||
|
{projectStatistic?.participants.map((person, index) => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="list-team__item" key={index}>
|
||||||
|
<div className="person-name">
|
||||||
|
<img
|
||||||
|
src={person.avatar ? urlForLocal(person.avatar) : mockAvatar} alt="avatar" />
|
||||||
|
<p>{person.username}</p>
|
||||||
|
</div>
|
||||||
|
<div className="person-email">
|
||||||
|
<img src={emailImg} alt="#" />
|
||||||
|
<p>{person.email}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="person-type">{person.role ? person.role : '-'}</p>
|
||||||
|
{/* <span className="status status-active"> */}
|
||||||
|
|
||||||
|
<span
|
||||||
|
className={
|
||||||
|
person.status
|
||||||
|
? "status status-active"
|
||||||
|
: "status status-none"
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{person.status ? "Активно" : "Не активно"}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="add-person">
|
||||||
|
<span className="add-person__button">+</span>
|
||||||
|
<p>Добавить участника</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div className="add-person">
|
|
||||||
<span className="add-person__button">+</span>
|
|
||||||
<p>Добавить участника</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
}
|
||||||
</div>
|
</div>
|
||||||
<Footer />
|
<Footer />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -144,6 +144,11 @@
|
|||||||
line-height: 32px;
|
line-height: 32px;
|
||||||
margin-right: 19px;
|
margin-right: 19px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 36px;
|
||||||
|
max-height: 36px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -240,7 +245,7 @@
|
|||||||
&__head {
|
&__head {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
margin-right: 123px;
|
margin-right: 55px;
|
||||||
|
|
||||||
p {
|
p {
|
||||||
color: #5b6871;
|
color: #5b6871;
|
||||||
@ -255,6 +260,30 @@
|
|||||||
@media (max-width: 650px) {
|
@media (max-width: 650px) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.head {
|
||||||
|
&__name {
|
||||||
|
max-width: 270px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__email {
|
||||||
|
max-width: 270px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__role {
|
||||||
|
max-width: 168px;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__status {
|
||||||
|
text-align: center;
|
||||||
|
max-width: 152px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__item {
|
&__item {
|
||||||
@ -270,14 +299,18 @@
|
|||||||
&-name {
|
&-name {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 202px;
|
max-width: 270px;
|
||||||
|
width: 100%;
|
||||||
img {
|
img {
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
|
max-width: 36px;
|
||||||
|
max-height: 36px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-email {
|
&-email {
|
||||||
width: 235px;
|
max-width: 270px;
|
||||||
|
width: 100%;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
@ -292,6 +325,7 @@
|
|||||||
|
|
||||||
&-type {
|
&-type {
|
||||||
width: 168px;
|
width: 168px;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 850px) {
|
@media (max-width: 850px) {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user