Merge pull request #98 from apuc/tracker-connect-back

Tracker connect back

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

@@ -63,22 +63,111 @@
       .comments__list {
         display: flex;
         flex-direction: column;
-        row-gap: 10px;
+        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;
-          background: #f1f1f1;
           border-radius: 44px;
           font-size: 14px;
           width: 100%;
-          row-gap: 10px;
+          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: center;
+            justify-content: space-between;
-            column-gap: 15px;
 
             .edit {
               width: 25px;
@@ -91,10 +180,36 @@
             .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;
-              width: 15px;
+              }
+
+              input {
+                width: 90%;
+                border: none;
+              }
             }
           }
         }
@@ -289,14 +404,28 @@
       color: white;
       background: #1458dd;
       border-radius: 44px;
-      opacity: 0.5;
-      pointer-events: none;
 
       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;

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

@@ -1,48 +1,45 @@
 import React, { useEffect, useState } from "react";
-import { useDispatch, useSelector } from "react-redux";
-import { Link, useNavigate, useParams } from "react-router-dom";
 
+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 {
   deletePersonOnProject,
-  getBoarderLoader,
-  getProjectBoard,
   modalToggle,
   setProjectBoardFetch,
   setToggleTab,
-} from "@redux/projectsTrackerSlice";
+  getProjectBoard,
+  getBoarderLoader,
+} from "../../../../redux/projectsTrackerSlice";
+import { apiRequest } from "../../../../api/request";
 
-import { urlForLocal } from "@utils/helper";
+import project from "../../../../assets/icons/trackerProject.svg";
-
+import watch from "../../../../assets/icons/watch.svg";
-import { apiRequest } from "@api/request";
+import file from "../../../../assets/icons/fileModal.svg";
-
+import send from "../../../../assets/icons/send.svg";
-import { getCorrectDate } from "@components/Calendar/calendarHelper";
+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 edit from "../../../../assets/icons/edit.svg";
-import archive2 from "assets/icons/archive.svg";
+import close from "../../../../assets/icons/close.png";
-import archive from "assets/icons/archiveTracker.svg";
-import arrow from "assets/icons/arrows/arrowCalendar.png";
-import arrow2 from "assets/icons/arrows/arrowStart.png";
-import selectArrow from "assets/icons/arrows/select.svg";
-import close from "assets/icons/closeProjectPersons.svg";
-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";
 
-export const TicketFullScreen = () => {
+import {getCorrectRequestDate, urlForLocal} from "../../../../utils/helper";
+
+export const TicketFullScreen = ({}) => {
   const [modalAddWorker, setModalAddWorker] = useState(false);
   const ticketId = useParams();
   const dispatch = useDispatch();
@@ -54,35 +51,35 @@ export const TicketFullScreen = () => {
   const [inputsValue, setInputsValue] = useState({});
   const [loader, setLoader] = useState(true);
   const [comments, setComments] = useState([]);
-  const [commentsEditOpen, setCommentsEditOpen] = useState({});
+  const [personListOpen, setPersonListOpen] = useState(false)
-  const [commentsEditText, setCommentsEditText] = useState({});
+  const [timerStart, setTimerStart] = useState(false)
-  const [personListOpen, setPersonListOpen] = useState(false);
+  const [timerInfo, setTimerInfo] = useState({})
 
   useEffect(() => {
     apiRequest(`/task/get-task?task_id=${ticketId.id}`).then((taskInfo) => {
       setTaskInfo(taskInfo);
-      setInputsValue({
+      setInputsValue({title: taskInfo.title, description: taskInfo.description, comment: ''})
-        title: taskInfo.title,
+      apiRequest(`/comment/get-by-entity?entity_type=2&entity_id=${taskInfo.id}`).then((res) => {
-        description: taskInfo.description,
+        const comments = res.reduce((acc, cur) => {
-        comment: "",
+          if (!cur.parent_id) {
-      });
+            acc.push({...cur, subComments: []})
-      apiRequest(
+          } else {
-        `/comment/get-by-entity?entity_type=2&entity_id=${taskInfo.id}`
+            acc.forEach((item) => {
-      ).then((res) => {
+              if (item.id === cur.parent_id) item.subComments.push(cur)
-        setComments(res);
+            })
-        res.forEach((item) => {
+          }
-          setCommentsEditOpen((prevValue) => ({
+          return acc
-            ...prevValue,
+        }, [])
-            [item.id]: false,
+        setComments(comments)
-          }));
+      })
-          setCommentsEditText((prevValue) => ({
+      taskInfo.timers.forEach((time) => {
-            ...prevValue,
+        if (!time.stopped_at) {
-            [item.id]: item.text,
+          setTimerStart(true)
-          }));
+          setTimerInfo(time)
-        });
+        }
-      });
+      })
       dispatch(setProjectBoardFetch(taskInfo.project_id));
-      setLoader(boardLoader);
+      setLoader(boardLoader)
     });
   }, []);
 
@@ -104,9 +101,10 @@ export const TicketFullScreen = () => {
       data: {
         task_id: taskInfo.id,
         title: inputsValue.title,
-        description: inputsValue.description,
+        description: inputsValue.description
       },
-    }).then(() => {});
+    }).then(() => {
+    });
   }
 
   function createComment() {
@@ -115,43 +113,39 @@ 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()
-      setInputsValue((prevValue) => ({ ...prevValue, comment: "" }));
+      newComment.subComments = []
-      setComments((prevValue) => [...prevValue, newComment]);
+      setInputsValue((prevValue) => ({...prevValue, comment: ''}))
-      setCommentsEditOpen((prevValue) => ({ ...prevValue, [res.id]: false }));
+      setComments((prevValue) => ([...prevValue, newComment]))
-      setCommentsEditText((prevValue) => ({
+    })
-        ...prevValue,
-        [res.id]: res.text,
-      }));
-    });
   }
 
-  function deleteComment(commentId) {
+  function startTaskTimer() {
-    apiRequest("/comment/update", {
+    apiRequest("/timer/create", {
-      method: "PUT",
+      method: "POST",
       data: {
-        comment_id: commentId,
+        entity_type: 2,
-        status: 0,
+        entity_id: taskInfo.id,
-      },
+        created_at: getCorrectRequestDate(new Date())
-    }).then(() => {
+      }
-      setComments((prevValue) =>
+    }).then((res) => {
-        prevValue.filter((item) => item.id !== commentId)
+      setTimerStart(true)
-      );
+      setTimerInfo(res)
-    });
+    })
   }
 
-  function editComment(commentId) {
+  function stopTaskTimer() {
-    apiRequest("/comment/update", {
+    apiRequest("/timer/update", {
       method: "PUT",
       data: {
-        comment_id: commentId,
+        timer_id: timerInfo.id,
-        text: commentsEditText[commentId],
+        stopped_at: getCorrectRequestDate(new Date())
-      },
+      }
-    }).then(() => {});
+    }).then(() => setTimerStart(false))
   }
 
   function deletePerson(userId) {
@@ -159,13 +153,49 @@ 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))
+    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));
   };
@@ -212,9 +242,7 @@ export const TicketFullScreen = () => {
               <p>Архив</p>
             </Link>
           </div>
-        {loader ? (
+          {loader ? <Loader /> :
-          <Loader />
-        ) : (
               <>
                 <div className="tracker__tabs__content content-tabs">
                   <div className="tasks__head">
@@ -229,77 +257,43 @@ export const TicketFullScreen = () => {
                       <div className="tasks__head__persons">
                         {/*<img src={avatarTest} alt="avatar" />*/}
                         {/*<img src={avatarTest} alt="avatar" />*/}
-                    <span className="countPersons">
+                        <span className="countPersons">{projectBoard.projectUsers?.length}</span>
-                      {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
+                              <img className='persons__list__close' src={close} alt='close' onClick={() => setPersonListOpen(false)} />
-                          className="persons__list__close"
+                              <div className='persons__list__count'><span>{projectBoard.projectUsers?.length}</span>участник</div>
-                          src={close}
+                              <div className='persons__list__info'>В проекте - <span>“{projectBoard.name}”</span></div>
-                          alt="close"
+                              <div className='persons__list__items'>
-                          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 (
+                                  return <div className='persons__list__item' key={person.user_id}>
-                              <div
+                                    <img className='avatar' src={urlForLocal(person.user.avatar)} alt='avatar' />
-                                className="persons__list__item"
-                                key={person.user_id}
-                              >
-                                <img
-                                  className="avatar"
-                                  src={urlForLocal(person.user.avatar)}
-                                  alt="avatar"
-                                />
                                     <span>{person.user.fio}</span>
-                                <img
+                                    <img className='delete' src={close} alt='delete' onClick={() => deletePerson(person.user_id)}/>
-                                  className="delete"
-                                  src={close}
-                                  alt="delete"
-                                  onClick={() => deletePerson(person.user_id)}
-                                />
                                   </div>
-                            );
+                                })
-                          })}
+                                }
                               </div>
-                        <div
+                              <div className='persons__list__add'
-                          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>
-                  <div className="tasks__head__select">
-                    <span>Учавствую</span>
-                    <img src={selectArrow} alt="arrow" />
-                  </div>
-                  <div className="tasks__head__select">
-                    <span>Мои</span>
-                    <img src={selectArrow} alt="arrow" />
                       </div>
                       <Link to={`/profile/tracker`} className="link">
                         <div className="tasks__head__back">
@@ -310,122 +304,59 @@ export const TicketFullScreen = () => {
                     </div>
                   </div>
                 </div>
-            <div className="tracker-ticket ticket">
+                <div className="modal-tiket__content ticket">
                   <div className="content ticket-whith">
                     <div className="content__task">
                       <span>Задача</span>
-                  {editOpen ? (
+                      {editOpen ? <input value={inputsValue.title} onChange={(e) => {
-                    <input
+                        setInputsValue((prevValue) => ({...prevValue, title: e.target.value}))
-                      value={inputsValue.title}
+                      }} /> :<h5>{inputsValue.title}</h5>}
-                      onChange={(e) => {
-                        setInputsValue((prevValue) => ({
-                          ...prevValue,
-                          title: e.target.value,
-                        }));
-                      }}
-                    />
-                  ) : (
-                    <h5>{inputsValue.title}</h5>
-                  )}
                       <div className="content__description">
-                    {editOpen ? (
+                        {editOpen ? <input value={inputsValue.description} onChange={(e) => {
-                      <input
+                          setInputsValue((prevValue) => ({...prevValue, description: e.target.value}))
-                        value={inputsValue.description}
+                        }}/> :<p>{inputsValue.description}</p>}
-                        onChange={(e) => {
+                        {/*<img src={task} className="image-task"></img>*/}
-                          setInputsValue((prevValue) => ({
-                            ...prevValue,
-                            description: e.target.value,
-                          }));
-                        }}
-                      />
-                    ) : (
-                      <p>{inputsValue.description}</p>
-                    )}
                       </div>
                       <div className="content__communication">
                         <p className="tasks">
-                      <BaseButton
+                          <button
                               onClick={() => {
                                 dispatch(modalToggle("addSubtask"));
-                          setAddSubtask(true);
+                                setModalAddWorker(true);
                               }}
-                        styles={"tasks__button"}
                           >
-                        <img src={plus}></img>
+                            <img src={plus} alt='plus'></img>
                             Добавить под задачу
-                      </BaseButton>
+                          </button>
                         </p>
                         <p className="file">
-                      <BaseButton styles={"file__button"}>
+                          <button>
-                        <img src={file}></img>
+                            <img src={file} alt='file'></img>
                             Загрузить файл
-                      </BaseButton>
+                          </button>
                           <span>{0}</span>
                           Файлов
                         </p>
                       </div>
                       <div className="content__input">
-                    <input
+                        <input placeholder="Оставить комментарий" value={inputsValue.comment} onChange={(e) => {
-                      placeholder="Оставить комментарий"
+                          setInputsValue((prevValue) => ({...prevValue, comment: e.target.value}))
-                      value={inputsValue.comment}
+                        }} />
-                      onChange={(e) => {
+                        <img src={send} onClick={createComment} alt='send'></img>
-                        setInputsValue((prevValue) => ({
-                          ...prevValue,
-                          comment: e.target.value,
-                        }));
-                      }}
-                    />
-                    <img src={send} onClick={createComment}></img>
                       </div>
-                  <div className="comments__list">
+                      <div className='comments__list'>
                         {comments.map((comment) => {
-                      return (
+                          return <TrackerTaskComment
-                        <div className="comments__list__item" key={comment.id}>
+                              key={comment.id}
-                          <div className="comments__list__item__info">
+                              taskId={taskInfo.id}
-                            <span>{getCorrectDate(comment.created_at)}</span>
+                              comment={comment}
-                            <div
+                              commentDelete={commentDelete}
-                              className={
+                              addSubComment={addSubComment}
-                                commentsEditOpen[comment.id]
+                              subCommentDelete={subCommentDelete}
-                                  ? "edit edit__open"
+                          />
-                                  : "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>
                     </div>
                   </div>
@@ -439,7 +370,7 @@ export const TicketFullScreen = () => {
                             taskInfo.taskUsers.map((worker, index) => {
                               return (
                                   <div className="worker" key={index}>
-                            <img src={worker.avatar}></img>
+                                    <img src={worker.avatar} alt='worket'></img>
                                     <p>{worker.name}</p>
                                   </div>
                               );
@@ -472,48 +403,51 @@ export const TicketFullScreen = () => {
 
                     <div className="workers_box-middle">
                       <div className="time">
-                    <img src={watch}></img>
+                        <img src={watch} alt='watch'></img>
                         <span>Длительность : </span>
                         <p>{"0:00:00"}</p>
                       </div>
 
-                  <button className="start">
+                      {timerStart ?
-                    Начать делать <img src={arrow2}></img>
+                          <button className="stop" onClick={() => stopTaskTimer()}>
+                            Остановить
                           </button>
+                          :
+                          <button className={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
+                      <div className={editOpen ? 'edit' : ''} onClick={() => {
-                    className={editOpen ? "edit" : ""}
+                        if(editOpen) {
-                    onClick={() => {
+                          setEditOpen(!editOpen)
-                      if (editOpen) {
+                          editTask()
-                        setEditOpen(!editOpen);
-                        editTask();
                         } else {
-                        setEditOpen(!editOpen);
+                          setEditOpen(!editOpen)
                         }
-                    }}
+                      }}>
-                  >
+                        <img src={edit} alt='edit'></img>
-                    <img src={edit}></img>
+                        <p>{editOpen ? 'сохранить' : 'редактировать'}</p>
-                    <p>{editOpen ? "сохранить" : "редактировать"}</p>
                       </div>
                       <div>
-                    <img src={link}></img>
+                        <img src={link} alt='link'></img>
                         <p>ссылка на проект</p>
                       </div>
                       <div>
-                    <img src={archive2}></img>
+                        <img src={archive2} alt='arch'></img>
                         <p>в архив</p>
                       </div>
                       <div onClick={deleteTask}>
-                    <img src={del}></img>
+                        <img src={del} alt='delete'></img>
                         <p>удалить</p>
                       </div>
                     </div>
                   </div>
                 </div>
               </>
-        )}
+          }
         </div>
         <Footer />
       </section>

src/components/Modal/TrackerModal/TrackerModal.jsx

@@ -1,24 +1,23 @@
-import React, { useEffect, useState } from "react";
+import React, {useEffect, useState} from "react";
-import { useDispatch, useSelector } from "react-redux";
 
+import { useDispatch, useSelector } from "react-redux";
+import { apiRequest } from "../../../api/request";
+import { urlForLocal } from '../../../utils/helper'
 import {
-  addPersonToProject,
+  setColumnName,
-  editColumnName,
+  setColumnPriority,
-  editProjectName,
-  getColumnId,
-  getColumnName,
   getProjectBoard,
   getValueModalType,
-  setColumnName,
   setProject,
   setProjectBoardFetch,
-} from "@redux/projectsTrackerSlice";
+  editProjectName,
+  editColumnName,
+  getColumnName,
+  getColumnId,
+  addPersonToProject, getColumnPriority
+} from "../../../redux/projectsTrackerSlice";
 
-import { urlForLocal } from "@utils/helper";
+import arrowDown from "../../../assets/icons/arrows/selectArrow.png"
-
-import { apiRequest } from "@api/request";
-
-import arrowDown from "assets/icons/arrows/selectArrow.png";
 
 import "./trackerModal.scss";
 
@@ -34,7 +33,8 @@ export const TrackerModal = ({
   const dispatch = useDispatch();
   const projectBoard = useSelector(getProjectBoard);
   const columnName = useSelector(getColumnName);
-  const columnId = useSelector(getColumnId);
+  const columnId = useSelector(getColumnId)
+  const columnPriority = useSelector(getColumnPriority)
 
   const modalType = useSelector(getValueModalType);
   const [projectName, setProjectName] = useState(defautlInput);
@@ -42,9 +42,9 @@ export const TrackerModal = ({
   const [nameProject, setNameProject] = useState("");
   const [valueTiket, setValueTiket] = useState("");
   const [descriptionTicket, setDescriptionTicket] = useState("");
-  const [workers, setWorkers] = useState([]);
+  const [workers, setWorkers] = useState([])
-  const [selectWorkersOpen, setSelectWorkersOpen] = useState(false);
+  const [selectWorkersOpen, setSelectWorkersOpen] = useState(false)
-  const [selectedWorker, setSelectedWorker] = useState(null);
+  const [selectedWorker, setSelectedWorker] = useState(null)
 
   function createTab() {
     if (!valueColumn) {
@@ -55,6 +55,7 @@ export const TrackerModal = ({
       method: "POST",
       data: {
         project_id: projectBoard.id,
+        priority: projectBoard.columns.length ? projectBoard.columns.at(-1).priority + 1 : 1,
         title: valueColumn,
       },
     }).then(() => {
@@ -102,7 +103,42 @@ export const TrackerModal = ({
     });
   }
 
-  function changeColumnName() {
+  function changeColumnParams() {
+    projectBoard.columns.forEach((column) => {
+      if (column.id === columnId && column.priority !== columnPriority) {
+        const priorityColumns = [{
+          column_id: column.id,
+          priority: Number(columnPriority)
+        }]
+        for (let i = column.priority; i < columnPriority; i++) {
+          const currentColumn = {
+            column_id: projectBoard.columns[i].id,
+            priority: i
+          }
+          priorityColumns.push(currentColumn)
+        }
+        for (let i = column.priority; i > columnPriority; i--) {
+          const currentColumn = {
+            column_id: projectBoard.columns[i - 2].id,
+            priority: i
+          }
+          priorityColumns.push(currentColumn)
+        }
+        apiRequest("/project-column/set-priority", {
+          method: "POST",
+          data: {
+            project_id: projectBoard.id,
+            data: JSON.stringify(priorityColumns)
+          }
+        }).then(() => {
+          dispatch(setProjectBoardFetch(projectBoard.id));
+        })
+      }
+    })
+    changeColumnTitle()
+  }
+
+  function changeColumnTitle() {
     apiRequest("/project-column/update-column", {
       method: "PUT",
       data: {
@@ -337,8 +373,19 @@ export const TrackerModal = ({
                   onChange={(e) => dispatch(setColumnName(e.target.value))}
                 />
               </div>
+              <h4>Приоритет колонки</h4>
+              <div className="input-container">
+                <input
+                    className="name-project"
+                    placeholder='Приоритет колонки'
+                    type='number'
+                    step='1'
+                    value={columnPriority}
+                    onChange={(e) => dispatch(setColumnPriority(e.target.value))}
+                />
               </div>
-            <button className="button-add" onClick={changeColumnName}>
+            </div>
+            <button className="button-add" onClick={changeColumnParams}>
               Сохранить
             </button>
           </div>

src/components/Modal/TrackerModal/trackerModal.scss

@@ -26,7 +26,7 @@
 
   .title-project {
     display: flex;
-    align-items: flex-start;
+    align-items: center;
     flex-direction: column;
 
     .input-container {
@@ -34,7 +34,11 @@
       height: 35px;
       background: #ffffff;
       border-radius: 8px;
-      margin-top: 12px;
+      margin: 12px 0;
+
+      input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+      }
     }
 
     h4 {
@@ -123,7 +127,6 @@
   }
 
   .button-add {
-    margin: 20px;
     width: 130px;
     height: 37px;
     background: #52b709;
@@ -136,6 +139,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    margin: 0 auto;
   }
 }
 

src/components/TrackerTaskComment/TrackerTaskComment.jsx

@@ -0,0 +1,129 @@
+import React, { useState } from "react";
+import TrackerTaskSubComment from "../TrackerTaskComment/TrackerTaskComment";
+import { apiRequest } from "../../api/request";
+import {urlForLocal} from '../../utils/helper';
+import {getCorrectDate} from "../Calendar/calendarHelper";
+import edit from "../../assets/icons/edit.svg";
+import del from "../../assets/icons/delete.svg";
+import accept from "../../assets/images/accept.png";
+
+export const TrackerTaskComment = ({
+    taskId,
+    comment,
+    commentDelete,
+    addSubComment,
+    subCommentDelete
+}) => {
+    const [commentsEditOpen, setCommentsEditOpen] = useState(false)
+    const [commentsEditText, setCommentsEditText] = useState(comment.text)
+    const [subCommentsCreateOpen, setSubCommentsCreateOpen] = useState(false)
+    const [subCommentsCreateText, setSubCommentsCreateText] = useState('')
+
+    function editComment() {
+        if (commentsEditText === comment.text) return
+        apiRequest("/comment/update", {
+            method: "PUT",
+            data: {
+                comment_id: comment.id,
+                text: commentsEditText
+            }
+        }).then(() => {
+        })
+    }
+
+    function deleteComment() {
+        apiRequest("/comment/update", {
+            method: "PUT",
+            data: {
+                comment_id: comment.id,
+                status: 0
+            }
+        }).then(() => {
+            if (comment.parent_id) {
+                subCommentDelete(comment)
+            } else {
+                commentDelete(comment)
+            }
+        })
+    }
+
+    function createSubComment() {
+        setSubCommentsCreateOpen(false)
+        if(!subCommentsCreateText) return
+        apiRequest("/comment/create", {
+            method: "POST",
+            data: {
+                text: subCommentsCreateText,
+                entity_type: 2,
+                entity_id: taskId,
+                parent_id: comment.id
+            }
+        }).then((res) => {
+            let newSubComment = res
+            newSubComment.created_at = new Date()
+            setSubCommentsCreateText('')
+            addSubComment(comment.id, newSubComment)
+        })
+    }
+
+    return (
+        <div className={[!comment.parent_id && comment.subComments.length ? 'comments__list__item__main': '',
+            'comments__list__item',
+            comment.parent_id ? 'comments__list__item__subComment' : ''].join(' ')}>
+            <div className='comments__list__item__info'>
+                <div className='comments__list__item__fio'>
+                    <img src={urlForLocal(comment.user.avatar)} alt='avatar' />
+                    <p>{comment.user.fio}</p>
+                </div>
+                <div className='comments__list__item__date'>
+                    <span>{getCorrectDate(comment.created_at)}</span>
+                    {comment.user_id === Number(localStorage.getItem('id')) &&
+                        <>
+                        <div className={commentsEditOpen ? 'edit edit__open' : 'edit'} >
+                            <img src={edit} alt='edit' onClick={() => {
+                                if (commentsEditOpen) {
+                                    editComment()
+                                }
+                                setCommentsEditOpen(!commentsEditOpen)
+                            }} />
+                        </div>
+                        <img src={del} alt='delete' onClick={() => deleteComment()} />
+                        </>
+                    }
+                </div>
+            </div>
+            {commentsEditOpen ?
+                <input className='comments__list__item__text' value={commentsEditText} onChange={(e) =>  {
+                    setCommentsEditText(e.target.value)
+                }} /> :
+                <p className='comments__list__item__text'>{commentsEditText}</p>}
+            {!comment.parent_id &&
+                <>
+                {
+                    subCommentsCreateOpen ?
+                        <div className='comments__list__item__answer__new'>
+                            <input value={subCommentsCreateText} onChange={(e) => {
+                                setSubCommentsCreateText(e.target.value)
+                            }}/>
+                            <img src={accept} alt='accept'
+                                 onClick={() => {
+                                     createSubComment()
+                                 }}
+                            />
+                        </div>
+                        :
+                        <span onClick={() => {
+                            setSubCommentsCreateOpen(true)
+                        }} className='comments__list__item__answer'>Ответить</span>
+                    }
+                </>
+            }
+            {Boolean(comment.subComments?.length) && comment.subComments.map((subComment) => {
+                return <TrackerTaskSubComment key={subComment.id} taskId={taskId} comment={subComment} subCommentDelete={subCommentDelete}/>
+                })
+            }
+        </div>
+    )
+}
+
+export default TrackerTaskComment

src/components/UI/ModalTicket/ModalTicket.jsx

@@ -0,0 +1,484 @@
+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/ModalTicket/modalTicket.scss

@@ -0,0 +1,620 @@
+.modal-tiket {
+  z-index: 9;
+  height: 100%;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.11);
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: none;
+  align-items: center;
+  justify-content: center;
+}
+
+.modal-tiket.active {
+  display: flex;
+}
+
+.modal-tiket__content {
+  background: #ffffff;
+  //border: 1px solid #dde2e4;
+  border-radius: 8px;
+  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("../../../assets/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;
+          background: #52b709;
+          border-radius: 44px;
+          font-weight: 400;
+          font-size: 12px;
+          line-height: 32px;
+          border: none;
+          color: #ffffff;
+        }
+      }
+
+      .tasks,
+      .file {
+        display: flex;
+        align-items: center;
+      }
+
+      .file {
+        justify-content: space-between;
+        margin-left: 20px;
+
+        button {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: white;
+          width: 166px;
+          height: 40px;
+          border: 0.5px solid #1458dd;
+          border-radius: 44px;
+          font-weight: 400;
+          font-size: 12px;
+          line-height: 32px;
+          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/UI/TicketFullScreen/TicketFullScreen.jsx

@@ -0,0 +1,457 @@
+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, filteredParticipateTasks, filterCreatedByMe
+} 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 accept from "../../../assets/images/accept.png";
+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,42 +1,43 @@
 import React, { useEffect, useRef, useState } from "react";
-import { useDispatch, useSelector } from "react-redux";
 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 {
-  activeLoader,
-  deletePersonOnProject,
-  getBoarderLoader,
   getProjectBoard,
+  getBoarderLoader,
   modalToggle,
   moveProjectTask,
-  setColumnId,
-  setColumnName,
   setProjectBoardFetch,
   setToggleTab,
-} from "@redux/projectsTrackerSlice";
+  activeLoader,
+  setColumnName,
+  setColumnId,
+  setColumnPriority,
+  deletePersonOnProject,
+  filterCreatedByMe,
+  filteredParticipateTasks
+} from "../../redux/projectsTrackerSlice";
 
-import { urlForLocal } from "@utils/helper";
+import ModalTicket from "../../components/UI/ModalTicket/ModalTicket";
+import TrackerModal from "../../components/Modal/TrackerModal/TrackerModal";
 
-import { apiRequest } from "@api/request";
+import project from "../../assets/icons/trackerProject.svg";
-
+import tasks from "../../assets/icons/trackerTasks.svg";
-import { Footer } from "@components/Common/Footer/Footer";
+import archive from "../../assets/icons/archiveTracker.svg";
-import { Loader } from "@components/Common/Loader/Loader";
+import commentsBoard from "../../assets/icons/commentsBoard.svg";
-import ModalTicket from "@components/Modal/Tracker/ModalTicket/ModalTicket";
+import filesBoard from "../../assets/icons/filesBoard.svg";
-import TrackerModal from "@components/Modal/TrackerModal/TrackerModal";
+import arrow from "../../assets/icons/arrows/arrowCalendar.png";
-import { Navigation } from "@components/Navigation/Navigation";
+import del from "../../assets/icons/delete.svg";
-import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
+import edit from "../../assets/icons/edit.svg";
-import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
+import close from "../../assets/icons/close.png"
-
+import accept from "../../assets/images/accept.png";
-import archive from "assets/icons/archiveTracker.svg";
-import arrow from "assets/icons/arrows/arrowCalendar.png";
-import selectArrow from "assets/icons/arrows/select.svg";
-import close from "assets/icons/closeProjectPersons.svg";
-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";
 
 export const ProjectTracker = () => {
   const dispatch = useDispatch();
@@ -49,8 +50,9 @@ export const ProjectTracker = () => {
   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 [checkBoxMyTasks, setCheckBoxMyTasks] = useState(false)
   const startWrapperIndexTest = useRef({});
   const projectBoard = useSelector(getProjectBoard);
   const loader = useSelector(getBoarderLoader);
@@ -72,18 +74,6 @@ export const ProjectTracker = () => {
     }
   }, [projectBoard]);
 
-  // function toggleMoreTasks(columnId) {
-  //     setTabTaskMok((prevArray) =>
-  //         prevArray.map((elem, index) => {
-  //             if (columnId === index) {
-  //                 return { ...elem, open: !elem.open };
-  //             } else {
-  //                 return elem;
-  //             }
-  //         })
-  //     );
-  // }
-
   function dragStartHandler(e, task, columnId) {
     startWrapperIndexTest.current = { task: task, index: columnId };
     setTimeout(() => {
@@ -136,7 +126,7 @@ export const ProjectTracker = () => {
     setSelectedTab(columnId);
     dispatch(modalToggle("createTiketProject"));
     setModalAdd(true);
-    setPriorityTask(length + 1);
+    setPriorityTask(length + 1)
   }
 
   function openTicket(e, task) {
@@ -144,16 +134,36 @@ export const ProjectTracker = () => {
     setModalActiveTicket(true);
   }
 
-  function deleteColumn(id) {
+  function deleteColumn(column) {
+    const priorityColumns = []
     apiRequest("/project-column/update-column", {
       method: "PUT",
       data: {
-        column_id: id,
+        column_id: column.id,
         project_id: projectBoard.id,
         status: 0,
       },
+    }).then(() => {
+      if (column.priority < projectBoard.columns.length) {
+        for (let i = column.priority; i < projectBoard.columns.length; i++) {
+          const currentColumn = {
+            column_id: projectBoard.columns[i].id,
+            priority: i
+          }
+          priorityColumns.push(currentColumn)
+        }
+        apiRequest("/project-column/set-priority", {
+          method: "POST",
+          data: {
+            project_id: projectBoard.id,
+            data: JSON.stringify(priorityColumns)
+          }
         }).then(() => {
           dispatch(setProjectBoardFetch(projectBoard.id));
+        })
+      } else {
+        dispatch(setProjectBoardFetch(projectBoard.id));
+      }
     });
   }
 
@@ -162,13 +172,35 @@ 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'))))
+    } else {
+      dispatch(setProjectBoardFetch(projectId.id))
+      setCheckBoxParticipateTasks(false)
+      setCheckBoxMyTasks(false)
+    }
+    setCheckBoxParticipateTasks(!checkBoxParticipateTasks)
+  }
+
+  function filterMyTask() {
+    if (!checkBoxMyTasks) {
+      dispatch(filterCreatedByMe(Number(localStorage.getItem('id'))))
+    } else {
+      dispatch(setProjectBoardFetch(projectId.id))
+      setCheckBoxParticipateTasks(false)
+      setCheckBoxMyTasks(false)
+    }
+    setCheckBoxMyTasks(!checkBoxMyTasks)
+  }
+
   return (
     <div className="tracker">
       <ProfileHeader />
@@ -238,79 +270,59 @@ export const ProjectTracker = () => {
                     <p>добавить колонку</p>
                   </div>
                   <div className="tasks__head__persons">
-                    {/*<img src={avatarTest} alt="avatar" />*/}
+                    <span className="countPersons">{projectBoard.projectUsers?.length}</span>
-                    {/*<img src={avatarTest} alt="avatar" />*/}
-                    <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
+                      <img className='persons__list__close' src={close} alt='close' onClick={() => setPersonListOpen(false)} />
-                          className="persons__list__close"
+                      <div className='persons__list__count'><span>{projectBoard.projectUsers?.length}</span>участник</div>
-                          src={close}
+                      <div className='persons__list__info'>В проекте - <span>“{projectBoard.name}”</span></div>
-                          alt="close"
+                      <div className='persons__list__items'>
-                          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 (
+                          return <div className='persons__list__item' key={person.user_id}>
-                              <div
+                                    <img className='avatar' src={urlForLocal(person.user.avatar)} alt='avatar' />
-                                className="persons__list__item"
-                                key={person.user_id}
-                              >
-                                <img
-                                  className="avatar"
-                                  src={urlForLocal(person.user.avatar)}
-                                  alt="avatar"
-                                />
                                     <span>{person.user.fio}</span>
-                                <img
+                                    <img className='delete' src={close} alt='delete' onClick={() => deletePerson(person.user_id)}/>
-                                  className="delete"
-                                  src={close}
-                                  alt="delete"
-                                  onClick={() => deletePerson(person.user_id)}
-                                />
                                 </div>
-                            );
+                        })
-                          })}
+                        }
                       </div>
-                        <div
+                      <div className='persons__list__add'
-                          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__select">
+                  <div className="tasks__head__checkBox" onClick={filterParticipateTasks}>
                     <span>Участвую</span>
-                    <img src={selectArrow} alt="arrow" />
+                    <div className="tasks__head__checkBox__box">
+                      {checkBoxParticipateTasks &&
+                        <img src={accept} alt='accept' />
+                      }
                     </div>
-                  <div className="tasks__head__select">
+                  </div>
+                  <div className="tasks__head__checkBox" onClick={filterMyTask}>
                     <span>Мои</span>
-                    <img src={selectArrow} alt="arrow" />
+                    <div className="tasks__head__checkBox__box">
+                      {checkBoxMyTasks &&
+                          <img src={accept} alt='accept' />
+                      }
+                    </div>
                   </div>
                   <Link to="/profile/tracker" className="tasks__head__back">
                     <p>Вернуться на проекты</p>
@@ -319,16 +331,14 @@ export const ProjectTracker = () => {
                 </div>
               </div>
 
-              {Boolean(modalActiveTicket) && (
+              {Boolean(modalActiveTicket) && <ModalTicket
-                <ModalTicket
                   active={modalActiveTicket}
                   setActive={setModalActiveTicket}
                   task={selectedTicket}
                   projectId={projectBoard.id}
                   projectName={projectBoard.name}
                   projectUsers={projectBoard.projectUsers}
-                />
+              />}
-              )}
 
               <div className="tasks__container">
                 {Boolean(projectBoard?.columns) &&
@@ -338,23 +348,18 @@ export const ProjectTracker = () => {
                       <div
                         key={column.id}
                         onDragOver={(e) => dragOverHandler(e)}
-                        onDragEnter={() => dragEnterHandler(column.id)}
+                        onDragEnter={(e) => dragEnterHandler(column.id)}
                         onDrop={(e) => dragDropHandler(e, column.id)}
                         className={`tasks__board ${
-                          column.tasks.length >= 3 ? "tasks__board__more" : ""
-                        } ${
                           wrapperHover[column.id] ? "tasks__board__hover" : ""
                         }`}
                       >
                         <div className="board__head">
-                          {/*<span className={wrapperIndex === 3 ? "done" : ""}>*/}
                           <span>{column.title}</span>
                           <div>
                             <span
                               className="add"
-                              onClick={() =>
+                              onClick={() => selectedTabTask(column.id, column.tasks.length)}
-                                selectedTabTask(column.id, column.tasks.length)
-                              }
                             >
                               +
                             </span>
@@ -381,8 +386,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))
                                 setModalAdd(true);
                               }}
                             >
@@ -391,19 +397,14 @@ export const ProjectTracker = () => {
                             </div>
                             <div
                               className="column__select__item"
-                              onClick={() => deleteColumn(column.id)}
+                              onClick={() => deleteColumn(column)}
                             >
                               <img src={del} alt="delete" />
                               <span>Удалить</span>
                             </div>
                           </div>
                         )}
-                        {column.tasks.map((task) => {
+                        {column.tasks.map((task, index) => {
-                          // if (index > 2) {
-                          //   if (!column.open) {
-                          //     return;
-                          //   }
-                          // }
                           return (
                             <div
                               key={task.id}
@@ -430,31 +431,15 @@ export const ProjectTracker = () => {
                                   <img src={filesBoard} alt="filesImg" />
                                   <span>{task.files} файлов</span>
                                 </div>
-                                {/*<div className="tasks__board__item__info__avatars">*/}
-                                {/*  <img src={task.avatarCreated} alt="avatar" />*/}
-                                {/*  <img src={task.avatarDo} alt="avatar" />*/}
-                                {/*</div>*/}
                               </div>
                             </div>
                           );
                         })}
-                        {/*{column.tasks.length > 3 && (*/}
-                        {/*  <span*/}
-                        {/*    className={*/}
-                        {/*      column.open*/}
-                        {/*        ? "lessItems openItems"*/}
-                        {/*        : "moreItems openItems"*/}
-                        {/*    }*/}
-                        {/*    // onClick={() => toggleMoreTasks(column.id)}*/}
-                        {/*  >*/}
-                        {/*    {column.open ? "-" : "+"}*/}
-                        {/*  </span>*/}
-                        {/*)}*/}
                       </div>
                     );
                   })}
                 {Boolean(projectBoard?.columns) &&
-                  !projectBoard.columns.length && (
+                  !Boolean(projectBoard.columns.length) && (
                     <div className="tasks__board__noItems">
                       В проекте нет задач.
                     </div>

src/pages/Tracker/tracker.scss

@@ -423,18 +423,33 @@
             }
           }
 
-          &__select {
+          &__checkBox {
             cursor: pointer;
+            display: flex;
+            align-items: center;
 
-            img {
-              margin-left: 18px;
-            }
             span {
               color: #252c32;
               font-weight: 400;
               font-size: 14px;
               line-height: 24px;
             }
+
+            &__box {
+              width: 20px;
+              height: 20px;
+              border-radius: 6px;
+              border: solid 1px gray;
+              margin-left: 5px;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+
+              img {
+                width: 18px;
+                height: 18px;
+              }
+            }
           }
 
           &__back {
@@ -487,13 +502,31 @@
             0px 1px 1px rgba(0, 0, 0, 0.06);
           border-radius: 8px;
           padding: 16px 14px 16px 8px;
-          width: 350px;
+          min-width: 353px;
+          max-width: 353px;
           display: flex;
           flex-direction: column;
           row-gap: 16px;
           height: fit-content;
           position: relative;
           transition: all 0.3s ease;
+          //max-height: 500px;
+          //overflow-y: auto;
+
+          &::-webkit-scrollbar {
+            width: 3px;
+            border-radius: 10px;
+          }
+
+          &::-webkit-scrollbar-thumb {
+            background: #cbd9f9;
+            border-radius: 20px;
+          }
+
+          &::-webkit-scrollbar-track {
+            background: #c5c0c6;
+            border-radius: 20px;
+          }
 
           &__hover {
             box-shadow: 0px 2px 10px #9cc480,

src/redux/projectsTrackerSlice.js

@@ -10,6 +10,7 @@ const initialState = {
   boardLoader: false,
   columnName: "",
   columnId: 0,
+  columnPriority: 0
 };
 
 export const setProjectBoardFetch = createAsyncThunk("userInfo", (id) =>
@@ -66,12 +67,25 @@ export const projectsTrackerSlice = createSlice({
         }
       });
     },
+    filterCreatedByMe: (state, action) => {
+      state.projectBoard.columns.forEach((column) => {
+        column.tasks = column.tasks.filter((task) => task.user_id === action.payload)
+      })
+    },
+    filteredParticipateTasks: (state, action) => {
+      state.projectBoard.columns.forEach((column) => {
+        column.tasks = column.tasks.filter((task) => task.taskUsers.some((person) => person.user_id === action.payload))
+      })
+    },
     setColumnName: (state, action) => {
       state.columnName = action.payload;
     },
     setColumnId: (state, action) => {
       state.columnId = action.payload;
     },
+    setColumnPriority: (state, action) => {
+      state.columnPriority = action.payload
+    },
     editProjectName: (state, action) => {
       state.projects.forEach((project) => {
         if (project.id === action.payload.id) {
@@ -110,8 +124,11 @@ export const {
   editProjectName,
   editColumnName,
   setColumnId,
+  setColumnPriority,
   deletePersonOnProject,
   addPersonToProject,
+  filterCreatedByMe,
+  filteredParticipateTasks
 } = projectsTrackerSlice.actions;
 
 export const getProjects = (state) => state.tracker.projects;
@@ -121,5 +138,6 @@ export const getValueModalType = (state) => state.tracker.modalType;
 export const getBoarderLoader = (state) => state.tracker.boardLoader;
 export const getColumnName = (state) => state.tracker.columnName;
 export const getColumnId = (state) => state.tracker.columnId;
+export const getColumnPriority = (state) => state.tracker.columnPriority
 
 export default projectsTrackerSlice.reducer;

src/utils/helper.js

@@ -51,3 +51,14 @@ export function scrollToForm() {
     behavior: "smooth",
   });
 }
+
+export function getCorrectRequestDate(date) {
+  const yyyy = String(date.getUTCFullYear())
+  const mm = String(date.getUTCMonth() + 1).padStart(2, "0");
+  const dd = String(date.getUTCDate()).padStart(2, "0");
+  const hh = String(date.getUTCHours())
+  const min = String(date.getUTCMinutes())
+  const sec = String(date.getUTCSeconds())
+  return `${yyyy}-${mm}-${dd} ${hh}:${min}:${sec}`
+}
+