Merge pull request #112 from apuc/tracker-tasks

Tracker tasks

src/App.js

@@ -8,6 +8,7 @@ import {
 
 import AuthForPartners from "./pages/AuthForPartners/AuthForPartners";
 import AuthForDevelopers from "./pages/AuthForDevelopers/AuthForDevelopers";
+import { TrackerIntro } from "./pages/TrackerIntro/TrackerIntro"
 import Home from "./pages/Home/Home";
 import Candidate from "./components/Candidate/Candidate";
 import Calendar from "./components/Calendar/Calendar";
@@ -52,6 +53,7 @@ const App = () => {
         <Routes>
           <Route exact path="/authdev" element={<AuthForDevelopers />} />
           <Route exact path="/auth" element={<AuthForPartners />} />
+          <Route exact path="/tracker-intro" element={<TrackerIntro />} />
 
           <Route exact path="/worker/:id" element={<FreeDevelopers />} />
           <Route

src/assets/icons/trackerIntroInfo.svg

@@ -0,0 +1,10 @@
+<svg width="468" height="17" viewBox="0 0 468 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1393_1197)">
+<path d="M2.65831 16.9721C62.5674 9.50253 122.934 6.27598 183.291 5.69781C243.47 5.11964 303.631 7.1339 363.727 10.0714C397.432 11.7219 431.118 13.6616 464.804 15.6106C468.404 15.8157 468.386 10.2206 464.804 10.0154C404.4 6.52776 343.987 3.04943 283.509 1.25897C223.441 -0.531484 163.28 -0.662039 103.259 2.55519C69.6386 4.35497 36.0738 7.2085 2.65831 11.3769C-0.867951 11.8152 -0.914595 17.4197 2.65831 16.9721Z" fill="#8DC63F"/>
+</g>
+<defs>
+<clipPath id="clip0_1393_1197">
+<rect width="467.5" height="17" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/icons/trackerNoTasks.svg

@@ -0,0 +1,6 @@
+<svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.0012419 13.5034C0.0012419 10.3429 0.0012419 7.18359 0.0012419 4.02309C0.00239181 1.5492 1.54327 0 4.00638 0C10.3447 0 16.683 0 23.0213 0C25.4166 0 26.9885 1.55495 26.9908 3.94028C26.9965 8.8432 26.9862 13.7461 27 18.649C27.0011 19.2459 26.8218 19.706 26.394 20.1281C24.2828 22.2144 22.1865 24.3145 20.0982 26.4226C19.7084 26.8171 19.2795 27.0011 18.7229 27C13.7829 26.9896 8.84176 27 3.90174 26.9919C1.58467 26.9908 0.00584155 25.4071 0.00239181 23.0988C-0.00220783 19.9004 0.0012419 16.7019 0.0012419 13.5034ZM13.492 2.46929C10.2952 2.46929 7.09849 2.46584 3.90174 2.47159C2.95881 2.47274 2.47585 2.91208 2.4747 3.80687C2.46665 10.259 2.46665 16.7111 2.47355 23.1632C2.47355 24.0511 2.94041 24.5227 3.81665 24.5238C8.52553 24.533 13.2344 24.525 17.9433 24.5376C18.3021 24.5376 18.3998 24.426 18.3941 24.081C18.3757 23.0471 18.378 22.0131 18.3895 20.9792C18.4056 19.4219 19.4313 18.4052 20.9975 18.3903C21.9737 18.3811 22.9512 18.3638 23.9263 18.3995C24.392 18.4167 24.5403 18.2994 24.538 17.8095C24.5185 13.2332 24.5277 8.65803 24.5254 4.08174C24.5254 2.84767 24.1448 2.46814 22.9098 2.46814C19.7705 2.46699 16.6313 2.46814 13.492 2.46814V2.46929Z" fill="#1458DD"/>
+<path d="M12.0164 15.9981C10.4826 15.9981 8.94875 16.0023 7.41493 15.9981C6.50026 15.9953 5.98786 15.4366 6.00022 14.4741C6.01258 13.5537 6.53396 13.0021 7.40482 13.0021C10.4725 12.9993 13.5401 12.9993 16.6077 13.0021C17.4606 13.0021 17.9955 13.5819 18 14.4966C18.0045 15.4183 17.4797 15.9939 16.6178 15.9967C15.084 16.0009 13.5502 15.9967 12.0164 15.9981Z" fill="#1458DD"/>
+<path d="M10.0174 10.998C9.167 10.998 8.31665 11.0035 7.4663 10.9962C6.58727 10.9888 6.00125 10.5839 6 9.99918C6 9.41169 6.57605 9.00957 7.4638 9.00588C9.16451 8.99851 10.8652 8.99758 12.5659 9.00588C13.4375 9.0105 14.0123 9.42921 13.9998 10.0195C13.9873 10.5802 13.4038 10.986 12.5684 10.9943C11.7181 11.0035 10.8677 10.9962 10.0174 10.9962V10.998Z" fill="#2D4A17"/>
+<path d="M18.5605 9.00562C18.9668 9.00562 19.3732 8.99183 19.7784 9.00746C20.4851 9.03505 20.9869 9.43967 20.9997 9.96936C21.0137 10.5174 20.5026 10.9662 19.783 10.9846C18.9331 11.0057 18.082 11.0048 17.232 10.9837C16.5206 10.9653 15.9885 10.5064 16.0002 9.97395C16.0118 9.45438 16.5265 9.03781 17.2262 9.0093C17.6698 8.99091 18.1146 9.00562 18.5593 9.00562H18.5605Z" fill="#2D4A17"/>
+</svg>

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

@@ -462,7 +462,8 @@ export const TicketFullScreen = () => {
                           участник
                         </div>
                         <div className="persons__list__info">
-                          В проекте - <span>“{projectInfo.name}”</span>
+                          <span>В проекте - </span>
+                          <p>“{projectInfo.name}”</p>
                         </div>
                         <div className="persons__list__items">
                           {projectInfo.projectUsers?.map((person) => {

src/components/Modal/Tracker/TrackerModal/trackerModal.scss

@@ -213,21 +213,22 @@
     background: white;
     border-radius: 5px;
     cursor: pointer;
-    width: 100%;
     position: relative;
+    min-width: 320px;
+    width: 100%;
 
     p {
-      max-width: 150px;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
       font-size: 14px;
+      max-width: 270px;
     }
 
     img {
       transition: all 0.3s ease;
-      width: 16px;
+      width: 20px;
-      height: 16px;
+      height: 20px;
     }
 
     &__dropDown {
@@ -235,12 +236,12 @@
       flex-direction: column;
       position: absolute;
       width: 100%;
-      padding: 5px;
+      padding: 9.5px 12px;
       top: 35px;
       left: 0;
       background: white;
       border-radius: 5px;
-      row-gap: 5px;
+      row-gap: 10px;
 
       .worker {
         display: flex;

src/components/ProjectTiket/projectTiket.scss

@@ -35,6 +35,7 @@
     white-space: nowrap;
     display: flex;
     text-overflow: ellipsis;
+    max-width: 380px;
 
     &:hover {
       color: black;

src/components/SideBar/SideBar.jsx

@@ -52,6 +52,9 @@ export const SideBar = () => {
           <li>
             <Link to={"/auth"}>Кабинет разработчика</Link>
           </li>
+          <li>
+            <Link to={"/tracker-intro"}>Трекер</Link>
+          </li>
           <li>
             <a href="#">Школа</a>
           </li>

src/pages/ProjectTracker/ProjectTracker.js

@@ -42,6 +42,7 @@ import commentsBoard from "assets/icons/commentsBoard.svg";
 import del from "assets/icons/delete.svg";
 import edit from "assets/icons/edit.svg";
 import filesBoard from "assets/icons/filesBoard.svg";
+import trackerNoTasks from "assets/icons/trackerNoTasks.svg";
 import project from "assets/icons/trackerProject.svg";
 import tasks from "assets/icons/trackerTasks.svg";
 import accept from "assets/images/accept.png";
@@ -62,6 +63,7 @@ export const ProjectTracker = () => {
   const [personListOpen, setPersonListOpen] = useState(false);
   const [checkBoxParticipateTasks, setCheckBoxParticipateTasks] =
     useState(false);
+  const [filteredNoTasks, setFilteredNoTasks] = useState(false);
   const [checkBoxMyTasks, setCheckBoxMyTasks] = useState(false);
   const [selectedExecutor, setSelectedExecutor] = useState(null);
   const [selectExecutorOpen, setSelectedExecutorOpen] = useState(false);
@@ -77,8 +79,10 @@ export const ProjectTracker = () => {
   useEffect(() => {
     const tasksHover = {};
     const columnHover = {};
+    let columnsTasksEmpty = true;
     if (Object.keys(projectBoard).length) {
       projectBoard.columns.forEach((column) => {
+        if (column.tasks.length) columnsTasksEmpty = false;
         setOpenColumnSelect((prevState) => ({
           ...prevState,
           [column.id]: false,
@@ -87,6 +91,14 @@ export const ProjectTracker = () => {
         column.tasks.forEach((task) => (tasksHover[task.id] = false));
       });
     }
+    if (
+      columnsTasksEmpty &&
+      (checkBoxMyTasks || selectedExecutor || checkBoxParticipateTasks)
+    ) {
+      setFilteredNoTasks(true);
+    } else {
+      setFilteredNoTasks(false);
+    }
     setWrapperHover(columnHover);
     setTaskHover(tasksHover);
   }, [projectBoard]);
@@ -381,7 +393,8 @@ export const ProjectTracker = () => {
                           участник
                         </div>
                         <div className="persons__list__info">
-                          В проекте - <span>“{projectBoard.name}”</span>
+                          <span>В проекте - </span>
+                          <p>“{projectBoard.name}”</p>
                         </div>
                         <div className="persons__list__items">
                           {projectBoard.projectUsers?.map((person) => {
@@ -518,6 +531,7 @@ export const ProjectTracker = () => {
 
               <div className="tasks__container">
                 {Boolean(projectBoard?.columns) &&
+                  !filteredNoTasks &&
                   Boolean(projectBoard.columns.length) &&
                   projectBoard.columns.map((column) => {
                     return (
@@ -663,6 +677,18 @@ export const ProjectTracker = () => {
                       В проекте нет задач.
                     </div>
                   )}
+                {filteredNoTasks && (
+                  <div className="tasks__board__noTasks">
+                    <div className="tasks__board__noTasksInfo">
+                      <img src={trackerNoTasks} alt="noTasks" />
+                      <p>Пока нет подходящих задач</p>
+                    </div>
+                    <p className="tasks__board__noTasksMore">
+                      Ставьте задачи, следите за прогрессом, ведите учёт
+                      рабочего времени
+                    </p>
+                  </div>
+                )}
               </div>
             </div>
           )}

src/pages/Tracker/tracker.scss

@@ -208,7 +208,7 @@
 
           &__wrapper {
             display: flex;
-            max-width: 1260px;
+            max-width: 1280px;
             width: 100%;
             margin: 0 auto;
             justify-content: space-between;
@@ -222,8 +222,11 @@
             font-size: 22px;
             line-height: 32px;
             margin-bottom: 0;
-            max-width: 30%;
+            max-width: 21%;
             word-break: break-all;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
           }
 
           &__add {
@@ -360,19 +363,30 @@
 
               &__info {
                 display: flex;
-                font-size: 18px;
-                line-height: 22px;
-                color: #263238;
-                font-weight: 500;
                 margin: 13px 0 10px;
+                align-items: center;
 
                 span {
+                  display: flex;
                   width: auto;
-                  height: auto;
+                  font-size: 18px;
+                  line-height: 22px;
+                  color: #263238;
+                  font-weight: 500;
+                  white-space: nowrap;
+                }
+
+                p {
                   color: #1458dd;
                   font-weight: 600;
                   font-size: 18px;
                   line-height: 22px;
+                  display: flex;
+                  max-width: 250px;
+                  overflow: hidden;
+                  white-space: nowrap;
+                  text-overflow: ellipsis;
+                  margin-left: 30px;
                 }
               }
 
@@ -839,6 +853,33 @@
             font-weight: 500;
             font-size: 25px;
           }
+
+          &__noTasks {
+            display: flex;
+            flex-direction: column;
+
+            &Info {
+              display: flex;
+              align-items: center;
+              margin-bottom: 15px;
+              img {
+                width: 27px;
+                height: 27px;
+                margin-right: 17px;
+              }
+
+              p {
+                font-weight: 700;
+                font-size: 22px;
+                line-height: 32px;
+              }
+            }
+
+            &More {
+              font-size: 14px;
+              line-height: 22px;
+            }
+          }
         }
 
         .board {

src/pages/TrackerIntro/TrackerIntro.js

@@ -0,0 +1,109 @@
+import React from "react";
+import { NavLink } from "react-router-dom";
+
+import AuthHeader from "@components/Common/AuthHeader/AuthHeader";
+import { Footer } from "@components/Common/Footer/Footer";
+import SideBar from "@components/SideBar/SideBar";
+
+import introInfo from "assets/icons/starTrackerIntro.svg";
+import arrowInfo from "assets/icons/trackerIntroInfo.svg";
+import trackerBoard from "assets/images/trackerBoardImg.png";
+import trackerHeard from "assets/images/trackerHeard.png";
+import introImg from "assets/images/trackerIntroImg.png";
+
+import "./trackerIntro.scss";
+
+export const TrackerIntro = () => {
+  return (
+    <div className="trackerIntro">
+      <AuthHeader />
+      <SideBar />
+      <div className="trackerIntro__content">
+        <div className="container">
+          <div className="trackerIntro__intro">
+            <div className="trackerIntro__intro__info">
+              <div className="trackerIntro__intro__suptitle">
+                <img src={introInfo} alt="img" />
+                <span>Подключись и пользуйся бесплатно!</span>
+              </div>
+              <h1 className="trackerIntro__intro__title">
+                Сервис для планирования и работы
+                <span> для Вашей команды</span>
+                <img src={arrowInfo} alt="img" />
+              </h1>
+              <p className="trackerIntro__intro__subtitle">
+                Российский сервис для совместной работы команд. Все процессы
+                компании в одном месте: проекты, задачи, цели, сотрудники,
+                документы, переписки, отчеты
+              </p>
+              <NavLink to="/auth" className="trackerIntro__btn">
+                Начать работу
+              </NavLink>
+            </div>
+            <img
+              className="trackerIntro__intro__img"
+              src={introImg}
+              alt="img"
+            />
+          </div>
+        </div>
+        <div className="trackerIntro__board">
+          <div className="trackerIntro__boardImg">
+            <img className="board" src={trackerBoard} alt="board" />
+            <img className="heard" src={trackerHeard} alt="heard" />
+          </div>
+          <div className="trackerIntro__board__info">
+            <p>
+              Управление большим количеством проектов и гибкая настройка
+              структуры под любые процессы
+            </p>
+            <NavLink to="/auth" className="trackerIntro__btn">
+              Начать работу
+            </NavLink>
+          </div>
+        </div>
+        <div className="container">
+          <div className="trackerIntro__info">
+            <h2 className="trackerIntro__info__title">
+              Используйте сервис, который позаботится о персональных данных
+              вашей компании и<br />
+              <span> не уйдет с рынка.</span>
+              <img src={arrowInfo} alt="img" />
+            </h2>
+            <div className="trackerIntro__info__items">
+              <div className="trackerIntro__info__item">
+                <div className="trackerIntro__info__itemHead">
+                  <span>+</span>
+                  <h3>
+                    Настраиваемые
+                    <br />
+                    доски
+                  </h3>
+                </div>
+                <p>
+                  Настраиваемые доски позволяют контролировать все ваши задачи и
+                  работу вашей команды.
+                </p>
+              </div>
+              <div className="trackerIntro__info__item">
+                <div className="trackerIntro__info__itemHead">
+                  <span>+</span>
+                  <h3>
+                    Учет
+                    <br />
+                    времени
+                  </h3>
+                </div>
+                <p>
+                  Учитывайте загрузку и ресурсы сотрудников, получайте доступные
+                  отчеты о времени работы над каждой задачей или проектом.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <Footer />
+      </div>
+    </div>
+  );
+};

src/pages/TrackerIntro/trackerIntro.scss

@@ -0,0 +1,181 @@
+.trackerIntro {
+  &__content {
+    font-family: "LabGrotesque", sans-serif;
+    background-color: #f1f1f1;
+    color: #000000;
+  }
+
+  &__intro {
+   display: flex;
+    justify-content: space-between;
+    align-items: end;
+    padding: 50px 0 75px;
+
+    &__img {
+      max-width: 530px;
+      max-height: 287px;
+    }
+
+    &__info {
+      display: flex;
+      flex-direction: column;
+      margin-right: 50px;
+    }
+
+    &__suptitle {
+      display: flex;
+      align-items: center;
+      margin-bottom: 63px;
+      span {
+        margin-left: 25px;
+        font-weight: 500;
+        font-size: 16px;
+      }
+    }
+
+    &__title {
+      position: relative;
+      font-size: 40px;
+      font-weight: 700;
+      margin-bottom: 75px;
+
+      span {
+        color: #52B709;
+      }
+
+      img {
+        position: absolute;
+        bottom: -30px;
+        right: 0;
+        max-width: 405px;
+      }
+    }
+
+    &__subtitle {
+      font-size: 17px;
+      font-weight: 500;
+      margin-bottom: 105px;
+    }
+  }
+
+  &__btn {
+    background: #52B709;
+    border-radius: 44px;
+    padding: 9px 48px;
+    color: white;
+    font-weight: 500;
+    font-size: 15px;
+    line-height: 32px;
+    max-width: 200px;
+    transition: all 0.3s ease;
+
+    &:hover {
+      color: white;
+      scale: 1.05;
+    }
+  }
+
+  &__board {
+    display: flex;
+    flex-direction: column;
+    max-width: 1350px;
+    align-items: end;
+    margin: 0 auto 115px;
+
+    &Img {
+      position: relative;
+      margin-bottom: 34px;
+    }
+
+    .heard {
+      position: absolute;
+      bottom: -64px;
+      left: 325px;
+    }
+
+    &__info {
+      display: flex;
+      flex-direction: column;
+      padding-right: 140px;
+      p {
+        font-size: 27px;
+        line-height: 31px;
+        font-weight: 500;
+        max-width: 695px;
+        margin-bottom: 30px;
+      }
+    }
+  }
+
+  &__info {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 100px;
+
+    &__title {
+      position: relative;
+      font-size: 38px;
+      font-weight: 500;
+      text-align: center;
+      max-width: 900px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin-bottom: 100px;
+
+      span {
+        color: #52B709;
+      }
+
+      img {
+        position: absolute;
+        max-width: 311px;
+        bottom: -28px;
+      }
+    }
+
+    &__items {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+    }
+
+    &__item {
+      display: flex;
+      flex-direction: column;
+      max-width: 415px;
+
+      &Head {
+        display: flex;
+        align-items: center;
+        margin-bottom: 45px;
+
+        span {
+          background: #52B709;
+          border-radius: 44px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 71px;
+          height: 71px;
+          color: #FFFFFF;
+          font-size: 30px;
+        }
+
+        h3 {
+          margin-left: 30px;
+          font-size: 32px;
+          font-weight: 500;
+          margin-bottom: 0;
+        }
+      }
+
+      p {
+        font-size: 19px;
+        font-weight: 500;
+        line-height: 32px;
+      }
+    }
+  }
+}