Merge pull request #105 from apuc/fixed-err-eslint

Fixed err eslint

package.json

@@ -7,8 +7,6 @@
     "@testing-library/jest-dom": "^5.12.0",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
-    "@typescript-eslint/eslint-plugin": "^4.5.0",
-    "@typescript-eslint/parser": "^4.5.0",
     "axios": "^0.24.0",
     "babel": "^6.23.0",
     "bfj": "^7.0.2",
@@ -50,14 +48,17 @@
     "@babel/preset-env": "^7.20.2",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
     "@trivago/prettier-plugin-sort-imports": "^4.1.1",
+    "@typescript-eslint/eslint-plugin": "^5.60.0",
+    "@typescript-eslint/parser": "^5.60.0",
     "babel-loader": "^9.1.2",
     "copy-webpack-plugin": "^10.2.0",
     "cross-env": "^7.0.3",
     "css-loader": "6.7.3",
     "dotenv-webpack": "^7.0.3",
-    "eslint": "^8.41.0",
+    "eslint": "^8.43.0",
     "eslint-plugin-react": "^7.32.2",
     "html-webpack-plugin": "5.5.0",
+    "husky": "^8.0.0",
     "mini-css-extract-plugin": "^2.7.2",
     "node-sass": "8.0.0",
     "postcss": "^8.4.21",
@@ -74,8 +75,7 @@
     "webpack-bundle-analyzer": "4.7.0",
     "webpack-cli": "^5.0.1",
     "webpack-dev-server": "4.11.1",
-    "webpack-merge": "5.8.0",
+    "webpack-merge": "5.8.0"
-    "husky": "^8.0.0"
   },
   "scripts": {
     "build": "cross-env SERVE=true webpack -c config/webpack/prod.js",

src/components/Modal/TrackerModal/TrackerModal.jsx

@@ -0,0 +1,403 @@
+import React, { useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+
+import { apiRequest } from "../../../api/request";
+import arrowDown from "../../../assets/icons/arrows/selectArrow.png";
+import {
+  addPersonToProject,
+  editColumnName,
+  editProjectName,
+  getColumnId,
+  getColumnName,
+  getColumnPriority,
+  getProjectBoard,
+  getValueModalType,
+  setColumnName,
+  setColumnPriority,
+  setProject,
+  setProjectBoardFetch,
+} from "../../../redux/projectsTrackerSlice";
+import { urlForLocal } from "../../../utils/helper";
+import "./trackerModal.scss";
+
+export const TrackerModal = ({
+  active,
+  setActive,
+  selectedTab,
+  defautlInput,
+  titleProject,
+  projectId,
+  priorityTask,
+}) => {
+  const dispatch = useDispatch();
+  const projectBoard = useSelector(getProjectBoard);
+  const columnName = useSelector(getColumnName);
+  const columnId = useSelector(getColumnId);
+  const columnPriority = useSelector(getColumnPriority);
+
+  const modalType = useSelector(getValueModalType);
+  const [projectName, setProjectName] = useState(defautlInput);
+  const [valueColumn, setValueColumn] = useState("");
+  const [nameProject, setNameProject] = useState("");
+  const [valueTiket, setValueTiket] = useState("");
+  const [descriptionTicket, setDescriptionTicket] = useState("");
+  const [workers, setWorkers] = useState([]);
+  const [selectWorkersOpen, setSelectWorkersOpen] = useState(false);
+  const [selectedWorker, setSelectedWorker] = useState(null);
+
+  function createTab() {
+    if (!valueColumn) {
+      return;
+    }
+
+    apiRequest("/project-column/create-column", {
+      method: "POST",
+      data: {
+        project_id: projectBoard.id,
+        priority: projectBoard.columns.length
+          ? projectBoard.columns.at(-1).priority + 1
+          : 1,
+        title: valueColumn,
+      },
+    }).then(() => {
+      dispatch(setProjectBoardFetch(projectBoard.id));
+    });
+    setValueColumn("");
+    setActive(false);
+  }
+
+  function createTiket() {
+    if (!valueTiket || !descriptionTicket) {
+      return;
+    }
+
+    apiRequest("/task/create-task", {
+      method: "POST",
+      data: {
+        project_id: projectBoard.id,
+        title: valueTiket,
+        description: descriptionTicket,
+        status: 1,
+        user_id: localStorage.getItem("id"),
+        column_id: selectedTab,
+        priority: priorityTask,
+      },
+    }).then(() => {
+      dispatch(setProjectBoardFetch(projectBoard.id));
+    });
+
+    setActive(false);
+    setValueTiket("");
+    setDescriptionTicket("");
+  }
+
+  function editProject() {
+    apiRequest("/project/update", {
+      method: "PUT",
+      data: {
+        project_id: projectId,
+        name: projectName,
+      },
+    }).then(() => {
+      setActive(false);
+      dispatch(editProjectName({ id: projectId, name: projectName }));
+    });
+  }
+
+  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: {
+        column_id: columnId,
+        title: columnName,
+      },
+    }).then(() => {
+      setActive(false);
+      dispatch(editColumnName({ id: columnId, title: columnName }));
+    });
+  }
+
+  function createProject() {
+    if (nameProject === "") {
+      return;
+    } else {
+      apiRequest("/project/create", {
+        method: "POST",
+        data: {
+          user_id: localStorage.getItem("id"),
+          name: nameProject,
+          status: 19,
+        },
+      }).then((res) => {
+        const result = { ...res, columns: [] };
+        dispatch(setProject(result));
+        setActive(false);
+        setNameProject("");
+      });
+    }
+  }
+
+  function addUserToProject() {
+    apiRequest("/project/add-user", {
+      method: "POST",
+      data: {
+        user_id: selectedWorker.user_id,
+        project_id: projectBoard.id,
+      },
+    }).then((el) => {
+      dispatch(addPersonToProject(el));
+      setActive(false);
+      setSelectedWorker("");
+      setSelectWorkersOpen(false);
+    });
+  }
+
+  useEffect(() => {
+    modalType === "addWorker"
+      ? apiRequest("/project/my-employee").then((el) => {
+          let persons = el.managerEmployees;
+          let ids = projectBoard.projectUsers.map((user) => user.user_id);
+          setWorkers(
+            persons.reduce((acc, cur) => {
+              if (!ids.includes(cur.user_id)) acc.push(cur);
+              return acc;
+            }, [])
+          );
+        })
+      : "";
+  }, [active]);
+
+  return (
+    <div
+      className={active ? "modal-add active" : "modal-add"}
+      onClick={() => {
+        setActive(false);
+        setSelectWorkersOpen(false);
+      }}
+    >
+      <div className="modal-add__content" onClick={(e) => e.stopPropagation()}>
+        {modalType === "addWorker" && (
+          <div>
+            <div className="title-project">
+              <h4>Добавьте участника</h4>
+              {/*<div className="input-container">*/}
+              {/*  <input*/}
+              {/*    className="name-project"*/}
+              {/*    value={emailWorker}*/}
+              {/*    onChange={(e) => setEmailWorker(e.target.value)}*/}
+              {/*  />*/}
+              {/*</div>*/}
+              <div
+                className={
+                  selectWorkersOpen ? "select__worker open" : "select__worker"
+                }
+                onClick={() => setSelectWorkersOpen(!selectWorkersOpen)}
+              >
+                <p>
+                  {selectedWorker
+                    ? selectedWorker.employee.fio
+                    : "Выберите пользователя"}
+                </p>
+                <img className="arrow" src={arrowDown} alt="arrow" />
+                {Boolean(selectWorkersOpen) && (
+                  <div className="select__worker__dropDown">
+                    {Boolean(workers.length) ? (
+                      workers.map((worker) => {
+                        if (worker === selectedWorker) {
+                          return;
+                        }
+                        return (
+                          <div
+                            className="worker"
+                            key={worker.id}
+                            onClick={() => {
+                              setSelectedWorker(worker);
+                            }}
+                          >
+                            <p>{worker.employee.fio}</p>
+                            <img
+                              src={urlForLocal(worker.employee.avatar)}
+                              alt="avatar"
+                            />
+                          </div>
+                        );
+                      })
+                    ) : (
+                      <div>Нет пользователей</div>
+                    )}
+                  </div>
+                )}
+              </div>
+            </div>
+            <button className="button-add" onClick={addUserToProject}>
+              Добавить
+            </button>
+          </div>
+        )}
+        {modalType === "createTiketProject" && (
+          <div>
+            <div className="title-project">
+              <h4>Введите название и описание задачи</h4>
+              <div className="input-container">
+                <input
+                  className="name-project"
+                  value={valueTiket}
+                  onChange={(e) => setValueTiket(e.target.value)}
+                  placeholder="Название задачи"
+                />
+              </div>
+              <div className="input-container">
+                <input
+                  className="name-project"
+                  value={descriptionTicket}
+                  onChange={(e) => setDescriptionTicket(e.target.value)}
+                  placeholder="Описание задачи"
+                />
+              </div>
+            </div>
+            <button className="button-add" onClick={createTiket}>
+              Создать
+            </button>
+          </div>
+        )}
+        {modalType === "editProject" && (
+          <div>
+            <div className="title-project">
+              <h4>Введите новое название</h4>
+              <div className="input-container">
+                <input
+                  className="name-project"
+                  value={projectName}
+                  onChange={(e) => setProjectName(e.target.value)}
+                />
+              </div>
+            </div>
+            <button className="button-add" onClick={editProject}>
+              Сохранить
+            </button>
+          </div>
+        )}
+        {modalType === "createProject" && (
+          <div>
+            <div className="title-project">
+              <h4>{titleProject}</h4>
+              <div className="input-container">
+                <input
+                  className="name-project"
+                  value={nameProject}
+                  onChange={(e) => setNameProject(e.target.value)}
+                />
+              </div>
+              <button className="button-add" onClick={createProject}>
+                Создать
+              </button>
+            </div>
+          </div>
+        )}
+        {modalType === "addSubtask" && (
+          <div>
+            <div className="title-project subtask">
+              <h4>
+                Вы добавляете подзадачу{" "}
+                <p>в колонку(id) задачи "{defautlInput}"</p>
+              </h4>
+              <p className="title-project__decs">Введите текст</p>
+              <div>
+                <textarea className="title-project__textarea"></textarea>
+              </div>
+            </div>
+            <button className="button-add" onClick={(e) => e.preventDefault()}>
+              Добавить
+            </button>
+          </div>
+        )}
+        {modalType === "createColumn" && (
+          <div>
+            <div className="title-project">
+              <h4>Введите название колонки</h4>
+              <div className="input-container">
+                <input
+                  className="name-project"
+                  value={valueColumn}
+                  onChange={(e) => setValueColumn(e.target.value)}
+                />
+              </div>
+            </div>
+            <button className="button-add" onClick={createTab}>
+              Создать
+            </button>
+          </div>
+        )}
+        {modalType === "editColumn" && (
+          <div>
+            <div className="title-project">
+              <h4>Введите новое название</h4>
+              <div className="input-container">
+                <input
+                  className="name-project"
+                  value={columnName}
+                  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>
+            </div>
+            <button className="button-add" onClick={changeColumnParams}>
+              Сохранить
+            </button>
+          </div>
+        )}
+
+        <span className="exit" onClick={() => setActive(false)}></span>
+      </div>
+    </div>
+  );
+};
+
+export default TrackerModal;

src/components/UI/ModalTicket/ModalTicket.jsx

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

src/components/UI/TicketFullScreen/TicketFullScreen.jsx

@@ -0,0 +1,528 @@
+import React, { useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { Link, useNavigate, useParams } from "react-router-dom";
+
+import { Footer } from "@components/Common/Footer/Footer";
+import { Loader } from "@components/Common/Loader/Loader";
+
+import { apiRequest } from "../../../api/request";
+import TrackerTaskComment from "../../../components/TrackerTaskComment/TrackerTaskComment";
+import { getCorrectRequestDate, urlForLocal } from "../../../helper";
+import archive2 from "../../../images/archive.svg";
+import archive from "../../../images/archiveTracker.svg";
+import arrow from "../../../images/arrowCalendar.png";
+import arrow2 from "../../../images/arrowStart.png";
+import close from "../../../images/closeProjectPersons.svg";
+import del from "../../../images/delete.svg";
+import edit from "../../../images/edit.svg";
+import file from "../../../images/fileModal.svg";
+import link from "../../../images/link.svg";
+import plus from "../../../images/plus.svg";
+import send from "../../../images/send.svg";
+import project from "../../../images/trackerProject.svg";
+import tasks from "../../../images/trackerTasks.svg";
+import watch from "../../../images/watch.png";
+import {
+  deletePersonOnProject,
+  getBoarderLoader,
+  getProjectBoard,
+  modalToggle,
+  setProjectBoardFetch,
+  setToggleTab,
+} from "../../../redux/projectsTrackerSlice";
+import TrackerModal from "../../Modal/TrackerModal/TrackerModal";
+import { Navigation } from "../../Navigation/Navigation";
+import { ProfileBreadcrumbs } from "../../ProfileBreadcrumbs/ProfileBreadcrumbs";
+import { ProfileHeader } from "../../ProfileHeader/ProfileHeader";
+import "./ticketFullScreen.scss";
+
+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(() => {
+      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(() => {
+      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;