From 9bc60434cc0236ac7b1c7ee5261b02b2c47f7562 Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Thu, 22 Jun 2023 14:53:35 +0300 Subject: [PATCH] Fixed modals btn --- .../Modal/Tracker/ModalTicket/ModalTicket.jsx | 282 ++++--- .../Tracker/ModalTicket/ModalTicket.scss | 594 --------------- .../Tracker}/ModalTicket/modalTicket.scss | 18 +- .../TicketFullScreen/TicketFullScreen.jsx | 708 ++++++++++-------- src/components/UI/ModalTicket/ModalTicket.jsx | 484 ------------ .../UI/TicketFullScreen/TicketFullScreen.jsx | 456 ----------- src/pages/ProjectTracker/ProjectTracker.js | 295 ++++---- 7 files changed, 751 insertions(+), 2086 deletions(-) delete mode 100644 src/components/Modal/Tracker/ModalTicket/ModalTicket.scss rename src/components/{UI => Modal/Tracker}/ModalTicket/modalTicket.scss (96%) delete mode 100644 src/components/UI/ModalTicket/ModalTicket.jsx delete mode 100644 src/components/UI/TicketFullScreen/TicketFullScreen.jsx diff --git a/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx b/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx index 1b5da0b5..cb5dd6bc 100644 --- a/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx +++ b/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx @@ -4,14 +4,13 @@ import { Link } from "react-router-dom"; import { modalToggle, setProjectBoardFetch } from "@redux/projectsTrackerSlice"; -import { urlForLocal } from "@utils/helper"; +import { getCorrectRequestDate, urlForLocal } from "@utils/helper"; import { apiRequest } from "@api/request"; -import { getCorrectDate } from "@components/Calendar/calendarHelper"; import BaseButton from "@components/Common/BaseButton/BaseButton"; -import ModalLayout from "@components/Common/ModalLayout/ModalLayout"; import TrackerModal from "@components/Modal/TrackerModal/TrackerModal"; +import TrackerTaskComment from "@components/TrackerTaskComment/TrackerTaskComment"; import archive from "assets/icons/archive.svg"; import arrow from "assets/icons/arrows/arrowStart.png"; @@ -26,7 +25,7 @@ import plus from "assets/icons/plus.svg"; import send from "assets/icons/send.svg"; import watch from "assets/icons/watch.svg"; -import "./ModalTicket.scss"; +import "./modalTicket.scss"; export const ModalTiсket = ({ active, @@ -45,13 +44,19 @@ export const ModalTiсket = ({ comment: "", }); const [comments, setComments] = useState([]); - const [commentsEditOpen, setCommentsEditOpen] = useState({}); - const [commentsEditText, setCommentsEditText] = useState({}); const [dropListOpen, setDropListOpen] = useState(false); const [dropListMembersOpen, setDropListMembersOpen] = useState(false); const [executor, setExecutor] = useState(task.executor); const [members, setMembers] = useState(task.taskUsers); const [users, setUsers] = useState([]); + const [timerStart, setTimerStart] = useState(false); + const [timerInfo, setTimerInfo] = useState({}); + const [currentTimerCount, setCurrentTimerCount] = useState({ + hours: 0, + minute: 0, + seconds: 0, + }); + const [timerId, setTimerId] = useState(null); function deleteTask() { apiRequest("/task/update-task", { @@ -90,37 +95,78 @@ export const ModalTiсket = ({ }).then((res) => { let newComment = res; newComment.created_at = new Date(); + newComment.subComments = []; setInputsValue((prevValue) => ({ ...prevValue, comment: "" })); setComments((prevValue) => [...prevValue, newComment]); - setCommentsEditOpen((prevValue) => ({ ...prevValue, [res.id]: false })); - setCommentsEditText((prevValue) => ({ - ...prevValue, - [res.id]: res.text, - })); - }); - } - function deleteComment(commentId) { - apiRequest("/comment/update", { - method: "PUT", - data: { - comment_id: commentId, - status: 0, - }, - }).then(() => { - setComments((prevValue) => - prevValue.filter((item) => item.id !== commentId) - ); }); } - function editComment(commentId) { - apiRequest("/comment/update", { + 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: { - comment_id: commentId, - text: commentsEditText[commentId], + timer_id: timerInfo.id, + stopped_at: getCorrectRequestDate(new Date()), }, - }).then(() => {}); + }).then(() => { + setTimerStart(false); + clearInterval(timerId); + }); } function taskExecutor(person) { @@ -177,20 +223,77 @@ export const ModalTiсket = ({ apiRequest( `/comment/get-by-entity?entity_type=2&entity_id=${task.id}` ).then((res) => { - setComments(res); - res.forEach((item) => { - setCommentsEditOpen((prevValue) => ({ - ...prevValue, - [item.id]: false, - })); - setCommentsEditText((prevValue) => ({ - ...prevValue, - [item.id]: item.text, - })); - }); + 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( @@ -202,11 +305,13 @@ export const ModalTiсket = ({ }, [members]); return ( - <> - setActive(false)} + > +
e.stopPropagation()} >

@@ -258,17 +363,17 @@ export const ModalTiсket = ({ dispatch(modalToggle("addSubtask")); setAddSubtask(true); }} - styles={"tasks__button"} + styles={"button-green-add"} > Добавить под задачу

- + {0} Файлов

@@ -289,50 +394,14 @@ export const ModalTiсket = ({
{comments.map((comment) => { return ( -
-
- {getCorrectDate(comment.created_at)} -
- edit { - if (commentsEditOpen[comment.id]) { - editComment(comment.id); - } - setCommentsEditOpen((prevValue) => ({ - ...prevValue, - [comment.id]: !prevValue[comment.id], - })); - }} - /> -
- delete deleteComment(comment.id)} - /> -
- {commentsEditOpen[comment.id] ? ( - { - setCommentsEditText((prevValue) => ({ - ...prevValue, - [comment.id]: e.target.value, - })); - }} - /> - ) : ( -

{commentsEditText[comment.id]}

- )} -
+ ); })}
@@ -438,12 +507,29 @@ export const ModalTiсket = ({
Длительность : -

{"0:00:00"}

+

+ {correctTimerTime(currentTimerCount.hours)}: + {correctTimerTime(currentTimerCount.minute)}: + {correctTimerTime(currentTimerCount.seconds)} +

- + {timerStart ? ( + + ) : ( + + )}

@@ -475,14 +561,14 @@ export const ModalTiсket = ({
- + - + ); }; diff --git a/src/components/Modal/Tracker/ModalTicket/ModalTicket.scss b/src/components/Modal/Tracker/ModalTicket/ModalTicket.scss deleted file mode 100644 index ce06851a..00000000 --- a/src/components/Modal/Tracker/ModalTicket/ModalTicket.scss +++ /dev/null @@ -1,594 +0,0 @@ -.tracker-ticket { - background: #ffffff; - padding: 0; - border-radius: 8px; - align-items: initial; - display: flex; - flex-direction: row; - - .content { - display: flex; - flex-direction: column; - width: 600px; - margin: 26px 0 0 21px; - - .title-project { - color: #1458dd; - font-family: "LabGrotesque", sans-serif; - display: flex; - align-items: center; - font-weight: 700; - font-size: 22px; - line-height: 32px; - - &__category { - margin-right: 17px; - } - - &__full { - margin-left: 35%; - } - } - - &__task { - margin-top: -5px; - padding: 18px; - display: flex; - flex-direction: column; - - input { - font-style: normal; - font-size: 16px; - line-height: 24px; - max-width: 340px; - outline: none; - } - - button { - img { - margin-right: 5px; - } - } - - h5 { - font-family: "Inter", sans-serif; - font-weight: 500; - font-style: normal; - font-size: 16px; - line-height: 24px; - color: #1a1919; - margin-bottom: 0; - } - - .comments__list { - display: flex; - flex-direction: column; - max-height: 420px; - overflow: auto; - - &::-webkit-scrollbar { - width: 4px; - border-radius: 10px; - } - - &::-webkit-scrollbar-thumb { - background: #cbd9f9; - border-radius: 10px; - } - - &::-webkit-scrollbar-track { - background: #c5c0c6; - border-radius: 10px; - } - - &__item { - padding: 10px 20px; - display: flex; - flex-direction: column; - max-width: 438px; - border-radius: 44px; - font-size: 14px; - width: 100%; - position: relative; - - &__subComment { - &:before { - content: ''; - background: #E4E4E6; - height: 1px; - width: 7px; - position: absolute; - top: 36%; - left: 2.5%; - } - } - - &__main { - &:after { - content: ''; - position: absolute; - background-image: url("../../../images/mainTaskCommentImg.png"); - width: 10px; - height: 8px; - top: 50px; - left: 25px; - } - - &:before { - content: ''; - position: absolute; - background: #E4E4E6; - width: 1px; - height: calc(100% - 120px); - left: 29px; - top: 65px; - } - } - - &__fio { - display: flex; - align-items: center; - - p { - font-size: 12px; - color: #000000; - line-height: 32px; - max-width: 150px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - margin-left: 10px; - } - - img { - width: 24px; - height: 24px; - } - } - - &__date { - display: flex; - align-items: center; - column-gap: 5px; - - img { - cursor: pointer; - width: 15px; - } - - span { - font-size: 12px; - } - } - - &__text { - margin-left: 34px; - } - - &__info { - display: flex; - justify-content: space-between; - - .edit { - width: 25px; - display: flex; - align-items: center; - justify-content: center; - border-radius: 5px; - } - - .edit__open { - background: green; - } - } - - &__answer { - margin-left: 34px; - text-decoration-line: underline; - font-weight: 400; - font-size: 10px; - line-height: 32px; - cursor: pointer; - - &__new { - margin-left: 34px; - font-size: 14px; - border-radius: 5px; - border: 1px solid gainsboro; - padding: 3px 5px; - display: flex; - align-items: center; - margin-top: 5px; - - img { - width: 20px; - height: 20px; - cursor: pointer; - } - - input { - width: 90%; - border: none; - } - } - } - } - } - } - - &__description { - display: flex; - flex-direction: column; - margin-top: 10px; - - p { - font-weight: 400; - font-size: 14px; - line-height: 140%; - color: #252c32; - text-align: justify; - } - - .image-task { - margin: 10px 0 20px 0; - max-width: 330px; - } - } - - &__communication { - display: flex; - flex-direction: row; - margin: 29px 0 0 -5px; - - .tasks { - justify-content: space-evenly; - - &__button { - width: 180px; - height: 40px; - font-size: 12px; - } - } - - .tasks, - .file { - display: flex; - align-items: center; - } - - .file { - justify-content: space-between; - margin-left: 20px; - - &__button { - background: white; - width: 166px; - height: 40px; - border: 0.5px solid #1458dd; - font-weight: 400; - font-size: 12px; - color: #1458dd; - - img { - margin-right: 9px; - } - } - - span { - margin: 0 3px 0 11px; - font-weight: 500; - font-size: 12px; - line-height: 15px; - color: #6e7c87; - } - } - } - - &__input { - margin: 20px 0 20px 0; - display: flex; - align-items: center; - justify-content: space-between; - width: 438px; - height: 40px; - background: #f1f1f1; - border-radius: 44px; - - input { - width: 80%; - background: inherit; - border: none; - outline: none; - padding-left: 30px; - font-weight: 400; - font-size: 12px; - line-height: 32px; - border-radius: 44px; - } - - img { - cursor: pointer; - margin-right: 18px; - } - } - } - - .members { - display: flex; - flex-direction: column; - font-size: 14px; - - &__list { - display: flex; - flex-direction: column; - row-gap: 8px; - } - } - - .workers { - position: relative; - border-left: 1px solid #f1f1f1; - - .exit { - cursor: pointer; - position: absolute; - top: 35px; - right: 40px; - - &:before, - &:after { - content: ""; - position: absolute; - width: 16px; - height: 2px; - background: #263238; - } - - &:before { - transform: rotate(45deg); - } - &:after { - transform: rotate(-45deg); - } - } - - span { - font-family: "Inter", sans-serif; - font-weight: 500; - font-size: 11px; - color: #807777; - } - - .nameProject { - max-width: 200px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } - - .add-worker { - display: flex; - align-items: center; - position: relative; - - span { - color: #000000; - font-size: 12px; - line-height: 32px; - margin-left: 17px; - font-style: normal; - font-weight: 400; - } - - button { - cursor: pointer; - background: #8bcc60; - border-radius: 44px; - width: 33px; - height: 33px; - display: flex; - justify-content: center; - align-items: center; - border: none; - color: white; - font-size: 17px; - } - } - - .start { - font-size: 12px; - margin-top: 25px; - width: 151px; - height: 40px; - border: none; - color: white; - background: #1458dd; - border-radius: 44px; - - img { - margin-left: 10px; - } - } - - .disable { - opacity: 0.5; - pointer-events: none; - } - - .stop { - font-size: 12px; - margin-top: 25px; - width: 151px; - height: 40px; - border: none; - color: white; - background: red; - border-radius: 44px; - } - - .time { - display: flex; - align-items: center; - justify-content: space-between; - font-size: 12px; - margin-top: 20px; - width: 160px; - - p { - color: #000000; - margin: 0; - } - } - - &__creator { - font-size: 14px; - line-height: 32px; - font-weight: 500; - color: #2d4a17; - max-width: 200px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - - span { - margin-left: 5px; - font-size: 14px; - line-height: 32px; - font-weight: 500; - display: flex; - } - } - - .worker { - display: flex; - flex-direction: row; - align-items: center; - - p { - max-width: 170px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - font-size: 14px; - } - - img { - max-width: 25px; - max-height: 25px; - margin-left: 5px; - } - } - - .task__info { - display: flex; - flex-direction: column; - row-gap: 5px; - - .delete { - cursor: pointer; - } - - .executor { - display: flex; - font-size: 14px; - align-items: center; - - p { - max-width: 170px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } - - img { - margin-left: 5px; - max-width: 25px; - max-height: 25px; - } - } - - .dropdownList { - position: absolute; - background: white; - padding: 10px; - border-radius: 10px; - top: 0; - z-index: 10; - border: 1px solid gray; - width: 260px; - display: flex; - flex-direction: column; - row-gap: 8px; - - .noUsers { - font-size: 14px; - text-align: center; - } - - &__close { - cursor: pointer; - margin-left: auto; - width: 12px; - margin-right: 5px; - } - - &__person { - display: flex; - justify-content: space-between; - cursor: pointer; - - img { - max-width: 30px; - max-height: 30px; - } - } - } - } - - &_box { - padding: 25px 85px 40px 40px; - border-bottom: 1px solid #f1f1f1; - - &-middle { - padding: 0px 40px 25px 40px; - border-bottom: 1px solid #f1f1f1; - } - - &-bottom { - padding: 40px 110px 75px 56px; - font-weight: 400; - font-size: 14px; - line-height: 38px; - - div { - display: flex; - cursor: pointer; - align-items: center; - padding-left: 10px; - - p { - margin: 0 0 0 12px; - } - } - - .edit { - background: #52b709; - border-radius: 50px; - - p { - font-weight: 700; - } - } - } - } - } -} - -.subtask { - h4 { - width: 90%; - p { - color: #1458dd; - } - } -} diff --git a/src/components/UI/ModalTicket/modalTicket.scss b/src/components/Modal/Tracker/ModalTicket/modalTicket.scss similarity index 96% rename from src/components/UI/ModalTicket/modalTicket.scss rename to src/components/Modal/Tracker/ModalTicket/modalTicket.scss index 5912f569..b77a7253 100644 --- a/src/components/UI/ModalTicket/modalTicket.scss +++ b/src/components/Modal/Tracker/ModalTicket/modalTicket.scss @@ -109,8 +109,8 @@ &__subComment { &:before { - content: ''; - background: #E4E4E6; + content: ""; + background: #e4e4e6; height: 1px; width: 7px; position: absolute; @@ -121,9 +121,9 @@ &__main { &:after { - content: ''; + content: ""; position: absolute; - background-image: url("../../../assets/images/mainTaskCommentImg.png"); + background-image: url("assets/images/mainTaskCommentImg.png"); width: 10px; height: 8px; top: 50px; @@ -131,9 +131,9 @@ } &:before { - content: ''; + content: ""; position: absolute; - background: #E4E4E6; + background: #e4e4e6; width: 1px; height: calc(100% - 120px); left: 29px; @@ -258,16 +258,12 @@ .tasks { justify-content: space-evenly; - button { + .button-green-add { width: 180px; height: 40px; - background: #52b709; - border-radius: 44px; font-weight: 400; font-size: 12px; line-height: 32px; - border: none; - color: #ffffff; } } diff --git a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx index 6c845bab..40cd4821 100644 --- a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx +++ b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx @@ -1,45 +1,47 @@ 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, - getProjectBoard, - getBoarderLoader, -} from "../../../../redux/projectsTrackerSlice"; -import { apiRequest } from "../../../../api/request"; +} from "@redux/projectsTrackerSlice"; -import project from "../../../../assets/icons/trackerProject.svg"; -import watch from "../../../../assets/icons/watch.svg"; -import file from "../../../../assets/icons/fileModal.svg"; -import send from "../../../../assets/icons/send.svg"; -import arrow2 from "../../../../assets/icons/arrows/arrowStart.png"; -import plus from "../../../../assets/icons/plus.svg"; -import tasks from "../../../../assets/icons/trackerTasks.svg"; -import archive from "../../../../assets/icons/archive.svg"; -import arrow from "../../../../assets/icons/arrows/arrowCalendar.png"; -import link from "../../../../assets/icons/link.svg"; -import archive2 from "../../../../assets/icons/archive.svg"; -import del from "../../../../assets/icons/delete.svg"; -import edit from "../../../../assets/icons/edit.svg"; -import close from "../../../../assets/icons/close.png"; +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"; -import {getCorrectRequestDate, urlForLocal} from "../../../../utils/helper"; - -export const TicketFullScreen = ({}) => { +export const TicketFullScreen = () => { const [modalAddWorker, setModalAddWorker] = useState(false); const ticketId = useParams(); const dispatch = useDispatch(); @@ -51,35 +53,41 @@ export const TicketFullScreen = ({}) => { const [inputsValue, setInputsValue] = useState({}); const [loader, setLoader] = useState(true); const [comments, setComments] = useState([]); - const [personListOpen, setPersonListOpen] = useState(false) - const [timerStart, setTimerStart] = useState(false) - const [timerInfo, setTimerInfo] = 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) => { + 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: []}) + acc.push({ ...cur, subComments: [] }); } else { acc.forEach((item) => { - if (item.id === cur.parent_id) item.subComments.push(cur) - }) + if (item.id === cur.parent_id) item.subComments.push(cur); + }); } - return acc - }, []) - setComments(comments) - }) + return acc; + }, []); + setComments(comments); + }); taskInfo.timers.forEach((time) => { if (!time.stopped_at) { - setTimerStart(true) - setTimerInfo(time) + setTimerStart(true); + setTimerInfo(time); } - }) + }); dispatch(setProjectBoardFetch(taskInfo.project_id)); - setLoader(boardLoader) + setLoader(boardLoader); }); }, []); @@ -101,10 +109,9 @@ export const TicketFullScreen = ({}) => { data: { task_id: taskInfo.id, title: inputsValue.title, - description: inputsValue.description + description: inputsValue.description, }, - }).then(() => { - }); + }).then(() => {}); } function createComment() { @@ -113,15 +120,15 @@ export const TicketFullScreen = ({}) => { data: { text: inputsValue.comment, entity_type: 2, - entity_id: taskInfo.id - } + entity_id: taskInfo.id, + }, }).then((res) => { - let newComment = res - newComment.created_at = new Date() - newComment.subComments = [] - setInputsValue((prevValue) => ({...prevValue, comment: ''})) - setComments((prevValue) => ([...prevValue, newComment])) - }) + let newComment = res; + newComment.created_at = new Date(); + newComment.subComments = []; + setInputsValue((prevValue) => ({ ...prevValue, comment: "" })); + setComments((prevValue) => [...prevValue, newComment]); + }); } function startTaskTimer() { @@ -130,12 +137,12 @@ export const TicketFullScreen = ({}) => { data: { entity_type: 2, entity_id: taskInfo.id, - created_at: getCorrectRequestDate(new Date()) - } + created_at: getCorrectRequestDate(new Date()), + }, }).then((res) => { - setTimerStart(true) - setTimerInfo(res) - }) + setTimerStart(true); + setTimerInfo(res); + }); } function stopTaskTimer() { @@ -143,9 +150,9 @@ export const TicketFullScreen = ({}) => { method: "PUT", data: { timer_id: timerInfo.id, - stopped_at: getCorrectRequestDate(new Date()) - } - }).then(() => setTimerStart(false)) + stopped_at: getCorrectRequestDate(new Date()), + }, + }).then(() => setTimerStart(false)); } function deletePerson(userId) { @@ -153,47 +160,50 @@ export const TicketFullScreen = ({}) => { method: "DELETE", data: { project_id: projectBoard.id, - user_id: userId + user_id: userId, }, }).then(() => { - dispatch(deletePersonOnProject(userId)) + dispatch(deletePersonOnProject(userId)); }); } function commentDelete(comment) { - setComments((prevValue) => prevValue.filter((item) => item.id !== comment.id)) + setComments((prevValue) => + prevValue.filter((item) => item.id !== comment.id) + ); if (comment.subComments.length) { comment.subComments.forEach((subComment) => { apiRequest("/comment/update", { method: "PUT", data: { comment_id: subComment.id, - status: 0 - } - }).then(() => { - }) - }) + status: 0, + }, + }).then(() => {}); + }); } } function addSubComment(commentId, subComment) { - const addSubComment = comments + const addSubComment = comments; addSubComment.forEach((comment) => { if (comment.id === commentId) { - comment.subComments.push(subComment) + comment.subComments.push(subComment); } - }) - setComments(addSubComment) + }); + setComments(addSubComment); } function subCommentDelete(subComment) { - const deleteSubComment = comments + const deleteSubComment = comments; deleteSubComment.forEach((comment, index) => { if (comment.id === subComment.parent_id) { - deleteSubComment[index].subComments = comment.subComments.filter((item) => item.id !== subComment.id) + deleteSubComment[index].subComments = comment.subComments.filter( + (item) => item.id !== subComment.id + ); } - }) - setComments([...deleteSubComment]) + }); + setComments([...deleteSubComment]); } const toggleTabs = (index) => { @@ -201,256 +211,320 @@ export const TicketFullScreen = ({}) => { }; return ( -
- - -
-
- -

Управление проектами с трекером

-
+
+ + +
+
+ +

Управление проектами с трекером

-
-
- toggleTabs(1)} - > - img -

Проекты

- - toggleTabs(2)} - > - img -

Все мои задачи

- - toggleTabs(3)} - > - img -

Архив

- -
- {loader ? : - <> -
-
-
-

Проект : {projectBoard.name}

+
+
+
+ toggleTabs(1)} + > + img +

Проекты

+ + toggleTabs(2)} + > + img +

Все мои задачи

+ + toggleTabs(3)} + > + img +

Архив

+ +
+ {loader ? ( + + ) : ( + <> +
+
+
+

Проект : {projectBoard.name}

- + -
- {/*avatar*/} - {/*avatar*/} - {projectBoard.projectUsers?.length} - { - setPersonListOpen(true) - }} - > - + - -

добавить участника

- {personListOpen && -
- close setPersonListOpen(false)} /> -
{projectBoard.projectUsers?.length}участник
-
В проекте - “{projectBoard.name}”
-
- {projectBoard.projectUsers?.map((person) => { - return
- avatar - {person.user.fio} - delete deletePerson(person.user_id)}/> -
- }) - } -
-
{ - dispatch(modalToggle("addWorker")); - setModalAddWorker(true); - setPersonListOpen(false) - }} - > - + -

Добавить участников

-
-
- } -
- -
-

Вернуться на проекты

- arrow +
+ + {projectBoard.projectUsers?.length} + + { + setPersonListOpen(true); + }} + > + + + +

добавить участника

+ {personListOpen && ( +
+ close setPersonListOpen(false)} + /> +
+ {projectBoard.projectUsers?.length} + участник
- +
+ В проекте - “{projectBoard.name}” +
+
+ {projectBoard.projectUsers?.map((person) => { + return ( +
+ avatar + {person.user.fio} + delete deletePerson(person.user_id)} + /> +
+ ); + })} +
+
{ + dispatch(modalToggle("addWorker")); + setModalAddWorker(true); + setPersonListOpen(false); + }} + > + + +

Добавить участников

+
+
+ )} +
+ +
+

Вернуться на проекты

+ arrow
+ +
+
+
+
+
+
+ Задача + {editOpen ? ( + { + setInputsValue((prevValue) => ({ + ...prevValue, + title: e.target.value, + })); + }} + /> + ) : ( +
{inputsValue.title}
+ )} +
+ {editOpen ? ( + { + setInputsValue((prevValue) => ({ + ...prevValue, + description: e.target.value, + })); + }} + /> + ) : ( +

{inputsValue.description}

+ )} +
+
+

+ { + dispatch(modalToggle("addSubtask")); + setModalAddWorker(true); + }} + styles={"button-green-add"} + > + + Добавить под задачу + +

+

+ + {0} + Файлов +

+
+
+ { + setInputsValue((prevValue) => ({ + ...prevValue, + comment: e.target.value, + })); + }} + /> + send +
+
+ {comments.map((comment) => { + return ( + + ); + })}
-
-
-
- Задача - {editOpen ? { - setInputsValue((prevValue) => ({...prevValue, title: e.target.value})) - }} /> :
{inputsValue.title}
} -
- {editOpen ? { - setInputsValue((prevValue) => ({...prevValue, description: e.target.value})) - }}/> :

{inputsValue.description}

} - {/**/} -
-
-

- -

-

- - {0} - Файлов -

-
-
- { - setInputsValue((prevValue) => ({...prevValue, comment: e.target.value})) - }} /> - send -
-
- {comments.map((comment) => { - return - }) - - } -
-
+
+
+
+

+ Создатель : {taskInfo.user?.fio} +

+
+ {Boolean(taskInfo.taskUsers?.length) && + taskInfo.taskUsers.map((worker, index) => { + return ( +
+ worket +

{worker.name}

+
+ ); + })}
-
-
-

- Создатель : {taskInfo.user?.fio} -

-
- {Boolean(taskInfo.taskUsers?.length) && - taskInfo.taskUsers.map((worker, index) => { - return ( -
- worket -

{worker.name}

-
- ); - })} -
-
- - Добавить исполнителя -
-
- - Добавить участников -
-
+
+ + Добавить исполнителя +
+
+ + Добавить участников +
+
-
-
- watch - Длительность : -

{"0:00:00"}

-
+
+
+ watch + Длительность : +

{"0:00:00"}

+
- {timerStart ? - - : - + {timerStart ? ( + + ) : ( + + )} +
-
-
{ - if(editOpen) { - setEditOpen(!editOpen) - editTask() - } else { - setEditOpen(!editOpen) - } - }}> - edit -

{editOpen ? 'сохранить' : 'редактировать'}

-
-
- link -

ссылка на проект

-
-
- arch -

в архив

-
-
- delete -

удалить

-
-
+
+
{ + if (editOpen) { + setEditOpen(!editOpen); + editTask(); + } else { + setEditOpen(!editOpen); + } + }} + > + edit +

{editOpen ? "сохранить" : "редактировать"}

+
+
+ link +

ссылка на проект

+
+
+ arch +

в архив

+
+
+ delete +

удалить

- - } -
-
-
+
+ + + )} + +
+
); }; diff --git a/src/components/UI/ModalTicket/ModalTicket.jsx b/src/components/UI/ModalTicket/ModalTicket.jsx deleted file mode 100644 index ba3b2025..00000000 --- a/src/components/UI/ModalTicket/ModalTicket.jsx +++ /dev/null @@ -1,484 +0,0 @@ -import React, {useEffect, useState} from "react"; -import { Link } from "react-router-dom"; -import TrackerModal from "../../../components/Modal/TrackerModal/TrackerModal"; -import TrackerTaskComment from "../../../components/TrackerTaskComment/TrackerTaskComment"; -import { apiRequest } from "../../../api/request"; -import { useDispatch } from "react-redux"; -import "./modalTicket.scss" -import { - modalToggle, - setProjectBoardFetch, -} from "../../../redux/projectsTrackerSlice"; - -import category from "../../../assets/icons/category.svg"; -import watch from "../../../assets/icons/watch.svg"; -import file from "../../../assets/icons/fileModal.svg"; -import arrow from "../../../assets/icons/arrows/arrowStart.png"; -import link from "../../../assets/icons/link.svg"; -import archive from "../../../assets/icons/archive.svg"; -import del from "../../../assets/icons/delete.svg"; -import edit from "../../../assets/icons/edit.svg"; -import send from "../../../assets/icons/send.svg"; -import plus from "../../../assets/icons/plus.svg"; -import fullScreen from "../../../assets/icons/arrows/inFullScreen.svg"; -import close from "../../../assets/icons/closeProjectPersons.svg"; - -import {urlForLocal, getCorrectRequestDate} from "../../../utils/helper"; - -export const ModalTiсket = ({ - active, - setActive, - task, - projectId, - projectName, - projectUsers -}) => { - const dispatch = useDispatch(); - const [addSubtask, setAddSubtask] = useState(false); - const [editOpen, setEditOpen] = useState(false); - const [inputsValue, setInputsValue] = useState({title: task.title, description: task.description, comment: ''}); - const [comments, setComments] = useState([]); - const [dropListOpen, setDropListOpen] = useState(false) - const [dropListMembersOpen, setDropListMembersOpen] = useState(false) - const [executor, setExecutor] = useState(task.executor) - const [members, setMembers] = useState(task.taskUsers) - const [users, setUsers] = useState([]) - const [timerStart, setTimerStart] = useState(false) - const [timerInfo, setTimerInfo] = useState({}) - const [currentTimerCount, setCurrentTimerCount] = useState({ - hours: 0, - minute: 0, - seconds: 0 - }) - const [timerId, setTimerId] = useState(null) - - function deleteTask() { - apiRequest("/task/update-task", { - method: "PUT", - data: { - task_id: task.id, - status: 0, - }, - }).then((res) => { - setActive(false); - dispatch(setProjectBoardFetch(projectId)); - }); - } - - function editTask() { - apiRequest("/task/update-task", { - method: "PUT", - data: { - task_id: task.id, - title: inputsValue.title, - description: inputsValue.description - }, - }).then((res) => { - dispatch(setProjectBoardFetch(projectId)); - }); - } - - function createComment() { - apiRequest("/comment/create", { - method: "POST", - data: { - text: inputsValue.comment, - entity_type: 2, - entity_id: task.id - } - }).then((res) => { - let newComment = res - newComment.created_at = new Date() - newComment.subComments = [] - setInputsValue((prevValue) => ({...prevValue, comment: ''})) - setComments((prevValue) => ([...prevValue, newComment])) - }) - } - - function commentDelete(comment) { - setComments((prevValue) => prevValue.filter((item) => item.id !== comment.id)) - if (comment.subComments.length) { - // promiseAll - comment.subComments.forEach((subComment) => { - apiRequest("/comment/update", { - method: "PUT", - data: { - comment_id: subComment.id, - status: 0 - } - }).then(() => { - }) - }) - } - } - - function addSubComment(commentId, subComment) { - const addSubComment = comments - addSubComment.forEach((comment) => { - if (comment.id === commentId) { - comment.subComments.push(subComment) - } - }) - setComments(addSubComment) - } - - function subCommentDelete(subComment) { - const deleteSubComment = comments - deleteSubComment.forEach((comment, index) => { - if (comment.id === subComment.parent_id) { - deleteSubComment[index].subComments = comment.subComments.filter((item) => item.id !== subComment.id) - } - }) - setComments([...deleteSubComment]) - } - - function startTaskTimer() { - apiRequest("/timer/create", { - method: "POST", - data: { - entity_type: 2, - entity_id: task.id, - created_at: getCorrectRequestDate(new Date()) - } - }).then((res) => { - setTimerStart(true) - setTimerInfo(res) - startTimer() - }) - } - - function stopTaskTimer() { - apiRequest("/timer/update", { - method: "PUT", - data: { - timer_id: timerInfo.id, - stopped_at: getCorrectRequestDate(new Date()) - } - }).then(() => { - setTimerStart(false) - clearInterval(timerId) - }) - } - - function taskExecutor(person) { - apiRequest("/task/update-task", { - method: "PUT", - data: { - task_id: task.id, - executor_id: person.user_id - }, - }).then((res) => { - setDropListOpen(false) - setExecutor(res.executor) - }); - } - - function deleteTaskExecutor() { - apiRequest("/task/update-task", { - method: "PUT", - data: { - task_id: task.id, - executor_id: 0 - }, - }).then(() => { - setExecutor(null) - }); - } - - function addMember(person) { - apiRequest("/task/add-user-to-task", { - method: "POST", - data: { - task_id: task.id, - user_id: person.user_id - }, - }).then((res) => { - setDropListMembersOpen(false) - setMembers((prevValue) => ([...prevValue, res])) - }); - } - - function deleteMember(person) { - apiRequest("/task/del-user", { - method: "DELETE", - data: { - task_id: task.id, - user_id: person.user_id - }, - }).then(() => { - setMembers(members.filter((item) => item.user_id !== person.user_id)) - }); - } - - useEffect(() => { - apiRequest(`/comment/get-by-entity?entity_type=2&entity_id=${task.id}`).then((res) => { - const comments = res.reduce((acc, cur) => { - if (!cur.parent_id) { - acc.push({...cur, subComments: []}) - } else { - acc.forEach((item) => { - if (item.id === cur.parent_id) item.subComments.push(cur) - }) - } - return acc - }, []) - setComments(comments) - }) - apiRequest(`/timer/get-by-entity?entity_type=2&entity_id=${task.id}`).then((res) => { - let timerSeconds = 0 - res.length && res.forEach((time) => { - timerSeconds += time.deltaSeconds - setCurrentTimerCount({ - hours: Math.floor(timerSeconds / 60 / 60), - minute: Math.floor(timerSeconds / 60 % 60), - seconds: timerSeconds % 60} - ) - updateTimerHours = Math.floor(timerSeconds / 60 / 60) - updateTimerMinute = Math.floor(timerSeconds / 60 % 60) - updateTimerSec = timerSeconds % 60 - if (!time.stopped_at) { - setTimerStart(true) - startTimer() - setTimerInfo(time) - } - }) - }) - }, []) - - function startTimer () { - setTimerId(setInterval(() => { - run() - }, 1000)) - } - - let updateTimerSec = currentTimerCount.seconds, updateTimerMinute = currentTimerCount.minute, updateTimerHours = currentTimerCount.hours - - function run () { - updateTimerSec++ - if (updateTimerSec > 60) { - updateTimerMinute++ - updateTimerSec = 0 - } - if (updateTimerMinute === 60) { - updateTimerMinute = 0 - updateTimerHours++ - } - - return setCurrentTimerCount({ - hours: updateTimerHours, - minute: updateTimerMinute, - seconds: updateTimerSec - }) - } - - function correctTimerTime (time) { - if (time < 10) return `0${time}` - if (time > 10) return time - } - - - useEffect(() => { - let ids = members.map((user) => user.user_id) - setUsers(projectUsers.reduce((acc, cur) => { - if (!ids.includes(cur.user_id)) acc.push(cur) - return acc - }, [])) - }, [members]) - - - return ( -
setActive(false)} - > -
e.stopPropagation()} - > -
-

- - Проект: {projectName} - - - -

- -
- Задача - {editOpen ? { - setInputsValue((prevValue) => ({...prevValue, title: e.target.value})) - }} /> :
{inputsValue.title}
} -
- {editOpen ? { - setInputsValue((prevValue) => ({...prevValue, description: e.target.value})) - }}/> :

{inputsValue.description}

} - {/**/} -
-
-

- -

-

- - {0} - Файлов -

-
-
- { - setInputsValue((prevValue) => ({...prevValue, comment: e.target.value})) - }} /> - -
-
- {comments.map((comment) => { - return - }) - } -
-
-
-
-
- setActive(false)}> - {task.title} -

Создатель : {task.user?.fio}

- - {executor ? -
-

Исполнитель: {executor.fio}

- avatar - deleteTaskExecutor()} /> -
: -
- - Добавить исполнителя - {dropListOpen && -
- setDropListOpen(false)} /> - {projectUsers.map((person) => { - return
taskExecutor(person)}> - {person.user.fio} - -
- }) - } -
- } -
- } - - {Boolean(members.length) && -
-

Участники:

-
- {members.map((member) => { - return
-

{member.fio}

- - deleteMember(member)} /> -
- }) - } -
-
- } - -
- - Добавить участников - {dropListMembersOpen && -
- setDropListMembersOpen(false)} /> - {users.length ? users.map((person) => { - return
addMember(person)}> - {person.user.fio} - -
- }) :

Нет пользователей

- } -
- } -
-
- -
-
- - Длительность : -

- {correctTimerTime(currentTimerCount.hours)}:{correctTimerTime(currentTimerCount.minute)}:{correctTimerTime(currentTimerCount.seconds)} -

-
- - {timerStart ? - - : - - } -
- -
-
{ - if(editOpen) { - setEditOpen(!editOpen) - editTask() - } else { - setEditOpen(!editOpen) - } - }}> - -

{editOpen ? 'сохранить' : 'редактировать'}

-
-
- -

ссылка на проект

-
-
- -

в архив

-
-
- -

удалить

-
-
-
-
- - -
- ); -}; - -export default ModalTiсket; diff --git a/src/components/UI/TicketFullScreen/TicketFullScreen.jsx b/src/components/UI/TicketFullScreen/TicketFullScreen.jsx deleted file mode 100644 index fe9beaa7..00000000 --- a/src/components/UI/TicketFullScreen/TicketFullScreen.jsx +++ /dev/null @@ -1,456 +0,0 @@ -import React, { useEffect, useState } from "react"; - -import { ProfileHeader } from "../../ProfileHeader/ProfileHeader"; -import { ProfileBreadcrumbs } from "../../ProfileBreadcrumbs/ProfileBreadcrumbs"; -import { Footer } from "@components/Common/Footer/Footer"; -import { Link, useParams, useNavigate } from "react-router-dom"; -import TrackerModal from "../../Modal/TrackerModal/TrackerModal"; -import TrackerTaskComment from "../../../components/TrackerTaskComment/TrackerTaskComment"; -import { Navigation } from "../../Navigation/Navigation"; -import {Loader} from "@components/Common/Loader/Loader"; - -import {useDispatch, useSelector} from "react-redux"; -import { - deletePersonOnProject, - modalToggle, - setProjectBoardFetch, - setToggleTab, - getProjectBoard, - getBoarderLoader, -} from "../../../redux/projectsTrackerSlice"; -import { apiRequest } from "../../../api/request"; - -import project from "../../../images/trackerProject.svg"; -import watch from "../../../images/watch.png"; -import file from "../../../images/fileModal.svg"; -import send from "../../../images/send.svg"; -import arrow2 from "../../../images/arrowStart.png"; -import plus from "../../../images/plus.svg"; -import tasks from "../../../images/trackerTasks.svg"; -import archive from "../../../images/archiveTracker.svg"; -import arrow from "../../../images/arrowCalendar.png"; -import link from "../../../images/link.svg"; -import archive2 from "../../../images/archive.svg"; -import del from "../../../images/delete.svg"; -import edit from "../../../images/edit.svg"; -import close from "../../../images/closeProjectPersons.svg"; - -import "./ticketFullScreen.scss"; -import {getCorrectRequestDate, urlForLocal} from "../../../helper"; - -export const TicketFullScreen = ({}) => { - const [modalAddWorker, setModalAddWorker] = useState(false); - const ticketId = useParams(); - const dispatch = useDispatch(); - const navigate = useNavigate(); - const projectBoard = useSelector(getProjectBoard); - const boardLoader = useSelector(getBoarderLoader); - const [taskInfo, setTaskInfo] = useState({}); - const [editOpen, setEditOpen] = useState(false); - const [inputsValue, setInputsValue] = useState({}); - const [loader, setLoader] = useState(true); - const [comments, setComments] = useState([]); - const [personListOpen, setPersonListOpen] = useState(false) - const [timerStart, setTimerStart] = useState(false) - const [timerInfo, setTimerInfo] = useState({}) - - useEffect(() => { - apiRequest(`/task/get-task?task_id=${ticketId.id}`).then((taskInfo) => { - setTaskInfo(taskInfo); - setInputsValue({title: taskInfo.title, description: taskInfo.description, comment: ''}) - apiRequest(`/comment/get-by-entity?entity_type=2&entity_id=${taskInfo.id}`).then((res) => { - const comments = res.reduce((acc, cur) => { - if (!cur.parent_id) { - acc.push({...cur, subComments: []}) - } else { - acc.forEach((item) => { - if (item.id === cur.parent_id) item.subComments.push(cur) - }) - } - return acc - }, []) - setComments(comments) - }) - taskInfo.timers.forEach((time) => { - if (!time.stopped_at) { - setTimerStart(true) - setTimerInfo(time) - } - }) - dispatch(setProjectBoardFetch(taskInfo.project_id)); - setLoader(boardLoader) - }); - }, []); - - function deleteTask() { - apiRequest("/task/update-task", { - method: "PUT", - data: { - task_id: ticketId.id, - status: 0, - }, - }).then((res) => { - navigate(`/tracker/project/${taskInfo.project_id}`); - }); - } - - function editTask() { - apiRequest("/task/update-task", { - method: "PUT", - data: { - task_id: taskInfo.id, - title: inputsValue.title, - description: inputsValue.description - }, - }).then(() => { - }); - } - - function createComment() { - apiRequest("/comment/create", { - method: "POST", - data: { - text: inputsValue.comment, - entity_type: 2, - entity_id: taskInfo.id - } - }).then((res) => { - let newComment = res - newComment.created_at = new Date() - newComment.subComments = [] - setInputsValue((prevValue) => ({...prevValue, comment: ''})) - setComments((prevValue) => ([...prevValue, newComment])) - }) - } - - function startTaskTimer() { - apiRequest("/timer/create", { - method: "POST", - data: { - entity_type: 2, - entity_id: taskInfo.id, - created_at: getCorrectRequestDate(new Date()) - } - }).then((res) => { - setTimerStart(true) - setTimerInfo(res) - }) - } - - function stopTaskTimer() { - apiRequest("/timer/update", { - method: "PUT", - data: { - timer_id: timerInfo.id, - stopped_at: getCorrectRequestDate(new Date()) - } - }).then(() => setTimerStart(false)) - } - - function deletePerson(userId) { - apiRequest("/project/del-user", { - method: "DELETE", - data: { - project_id: projectBoard.id, - user_id: userId - }, - }).then((res) => { - dispatch(deletePersonOnProject(userId)) - }); - } - - function commentDelete(comment) { - setComments((prevValue) => prevValue.filter((item) => item.id !== comment.id)) - if (comment.subComments.length) { - comment.subComments.forEach((subComment) => { - apiRequest("/comment/update", { - method: "PUT", - data: { - comment_id: subComment.id, - status: 0 - } - }).then(() => { - }) - }) - } - } - - function addSubComment(commentId, subComment) { - const addSubComment = comments - addSubComment.forEach((comment) => { - if (comment.id === commentId) { - comment.subComments.push(subComment) - } - }) - setComments(addSubComment) - } - - function subCommentDelete(subComment) { - const deleteSubComment = comments - deleteSubComment.forEach((comment, index) => { - if (comment.id === subComment.parent_id) { - deleteSubComment[index].subComments = comment.subComments.filter((item) => item.id !== subComment.id) - } - }) - setComments([...deleteSubComment]) - } - - const toggleTabs = (index) => { - dispatch(setToggleTab(index)); - }; - - return ( -
- - -
-
- -

Управление проектами с трекером

-
-
-
-
- toggleTabs(1)} - > - img -

Проекты

- - toggleTabs(2)} - > - img -

Все мои задачи

- - toggleTabs(3)} - > - img -

Архив

- -
- {loader ? : - <> -
-
-
-

Проект : {projectBoard.name}

- - - -
- {/*avatar*/} - {/*avatar*/} - {projectBoard.projectUsers?.length} - { - setPersonListOpen(true) - }} - > - + - -

добавить участника

- {personListOpen && -
- close setPersonListOpen(false)} /> -
{projectBoard.projectUsers?.length}участник
-
В проекте - “{projectBoard.name}”
-
- {projectBoard.projectUsers?.map((person) => { - return
- avatar - {person.user.fio} - delete deletePerson(person.user_id)}/> -
- }) - } -
-
{ - dispatch(modalToggle("addWorker")); - setModalAddWorker(true); - setPersonListOpen(false) - }} - > - + -

Добавить участников

-
-
- } -
- -
-

Вернуться на проекты

- arrow -
- -
-
-
-
-
-
- Задача - {editOpen ? { - setInputsValue((prevValue) => ({...prevValue, title: e.target.value})) - }} /> :
{inputsValue.title}
} -
- {editOpen ? { - setInputsValue((prevValue) => ({...prevValue, description: e.target.value})) - }}/> :

{inputsValue.description}

} - {/**/} -
-
-

- -

-

- - {0} - Файлов -

-
-
- { - setInputsValue((prevValue) => ({...prevValue, comment: e.target.value})) - }} /> - -
-
- {comments.map((comment) => { - return - }) - - } -
-
-
-
-
-

- Создатель : {taskInfo.user?.fio} -

-
- {Boolean(taskInfo.taskUsers?.length) && - taskInfo.taskUsers.map((worker, index) => { - return ( -
- -

{worker.name}

-
- ); - })} -
- -
- - Добавить исполнителя -
-
- - Добавить участников -
-
- -
-
- - Длительность : -

{"0:00:00"}

-
- - {timerStart ? - - : - - } -
- -
-
{ - if(editOpen) { - setEditOpen(!editOpen) - editTask() - } else { - setEditOpen(!editOpen) - } - }}> - -

{editOpen ? 'сохранить' : 'редактировать'}

-
-
- -

ссылка на проект

-
-
- -

в архив

-
-
- -

удалить

-
-
-
-
- - } -
-
-
- ); -}; - -export default TicketFullScreen; diff --git a/src/pages/ProjectTracker/ProjectTracker.js b/src/pages/ProjectTracker/ProjectTracker.js index 6655b266..658e7cf2 100644 --- a/src/pages/ProjectTracker/ProjectTracker.js +++ b/src/pages/ProjectTracker/ProjectTracker.js @@ -1,44 +1,46 @@ import React, { useEffect, useRef, useState } from "react"; -import { Link, useParams } from "react-router-dom"; -import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader"; -import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"; -import { Footer } from "@components/Common/Footer/Footer"; -import { Navigation } from "../../components/Navigation/Navigation"; -import { Loader } from "@components/Common/Loader/Loader"; -import { urlForLocal } from '../../utils/helper' - import { useDispatch, useSelector } from "react-redux"; -import { apiRequest } from "../../api/request"; +import { Link, useParams } from "react-router-dom"; + import { - getProjectBoard, - getBoarderLoader, - modalToggle, - moveProjectTask, - setProjectBoardFetch, - setToggleTab, activeLoader, - setColumnName, - setColumnId, - setColumnPriority, deletePersonOnProject, filterCreatedByMe, filteredParticipateTasks, - movePositionProjectTask -} from "../../redux/projectsTrackerSlice"; + getBoarderLoader, + getProjectBoard, + modalToggle, + movePositionProjectTask, + moveProjectTask, + setColumnId, + setColumnName, + setColumnPriority, + setProjectBoardFetch, + setToggleTab, +} from "@redux/projectsTrackerSlice"; -import ModalTicket from "../../components/UI/ModalTicket/ModalTicket"; -import TrackerModal from "../../components/Modal/TrackerModal/TrackerModal"; +import { urlForLocal } from "@utils/helper"; -import project from "../../assets/icons/trackerProject.svg"; -import tasks from "../../assets/icons/trackerTasks.svg"; -import archive from "../../assets/icons/archiveTracker.svg"; -import commentsBoard from "../../assets/icons/commentsBoard.svg"; -import filesBoard from "../../assets/icons/filesBoard.svg"; -import arrow from "../../assets/icons/arrows/arrowCalendar.png"; -import del from "../../assets/icons/delete.svg"; -import edit from "../../assets/icons/edit.svg"; -import close from "../../assets/icons/close.png" -import accept from "../../assets/images/accept.png"; +import { apiRequest } from "@api/request"; + +import { Footer } from "@components/Common/Footer/Footer"; +import { Loader } from "@components/Common/Loader/Loader"; +import ModalTicket from "@components/Modal/Tracker/ModalTicket/ModalTicket"; +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 archive from "assets/icons/archiveTracker.svg"; +import arrow from "assets/icons/arrows/arrowCalendar.png"; +import close from "assets/icons/close.png"; +import commentsBoard from "assets/icons/commentsBoard.svg"; +import del from "assets/icons/delete.svg"; +import edit from "assets/icons/edit.svg"; +import filesBoard from "assets/icons/filesBoard.svg"; +import project from "assets/icons/trackerProject.svg"; +import tasks from "assets/icons/trackerTasks.svg"; +import accept from "assets/images/accept.png"; export const ProjectTracker = () => { const dispatch = useDispatch(); @@ -48,13 +50,14 @@ export const ProjectTracker = () => { const [selectedTab, setSelectedTab] = useState(0); const [priorityTask, setPriorityTask] = useState(0); const [wrapperHover, setWrapperHover] = useState({}); - const [taskHover, setTaskHover] = useState({}) + const [taskHover, setTaskHover] = useState({}); const [modalAdd, setModalAdd] = useState(false); const [modalActiveTicket, setModalActiveTicket] = useState(false); const [selectedTicket, setSelectedTicket] = useState({}); - const [personListOpen, setPersonListOpen] = useState(false) - const [checkBoxParticipateTasks, setCheckBoxParticipateTasks] = useState(false) - const [checkBoxMyTasks, setCheckBoxMyTasks] = 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); @@ -65,20 +68,20 @@ export const ProjectTracker = () => { }, []); useEffect(() => { - const tasksHover = {} - const columnHover = {} + const tasksHover = {}; + const columnHover = {}; if (Object.keys(projectBoard).length) { projectBoard.columns.forEach((column) => { setOpenColumnSelect((prevState) => ({ ...prevState, [column.id]: false, })); - columnHover[column.id] = false - column.tasks.forEach(task => tasksHover[task.id] = false) + columnHover[column.id] = false; + column.tasks.forEach((task) => (tasksHover[task.id] = false)); }); } - setWrapperHover(columnHover) - setTaskHover(tasksHover) + setWrapperHover(columnHover); + setTaskHover(tasksHover); }, [projectBoard]); function dragStartHandler(e, task, columnId) { @@ -86,35 +89,37 @@ export const ProjectTracker = () => { } function dragOverTaskHandler(e, task) { - e.preventDefault() + e.preventDefault(); if (startWrapperIndexTest.current.task.id === task.id) { - return + return; } - setTaskHover((prevState) => ({[prevState]: false, [task.id]: true})) + setTaskHover((prevState) => ({ [prevState]: false, [task.id]: true })); } - function dragLeaveTaskHandler(e) { - setTaskHover((prevState) => ({[prevState]: false})) + function dragLeaveTaskHandler() { + setTaskHover((prevState) => ({ [prevState]: false })); } function dragEndTaskHandler() { - setTaskHover((prevState) => ({[prevState]: false})) + setTaskHover((prevState) => ({ [prevState]: false })); setWrapperHover((prevState) => ({ [prevState]: false, })); } function dragDropTaskHandler(e, task, column) { - e.preventDefault() + e.preventDefault(); if (task.id === startWrapperIndexTest.current.task.id) { - return + return; } - const finishTask = column.tasks.indexOf(task) - dispatch(movePositionProjectTask({ - startTask: startWrapperIndexTest.current.task, - finishTask: task, - finishIndex: finishTask - })) + const finishTask = column.tasks.indexOf(task); + dispatch( + movePositionProjectTask({ + startTask: startWrapperIndexTest.current.task, + finishTask: task, + finishIndex: finishTask, + }) + ); } function dragOverHandler(e) { @@ -139,9 +144,10 @@ export const ProjectTracker = () => { [prevState]: false, })); - if (startWrapperIndexTest.current.index === columnId - || - e.target.className.includes('__item')) { + if ( + startWrapperIndexTest.current.index === columnId || + e.target.className.includes("__item") + ) { return; } @@ -159,7 +165,7 @@ export const ProjectTracker = () => { setSelectedTab(columnId); dispatch(modalToggle("createTiketProject")); setModalAdd(true); - setPriorityTask(length) + setPriorityTask(length); } function openTicket(e, task) { @@ -168,7 +174,7 @@ export const ProjectTracker = () => { } function deleteColumn(column) { - const priorityColumns = [] + const priorityColumns = []; apiRequest("/project-column/update-column", { method: "PUT", data: { @@ -181,19 +187,19 @@ export const ProjectTracker = () => { for (let i = column.priority; i < projectBoard.columns.length; i++) { const currentColumn = { column_id: projectBoard.columns[i].id, - priority: i - } - priorityColumns.push(currentColumn) + priority: i, + }; + priorityColumns.push(currentColumn); } apiRequest("/project-column/set-priority", { method: "POST", data: { project_id: projectBoard.id, - data: JSON.stringify(priorityColumns) - } + data: JSON.stringify(priorityColumns), + }, }).then(() => { dispatch(setProjectBoardFetch(projectBoard.id)); - }) + }); } else { dispatch(setProjectBoardFetch(projectBoard.id)); } @@ -205,33 +211,33 @@ export const ProjectTracker = () => { method: "DELETE", data: { project_id: projectBoard.id, - user_id: userId + user_id: userId, }, }).then(() => { - dispatch(deletePersonOnProject(userId)) + dispatch(deletePersonOnProject(userId)); }); } function filterParticipateTasks() { if (!checkBoxParticipateTasks) { - dispatch(filteredParticipateTasks(Number(localStorage.getItem('id')))) + dispatch(filteredParticipateTasks(Number(localStorage.getItem("id")))); } else { - dispatch(setProjectBoardFetch(projectId.id)) - setCheckBoxParticipateTasks(false) - setCheckBoxMyTasks(false) + dispatch(setProjectBoardFetch(projectId.id)); + setCheckBoxParticipateTasks(false); + setCheckBoxMyTasks(false); } - setCheckBoxParticipateTasks(!checkBoxParticipateTasks) + setCheckBoxParticipateTasks(!checkBoxParticipateTasks); } function filterMyTask() { if (!checkBoxMyTasks) { - dispatch(filterCreatedByMe(Number(localStorage.getItem('id')))) + dispatch(filterCreatedByMe(Number(localStorage.getItem("id")))); } else { - dispatch(setProjectBoardFetch(projectId.id)) - setCheckBoxParticipateTasks(false) - setCheckBoxMyTasks(false) + dispatch(setProjectBoardFetch(projectId.id)); + setCheckBoxParticipateTasks(false); + setCheckBoxMyTasks(false); } - setCheckBoxMyTasks(!checkBoxMyTasks) + setCheckBoxMyTasks(!checkBoxMyTasks); } return ( @@ -303,58 +309,85 @@ export const ProjectTracker = () => {

добавить колонку

- {projectBoard.projectUsers?.length} + + {projectBoard.projectUsers?.length} + { - setPersonListOpen(true) + setPersonListOpen(true); }} > +

добавить участника

- {personListOpen && -
- close setPersonListOpen(false)} /> -
{projectBoard.projectUsers?.length}участник
-
В проекте - “{projectBoard.name}”
-
- {projectBoard.projectUsers?.map((person) => { - return
- avatar - {person.user.fio} - delete deletePerson(person.user_id)}/> -
- }) - } + {personListOpen && ( +
+ close setPersonListOpen(false)} + /> +
+ {projectBoard.projectUsers?.length} + участник +
+
+ В проекте - “{projectBoard.name}” +
+
+ {projectBoard.projectUsers?.map((person) => { + return ( +
+ avatar + {person.user.fio} + delete deletePerson(person.user_id)} + /> +
+ ); + })} +
+
{ + dispatch(modalToggle("addWorker")); + setModalAdd(true); + setPersonListOpen(false); + }} + > + + +

Добавить участников

+
-
{ - dispatch(modalToggle("addWorker")); - setModalAdd(true); - setPersonListOpen(false) - }} - > - + -

Добавить участников

-
-
- } + )}
-
+
Участвую
- {checkBoxParticipateTasks && - accept - } + {checkBoxParticipateTasks && ( + accept + )}
Мои
- {checkBoxMyTasks && - accept - } + {checkBoxMyTasks && accept}
@@ -364,14 +397,16 @@ export const ProjectTracker = () => {
- {Boolean(modalActiveTicket) && } + /> + )}
{Boolean(projectBoard?.columns) && @@ -381,7 +416,7 @@ export const ProjectTracker = () => {
dragOverHandler(e)} - onDragEnter={(e) => dragEnterHandler(column.id)} + onDragEnter={() => dragEnterHandler(column.id)} onDrop={(e) => dragDropHandler(e, column.id)} className={`tasks__board ${ wrapperHover[column.id] ? "tasks__board__hover" : "" @@ -392,7 +427,9 @@ export const ProjectTracker = () => {
selectedTabTask(column.id, column.tasks.length)} + onClick={() => + selectedTabTask(column.id, column.tasks.length) + } > + @@ -419,9 +456,9 @@ export const ProjectTracker = () => { [column.id]: false, })); dispatch(modalToggle("editColumn")); - dispatch(setColumnName(column.title)) - dispatch(setColumnId(column.id)) - dispatch(setColumnPriority(column.priority)) + dispatch(setColumnName(column.title)); + dispatch(setColumnId(column.id)); + dispatch(setColumnPriority(column.priority)); setModalAdd(true); }} > @@ -442,18 +479,24 @@ export const ProjectTracker = () => {
dragStartHandler(e, task, column.id)} + onDragStart={(e) => + dragStartHandler(e, task, column.id) + } onDragOver={(e) => dragOverTaskHandler(e, task)} onDragLeave={(e) => dragLeaveTaskHandler(e)} - onDragEnd={(e) => dragEndTaskHandler()} - onDrop={(e) => dragDropTaskHandler(e, task, column)} + onDragEnd={() => dragEndTaskHandler()} + onDrop={(e) => + dragDropTaskHandler(e, task, column) + } onClick={(e) => openTicket(e, task)} >
-

{task.title}

+

+ {task.title} +

{task.description}