pull in main

2023-05-04 18:38:56 +03:00
parent 87fb04e422 f1d1fd7475
commit 7667de9b8b
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.",
-  });
-  const [workers] = useState([
-    {
-      name: "Дмитрий Рогов",
-      avatar: avatarMock2,
-    },
-    {
-      name: "Марина Серова",
-      avatar: avatarMock1,
-    },
-  ]);
+  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 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) => {
-                  return (
-                    <div className="worker" key={index}>
-                      <img src={worker.avatar}></img>
-                      <p>{worker.name}</p>
-                    </div>
-                  );
-                })}
+                {Boolean(taskInfo.taskUsers?.length) &&
+                  taskInfo.taskUsers.map((worker, index) => {
+                    return (
+                      <div className="worker" key={index}>
+                        <img src={worker.avatar}></img>
+                        <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>