tracker-connect

src/App.js

@@ -35,6 +35,7 @@ import { AuthForCandidate } from "./pages/AuthForCandidate/AuthForCandidate";
 import { RegistrationForCandidate } from "./pages/RegistrationForCandidate/RegistrationForCandidate";
 import { ProfileCandidate } from "./pages/ProfileCandidate/ProfileCandidate";
 import { PassingTests } from "./pages/quiz/PassingTests";
+import { ProjectTracker } from "./pages/ProjectTracker/ProjectTracker";
 
 import "./assets/global.scss";
 import "./fonts/stylesheet.css";
@@ -53,6 +54,7 @@ const App = () => {
             path="/tracker/:id"
             element={<TicketFullScreen />}
           ></Route>
+          <Route exact path="/tracker/project/:id" element={<ProjectTracker/>}/>
           <Route exact path="/auth-candidate" element={<AuthForCandidate />} />
           <Route
             exact

src/components/ProjectTiket/ProjectTiket.js

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from "react";
+import {Link} from "react-router-dom";
 import ModalSettings from "../UI/ModalSettings/ModalSettings";
 
 import link from "../../images/link.svg";
@@ -8,11 +9,11 @@ import edit from "../../images/edit.svg";
 
 import {apiRequest} from "../../api/request";
 import {useDispatch} from "react-redux";
-import { deleteProject, setProjectBoardFetch } from "../../redux/projectsTrackerSlice";
+import { deleteProject } from "../../redux/projectsTrackerSlice";
 
 import "./projectTiket.scss";
 
-export const ProjectTiket = ({ project, index, setOpenProject }) => {
+export const ProjectTiket = ({ project, index }) => {
   const [modalSettings, setModalSettings] = useState(false);
   const dispatch = useDispatch();
 
@@ -49,13 +50,10 @@ export const ProjectTiket = ({ project, index, setOpenProject }) => {
 
   return (
     <div className="project" key={index}>
-      <h3 onClick={() =>{
+      <Link to={`/tracker/project/${project.id}`}>{project.name}</Link>
-          setOpenProject(true)
-          dispatch(setProjectBoardFetch(project.id))
-      }}>{project.name}</h3>
       <div className="project__info">
         <p>Открытые задачи</p>
-        <span className="count">-</span>
+        <span className="count">{project.columns.reduce((accumulator, currentValue) => accumulator + currentValue.tasks.length, 0)}</span>
         {/*<span className="add">{project.columns.length ? '+' : ''}</span>*/}
         <span className="menu-settings" onClick={() => setModalSettings(true)}>
           ...
@@ -64,7 +62,7 @@ export const ProjectTiket = ({ project, index, setOpenProject }) => {
 
       <ModalSettings active={modalSettings}>
         <div className="project__settings-menu">
-          <div onClick={() => console.log(project)}>
+          <div>
             <img src={edit}></img>
             <p>редактировать</p>
           </div>

src/components/ProjectTiket/projectTiket.scss

@@ -19,7 +19,7 @@
     padding: 8px 13px 8px;
   }
 
-  h3 {
+  a {
     font-weight: 700;
     font-size: 18px;
     line-height: 32px;
@@ -27,7 +27,12 @@
     margin-bottom: 10px;
     overflow: hidden;
     white-space: nowrap;
+    display: flex;
     text-overflow: ellipsis;
+
+    &:hover {
+      color: black;
+    }
   }
 
   &__info {

src/components/UI/TicketFullScreen/TicketFullScreen.js

@@ -5,6 +5,8 @@ import { ProfileBreadcrumbs } from "../../ProfileBreadcrumbs/ProfileBreadcrumbs"
 import { Footer } from "../../Footer/Footer";
 import { Link } from "react-router-dom";
 import ModalAdd from "../ModalAdd/ModalAdd";
+import { useDispatch } from "react-redux";
+import {setToggleTab} from "../../../redux/projectsTrackerSlice";
 
 import avatarMock1 from "../../../images/avatarMoсk1.png";
 import avatarMock2 from "../../../images/avatarMoсk2.png";
@@ -28,10 +30,10 @@ 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 dispatch = useDispatch();
 
   const [tiket] = useState({
     name: "Разработка трекера",
@@ -52,7 +54,7 @@ export const TicketFullScreen = ({}) => {
   ]);
 
   const toggleTabs = (index) => {
-    setToggleTab(index);
+    dispatch(setToggleTab(index));
   };
 
   return (
@@ -71,32 +73,31 @@ export const TicketFullScreen = ({}) => {
       </div>
       <div className="tracker__tabs">
         <div className="tracker__tabs__head">
-          <div
+          <Link
-            className={toggleTab === 1 ? "tab active-tab" : "tab"}
+            to='/profile/tracker'
+            className="tab active-tab"
             onClick={() => toggleTabs(1)}
           >
             <img src={project} alt="img" />
             <p>Проекты </p>
-          </div>
+          </Link>
-          <div
+          <Link
-            className={toggleTab === 2 ? "tab active-tab" : "tab"}
+            to='/profile/tracker'
+            className="tab"
             onClick={() => toggleTabs(2)}
           >
             <img src={tasks} alt="img" />
-            <Link to={`/profile/tracker`} className="link">
             <p>Все мои задачи</p>
           </Link>
-          </div>
+          <Link
-          <div
+            to='/profile/tracker'
-            className={toggleTab === 3 ? "tab active-tab" : "tab"}
+            className="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">

src/pages/ProjectTracker/ProjectTracker.js

@@ -0,0 +1,417 @@
+import React, {useEffect, useRef, useState} from "react";
+import {Link} from "react-router-dom";
+import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
+import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
+import { Footer } from "../../components/Footer/Footer";
+
+import { useDispatch, useSelector } from "react-redux";
+import {getProjectBoard, moveProjectTask, setProjectBoardFetch, setToggleTab} from "../../redux/projectsTrackerSlice";
+
+import ModalTicket from "../../components/UI/ModalTicket/ModalTicket";
+import ModalAdd from "../../components/UI/ModalAdd/ModalAdd";
+
+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 arrow from "../../images/arrowCalendar.png";
+
+import {apiRequest} from "../../api/request";
+import { Navigation } from "../../components/Navigation/Navigation";
+
+export const ProjectTracker = () => {
+    const dispatch = useDispatch();
+    const currentUrl = useState(window.location.pathname)
+    const projectId = currentUrl[0].split('/').at(-1)
+
+    useEffect(() => {
+        dispatch(setProjectBoardFetch(projectId))
+    }, [])
+
+    // Modal State
+    const [modalActiveTicket, setModalActiveTicket] = useState(false);
+    const [selectedTicket, setSelectedTicket] = useState({});
+    const [modalAddWorker, setModalAddWorker] = useState(false);
+    const [modalCreateColl, setModalCreateColl] = useState(false);
+    const [modalCreateTiket, setModalCreateTiket] = useState(false);
+    const [valueTiket, setValueTiket] = useState("");
+    const [descriptionTicket, setDescriptionTicket] = useState("")
+    const [valueColl, setValueColl] = useState("");
+    //
+
+    const [selectedTab, setSelectedTab] = useState(0);
+
+    const startWrapperIndexTest = useRef({})
+    const [wrapperHover, setWrapperHover] = useState([
+        false,
+        false,
+        false,
+        false,
+    ]);
+
+    const projectBoard = useSelector(getProjectBoard);
+
+    // function toggleMoreTasks(columnId) {
+    //     setTabTaskMok((prevArray) =>
+    //         prevArray.map((elem, index) => {
+    //             if (columnId === index) {
+    //                 return { ...elem, open: !elem.open };
+    //             } else {
+    //                 return elem;
+    //             }
+    //         })
+    //     );
+    // }
+
+    function dragStartHandler(e, task, columnId) {
+        startWrapperIndexTest.current = { task: task, index: columnId };
+        setTimeout(() => {
+            e.target.classList.add("tasks__board__item__hide");
+        }, 0);
+    }
+
+    function dragEndHandler(e) {
+        setWrapperHover((prevArray) =>
+            prevArray.map((elem) => {
+                return false;
+            })
+        );
+        e.target.classList.remove("tasks__board__item__hide");
+    }
+
+    function dragOverHandler(e) {
+        e.preventDefault();
+    }
+
+    function dragEnterHandler(columnId) {
+        if (columnId === startWrapperIndexTest.current.index) {
+            return;
+        }
+        setWrapperHover((prevArray) =>
+            prevArray.map((elem, index) => {
+                if (index === columnId) {
+                    return true;
+                } else {
+                    return false;
+                }
+            })
+        );
+    }
+    function dragDropHandler(e, columnId) {
+        e.preventDefault();
+        if (startWrapperIndexTest.current.index === columnId) {
+            return;
+        }
+        setWrapperHover((prevArray) =>
+            prevArray.map((elem) => {
+                return false;
+            })
+        );
+
+        if (columnId !== startWrapperIndexTest.current.index) {
+            dispatch(moveProjectTask({startWrapperIndex: startWrapperIndexTest.current, columnId}))
+        }
+    }
+
+    function selectedTabTask(columnId) {
+        setSelectedTab(columnId);
+        setModalCreateTiket(true);
+    }
+
+    function openTicket(e, task) {
+        setSelectedTicket(task);
+        setModalActiveTicket(true);
+    }
+
+    function createTiket() {
+        if (!valueTiket || !descriptionTicket) {
+            return
+        }
+
+        apiRequest('/task/create-task', {
+            method: 'POST',
+            data: {
+                project_id: projectBoard.id,
+                title: valueTiket,
+                description: descriptionTicket,
+                status: 1,
+                user_id: localStorage.getItem('id'),
+                column_id: selectedTab
+            }
+        }).then((res) => {
+            dispatch(setProjectBoardFetch(projectBoard.id))
+        })
+
+        setModalCreateTiket(false);
+        setValueTiket("");
+        setDescriptionTicket("")
+    }
+
+    function createTab() {
+        if (!valueColl) {
+            return
+        }
+
+        apiRequest('/project-column/create-column', {
+            method: 'POST',
+            data: {
+                project_id: projectBoard.id,
+                title: valueColl
+            }
+        }).then((res) => {
+            dispatch(setProjectBoardFetch(projectBoard.id))
+        })
+        setValueColl("");
+        setModalCreateColl(false);
+    }
+
+    return (
+        <div className="tracker">
+            <ProfileHeader />
+            <Navigation />
+            <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">
+                    <Link
+                        to='/profile/tracker'
+                        className="tab active-tab tab"
+                        onClick={() => dispatch(setToggleTab(1))}
+                    >
+                        <img src={project} alt="img" />
+                        <p>Проекты </p>
+                    </Link>
+                    <Link
+                        to='/profile/tracker'
+                        className='tab'
+                        onClick={() => dispatch(setToggleTab(2))}
+                    >
+                        <img src={tasks} alt="img" />
+                        <p>Все мои задачи</p>
+                    </Link>
+                    <Link
+                        to='/profile/tracker'
+                        className='tab'
+                        onClick={() => dispatch(setToggleTab(3))}
+                    >
+                        <img src={archive} alt="img" />
+                        <p>Архив</p>
+                    </Link>
+                </div>
+                <div className="tracker__tabs__content">
+                    <div
+                        className="tracker__tabs__content__tasks tasks active__content"
+                    >
+                        <div className="tasks__head">
+                            <div className="tasks__head__wrapper">
+                                <h4>Проект : {projectBoard.name}</h4>
+
+                                <ModalAdd
+                                    active={modalCreateColl}
+                                    setActive={setModalCreateColl}
+                                >
+                                    <div className="title-project">
+                                        <h4>Введите название колонки</h4>
+                                        <div className="input-container">
+                                            <input
+                                                className="name-project"
+                                                value={valueColl}
+                                                onChange={(e) => setValueColl(e.target.value)}
+                                            ></input>
+                                        </div>
+                                    </div>
+                                    <button className="button-add" onClick={createTab}>
+                                        Создать
+                                    </button>
+                                </ModalAdd>
+
+                                <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__add">
+                                    <span onClick={() => setModalCreateColl(true)}>+</span>
+                                    <p>добавить колонку</p>
+                                </div>
+                                <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="tasks__head__back"
+                                >
+                                    <p>Вернуться на проекты</p>
+                                    <img src={arrow} alt="arrow" />
+                                </Link>
+                            </div>
+                        </div>
+
+                        <ModalTicket
+                            active={modalActiveTicket}
+                            setActive={setModalActiveTicket}
+                            task={selectedTicket}
+                            projectId={projectBoard.id}
+                            projectName = {projectBoard.name}
+                        />
+
+                        <ModalAdd active={modalCreateTiket} setActive={setModalCreateTiket}>
+                            <div className="title-project">
+                                <h4>Введите название и описание задачи</h4>
+                                <div className="input-container">
+                                    <input
+                                        className="name-project"
+                                        value={valueTiket}
+                                        onChange={(e) => setValueTiket(e.target.value)}
+                                        placeholder='Название задачи'
+                                    ></input>
+                                </div>
+                                <div className="input-container">
+                                    <input
+                                        className="name-project"
+                                        value={descriptionTicket}
+                                        onChange={(e) => setDescriptionTicket(e.target.value)}
+                                        placeholder='Описание задачи'
+                                    ></input>
+                                </div>
+                            </div>
+                            <button className="button-add" onClick={createTiket}>
+                                Создать
+                            </button>
+                        </ModalAdd>
+
+                        <div className="tasks__container">
+                            {Boolean(projectBoard?.columns) && Boolean(projectBoard.columns.length) && projectBoard.columns.map((column) => {
+                                return (
+                                    <div
+                                        key={column.id}
+                                        onDragOver={(e) => dragOverHandler(e)}
+                                        onDragEnter={(e) => dragEnterHandler(column.id)}
+                                        onDrop={(e) => dragDropHandler(e, column.id)}
+                                        className={`tasks__board ${
+                                            column.tasks.length >= 3 ? "tasks__board__more" : ""
+                                        } ${
+                                            wrapperHover[column.id] ? "tasks__board__hover" : ""
+                                        }`}
+                                    >
+                                        <div className="board__head">
+                                            {/*<span className={wrapperIndex === 3 ? "done" : ""}>*/}
+                                            <span>
+                        {column.title}
+                      </span>
+                                            <div>
+                        <span
+                            className="add"
+                            onClick={() => selectedTabTask(column.id)}
+                        >
+                          +
+                        </span>
+                                                <span className="more">...</span>
+                                            </div>
+                                        </div>
+                                        {column.tasks.map((task, index) => {
+                                            if (index > 2) {
+                                                if (!column.open) {
+                                                    return;
+                                                }
+                                            }
+                                            return (
+                                                <div
+                                                    key={task.id}
+                                                    className="tasks__board__item"
+                                                    draggable={true}
+                                                    onDragStart={(e) =>
+                                                        dragStartHandler(e, task, column.id)
+                                                    }
+                                                    onDragEnd={(e) => dragEndHandler(e)}
+                                                    onClick={(e) => openTicket(e, task)}
+                                                >
+                                                    <div className="tasks__board__item__title">
+                                                        <p>{task.title}</p>
+                                                    </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>
+                                            );
+                                        })}
+                                        {column.tasks.length > 3 && (
+                                            <span
+                                                className={
+                                                    column.open
+                                                        ? "lessItems openItems"
+                                                        : "moreItems openItems"
+                                                }
+                                                // onClick={() => toggleMoreTasks(column.id)}
+                                            >
+                        {column.open ? "-" : "+"}
+                      </span>
+                                        )}
+                                    </div>
+                                );
+                            })}
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <Footer />
+        </div>
+    );
+};

src/pages/Tracker/Tracker.js

@@ -1,27 +1,21 @@
-import React, {useEffect, useRef, useState} from "react";
+import React, {useEffect, useState} from "react";
 
 import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
 import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { Footer } from "../../components/Footer/Footer";
 
 import { useDispatch, useSelector } from "react-redux";
-import { setAllProjects, getProjects, getProjectBoard, moveProjectTask, setProjectBoardFetch } from "../../redux/projectsTrackerSlice";
+import { setAllProjects, getProjects, setToggleTab, getToggleTab } from "../../redux/projectsTrackerSlice";
 
-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";
 
 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 search from "../../images/serchIcon.png";
 import noProjects from "../../images/noProjects.png";
-import arrow from "../../images/arrowCalendar.png";
 
 import {apiRequest} from "../../api/request";
 import { Navigation } from "../../components/Navigation/Navigation";
@@ -30,7 +24,8 @@ import "./tracker.scss";
 
 export const Tracker = () => {
   const dispatch = useDispatch();
-  const [toggleTab, setToggleTab] = useState(1);
+  const projects = useSelector(getProjects);
+  const tab = useSelector(getToggleTab)
   const [allTasks] = useState([
     {
       name: "PR - 2245",
@@ -254,28 +249,7 @@ export const Tracker = () => {
   const [filterCompleteTasks, setFilterCompleteTasks] = useState(completeTasks);
 
   // Modal State
-  const [modalActiveTicket, setModalActiveTicket] = useState(false);
-  const [selectedTicket, setSelectedTicket] = useState({});
-  const [modalAddWorker, setModalAddWorker] = useState(false);
   const [modalCreateProject, setModalCreateProject] = useState(false);
-  const [modalCreateColl, setModalCreateColl] = useState(false);
-  const [modalCreateTiket, setModalCreateTiket] = useState(false);
-  const [valueTiket, setValueTiket] = useState("");
-  const [descriptionTicket, setDescriptionTicket] = useState("")
-  const [valueColl, setValueColl] = useState("");
-  //
-
-  const [projectTasksOpen, setProjectTasksOpen] = useState(false);
-
-  const [selectedTab, setSelectedTab] = useState(0);
-
-  const startWrapperIndexTest = useRef({})
-  const [wrapperHover, setWrapperHover] = useState([
-    false,
-    false,
-    false,
-    false,
-  ]);
 
   useEffect(() => {
     apiRequest(`/project/project-list?user_id=${localStorage.getItem('id')}&expand=columns`).then((el) => {
@@ -283,78 +257,10 @@ export const Tracker = () => {
     })
   }, [])
 
-  const projects = useSelector(getProjects);
-  const projectBoard = useSelector(getProjectBoard);
-
   const toggleTabs = (index) => {
-    if (projectTasksOpen) {
+    dispatch(setToggleTab(index))
-      setProjectTasksOpen(false);
-    }
-    setToggleTab(index);
   };
 
-  function toggleMoreTasks(columnId) {
-    setTabTaskMok((prevArray) =>
-      prevArray.map((elem, index) => {
-        if (columnId === index) {
-          return { ...elem, open: !elem.open };
-        } else {
-          return elem;
-        }
-      })
-    );
-  }
-
-  function dragStartHandler(e, task, columnId) {
-    startWrapperIndexTest.current = { task: task, index: columnId };
-    setTimeout(() => {
-      e.target.classList.add("tasks__board__item__hide");
-    }, 0);
-  }
-
-  function dragEndHandler(e) {
-    setWrapperHover((prevArray) =>
-      prevArray.map((elem) => {
-        return false;
-      })
-    );
-    e.target.classList.remove("tasks__board__item__hide");
-  }
-
-  function dragOverHandler(e) {
-    e.preventDefault();
-  }
-
-  function dragEnterHandler(columnId) {
-    if (columnId === startWrapperIndexTest.current.index) {
-      return;
-    }
-    setWrapperHover((prevArray) =>
-      prevArray.map((elem, index) => {
-        if (index === columnId) {
-          return true;
-        } else {
-          return false;
-        }
-      })
-    );
-  }
-  function dragDropHandler(e, columnId) {
-    e.preventDefault();
-    if (startWrapperIndexTest.current.index === columnId) {
-      return;
-    }
-    setWrapperHover((prevArray) =>
-      prevArray.map((elem) => {
-        return false;
-      })
-    );
-
-    if (columnId !== startWrapperIndexTest.current.index) {
-      dispatch(moveProjectTask({startWrapperIndex: startWrapperIndexTest.current, columnId}))
-    }
-  }
-
   function filterArchiveTasks(e) {
     setFilterCompleteTasks(
       completeTasks.filter((item) => {
@@ -373,58 +279,6 @@ export const Tracker = () => {
     );
   }
 
-  function selectedTabTask(columnId) {
-    setSelectedTab(columnId);
-    setModalCreateTiket(true);
-  }
-
-  function openTicket(e, task) {
-    setSelectedTicket(task);
-    setModalActiveTicket(true);
-  }
-
-  function createTiket() {
-    if (!valueTiket || !descriptionTicket) {
-      return
-    }
-
-    apiRequest('/task/create-task', {
-      method: 'POST',
-      data: {
-        project_id: projectBoard.id,
-        title: valueTiket,
-        description: descriptionTicket,
-        status: 1,
-        user_id: localStorage.getItem('id'),
-        column_id: selectedTab
-      }
-    }).then((res) => {
-      dispatch(setProjectBoardFetch(projectBoard.id))
-    })
-
-    setModalCreateTiket(false);
-    setValueTiket("");
-    setDescriptionTicket("")
-  }
-
-  function createTab() {
-    if (!valueColl) {
-      return
-    }
-
-    apiRequest('/project-column/create-column', {
-      method: 'POST',
-      data: {
-        project_id: projectBoard.id,
-        title: valueColl
-      }
-    }).then((res) => {
-      dispatch(setProjectBoardFetch(projectBoard.id))
-    })
-    setValueColl("");
-    setModalCreateColl(false);
-  }
-
   return (
     <div className="tracker">
       <ProfileHeader />
@@ -443,21 +297,21 @@ export const Tracker = () => {
       <div className="tracker__tabs">
         <div className="tracker__tabs__head">
           <div
-            className={toggleTab === 1 ? "tab active-tab" : "tab"}
+            className={tab === 1 ? "tab active-tab" : "tab"}
             onClick={() => toggleTabs(1)}
           >
             <img src={project} alt="img" />
             <p>Проекты </p>
           </div>
           <div
-            className={toggleTab === 2 ? "tab active-tab" : "tab"}
+            className={tab === 2 ? "tab active-tab" : "tab"}
             onClick={() => toggleTabs(2)}
           >
             <img src={tasks} alt="img" />
             <p>Все мои задачи</p>
           </div>
           <div
-            className={toggleTab === 3 ? "tab active-tab" : "tab"}
+            className={tab === 3 ? "tab active-tab" : "tab"}
             onClick={() => toggleTabs(3)}
           >
             <img src={archive} alt="img" />
@@ -467,7 +321,7 @@ export const Tracker = () => {
         <div className="tracker__tabs__content">
           <div
             className={
-              toggleTab === 1
+              tab === 1
                 ? "tracker__tabs__content__projects active__content tracker__tabs__content__wrapper"
                 : "tracker__tabs__content__projects tracker__tabs__content__wrapper"
             }
@@ -479,17 +333,15 @@ export const Tracker = () => {
             />
 
             {Boolean(projects.length) &&
-              !projectTasksOpen &&
               projects.map((project, index) => {
                 return (
                   <ProjectTiket
                     key={index}
                     project={project}
-                    setOpenProject={setProjectTasksOpen}
                   ></ProjectTiket>
                 );
               })}
-            {!Boolean(projects.length) && !projectTasksOpen && (
+            {!Boolean(projects.length) && (
               <div className="no-projects">
                 <div className="no-projects__createNew">
                   <div>
@@ -509,7 +361,7 @@ export const Tracker = () => {
                 </p>
               </div>
             )}
-            {Boolean(projects.length) && !projectTasksOpen && (
+            {Boolean(projects.length) && (
               <div className="create-newProject">
                 <button
                   className="createProjectBtn"
@@ -526,209 +378,7 @@ export const Tracker = () => {
           </div>
           <div
             className={
-              toggleTab === 1 && projectTasksOpen
+              tab === 2
-                ? "tracker__tabs__content__tasks tasks active__content"
-                : "tracker__tabs__content__projects"
-            }
-          >
-            <div className="tasks__head">
-              <div className="tasks__head__wrapper">
-                <h4>Проект : {projectBoard.name}</h4>
-
-                <ModalAdd
-                  active={modalCreateColl}
-                  setActive={setModalCreateColl}
-                >
-                  <div className="title-project">
-                    <h4>Введите название колонки</h4>
-                    <div className="input-container">
-                      <input
-                        className="name-project"
-                        value={valueColl}
-                        onChange={(e) => setValueColl(e.target.value)}
-                      ></input>
-                    </div>
-                  </div>
-                  <button className="button-add" onClick={createTab}>
-                    Создать
-                  </button>
-                </ModalAdd>
-
-                <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__add">
-                  <span onClick={() => setModalCreateColl(true)}>+</span>
-                  <p>добавить колонку</p>
-                </div>
-                <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>
-                <div
-                  className="tasks__head__back"
-                  onClick={() => setProjectTasksOpen(false)}
-                >
-                  <p>Вернуться на проекты</p>
-                  <img src={arrow} alt="arrow" />
-                </div>
-              </div>
-            </div>
-
-            <ModalTicket
-              active={modalActiveTicket}
-              setActive={setModalActiveTicket}
-              task={selectedTicket}
-              projectId={projectBoard.id}
-              projectName = {projectBoard.name}
-            />
-
-            <ModalAdd active={modalCreateTiket} setActive={setModalCreateTiket}>
-              <div className="title-project">
-                <h4>Введите название и описание задачи</h4>
-                <div className="input-container">
-                  <input
-                    className="name-project"
-                    value={valueTiket}
-                    onChange={(e) => setValueTiket(e.target.value)}
-                    placeholder='Название задачи'
-                  ></input>
-                </div>
-                <div className="input-container">
-                  <input
-                      className="name-project"
-                      value={descriptionTicket}
-                      onChange={(e) => setDescriptionTicket(e.target.value)}
-                      placeholder='Описание задачи'
-                  ></input>
-                </div>
-              </div>
-              <button className="button-add" onClick={createTiket}>
-                Создать
-              </button>
-            </ModalAdd>
-
-            <div className="tasks__container">
-              {Boolean(projectBoard?.columns) && Boolean(projectBoard.columns.length) && projectBoard.columns.map((column) => {
-                return (
-                  <div
-                    key={column.id}
-                    onDragOver={(e) => dragOverHandler(e)}
-                    onDragEnter={(e) => dragEnterHandler(column.id)}
-                    onDrop={(e) => dragDropHandler(e, column.id)}
-                    className={`tasks__board ${
-                        column.tasks.length >= 3 ? "tasks__board__more" : ""
-                    } ${
-                      wrapperHover[column.id] ? "tasks__board__hover" : ""
-                    }`}
-                  >
-                    <div className="board__head">
-                      {/*<span className={wrapperIndex === 3 ? "done" : ""}>*/}
-                      <span>
-                        {column.title}
-                      </span>
-                      <div>
-                        <span
-                          className="add"
-                          onClick={() => selectedTabTask(column.id)}
-                        >
-                          +
-                        </span>
-                        <span className="more">...</span>
-                      </div>
-                    </div>
-                    {column.tasks.map((task, index) => {
-                      if (index > 2) {
-                        if (!column.open) {
-                          return;
-                        }
-                      }
-                      return (
-                        <div
-                          key={task.id}
-                          className="tasks__board__item"
-                          draggable={true}
-                          onDragStart={(e) =>
-                            dragStartHandler(e, task, column.id)
-                          }
-                          onDragEnd={(e) => dragEndHandler(e)}
-                          onClick={(e) => openTicket(e, task)}
-                        >
-                          <div className="tasks__board__item__title">
-                            <p>{task.title}</p>
-                          </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>
-                      );
-                    })}
-                    {column.tasks.length > 3 && (
-                      <span
-                        className={
-                          column.open
-                            ? "lessItems openItems"
-                            : "moreItems openItems"
-                        }
-                        onClick={() => toggleMoreTasks(column.id)}
-                      >
-                        {column.open ? "-" : "+"}
-                      </span>
-                    )}
-                  </div>
-                );
-              })}
-            </div>
-          </div>
-          <div
-            className={
-              toggleTab === 2
                 ? "tracker__tabs__content__allTasks taskList tasks active__content"
                 : "tracker__tabs__content__projects"
             }
@@ -766,7 +416,7 @@ export const Tracker = () => {
           </div>
           <div
             className={
-              toggleTab === 3
+              tab === 3
                 ? "tracker__tabs__content__archive active__content"
                 : "tracker__tabs__content__projects"
             }

src/pages/Tracker/tracker.scss

@@ -53,6 +53,7 @@
       padding: 12px 40px 15px 19px;
       cursor: pointer;
       align-items: center;
+      color: black;
 
       @media (max-width: 490px) {
         padding: 8px 20px 8px 14px;
@@ -328,6 +329,7 @@
             cursor: pointer;
             display: flex;
             align-items: center;
+            color: black;
 
             p {
               font-weight: 400;

src/redux/projectsTrackerSlice.js

@@ -3,7 +3,8 @@ import {apiRequest} from "../api/request";
 
 const initialState = {
   projects: [],
-  projectBoard: {}
+  projectBoard: {},
+  toggleTab: 1
 };
 
 export const setProjectBoardFetch = createAsyncThunk(
@@ -22,8 +23,10 @@ export const projectsTrackerSlice = createSlice({
     setProject: (state, action) => {
       state.projects.push(action.payload);
     },
+    setToggleTab: (state, action) => {
+      state.toggleTab = action.payload
+    },
     deleteProject: (state, action) => {
-      console.log(action.payload)
       state.projects = state.projects.filter((project) => project.id !== action.payload.id)
     },
     moveProjectTask: (state, action) => {
@@ -52,9 +55,10 @@ export const projectsTrackerSlice = createSlice({
   }
 });
 
-export const { setProject, deleteProject, setAllProjects, moveProjectTask } = projectsTrackerSlice.actions;
+export const { setProject, deleteProject, setAllProjects, moveProjectTask, setToggleTab } = projectsTrackerSlice.actions;
 
 export const getProjects = (state) => state.tracker.projects;
 export const getProjectBoard = (state) => state.tracker.projectBoard;
+export const getToggleTab = (state) => state.tracker.toggleTab
 
 export default projectsTrackerSlice.reducer;