Merge pull request 'trackerTask' (#22) from trackerTask into main

Reviewed-on: #22

src/components/features/quiz/quiz.scss

@@ -566,7 +566,6 @@ $maxWidthContainer: 1123;
     align-items: center;
     width: 100%;
     height: 100%;
-    flex-wrap: wrap;
     @media (max-width: 600px) {
       display: block;
     }

src/pages/PartnerSettings/partnerSettings.scss

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

src/pages/Statistics/Statistics.jsx

@@ -1,12 +1,16 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { useDispatch } from "react-redux";
-import { Link } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
 
 import { setToggleTab } from "@redux/projectsTrackerSlice";
 
 import { copyProjectLink } from "@utils/helper";
+import { urlForLocal } from "@utils/helper";
+
+import { apiRequest } from "@api/request";
 
 import { Footer } from "@components/Common/Footer/Footer";
+import { Loader } from "@components/Common/Loader/Loader";
 import { Navigation } from "@components/Navigation/Navigation";
 import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
@@ -23,6 +27,21 @@ import "./statistics.scss";
 
 const Statistics = () => {
   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 = [
     {
@@ -72,135 +91,161 @@ const Statistics = () => {
           />
           <h2 className="tracker__title">Управление проектами с трекером</h2>
         </div>
-        <div className="tracker__tabs">
+        {loader ? (
-          <div className="tracker__tabs__head">
+          <Loader />
-            <Link
+        ) : (
-              to="/profile/tracker"
+          <div className="tracker__tabs">
-              className="tab active-tab"
+            <div className="tracker__tabs__head">
-              onClick={() => toggleTabs(1)}
+              <Link
-            >
+                to="/profile/tracker"
-              <img src={project} alt="img" />
+                className="tab active-tab"
-              <p>Проекты </p>
+                onClick={() => toggleTabs(1)}
-            </Link>
+              >
-            <Link
+                <img src={project} alt="img" />
-              to="/profile/tracker"
+                <p>Проекты </p>
-              className="tab"
+              </Link>
-              onClick={() => toggleTabs(2)}
+              <Link
-            >
+                to="/profile/tracker"
-              <img src={tasks} alt="img" />
+                className="tab"
-              <p>Все мои задачи</p>
+                onClick={() => toggleTabs(2)}
-            </Link>
+              >
-            <Link
+                <img src={tasks} alt="img" />
-              to="/profile/tracker"
+                <p>Все мои задачи</p>
-              className="tab"
+              </Link>
-              onClick={() => toggleTabs(3)}
+              <Link
-            >
+                to="/profile/tracker"
-              <img src={archive} alt="img" />
+                className="tab"
-              <p>Архив</p>
+                onClick={() => toggleTabs(3)}
-            </Link>
+              >
-          </div>
+                <img src={archive} alt="img" />
-          <div className="tracker__tabs__content">
+                <p>Архив</p>
-            <div className="tracker__tabs__content__wrapper statistics-body">
+              </Link>
-              <div className="statistics-header">
+            </div>
-                <div className="statistics-header__menu">
+            <div className="tracker__tabs__content">
-                  <h1>Статистика проекта</h1>
+              <div className="tracker__tabs__content__wrapper statistics-body">
-                  <img src={link} alt="#" />
+                <div className="statistics-header">
-                  <span
+                  <div className="statistics-header__menu">
-                    className="return-text"
+                    <h1>Статистика проекта</h1>
-                    onClick={() => copyProjectLink("62")}
+                    <img src={link} alt="#" />
-                  >
+                    <span
-                    ссылка на проект
+                      className="return-text"
-                  </span>
+                      onClick={() => copyProjectLink("62")}
-                </div>
+                    >
-
+                      ссылка на проект
-                <div className="statistics-header__return">
+                    </span>
-                  <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 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"
-                                    : "status status-none"
-                                }
-                              >
-                                {item.status ? "Активно" : "Не активно"}
-                              </span>
-                            </div>
-                          </>
-                        );
-                      })}
-                    </div>
                   </div>
-                  <div className="add-person">
+                </div>
-                    <span className="add-person__button">+</span>
+                <div className="statistics-info">
-                    <p>Добавить участника</p>
+                  <div className="statistics-info__head">
+                    <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>
+                              </div>
+                            </>
+                          );
+                        })}
+                      </div>
+                    </div>
+                    <div className="add-person">
+                      <span className="add-person__button">+</span>
+                      <p>Добавить участника</p>
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
-        </div>
+        )}
       </div>
       <Footer />
     </div>

src/pages/Statistics/statistics.scss

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