Compare commits

..

No commits in common. "3a0426ae6d05de4cbc1fe9a49bda60479df8f3ab" and "9b01381af1ce49e0be88e7a09a09aaf7f9d01610" have entirely different histories.

4 changed files with 126 additions and 204 deletions

View File

@ -566,6 +566,7 @@ $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;
} }

View File

@ -225,7 +225,7 @@
&__report, &__report,
&__login { &__login {
width: 100%; width: 60%;
} }
&__report { &__report {

View File

@ -1,16 +1,12 @@
import React, { useEffect, useState } from "react"; import React from "react";
import { useDispatch } from "react-redux"; import { useDispatch } from "react-redux";
import { Link, useParams } from "react-router-dom"; import { Link } 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";
@ -27,21 +23,6 @@ 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 = [
{ {
@ -91,161 +72,135 @@ const Statistics = () => {
/> />
<h2 className="tracker__title">Управление проектами с трекером</h2> <h2 className="tracker__title">Управление проектами с трекером</h2>
</div> </div>
{loader ? ( <div className="tracker__tabs">
<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>
<div className="statistics-info">
<div className="statistics-info__head"> <div className="statistics-header__return">
<p>Проект: </p> <img src={arrow} alt="#" />
<h1>{projectInfo?.name}</h1>
<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="statistics-info__team"> <div className="list-team">
<div className="project-info"> <div className="list-team__title">
<div className="project-info__creator"> <span className="return-text">Участники проекта:</span>
<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>
<div className="list-team"> <div className="list-team__head">
<div className="list-team__title"> <p>Имя</p>
<span className="return-text">Участники проекта:</span> <p>Почта</p>
</div> <p>Роль</p>
<div className="list-team__head"> <p>Статус</p>
<p className="head__name">Имя</p> </div>
<p className="head__email">Почта</p> <div className="list-team__body">
<p className="head__role">Роль</p> {teams.map((item) => {
<p className="head__status">Статус</p> return (
</div> <>
<div className="list-team__body"> <div className="list-team__item">
{projectStatistic?.participants.map((person, index) => { <div className="person-name">
return ( <img src={item.avatar} alt="#" />
<> <p>{item.name}</p>
<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>
</div> </div>
</> <div className="person-email">
); <img src={emailImg} alt="#" />
})} <p>{item.email}</p>
</div> </div>
</div>
<div className="add-person"> <p className="person-type">{item.role}</p>
<span className="add-person__button">+</span> {/* <span className="status status-active"> */}
<p>Добавить участника</p>
<span
className={
item.status
? "status status-active"
: "status status-none"
}
>
{item.status ? "Активно" : "Не активно"}
</span>
</div>
</>
);
})}
</div> </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>
<Footer /> <Footer />
</div> </div>

View File

@ -144,11 +144,6 @@
line-height: 32px; line-height: 32px;
margin-right: 19px; margin-right: 19px;
} }
img {
max-width: 36px;
max-height: 36px;
}
} }
} }
@ -245,7 +240,7 @@
&__head { &__head {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-right: 55px; margin-right: 123px;
p { p {
color: #5b6871; color: #5b6871;
@ -260,30 +255,6 @@
@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 {
@ -299,18 +270,14 @@
&-name { &-name {
display: flex; display: flex;
align-items: center; align-items: center;
max-width: 270px; width: 202px;
width: 100%;
img { img {
margin-right: 10px; margin-right: 10px;
max-width: 36px;
max-height: 36px;
} }
} }
&-email { &-email {
max-width: 270px; width: 235px;
width: 100%;
align-items: center; align-items: center;
display: flex; display: flex;
@ -325,7 +292,6 @@
&-type { &-type {
width: 168px; width: 168px;
text-align: center;
} }
@media (max-width: 850px) { @media (max-width: 850px) {