Added fullScreen ticket

src/App.js

@@ -1,6 +1,10 @@
-import React from 'react'
-import {BrowserRouter as Router, Route, Routes, Navigate} from 'react-router-dom';
-
+import React from "react";
+import {
+  BrowserRouter as Router,
+  Route,
+  Routes,
+  Navigate,
+} from "react-router-dom";
 
 import AuthForPartners from "./pages/AuthForPartners/AuthForPartners";
 import AuthForDevelopers from "./pages/AuthForDevelopers/AuthForDevelopers";
@@ -22,6 +26,7 @@ import { Summary } from "./pages/Summary/Summary";
 import { ViewReport } from "./pages/ViewReport/ViewReport";
 import { Tracker } from "./pages/Tracker/Tracker";
 import { Payouts } from "./pages/Payouts/Payouts";
+import { TicketFullScreen } from "./components/UI/TicketFullScreen/TicketFullScreen";
 import { PartnerSettings } from "./pages/PartnerSettings/PartnerSettings";
 import { PartnerRequests } from "./pages/PartnerRequests/PartnerRequests";
 import { PartnerAddRequest } from "./pages/PartnerAddRequest/PartnerAddRequest";
@@ -29,66 +34,73 @@ import { PartnerBid } from "./pages/PartnerBid/PartnerBid";
 import { PartnerCategories } from "./pages/PartnerСategories/PartnerСategories";
 import { PartnerTreaties } from "./pages/PartnerTreaties/PartnerTreaties";
 import { PartnerEmployees } from "./pages/PartnerEmployees/PartnerEmployees";
-import {AuthForCandidate} from "./pages/AuthForCandidate/AuthForCandidate";
-import {RegistrationForCandidate} from "./pages/RegistrationForCandidate/RegistrationForCandidate";
-
-
-import './fonts/stylesheet.css'
-import 'bootstrap/dist/css/bootstrap.min.css'
-
-
+import { AuthForCandidate } from "./pages/AuthForCandidate/AuthForCandidate";
+import { RegistrationForCandidate } from "./pages/RegistrationForCandidate/RegistrationForCandidate";
 
+import "./fonts/stylesheet.css";
+import "bootstrap/dist/css/bootstrap.min.css";
 
 const App = () => {
   return (
-      <>
-        <Router>
+    <>
+      <Router>
+        <Routes>
+          <Route exact path="/authdev" element={<AuthForDevelopers />} />
+          <Route exact path="/auth" element={<AuthForPartners />} />
+          <Route exact path="/worker/:id" element={<FreeDevelopers />} />
+          <Route
+            exact
+            path="/tracker/:id"
+            element={<TicketFullScreen />}
+          ></Route>
+          <Route exact path="/auth-candidate" element={<AuthForCandidate />} />
+          <Route
+            exact
+            path="/registration-candidate"
+            element={<RegistrationForCandidate />}
+          />
 
-          <Routes>
+          <Route exact path="/candidate/:id" element={<Candidate />} />
+          <Route exact path="/candidate/:id/form" element={<FormPage />} />
+          <Route path="/:userId/calendar" element={<Calendar />} />
 
-            <Route exact path='/authdev' element={<AuthForDevelopers/>}/>
-            <Route exact path='/auth' element={<AuthForPartners/>}/>
-            <Route exact path="/worker/:id" element={<FreeDevelopers />} />
-            <Route exact path='/auth-candidate' element={<AuthForCandidate/>}/>
-            <Route exact path='/registration-candidate' element={<RegistrationForCandidate/>}/>
+          <Route exact path="/report" element={<ReportForm />} />
+          <Route path="/report/:id" element={<SingleReportPage />} />
 
-            <Route exact path='/candidate/:id' element={<Candidate/>}/>
-            <Route exact path='/candidate/:id/form' element={<FormPage/>}/>
-            <Route path='/:userId/calendar' element={<Calendar/>}/>
+          <Route exact path="quiz">
+            <Route index element={<QuizPage />} />
+            <Route exact path="interjacent" element={<InterjacentPage />} />
+            <Route exact path="test" element={<QuizTestPage />} />
+            <Route exact path="instruction" element={<InstructionPage />} />
+            <Route exact path="result" element={<ResultPage />} />
+          </Route>
 
-            <Route exact path='/report' element={<ReportForm/>}/>
-            <Route path='/report/:id' element={<SingleReportPage/>}/>
+          <Route exact path="profile">
+            <Route index element={<Profile />} />
+            <Route exact path="catalog" element={<Home />} />
+            <Route exact path="calendar" element={<ProfileCalendar />} />
+            <Route exact path="summary" element={<Summary />} />
+            <Route exact path="view" element={<ViewReport />} />
+            <Route exact path="tracker" element={<Tracker />} />
+            <Route exact path="payouts" element={<Payouts />} />
+            <Route exact path="settings" element={<PartnerSettings />} />
+            <Route exact path="requests" element={<PartnerRequests />} />
+            <Route exact path="add-request" element={<PartnerAddRequest />} />
+            <Route exact path="bid" element={<PartnerBid />} />
+            <Route exact path="categories" element={<PartnerCategories />} />
+            <Route exact path="treaties" element={<PartnerTreaties />} />
+            <Route
+              exact
+              path="categories/employees"
+              element={<PartnerEmployees />}
+            />
+          </Route>
 
-            <Route exact path='quiz'>
-              <Route index element={<QuizPage/>}/>
-              <Route exact path='interjacent' element={<InterjacentPage/>}/>
-              <Route exact path='test' element={<QuizTestPage/>}/>
-              <Route exact path='instruction' element={<InstructionPage/>}/>
-              <Route exact path='result' element={<ResultPage/>}/>
-            </Route>
-
-            <Route exact path='profile'>
-              <Route index element={<Profile/>}/>
-              <Route exact path='catalog' element={<Home/>}/>
-              <Route exact path='calendar' element={<ProfileCalendar/>}/>
-              <Route exact path='summary' element={<Summary/>}/>
-              <Route exact path='view' element={<ViewReport/>}/>
-              <Route exact path='tracker' element={<Tracker/>}/>
-              <Route exact path='payouts' element={<Payouts/>}/>
-              <Route exact path='settings' element={<PartnerSettings/>}/>
-              <Route exact path='requests' element={<PartnerRequests/>}/>
-              <Route exact path='add-request' element={<PartnerAddRequest/>}/>
-              <Route exact path='bid' element={<PartnerBid/>}/>
-              <Route exact path='categories' element={<PartnerCategories/>}/>
-              <Route exact path='treaties' element={<PartnerTreaties/>}/>
-              <Route exact path='categories/employees' element={<PartnerEmployees/>}/>
-            </Route>
-
-            <Route path="*" element={<Navigate to="/auth" replace/>}/>
-          </Routes>
-        </Router>
-      </>
-  )
+          <Route path="*" element={<Navigate to="/auth" replace />} />
+        </Routes>
+      </Router>
+    </>
+  );
 };
 
-export default App
+export default App;

src/components/ProjectTiket/projectTiket.scss

@@ -25,6 +25,9 @@
     line-height: 32px;
     color: #111112;
     margin-bottom: 10px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
   }
 
   &__info {

src/components/UI/ModalAdd/modalAdd.scss

@@ -15,7 +15,7 @@
     position: relative;
     width: 424px;
     background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
-    border-radius: 40px;
+    border-radius: 24px;
 
     padding: 60px 60px 30px 60px;
     display: flex;

src/components/UI/ModalCreate/ModalCreate.scss

@@ -1,5 +1,5 @@
 .modal-project {
-  z-index: 9;
+  z-index: 9999;
   height: 100%;
   width: 100%;
   background-color: rgba(0, 0, 0, 0.11);

src/components/UI/ModalTicket/ModalTicket.js

@@ -13,11 +13,13 @@ import del from "../../../images/delete.svg";
 import edit from "../../../images/edit.svg";
 import send from "../../../images/send.svg";
 import plus from "../../../images/plus.svg";
+import fullScreen from "../../../images/inFullScreen.svg";
 
 import ModalAdd from "../ModalAdd/ModalAdd";
-import "./ModalTiket.scss";
+import "./ModalTicket.scss";
+import { Link } from "react-router-dom";
 
-export const ModalTiket = ({ active, setActive }) => {
+export const ModalTiсket = ({ active, setActive, index }) => {
   const [tiket] = useState({
     name: "Разработка трекера",
     code: "PR - 2245",
@@ -50,6 +52,9 @@ export const ModalTiket = ({ active, setActive }) => {
           <h3 className="title-project">
             <img src={category} className="title-project__category"></img>
             Проект: {tiket.name}
+            <Link to={`/tracker/${index}`} className="title-project__full">
+              <img src={fullScreen}></img>
+            </Link>
           </h3>
 
           <div className="content__task">
@@ -154,4 +159,4 @@ export const ModalTiket = ({ active, setActive }) => {
   );
 };
 
-export default ModalTiket;
+export default ModalTiсket;

src/components/UI/ModalTicket/ModalTicket.scss

@@ -41,6 +41,10 @@
       &__category {
         margin-right: 17px;
       }
+
+      &__full {
+        margin-left: 35%;
+      }
     }
 
     &__task {

src/components/UI/TicketFullScreen/TicketFullScreen.js

@@ -0,0 +1,256 @@
+import React, { useState } from "react";
+
+import { ProfileHeader } from "../../ProfileHeader/ProfileHeader";
+import { ProfileBreadcrumbs } from "../../ProfileBreadcrumbs/ProfileBreadcrumbs";
+import { Footer } from "../../Footer/Footer";
+import { Link } from "react-router-dom";
+import ModalAdd from "../ModalAdd/ModalAdd";
+
+import avatarMock1 from "../../../images/avatarMoсk1.png";
+import avatarMock2 from "../../../images/avatarMoсk2.png";
+import project from "../../../images/trackerProject.svg";
+import watch from "../../../images/watch.png";
+import file from "../../../images/fileModal.svg";
+import task from "../../../images/tasksMock.png";
+import send from "../../../images/send.svg";
+import arrow2 from "../../../images/arrowStart.png";
+import plus from "../../../images/plus.svg";
+import tasks from "../../../images/trackerTasks.svg";
+import archive from "../../../images/archiveTracker.svg";
+import selectArrow from "../../../images/select.svg";
+import avatarTest from "../../../images/AvatarTest .png";
+import arrow from "../../../images/arrowCalendar.png";
+import link from "../../../images/link.svg";
+import archive2 from "../../../images/archive.svg";
+import del from "../../../images/delete.svg";
+import edit from "../../../images/edit.svg";
+
+import "./ticketFullScreen.scss";
+
+export const TicketFullScreen = ({}) => {
+  const [toggleTab, setToggleTab] = useState(1);
+  const [addSubtask, setAddSubtask] = useState(false);
+  const [modalAddWorker, setModalAddWorker] = useState(false);
+  const [valueTiket, setValueTiket] = useState("");
+
+  const [tiket] = useState({
+    name: "Разработка трекера",
+    code: "PR - 2245",
+    creator: "Василий Тарасов",
+    descriptions:
+      "На многих страницах сайта отсутствуют или некорректно заполнены метатеги Description. Это может негативно повлиять на представление сайта в результатах поиска. Необходимо исправить все страницы где есть ошибки или отсутствует Title и  Description.",
+  });
+  const [workers] = useState([
+    {
+      name: "Дмитрий Рогов",
+      avatar: avatarMock2,
+    },
+    {
+      name: "Марина Серова",
+      avatar: avatarMock1,
+    },
+  ]);
+
+  const toggleTabs = (index) => {
+    setToggleTab(index);
+  };
+
+  return (
+    <section className="ticket-full-screen">
+      <ProfileHeader />
+      <div className="container">
+        <div className="tracker__content">
+          <ProfileBreadcrumbs
+            links={[
+              { name: "Главная", link: "/profile" },
+              { name: "Трекер", link: "/profile/tracker" },
+            ]}
+          />
+          <h2 className="tracker__title">Управление проектами с трекером</h2>
+        </div>
+      </div>
+      <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" />
+            <Link to={`/profile/tracker`} className="link">
+              <p>Все мои задачи</p>
+            </Link>
+          </div>
+          <div
+            className={toggleTab === 3 ? "tab active-tab" : "tab"}
+            onClick={() => toggleTabs(3)}
+          >
+            <img src={archive} alt="img" />
+            <Link to={`/profile/tracker`} className="link">
+              <p>Архив</p>
+            </Link>
+          </div>
+        </div>
+        <div className="tracker__tabs__content content-tabs">
+          <div className="tasks__head">
+            <div className="tasks__head__wrapper">
+              <h4>Проект : Разработка трекера</h4>
+
+              <ModalAdd active={modalAddWorker} setActive={setModalAddWorker}>
+                <div className="title-project">
+                  <h4>Добавьте участника</h4>
+                  <p className="title-project__decs">Введите имя или e-mail</p>
+                  <div className="input-container">
+                    <input
+                      className="name-project"
+                      value={valueTiket}
+                      onChange={(e) => setValueTiket(e.target.value)}
+                    ></input>
+                  </div>
+                </div>
+                <button
+                  className="button-add"
+                  onClick={(e) => e.preventDefault()}
+                >
+                  Добавить
+                </button>
+              </ModalAdd>
+
+              <div className="tasks__head__persons">
+                <img src={avatarTest} alt="avatar" />
+                <img src={avatarTest} alt="avatar" />
+                <span className="countPersons">+9</span>
+                <span className="addPerson" onClick={setModalAddWorker}>
+                  +
+                </span>
+                <p>добавить участника в проект</p>
+              </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>
+              <Link to={`/profile/tracker`} className="link">
+                <div className="tasks__head__back">
+                  <p>Вернуться на проекты</p>
+                  <img src={arrow} alt="arrow" />
+                </div>
+              </Link>
+            </div>
+          </div>
+        </div>
+        <div className="modal-tiket__content ticket">
+          <div className="content ticket-whith">
+            <div className="content__task">
+              <span>Задача</span>
+              <h5>{tiket.code}</h5>
+              <div className="content__description">
+                <p>{tiket.descriptions}</p>
+                <img src={task} className="image-task"></img>
+                <p>{tiket.descriptions}</p>
+              </div>
+              <div className="content__communication">
+                <p className="tasks">
+                  <button onClick={() => setAddSubtask(true)}>
+                    <img src={plus}></img>
+                    Добавить под задачу
+                  </button>
+                </p>
+                <p className="file">
+                  <button>
+                    <img src={file}></img>
+                    Загрузить файл
+                  </button>
+                  <span>{0}</span>
+                  Файлов
+                </p>
+              </div>
+              <div className="content__input">
+                <input placeholder="Оставить комментарий"></input>
+                <img src={send}></img>
+              </div>
+            </div>
+          </div>
+          <div className="workers">
+            <div className="workers_box">
+              <p className="workers__creator">Создатель : {tiket.creator}</p>
+              <div>
+                {workers.map((worker, index) => {
+                  return (
+                    <div className="worker" key={index}>
+                      <img src={worker.avatar}></img>
+                      <p>{worker.name}</p>
+                    </div>
+                  );
+                })}
+              </div>
+
+              <div className="add-worker moreItems">
+                <button>+</button>
+                <span>Добавить участников</span>
+              </div>
+            </div>
+
+            <div className="workers_box-middle">
+              <div className="time">
+                <img src={watch}></img>
+                <span>Длительность : </span>
+                <p>{"8:30:22"}</p>
+              </div>
+
+              <button className="start">
+                Начать делать <img src={arrow2}></img>
+              </button>
+            </div>
+
+            <div className="workers_box-bottom">
+              <div>
+                <img src={edit}></img>
+                <p>редактировать</p>
+              </div>
+              <div>
+                <img src={link}></img>
+                <p>ссылка на проект</p>
+              </div>
+              <div>
+                <img src={archive2}></img>
+                <p>в архив</p>
+              </div>
+              <div>
+                <img src={del}></img>
+                <p>удалить</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <ModalAdd active={addSubtask} setActive={setAddSubtask}>
+          <div className="title-project subtask">
+            <h4>
+              Вы добавляете подзадачу <p>в колонку задачи {"Готово"}</p>
+            </h4>
+            <p className="title-project__decs">Введите текст</p>
+            <div>
+              <textarea className="title-project__textarea"></textarea>
+            </div>
+          </div>
+          <button className="button-add" onClick={(e) => e.preventDefault()}>
+            Добавить
+          </button>
+        </ModalAdd>
+      </div>
+      <Footer />
+    </section>
+  );
+};
+
+export default TicketFullScreen;

src/components/UI/TicketFullScreen/ticketFullScreen.scss

@@ -0,0 +1,28 @@
+.ticket-full-screen {
+  background: #f5f5f5;
+}
+
+.ticket {
+  border: none;
+  justify-content: center;
+
+  &-whith {
+    width: 850px !important;
+  }
+}
+
+// .modal-tiket__content .content {
+//   width: 70%;
+// }
+
+.content-tabs {
+  padding-bottom: 0;
+}
+
+.link {
+  color: #252c32;
+  &:hover {
+    color: #252c32;
+    text-decoration: none;
+  }
+}

src/images/inFullScreen.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.3924 1.46561C12.97 1.46561 12.532 1.46561 12.0946 1.46561C11.4596 1.46561 10.8239 1.47174 10.189 1.46289C9.75703 1.45675 9.44363 1.14472 9.44023 0.744116C9.43682 0.344876 9.74477 0.0342039 10.1747 0.00354553C10.2312 -0.000542258 10.2878 0.00150164 10.345 0.00150164C11.9556 0.00150164 13.5668 -0.000542258 15.1774 0.00013904C15.6891 0.00013904 15.9977 0.289691 15.9991 0.78772C16.0025 2.44395 16.0011 4.10087 15.9964 5.75711C15.995 6.17747 15.7484 6.49087 15.3941 6.55354C15.0643 6.61214 14.736 6.42751 14.5915 6.11206C14.5322 5.98194 14.5363 5.84704 14.5357 5.71214C14.5343 4.78149 14.5357 3.85152 14.5329 2.92086C14.5329 2.81322 14.5656 2.69876 14.522 2.62314C10.5596 6.58693 6.59513 10.5528 2.61771 14.5315C2.647 14.5813 2.74852 14.5315 2.82891 14.5315C3.79295 14.5356 4.75767 14.5322 5.7217 14.535C6.23268 14.5363 6.56242 14.8265 6.56242 15.2653C6.56242 15.6993 6.22586 15.9943 5.71557 15.9957C4.07092 15.9997 2.42558 16.0011 0.780928 15.9991C0.312195 15.9991 0.00220471 15.6993 0.00152341 15.2408C-0.00120178 13.573 -0.00052048 11.9051 0.0056112 10.2373C0.0069738 9.83331 0.243384 9.52537 0.579946 9.45042C0.906287 9.37753 1.23672 9.54717 1.39887 9.85988C1.47653 10.0098 1.46631 10.1678 1.467 10.3252C1.46904 11.3008 1.46768 12.2764 1.46836 13.2521C1.46836 13.3038 1.47313 13.3556 1.47449 13.3822C5.4451 9.41159 9.41434 5.44235 13.3924 1.46425V1.46561Z" fill="#0E0E0F"/>
+</svg>

src/pages/Tracker/Tracker.js

@@ -7,7 +7,7 @@ import { Footer } from "../../components/Footer/Footer";
 import { useDispatch, useSelector } from "react-redux";
 import { getProjects } from "../../redux/projectsTrackerSlice";
 
-import ModalTiket from "../../components/UI/ModalTiket/ModalTiket";
+import ModalTicket from "../../components/UI/ModalTicket/ModalTicket";
 import ModalCreate from "../../components/UI/ModalCreate/ModalCreate";
 import ModalAdd from "../../components/UI/ModalAdd/ModalAdd";
 import ProjectTiket from "../../components/ProjectTiket/ProjectTiket";
@@ -359,6 +359,7 @@ export const Tracker = () => {
 
   // Modal State
   const [modalActiveTicket, setModalActiveTicket] = useState(false);
+  const [indexTicket, setIndexTicket] = useState(0);
   const [modalAddWorker, setModalAddWorker] = useState(false);
   const [modalCreateProject, setModalCreateProject] = useState(false);
   const [modalCreateColl, setModalCreateColl] = useState(false);
@@ -491,6 +492,11 @@ export const Tracker = () => {
     setModalCreateTiket(true);
   }
 
+  function openTicket(e, iTicket) {
+    setIndexTicket(iTicket);
+    setModalActiveTicket(true);
+  }
+
   function createTiket() {
     tabTaskMok.filter((item) => {
       if (item.name == selectedTab.name) {
@@ -710,9 +716,10 @@ export const Tracker = () => {
               </div>
             </div>
 
-            <ModalTiket
+            <ModalTicket
               active={modalActiveTicket}
               setActive={setModalActiveTicket}
+              index={indexTicket}
             />
 
             <ModalAdd active={modalCreateTiket} setActive={setModalCreateTiket}>
@@ -781,7 +788,7 @@ export const Tracker = () => {
                             dragStartHandler(e, task, wrapperIndex)
                           }
                           onDragEnd={(e) => dragEndHandler(e)}
-                          onClick={() => setModalActiveTicket(true)}
+                          onClick={(e) => openTicket(e, index)}
                         >
                           <div className="tasks__board__item__title">
                             <p>{task.task}</p>

src/pages/Tracker/tracker.scss

@@ -411,6 +411,9 @@
                 font-size: 16px;
                 line-height: 24px;
                 margin-bottom: 0;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
               }
 
               span {