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

tracker-connect-back

src/components/UI/ModalTicket/ModalTicket.jsx

@@ -5,8 +5,6 @@ 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";
@@ -30,23 +28,6 @@ export const ModalTiсket = ({
   projectName,
 }) => {
   const dispatch = useDispatch();
-  const [tiket] = useState({
-    name: "Разработка трекера",
-    code: "PR - 2245",
-    creator: "Василий Тарасов",
-    descriptions:
-      "На многих страницах сайта отсутствуют или некорректно заполнены метатеги Description. Это может негативно повлиять на представление сайта в результатах поиска. Необходимо исправить все страницы где есть ошибки или отсутствует Title и  Description.",
-  });
-  const [workers] = useState([
-    {
-      name: "Дмитрий Рогов",
-      avatar: avatarMock2,
-    },
-    {
-      name: "Марина Серова",
-      avatar: avatarMock1,
-    },
-  ]);
   const [addSubtask, setAddSubtask] = useState(false);
 
   function deleteTask() {
@@ -75,7 +56,7 @@ export const ModalTiсket = ({
           <h3 className="title-project">
             <img src={category} className="title-project__category"></img>
             Проект: {projectName}
-            <Link to={`/tracker/${task.id}`} className="title-project__full">
+            <Link to={`/tracker/task/${task.id}`} className="title-project__full">
               <img src={fullScreen}></img>
             </Link>
           </h3>
@@ -86,7 +67,7 @@ export const ModalTiсket = ({
             <div className="content__description">
               <p>{task.description}</p>
               <img src={taskImg} className="image-task"></img>
-              <p>{tiket.descriptions}</p>
+              <p>{task.description}</p>
             </div>
             <div className="content__communication">
               <p className="tasks">
@@ -116,7 +97,7 @@ export const ModalTiсket = ({
             <span>{task.title}</span>
             <p className="workers__creator">Создатель : {task.user?.fio}</p>
             <div>
-              {workers.map((worker, index) => {
+              {Boolean(task.taskUsers?.length) && task.taskUsers.map((worker, index) => {
                 return (
                   <div className="worker" key={index}>
                     <img src={worker.avatar}></img>

src/components/UI/ModalTicket/ModalTicket.scss

@@ -266,6 +266,19 @@
       line-height: 32px;
       font-weight: 500;
       color: #2d4a17;
+      display: flex;
+      max-width: 200px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+
+      span {
+        margin-left: 5px;
+        font-size: 14px;
+        line-height: 32px;
+        font-weight: 500;
+        display: flex;
+      }
     }
 
     .worker {

src/components/UI/TicketFullScreen/TicketFullScreen.jsx

@@ -1,15 +1,14 @@
-import React, { useState } from "react";
+import React, {useEffect, useState} from "react";
 
 import { ProfileHeader } from "../../ProfileHeader/ProfileHeader";
 import { ProfileBreadcrumbs } from "../../ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { Footer } from "../../Footer/Footer";
-import { Link } from "react-router-dom";
+import { Link, useParams, useNavigate } from "react-router-dom";
 import ModalAdd from "../ModalAdd/ModalAdd";
 import { useDispatch } from "react-redux";
-import {setToggleTab} from "../../../redux/projectsTrackerSlice";
+import { setToggleTab } from "../../../redux/projectsTrackerSlice";
+import {apiRequest} from "../../../api/request";
 
-import avatarMock1 from "../../../images/avatarMoсk1.png";
-import avatarMock2 from "../../../images/avatarMoсk2.png";
 import project from "../../../images/trackerProject.svg";
 import watch from "../../../images/watch.png";
 import file from "../../../images/fileModal.svg";
@@ -33,25 +32,32 @@ export const TicketFullScreen = ({}) => {
   const [addSubtask, setAddSubtask] = useState(false);
   const [modalAddWorker, setModalAddWorker] = useState(false);
   const [valueTiket, setValueTiket] = useState("");
+  const ticketId = useParams()
   const dispatch = useDispatch();
+  const navigate = useNavigate();
+  const [projectInfo, setProjectInfo] = useState({})
+  const [taskInfo, setTaskInfo] = useState({})
 
-  const [tiket] = useState({
+  useEffect(() => {
-    name: "Разработка трекера",
+    apiRequest(`/task/get-task?task_id=${ticketId.id}`).then((taskInfo) => {
-    code: "PR - 2245",
+      setTaskInfo(taskInfo)
-    creator: "Василий Тарасов",
+      apiRequest(`/project/get-project?project_id=${taskInfo.project_id}`).then((project) => {
-    descriptions:
+        setProjectInfo(project)
-      "На многих страницах сайта отсутствуют или некорректно заполнены метатеги Description. Это может негативно повлиять на представление сайта в результатах поиска. Необходимо исправить все страницы где есть ошибки или отсутствует Title и  Description.",
+      })
-  });
+    })
-  const [workers] = useState([
+  }, [])
-    {
+
-      name: "Дмитрий Рогов",
+  function deleteTask() {
-      avatar: avatarMock2,
+    apiRequest("/task/update-task", {
-    },
+      method: "PUT",
-    {
+      data: {
-      name: "Марина Серова",
+        task_id: ticketId.id,
-      avatar: avatarMock1,
+        status: 0,
-    },
+      },
-  ]);
+    }).then((res) => {
+      navigate(`/tracker/project/${taskInfo.project_id}`)
+    });
+  }
 
   const toggleTabs = (index) => {
     dispatch(setToggleTab(index));
@@ -101,7 +107,7 @@ export const TicketFullScreen = ({}) => {
         <div className="tracker__tabs__content content-tabs">
           <div className="tasks__head">
             <div className="tasks__head__wrapper">
-              <h4>Проект : Разработка трекера</h4>
+              <h4>Проект : {projectInfo.name}</h4>
 
               <ModalAdd active={modalAddWorker} setActive={setModalAddWorker}>
                 <div className="title-project">
@@ -153,11 +159,11 @@ export const TicketFullScreen = ({}) => {
           <div className="content ticket-whith">
             <div className="content__task">
               <span>Задача</span>
-              <h5>{tiket.code}</h5>
+              <h5>{taskInfo.title}</h5>
               <div className="content__description">
-                <p>{tiket.descriptions}</p>
+                <p>{taskInfo.description}</p>
                 <img src={task} className="image-task"></img>
-                <p>{tiket.descriptions}</p>
+                <p>{taskInfo.description}</p>
               </div>
               <div className="content__communication">
                 <p className="tasks">
@@ -183,9 +189,9 @@ export const TicketFullScreen = ({}) => {
           </div>
           <div className="workers">
             <div className="workers_box">
-              <p className="workers__creator">Создатель : {tiket.creator}</p>
+              <p className="workers__creator">Создатель :  <span>{taskInfo.user?.fio}</span></p>
               <div>
-                {workers.map((worker, index) => {
+                {Boolean(taskInfo.taskUsers?.length) && taskInfo.taskUsers.map((worker, index) => {
                   return (
                     <div className="worker" key={index}>
                       <img src={worker.avatar}></img>
@@ -226,7 +232,7 @@ export const TicketFullScreen = ({}) => {
                 <img src={archive2}></img>
                 <p>в архив</p>
               </div>
-              <div>
+              <div onClick={deleteTask}>
                 <img src={del}></img>
                 <p>удалить</p>
               </div>

src/pages/ProjectTracker/ProjectTracker.js

@@ -1,5 +1,5 @@
 import React, {useEffect, useRef, useState} from "react";
-import {Link} from "react-router-dom";
+import {Link, useParams} from "react-router-dom";
 import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
 import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { Footer } from "../../components/Footer/Footer";
@@ -18,18 +18,36 @@ 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 del from "../../images/delete.svg";
+import edit from "../../images/edit.svg";
 
 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 = useParams()
-    const projectId = currentUrl[0].split('/').at(-1)
+    const [openColumnSelect, setOpenColumnSelect] = useState({})
+    const [selectedTab, setSelectedTab] = useState(0);
+    const startWrapperIndexTest = useRef({})
+    const [wrapperHover, setWrapperHover] = useState([
+        false,
+        false,
+        false,
+        false,
+    ]);
+    const projectBoard = useSelector(getProjectBoard);
+    useEffect(() => {
+        dispatch(setProjectBoardFetch(projectId.id))
+    }, [])
 
     useEffect(() => {
-        dispatch(setProjectBoardFetch(projectId))
+        if (Object.keys(projectBoard).length) {
-    }, [])
+            projectBoard.columns.forEach(column => {
+                setOpenColumnSelect(prevState => ({...prevState, [column.id]: false}))
+            })
+        }
+    }, [projectBoard])
 
     // Modal State
     const [modalActiveTicket, setModalActiveTicket] = useState(false);
@@ -42,18 +60,6 @@ export const ProjectTracker = () => {
     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) => {
@@ -168,6 +174,19 @@ export const ProjectTracker = () => {
         setModalCreateColl(false);
     }
 
+    function deleteColumn(id) {
+        apiRequest('/project-column/update-column', {
+            method: 'PUT',
+            data: {
+                column_id: id,
+                project_id: projectBoard.id,
+                status: 0
+            }
+        }).then((res) => {
+            dispatch(setProjectBoardFetch(projectBoard.id))
+        })
+    }
+
     return (
         <div className="tracker">
             <ProfileHeader />
@@ -340,18 +359,34 @@ export const ProjectTracker = () => {
                                         <div className="board__head">
                                             {/*<span className={wrapperIndex === 3 ? "done" : ""}>*/}
                                             <span>
-                        {column.title}
+                                                {column.title}
-                      </span>
+                                            </span>
                                             <div>
-                        <span
+                                                <span
-                            className="add"
+                                                    className="add"
-                            onClick={() => selectedTabTask(column.id)}
+                                                    onClick={() => selectedTabTask(column.id)}
-                        >
+                                                >
-                          +
+                                                  +
-                        </span>
+                                                </span>
-                                                <span className="more">...</span>
+                                                <span onClick={() => {
+                                                    setOpenColumnSelect(prevState => ({...prevState, [column.id]: true}))
+                                                }} className="more">...</span>
                                             </div>
                                         </div>
+                                        {openColumnSelect[column.id] &&
+                                            <div className='column__select'>
+                                                <div className='column__select__item' onClick={() => {
+                                                    setOpenColumnSelect(prevState => ({...prevState, [column.id]: false}))
+                                                }}>
+                                                    <img src={edit} alt='edit' />
+                                                    <span>Изменить</span>
+                                                </div>
+                                                <div className='column__select__item' onClick={() => deleteColumn(column.id)}>
+                                                    <img src={del} alt='delete' />
+                                                    <span>Удалить</span>
+                                                </div>
+                                            </div>
+                                        }
                                         {column.tasks.map((task, index) => {
                                             if (index > 2) {
                                                 if (!column.open) {
@@ -401,8 +436,8 @@ export const ProjectTracker = () => {
                                                 }
                                                 // onClick={() => toggleMoreTasks(column.id)}
                                             >
-                        {column.open ? "-" : "+"}
+                                                {column.open ? "-" : "+"}
-                      </span>
+                                            </span>
                                         )}
                                     </div>
                                 );

src/pages/Tracker/tracker.scss

@@ -501,6 +501,31 @@
           &__more {
             padding-bottom: 50px;
           }
+
+          .column__select {
+            position: absolute;
+            padding: 15px;
+            background: #e1fccf;
+            border-radius: 12px;
+            right: -75px;
+            z-index: 10;
+            row-gap: 10px;
+            display: flex;
+            flex-direction: column;
+
+            &__item {
+              cursor: pointer;
+              display: flex;
+              align-content: center;
+              img {
+                margin-right: 5px;
+              }
+
+              span {
+                font-size: 14px;
+              }
+            }
+          }
         }
 
         .board {