tracker-connect-back

2023-05-03 20:01:23 +03:00 · 2023-05-03 20:01:23 +03:00 · cd732dcc9d
commit cd732dcc9d
parent fd49f9df68
5 changed files with 139 additions and 79 deletions
--- 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,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({
-    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)
+      })
+    })
+  }, [])
+
+  function deleteTask() {
+    apiRequest("/task/update-task", {
+      method: "PUT",
+      data: {
+        task_id: ticketId.id,
+        status: 0,
+      },
+    }).then((res) => {
+      navigate(`/tracker/project/${taskInfo.project_id}`)
    });
-  const [workers] = useState([
-    {
-      name: "Дмитрий Рогов",
-      avatar: avatarMock2,
-    },
-    {
-      name: "Марина Серова",
-      avatar: avatarMock1,
-    },
-  ]);
+  }

  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>
--- a/src/pages/ProjectTracker/ProjectTracker.js
+++ b/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 = currentUrl[0].split('/').at(-1)
+    const projectId = useParams()
+    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 />
@ -349,9 +368,25 @@ 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}))
+                                                }}>
+                                                    <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 {