statistics

Reviewed-on: #21

src/components/Candidate/Candidate.jsx

@@ -91,10 +91,10 @@ const Candidate = () => {
   const { header, img, classes } = setStyles();
 
   return (
-    <div className="candidate__wrapper">
+    <div className="candidate">
       <ProfileHeader />
       <Navigation />
-      <div className="container candidate">
+      <div className="container">
         <ProfileBreadcrumbs
           links={[
             { name: "Главная", link: "/profile" },

src/components/Candidate/candidate.scss

@@ -1,22 +1,24 @@
 @use "sass:math";
 
 .candidate {
-  padding-top: 23px;
+  display: flex;
-  z-index: 0;
+  flex-direction: column;
-
-  &__wrapper {
-    background: #f1f1f1;
   min-height: 100vh;
+  background: #f1f1f1;
+
+  .container {
+    margin-top: 23px;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
   }
 
   .profile-breadcrumbs {
     position: relative;
-    z-index: -1;
   }
 
   .row {
     position: relative;
-    z-index: -1;
   }
 
   &__header {
@@ -32,13 +34,11 @@
 
   .col-xl-8 {
     position: relative;
-    z-index: -1;
   }
 
   &__main {
     margin-top: 60px;
     position: relative;
-    z-index: -1;
 
     &-description {
       padding-left: 16px;

src/components/Common/AuthHeader/AuthHeader.jsx

@@ -25,7 +25,7 @@ export const AuthHeader = () => {
                 </NavLink>
               </li>
               <li>
-                <NavLink to={"/auth"}>Кабинет разработчика</NavLink>
+                <NavLink to={"/profile"}>Кабинет разработчика</NavLink>
               </li>
               <li>
                 <NavLink to={"/tracker-intro"}>Трекер</NavLink>

src/components/Common/AuthHeader/authHeader.scss

@@ -25,6 +25,7 @@
     background: #ffffff;
 
     .auth-nav {
+      height: 35px;
       display: flex;
       flex-direction: row;
       justify-content: space-between;
@@ -48,11 +49,13 @@
             text-decoration: none;
           }
 
-          a:focus, a.active {
+          a:focus,
+          a.active {
             color: #000000;
           }
 
           .candidate {
+            background: transparent;
             color: #1458dd;
           }
         }

src/components/FreeDevelopers/freeDevelopers.scss

@@ -1,6 +1,7 @@
 .free-dev {
-  overflow: hidden;
+  display: flex;
-  position: relative;
+  flex-direction: column;
+  min-height: 100vh;
   background-color: #f1f1f1;
 
   .link {
@@ -28,7 +29,11 @@
   }
 
   &_page {
-    margin: 24px 0 30px 0;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    color: #000000;
+    padding: 50px 0 0;
   }
 
   &__title {

src/components/Modal/ModalRegistration/ModalRegistration.jsx

@@ -137,7 +137,7 @@ export const ModalRegistration = ({ active, setActive }) => {
 
         <div className="button-box">
           {loader ? (
-            <Loader style={"green"} />
+            <Loader />
           ) : (
             <BaseButton
               onClick={async (e) => {

src/components/Modal/ModalRegistration/modalRegistration.scss

@@ -23,6 +23,7 @@
       display: flex;
       flex-direction: column;
       width: 65%;
+      align-items: center;
 
       @media (max-width: 1106px) {
         width: 100%;
@@ -115,6 +116,8 @@
           .input-container {
             margin: 0 0 20px 0;
             width: 100%;
+            display: flex;
+            flex-direction: column;
           }
 
           span {

src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx

@@ -35,8 +35,8 @@ import arrow from "assets/icons/arrows/arrowCalendar.png";
 import arrowStart from "assets/icons/arrows/arrowStart.png";
 import arrowDown from "assets/icons/arrows/selectArrow.png";
 import calendarIcon from "assets/icons/calendar.svg";
-import close from "assets/icons/close.png";
 import fileDelete from "assets/icons/closeProjectPersons.svg";
+import close from "assets/icons/crossWhite.svg";
 import del from "assets/icons/delete.svg";
 import edit from "assets/icons/edit.svg";
 import file from "assets/icons/fileModal.svg";
@@ -971,7 +971,7 @@ export const TicketFullScreen = () => {
                     />
                   </div>
                   <div className="time">
-                    <img src={watch}></img>
+                    <p>⏱</p>
                     <p>
                       {correctTimerTime(currentTimerCount.hours)}:
                       {correctTimerTime(currentTimerCount.minute)}:

src/components/Modal/Tracker/TicketFullScreen/ticketFullScreen.scss

@@ -49,8 +49,6 @@
 
 .fullscreen-workers {
   @media (max-width: 880px) {
-    background: #dff1ff;
-
     .workers_box {
       @media (max-width: 880px) {
         flex-direction: inherit !important;

src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx

@@ -125,6 +125,11 @@ export const TrackerModal = ({
       }
     }).then(() => {
       dispatch(setProjectBoardFetch(projectBoard.id));
+      showNotification({
+        show: true,
+        text: "Колонка создана",
+        type: "success"
+      });
     });
     setValueColumn("");
     setActive(false);
@@ -219,6 +224,11 @@ export const TrackerModal = ({
     }).then(() => {
       setActive(false);
       dispatch(editProjectName({ id: projectId, name: projectName }));
+      showNotification({
+        show: true,
+        text: "Название проекта успешно изменено",
+        type: "success"
+      });
     });
   }
 
@@ -269,6 +279,11 @@ export const TrackerModal = ({
     }).then(() => {
       setActive(false);
       dispatch(editColumnName({ id: columnId, title: columnName }));
+      showNotification({
+        show: true,
+        text: "Колонка создана",
+        type: "success"
+      });
     });
   }
 
@@ -323,6 +338,11 @@ export const TrackerModal = ({
     }).then((el) => {
       setActive(false);
       setEmailWorker("");
+      showNotification({
+        show: true,
+        text: "Приглашение отправлено",
+        type: "success"
+      });
     });
   }
 

src/components/OutstaffingBlock/outstaffingBlock.scss

@@ -1,6 +1,3 @@
-.container {
-  max-width: 1160px !important;
-}
 .catalog {
   background: #f1f1f1;
   height: 100%;
@@ -14,6 +11,10 @@
   }
 }
 
+.container {
+  max-width: 1160px !important;
+}
+
 .outstaffing-block__selected .outstaffing-block__img {
   background-color: #52b70999;
   color: #f9f9f9;

src/components/ProfileHeader/profileHeader.scss

@@ -17,7 +17,7 @@
     justify-content: space-between;
     align-items: center;
     height: 100%;
-    z-index: 9999;
+    z-index: 9;
     max-width: 1160px;
     width: 100%;
     margin: 0 auto;

src/components/ProjectTicket/ProjectTicket.jsx

@@ -68,6 +68,11 @@ export const ProjectTicket = ({ project, index }) => {
       });
     });
   }
+  // showNotification({
+  //   show: true,
+  //   text: "Проект успешно удален",
+  //   type: "success"
+  // });
 
   function closeAcceptModal() {
     setAcceptModalOpen(false);
@@ -135,7 +140,16 @@ export const ProjectTicket = ({ project, index }) => {
             <img src={edit}></img>
             <p>редактировать</p>
           </div>
-          <div onClick={() => copyProjectLink(project.id)}>
+          <div
+            onClick={() => {
+              copyProjectLink(project.id);
+              showNotification({
+                show: true,
+                text: "Ссылка скопирована в буфер обмена",
+                type: "copy"
+              });
+            }}
+          >
             <img src={link}></img>
             <p>скопировать ссылку</p>
           </div>

src/components/SideBar/SideBar.jsx

@@ -50,7 +50,7 @@ export const SideBar = () => {
             <Link to={"/auth"}>Вход для партнеров</Link>
           </li>
           <li>
-            <Link to={"/auth"}>Кабинет разработчика</Link>
+            <Link to={"/profile"}>Кабинет разработчика</Link>
           </li>
           <li>
             <Link to={"/tracker-intro"}>Трекер</Link>

src/components/features/quiz/HeaderQuiz.jsx

@@ -5,6 +5,8 @@ import { selectUserInfo } from "@redux/quizSlice";
 
 import { urlForLocal } from "@utils/helper";
 
+import { Loader } from "@components/common/Loader/Loader";
+
 // import { apiRequest } from "@api/request";
 import "./quiz.scss";
 
@@ -21,7 +23,7 @@ export const HeaderQuiz = ({ header }) => {
         <div className="header-quiz">
           <div className="header-quiz__container">
             {!userInfo ? (
-              <h2>Loading...</h2>
+              <Loader />
             ) : (
               <>
                 {header && (

src/components/features/quiz/Instructions.jsx

@@ -6,6 +6,8 @@ import { selectedTest } from "@redux/quizSlice";
 
 import { apiRequest } from "@api/request";
 
+import { Loader } from "@components/common/Loader/Loader";
+
 import comment from "assets/icons/comment.jpg";
 
 import "./quiz.scss";
@@ -24,7 +26,7 @@ export const Instruction = () => {
     <div className="instruction">
       <div className="instruction__container">
         {!countQuestions ? (
-          <h2>Loading...</h2>
+          <Loader />
         ) : (
           <>
             <h3 className="instruction__title quiz-title_h3">

src/components/features/quiz/Results.jsx

@@ -5,6 +5,8 @@ import { fetchResultTest, selectResult, selectedTest } from "@redux/quizSlice";
 
 import { apiRequest } from "@api/request";
 
+import { Loader } from "@components/common/Loader/Loader";
+
 export const Results = () => {
   const result = useSelector(selectResult);
   const test = useSelector(selectedTest);
@@ -21,7 +23,7 @@ export const Results = () => {
   return (
     <div className={"result _container"}>
       {!result ? (
-        <h1 style={{ display: "block" }}>Ожидайте результата...</h1>
+        <Loader />
       ) : (
         <div className="result__body">
           <div className="result__text">Благодарим за прохождение теста</div>

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/Article/article.scss

@@ -1,6 +1,16 @@
 .article-blog {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
   background: #f1f1f1;
 
+  .container {
+    max-width: 1160px;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
+
   &__breadcrumbs {
     margin-top: 30px;
 

src/pages/AuthForCandidate/authForCandidate.scss

@@ -1,7 +1,15 @@
 .auth-candidate {
-  overflow: hidden;
+  display: flex;
-  position: relative;
+  flex-direction: column;
-  background-color: #f1f1f1;
+  min-height: 100vh;
+  background: #f1f1f1;
+
+  .container {
+    max-width: 1160px;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
 
   &__start {
     margin-top: 60px;

src/pages/Blog/blog.scss

@@ -1,6 +1,16 @@
 .blog {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
   background: #f1f1f1;
 
+  .container {
+    max-width: 1160px;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
+
   &__breadcrumbs {
     margin-top: 30px;
 

src/pages/CatalogSpecialists/CatalogSpecialists.jsx

@@ -145,9 +145,10 @@ const CatalogSpecialists = () => {
     }
   ];
   return (
-    <section className="catalog-specialists">
+    <div className="catalog-specialists">
       <AuthHeader />
-      <div className="container catalog-specialists__wrapper">
+      <SideBar />
+      <div className="catalog-specialists__content container">
         <ProfileBreadcrumbs
           links={[
             { name: "Главная", link: "/auth" },
@@ -201,9 +202,8 @@ const CatalogSpecialists = () => {
           })}
         </div>
       </div>
-      <SideBar />
       <Footer />
-    </section>
+    </div>
   );
 };
 

src/pages/CatalogSpecialists/catalogSpecialists.scss

@@ -4,8 +4,20 @@
   flex-direction: column;
   min-height: 100vh;
 
-  &__wrapper {
+  &__content {
-    padding-top: 24px;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    color: #000000;
+    padding: 50px 0 0;
+
+    @media (max-width: 1375px) {
+      padding-top: 100px;
+    }
+
+    @media (max-width: 1000px) {
+      background-color: white;
+    }
   }
 
   &__head {

src/pages/CompanyInfo/companyInfo.scss

@@ -1,7 +1,15 @@
 .company-info {
-  &__content {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
   background-color: #f1f1f1;
-    padding-top: 60px;
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    color: #000000;
+    padding: 50px 0 0;
 
     @media (max-width: 1375px) {
       padding-top: 120px;

src/pages/FrequentlyAskedQuestions/FrequentlyAskedQuestions.jsx

@@ -83,8 +83,7 @@ export const FrequentlyAskedQuestions = () => {
     <div className="frequently-asked-questions">
       <AuthHeader />
       <SideBar />
-
+      <div className="container">
-      <div className="frequently-asked-questions__container container">
         <ProfileBreadcrumbs
           links={[
             { name: "Главная", link: "/auth" },

src/pages/FrequentlyAskedQuestions/FrequentlyAskedQuestions.scss

@@ -8,9 +8,12 @@
     margin-top: 80px;
   }
 
-  &__container {
+  .container {
-    flex: 1 1 auto;
+    display: flex;
-    margin: 30px 0;
+    flex-direction: column;
+    flex: 1;
+    max-width: 1160px;
+    margin-top: 23px;
   }
 
   &__about {

src/pages/PartnerAddRequest/partnerAddRequest.scss

@@ -7,6 +7,9 @@
   .container {
     max-width: 1160px;
     margin-top: 23px;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
 
     @media (max-width: 570px) {
       margin-top: 0;

src/pages/PartnerSettings/partnerSettings.scss

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

src/pages/RegistrationForCandidate/registationForCandidate.scss

@@ -1,6 +1,15 @@
 .registration-candidate {
-  position: relative;
+  display: flex;
-  background-color: #f1f1f1;
+  flex-direction: column;
+  min-height: 100vh;
+  background: #f1f1f1;
+
+  .container {
+    max-width: 1160px;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
 
   &__start {
     display: flex;

src/pages/RegistrationSetting/registrationSetting.scss

@@ -1,9 +1,15 @@
 .registration-setting {
-  &__content {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
   background-color: #f1f1f1;
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
     color: #000000;
     padding: 50px 0 0;
-    min-height: 100vh;
 
     @media (max-width: 1375px) {
       padding-top: 100px;

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) {

src/pages/TrackerAuth/trackerAuth.scss

@@ -8,7 +8,6 @@
     display: flex;
     flex-direction: column;
     flex: 1;
-
     color: #000000;
     padding: 50px 0 0;
 

src/pages/TrackerRegistration/trackerRegistration.scss

@@ -1,9 +1,15 @@
 .tracker-registration {
-  &__content {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
   background-color: #f1f1f1;
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
     color: #000000;
     padding: 50px 0 0;
-    min-height: 100vh;
 
     @media (max-width: 1375px) {
       padding-top: 100px;