pull in main

2023-05-04 18:38:56 +03:00 · 2023-05-04 18:38:56 +03:00 · 7667de9b8b
commit 7667de9b8b
parent 87fb04e422 f1d1fd7475
6 changed files with 195 additions and 94 deletions
--- a/src/components/UI/ModalAdd/ModalAdd.jsx
+++ b/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;
    }
--- a/src/components/UI/ModalTicket/ModalTicket.jsx
+++ b/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>
--- a/src/components/UI/ModalTicket/ModalTicket.scss
+++ b/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 {
--- a/src/components/UI/TicketFullScreen/TicketFullScreen.jsx
+++ b/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({
-    name: "Разработка трекера",
-    code: "PR - 2245",
-    creator: "Василий Тарасов",
-    descriptions:
-      "На многих страницах сайта отсутствуют или некорректно заполнены метатеги Description. Это может негативно повлиять на представление сайта в результатах поиска. Необходимо исправить все страницы где есть ошибки или отсутствует Title и  Description.",
+  useEffect(() => {
+    apiRequest(`/task/get-task?task_id=${ticketId.id}`).then((taskInfo) => {
+      setTaskInfo(taskInfo);
+      apiRequest(`/project/get-project?project_id=${taskInfo.project_id}`).then(
+        (project) => {
+          setProjectInfo(project);
+        }
+      );
    });
-  const [workers] = useState([
-    {
-      name: "Дмитрий Рогов",
-      avatar: avatarMock2,
+  }, []);
+
+  function deleteTask() {
+    apiRequest("/task/update-task", {
+      method: "PUT",
+      data: {
+        task_id: ticketId.id,
+        status: 0,
      },
-    {
-      name: "Марина Серова",
-      avatar: avatarMock1,
-    },
-  ]);
+    }).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,9 +194,12 @@ 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>
@ -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>
--- a/src/pages/ProjectTracker/ProjectTracker.jsx
+++ b/src/pages/ProjectTracker/ProjectTracker.jsx
@ -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 = currentUrl[0].split("/").at(-1);
-
-  useEffect(() => {
-    dispatch(setProjectBoardFetch(projectId));
-  }, []);
+  const projectId = useParams();

+  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) =>
-      prevArray.map((elem) => {
-        return false;
-      })
-    );
+    setWrapperHover((prevState) => ({
+      [prevState]: 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) => {
-        if (index === columnId) {
-          return true;
-        } else {
-          return false;
-        }
-      })
-    );
+
+    setWrapperHover((prevState) => ({
+      [prevState]: false,
+      [columnId]: true,
+    }));
  }
  function dragDropHandler(e, columnId) {
    e.preventDefault();
    if (startWrapperIndexTest.current.index === columnId) {
      return;
    }
-    setWrapperHover((prevArray) =>
-      prevArray.map((elem) => {
-        return false;
-      })
-    );
+
+    setWrapperHover((prevState) => ({
+      [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) {
--- a/src/pages/Tracker/tracker.scss
+++ b/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 {