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,6 +91,9 @@ const Statistics = () => {
           />
           <h2 className="tracker__title">Управление проектами с трекером</h2>
         </div>
+        {loader ? (
+          <Loader />
+        ) : (
           <div className="tracker__tabs">
             <div className="tracker__tabs__head">
               <Link
@@ -124,29 +146,42 @@ const Statistics = () => {
                 <div className="statistics-info">
                   <div className="statistics-info__head">
                     <p>Проект: </p>
-                  <h1>{"Разработка трекера"}</h1>
+                    <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>{"Василий Тарасов"}</p>{" "}
+                          <p>{projectInfo?.owner_info?.fio}</p>{" "}
-                        <img src={mockAvatar} alt="#" />
+                          <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">{4}</span>
+                          <span className="task-quantity_open">
+                            {projectStatistic?.open_tasks_count}
+                          </span>
                         </div>
                         <div className="task-quantity">
                           <p>Задач в работе</p>
-                        <span className="task-quantity_work">{5}</span>
+                          <span className="task-quantity_work">
+                            {projectStatistic?.task_on_work_count}
+                          </span>
                         </div>
                         <div className="task-quantity">
                           <p>Закрыто задач</p>
-                        <span className="task-quantity_closed">{434}</span>
+                          <span className="task-quantity_closed">
+                            {projectStatistic?.closed_task_count}
+                          </span>
                         </div>
                       </div>
                     </div>
@@ -155,36 +190,45 @@ const Statistics = () => {
                         <span className="return-text">Участники проекта:</span>
                       </div>
                       <div className="list-team__head">
-                      <p>Имя</p>
+                        <p className="head__name">Имя</p>
-                      <p>Почта</p>
+                        <p className="head__email">Почта</p>
-                      <p>Роль</p>
+                        <p className="head__role">Роль</p>
-                      <p>Статус</p>
+                        <p className="head__status">Статус</p>
                       </div>
                       <div className="list-team__body">
-                      {teams.map((item) => {
+                        {projectStatistic?.participants.map((person, index) => {
                           return (
                             <>
-                            <div className="list-team__item">
+                              <div className="list-team__item" key={index}>
                                 <div className="person-name">
-                                <img src={item.avatar} alt="#" />
+                                  <img
-                                <p>{item.name}</p>
+                                    src={
+                                      person.avatar
+                                        ? urlForLocal(person.avatar)
+                                        : mockAvatar
+                                    }
+                                    alt="avatar"
+                                  />
+                                  <p>{person.username}</p>
                                 </div>
                                 <div className="person-email">
                                   <img src={emailImg} alt="#" />
-                                <p>{item.email}</p>
+                                  <p>{person.email}</p>
                                 </div>
 
-                              <p className="person-type">{item.role}</p>
+                                <p className="person-type">
+                                  {person.role ? person.role : "-"}
+                                </p>
                                 {/* <span className="status status-active"> */}
 
                                 <span
                                   className={
-                                  item.status
+                                    person.status
                                       ? "status status-active"
                                       : "status status-none"
                                   }
                                 >
-                                {item.status ? "Активно" : "Не активно"}
+                                  {person.status ? "Активно" : "Не активно"}
                                 </span>
                               </div>
                             </>
@@ -201,6 +245,7 @@ const Statistics = () => {
               </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) {