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

import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Link, useNavigate, useParams } from "react-router-dom";

import {
  deletePersonOnProject,
  getBoarderLoader,
  getProjectBoard,
  modalToggle,
  setProjectBoardFetch,
  setToggleTab,
} from "@redux/projectsTrackerSlice";

import { getCorrectRequestDate, urlForLocal } from "@utils/helper";

import { apiRequest } from "@api/request";

import BaseButton from "@components/Common/BaseButton/BaseButton";
import { Footer } from "@components/Common/Footer/Footer";
import { Loader } from "@components/Common/Loader/Loader";
import TrackerModal from "@components/Modal/TrackerModal/TrackerModal";
import { Navigation } from "@components/Navigation/Navigation";
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
import TrackerTaskComment from "@components/TrackerTaskComment/TrackerTaskComment";

import archive from "assets/icons/archive.svg";
import archive2 from "assets/icons/archive.svg";
import arrow from "assets/icons/arrows/arrowCalendar.png";
import arrow2 from "assets/icons/arrows/arrowStart.png";
import close from "assets/icons/close.png";
import del from "assets/icons/delete.svg";
import edit from "assets/icons/edit.svg";
import file from "assets/icons/fileModal.svg";
import link from "assets/icons/link.svg";
import plus from "assets/icons/plus.svg";
import send from "assets/icons/send.svg";
import project from "assets/icons/trackerProject.svg";
import tasks from "assets/icons/trackerTasks.svg";
import watch from "assets/icons/watch.svg";

import "./ticketFullScreen.scss";

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">
                    <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>
                    )}
                  </div>
                  <div className="content__communication">
                    <p className="tasks">
                      <BaseButton
                        onClick={() => {
                          dispatch(modalToggle("addSubtask"));
                          setModalAddWorker(true);
                        }}
                        styles={"button-green-add"}
                      >
                        <img src={plus}></img>
                        Добавить под задачу
                      </BaseButton>
                    </p>
                    <p className="file">
                      <button>
                        <img src={file} alt="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} alt="send"></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} alt="worket"></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} alt="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} alt="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} alt="edit"></img>
                    <p>{editOpen ? "сохранить" : "редактировать"}</p>
                  </div>
                  <div>
                    <img src={link} alt="link"></img>
                    <p>ссылка на проект</p>
                  </div>
                  <div>
                    <img src={archive2} alt="arch"></img>
                    <p>в архив</p>
                  </div>
                  <div onClick={deleteTask}>
                    <img src={del} alt="delete"></img>
                    <p>удалить</p>
                  </div>
                </div>
              </div>
            </div>
          </>
        )}
      </div>
      <Footer />
    </section>
  );
};

export default TicketFullScreen;