pull in main

src/components/UI/ModalAdd/ModalAdd.jsx

@@ -162,6 +162,28 @@ export const ModalAdd = ({ active, setActive, selectedTab, defautlInput }) => {
             <span className="exit" onClick={() => setActive(false)}></span>
           </div>
         );
+      case "editColumn":
+        return (
+          <div
+            className="modal-add__content"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="title-project">
+              <h4>Введите новое название</h4>
+              <div className="input-container">
+                <input
+                  className="name-project"
+                  value={defautlInput}
+                  onChange={(e) => setValueTiket(e.target.value)}
+                ></input>
+              </div>
+            </div>
+            <button className="button-add" onClick={(e) => e.preventDefault()}>
+              Сохранить
+            </button>
+            <span className="exit" onClick={() => setActive(false)}></span>
+          </div>
+        );
       default:
         return null;
     }

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,17 +1,16 @@
-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 { Navigation } from "../../Navigation/Navigation";
 
 import { useDispatch } from "react-redux";
 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";
@@ -35,25 +34,34 @@ 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(
-    descriptions:
+        (project) => {
-      "На многих страницах сайта отсутствуют или некорректно заполнены метатеги Description. Это может негативно повлиять на представление сайта в результатах поиска. Необходимо исправить все страницы где есть ошибки или отсутствует Title и  Description.",
+          setProjectInfo(project);
-  });
+        }
-  const [workers] = useState([
+      );
-    {
+    });
-      name: "Дмитрий Рогов",
+  }, []);
-      avatar: avatarMock2,
+
-    },
+  function deleteTask() {
-    {
+    apiRequest("/task/update-task", {
-      name: "Марина Серова",
+      method: "PUT",
-      avatar: avatarMock1,
+      data: {
-    },
+        task_id: ticketId.id,
-  ]);
+        status: 0,
+      },
+    }).then((res) => {
+      navigate(`/tracker/project/${taskInfo.project_id}`);
+    });
+  }
 
   const toggleTabs = (index) => {
     dispatch(setToggleTab(index));
@@ -104,7 +112,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">
@@ -156,11 +164,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">
@@ -186,16 +194,19 @@ 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) &&
-                  return (
+                  taskInfo.taskUsers.map((worker, index) => {
-                    <div className="worker" key={index}>
+                    return (
-                      <img src={worker.avatar}></img>
+                      <div className="worker" key={index}>
-                      <p>{worker.name}</p>
+                        <img src={worker.avatar}></img>
-                    </div>
+                        <p>{worker.name}</p>
-                  );
+                      </div>
-                })}
+                    );
+                  })}
               </div>
 
               <div className="add-worker moreItems">
@@ -229,7 +240,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,11 +1,12 @@
 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 { Navigation } from "../../components/Navigation/Navigation";
 import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { Footer } from "../../components/Footer/Footer";
+import { Navigation } from "../../components/Navigation/Navigation";
 
 import { useDispatch, useSelector } from "react-redux";
+import { apiRequest } from "../../api/request";
 import {
   getProjectBoard,
   modalToggle,
@@ -25,32 +26,39 @@ 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";
 
 export const ProjectTracker = () => {
   const dispatch = useDispatch();
-  const currentUrl = useState(window.location.pathname);
+  const projectId = useParams();
-  const projectId = currentUrl[0].split("/").at(-1);
-
-  useEffect(() => {
-    dispatch(setProjectBoardFetch(projectId));
-  }, []);
 
+  const [openColumnSelect, setOpenColumnSelect] = useState({});
+  const [selectedTab, setSelectedTab] = useState(0);
+  const [wrapperHover, setWrapperHover] = useState({});
   const [modalAdd, setModalAdd] = useState(false);
   const [modalActiveTicket, setModalActiveTicket] = useState(false);
   const [selectedTicket, setSelectedTicket] = 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(() => {
+    if (Object.keys(projectBoard).length) {
+      projectBoard.columns.forEach((column) => {
+        setOpenColumnSelect((prevState) => ({
+          ...prevState,
+          [column.id]: false,
+        }));
+        setWrapperHover((prevState) => ({ ...prevState, [column.id]: false }));
+      });
+    }
+  }, [projectBoard]);
+
   // function toggleMoreTasks(columnId) {
   //     setTabTaskMok((prevArray) =>
   //         prevArray.map((elem, index) => {
@@ -71,11 +79,9 @@ export const ProjectTracker = () => {
   }
 
   function dragEndHandler(e) {
-    setWrapperHover((prevArray) =>
+    setWrapperHover((prevState) => ({
-      prevArray.map((elem) => {
+      [prevState]: false,
-        return false;
+    }));
-      })
-    );
     e.target.classList.remove("tasks__board__item__hide");
   }
 
@@ -87,26 +93,21 @@ export const ProjectTracker = () => {
     if (columnId === startWrapperIndexTest.current.index) {
       return;
     }
-    setWrapperHover((prevArray) =>
+
-      prevArray.map((elem, index) => {
+    setWrapperHover((prevState) => ({
-        if (index === columnId) {
+      [prevState]: false,
-          return true;
+      [columnId]: true,
-        } else {
+    }));
-          return false;
-        }
-      })
-    );
   }
   function dragDropHandler(e, columnId) {
     e.preventDefault();
     if (startWrapperIndexTest.current.index === columnId) {
       return;
     }
-    setWrapperHover((prevArray) =>
+
-      prevArray.map((elem) => {
+    setWrapperHover((prevState) => ({
-        return false;
+      [prevState]: false,
-      })
+    }));
-    );
 
     if (columnId !== startWrapperIndexTest.current.index) {
       dispatch(
@@ -129,6 +130,19 @@ export const ProjectTracker = () => {
     setModalActiveTicket(true);
   }
 
+  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 />
@@ -258,9 +272,44 @@ export const ProjectTracker = () => {
                           >
                             +
                           </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,
+                              }));
+                              dispatch(modalToggle("editColumn"));
+                              setModalAdd(true);
+                            }}
+                          >
+                            <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) {

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 {