From b80824088de2a0ca98c26d4f0729cad899f9fc51 Mon Sep 17 00:00:00 2001
From: MaxOvs19 <gshk3669@gmail.com>
Date: Tue, 7 Mar 2023 19:40:52 +0300
Subject: [PATCH] Added modal to tracker

---
 src/components/UI/ModalTiket/ModalTiket.js   |   6 +-
 src/components/UI/ModalTiket/ModalTiket.scss |  12 +
 src/images/comments.png                      | Bin 457 -> 0 bytes
 src/images/files.png                         | Bin 424 -> 0 bytes
 src/pages/Tracker/Tracker.js                 | 488 ++++++++++---------
 5 files changed, 283 insertions(+), 223 deletions(-)
 delete mode 100644 src/images/comments.png
 delete mode 100644 src/images/files.png

diff --git a/src/components/UI/ModalTiket/ModalTiket.js b/src/components/UI/ModalTiket/ModalTiket.js
index 1f8bc842..9bdffe34 100644
--- a/src/components/UI/ModalTiket/ModalTiket.js
+++ b/src/components/UI/ModalTiket/ModalTiket.js
@@ -5,9 +5,9 @@ import creatorMock from "../../../images/avatarMoсkCreator.png";
 import avatarMock1 from "../../../images/avatarMoсk1.png";
 import avatarMock2 from "../../../images/avatarMoсk2.png";
 import category from "../../../images/category.png";
-import comments from "../../../images/comments.png";
+import comments from "../../../images/commentsBoard.svg";
 import watch from "../../../images/watch.png";
-import files from "../../../images/files.png";
+import files from "../../../images/filesBoard.svg";
 import task from "../../../images/tasksMock.png";
 import arrow from "../../../images/arrowStart.png";
 
@@ -88,7 +88,7 @@ export const ModalTiket = ({ active, setActive }) => {
             })}
           </div>
 
-          <div className="add-worker">
+          <div className="add-worker moreItems">
             <button>+</button>
             <span>Добавить участников</span>
           </div>
diff --git a/src/components/UI/ModalTiket/ModalTiket.scss b/src/components/UI/ModalTiket/ModalTiket.scss
index 160adeaa..a2c74a53 100644
--- a/src/components/UI/ModalTiket/ModalTiket.scss
+++ b/src/components/UI/ModalTiket/ModalTiket.scss
@@ -134,14 +134,26 @@
       }
 
       button {
+        cursor: pointer;
         background: #8bcc60;
+        border-radius: 44px;
         width: 33px;
         height: 33px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border: none;
+        color: white;
+        font-size: 17px;
       }
     }
 
     .start {
       margin-top: 25px;
+      width: 151px;
+      height: 40px;
+      border: none;
+      color: white;
       background: #1458dd;
       border-radius: 44px;
 
diff --git a/src/images/comments.png b/src/images/comments.png
deleted file mode 100644
index f87be131f796d48d9e7ecc23c487a5b67cd2fe46..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 457
zcmV;)0XF`LP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0bWT&K~#7Fl~Ykp
z!axw6*=-5_)f<!>a0I-8oIpH*n_vUQ7)l7x1c>DX#1r5R^agqZxPko^yW{RQpj2qf
zOPb6~JFoNJ&LU*c6@d#m2%}*0H^*Jj@xnVG86ZM@s+lA>$RI|7#bnlt_5`{ar4$LH
z=5+e-0XgW3i3=QF5y_CSl!XK&UspxVsRVzMB(kZ(zUkGBXwkc3yM!~)^(JdBlZKgq
za&#AgWeY+Cj^7?$o4=^(cBkTbqq=@qNMM8Q67VOJa0<Y(TPBojRpFIJ_IoQ^m`29P
znvTPHueGa(bH4^<B$Ne7`jyjZk3Wy;I|buSd%WIHp!VST!m9Smko3f;u8dNP1dFs6
zQs=9@5~=J)JsU+B6S0?Y<`2w-dQ(A)baZeS!r)+)5625!2DT$PTLFIGrh@rWuQ}gt
z<CB-^AJP4=0mzp`>H<O13}=sTa4xi2MZWw13d4v{AlQ7V00000NkvXXu0mjf$)v%(

diff --git a/src/images/files.png b/src/images/files.png
deleted file mode 100644
index 8f9d95678a54a3098153d498f24dd5ce324ebd66..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 424
zcmV;Z0ayNsP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0X<1XK~#7FwNp_}
zgFq0SS*reW1a2VSz@EVN1dS(PqfpWMK~h0XW90_+3cZ0xz#DJ`{%l&<aoJR|SfYfa
z?_)DNJM;Es@&-YJ&jSnoL7W7ce#h##^I```1c;E=F9a45<jAz#9wpFtv6!V*Jn-H5
zB?!Tx++OJH_cu=*4V--KcEcnIYLe;gd}N^UCc~j35MbEIX#Miql=i%QOnf)8&rVL?
zeK-7srf%yeWDLkeI+R&qQ*1ewv~Khwp38dE^FmuGfIqO8zWSY?x)C=7b7XkUpa-a+
z4@6Q5dJ!1FazZeB6X<B2!2=I%F@RB>5Rk>o*{ZGfI0~Xfxh#baU;?lnNcV3GOIkfs
z1Psa)0k66&QVkkR2uZn9Et9lrK!i@);vDo!7s{qox^!F_4fV$^DmDPQzFgnpf_QNj
S+@{e00000<MNUMnLSTYwY^@Oh

diff --git a/src/pages/Tracker/Tracker.js b/src/pages/Tracker/Tracker.js
index c57f3ef4..b2c090d0 100644
--- a/src/pages/Tracker/Tracker.js
+++ b/src/pages/Tracker/Tracker.js
@@ -1,230 +1,278 @@
-import React, {useState} from 'react';
+import React, { useState } from "react";
 
-import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
-import {Footer} from '../../components/Footer/Footer'
+import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
+import { Footer } from "../../components/Footer/Footer";
 
-import project from '../../images/trackerProject.svg'
-import tasks from '../../images/trackerTasks.svg'
-import archive from '../../images/archiveTracker.svg'
-import avatarTest from '../../images/AvatarTest .png'
-import selectArrow from '../../images/select.svg'
-import commentsBoard from '../../images/commentsBoard.svg'
-import filesBoard from '../../images/filesBoard.svg'
+import project from "../../images/trackerProject.svg";
+import tasks from "../../images/trackerTasks.svg";
+import archive from "../../images/archiveTracker.svg";
+import avatarTest from "../../images/AvatarTest .png";
+import selectArrow from "../../images/select.svg";
+import commentsBoard from "../../images/commentsBoard.svg";
+import filesBoard from "../../images/filesBoard.svg";
 
-import './tracker.scss'
+import "./tracker.scss";
+import ModalTiket from "../../components/UI/ModalTiket/ModalTiket";
 
 export const Tracker = () => {
+  const [toggleTab, setToggleTab] = useState(1);
+  const [projects] = useState([
+    {
+      name: "Разработка трекера",
+      count: 4,
+    },
+    {
+      name: "Кинотеатр",
+      count: 4,
+    },
+    {
+      name: "Проект страхование",
+      count: 4,
+    },
+  ]);
+  const [tabTaskMok] = useState([
+    {
+      name: "Открытые",
+      tasks: [
+        {
+          task: "PR - 2245",
+          description: "Сверстать часть таблицы. Сверстать часть таблицы",
+          comments: 12,
+          files: 0,
+          avatarCreated: avatarTest,
+          avatarDo: avatarTest,
+        },
+        {
+          task: "PR - 2245",
+          description: "Сверстать часть таблицы. Сверстать часть таблицы",
+          comments: 12,
+          files: 0,
+          avatarCreated: avatarTest,
+          avatarDo: avatarTest,
+        },
+      ],
+    },
+    {
+      name: "В процессе",
+      tasks: [
+        {
+          task: "PR - 2245",
+          description: "Сверстать часть таблицы. Сверстать часть таблицы",
+          comments: 12,
+          files: 0,
+          avatarCreated: avatarTest,
+          avatarDo: avatarTest,
+        },
+      ],
+    },
+    {
+      name: "На проверке",
+      tasks: [
+        {
+          task: "PR - 2245",
+          description: "Сверстать часть таблицы. Сверстать часть таблицы",
+          comments: 12,
+          files: 0,
+          avatarCreated: avatarTest,
+          avatarDo: avatarTest,
+        },
+        {
+          task: "PR - 2245",
+          description: "Сверстать часть таблицы. Сверстать часть таблицы",
+          comments: 12,
+          files: 0,
+          avatarCreated: avatarTest,
+          avatarDo: avatarTest,
+        },
+        {
+          task: "PR - 2245",
+          description: "Сверстать часть таблицы. Сверстать часть таблицы",
+          comments: 12,
+          files: 0,
+          avatarCreated: avatarTest,
+          avatarDo: avatarTest,
+        },
+      ],
+    },
+    {
+      name: "Готово",
+      tasks: [
+        {
+          task: "PR - 2245",
+          description: "Сверстать часть таблицы. Сверстать часть таблицы",
+          comments: 12,
+          files: 0,
+          avatarCreated: avatarTest,
+          avatarDo: avatarTest,
+        },
+        {
+          task: "PR - 2245",
+          description: "Сверстать часть таблицы. Сверстать часть таблицы",
+          comments: 12,
+          files: 0,
+          avatarCreated: avatarTest,
+          avatarDo: avatarTest,
+        },
+      ],
+    },
+  ]);
 
-    const [toggleTab, setToggleTab] = useState(1)
-    const [projects] = useState([
-        {
-            name: 'Разработка трекера',
-            count: 4
-        },
-        {
-            name: 'Кинотеатр',
-            count: 4
-        },
-        {
-            name: 'Проект страхование',
-            count: 4
-        }
-    ])
-    const [tabTaskMok] = useState([
-        {
-            name: 'Открытые',
-            tasks: [
-                {
-                    task: 'PR - 2245',
-                    description: 'Сверстать часть таблицы. Сверстать часть таблицы',
-                    comments: 12,
-                    files: 0,
-                    avatarCreated: avatarTest,
-                    avatarDo: avatarTest
-                },
-                {
-                    task: 'PR - 2245',
-                    description: 'Сверстать часть таблицы. Сверстать часть таблицы',
-                    comments: 12,
-                    files: 0,
-                    avatarCreated: avatarTest,
-                    avatarDo: avatarTest
-                }
-            ]
-        },
-        {
-            name: 'В процессе',
-            tasks: [
-                {
-                    task: 'PR - 2245',
-                    description: 'Сверстать часть таблицы. Сверстать часть таблицы',
-                    comments: 12,
-                    files: 0,
-                    avatarCreated: avatarTest,
-                    avatarDo: avatarTest
-                }
-            ]
-        },
-        {
-            name: 'На проверке',
-            tasks: [
-                {
-                    task: 'PR - 2245',
-                    description: 'Сверстать часть таблицы. Сверстать часть таблицы',
-                    comments: 12,
-                    files: 0,
-                    avatarCreated: avatarTest,
-                    avatarDo: avatarTest
-                },
-                {
-                    task: 'PR - 2245',
-                    description: 'Сверстать часть таблицы. Сверстать часть таблицы',
-                    comments: 12,
-                    files: 0,
-                    avatarCreated: avatarTest,
-                    avatarDo: avatarTest
-                },
-                {
-                    task: 'PR - 2245',
-                    description: 'Сверстать часть таблицы. Сверстать часть таблицы',
-                    comments: 12,
-                    files: 0,
-                    avatarCreated: avatarTest,
-                    avatarDo: avatarTest
-                }
-            ]
-        },
-        {
-            name: 'Готово',
-            tasks: [
-                {
-                    task: 'PR - 2245',
-                    description: 'Сверстать часть таблицы. Сверстать часть таблицы',
-                    comments: 12,
-                    files: 0,
-                    avatarCreated: avatarTest,
-                    avatarDo: avatarTest
-                },
-                {
-                    task: 'PR - 2245',
-                    description: 'Сверстать часть таблицы. Сверстать часть таблицы',
-                    comments: 12,
-                    files: 0,
-                    avatarCreated: avatarTest,
-                    avatarDo: avatarTest
-                }
-            ]
-        }
-    ])
+  const [modalActiveTicket, setModalActiveTicket] = useState(false);
 
-    const toggleTabs = (index) => {
-        setToggleTab(index)
-    }
-    return (
-        <div className='tracker'>
-            <ProfileHeader />
-            <div className='container'>
-                <div className='tracker__content'>
-                    <h2 className='tracker__title'>Трекер</h2>
-                    <div className='tracker__tabs'>
-                        <div className='tracker__tabs__head'>
-                            <div className={toggleTab === 1 ? 'tab active-tab' : 'tab'} onClick={() => toggleTabs(1)}>
-                                <img src={project} alt='img' />
-                                <p>Проекты </p>
-                            </div>
-                            <div className={toggleTab === 2 ? 'tab active-tab' : 'tab'} onClick={() => toggleTabs(2)}>
-                                <img src={tasks} alt='img' />
-                                <p>Задачи</p>
-                            </div>
-                            <div className={toggleTab === 3 ? 'tab active-tab' : 'tab'} onClick={() => toggleTabs(3)}>
-                                <img src={archive} alt='img' />
-                                <p>Архив</p>
-                            </div>
-                        </div>
-                        <div className='tracker__tabs__content'>
-                            <div className={toggleTab === 1 ? 'tracker__tabs__content__projects active__content' : 'tracker__tabs__content__projects'}>
-                                {projects.map((project, index) => {
-                                    return <div className='project' key={index}>
-                                                <h3>{project.name}</h3>
-                                                <div className='project__info'>
-                                                    <p>Открытые задачи</p>
-                                                    <span className='count'>{project.count}</span>
-                                                    <span className='add'>+</span>
-                                                </div>
-                                            </div>
-                                })
-                                }
-                                <button><span>+</span>Создать проект</button>
-                            </div>
-                            <div className={toggleTab === 2 ? 'tracker__tabs__content__tasks tasks active__content' : 'tracker__tabs__content__projects'}>
-                                <div className='tasks__head'>
-                                    <h4>Проект : Разработка трекера</h4>
-                                    <span className='tasks__head__add'>+</span>
-                                    <div className='tasks__head__persons'>
-                                        <img src={avatarTest} alt='avatar' />
-                                        <img src={avatarTest} alt='avatar' />
-                                        <img src={avatarTest} alt='avatar' />
-                                        <img src={avatarTest} alt='avatar' />
-                                        <span>+9</span>
-                                    </div>
-                                    <div className='tasks__head__select'>
-                                        <span>Учавствую</span>
-                                        <img src={selectArrow} alt='arrow' />
-                                    </div>
-                                    <div className='tasks__head__select'>
-                                        <span>Мои</span>
-                                        <img src={selectArrow} alt='arrow' />
-                                    </div>
-                                </div>
-                                <div className='tasks__container'>
-                                    {tabTaskMok.map((section, index) => {
-                                            return <div key={index} className={section.tasks.length >= 3 ? 'tasks__board tasks__board__more' : 'tasks__board'}>
-                                                        <div className='board__head'>
-                                                            <span className={index === 3 ? 'done' : ''}>{section.name}</span>
-                                                            <div>
-                                                                <span className='add'>+</span>
-                                                                <span className='more'>...</span>
-                                                            </div>
-                                                        </div>
-                                                        {section.tasks.map((task, index) => {
-                                                            return <div key={index} className='tasks__board__item' draggable="true">
-                                                                        <div className='tasks__board__item__title'>
-                                                                            <p>{task.task}</p>
-                                                                            <span>...</span>
-                                                                        </div>
-                                                                        <p className='tasks__board__item__description'>
-                                                                            {task.description}
-                                                                        </p>
-                                                                        <div className='tasks__board__item__info'>
-                                                                            <div className='tasks__board__item__info__more'>
-                                                                                <img src={commentsBoard} alt='commentsImg' />
-                                                                                <span>{task.comments} коментариев</span>
-                                                                            </div>
-                                                                            <div className='tasks__board__item__info__more'>
-                                                                                <img src={filesBoard} alt='filesImg' />
-                                                                                <span>{task.files} файлов</span>
-                                                                            </div>
-                                                                            <div className='tasks__board__item__info__avatars'>
-                                                                                <img src={task.avatarCreated} alt='avatar' />
-                                                                                <img src={task.avatarDo} alt='avatar' />
-                                                                            </div>
-                                                                        </div>
-                                                                    </div>
-                                                        })
-                                                        }
-                                                        {section.tasks.length >= 3 &&
-                                                        <span className='moreItems'>+</span>
-                                                        }
-                                                    </div>
-                                        })
-                                    }
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
+  const toggleTabs = (index) => {
+    setToggleTab(index);
+  };
+  return (
+    <div className="tracker">
+      <ProfileHeader />
+      <div className="container">
+        <div className="tracker__content">
+          <h2 className="tracker__title">Трекер</h2>
+          <div className="tracker__tabs">
+            <div className="tracker__tabs__head">
+              <div
+                className={toggleTab === 1 ? "tab active-tab" : "tab"}
+                onClick={() => toggleTabs(1)}
+              >
+                <img src={project} alt="img" />
+                <p>Проекты </p>
+              </div>
+              <div
+                className={toggleTab === 2 ? "tab active-tab" : "tab"}
+                onClick={() => toggleTabs(2)}
+              >
+                <img src={tasks} alt="img" />
+                <p>Задачи</p>
+              </div>
+              <div
+                className={toggleTab === 3 ? "tab active-tab" : "tab"}
+                onClick={() => toggleTabs(3)}
+              >
+                <img src={archive} alt="img" />
+                <p>Архив</p>
+              </div>
             </div>
-            <Footer/>
+            <div className="tracker__tabs__content">
+              <div
+                className={
+                  toggleTab === 1
+                    ? "tracker__tabs__content__projects active__content"
+                    : "tracker__tabs__content__projects"
+                }
+              >
+                {projects.map((project, index) => {
+                  return (
+                    <div className="project" key={index}>
+                      <h3>{project.name}</h3>
+                      <div className="project__info">
+                        <p>Открытые задачи</p>
+                        <span className="count">{project.count}</span>
+                        <span className="add">+</span>
+                      </div>
+                    </div>
+                  );
+                })}
+
+                <button>
+                  <span>+</span>Создать проект
+                </button>
+              </div>
+              <div
+                className={
+                  toggleTab === 2
+                    ? "tracker__tabs__content__tasks tasks active__content"
+                    : "tracker__tabs__content__projects"
+                }
+              >
+                <div className="tasks__head">
+                  <h4>Проект : Разработка трекера</h4>
+                  <span className="tasks__head__add">+</span>
+                  <div className="tasks__head__persons">
+                    <img src={avatarTest} alt="avatar" />
+                    <img src={avatarTest} alt="avatar" />
+                    <img src={avatarTest} alt="avatar" />
+                    <img src={avatarTest} alt="avatar" />
+                    <span>+9</span>
+                  </div>
+                  <div className="tasks__head__select">
+                    <span>Учавствую</span>
+                    <img src={selectArrow} alt="arrow" />
+                  </div>
+                  <div className="tasks__head__select">
+                    <span>Мои</span>
+                    <img src={selectArrow} alt="arrow" />
+                  </div>
+                </div>
+                <ModalTiket
+                  active={modalActiveTicket}
+                  setActive={setModalActiveTicket}
+                />
+
+                <div className="tasks__container">
+                  {tabTaskMok.map((section, index) => {
+                    return (
+                      <div
+                        key={index}
+                        className={
+                          section.tasks.length >= 3
+                            ? "tasks__board tasks__board__more"
+                            : "tasks__board"
+                        }
+                      >
+                        <div className="board__head">
+                          <span className={index === 3 ? "done" : ""}>
+                            {section.name}
+                          </span>
+                          <div>
+                            <span className="add">+</span>
+                            <span className="more">...</span>
+                          </div>
+                        </div>
+                        {section.tasks.map((task, index) => {
+                          return (
+                            <div
+                              key={index}
+                              className="tasks__board__item"
+                              draggable="true"
+                              onClick={() => setModalActiveTicket(true)}
+                            >
+                              <div className="tasks__board__item__title">
+                                <p>{task.task}</p>
+                                <span>...</span>
+                              </div>
+                              <p className="tasks__board__item__description">
+                                {task.description}
+                              </p>
+                              <div className="tasks__board__item__info">
+                                <div className="tasks__board__item__info__more">
+                                  <img src={commentsBoard} alt="commentsImg" />
+                                  <span>{task.comments} коментариев</span>
+                                </div>
+                                <div className="tasks__board__item__info__more">
+                                  <img src={filesBoard} alt="filesImg" />
+                                  <span>{task.files} файлов</span>
+                                </div>
+                                <div className="tasks__board__item__info__avatars">
+                                  <img src={task.avatarCreated} alt="avatar" />
+                                  <img src={task.avatarDo} alt="avatar" />
+                                </div>
+                              </div>
+                            </div>
+                          );
+                        })}
+                        {section.tasks.length >= 3 && (
+                          <span className="moreItems">+</span>
+                        )}
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
-    )
+      </div>
+      <Footer />
+    </div>
+  );
 };