Merge pull request #78 from apuc/tracker-connect-back

Tracker connect back

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";
@@ -6,10 +7,15 @@ import archiveSet from "../../images/archive.svg";
 import del from "../../images/delete.svg";
 import edit from "../../images/edit.svg";
 
+import {apiRequest} from "../../api/request";
+import {useDispatch} from "react-redux";
+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();
 
   useEffect(() => {
     initListeners();
@@ -30,13 +36,25 @@ export const ProjectTiket = ({ project, index, setOpenProject }) => {
     }
   }
 
+  function removeProject() {
+    apiRequest('/project/update', {
+      method: 'PUT',
+      data: {
+        project_id: project.id,
+        status: 0
+      }
+    }).then((res) => {
+      dispatch(deleteProject(project))
+    })
+  }
+
   return (
     <div className="project" key={index}>
-      <h3 onClick={() => setOpenProject(true)}>{project.name}</h3>
+      <Link to={`/tracker/project/${project.id}`}>{project.name}</Link>
       <div className="project__info">
         <p>Открытые задачи</p>
-        <span className="count">{project.count}</span>
+        <span className="count">{project.columns.reduce((accumulator, currentValue) => accumulator + currentValue.tasks.length, 0)}</span>
-        <span className="add">+</span>
+        {/*<span className="add">{project.columns.length ? '+' : ''}</span>*/}
         <span className="menu-settings" onClick={() => setModalSettings(true)}>
           ...
         </span>
@@ -56,7 +74,8 @@ export const ProjectTiket = ({ project, index, setOpenProject }) => {
             <img src={archiveSet}></img>
             <p>в архив</p>
           </div>
-          <div>
+          <div
+            onClick={removeProject}>
             <img src={del}></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/ModalAdd/modalAdd.scss

@@ -20,7 +20,7 @@
     padding: 60px 60px 30px 60px;
     display: flex;
     flex-direction: column;
-    align-items: flex-start;
+    align-items: center;
     justify-content: center;
   }
 
@@ -34,14 +34,14 @@
       height: 35px;
       background: #ffffff;
       border-radius: 8px;
+      margin-top: 12px;
     }
 
     h4 {
       font-weight: 500;
-      font-size: 22px;
+      font-size: 17px;
       line-height: 26px;
       color: #263238 !important;
-      margin-bottom: 22px !important;
     }
 
     &__decs {
@@ -73,7 +73,7 @@
   }
 
   .button-add {
-    margin: 20px 40% 0 0;
+    margin: 20px;
     width: 130px;
     height: 37px;
     background: #52b709;

src/components/UI/ModalCreate/ModalCreate.js

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { useDispatch } from "react-redux";
 import { setProject } from "../../../redux/projectsTrackerSlice";
+import {apiRequest} from "../../../api/request";
 
 import "./ModalCreate.scss";
 
@@ -12,13 +13,18 @@ export const ModalCreate = ({ active, setActive, title }) => {
     if (inputValue === "") {
       return;
     } else {
-      let newItem = {
+      apiRequest('/project/create', {
-        name: inputValue,
+        method: 'POST',
-        count: 0,
+        data: {
-      };
+          user_id: localStorage.getItem('id'),
-      dispatch(setProject(newItem));
+          name: inputValue,
-      setActive(false);
+          status: 1,
-      setInputValue("");
+        }
+      }).then((res) => {
+        dispatch(setProject(res));
+        setActive(false);
+        setInputValue("");
+      })
     }
   }
 

src/components/UI/ModalTicket/ModalTicket.js

@@ -1,11 +1,16 @@
 import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import ModalAdd from "../ModalAdd/ModalAdd";
+import {apiRequest} from "../../../api/request";
+import {useDispatch} from "react-redux";
+import { setProjectBoardFetch } from "../../../redux/projectsTrackerSlice";
 
 import avatarMock1 from "../../../images/avatarMoсk1.png";
 import avatarMock2 from "../../../images/avatarMoсk2.png";
 import category from "../../../images/category.png";
 import watch from "../../../images/watch.png";
 import file from "../../../images/fileModal.svg";
-import task from "../../../images/tasksMock.png";
+import taskImg from "../../../images/tasksMock.png";
 import arrow from "../../../images/arrowStart.png";
 import link from "../../../images/link.svg";
 import archive from "../../../images/archive.svg";
@@ -15,11 +20,10 @@ import send from "../../../images/send.svg";
 import plus from "../../../images/plus.svg";
 import fullScreen from "../../../images/inFullScreen.svg";
 
-import ModalAdd from "../ModalAdd/ModalAdd";
 import "./ModalTicket.scss";
-import { Link } from "react-router-dom";
 
-export const ModalTiсket = ({ active, setActive, index }) => {
+export const ModalTiсket = ({ active, setActive, task, projectId, projectName }) => {
+  const dispatch = useDispatch();
   const [tiket] = useState({
     name: "Разработка трекера",
     code: "PR - 2245",
@@ -39,6 +43,19 @@ export const ModalTiсket = ({ active, setActive, index }) => {
   ]);
   const [addSubtask, setAddSubtask] = useState(false);
 
+  function deleteTask() {
+    apiRequest('/task/update-task', {
+      method: 'PUT',
+      data: {
+        task_id : task.id,
+        status: 0
+      }
+    }).then((res) => {
+      setActive(false)
+      dispatch(setProjectBoardFetch(projectId))
+    })
+  }
+
   return (
     <div
       className={active ? "modal-tiket active" : "modal-tiket"}
@@ -51,18 +68,18 @@ export const ModalTiсket = ({ active, setActive, index }) => {
         <div className="content">
           <h3 className="title-project">
             <img src={category} className="title-project__category"></img>
-            Проект: {tiket.name}
+            Проект: {projectName}
-            <Link to={`/tracker/${index}`} className="title-project__full">
+            <Link to={`/tracker/${task.id}`} className="title-project__full">
               <img src={fullScreen}></img>
             </Link>
           </h3>
 
           <div className="content__task">
             <span>Задача</span>
-            <h5>{tiket.code}</h5>
+            <h5>{task.title}</h5>
             <div className="content__description">
-              <p>{tiket.descriptions}</p>
+              <p>{task.description}</p>
-              <img src={task} className="image-task"></img>
+              <img src={taskImg} className="image-task"></img>
               <p>{tiket.descriptions}</p>
             </div>
             <div className="content__communication">
@@ -90,8 +107,8 @@ export const ModalTiсket = ({ active, setActive, index }) => {
         <div className="workers">
           <div className="workers_box">
             <span className="exit" onClick={() => setActive(false)}></span>
-            <span>{tiket.code}</span>
+            <span>{task.title}</span>
-            <p className="workers__creator">Создатель : {tiket.creator}</p>
+            <p className="workers__creator">Создатель : {task.user?.fio}</p>
             <div>
               {workers.map((worker, index) => {
                 return (
@@ -134,7 +151,7 @@ export const ModalTiсket = ({ active, setActive, index }) => {
               <img src={archive}></img>
               <p>в архив</p>
             </div>
-            <div>
+            <div onClick={deleteTask}>
               <img src={del}></img>
               <p>удалить</p>
             </div>

src/components/UI/ModalTicket/ModalTicket.scss

@@ -18,7 +18,7 @@
 
 .modal-tiket__content {
   background: #ffffff;
-  border: 1px solid #dde2e4;
+  //border: 1px solid #dde2e4;
   border-radius: 8px;
   display: flex;
   flex-direction: row;
@@ -291,13 +291,14 @@
       }
 
       &-bottom {
-        padding: 40px 0 75px 56px;
+        padding: 40px 110px 75px 56px;
         font-weight: 400;
         font-size: 14px;
         line-height: 38px;
 
         div {
           display: flex;
+          cursor: pointer;
           align-items: center;
 
           p {

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,31 +73,30 @@ 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>
-              <p>Все мои задачи</p>
+          </Link>
-            </Link>
+          <Link
-          </div>
+            to='/profile/tracker'
-          <div
+            className="tab"
-            className={toggleTab === 3 ? "tab active-tab" : "tab"}
             onClick={() => toggleTabs(3)}
           >
             <img src={archive} alt="img" />
-            <Link to={`/profile/tracker`} className="link">
+            <p>Архив</p>
-              <p>Архив</p>
+          </Link>
-            </Link>
-          </div>
         </div>
         <div className="tracker__tabs__content content-tabs">
           <div className="tasks__head">

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,141 +1,31 @@
-import React, { useEffect, 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 { getProjects } 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 "./tracker.scss";
+import {apiRequest} from "../../api/request";
 import { Navigation } from "../../components/Navigation/Navigation";
 
-export const Tracker = () => {
+import "./tracker.scss";
-  const [toggleTab, setToggleTab] = useState(1);
-  const [tabTaskMok, setTabTaskMok] = useState([
-    {
-      name: "Открытые",
-      open: false,
-      tasks: [
-        {
-          task: "PR - 2245",
-          description: "Сверстать часть таблицы. Сверстать часть таблицы",
-          comments: 12,
-          files: 0,
-          avatarCreated: avatarTest,
-          avatarDo: avatarTest,
-          id: 1,
-        },
-        {
-          task: "PR - 2245",
-          description: "Сверстать часть таблицы. Сверстать часть таблицы",
-          comments: 12,
-          files: 0,
-          avatarCreated: avatarTest,
-          avatarDo: avatarTest,
-          id: 2,
-        },
-      ],
-    },
-    {
-      name: "В процессе",
-      open: false,
-      tasks: [
-        {
-          task: "PR - 2245",
-          description: "Сверстать часть таблицы. Сверстать часть таблицы",
-          comments: 12,
-          files: 0,
-          avatarCreated: avatarTest,
-          avatarDo: avatarTest,
-          id: 3,
-        },
-      ],
-    },
-    {
-      name: "На проверке",
-      open: false,
-      tasks: [
-        {
-          task: "PR - 2245",
-          description: "Сверстать часть таблицы. Сверстать часть таблицы",
-          comments: 12,
-          files: 0,
-          avatarCreated: avatarTest,
-          avatarDo: avatarTest,
-          id: 4,
-        },
-        {
-          task: "PR - 2245",
-          description: "Сверстать часть таблицы. Сверстать часть таблицы",
-          comments: 12,
-          files: 0,
-          avatarCreated: avatarTest,
-          avatarDo: avatarTest,
-          id: 5,
-        },
-        {
-          task: "PR - 2245",
-          description: "Сверстать часть таблицы. Сверстать часть таблицы",
-          comments: 12,
-          files: 0,
-          avatarCreated: avatarTest,
-          avatarDo: avatarTest,
-          id: 6,
-        },
-        {
-          task: "PR - 2245",
-          description: "Сверстать часть таблицы. Сверстать часть таблицы",
-          comments: 12,
-          files: 0,
-          avatarCreated: avatarTest,
-          avatarDo: avatarTest,
-          id: 9,
-        },
-      ],
-    },
-    {
-      name: "Готово",
-      open: false,
-      tasks: [
-        {
-          task: "PR - 2245",
-          description: "Сверстать часть таблицы. Сверстать часть таблицы",
-          comments: 12,
-          files: 0,
-          avatarCreated: avatarTest,
-          avatarDo: avatarTest,
-          id: 7,
-        },
-        {
-          task: "PR - 2245",
-          description: "Сверстать часть таблицы. Сверстать часть таблицы",
-          comments: 12,
-          files: 0,
-          avatarCreated: avatarTest,
-          avatarDo: avatarTest,
-          id: 8,
-        },
-      ],
-    },
-  ]);
 
+export const Tracker = () => {
+  const dispatch = useDispatch();
+  const projects = useSelector(getProjects);
+  const tab = useSelector(getToggleTab)
   const [allTasks] = useState([
     {
       name: "PR - 2245",
@@ -359,116 +249,18 @@ export const Tracker = () => {
   const [filterCompleteTasks, setFilterCompleteTasks] = useState(completeTasks);
 
   // 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);
-  const [modalCreateTiket, setModalCreateTiket] = useState(false);
-  const [valueTiket, setValueTiket] = useState("");
-  const [valueColl, setValueColl] = useState("");
-  //
 
-  const [projectTasksOpen, setProjectTasksOpen] = useState(false);
+  useEffect(() => {
-
+    apiRequest(`/project/project-list?user_id=${localStorage.getItem('id')}&expand=columns`).then((el) => {
-  const [selectedTab, setSelectedTab] = useState({
+      dispatch(setAllProjects(el.projects))
-    name: "",
+    })
-    indexTab: 0,
+  }, [])
-    task: [],
-  });
-
-  const [startWrapperIndex, setStartWrapperIndex] = useState(null);
-  const [wrapperHover, setWrapperHover] = useState([
-    false,
-    false,
-    false,
-    false,
-  ]);
-
-  const projects = useSelector(getProjects);
 
   const toggleTabs = (index) => {
-    if (projectTasksOpen) {
+    dispatch(setToggleTab(index))
-      setProjectTasksOpen(false);
-    }
-    setToggleTab(index);
   };
 
-  function toggleMoreTasks(wrapperIndex) {
-    setTabTaskMok((prevArray) =>
-      prevArray.map((elem, index) => {
-        if (wrapperIndex === index) {
-          return { ...elem, open: !elem.open };
-        } else {
-          return elem;
-        }
-      })
-    );
-  }
-
-  function dragStartHandler(e, task, wrapperIndex) {
-    setStartWrapperIndex({ task: task, index: wrapperIndex });
-    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(wrapperIndex) {
-    if (wrapperIndex === startWrapperIndex.index) {
-      return;
-    }
-    setWrapperHover((prevArray) =>
-      prevArray.map((elem, index) => {
-        if (index === wrapperIndex) {
-          return true;
-        } else {
-          return false;
-        }
-      })
-    );
-  }
-
-  function dragDropHandler(e, wrapperIndex) {
-    e.preventDefault();
-    if (startWrapperIndex.index === wrapperIndex) {
-      return;
-    }
-    setWrapperHover((prevArray) =>
-      prevArray.map((elem) => {
-        return false;
-      })
-    );
-    setTabTaskMok((prevArray) =>
-      prevArray.map((elem, index) => {
-        if (index === wrapperIndex) {
-          return { ...elem, tasks: [...elem.tasks, startWrapperIndex.task] };
-        } else if (index === startWrapperIndex.index) {
-          return {
-            ...elem,
-            tasks: elem.tasks.filter((item) => {
-              return item.id !== startWrapperIndex.task.id;
-            }),
-          };
-        } else {
-          return elem;
-        }
-      })
-    );
-  }
-
   function filterArchiveTasks(e) {
     setFilterCompleteTasks(
       completeTasks.filter((item) => {
@@ -487,55 +279,6 @@ export const Tracker = () => {
     );
   }
 
-  function selectedTabTask(e, wrapperIndex, name, tasks) {
-    let tab = { name: name, indexTab: wrapperIndex, task: tasks };
-    setSelectedTab(tab);
-    setModalCreateTiket(true);
-  }
-
-  function openTicket(e, iTicket) {
-    setIndexTicket(iTicket);
-    setModalActiveTicket(true);
-  }
-
-  function createTiket() {
-    tabTaskMok.filter((item) => {
-      if (item.name == selectedTab.name) {
-        let idItem = 0;
-
-        item.tasks.forEach((item) => {
-          idItem = item.id;
-        });
-
-        let newTiket = {
-          task: valueTiket,
-          description: "Сверстать часть таблицы. Сверстать часть таблицы",
-          comments: 0,
-          files: 0,
-          avatarCreated: avatarTest,
-          avatarDo: avatarTest,
-          id: idItem + 1,
-        };
-
-        item.tasks.push(newTiket);
-      }
-    });
-    setModalCreateTiket(false);
-    setValueTiket("");
-  }
-
-  function createTab() {
-    let newTab = {
-      name: valueColl,
-      open: false,
-      tasks: [],
-    };
-
-    tabTaskMok.unshift(newTab);
-    setValueColl("");
-    setModalCreateColl(false);
-  }
-
   return (
     <div className="tracker">
       <ProfileHeader />
@@ -554,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" />
@@ -578,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"
             }
@@ -590,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>
@@ -620,7 +361,7 @@ export const Tracker = () => {
                 </p>
               </div>
             )}
-            {Boolean(projects.length) && !projectTasksOpen && (
+            {Boolean(projects.length) && (
               <div className="create-newProject">
                 <button
                   className="createProjectBtn"
@@ -637,204 +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>Проект : Разработка трекера</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}
-              index={indexTicket}
-            />
-
-            <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)}
-                  ></input>
-                </div>
-              </div>
-              <button className="button-add" onClick={createTiket}>
-                Создать
-              </button>
-            </ModalAdd>
-
-            <div className="tasks__container">
-              {tabTaskMok.map((section, wrapperIndex) => {
-                return (
-                  <div
-                    key={wrapperIndex}
-                    onDragOver={(e) => dragOverHandler(e)}
-                    onDragEnter={(e) => dragEnterHandler(wrapperIndex)}
-                    onDrop={(e) => dragDropHandler(e, wrapperIndex)}
-                    className={`tasks__board ${
-                      section.tasks.length >= 3 ? "tasks__board__more" : ""
-                    } ${
-                      wrapperHover[wrapperIndex] ? "tasks__board__hover" : ""
-                    }`}
-                  >
-                    <div className="board__head">
-                      <span className={wrapperIndex === 3 ? "done" : ""}>
-                        {section.name}
-                      </span>
-                      <div>
-                        <span
-                          className="add"
-                          onClick={(e) =>
-                            selectedTabTask(
-                              e,
-                              wrapperIndex,
-                              section.name,
-                              section.tasks
-                            )
-                          }
-                        >
-                          +
-                        </span>
-                        <span className="more">...</span>
-                      </div>
-                    </div>
-                    {section.tasks.map((task, index) => {
-                      if (index > 2) {
-                        if (!section.open) {
-                          return;
-                        }
-                      }
-                      return (
-                        <div
-                          key={index}
-                          className="tasks__board__item"
-                          draggable={true}
-                          onDragStart={(e) =>
-                            dragStartHandler(e, task, wrapperIndex)
-                          }
-                          onDragEnd={(e) => dragEndHandler(e)}
-                          onClick={(e) => openTicket(e, index)}
-                        >
-                          <div className="tasks__board__item__title">
-                            <p>{task.task}</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>
-                      );
-                    })}
-                    {section.tasks.length > 3 && (
-                      <span
-                        className={
-                          section.open
-                            ? "lessItems openItems"
-                            : "moreItems openItems"
-                        }
-                        onClick={() => toggleMoreTasks(wrapperIndex)}
-                      >
-                        {section.open ? "-" : "+"}
-                      </span>
-                    )}
-                  </div>
-                );
-              })}
-            </div>
-          </div>
-          <div
-            className={
-              toggleTab === 2
                 ? "tracker__tabs__content__allTasks taskList tasks active__content"
                 : "tracker__tabs__content__projects"
             }
@@ -872,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;
@@ -250,6 +251,8 @@
               font-size: 14px;
               line-height: 17px;
               max-width: 120px;
+              display: flex;
+              align-items: center;
             }
           }
 
@@ -294,7 +297,7 @@
               background: #00c5a8;
               color: white;
               font-size: 14px;
-              left: -35px;
+              left: -30px;
               z-index: 1;
             }
 
@@ -326,6 +329,7 @@
             cursor: pointer;
             display: flex;
             align-items: center;
+            color: black;
 
             p {
               font-weight: 400;
@@ -395,6 +399,9 @@
             border-radius: 6px;
             background: #ffffff;
             cursor: pointer;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
 
             &__hide {
               opacity: 0;

src/redux/projectsTrackerSlice.js

@@ -1,34 +1,64 @@
-import { createSlice } from "@reduxjs/toolkit";
+import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
+import {apiRequest} from "../api/request";
 
 const initialState = {
-  project: [
+  projects: [],
-    {
+  projectBoard: {},
-      name: "Разработка трекера",
+  toggleTab: 1
-      count: 4,
-    },
-    {
-      name: "Кинотеатр",
-      count: 4,
-    },
-    {
-      name: "Проект страхование",
-      count: 4,
-    },
-  ],
 };
 
+export const setProjectBoardFetch = createAsyncThunk(
+    'userInfo',
+    (id) =>
+        apiRequest(`/project/get-project?project_id=${id}&expand=columns`)
+);
+
 export const projectsTrackerSlice = createSlice({
   name: "projectsTracker",
   initialState,
   reducers: {
-    setProject: (state, action) => {
+    setAllProjects: (state, action) => {
-      state.project.push(action.payload);
+      state.projects = action.payload
     },
+    setProject: (state, action) => {
+      state.projects.push(action.payload);
+    },
+    setToggleTab: (state, action) => {
+      state.toggleTab = action.payload
+    },
+    deleteProject: (state, action) => {
+      state.projects = state.projects.filter((project) => project.id !== action.payload.id)
+    },
+    moveProjectTask: (state, action) => {
+      state.projectBoard.columns.forEach((column, index) => {
+        if (column.id === action.payload.columnId) {
+          column.tasks.push(action.payload.startWrapperIndex.task)
+          apiRequest(`/task/update-task`, {
+            method: 'PUT',
+            data: {
+              task_id: action.payload.startWrapperIndex.task.id,
+              column_id: column.id
+            }
+          }).then((res) => {
+          })
+        }
+        if (column.id === action.payload.startWrapperIndex.index) {
+          state.projectBoard.columns[index].tasks = column.tasks.filter((task)=> task.id !== action.payload.startWrapperIndex.task.id);
+        }
+      })
+    }
   },
+  extraReducers: {
+    [setProjectBoardFetch.fulfilled]: (state, action) => {
+      state.projectBoard = action.payload
+    }
+  }
 });
 
-export const { setProject } = projectsTrackerSlice.actions;
+export const { setProject, deleteProject, setAllProjects, moveProjectTask, setToggleTab } = projectsTrackerSlice.actions;
 
-export const getProjects = (state) => state.tracker.project;
+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;