From 4db278fdbd43454f22442e89cca0f3e8c2741b5a Mon Sep 17 00:00:00 2001 From: M1kola Date: Thu, 29 Jun 2023 02:26:49 +0300 Subject: [PATCH] tracker-tasks --- src/assets/icons/calendar.svg | 5 +- .../Calendar/calendarComponent.scss | 7 +- .../Modal/Tracker/ModalTicket/ModalTicket.jsx | 12 +- .../Tracker/ModalTicket/modalTicket.scss | 10 +- .../TicketFullScreen/TicketFullScreen.jsx | 158 +++++++++++++++--- .../Tracker/TrackerModal/TrackerModal.jsx | 37 ++-- .../Tracker/TrackerModal/trackerModal.scss | 9 +- .../TrackerTaskComment/TrackerTaskComment.jsx | 32 +++- src/pages/ProjectTracker/ProjectTracker.js | 12 +- src/pages/Tracker/tracker.scss | 10 +- 10 files changed, 233 insertions(+), 59 deletions(-) diff --git a/src/assets/icons/calendar.svg b/src/assets/icons/calendar.svg index e8aa0d3c..1cd84ac5 100644 --- a/src/assets/icons/calendar.svg +++ b/src/assets/icons/calendar.svg @@ -1 +1,4 @@ - \ No newline at end of file + + + + diff --git a/src/components/Calendar/calendarComponent.scss b/src/components/Calendar/calendarComponent.scss index 4beb3afe..8f980833 100644 --- a/src/components/Calendar/calendarComponent.scss +++ b/src/components/Calendar/calendarComponent.scss @@ -160,12 +160,17 @@ a { color: black; + display: flex; + align-items: center; + justify-content: center; + font-weight: 500; + font-size: 12px; } img { width: 16px; height: 16px; - margin: 0 10px 0 0; + margin: 0 5px 0 0; @media (max-width: 968px) { margin-right: 2px; diff --git a/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx b/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx index c1d86bfe..ba6292d1 100644 --- a/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx +++ b/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx @@ -1,8 +1,8 @@ -import ClassicEditor from "@ckeditor/ckeditor5-build-classic"; -import { CKEditor } from "@ckeditor/ckeditor5-react"; import React, { useEffect, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; import { Link } from "react-router-dom"; +import ClassicEditor from "@ckeditor/ckeditor5-build-classic"; +import { CKEditor } from "@ckeditor/ckeditor5-react"; import { getProfileInfo } from "@redux/outstaffingSlice"; import { setProjectBoardFetch } from "@redux/projectsTrackerSlice"; @@ -69,7 +69,7 @@ export const ModalTiсket = ({ task_id: task.id, status: 0, }, - }).then((res) => { + }).then(() => { setActive(false); dispatch(setProjectBoardFetch(projectId)); }); @@ -334,9 +334,9 @@ export const ModalTiсket = ({ ); }, [members]); - function copyProjectLink() { + function copyTicketLink() { navigator.clipboard.writeText( - `https://itguild.info/tracker/project/${projectId}` + `https://itguild.info/tracker/task/${task.id}` ); } @@ -620,7 +620,7 @@ export const ModalTiсket = ({
-

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

+

ссылка на задачу

diff --git a/src/components/Modal/Tracker/ModalTicket/modalTicket.scss b/src/components/Modal/Tracker/ModalTicket/modalTicket.scss index ac7925b8..9a1e24ca 100644 --- a/src/components/Modal/Tracker/ModalTicket/modalTicket.scss +++ b/src/components/Modal/Tracker/ModalTicket/modalTicket.scss @@ -129,6 +129,10 @@ width: 100%; position: relative; + .ck-editor { + margin: 10px 0; + } + &__subComment { &:before { content: ""; @@ -251,6 +255,11 @@ } } } + .comment__edit--open { + &:after { + display: none; + } + } } } @@ -508,7 +517,6 @@ &__creator { font-size: 14px; - line-height: 32px; font-weight: 500; color: #2d4a17; max-width: 200px; diff --git a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx index 676a0ed0..3c230964 100644 --- a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx +++ b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx @@ -1,6 +1,8 @@ import React, { useEffect, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; import { Link, useNavigate, useParams } from "react-router-dom"; +import ClassicEditor from "@ckeditor/ckeditor5-build-classic"; +import { CKEditor } from "@ckeditor/ckeditor5-react"; import { deletePersonOnProject, @@ -27,7 +29,7 @@ import TrackerTaskComment from "@components/TrackerTaskComment/TrackerTaskCommen 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 arrowStart 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"; @@ -40,6 +42,7 @@ import tasks from "assets/icons/trackerTasks.svg"; import watch from "assets/icons/watch.svg"; import "./ticketFullScreen.scss"; +import avatarMok from "assets/images/avatarMok.png"; export const TicketFullScreen = () => { const [modalAddWorker, setModalAddWorker] = useState(false); @@ -56,6 +59,12 @@ export const TicketFullScreen = () => { const [personListOpen, setPersonListOpen] = useState(false); const [timerStart, setTimerStart] = useState(false); const [timerInfo, setTimerInfo] = useState({}); + const [currentTimerCount, setCurrentTimerCount] = useState({ + hours: 0, + minute: 0, + seconds: 0, + }); + const [timerId, setTimerId] = useState(null); useEffect(() => { apiRequest(`/task/get-task?task_id=${ticketId.id}`).then((taskInfo) => { @@ -80,12 +89,28 @@ export const TicketFullScreen = () => { }, []); setComments(comments); }); - taskInfo.timers.forEach((time) => { - if (!time.stopped_at) { - setTimerStart(true); - setTimerInfo(time); + apiRequest(`/timer/get-by-entity?entity_type=2&entity_id=${taskInfo.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); + } + }); } - }); + ); dispatch(setProjectBoardFetch(taskInfo.project_id)); setLoader(boardLoader); }); @@ -142,6 +167,7 @@ export const TicketFullScreen = () => { }).then((res) => { setTimerStart(true); setTimerInfo(res); + startTimer(); }); } @@ -152,7 +178,10 @@ export const TicketFullScreen = () => { timer_id: timerInfo.id, stopped_at: getCorrectRequestDate(new Date()), }, - }).then(() => setTimerStart(false)); + }).then(() => { + setTimerStart(false); + clearInterval(timerId); + }); } function deletePerson(userId) { @@ -216,6 +245,41 @@ export const TicketFullScreen = () => { ); } + 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; + } + return (
@@ -273,9 +337,32 @@ export const TicketFullScreen = () => { >
- - {projectBoard.projectUsers?.length} + {projectBoard.projectUsers?.length > 3 && + + +1... + } +
+ {projectBoard.projectUsers?.length && + projectBoard.projectUsers + .slice( + 0, + projectBoard.length > 3 ? 3 : projectBoard.length + ) + .map((person) => { + return ( + avatar + ); + })} +
{ @@ -365,17 +452,33 @@ export const TicketFullScreen = () => { )}
{editOpen ? ( - { + { + const data = editor.getData(); setInputsValue((prevValue) => ({ ...prevValue, - description: e.target.value, + description: data, })); }} /> ) : ( -

{inputsValue.description}

+

)}

@@ -430,9 +533,9 @@ export const TicketFullScreen = () => {
-
+

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

{Boolean(taskInfo.taskUsers?.length) && @@ -475,26 +578,37 @@ export const TicketFullScreen = () => {
- watch + Длительность : -

{"0:00:00"}

+

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

{timerStart ? ( - ) : ( )}
diff --git a/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx b/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx index 99475330..0137a4ef 100644 --- a/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx +++ b/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx @@ -1,5 +1,7 @@ import React, { useEffect, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; +import ClassicEditor from "@ckeditor/ckeditor5-build-classic"; +import { CKEditor } from "@ckeditor/ckeditor5-react"; import { getProfileInfo } from "@redux/outstaffingSlice"; import { @@ -27,6 +29,7 @@ import ModalLayout from "@components/Common/ModalLayout/ModalLayout"; import arrowDown from "assets/icons/arrows/selectArrow.png"; import "./trackerModal.scss"; +import avatarMok from "assets/images/avatarMok.png"; export const TrackerModal = ({ active, @@ -50,7 +53,7 @@ export const TrackerModal = ({ const [valueColumn, setValueColumn] = useState(""); const [nameProject, setNameProject] = useState(""); const [valueTiket, setValueTiket] = useState(""); - const [descriptionTicket, setDescriptionTicket] = useState(""); + const [descriptionTicket, setDescriptionTicket] = useState("Описание задачи"); const [workers, setWorkers] = useState([]); const [selectWorkersOpen, setSelectWorkersOpen] = useState(false); const [selectedWorker, setSelectedWorker] = useState(null); @@ -114,13 +117,13 @@ export const TrackerModal = ({ dispatch(setProjectBoardFetch(projectBoard.id)); setActive(false); setValueTiket(""); - setDescriptionTicket(""); + setDescriptionTicket("Описание задачи"); setSelectedExecutorTask("Выберите исполнителя задачи"); }); } else { setActive(false); setValueTiket(""); - setDescriptionTicket(""); + setDescriptionTicket("Описание задачи"); dispatch(setProjectBoardFetch(projectBoard.id)); } }); @@ -337,14 +340,20 @@ export const TrackerModal = ({ placeholder="Название задачи" />
-
- setDescriptionTicket(e.target.value)} - placeholder="Описание задачи" - /> -
+ { + const data = editor.getData(); + setDescriptionTicket(data); + }} + />
setSelectExecutorTaskOpen(!selectExecutorTaskOpen)} className={ @@ -381,7 +390,11 @@ export const TrackerModal = ({ {person.user.fio} avatar
diff --git a/src/components/Modal/Tracker/TrackerModal/trackerModal.scss b/src/components/Modal/Tracker/TrackerModal/trackerModal.scss index f8eb408d..5c28876f 100644 --- a/src/components/Modal/Tracker/TrackerModal/trackerModal.scss +++ b/src/components/Modal/Tracker/TrackerModal/trackerModal.scss @@ -31,6 +31,7 @@ align-items: center; flex-direction: column; margin: 0 0 15px 0; + row-gap: 5px; .select-priority { background-color: white; @@ -78,7 +79,7 @@ } .input-container { - width: 287px; + width: 320px; height: 35px; background: #ffffff; border-radius: 8px; @@ -89,8 +90,12 @@ } } + .ck-editor { + max-width: 320px; + } + .select__executor { - width: 287px; + width: 320px; background: white; border-radius: 8px; margin: 5px 0; diff --git a/src/components/TrackerTaskComment/TrackerTaskComment.jsx b/src/components/TrackerTaskComment/TrackerTaskComment.jsx index 30f487e4..3118ebda 100644 --- a/src/components/TrackerTaskComment/TrackerTaskComment.jsx +++ b/src/components/TrackerTaskComment/TrackerTaskComment.jsx @@ -6,6 +6,8 @@ import { apiRequest } from "@api/request"; import { getCorrectDate } from "@components/Calendar/calendarHelper"; import TrackerTaskSubComment from "@components/TrackerTaskComment/TrackerTaskComment"; +import ClassicEditor from "@ckeditor/ckeditor5-build-classic"; +import { CKEditor } from "@ckeditor/ckeditor5-react"; import del from "assets/icons/delete.svg"; import edit from "assets/icons/edit.svg"; @@ -76,6 +78,7 @@ export const TrackerTaskComment = ({ ? "comments__list__item__main" : "", "comments__list__item", + commentsEditOpen ? 'comment__edit--open' : '', comment.parent_id ? "comments__list__item__subComment" : "", ].join(" ")} > @@ -106,17 +109,32 @@ export const TrackerTaskComment = ({
{commentsEditOpen ? ( - { - setCommentsEditText(e.target.value); + { + const data = editor.getData(); + setCommentsEditText(data); }} /> ) : ( -

{commentsEditText}

+

)} - {!comment.parent_id && ( + {!comment.parent_id && !commentsEditOpen && ( <> {subCommentsCreateOpen ? (

diff --git a/src/pages/ProjectTracker/ProjectTracker.js b/src/pages/ProjectTracker/ProjectTracker.js index 8982f294..8d994ce8 100644 --- a/src/pages/ProjectTracker/ProjectTracker.js +++ b/src/pages/ProjectTracker/ProjectTracker.js @@ -322,9 +322,11 @@ export const ProjectTracker = () => {

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

+ {projectBoard.projectUsers?.length > 3 && - {projectBoard.projectUsers?.length} + +1... + }
{projectBoard.projectUsers?.length && projectBoard.projectUsers @@ -379,7 +381,11 @@ export const ProjectTracker = () => { > avatar {person.user.fio} @@ -462,7 +468,7 @@ export const ProjectTracker = () => { - selectedTabTask(column.id, column.tasks.length) + selectedTabTask(column.id, projectBoard?.columns ? projectBoard?.columns[0].tasks.at(-1).priority + 1 : 1) } > + diff --git a/src/pages/Tracker/tracker.scss b/src/pages/Tracker/tracker.scss index 48764b45..1a38bead 100644 --- a/src/pages/Tracker/tracker.scss +++ b/src/pages/Tracker/tracker.scss @@ -295,7 +295,7 @@ color: #252c32; border: 1px solid #dde2e4; background: white; - left: -5px; + left: -6px; } .addPerson { @@ -329,9 +329,11 @@ &__close { cursor: pointer; position: absolute; - right: 20px; - top: 15px; + right: 25px; + top: 25px; margin-left: auto; + width: 35px; + height: 35px; } &__count { @@ -356,7 +358,7 @@ line-height: 22px; color: #263238; font-weight: 500; - margin: 13px 0 32px; + margin: 13px 0 10px; span { width: auto;