Fixed modals btn

src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx

@@ -4,14 +4,13 @@ import { Link } from "react-router-dom";
 
 import { modalToggle, setProjectBoardFetch } from "@redux/projectsTrackerSlice";
 
-import { urlForLocal } from "@utils/helper";
+import { getCorrectRequestDate, urlForLocal } from "@utils/helper";
 
 import { apiRequest } from "@api/request";
 
-import { getCorrectDate } from "@components/Calendar/calendarHelper";
 import BaseButton from "@components/Common/BaseButton/BaseButton";
-import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
 import TrackerModal from "@components/Modal/TrackerModal/TrackerModal";
+import TrackerTaskComment from "@components/TrackerTaskComment/TrackerTaskComment";
 
 import archive from "assets/icons/archive.svg";
 import arrow from "assets/icons/arrows/arrowStart.png";
@@ -26,7 +25,7 @@ import plus from "assets/icons/plus.svg";
 import send from "assets/icons/send.svg";
 import watch from "assets/icons/watch.svg";
 
-import "./ModalTicket.scss";
+import "./modalTicket.scss";
 
 export const ModalTiсket = ({
   active,
@@ -45,13 +44,19 @@ export const ModalTiсket = ({
     comment: "",
   });
   const [comments, setComments] = useState([]);
-  const [commentsEditOpen, setCommentsEditOpen] = useState({});
-  const [commentsEditText, setCommentsEditText] = useState({});
   const [dropListOpen, setDropListOpen] = useState(false);
   const [dropListMembersOpen, setDropListMembersOpen] = useState(false);
   const [executor, setExecutor] = useState(task.executor);
   const [members, setMembers] = useState(task.taskUsers);
   const [users, setUsers] = useState([]);
+  const [timerStart, setTimerStart] = useState(false);
+  const [timerInfo, setTimerInfo] = useState({});
+  const [currentTimerCount, setCurrentTimerCount] = useState({
+    hours: 0,
+    minute: 0,
+    seconds: 0,
+  });
+  const [timerId, setTimerId] = useState(null);
 
   function deleteTask() {
     apiRequest("/task/update-task", {
@@ -90,37 +95,78 @@ export const ModalTiсket = ({
     }).then((res) => {
       let newComment = res;
       newComment.created_at = new Date();
+      newComment.subComments = [];
       setInputsValue((prevValue) => ({ ...prevValue, comment: "" }));
       setComments((prevValue) => [...prevValue, newComment]);
-      setCommentsEditOpen((prevValue) => ({ ...prevValue, [res.id]: false }));
-      setCommentsEditText((prevValue) => ({
-        ...prevValue,
-        [res.id]: res.text,
-      }));
-    });
-  }
-  function deleteComment(commentId) {
-    apiRequest("/comment/update", {
-      method: "PUT",
-      data: {
-        comment_id: commentId,
-        status: 0,
-      },
-    }).then(() => {
-      setComments((prevValue) =>
-        prevValue.filter((item) => item.id !== commentId)
-      );
     });
   }
 
-  function editComment(commentId) {
+  function commentDelete(comment) {
+    setComments((prevValue) =>
+      prevValue.filter((item) => item.id !== comment.id)
+    );
+    if (comment.subComments.length) {
+      // promiseAll
+      comment.subComments.forEach((subComment) => {
         apiRequest("/comment/update", {
           method: "PUT",
           data: {
-        comment_id: commentId,
+            comment_id: subComment.id,
-        text: commentsEditText[commentId],
+            status: 0,
           },
         }).then(() => {});
+      });
+    }
+  }
+
+  function addSubComment(commentId, subComment) {
+    const addSubComment = comments;
+    addSubComment.forEach((comment) => {
+      if (comment.id === commentId) {
+        comment.subComments.push(subComment);
+      }
+    });
+    setComments(addSubComment);
+  }
+
+  function subCommentDelete(subComment) {
+    const deleteSubComment = comments;
+    deleteSubComment.forEach((comment, index) => {
+      if (comment.id === subComment.parent_id) {
+        deleteSubComment[index].subComments = comment.subComments.filter(
+          (item) => item.id !== subComment.id
+        );
+      }
+    });
+    setComments([...deleteSubComment]);
+  }
+
+  function startTaskTimer() {
+    apiRequest("/timer/create", {
+      method: "POST",
+      data: {
+        entity_type: 2,
+        entity_id: task.id,
+        created_at: getCorrectRequestDate(new Date()),
+      },
+    }).then((res) => {
+      setTimerStart(true);
+      setTimerInfo(res);
+      startTimer();
+    });
+  }
+
+  function stopTaskTimer() {
+    apiRequest("/timer/update", {
+      method: "PUT",
+      data: {
+        timer_id: timerInfo.id,
+        stopped_at: getCorrectRequestDate(new Date()),
+      },
+    }).then(() => {
+      setTimerStart(false);
+      clearInterval(timerId);
+    });
   }
 
   function taskExecutor(person) {
@@ -177,19 +223,76 @@ export const ModalTiсket = ({
     apiRequest(
       `/comment/get-by-entity?entity_type=2&entity_id=${task.id}`
     ).then((res) => {
-      setComments(res);
+      const comments = res.reduce((acc, cur) => {
-      res.forEach((item) => {
+        if (!cur.parent_id) {
-        setCommentsEditOpen((prevValue) => ({
+          acc.push({ ...cur, subComments: [] });
-          ...prevValue,
+        } else {
-          [item.id]: false,
+          acc.forEach((item) => {
-        }));
+            if (item.id === cur.parent_id) item.subComments.push(cur);
-        setCommentsEditText((prevValue) => ({
-          ...prevValue,
-          [item.id]: item.text,
-        }));
-      });
           });
+        }
+        return acc;
       }, []);
+      setComments(comments);
+    });
+    apiRequest(`/timer/get-by-entity?entity_type=2&entity_id=${task.id}`).then(
+      (res) => {
+        let timerSeconds = 0;
+        res.length &&
+          res.forEach((time) => {
+            timerSeconds += time.deltaSeconds;
+            setCurrentTimerCount({
+              hours: Math.floor(timerSeconds / 60 / 60),
+              minute: Math.floor((timerSeconds / 60) % 60),
+              seconds: timerSeconds % 60,
+            });
+            updateTimerHours = Math.floor(timerSeconds / 60 / 60);
+            updateTimerMinute = Math.floor((timerSeconds / 60) % 60);
+            updateTimerSec = timerSeconds % 60;
+            if (!time.stopped_at) {
+              setTimerStart(true);
+              startTimer();
+              setTimerInfo(time);
+            }
+          });
+      }
+    );
+  }, []);
+
+  function startTimer() {
+    setTimerId(
+      setInterval(() => {
+        run();
+      }, 1000)
+    );
+  }
+
+  let updateTimerSec = currentTimerCount.seconds,
+    updateTimerMinute = currentTimerCount.minute,
+    updateTimerHours = currentTimerCount.hours;
+
+  function run() {
+    updateTimerSec++;
+    if (updateTimerSec > 60) {
+      updateTimerMinute++;
+      updateTimerSec = 0;
+    }
+    if (updateTimerMinute === 60) {
+      updateTimerMinute = 0;
+      updateTimerHours++;
+    }
+
+    return setCurrentTimerCount({
+      hours: updateTimerHours,
+      minute: updateTimerMinute,
+      seconds: updateTimerSec,
+    });
+  }
+
+  function correctTimerTime(time) {
+    if (time < 10) return `0${time}`;
+    if (time > 10) return time;
+  }
 
   useEffect(() => {
     let ids = members.map((user) => user.user_id);
@@ -202,11 +305,13 @@ export const ModalTiсket = ({
   }, [members]);
 
   return (
-    <>
+    <div
-      <ModalLayout
+      className={active ? "modal-tiket active" : "modal-tiket"}
-        active={active}
+      onClick={() => setActive(false)}
-        setActive={setActive}
+    >
-        styles={"tracker-ticket"}
+      <div
+        className="modal-tiket__content"
+        onClick={(e) => e.stopPropagation()}
       >
         <div className="content">
           <h3 className="title-project">
@@ -258,17 +363,17 @@ export const ModalTiсket = ({
                     dispatch(modalToggle("addSubtask"));
                     setAddSubtask(true);
                   }}
-                  styles={"tasks__button"}
+                  styles={"button-green-add"}
                 >
                   <img src={plus}></img>
                   Добавить под задачу
                 </BaseButton>
               </p>
               <p className="file">
-                <BaseButton styles={"file__button"}>
+                <button>
                   <img src={file}></img>
                   Загрузить файл
-                </BaseButton>
+                </button>
                 <span>{0}</span>
                 Файлов
               </p>
@@ -289,50 +394,14 @@ export const ModalTiсket = ({
             <div className="comments__list">
               {comments.map((comment) => {
                 return (
-                  <div className="comments__list__item" key={comment.id}>
+                  <TrackerTaskComment
-                    <div className="comments__list__item__info">
+                    key={comment.id}
-                      <span>{getCorrectDate(comment.created_at)}</span>
+                    taskId={task.id}
-                      <div
+                    comment={comment}
-                        className={
+                    commentDelete={commentDelete}
-                          commentsEditOpen[comment.id]
+                    addSubComment={addSubComment}
-                            ? "edit edit__open"
+                    subCommentDelete={subCommentDelete}
-                            : "edit"
-                        }
-                      >
-                        <img
-                          src={edit}
-                          alt="edit"
-                          onClick={() => {
-                            if (commentsEditOpen[comment.id]) {
-                              editComment(comment.id);
-                            }
-                            setCommentsEditOpen((prevValue) => ({
-                              ...prevValue,
-                              [comment.id]: !prevValue[comment.id],
-                            }));
-                          }}
                   />
-                      </div>
-                      <img
-                        src={del}
-                        alt="delete"
-                        onClick={() => deleteComment(comment.id)}
-                      />
-                    </div>
-                    {commentsEditOpen[comment.id] ? (
-                      <input
-                        value={commentsEditText[comment.id]}
-                        onChange={(e) => {
-                          setCommentsEditText((prevValue) => ({
-                            ...prevValue,
-                            [comment.id]: e.target.value,
-                          }));
-                        }}
-                      />
-                    ) : (
-                      <p>{commentsEditText[comment.id]}</p>
-                    )}
-                  </div>
                 );
               })}
             </div>
@@ -438,12 +507,29 @@ export const ModalTiсket = ({
             <div className="time">
               <img src={watch}></img>
               <span>Длительность : </span>
-              <p>{"0:00:00"}</p>
+              <p>
+                {correctTimerTime(currentTimerCount.hours)}:
+                {correctTimerTime(currentTimerCount.minute)}:
+                {correctTimerTime(currentTimerCount.seconds)}
+              </p>
             </div>
 
-            <button className="start">
+            {timerStart ? (
+              <button className="stop" onClick={() => stopTaskTimer()}>
+                Остановить
+              </button>
+            ) : (
+              <button
+                className={
+                  task.executor_id === Number(localStorage.getItem("id"))
+                    ? "start"
+                    : "start disable"
+                }
+                onClick={() => startTaskTimer()}
+              >
                 Начать делать <img src={arrow}></img>
               </button>
+            )}
           </div>
 
           <div className="workers_box-bottom">
@@ -475,14 +561,14 @@ export const ModalTiсket = ({
             </div>
           </div>
         </div>
-      </ModalLayout>
+      </div>
 
       <TrackerModal
         active={addSubtask}
         setActive={setAddSubtask}
         defautlInput={task.column_id}
       ></TrackerModal>
-    </>
+    </div>
   );
 };
 

src/components/Modal/Tracker/ModalTicket/ModalTicket.scss

@@ -1,594 +0,0 @@
-.tracker-ticket {
-  background: #ffffff;
-  padding: 0;
-  border-radius: 8px;
-  align-items: initial;
-  display: flex;
-  flex-direction: row;
-
-  .content {
-    display: flex;
-    flex-direction: column;
-    width: 600px;
-    margin: 26px 0 0 21px;
-
-    .title-project {
-      color: #1458dd;
-      font-family: "LabGrotesque", sans-serif;
-      display: flex;
-      align-items: center;
-      font-weight: 700;
-      font-size: 22px;
-      line-height: 32px;
-
-      &__category {
-        margin-right: 17px;
-      }
-
-      &__full {
-        margin-left: 35%;
-      }
-    }
-
-    &__task {
-      margin-top: -5px;
-      padding: 18px;
-      display: flex;
-      flex-direction: column;
-
-      input {
-        font-style: normal;
-        font-size: 16px;
-        line-height: 24px;
-        max-width: 340px;
-        outline: none;
-      }
-
-      button {
-        img {
-          margin-right: 5px;
-        }
-      }
-
-      h5 {
-        font-family: "Inter", sans-serif;
-        font-weight: 500;
-        font-style: normal;
-        font-size: 16px;
-        line-height: 24px;
-        color: #1a1919;
-        margin-bottom: 0;
-      }
-
-      .comments__list {
-        display: flex;
-        flex-direction: column;
-        max-height: 420px;
-        overflow: auto;
-
-        &::-webkit-scrollbar {
-          width: 4px;
-          border-radius: 10px;
-        }
-
-        &::-webkit-scrollbar-thumb {
-          background: #cbd9f9;
-          border-radius: 10px;
-        }
-
-        &::-webkit-scrollbar-track {
-          background: #c5c0c6;
-          border-radius: 10px;
-        }
-
-        &__item {
-          padding: 10px 20px;
-          display: flex;
-          flex-direction: column;
-          max-width: 438px;
-          border-radius: 44px;
-          font-size: 14px;
-          width: 100%;
-          position: relative;
-
-          &__subComment {
-            &:before {
-              content: '';
-              background: #E4E4E6;
-              height: 1px;
-              width: 7px;
-              position: absolute;
-              top: 36%;
-              left: 2.5%;
-            }
-          }
-
-          &__main {
-            &:after {
-              content: '';
-              position: absolute;
-              background-image: url("../../../images/mainTaskCommentImg.png");
-              width: 10px;
-              height: 8px;
-              top: 50px;
-              left: 25px;
-            }
-
-            &:before {
-              content: '';
-              position: absolute;
-              background: #E4E4E6;
-              width: 1px;
-              height: calc(100% - 120px);
-              left: 29px;
-              top: 65px;
-            }
-          }
-
-          &__fio {
-            display: flex;
-            align-items: center;
-
-            p {
-              font-size: 12px;
-              color: #000000;
-              line-height: 32px;
-              max-width: 150px;
-              overflow: hidden;
-              white-space: nowrap;
-              text-overflow: ellipsis;
-              margin-left: 10px;
-            }
-
-            img {
-              width: 24px;
-              height: 24px;
-            }
-          }
-
-          &__date {
-            display: flex;
-            align-items: center;
-            column-gap: 5px;
-
-            img {
-              cursor: pointer;
-              width: 15px;
-            }
-
-            span {
-              font-size: 12px;
-            }
-          }
-
-          &__text {
-            margin-left: 34px;
-          }
-
-          &__info {
-            display: flex;
-            justify-content: space-between;
-
-            .edit {
-              width: 25px;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              border-radius: 5px;
-            }
-
-            .edit__open {
-              background: green;
-            }
-          }
-
-          &__answer {
-            margin-left: 34px;
-            text-decoration-line: underline;
-            font-weight: 400;
-            font-size: 10px;
-            line-height: 32px;
-            cursor: pointer;
-
-            &__new {
-              margin-left: 34px;
-              font-size: 14px;
-              border-radius: 5px;
-              border: 1px solid gainsboro;
-              padding: 3px 5px;
-              display: flex;
-              align-items: center;
-              margin-top: 5px;
-
-              img {
-                width: 20px;
-                height: 20px;
-                cursor: pointer;
-              }
-
-              input {
-                width: 90%;
-                border: none;
-              }
-            }
-          }
-        }
-      }
-    }
-
-    &__description {
-      display: flex;
-      flex-direction: column;
-      margin-top: 10px;
-
-      p {
-        font-weight: 400;
-        font-size: 14px;
-        line-height: 140%;
-        color: #252c32;
-        text-align: justify;
-      }
-
-      .image-task {
-        margin: 10px 0 20px 0;
-        max-width: 330px;
-      }
-    }
-
-    &__communication {
-      display: flex;
-      flex-direction: row;
-      margin: 29px 0 0 -5px;
-
-      .tasks {
-        justify-content: space-evenly;
-
-        &__button {
-          width: 180px;
-          height: 40px;
-          font-size: 12px;
-        }
-      }
-
-      .tasks,
-      .file {
-        display: flex;
-        align-items: center;
-      }
-
-      .file {
-        justify-content: space-between;
-        margin-left: 20px;
-
-        &__button {
-          background: white;
-          width: 166px;
-          height: 40px;
-          border: 0.5px solid #1458dd;
-          font-weight: 400;
-          font-size: 12px;
-          color: #1458dd;
-
-          img {
-            margin-right: 9px;
-          }
-        }
-
-        span {
-          margin: 0 3px 0 11px;
-          font-weight: 500;
-          font-size: 12px;
-          line-height: 15px;
-          color: #6e7c87;
-        }
-      }
-    }
-
-    &__input {
-      margin: 20px 0 20px 0;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      width: 438px;
-      height: 40px;
-      background: #f1f1f1;
-      border-radius: 44px;
-
-      input {
-        width: 80%;
-        background: inherit;
-        border: none;
-        outline: none;
-        padding-left: 30px;
-        font-weight: 400;
-        font-size: 12px;
-        line-height: 32px;
-        border-radius: 44px;
-      }
-
-      img {
-        cursor: pointer;
-        margin-right: 18px;
-      }
-    }
-  }
-
-  .members {
-    display: flex;
-    flex-direction: column;
-    font-size: 14px;
-
-    &__list {
-      display: flex;
-      flex-direction: column;
-      row-gap: 8px;
-    }
-  }
-
-  .workers {
-    position: relative;
-    border-left: 1px solid #f1f1f1;
-
-    .exit {
-      cursor: pointer;
-      position: absolute;
-      top: 35px;
-      right: 40px;
-
-      &:before,
-      &:after {
-        content: "";
-        position: absolute;
-        width: 16px;
-        height: 2px;
-        background: #263238;
-      }
-
-      &:before {
-        transform: rotate(45deg);
-      }
-      &:after {
-        transform: rotate(-45deg);
-      }
-    }
-
-    span {
-      font-family: "Inter", sans-serif;
-      font-weight: 500;
-      font-size: 11px;
-      color: #807777;
-    }
-
-    .nameProject {
-      max-width: 200px;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-
-    .add-worker {
-      display: flex;
-      align-items: center;
-      position: relative;
-
-      span {
-        color: #000000;
-        font-size: 12px;
-        line-height: 32px;
-        margin-left: 17px;
-        font-style: normal;
-        font-weight: 400;
-      }
-
-      button {
-        cursor: pointer;
-        background: #8bcc60;
-        border-radius: 44px;
-        width: 33px;
-        height: 33px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        border: none;
-        color: white;
-        font-size: 17px;
-      }
-    }
-
-    .start {
-      font-size: 12px;
-      margin-top: 25px;
-      width: 151px;
-      height: 40px;
-      border: none;
-      color: white;
-      background: #1458dd;
-      border-radius: 44px;
-
-      img {
-        margin-left: 10px;
-      }
-    }
-
-    .disable {
-      opacity: 0.5;
-      pointer-events: none;
-    }
-
-    .stop {
-      font-size: 12px;
-      margin-top: 25px;
-      width: 151px;
-      height: 40px;
-      border: none;
-      color: white;
-      background: red;
-      border-radius: 44px;
-    }
-
-    .time {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      font-size: 12px;
-      margin-top: 20px;
-      width: 160px;
-
-      p {
-        color: #000000;
-        margin: 0;
-      }
-    }
-
-    &__creator {
-      font-size: 14px;
-      line-height: 32px;
-      font-weight: 500;
-      color: #2d4a17;
-      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 {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-
-      p {
-        max-width: 170px;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        font-size: 14px;
-      }
-
-      img {
-        max-width: 25px;
-        max-height: 25px;
-        margin-left: 5px;
-      }
-    }
-
-    .task__info {
-      display: flex;
-      flex-direction: column;
-      row-gap: 5px;
-
-      .delete {
-        cursor: pointer;
-      }
-
-      .executor {
-        display: flex;
-        font-size: 14px;
-        align-items: center;
-
-        p {
-          max-width: 170px;
-          overflow: hidden;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-        }
-
-        img {
-          margin-left: 5px;
-          max-width: 25px;
-          max-height: 25px;
-        }
-      }
-
-      .dropdownList {
-        position: absolute;
-        background: white;
-        padding: 10px;
-        border-radius: 10px;
-        top: 0;
-        z-index: 10;
-        border: 1px solid gray;
-        width: 260px;
-        display: flex;
-        flex-direction: column;
-        row-gap: 8px;
-
-        .noUsers {
-          font-size: 14px;
-          text-align: center;
-        }
-
-        &__close {
-          cursor: pointer;
-          margin-left: auto;
-          width: 12px;
-          margin-right: 5px;
-        }
-
-        &__person {
-          display: flex;
-          justify-content: space-between;
-          cursor: pointer;
-
-          img {
-            max-width: 30px;
-            max-height: 30px;
-          }
-        }
-      }
-    }
-
-    &_box {
-      padding: 25px 85px 40px 40px;
-      border-bottom: 1px solid #f1f1f1;
-
-      &-middle {
-        padding: 0px 40px 25px 40px;
-        border-bottom: 1px solid #f1f1f1;
-      }
-
-      &-bottom {
-        padding: 40px 110px 75px 56px;
-        font-weight: 400;
-        font-size: 14px;
-        line-height: 38px;
-
-        div {
-          display: flex;
-          cursor: pointer;
-          align-items: center;
-          padding-left: 10px;
-
-          p {
-            margin: 0 0 0 12px;
-          }
-        }
-
-        .edit {
-          background: #52b709;
-          border-radius: 50px;
-
-          p {
-            font-weight: 700;
-          }
-        }
-      }
-    }
-  }
-}
-
-.subtask {
-  h4 {
-    width: 90%;
-    p {
-      color: #1458dd;
-    }
-  }
-}

src/components/Modal/Tracker/ModalTicket/modalTicket.scss

@@ -109,8 +109,8 @@
 
           &__subComment {
             &:before {
-              content: '';
+              content: "";
-              background: #E4E4E6;
+              background: #e4e4e6;
               height: 1px;
               width: 7px;
               position: absolute;
@@ -121,9 +121,9 @@
 
           &__main {
             &:after {
-              content: '';
+              content: "";
               position: absolute;
-              background-image: url("../../../assets/images/mainTaskCommentImg.png");
+              background-image: url("assets/images/mainTaskCommentImg.png");
               width: 10px;
               height: 8px;
               top: 50px;
@@ -131,9 +131,9 @@
             }
 
             &:before {
-              content: '';
+              content: "";
               position: absolute;
-              background: #E4E4E6;
+              background: #e4e4e6;
               width: 1px;
               height: calc(100% - 120px);
               left: 29px;
@@ -258,16 +258,12 @@
       .tasks {
         justify-content: space-evenly;
 
-        button {
+        .button-green-add {
           width: 180px;
           height: 40px;
-          background: #52b709;
-          border-radius: 44px;
           font-weight: 400;
           font-size: 12px;
           line-height: 32px;
-          border: none;
-          color: #ffffff;
         }
       }
 

src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx

@@ -1,45 +1,47 @@
 import React, { useEffect, useState } from "react";
-
-import { ProfileHeader } from "../../../ProfileHeader/ProfileHeader";
-import { ProfileBreadcrumbs } from "../../../ProfileBreadcrumbs/ProfileBreadcrumbs";
-import { Footer } from "@components/Common/Footer/Footer";
-import { Link, useParams, useNavigate } from "react-router-dom";
-import TrackerModal from "../../../Modal/TrackerModal/TrackerModal";
-import TrackerTaskComment from "../../../TrackerTaskComment/TrackerTaskComment";
-import { Navigation } from "../../../Navigation/Navigation";
-import {Loader} from "@components/Common/Loader/Loader";
-
 import { useDispatch, useSelector } from "react-redux";
+import { Link, useNavigate, useParams } from "react-router-dom";
+
 import {
   deletePersonOnProject,
+  getBoarderLoader,
+  getProjectBoard,
   modalToggle,
   setProjectBoardFetch,
   setToggleTab,
-  getProjectBoard,
+} from "@redux/projectsTrackerSlice";
-  getBoarderLoader,
-} from "../../../../redux/projectsTrackerSlice";
-import { apiRequest } from "../../../../api/request";
 
-import project from "../../../../assets/icons/trackerProject.svg";
+import { getCorrectRequestDate, urlForLocal } from "@utils/helper";
-import watch from "../../../../assets/icons/watch.svg";
+
-import file from "../../../../assets/icons/fileModal.svg";
+import { apiRequest } from "@api/request";
-import send from "../../../../assets/icons/send.svg";
+
-import arrow2 from "../../../../assets/icons/arrows/arrowStart.png";
+import BaseButton from "@components/Common/BaseButton/BaseButton";
-import plus from "../../../../assets/icons/plus.svg";
+import { Footer } from "@components/Common/Footer/Footer";
-import tasks from "../../../../assets/icons/trackerTasks.svg";
+import { Loader } from "@components/Common/Loader/Loader";
-import archive from "../../../../assets/icons/archive.svg";
+import TrackerModal from "@components/Modal/TrackerModal/TrackerModal";
-import arrow from "../../../../assets/icons/arrows/arrowCalendar.png";
+import { Navigation } from "@components/Navigation/Navigation";
-import link from "../../../../assets/icons/link.svg";
+import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
-import archive2 from "../../../../assets/icons/archive.svg";
+import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
-import del from "../../../../assets/icons/delete.svg";
+import TrackerTaskComment from "@components/TrackerTaskComment/TrackerTaskComment";
-import edit from "../../../../assets/icons/edit.svg";
+
-import close from "../../../../assets/icons/close.png";
+import archive from "assets/icons/archive.svg";
+import archive2 from "assets/icons/archive.svg";
+import arrow from "assets/icons/arrows/arrowCalendar.png";
+import arrow2 from "assets/icons/arrows/arrowStart.png";
+import close from "assets/icons/close.png";
+import del from "assets/icons/delete.svg";
+import edit from "assets/icons/edit.svg";
+import file from "assets/icons/fileModal.svg";
+import link from "assets/icons/link.svg";
+import plus from "assets/icons/plus.svg";
+import send from "assets/icons/send.svg";
+import project from "assets/icons/trackerProject.svg";
+import tasks from "assets/icons/trackerTasks.svg";
+import watch from "assets/icons/watch.svg";
 
 import "./ticketFullScreen.scss";
 
-import {getCorrectRequestDate, urlForLocal} from "../../../../utils/helper";
+export const TicketFullScreen = () => {
-
-export const TicketFullScreen = ({}) => {
   const [modalAddWorker, setModalAddWorker] = useState(false);
   const ticketId = useParams();
   const dispatch = useDispatch();
@@ -51,35 +53,41 @@ export const TicketFullScreen = ({}) => {
   const [inputsValue, setInputsValue] = useState({});
   const [loader, setLoader] = useState(true);
   const [comments, setComments] = useState([]);
-  const [personListOpen, setPersonListOpen] = useState(false)
+  const [personListOpen, setPersonListOpen] = useState(false);
-  const [timerStart, setTimerStart] = useState(false)
+  const [timerStart, setTimerStart] = useState(false);
-  const [timerInfo, setTimerInfo] = useState({})
+  const [timerInfo, setTimerInfo] = useState({});
 
   useEffect(() => {
     apiRequest(`/task/get-task?task_id=${ticketId.id}`).then((taskInfo) => {
       setTaskInfo(taskInfo);
-      setInputsValue({title: taskInfo.title, description: taskInfo.description, comment: ''})
+      setInputsValue({
-      apiRequest(`/comment/get-by-entity?entity_type=2&entity_id=${taskInfo.id}`).then((res) => {
+        title: taskInfo.title,
+        description: taskInfo.description,
+        comment: "",
+      });
+      apiRequest(
+        `/comment/get-by-entity?entity_type=2&entity_id=${taskInfo.id}`
+      ).then((res) => {
         const comments = res.reduce((acc, cur) => {
           if (!cur.parent_id) {
-            acc.push({...cur, subComments: []})
+            acc.push({ ...cur, subComments: [] });
           } else {
             acc.forEach((item) => {
-              if (item.id === cur.parent_id) item.subComments.push(cur)
+              if (item.id === cur.parent_id) item.subComments.push(cur);
-            })
+            });
           }
-          return acc
+          return acc;
-        }, [])
+        }, []);
-        setComments(comments)
+        setComments(comments);
-      })
+      });
       taskInfo.timers.forEach((time) => {
         if (!time.stopped_at) {
-          setTimerStart(true)
+          setTimerStart(true);
-          setTimerInfo(time)
+          setTimerInfo(time);
         }
-      })
+      });
       dispatch(setProjectBoardFetch(taskInfo.project_id));
-      setLoader(boardLoader)
+      setLoader(boardLoader);
     });
   }, []);
 
@@ -101,10 +109,9 @@ export const TicketFullScreen = ({}) => {
       data: {
         task_id: taskInfo.id,
         title: inputsValue.title,
-        description: inputsValue.description
+        description: inputsValue.description,
       },
-    }).then(() => {
+    }).then(() => {});
-    });
   }
 
   function createComment() {
@@ -113,15 +120,15 @@ export const TicketFullScreen = ({}) => {
       data: {
         text: inputsValue.comment,
         entity_type: 2,
-        entity_id: taskInfo.id
+        entity_id: taskInfo.id,
-      }
+      },
     }).then((res) => {
-      let newComment = res
+      let newComment = res;
-      newComment.created_at = new Date()
+      newComment.created_at = new Date();
-      newComment.subComments = []
+      newComment.subComments = [];
-      setInputsValue((prevValue) => ({...prevValue, comment: ''}))
+      setInputsValue((prevValue) => ({ ...prevValue, comment: "" }));
-      setComments((prevValue) => ([...prevValue, newComment]))
+      setComments((prevValue) => [...prevValue, newComment]);
-    })
+    });
   }
 
   function startTaskTimer() {
@@ -130,12 +137,12 @@ export const TicketFullScreen = ({}) => {
       data: {
         entity_type: 2,
         entity_id: taskInfo.id,
-        created_at: getCorrectRequestDate(new Date())
+        created_at: getCorrectRequestDate(new Date()),
-      }
+      },
     }).then((res) => {
-      setTimerStart(true)
+      setTimerStart(true);
-      setTimerInfo(res)
+      setTimerInfo(res);
-    })
+    });
   }
 
   function stopTaskTimer() {
@@ -143,9 +150,9 @@ export const TicketFullScreen = ({}) => {
       method: "PUT",
       data: {
         timer_id: timerInfo.id,
-        stopped_at: getCorrectRequestDate(new Date())
+        stopped_at: getCorrectRequestDate(new Date()),
-      }
+      },
-    }).then(() => setTimerStart(false))
+    }).then(() => setTimerStart(false));
   }
 
   function deletePerson(userId) {
@@ -153,47 +160,50 @@ export const TicketFullScreen = ({}) => {
       method: "DELETE",
       data: {
         project_id: projectBoard.id,
-        user_id: userId
+        user_id: userId,
       },
     }).then(() => {
-      dispatch(deletePersonOnProject(userId))
+      dispatch(deletePersonOnProject(userId));
     });
   }
 
   function commentDelete(comment) {
-    setComments((prevValue) => prevValue.filter((item) => item.id !== comment.id))
+    setComments((prevValue) =>
+      prevValue.filter((item) => item.id !== comment.id)
+    );
     if (comment.subComments.length) {
       comment.subComments.forEach((subComment) => {
         apiRequest("/comment/update", {
           method: "PUT",
           data: {
             comment_id: subComment.id,
-            status: 0
+            status: 0,
-          }
+          },
-        }).then(() => {
+        }).then(() => {});
-        })
+      });
-      })
     }
   }
 
   function addSubComment(commentId, subComment) {
-    const addSubComment = comments
+    const addSubComment = comments;
     addSubComment.forEach((comment) => {
       if (comment.id === commentId) {
-        comment.subComments.push(subComment)
+        comment.subComments.push(subComment);
       }
-    })
+    });
-    setComments(addSubComment)
+    setComments(addSubComment);
   }
 
   function subCommentDelete(subComment) {
-    const deleteSubComment = comments
+    const deleteSubComment = comments;
     deleteSubComment.forEach((comment, index) => {
       if (comment.id === subComment.parent_id) {
-        deleteSubComment[index].subComments = comment.subComments.filter((item) => item.id !== subComment.id)
+        deleteSubComment[index].subComments = comment.subComments.filter(
+          (item) => item.id !== subComment.id
+        );
       }
-    })
+    });
-    setComments([...deleteSubComment])
+    setComments([...deleteSubComment]);
   }
 
   const toggleTabs = (index) => {
@@ -242,7 +252,9 @@ export const TicketFullScreen = ({}) => {
             <p>Архив</p>
           </Link>
         </div>
-          {loader ? <Loader /> :
+        {loader ? (
+          <Loader />
+        ) : (
           <>
             <div className="tracker__tabs__content content-tabs">
               <div className="tasks__head">
@@ -255,45 +267,69 @@ export const TicketFullScreen = ({}) => {
                   ></TrackerModal>
 
                   <div className="tasks__head__persons">
-                        {/*<img src={avatarTest} alt="avatar" />*/}
+                    <span className="countPersons">
-                        {/*<img src={avatarTest} alt="avatar" />*/}
+                      {projectBoard.projectUsers?.length}
-                        <span className="countPersons">{projectBoard.projectUsers?.length}</span>
+                    </span>
                     <span
                       className="addPerson"
                       onClick={() => {
-                              setPersonListOpen(true)
+                        setPersonListOpen(true);
                       }}
                     >
                       +
                     </span>
                     <p>добавить участника</p>
-                        {personListOpen &&
+                    {personListOpen && (
-                            <div className='persons__list'>
+                      <div className="persons__list">
-                              <img className='persons__list__close' src={close} alt='close' onClick={() => setPersonListOpen(false)} />
+                        <img
-                              <div className='persons__list__count'><span>{projectBoard.projectUsers?.length}</span>участник</div>
+                          className="persons__list__close"
-                              <div className='persons__list__info'>В проекте - <span>“{projectBoard.name}”</span></div>
+                          src={close}
-                              <div className='persons__list__items'>
+                          alt="close"
+                          onClick={() => setPersonListOpen(false)}
+                        />
+                        <div className="persons__list__count">
+                          <span>{projectBoard.projectUsers?.length}</span>
+                          участник
+                        </div>
+                        <div className="persons__list__info">
+                          В проекте - <span>“{projectBoard.name}”</span>
+                        </div>
+                        <div className="persons__list__items">
                           {projectBoard.projectUsers?.map((person) => {
-                                  return <div className='persons__list__item' key={person.user_id}>
+                            return (
-                                    <img className='avatar' src={urlForLocal(person.user.avatar)} alt='avatar' />
+                              <div
+                                className="persons__list__item"
+                                key={person.user_id}
+                              >
+                                <img
+                                  className="avatar"
+                                  src={urlForLocal(person.user.avatar)}
+                                  alt="avatar"
+                                />
                                 <span>{person.user.fio}</span>
-                                    <img className='delete' src={close} alt='delete' onClick={() => deletePerson(person.user_id)}/>
+                                <img
+                                  className="delete"
+                                  src={close}
+                                  alt="delete"
+                                  onClick={() => deletePerson(person.user_id)}
+                                />
                               </div>
-                                })
+                            );
-                                }
+                          })}
                         </div>
-                              <div className='persons__list__add'
+                        <div
+                          className="persons__list__add"
                           onClick={() => {
                             dispatch(modalToggle("addWorker"));
                             setModalAddWorker(true);
-                                     setPersonListOpen(false)
+                            setPersonListOpen(false);
                           }}
                         >
-                                <span className='addPerson'>+</span>
+                          <span className="addPerson">+</span>
                           <p>Добавить участников</p>
                         </div>
                       </div>
-                        }
+                    )}
                   </div>
                   <Link to={`/profile/tracker`} className="link">
                     <div className="tasks__head__back">
@@ -308,30 +344,50 @@ export const TicketFullScreen = ({}) => {
               <div className="content ticket-whith">
                 <div className="content__task">
                   <span>Задача</span>
-                      {editOpen ? <input value={inputsValue.title} onChange={(e) => {
+                  {editOpen ? (
-                        setInputsValue((prevValue) => ({...prevValue, title: e.target.value}))
+                    <input
-                      }} /> :<h5>{inputsValue.title}</h5>}
+                      value={inputsValue.title}
+                      onChange={(e) => {
+                        setInputsValue((prevValue) => ({
+                          ...prevValue,
+                          title: e.target.value,
+                        }));
+                      }}
+                    />
+                  ) : (
+                    <h5>{inputsValue.title}</h5>
+                  )}
                   <div className="content__description">
-                        {editOpen ? <input value={inputsValue.description} onChange={(e) => {
+                    {editOpen ? (
-                          setInputsValue((prevValue) => ({...prevValue, description: e.target.value}))
+                      <input
-                        }}/> :<p>{inputsValue.description}</p>}
+                        value={inputsValue.description}
-                        {/*<img src={task} className="image-task"></img>*/}
+                        onChange={(e) => {
+                          setInputsValue((prevValue) => ({
+                            ...prevValue,
+                            description: e.target.value,
+                          }));
+                        }}
+                      />
+                    ) : (
+                      <p>{inputsValue.description}</p>
+                    )}
                   </div>
                   <div className="content__communication">
                     <p className="tasks">
-                          <button
+                      <BaseButton
                         onClick={() => {
                           dispatch(modalToggle("addSubtask"));
                           setModalAddWorker(true);
                         }}
+                        styles={"button-green-add"}
                       >
-                            <img src={plus} alt='plus'></img>
+                        <img src={plus}></img>
                         Добавить под задачу
-                          </button>
+                      </BaseButton>
                     </p>
                     <p className="file">
                       <button>
-                            <img src={file} alt='file'></img>
+                        <img src={file} alt="file"></img>
                         Загрузить файл
                       </button>
                       <span>{0}</span>
@@ -339,14 +395,22 @@ export const TicketFullScreen = ({}) => {
                     </p>
                   </div>
                   <div className="content__input">
-                        <input placeholder="Оставить комментарий" value={inputsValue.comment} onChange={(e) => {
+                    <input
-                          setInputsValue((prevValue) => ({...prevValue, comment: e.target.value}))
+                      placeholder="Оставить комментарий"
-                        }} />
+                      value={inputsValue.comment}
-                        <img src={send} onClick={createComment} alt='send'></img>
+                      onChange={(e) => {
+                        setInputsValue((prevValue) => ({
+                          ...prevValue,
+                          comment: e.target.value,
+                        }));
+                      }}
+                    />
+                    <img src={send} onClick={createComment} alt="send"></img>
                   </div>
-                      <div className='comments__list'>
+                  <div className="comments__list">
                     {comments.map((comment) => {
-                          return <TrackerTaskComment
+                      return (
+                        <TrackerTaskComment
                           key={comment.id}
                           taskId={taskInfo.id}
                           comment={comment}
@@ -354,9 +418,8 @@ export const TicketFullScreen = ({}) => {
                           addSubComment={addSubComment}
                           subCommentDelete={subCommentDelete}
                         />
-                        })
+                      );
-
+                    })}
-                        }
                   </div>
                 </div>
               </div>
@@ -370,7 +433,7 @@ export const TicketFullScreen = ({}) => {
                       taskInfo.taskUsers.map((worker, index) => {
                         return (
                           <div className="worker" key={index}>
-                                    <img src={worker.avatar} alt='worket'></img>
+                            <img src={worker.avatar} alt="worket"></img>
                             <p>{worker.name}</p>
                           </div>
                         );
@@ -403,51 +466,62 @@ export const TicketFullScreen = ({}) => {
 
                 <div className="workers_box-middle">
                   <div className="time">
-                        <img src={watch} alt='watch'></img>
+                    <img src={watch} alt="watch"></img>
                     <span>Длительность : </span>
                     <p>{"0:00:00"}</p>
                   </div>
 
-                      {timerStart ?
+                  {timerStart ? (
                     <button className="stop" onClick={() => stopTaskTimer()}>
                       Остановить
                     </button>
-                          :
+                  ) : (
-                          <button className={taskInfo.executor_id === Number(localStorage.getItem('id')) ? 'start' : 'start disable'} onClick={() => startTaskTimer()}>
+                    <button
-                            Начать делать <img src={arrow2} alt='arrow'></img>
+                      className={
-                          </button>
+                        taskInfo.executor_id ===
+                        Number(localStorage.getItem("id"))
+                          ? "start"
+                          : "start disable"
                       }
+                      onClick={() => startTaskTimer()}
+                    >
+                      Начать делать <img src={arrow2} alt="arrow"></img>
+                    </button>
+                  )}
                 </div>
 
                 <div className="workers_box-bottom">
-                      <div className={editOpen ? 'edit' : ''} onClick={() => {
+                  <div
+                    className={editOpen ? "edit" : ""}
+                    onClick={() => {
                       if (editOpen) {
-                          setEditOpen(!editOpen)
+                        setEditOpen(!editOpen);
-                          editTask()
+                        editTask();
                       } else {
-                          setEditOpen(!editOpen)
+                        setEditOpen(!editOpen);
                       }
-                      }}>
+                    }}
-                        <img src={edit} alt='edit'></img>
+                  >
-                        <p>{editOpen ? 'сохранить' : 'редактировать'}</p>
+                    <img src={edit} alt="edit"></img>
+                    <p>{editOpen ? "сохранить" : "редактировать"}</p>
                   </div>
                   <div>
-                        <img src={link} alt='link'></img>
+                    <img src={link} alt="link"></img>
                     <p>ссылка на проект</p>
                   </div>
                   <div>
-                        <img src={archive2} alt='arch'></img>
+                    <img src={archive2} alt="arch"></img>
                     <p>в архив</p>
                   </div>
                   <div onClick={deleteTask}>
-                        <img src={del} alt='delete'></img>
+                    <img src={del} alt="delete"></img>
                     <p>удалить</p>
                   </div>
                 </div>
               </div>
             </div>
           </>
-          }
+        )}
       </div>
       <Footer />
     </section>

src/components/UI/ModalTicket/ModalTicket.jsx

@@ -1,484 +0,0 @@
-import React, {useEffect, useState} from "react";
-import { Link } from "react-router-dom";
-import TrackerModal from "../../../components/Modal/TrackerModal/TrackerModal";
-import TrackerTaskComment from "../../../components/TrackerTaskComment/TrackerTaskComment";
-import { apiRequest } from "../../../api/request";
-import { useDispatch } from "react-redux";
-import "./modalTicket.scss"
-import {
-  modalToggle,
-  setProjectBoardFetch,
-} from "../../../redux/projectsTrackerSlice";
-
-import category from "../../../assets/icons/category.svg";
-import watch from "../../../assets/icons/watch.svg";
-import file from "../../../assets/icons/fileModal.svg";
-import arrow from "../../../assets/icons/arrows/arrowStart.png";
-import link from "../../../assets/icons/link.svg";
-import archive from "../../../assets/icons/archive.svg";
-import del from "../../../assets/icons/delete.svg";
-import edit from "../../../assets/icons/edit.svg";
-import send from "../../../assets/icons/send.svg";
-import plus from "../../../assets/icons/plus.svg";
-import fullScreen from "../../../assets/icons/arrows/inFullScreen.svg";
-import close from "../../../assets/icons/closeProjectPersons.svg";
-
-import {urlForLocal, getCorrectRequestDate} from "../../../utils/helper";
-
-export const ModalTiсket = ({
-  active,
-  setActive,
-  task,
-  projectId,
-  projectName,
-  projectUsers
-}) => {
-  const dispatch = useDispatch();
-  const [addSubtask, setAddSubtask] = useState(false);
-  const [editOpen, setEditOpen] = useState(false);
-  const [inputsValue, setInputsValue] = useState({title: task.title, description: task.description, comment: ''});
-  const [comments, setComments] = useState([]);
-  const [dropListOpen, setDropListOpen] = useState(false)
-  const [dropListMembersOpen, setDropListMembersOpen] = useState(false)
-  const [executor, setExecutor] = useState(task.executor)
-  const [members, setMembers] = useState(task.taskUsers)
-  const [users, setUsers] = useState([])
-  const [timerStart, setTimerStart] = useState(false)
-  const [timerInfo, setTimerInfo] = useState({})
-  const [currentTimerCount, setCurrentTimerCount] = useState({
-    hours: 0,
-    minute: 0,
-    seconds: 0
-  })
-  const [timerId, setTimerId] = useState(null)
-
-  function deleteTask() {
-    apiRequest("/task/update-task", {
-      method: "PUT",
-      data: {
-        task_id: task.id,
-        status: 0,
-      },
-    }).then((res) => {
-      setActive(false);
-      dispatch(setProjectBoardFetch(projectId));
-    });
-  }
-
-  function editTask() {
-    apiRequest("/task/update-task", {
-      method: "PUT",
-      data: {
-        task_id: task.id,
-        title: inputsValue.title,
-        description: inputsValue.description
-      },
-    }).then((res) => {
-      dispatch(setProjectBoardFetch(projectId));
-    });
-  }
-
-  function createComment() {
-    apiRequest("/comment/create", {
-      method: "POST",
-      data: {
-        text: inputsValue.comment,
-        entity_type: 2,
-        entity_id: task.id
-      }
-    }).then((res) => {
-      let newComment = res
-      newComment.created_at = new Date()
-      newComment.subComments = []
-      setInputsValue((prevValue) => ({...prevValue, comment: ''}))
-      setComments((prevValue) => ([...prevValue, newComment]))
-    })
-  }
-
-  function commentDelete(comment) {
-    setComments((prevValue) => prevValue.filter((item) => item.id !== comment.id))
-    if (comment.subComments.length) {
-      // promiseAll
-      comment.subComments.forEach((subComment) => {
-        apiRequest("/comment/update", {
-          method: "PUT",
-          data: {
-            comment_id: subComment.id,
-            status: 0
-          }
-        }).then(() => {
-        })
-      })
-    }
-  }
-
-  function addSubComment(commentId, subComment) {
-    const addSubComment = comments
-    addSubComment.forEach((comment) => {
-      if (comment.id === commentId) {
-        comment.subComments.push(subComment)
-      }
-    })
-    setComments(addSubComment)
-  }
-
-  function subCommentDelete(subComment) {
-    const deleteSubComment = comments
-    deleteSubComment.forEach((comment, index) => {
-      if (comment.id === subComment.parent_id) {
-        deleteSubComment[index].subComments = comment.subComments.filter((item) => item.id !== subComment.id)
-      }
-    })
-    setComments([...deleteSubComment])
-  }
-
-  function startTaskTimer() {
-    apiRequest("/timer/create", {
-      method: "POST",
-      data: {
-        entity_type: 2,
-        entity_id: task.id,
-        created_at: getCorrectRequestDate(new Date())
-      }
-    }).then((res) => {
-      setTimerStart(true)
-      setTimerInfo(res)
-      startTimer()
-    })
-  }
-
-  function stopTaskTimer() {
-    apiRequest("/timer/update", {
-      method: "PUT",
-      data: {
-        timer_id: timerInfo.id,
-        stopped_at: getCorrectRequestDate(new Date())
-      }
-    }).then(() => {
-      setTimerStart(false)
-      clearInterval(timerId)
-    })
-  }
-
-  function taskExecutor(person) {
-    apiRequest("/task/update-task", {
-      method: "PUT",
-      data: {
-        task_id: task.id,
-        executor_id: person.user_id
-      },
-    }).then((res) => {
-      setDropListOpen(false)
-      setExecutor(res.executor)
-    });
-  }
-
-  function deleteTaskExecutor() {
-    apiRequest("/task/update-task", {
-      method: "PUT",
-      data: {
-        task_id: task.id,
-        executor_id: 0
-      },
-    }).then(() => {
-      setExecutor(null)
-    });
-  }
-
-  function addMember(person) {
-    apiRequest("/task/add-user-to-task", {
-      method: "POST",
-      data: {
-        task_id: task.id,
-        user_id: person.user_id
-      },
-    }).then((res) => {
-      setDropListMembersOpen(false)
-      setMembers((prevValue) => ([...prevValue, res]))
-    });
-  }
-
-  function deleteMember(person) {
-    apiRequest("/task/del-user", {
-      method: "DELETE",
-      data: {
-        task_id: task.id,
-        user_id: person.user_id
-      },
-    }).then(() => {
-      setMembers(members.filter((item) => item.user_id !== person.user_id))
-    });
-  }
-
-  useEffect(() => {
-    apiRequest(`/comment/get-by-entity?entity_type=2&entity_id=${task.id}`).then((res) => {
-      const comments = res.reduce((acc, cur) => {
-        if (!cur.parent_id) {
-          acc.push({...cur, subComments: []})
-        } else {
-          acc.forEach((item) => {
-            if (item.id === cur.parent_id) item.subComments.push(cur)
-          })
-        }
-        return acc
-      }, [])
-      setComments(comments)
-    })
-    apiRequest(`/timer/get-by-entity?entity_type=2&entity_id=${task.id}`).then((res) => {
-      let timerSeconds = 0
-      res.length && res.forEach((time) => {
-        timerSeconds += time.deltaSeconds
-        setCurrentTimerCount({
-          hours: Math.floor(timerSeconds / 60 / 60),
-          minute: Math.floor(timerSeconds / 60 % 60),
-          seconds: timerSeconds % 60}
-        )
-        updateTimerHours = Math.floor(timerSeconds / 60 / 60)
-        updateTimerMinute = Math.floor(timerSeconds / 60 % 60)
-        updateTimerSec = timerSeconds % 60
-        if (!time.stopped_at) {
-          setTimerStart(true)
-          startTimer()
-          setTimerInfo(time)
-        }
-      })
-    })
-  }, [])
-
-  function startTimer () {
-    setTimerId(setInterval(() => {
-      run()
-    }, 1000))
-  }
-
-  let updateTimerSec = currentTimerCount.seconds, updateTimerMinute = currentTimerCount.minute, updateTimerHours = currentTimerCount.hours
-
-  function run () {
-    updateTimerSec++
-    if (updateTimerSec > 60) {
-      updateTimerMinute++
-      updateTimerSec = 0
-    }
-    if (updateTimerMinute === 60) {
-      updateTimerMinute = 0
-      updateTimerHours++
-    }
-
-    return setCurrentTimerCount({
-      hours: updateTimerHours,
-      minute: updateTimerMinute,
-      seconds: updateTimerSec
-    })
-  }
-
-  function correctTimerTime (time) {
-    if (time < 10) return `0${time}`
-    if (time > 10) return time
-  }
-
-
-  useEffect(() => {
-    let ids = members.map((user) => user.user_id)
-    setUsers(projectUsers.reduce((acc, cur) => {
-      if (!ids.includes(cur.user_id)) acc.push(cur)
-      return acc
-    }, []))
-  }, [members])
-
-
-  return (
-    <div
-      className={active ? "modal-tiket active" : "modal-tiket"}
-      onClick={() => setActive(false)}
-    >
-      <div
-        className="modal-tiket__content"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div className="content">
-          <h3 className="title-project">
-            <img src={category} className="title-project__category"></img>
-            Проект: {projectName}
-            <Link
-              to={`/tracker/task/${task.id}`}
-              className="title-project__full"
-            >
-              <img src={fullScreen}></img>
-            </Link>
-          </h3>
-
-          <div className="content__task">
-            <span>Задача</span>
-            {editOpen ? <input value={inputsValue.title} onChange={(e) => {
-              setInputsValue((prevValue) => ({...prevValue, title: e.target.value}))
-            }} /> :<h5>{inputsValue.title}</h5>}
-            <div className="content__description">
-              {editOpen ? <input value={inputsValue.description} onChange={(e) => {
-                setInputsValue((prevValue) => ({...prevValue, description: e.target.value}))
-              }}/> :<p>{inputsValue.description}</p>}
-              {/*<img src={taskImg} className="image-task"></img>*/}
-            </div>
-            <div className="content__communication">
-              <p className="tasks">
-                <button
-                  onClick={() => {
-                    dispatch(modalToggle("addSubtask"));
-                    setAddSubtask(true);
-                  }}
-                >
-                  <img src={plus}></img>
-                  Добавить под задачу
-                </button>
-              </p>
-              <p className="file">
-                <button>
-                  <img src={file}></img>
-                  Загрузить файл
-                </button>
-                <span>{0}</span>
-                Файлов
-              </p>
-            </div>
-            <div className="content__input">
-              <input placeholder="Оставить комментарий" value={inputsValue.comment} onChange={(e) => {
-                setInputsValue((prevValue) => ({...prevValue, comment: e.target.value}))
-              }} />
-              <img src={send} onClick={createComment}></img>
-            </div>
-            <div className='comments__list'>
-              {comments.map((comment) => {
-                return <TrackerTaskComment
-                    key={comment.id}
-                    taskId={task.id}
-                    comment={comment}
-                    commentDelete={commentDelete}
-                    addSubComment={addSubComment}
-                    subCommentDelete={subCommentDelete}
-                />
-                })
-              }
-            </div>
-          </div>
-        </div>
-        <div className="workers">
-          <div className="workers_box task__info">
-            <span className="exit" onClick={() => setActive(false)}></span>
-            <span className='nameProject'>{task.title}</span>
-            <p className="workers__creator">Создатель : {task.user?.fio}</p>
-
-            {executor ?
-              <div className='executor'>
-                <p>Исполнитель: {executor.fio}</p>
-                <img src={urlForLocal(executor.avatar)} alt='avatar' />
-                <img src={close} className='delete' onClick={() => deleteTaskExecutor()} />
-              </div> :
-              <div className="add-worker moreItems ">
-                <button onClick={() => setDropListOpen(true)}>+</button>
-                <span>Добавить исполнителя</span>
-                {dropListOpen &&
-                  <div className='dropdownList'>
-                    <img src={close} className='dropdownList__close' onClick={() => setDropListOpen(false)} />
-                    {projectUsers.map((person) => {
-                      return <div className='dropdownList__person' key={person.user_id} onClick={() => taskExecutor(person)}>
-                        <span>{person.user.fio}</span>
-                        <img src={urlForLocal(person.user.avatar)} />
-                      </div>
-                    })
-                    }
-                  </div>
-                }
-              </div>
-            }
-
-            {Boolean(members.length) &&
-            <div className='members'>
-              <p>Участники:</p>
-                <div className='members__list'>
-                  {members.map((member) => {
-                    return <div className='worker' key={member.user_id}>
-                      <p>{member.fio}</p>
-                      <img src={urlForLocal(member.avatar)} />
-                      <img src={close} className='delete' onClick={() => deleteMember(member)} />
-                    </div>
-                  })
-                  }
-                </div>
-            </div>
-            }
-
-            <div className="add-worker moreItems">
-              <button onClick={() => setDropListMembersOpen(true)}>+</button>
-              <span>Добавить участников</span>
-              {dropListMembersOpen &&
-              <div className='dropdownList'>
-                <img src={close} className='dropdownList__close' onClick={() => setDropListMembersOpen(false)} />
-                {users.length ? users.map((person) => {
-                  return <div className='dropdownList__person' key={person.user_id} onClick={() => addMember(person)}>
-                    <span>{person.user.fio}</span>
-                    <img src={urlForLocal(person.user.avatar)} />
-                  </div>
-                }) : <p className='noUsers'>Нет пользователей</p>
-                }
-              </div>
-              }
-            </div>
-          </div>
-
-          <div className="workers_box-middle">
-            <div className="time">
-              <img src={watch}></img>
-              <span>Длительность : </span>
-              <p>
-                {correctTimerTime(currentTimerCount.hours)}:{correctTimerTime(currentTimerCount.minute)}:{correctTimerTime(currentTimerCount.seconds)}
-              </p>
-            </div>
-
-            {timerStart ?
-              <button className="stop" onClick={() => stopTaskTimer()}>
-                Остановить
-              </button>
-                :
-              <button className={task.executor_id === Number(localStorage.getItem('id')) ? 'start' : 'start disable'} onClick={() => startTaskTimer()}>
-                Начать делать <img src={arrow}></img>
-              </button>
-            }
-          </div>
-
-          <div className="workers_box-bottom">
-            <div className={editOpen ? 'edit' : ''} onClick={() => {
-              if(editOpen) {
-                setEditOpen(!editOpen)
-                editTask()
-              } else {
-                setEditOpen(!editOpen)
-              }
-            }}>
-              <img src={edit}></img>
-              <p>{editOpen ? 'сохранить' : 'редактировать'}</p>
-            </div>
-            <div>
-              <img src={link}></img>
-              <p>ссылка на проект</p>
-            </div>
-            <div onClick={deleteTask}>
-              <img src={archive}></img>
-              <p>в архив</p>
-            </div>
-            <div onClick={deleteTask}>
-              <img src={del}></img>
-              <p>удалить</p>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <TrackerModal
-        active={addSubtask}
-        setActive={setAddSubtask}
-        defautlInput={task.column_id}
-      ></TrackerModal>
-    </div>
-  );
-};
-
-export default ModalTiсket;

src/components/UI/TicketFullScreen/TicketFullScreen.jsx

@@ -1,456 +0,0 @@
-import React, { useEffect, useState } from "react";
-
-import { ProfileHeader } from "../../ProfileHeader/ProfileHeader";
-import { ProfileBreadcrumbs } from "../../ProfileBreadcrumbs/ProfileBreadcrumbs";
-import { Footer } from "@components/Common/Footer/Footer";
-import { Link, useParams, useNavigate } from "react-router-dom";
-import TrackerModal from "../../Modal/TrackerModal/TrackerModal";
-import TrackerTaskComment from "../../../components/TrackerTaskComment/TrackerTaskComment";
-import { Navigation } from "../../Navigation/Navigation";
-import {Loader} from "@components/Common/Loader/Loader";
-
-import {useDispatch, useSelector} from "react-redux";
-import {
-  deletePersonOnProject,
-  modalToggle,
-  setProjectBoardFetch,
-  setToggleTab,
-  getProjectBoard,
-  getBoarderLoader,
-} from "../../../redux/projectsTrackerSlice";
-import { apiRequest } from "../../../api/request";
-
-import project from "../../../images/trackerProject.svg";
-import watch from "../../../images/watch.png";
-import file from "../../../images/fileModal.svg";
-import send from "../../../images/send.svg";
-import arrow2 from "../../../images/arrowStart.png";
-import plus from "../../../images/plus.svg";
-import tasks from "../../../images/trackerTasks.svg";
-import archive from "../../../images/archiveTracker.svg";
-import arrow from "../../../images/arrowCalendar.png";
-import link from "../../../images/link.svg";
-import archive2 from "../../../images/archive.svg";
-import del from "../../../images/delete.svg";
-import edit from "../../../images/edit.svg";
-import close from "../../../images/closeProjectPersons.svg";
-
-import "./ticketFullScreen.scss";
-import {getCorrectRequestDate, urlForLocal} from "../../../helper";
-
-export const TicketFullScreen = ({}) => {
-  const [modalAddWorker, setModalAddWorker] = useState(false);
-  const ticketId = useParams();
-  const dispatch = useDispatch();
-  const navigate = useNavigate();
-  const projectBoard = useSelector(getProjectBoard);
-  const boardLoader = useSelector(getBoarderLoader);
-  const [taskInfo, setTaskInfo] = useState({});
-  const [editOpen, setEditOpen] = useState(false);
-  const [inputsValue, setInputsValue] = useState({});
-  const [loader, setLoader] = useState(true);
-  const [comments, setComments] = useState([]);
-  const [personListOpen, setPersonListOpen] = useState(false)
-  const [timerStart, setTimerStart] = useState(false)
-  const [timerInfo, setTimerInfo] = useState({})
-
-  useEffect(() => {
-    apiRequest(`/task/get-task?task_id=${ticketId.id}`).then((taskInfo) => {
-      setTaskInfo(taskInfo);
-      setInputsValue({title: taskInfo.title, description: taskInfo.description, comment: ''})
-      apiRequest(`/comment/get-by-entity?entity_type=2&entity_id=${taskInfo.id}`).then((res) => {
-        const comments = res.reduce((acc, cur) => {
-          if (!cur.parent_id) {
-            acc.push({...cur, subComments: []})
-          } else {
-            acc.forEach((item) => {
-              if (item.id === cur.parent_id) item.subComments.push(cur)
-            })
-          }
-          return acc
-        }, [])
-        setComments(comments)
-      })
-      taskInfo.timers.forEach((time) => {
-        if (!time.stopped_at) {
-          setTimerStart(true)
-          setTimerInfo(time)
-        }
-      })
-      dispatch(setProjectBoardFetch(taskInfo.project_id));
-      setLoader(boardLoader)
-    });
-  }, []);
-
-  function deleteTask() {
-    apiRequest("/task/update-task", {
-      method: "PUT",
-      data: {
-        task_id: ticketId.id,
-        status: 0,
-      },
-    }).then((res) => {
-      navigate(`/tracker/project/${taskInfo.project_id}`);
-    });
-  }
-
-  function editTask() {
-    apiRequest("/task/update-task", {
-      method: "PUT",
-      data: {
-        task_id: taskInfo.id,
-        title: inputsValue.title,
-        description: inputsValue.description
-      },
-    }).then(() => {
-    });
-  }
-
-  function createComment() {
-    apiRequest("/comment/create", {
-      method: "POST",
-      data: {
-        text: inputsValue.comment,
-        entity_type: 2,
-        entity_id: taskInfo.id
-      }
-    }).then((res) => {
-      let newComment = res
-      newComment.created_at = new Date()
-      newComment.subComments = []
-      setInputsValue((prevValue) => ({...prevValue, comment: ''}))
-      setComments((prevValue) => ([...prevValue, newComment]))
-    })
-  }
-
-  function startTaskTimer() {
-    apiRequest("/timer/create", {
-      method: "POST",
-      data: {
-        entity_type: 2,
-        entity_id: taskInfo.id,
-        created_at: getCorrectRequestDate(new Date())
-      }
-    }).then((res) => {
-      setTimerStart(true)
-      setTimerInfo(res)
-    })
-  }
-
-  function stopTaskTimer() {
-    apiRequest("/timer/update", {
-      method: "PUT",
-      data: {
-        timer_id: timerInfo.id,
-        stopped_at: getCorrectRequestDate(new Date())
-      }
-    }).then(() => setTimerStart(false))
-  }
-
-  function deletePerson(userId) {
-    apiRequest("/project/del-user", {
-      method: "DELETE",
-      data: {
-        project_id: projectBoard.id,
-        user_id: userId
-      },
-    }).then((res) => {
-      dispatch(deletePersonOnProject(userId))
-    });
-  }
-
-  function commentDelete(comment) {
-    setComments((prevValue) => prevValue.filter((item) => item.id !== comment.id))
-    if (comment.subComments.length) {
-      comment.subComments.forEach((subComment) => {
-        apiRequest("/comment/update", {
-          method: "PUT",
-          data: {
-            comment_id: subComment.id,
-            status: 0
-          }
-        }).then(() => {
-        })
-      })
-    }
-  }
-
-  function addSubComment(commentId, subComment) {
-    const addSubComment = comments
-    addSubComment.forEach((comment) => {
-      if (comment.id === commentId) {
-        comment.subComments.push(subComment)
-      }
-    })
-    setComments(addSubComment)
-  }
-
-  function subCommentDelete(subComment) {
-    const deleteSubComment = comments
-    deleteSubComment.forEach((comment, index) => {
-      if (comment.id === subComment.parent_id) {
-        deleteSubComment[index].subComments = comment.subComments.filter((item) => item.id !== subComment.id)
-      }
-    })
-    setComments([...deleteSubComment])
-  }
-
-  const toggleTabs = (index) => {
-    dispatch(setToggleTab(index));
-  };
-
-  return (
-    <section className="ticket-full-screen">
-      <ProfileHeader />
-      <Navigation />
-      <div className="container">
-        <div className="tracker__content">
-          <ProfileBreadcrumbs
-            links={[
-              { name: "Главная", link: "/profile" },
-              { name: "Трекер", link: "/profile/tracker" },
-            ]}
-          />
-          <h2 className="tracker__title">Управление проектами с трекером</h2>
-        </div>
-      </div>
-      <div className="tracker__tabs">
-        <div className="tracker__tabs__head">
-          <Link
-            to="/profile/tracker"
-            className="tab active-tab"
-            onClick={() => toggleTabs(1)}
-          >
-            <img src={project} alt="img" />
-            <p>Проекты </p>
-          </Link>
-          <Link
-            to="/profile/tracker"
-            className="tab"
-            onClick={() => toggleTabs(2)}
-          >
-            <img src={tasks} alt="img" />
-            <p>Все мои задачи</p>
-          </Link>
-          <Link
-            to="/profile/tracker"
-            className="tab"
-            onClick={() => toggleTabs(3)}
-          >
-            <img src={archive} alt="img" />
-            <p>Архив</p>
-          </Link>
-        </div>
-        {loader ? <Loader /> :
-        <>
-        <div className="tracker__tabs__content content-tabs">
-          <div className="tasks__head">
-            <div className="tasks__head__wrapper">
-              <h4>Проект : {projectBoard.name}</h4>
-
-              <TrackerModal
-                active={modalAddWorker}
-                setActive={setModalAddWorker}
-              ></TrackerModal>
-
-              <div className="tasks__head__persons">
-                {/*<img src={avatarTest} alt="avatar" />*/}
-                {/*<img src={avatarTest} alt="avatar" />*/}
-                <span className="countPersons">{projectBoard.projectUsers?.length}</span>
-                <span
-                  className="addPerson"
-                  onClick={() => {
-                    setPersonListOpen(true)
-                  }}
-                >
-                  +
-                </span>
-                <p>добавить участника</p>
-                {personListOpen &&
-                <div className='persons__list'>
-                  <img className='persons__list__close' src={close} alt='close' onClick={() => setPersonListOpen(false)} />
-                  <div className='persons__list__count'><span>{projectBoard.projectUsers?.length}</span>участник</div>
-                  <div className='persons__list__info'>В проекте - <span>“{projectBoard.name}”</span></div>
-                  <div className='persons__list__items'>
-                    {projectBoard.projectUsers?.map((person) => {
-                      return <div className='persons__list__item' key={person.user_id}>
-                        <img className='avatar' src={urlForLocal(person.user.avatar)} alt='avatar' />
-                        <span>{person.user.fio}</span>
-                        <img className='delete' src={close} alt='delete' onClick={() => deletePerson(person.user_id)}/>
-                      </div>
-                    })
-                    }
-                  </div>
-                  <div className='persons__list__add'
-                       onClick={() => {
-                         dispatch(modalToggle("addWorker"));
-                         setModalAddWorker(true);
-                         setPersonListOpen(false)
-                       }}
-                  >
-                    <span className='addPerson'>+</span>
-                    <p>Добавить участников</p>
-                  </div>
-                </div>
-                }
-              </div>
-              <Link to={`/profile/tracker`} className="link">
-                <div className="tasks__head__back">
-                  <p>Вернуться на проекты</p>
-                  <img src={arrow} alt="arrow" />
-                </div>
-              </Link>
-            </div>
-          </div>
-        </div>
-        <div className="modal-tiket__content ticket">
-          <div className="content ticket-whith">
-            <div className="content__task">
-              <span>Задача</span>
-              {editOpen ? <input value={inputsValue.title} onChange={(e) => {
-                setInputsValue((prevValue) => ({...prevValue, title: e.target.value}))
-              }} /> :<h5>{inputsValue.title}</h5>}
-              <div className="content__description">
-                {editOpen ? <input value={inputsValue.description} onChange={(e) => {
-                  setInputsValue((prevValue) => ({...prevValue, description: e.target.value}))
-                }}/> :<p>{inputsValue.description}</p>}
-                {/*<img src={task} className="image-task"></img>*/}
-              </div>
-              <div className="content__communication">
-                <p className="tasks">
-                  <button
-                    onClick={() => {
-                      dispatch(modalToggle("addSubtask"));
-                      setModalAddWorker(true);
-                    }}
-                  >
-                    <img src={plus}></img>
-                    Добавить под задачу
-                  </button>
-                </p>
-                <p className="file">
-                  <button>
-                    <img src={file}></img>
-                    Загрузить файл
-                  </button>
-                  <span>{0}</span>
-                  Файлов
-                </p>
-              </div>
-              <div className="content__input">
-                <input placeholder="Оставить комментарий" value={inputsValue.comment} onChange={(e) => {
-                  setInputsValue((prevValue) => ({...prevValue, comment: e.target.value}))
-                }} />
-                <img src={send} onClick={createComment}></img>
-              </div>
-              <div className='comments__list'>
-                {comments.map((comment) => {
-                  return <TrackerTaskComment
-                      key={comment.id}
-                      taskId={taskInfo.id}
-                      comment={comment}
-                      commentDelete={commentDelete}
-                      addSubComment={addSubComment}
-                      subCommentDelete={subCommentDelete}
-                  />
-                })
-
-                }
-              </div>
-            </div>
-          </div>
-          <div className="workers">
-            <div className="workers_box">
-              <p className="workers__creator">
-                Создатель : <span>{taskInfo.user?.fio}</span>
-              </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">
-                <button
-                    onClick={() => {
-                      dispatch(modalToggle("addWorker"));
-                      setModalAddWorker(true);
-                    }}
-                >
-                  +
-                </button>
-                <span>Добавить исполнителя</span>
-              </div>
-              <div className="add-worker moreItems">
-                <button
-                  onClick={() => {
-                    dispatch(modalToggle("addWorker"));
-                    setModalAddWorker(true);
-                  }}
-                >
-                  +
-                </button>
-                <span>Добавить участников</span>
-              </div>
-            </div>
-
-            <div className="workers_box-middle">
-              <div className="time">
-                <img src={watch}></img>
-                <span>Длительность : </span>
-                <p>{"0:00:00"}</p>
-              </div>
-
-              {timerStart ?
-                  <button className="stop" onClick={() => stopTaskTimer()}>
-                    Остановить
-                  </button>
-                  :
-                  <button className={taskInfo.executor_id === Number(localStorage.getItem('id')) ? 'start' : 'start disable'} onClick={() => startTaskTimer()}>
-                    Начать делать <img src={arrow2}></img>
-                  </button>
-              }
-            </div>
-
-            <div className="workers_box-bottom">
-              <div className={editOpen ? 'edit' : ''} onClick={() => {
-                if(editOpen) {
-                  setEditOpen(!editOpen)
-                  editTask()
-                } else {
-                  setEditOpen(!editOpen)
-                }
-              }}>
-                <img src={edit}></img>
-                <p>{editOpen ? 'сохранить' : 'редактировать'}</p>
-              </div>
-              <div>
-                <img src={link}></img>
-                <p>ссылка на проект</p>
-              </div>
-              <div>
-                <img src={archive2}></img>
-                <p>в архив</p>
-              </div>
-              <div onClick={deleteTask}>
-                <img src={del}></img>
-                <p>удалить</p>
-              </div>
-            </div>
-          </div>
-        </div>
-        </>
-        }
-      </div>
-      <Footer />
-    </section>
-  );
-};
-
-export default TicketFullScreen;

src/pages/ProjectTracker/ProjectTracker.js

@@ -1,44 +1,46 @@
 import React, { useEffect, useRef, useState } from "react";
-import { Link, useParams } from "react-router-dom";
-import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
-import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
-import { Footer } from "@components/Common/Footer/Footer";
-import { Navigation } from "../../components/Navigation/Navigation";
-import { Loader } from "@components/Common/Loader/Loader";
-import { urlForLocal } from '../../utils/helper'
-
 import { useDispatch, useSelector } from "react-redux";
-import { apiRequest } from "../../api/request";
+import { Link, useParams } from "react-router-dom";
+
 import {
-  getProjectBoard,
-  getBoarderLoader,
-  modalToggle,
-  moveProjectTask,
-  setProjectBoardFetch,
-  setToggleTab,
   activeLoader,
-  setColumnName,
-  setColumnId,
-  setColumnPriority,
   deletePersonOnProject,
   filterCreatedByMe,
   filteredParticipateTasks,
-  movePositionProjectTask
+  getBoarderLoader,
-} from "../../redux/projectsTrackerSlice";
+  getProjectBoard,
+  modalToggle,
+  movePositionProjectTask,
+  moveProjectTask,
+  setColumnId,
+  setColumnName,
+  setColumnPriority,
+  setProjectBoardFetch,
+  setToggleTab,
+} from "@redux/projectsTrackerSlice";
 
-import ModalTicket from "../../components/UI/ModalTicket/ModalTicket";
+import { urlForLocal } from "@utils/helper";
-import TrackerModal from "../../components/Modal/TrackerModal/TrackerModal";
 
-import project from "../../assets/icons/trackerProject.svg";
+import { apiRequest } from "@api/request";
-import tasks from "../../assets/icons/trackerTasks.svg";
+
-import archive from "../../assets/icons/archiveTracker.svg";
+import { Footer } from "@components/Common/Footer/Footer";
-import commentsBoard from "../../assets/icons/commentsBoard.svg";
+import { Loader } from "@components/Common/Loader/Loader";
-import filesBoard from "../../assets/icons/filesBoard.svg";
+import ModalTicket from "@components/Modal/Tracker/ModalTicket/ModalTicket";
-import arrow from "../../assets/icons/arrows/arrowCalendar.png";
+import TrackerModal from "@components/Modal/TrackerModal/TrackerModal";
-import del from "../../assets/icons/delete.svg";
+import { Navigation } from "@components/Navigation/Navigation";
-import edit from "../../assets/icons/edit.svg";
+import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
-import close from "../../assets/icons/close.png"
+import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
-import accept from "../../assets/images/accept.png";
+
+import archive from "assets/icons/archiveTracker.svg";
+import arrow from "assets/icons/arrows/arrowCalendar.png";
+import close from "assets/icons/close.png";
+import commentsBoard from "assets/icons/commentsBoard.svg";
+import del from "assets/icons/delete.svg";
+import edit from "assets/icons/edit.svg";
+import filesBoard from "assets/icons/filesBoard.svg";
+import project from "assets/icons/trackerProject.svg";
+import tasks from "assets/icons/trackerTasks.svg";
+import accept from "assets/images/accept.png";
 
 export const ProjectTracker = () => {
   const dispatch = useDispatch();
@@ -48,13 +50,14 @@ export const ProjectTracker = () => {
   const [selectedTab, setSelectedTab] = useState(0);
   const [priorityTask, setPriorityTask] = useState(0);
   const [wrapperHover, setWrapperHover] = useState({});
-  const [taskHover, setTaskHover] = useState({})
+  const [taskHover, setTaskHover] = useState({});
   const [modalAdd, setModalAdd] = useState(false);
   const [modalActiveTicket, setModalActiveTicket] = useState(false);
   const [selectedTicket, setSelectedTicket] = useState({});
-  const [personListOpen, setPersonListOpen] = useState(false)
+  const [personListOpen, setPersonListOpen] = useState(false);
-  const [checkBoxParticipateTasks, setCheckBoxParticipateTasks] = useState(false)
+  const [checkBoxParticipateTasks, setCheckBoxParticipateTasks] =
-  const [checkBoxMyTasks, setCheckBoxMyTasks] = useState(false)
+    useState(false);
+  const [checkBoxMyTasks, setCheckBoxMyTasks] = useState(false);
   const startWrapperIndexTest = useRef({});
   const projectBoard = useSelector(getProjectBoard);
   const loader = useSelector(getBoarderLoader);
@@ -65,20 +68,20 @@ export const ProjectTracker = () => {
   }, []);
 
   useEffect(() => {
-    const tasksHover = {}
+    const tasksHover = {};
-    const columnHover = {}
+    const columnHover = {};
     if (Object.keys(projectBoard).length) {
       projectBoard.columns.forEach((column) => {
         setOpenColumnSelect((prevState) => ({
           ...prevState,
           [column.id]: false,
         }));
-        columnHover[column.id] = false
+        columnHover[column.id] = false;
-        column.tasks.forEach(task => tasksHover[task.id] = false)
+        column.tasks.forEach((task) => (tasksHover[task.id] = false));
       });
     }
-    setWrapperHover(columnHover)
+    setWrapperHover(columnHover);
-    setTaskHover(tasksHover)
+    setTaskHover(tasksHover);
   }, [projectBoard]);
 
   function dragStartHandler(e, task, columnId) {
@@ -86,35 +89,37 @@ export const ProjectTracker = () => {
   }
 
   function dragOverTaskHandler(e, task) {
-    e.preventDefault()
+    e.preventDefault();
     if (startWrapperIndexTest.current.task.id === task.id) {
-      return
+      return;
     }
-    setTaskHover((prevState) => ({[prevState]: false, [task.id]: true}))
+    setTaskHover((prevState) => ({ [prevState]: false, [task.id]: true }));
   }
 
-  function dragLeaveTaskHandler(e) {
+  function dragLeaveTaskHandler() {
-    setTaskHover((prevState) => ({[prevState]: false}))
+    setTaskHover((prevState) => ({ [prevState]: false }));
   }
 
   function dragEndTaskHandler() {
-    setTaskHover((prevState) => ({[prevState]: false}))
+    setTaskHover((prevState) => ({ [prevState]: false }));
     setWrapperHover((prevState) => ({
       [prevState]: false,
     }));
   }
 
   function dragDropTaskHandler(e, task, column) {
-    e.preventDefault()
+    e.preventDefault();
     if (task.id === startWrapperIndexTest.current.task.id) {
-      return
+      return;
     }
-    const finishTask = column.tasks.indexOf(task)
+    const finishTask = column.tasks.indexOf(task);
-    dispatch(movePositionProjectTask({
+    dispatch(
+      movePositionProjectTask({
         startTask: startWrapperIndexTest.current.task,
         finishTask: task,
-      finishIndex: finishTask
+        finishIndex: finishTask,
-    }))
+      })
+    );
   }
 
   function dragOverHandler(e) {
@@ -139,9 +144,10 @@ export const ProjectTracker = () => {
       [prevState]: false,
     }));
 
-    if (startWrapperIndexTest.current.index === columnId
+    if (
-        ||
+      startWrapperIndexTest.current.index === columnId ||
-        e.target.className.includes('__item')) {
+      e.target.className.includes("__item")
+    ) {
       return;
     }
 
@@ -159,7 +165,7 @@ export const ProjectTracker = () => {
     setSelectedTab(columnId);
     dispatch(modalToggle("createTiketProject"));
     setModalAdd(true);
-    setPriorityTask(length)
+    setPriorityTask(length);
   }
 
   function openTicket(e, task) {
@@ -168,7 +174,7 @@ export const ProjectTracker = () => {
   }
 
   function deleteColumn(column) {
-    const priorityColumns = []
+    const priorityColumns = [];
     apiRequest("/project-column/update-column", {
       method: "PUT",
       data: {
@@ -181,19 +187,19 @@ export const ProjectTracker = () => {
         for (let i = column.priority; i < projectBoard.columns.length; i++) {
           const currentColumn = {
             column_id: projectBoard.columns[i].id,
-            priority: i
+            priority: i,
-          }
+          };
-          priorityColumns.push(currentColumn)
+          priorityColumns.push(currentColumn);
         }
         apiRequest("/project-column/set-priority", {
           method: "POST",
           data: {
             project_id: projectBoard.id,
-            data: JSON.stringify(priorityColumns)
+            data: JSON.stringify(priorityColumns),
-          }
+          },
         }).then(() => {
           dispatch(setProjectBoardFetch(projectBoard.id));
-        })
+        });
       } else {
         dispatch(setProjectBoardFetch(projectBoard.id));
       }
@@ -205,33 +211,33 @@ export const ProjectTracker = () => {
       method: "DELETE",
       data: {
         project_id: projectBoard.id,
-        user_id: userId
+        user_id: userId,
       },
     }).then(() => {
-      dispatch(deletePersonOnProject(userId))
+      dispatch(deletePersonOnProject(userId));
     });
   }
 
   function filterParticipateTasks() {
     if (!checkBoxParticipateTasks) {
-      dispatch(filteredParticipateTasks(Number(localStorage.getItem('id'))))
+      dispatch(filteredParticipateTasks(Number(localStorage.getItem("id"))));
     } else {
-      dispatch(setProjectBoardFetch(projectId.id))
+      dispatch(setProjectBoardFetch(projectId.id));
-      setCheckBoxParticipateTasks(false)
+      setCheckBoxParticipateTasks(false);
-      setCheckBoxMyTasks(false)
+      setCheckBoxMyTasks(false);
     }
-    setCheckBoxParticipateTasks(!checkBoxParticipateTasks)
+    setCheckBoxParticipateTasks(!checkBoxParticipateTasks);
   }
 
   function filterMyTask() {
     if (!checkBoxMyTasks) {
-      dispatch(filterCreatedByMe(Number(localStorage.getItem('id'))))
+      dispatch(filterCreatedByMe(Number(localStorage.getItem("id"))));
     } else {
-      dispatch(setProjectBoardFetch(projectId.id))
+      dispatch(setProjectBoardFetch(projectId.id));
-      setCheckBoxParticipateTasks(false)
+      setCheckBoxParticipateTasks(false);
-      setCheckBoxMyTasks(false)
+      setCheckBoxMyTasks(false);
     }
-    setCheckBoxMyTasks(!checkBoxMyTasks)
+    setCheckBoxMyTasks(!checkBoxMyTasks);
   }
 
   return (
@@ -303,58 +309,85 @@ export const ProjectTracker = () => {
                     <p>добавить колонку</p>
                   </div>
                   <div className="tasks__head__persons">
-                    <span className="countPersons">{projectBoard.projectUsers?.length}</span>
+                    <span className="countPersons">
+                      {projectBoard.projectUsers?.length}
+                    </span>
                     <span
                       className="addPerson"
                       onClick={() => {
-                        setPersonListOpen(true)
+                        setPersonListOpen(true);
                       }}
                     >
                       +
                     </span>
                     <p>добавить участника</p>
-                    {personListOpen &&
+                    {personListOpen && (
-                    <div className='persons__list'>
+                      <div className="persons__list">
-                      <img className='persons__list__close' src={close} alt='close' onClick={() => setPersonListOpen(false)} />
+                        <img
-                      <div className='persons__list__count'><span>{projectBoard.projectUsers?.length}</span>участник</div>
+                          className="persons__list__close"
-                      <div className='persons__list__info'>В проекте - <span>“{projectBoard.name}”</span></div>
+                          src={close}
-                      <div className='persons__list__items'>
+                          alt="close"
+                          onClick={() => setPersonListOpen(false)}
+                        />
+                        <div className="persons__list__count">
+                          <span>{projectBoard.projectUsers?.length}</span>
+                          участник
+                        </div>
+                        <div className="persons__list__info">
+                          В проекте - <span>“{projectBoard.name}”</span>
+                        </div>
+                        <div className="persons__list__items">
                           {projectBoard.projectUsers?.map((person) => {
-                          return <div className='persons__list__item' key={person.user_id}>
+                            return (
-                                    <img className='avatar' src={urlForLocal(person.user.avatar)} alt='avatar' />
+                              <div
+                                className="persons__list__item"
+                                key={person.user_id}
+                              >
+                                <img
+                                  className="avatar"
+                                  src={urlForLocal(person.user.avatar)}
+                                  alt="avatar"
+                                />
                                 <span>{person.user.fio}</span>
-                                    <img className='delete' src={close} alt='delete' onClick={() => deletePerson(person.user_id)}/>
+                                <img
+                                  className="delete"
+                                  src={close}
+                                  alt="delete"
+                                  onClick={() => deletePerson(person.user_id)}
+                                />
                               </div>
-                        })
+                            );
-                        }
+                          })}
                         </div>
-                      <div className='persons__list__add'
+                        <div
+                          className="persons__list__add"
                           onClick={() => {
                             dispatch(modalToggle("addWorker"));
                             setModalAdd(true);
-                             setPersonListOpen(false)
+                            setPersonListOpen(false);
                           }}
                         >
-                        <span className='addPerson'>+</span>
+                          <span className="addPerson">+</span>
                           <p>Добавить участников</p>
                         </div>
                       </div>
-                    }
+                    )}
                   </div>
-                  <div className="tasks__head__checkBox" onClick={filterParticipateTasks}>
+                  <div
+                    className="tasks__head__checkBox"
+                    onClick={filterParticipateTasks}
+                  >
                     <span>Участвую</span>
                     <div className="tasks__head__checkBox__box">
-                      {checkBoxParticipateTasks &&
+                      {checkBoxParticipateTasks && (
-                        <img src={accept} alt='accept' />
+                        <img src={accept} alt="accept" />
-                      }
+                      )}
                     </div>
                   </div>
                   <div className="tasks__head__checkBox" onClick={filterMyTask}>
                     <span>Мои</span>
                     <div className="tasks__head__checkBox__box">
-                      {checkBoxMyTasks &&
+                      {checkBoxMyTasks && <img src={accept} alt="accept" />}
-                          <img src={accept} alt='accept' />
-                      }
                     </div>
                   </div>
                   <Link to="/profile/tracker" className="tasks__head__back">
@@ -364,14 +397,16 @@ export const ProjectTracker = () => {
                 </div>
               </div>
 
-              {Boolean(modalActiveTicket) && <ModalTicket
+              {Boolean(modalActiveTicket) && (
+                <ModalTicket
                   active={modalActiveTicket}
                   setActive={setModalActiveTicket}
                   task={selectedTicket}
                   projectId={projectBoard.id}
                   projectName={projectBoard.name}
                   projectUsers={projectBoard.projectUsers}
-              />}
+                />
+              )}
 
               <div className="tasks__container">
                 {Boolean(projectBoard?.columns) &&
@@ -381,7 +416,7 @@ export const ProjectTracker = () => {
                       <div
                         key={column.id}
                         onDragOver={(e) => dragOverHandler(e)}
-                        onDragEnter={(e) => dragEnterHandler(column.id)}
+                        onDragEnter={() => dragEnterHandler(column.id)}
                         onDrop={(e) => dragDropHandler(e, column.id)}
                         className={`tasks__board ${
                           wrapperHover[column.id] ? "tasks__board__hover" : ""
@@ -392,7 +427,9 @@ export const ProjectTracker = () => {
                           <div>
                             <span
                               className="add"
-                              onClick={() => selectedTabTask(column.id, column.tasks.length)}
+                              onClick={() =>
+                                selectedTabTask(column.id, column.tasks.length)
+                              }
                             >
                               +
                             </span>
@@ -419,9 +456,9 @@ export const ProjectTracker = () => {
                                   [column.id]: false,
                                 }));
                                 dispatch(modalToggle("editColumn"));
-                                dispatch(setColumnName(column.title))
+                                dispatch(setColumnName(column.title));
-                                dispatch(setColumnId(column.id))
+                                dispatch(setColumnId(column.id));
-                                dispatch(setColumnPriority(column.priority))
+                                dispatch(setColumnPriority(column.priority));
                                 setModalAdd(true);
                               }}
                             >
@@ -445,15 +482,21 @@ export const ProjectTracker = () => {
                                 taskHover[task.id] ? "task__hover" : ""
                               }`}
                               draggable={true}
-                              onDragStart={(e) => dragStartHandler(e, task, column.id)}
+                              onDragStart={(e) =>
+                                dragStartHandler(e, task, column.id)
+                              }
                               onDragOver={(e) => dragOverTaskHandler(e, task)}
                               onDragLeave={(e) => dragLeaveTaskHandler(e)}
-                              onDragEnd={(e) => dragEndTaskHandler()}
+                              onDragEnd={() => dragEndTaskHandler()}
-                              onDrop={(e) => dragDropTaskHandler(e, task, column)}
+                              onDrop={(e) =>
+                                dragDropTaskHandler(e, task, column)
+                              }
                               onClick={(e) => openTicket(e, task)}
                             >
                               <div className="tasks__board__item__title">
-                                <p className='task__board__item__title'>{task.title}</p>
+                                <p className="task__board__item__title">
+                                  {task.title}
+                                </p>
                               </div>
                               <p className="tasks__board__item__description">
                                 {task.description}