From 9bc60434cc0236ac7b1c7ee5261b02b2c47f7562 Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Thu, 22 Jun 2023 14:53:35 +0300 Subject: [PATCH 1/6] 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} From 5ab7e65905c94fc68a0112b50ff572955b6e5bfb Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Thu, 22 Jun 2023 14:56:31 +0300 Subject: [PATCH 2/6] prettier fixed --- .../Common/BaseButton/BaseButton.jsx | 7 +- .../Modal/TrackerModal/TrackerModal.jsx | 83 +++--- .../TrackerTaskComment/TrackerTaskComment.jsx | 264 ++++++++++-------- src/redux/projectsTrackerSlice.js | 48 ++-- src/utils/helper.js | 11 +- 5 files changed, 228 insertions(+), 185 deletions(-) diff --git a/src/components/Common/BaseButton/BaseButton.jsx b/src/components/Common/BaseButton/BaseButton.jsx index 9f9c5e5a..d659b3e8 100644 --- a/src/components/Common/BaseButton/BaseButton.jsx +++ b/src/components/Common/BaseButton/BaseButton.jsx @@ -1,13 +1,10 @@ import React from "react"; -import "./basebutton.scss" +import "./basebutton.scss"; export const BaseButton = ({ children, styles, ...props }) => { return ( - ); diff --git a/src/components/Modal/TrackerModal/TrackerModal.jsx b/src/components/Modal/TrackerModal/TrackerModal.jsx index 07ac002a..da44c264 100644 --- a/src/components/Modal/TrackerModal/TrackerModal.jsx +++ b/src/components/Modal/TrackerModal/TrackerModal.jsx @@ -1,24 +1,23 @@ -import React, {useEffect, useState} from "react"; - +import React, { useEffect, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; + import { apiRequest } from "../../../api/request"; -import { urlForLocal } from '../../../utils/helper' +import arrowDown from "../../../assets/icons/arrows/selectArrow.png"; import { - setColumnName, - setColumnPriority, + addPersonToProject, + editColumnName, + editProjectName, + getColumnId, + getColumnName, + getColumnPriority, getProjectBoard, getValueModalType, + setColumnName, + setColumnPriority, setProject, setProjectBoardFetch, - editProjectName, - editColumnName, - getColumnName, - getColumnId, - addPersonToProject, getColumnPriority } from "../../../redux/projectsTrackerSlice"; - -import arrowDown from "../../../assets/icons/arrows/selectArrow.png" - +import { urlForLocal } from "../../../utils/helper"; import "./trackerModal.scss"; export const TrackerModal = ({ @@ -33,8 +32,8 @@ export const TrackerModal = ({ const dispatch = useDispatch(); const projectBoard = useSelector(getProjectBoard); const columnName = useSelector(getColumnName); - const columnId = useSelector(getColumnId) - const columnPriority = useSelector(getColumnPriority) + const columnId = useSelector(getColumnId); + const columnPriority = useSelector(getColumnPriority); const modalType = useSelector(getValueModalType); const [projectName, setProjectName] = useState(defautlInput); @@ -42,9 +41,9 @@ export const TrackerModal = ({ const [nameProject, setNameProject] = useState(""); const [valueTiket, setValueTiket] = useState(""); const [descriptionTicket, setDescriptionTicket] = useState(""); - const [workers, setWorkers] = useState([]) - const [selectWorkersOpen, setSelectWorkersOpen] = useState(false) - const [selectedWorker, setSelectedWorker] = useState(null) + const [workers, setWorkers] = useState([]); + const [selectWorkersOpen, setSelectWorkersOpen] = useState(false); + const [selectedWorker, setSelectedWorker] = useState(null); function createTab() { if (!valueColumn) { @@ -55,7 +54,9 @@ export const TrackerModal = ({ method: "POST", data: { project_id: projectBoard.id, - priority: projectBoard.columns.length ? projectBoard.columns.at(-1).priority + 1 : 1, + priority: projectBoard.columns.length + ? projectBoard.columns.at(-1).priority + 1 + : 1, title: valueColumn, }, }).then(() => { @@ -106,36 +107,38 @@ export const TrackerModal = ({ function changeColumnParams() { projectBoard.columns.forEach((column) => { if (column.id === columnId && column.priority !== columnPriority) { - const priorityColumns = [{ - column_id: column.id, - priority: Number(columnPriority) - }] + const priorityColumns = [ + { + column_id: column.id, + priority: Number(columnPriority), + }, + ]; for (let i = column.priority; i < columnPriority; i++) { const currentColumn = { column_id: projectBoard.columns[i].id, - priority: i - } - priorityColumns.push(currentColumn) + priority: i, + }; + priorityColumns.push(currentColumn); } for (let i = column.priority; i > columnPriority; i--) { const currentColumn = { column_id: projectBoard.columns[i - 2].id, - priority: i - } - priorityColumns.push(currentColumn) + 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)); - }) + }); } - }) - changeColumnTitle() + }); + changeColumnTitle(); } function changeColumnTitle() { @@ -376,12 +379,12 @@ export const TrackerModal = ({

Приоритет колонки

dispatch(setColumnPriority(e.target.value))} + className="name-project" + placeholder="Приоритет колонки" + type="number" + step="1" + value={columnPriority} + onChange={(e) => dispatch(setColumnPriority(e.target.value))} />
diff --git a/src/components/TrackerTaskComment/TrackerTaskComment.jsx b/src/components/TrackerTaskComment/TrackerTaskComment.jsx index efdd258f..c20fb0dd 100644 --- a/src/components/TrackerTaskComment/TrackerTaskComment.jsx +++ b/src/components/TrackerTaskComment/TrackerTaskComment.jsx @@ -1,129 +1,161 @@ import React, { useState } from "react"; -import TrackerTaskSubComment from "../TrackerTaskComment/TrackerTaskComment"; + import { apiRequest } from "../../api/request"; -import {urlForLocal} from '../../utils/helper'; -import {getCorrectDate} from "../Calendar/calendarHelper"; -import edit from "../../assets/icons/edit.svg"; import del from "../../assets/icons/delete.svg"; +import edit from "../../assets/icons/edit.svg"; import accept from "../../assets/images/accept.png"; +import { urlForLocal } from "../../utils/helper"; +import { getCorrectDate } from "../Calendar/calendarHelper"; +import TrackerTaskSubComment from "../TrackerTaskComment/TrackerTaskComment"; export const TrackerTaskComment = ({ - taskId, - comment, - commentDelete, - addSubComment, - subCommentDelete + taskId, + comment, + commentDelete, + addSubComment, + subCommentDelete, }) => { - const [commentsEditOpen, setCommentsEditOpen] = useState(false) - const [commentsEditText, setCommentsEditText] = useState(comment.text) - const [subCommentsCreateOpen, setSubCommentsCreateOpen] = useState(false) - const [subCommentsCreateText, setSubCommentsCreateText] = useState('') + const [commentsEditOpen, setCommentsEditOpen] = useState(false); + const [commentsEditText, setCommentsEditText] = useState(comment.text); + const [subCommentsCreateOpen, setSubCommentsCreateOpen] = useState(false); + const [subCommentsCreateText, setSubCommentsCreateText] = useState(""); - function editComment() { - if (commentsEditText === comment.text) return - apiRequest("/comment/update", { - method: "PUT", - data: { - comment_id: comment.id, - text: commentsEditText - } - }).then(() => { - }) - } + function editComment() { + if (commentsEditText === comment.text) return; + apiRequest("/comment/update", { + method: "PUT", + data: { + comment_id: comment.id, + text: commentsEditText, + }, + }).then(() => {}); + } - function deleteComment() { - apiRequest("/comment/update", { - method: "PUT", - data: { - comment_id: comment.id, - status: 0 - } - }).then(() => { - if (comment.parent_id) { - subCommentDelete(comment) - } else { - commentDelete(comment) - } - }) - } + function deleteComment() { + apiRequest("/comment/update", { + method: "PUT", + data: { + comment_id: comment.id, + status: 0, + }, + }).then(() => { + if (comment.parent_id) { + subCommentDelete(comment); + } else { + commentDelete(comment); + } + }); + } - function createSubComment() { - setSubCommentsCreateOpen(false) - if(!subCommentsCreateText) return - apiRequest("/comment/create", { - method: "POST", - data: { - text: subCommentsCreateText, - entity_type: 2, - entity_id: taskId, - parent_id: comment.id - } - }).then((res) => { - let newSubComment = res - newSubComment.created_at = new Date() - setSubCommentsCreateText('') - addSubComment(comment.id, newSubComment) - }) - } + function createSubComment() { + setSubCommentsCreateOpen(false); + if (!subCommentsCreateText) return; + apiRequest("/comment/create", { + method: "POST", + data: { + text: subCommentsCreateText, + entity_type: 2, + entity_id: taskId, + parent_id: comment.id, + }, + }).then((res) => { + let newSubComment = res; + newSubComment.created_at = new Date(); + setSubCommentsCreateText(""); + addSubComment(comment.id, newSubComment); + }); + } - return ( -
-
-
- avatar -

{comment.user.fio}

-
-
- {getCorrectDate(comment.created_at)} - {comment.user_id === Number(localStorage.getItem('id')) && - <> -
- edit { - if (commentsEditOpen) { - editComment() - } - setCommentsEditOpen(!commentsEditOpen) - }} /> -
- delete deleteComment()} /> - - } -
-
- {commentsEditOpen ? - { - setCommentsEditText(e.target.value) - }} /> : -

{commentsEditText}

} - {!comment.parent_id && - <> - { - subCommentsCreateOpen ? -
- { - setSubCommentsCreateText(e.target.value) - }}/> - accept { - createSubComment() - }} - /> -
- : - { - setSubCommentsCreateOpen(true) - }} className='comments__list__item__answer'>Ответить - } - - } - {Boolean(comment.subComments?.length) && comment.subComments.map((subComment) => { - return - }) - } + return ( +
+
+
+ avatar +

{comment.user.fio}

- ) -} +
+ {getCorrectDate(comment.created_at)} + {comment.user_id === Number(localStorage.getItem("id")) && ( + <> +
+ edit { + if (commentsEditOpen) { + editComment(); + } + setCommentsEditOpen(!commentsEditOpen); + }} + /> +
+ delete deleteComment()} /> + + )} +
+
+ {commentsEditOpen ? ( + { + setCommentsEditText(e.target.value); + }} + /> + ) : ( +

{commentsEditText}

+ )} + {!comment.parent_id && ( + <> + {subCommentsCreateOpen ? ( +
+ { + setSubCommentsCreateText(e.target.value); + }} + /> + accept { + createSubComment(); + }} + /> +
+ ) : ( + { + setSubCommentsCreateOpen(true); + }} + className="comments__list__item__answer" + > + Ответить + + )} + + )} + {Boolean(comment.subComments?.length) && + comment.subComments.map((subComment) => { + return ( + + ); + })} +
+ ); +}; -export default TrackerTaskComment +export default TrackerTaskComment; diff --git a/src/redux/projectsTrackerSlice.js b/src/redux/projectsTrackerSlice.js index 51a33625..d8a10860 100644 --- a/src/redux/projectsTrackerSlice.js +++ b/src/redux/projectsTrackerSlice.js @@ -10,7 +10,7 @@ const initialState = { boardLoader: false, columnName: "", columnId: 0, - columnPriority: 0 + columnPriority: 0, }; export const setProjectBoardFetch = createAsyncThunk("userInfo", (id) => @@ -51,13 +51,16 @@ export const projectsTrackerSlice = createSlice({ moveProjectTask: (state, action) => { state.projectBoard.columns.forEach((column, index) => { if (column.id === action.payload.columnId) { - column.tasks.push({...action.payload.startWrapperIndex.task, column_id: column.id}); + column.tasks.push({ + ...action.payload.startWrapperIndex.task, + column_id: column.id, + }); apiRequest(`/task/update-task`, { method: "PUT", data: { task_id: action.payload.startWrapperIndex.task.id, column_id: column.id, - priority: column.tasks.length - 1 + priority: column.tasks.length - 1, }, }).then(() => {}); } @@ -71,10 +74,15 @@ export const projectsTrackerSlice = createSlice({ movePositionProjectTask: (state, action) => { state.projectBoard.columns.forEach((column, index) => { if (column.id === action.payload.startTask.column_id) { - state.projectBoard.columns[index].tasks = column.tasks.filter((task) => task.id !== action.payload.startTask.id) + state.projectBoard.columns[index].tasks = column.tasks.filter( + (task) => task.id !== action.payload.startTask.id + ); } if (column.id === action.payload.finishTask.column_id) { - column.tasks.splice(action.payload.finishIndex, 0, {...action.payload.startTask, column_id: column.id}) + column.tasks.splice(action.payload.finishIndex, 0, { + ...action.payload.startTask, + column_id: column.id, + }); apiRequest(`/task/update-task`, { method: "PUT", data: { @@ -82,14 +90,14 @@ export const projectsTrackerSlice = createSlice({ column_id: column.id, }, }).then(() => {}); - const priorityTasks = [] + const priorityTasks = []; column.tasks.forEach((task, index) => { const curTask = { task_id: task.id, - priority: index - } - priorityTasks.push(curTask) - }) + priority: index, + }; + priorityTasks.push(curTask); + }); apiRequest(`/task/set-priority`, { method: "POST", data: { @@ -98,17 +106,21 @@ export const projectsTrackerSlice = createSlice({ }, }).then(() => {}); } - }) + }); }, filterCreatedByMe: (state, action) => { state.projectBoard.columns.forEach((column) => { - column.tasks = column.tasks.filter((task) => task.user_id === action.payload) - }) + column.tasks = column.tasks.filter( + (task) => task.user_id === action.payload + ); + }); }, filteredParticipateTasks: (state, action) => { state.projectBoard.columns.forEach((column) => { - column.tasks = column.tasks.filter((task) => task.taskUsers.some((person) => person.user_id === action.payload)) - }) + column.tasks = column.tasks.filter((task) => + task.taskUsers.some((person) => person.user_id === action.payload) + ); + }); }, setColumnName: (state, action) => { state.columnName = action.payload; @@ -117,7 +129,7 @@ export const projectsTrackerSlice = createSlice({ state.columnId = action.payload; }, setColumnPriority: (state, action) => { - state.columnPriority = action.payload + state.columnPriority = action.payload; }, editProjectName: (state, action) => { state.projects.forEach((project) => { @@ -162,7 +174,7 @@ export const { addPersonToProject, filterCreatedByMe, filteredParticipateTasks, - movePositionProjectTask + movePositionProjectTask, } = projectsTrackerSlice.actions; export const getProjects = (state) => state.tracker.projects; @@ -172,6 +184,6 @@ export const getValueModalType = (state) => state.tracker.modalType; export const getBoarderLoader = (state) => state.tracker.boardLoader; export const getColumnName = (state) => state.tracker.columnName; export const getColumnId = (state) => state.tracker.columnId; -export const getColumnPriority = (state) => state.tracker.columnPriority +export const getColumnPriority = (state) => state.tracker.columnPriority; export default projectsTrackerSlice.reducer; diff --git a/src/utils/helper.js b/src/utils/helper.js index ae8b66a1..f32e202b 100644 --- a/src/utils/helper.js +++ b/src/utils/helper.js @@ -53,12 +53,11 @@ export function scrollToForm() { } export function getCorrectRequestDate(date) { - const yyyy = String(date.getUTCFullYear()) + const yyyy = String(date.getUTCFullYear()); const mm = String(date.getUTCMonth() + 1).padStart(2, "0"); const dd = String(date.getUTCDate()).padStart(2, "0"); - const hh = String(date.getUTCHours()) - const min = String(date.getUTCMinutes()) - const sec = String(date.getUTCSeconds()) - return `${yyyy}-${mm}-${dd} ${hh}:${min}:${sec}` + const hh = String(date.getUTCHours()); + const min = String(date.getUTCMinutes()); + const sec = String(date.getUTCSeconds()); + return `${yyyy}-${mm}-${dd} ${hh}:${min}:${sec}`; } - From 055225d747e627831cff1faa5fe046f04061925a Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Thu, 22 Jun 2023 19:18:41 +0300 Subject: [PATCH 3/6] Fixed buttons in tracker page --- .../Modal/Tracker/ModalTicket/ModalTicket.jsx | 20 ++++++-- .../Tracker/ModalTicket/modalTicket.scss | 18 +++++--- .../TicketFullScreen/TicketFullScreen.jsx | 19 ++++---- .../TrackerModal/TrackerModal.jsx | 46 +++++++++++-------- .../TrackerModal/trackerModal.scss | 9 ++-- src/components/ProjectTiket/ProjectTiket.jsx | 2 +- .../TrackerTaskComment/TrackerTaskComment.jsx | 17 ++++--- src/pages/ProjectTracker/ProjectTracker.js | 16 +++++-- src/pages/Tracker/Tracker.js | 2 +- src/pages/Tracker/tracker.scss | 17 ++++--- 10 files changed, 103 insertions(+), 63 deletions(-) rename src/components/Modal/{ => Tracker}/TrackerModal/TrackerModal.jsx (92%) rename src/components/Modal/{ => Tracker}/TrackerModal/trackerModal.scss (95%) diff --git a/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx b/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx index cb5dd6bc..44ab28cc 100644 --- a/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx +++ b/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx @@ -9,7 +9,7 @@ import { getCorrectRequestDate, urlForLocal } from "@utils/helper"; import { apiRequest } from "@api/request"; import BaseButton from "@components/Common/BaseButton/BaseButton"; -import TrackerModal from "@components/Modal/TrackerModal/TrackerModal"; +import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal"; import TrackerTaskComment from "@components/TrackerTaskComment/TrackerTaskComment"; import archive from "assets/icons/archive.svg"; @@ -370,10 +370,10 @@ export const ModalTiсket = ({

- + {0} Файлов

@@ -425,7 +425,12 @@ export const ModalTiсket = ({
) : (
- + setDropListOpen(true)} + styles={"button-add-worker"} + > + + + Добавить исполнителя {dropListOpen && (
@@ -473,7 +478,12 @@ export const ModalTiсket = ({ )}
- + setDropListMembersOpen(true)} + styles={"button-add-worker"} + > + + + Добавить участников {dropListMembersOpen && (
diff --git a/src/components/Modal/Tracker/ModalTicket/modalTicket.scss b/src/components/Modal/Tracker/ModalTicket/modalTicket.scss index b77a7253..954b1c3c 100644 --- a/src/components/Modal/Tracker/ModalTicket/modalTicket.scss +++ b/src/components/Modal/Tracker/ModalTicket/modalTicket.scss @@ -277,7 +277,7 @@ justify-content: space-between; margin-left: 20px; - button { + .button-add-file { display: flex; align-items: center; justify-content: center; @@ -332,6 +332,10 @@ cursor: pointer; margin-right: 18px; } + + &:focus-within { + border: 1px solid #0000004d; + } } } @@ -392,6 +396,7 @@ display: flex; align-items: center; position: relative; + margin-bottom: 5px; span { color: #000000; @@ -402,17 +407,12 @@ font-weight: 400; } - button { - cursor: pointer; - background: #8bcc60; - border-radius: 44px; + .button-add-worker { width: 33px; height: 33px; display: flex; justify-content: center; align-items: center; - border: none; - color: white; font-size: 17px; } } @@ -601,6 +601,10 @@ font-weight: 700; } } + + p:hover { + text-decoration: underline; + } } } } diff --git a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx index 40cd4821..5338a2f1 100644 --- a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx +++ b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx @@ -18,7 +18,7 @@ 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 TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal"; import { Navigation } from "@components/Navigation/Navigation"; import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs"; import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader"; @@ -386,10 +386,10 @@ export const TicketFullScreen = () => {

- + {0} Файлов

@@ -441,25 +441,28 @@ export const TicketFullScreen = () => {
- + Добавить исполнителя
- + + Добавить участников
diff --git a/src/components/Modal/TrackerModal/TrackerModal.jsx b/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx similarity index 92% rename from src/components/Modal/TrackerModal/TrackerModal.jsx rename to src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx index da44c264..c77c53fe 100644 --- a/src/components/Modal/TrackerModal/TrackerModal.jsx +++ b/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx @@ -1,8 +1,6 @@ import React, { useEffect, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; -import { apiRequest } from "../../../api/request"; -import arrowDown from "../../../assets/icons/arrows/selectArrow.png"; import { addPersonToProject, editColumnName, @@ -16,8 +14,16 @@ import { setColumnPriority, setProject, setProjectBoardFetch, -} from "../../../redux/projectsTrackerSlice"; -import { urlForLocal } from "../../../utils/helper"; +} from "@redux/projectsTrackerSlice"; + +import { urlForLocal } from "@utils/helper"; + +import { apiRequest } from "@api/request"; + +import BaseButton from "@components/Common/BaseButton/BaseButton"; + +import arrowDown from "assets/icons/arrows/selectArrow.png"; + import "./trackerModal.scss"; export const TrackerModal = ({ @@ -266,9 +272,9 @@ export const TrackerModal = ({ )}
- +
)} {modalType === "createTiketProject" && ( @@ -292,9 +298,9 @@ export const TrackerModal = ({ />
- + )} {modalType === "editProject" && ( @@ -309,9 +315,10 @@ export const TrackerModal = ({ /> - + )} {modalType === "createProject" && ( @@ -325,9 +332,9 @@ export const TrackerModal = ({ onChange={(e) => setNameProject(e.target.value)} /> - + )} @@ -343,9 +350,12 @@ export const TrackerModal = ({ - + )} {modalType === "createColumn" && ( @@ -360,9 +370,9 @@ export const TrackerModal = ({ /> - + )} {modalType === "editColumn" && ( @@ -388,9 +398,9 @@ export const TrackerModal = ({ /> - + )} diff --git a/src/components/Modal/TrackerModal/trackerModal.scss b/src/components/Modal/Tracker/TrackerModal/trackerModal.scss similarity index 95% rename from src/components/Modal/TrackerModal/trackerModal.scss rename to src/components/Modal/Tracker/TrackerModal/trackerModal.scss index 8e73a9f1..c8f6ccc4 100644 --- a/src/components/Modal/TrackerModal/trackerModal.scss +++ b/src/components/Modal/Tracker/TrackerModal/trackerModal.scss @@ -28,6 +28,7 @@ display: flex; align-items: center; flex-direction: column; + margin: 0 0 15px 0; .input-container { width: 287px; @@ -129,13 +130,13 @@ .button-add { width: 130px; height: 37px; - background: #52b709; - border-radius: 44px; - border: none; + // background: #52b709; + // border-radius: 44px; + // border: none; font-weight: 400; font-size: 15px; line-height: 32px; - color: #ffffff; + // color: #ffffff; display: flex; align-items: center; justify-content: center; diff --git a/src/components/ProjectTiket/ProjectTiket.jsx b/src/components/ProjectTiket/ProjectTiket.jsx index 6d565cd3..9eda3bc3 100644 --- a/src/components/ProjectTiket/ProjectTiket.jsx +++ b/src/components/ProjectTiket/ProjectTiket.jsx @@ -7,7 +7,7 @@ import { deleteProject, modalToggle } from "@redux/projectsTrackerSlice"; import { apiRequest } from "@api/request"; import { ModalSelect } from "@components/Modal/ModalSelect/ModalSelect"; -import TrackerModal from "@components/Modal/TrackerModal/TrackerModal"; +import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal"; import archiveSet from "assets/icons/archive.svg"; import del from "assets/icons/delete.svg"; diff --git a/src/components/TrackerTaskComment/TrackerTaskComment.jsx b/src/components/TrackerTaskComment/TrackerTaskComment.jsx index c20fb0dd..30f487e4 100644 --- a/src/components/TrackerTaskComment/TrackerTaskComment.jsx +++ b/src/components/TrackerTaskComment/TrackerTaskComment.jsx @@ -1,12 +1,15 @@ import React, { useState } from "react"; -import { apiRequest } from "../../api/request"; -import del from "../../assets/icons/delete.svg"; -import edit from "../../assets/icons/edit.svg"; -import accept from "../../assets/images/accept.png"; -import { urlForLocal } from "../../utils/helper"; -import { getCorrectDate } from "../Calendar/calendarHelper"; -import TrackerTaskSubComment from "../TrackerTaskComment/TrackerTaskComment"; +import { urlForLocal } from "@utils/helper"; + +import { apiRequest } from "@api/request"; + +import { getCorrectDate } from "@components/Calendar/calendarHelper"; +import TrackerTaskSubComment from "@components/TrackerTaskComment/TrackerTaskComment"; + +import del from "assets/icons/delete.svg"; +import edit from "assets/icons/edit.svg"; +import accept from "assets/images/accept.png"; export const TrackerTaskComment = ({ taskId, diff --git a/src/pages/ProjectTracker/ProjectTracker.js b/src/pages/ProjectTracker/ProjectTracker.js index 658e7cf2..3219ed46 100644 --- a/src/pages/ProjectTracker/ProjectTracker.js +++ b/src/pages/ProjectTracker/ProjectTracker.js @@ -23,10 +23,11 @@ import { 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 ModalTicket from "@components/Modal/Tracker/ModalTicket/ModalTicket"; -import TrackerModal from "@components/Modal/TrackerModal/TrackerModal"; +import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal"; import { Navigation } from "@components/Navigation/Navigation"; import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs"; import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader"; @@ -298,14 +299,23 @@ export const ProjectTracker = () => {

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

- { + dispatch(modalToggle("createColumn")); + setModalAdd(true); + }} + styles={"button-add-column"} + > + + + + {/* { dispatch(modalToggle("createColumn")); setModalAdd(true); }} > + - + */}

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

diff --git a/src/pages/Tracker/Tracker.js b/src/pages/Tracker/Tracker.js index 43701068..aaf9df86 100644 --- a/src/pages/Tracker/Tracker.js +++ b/src/pages/Tracker/Tracker.js @@ -16,7 +16,7 @@ import { apiRequest } from "@api/request"; import { getCorrectDate } from "@components/Calendar/calendarHelper"; import { Footer } from "@components/Common/Footer/Footer"; import { Loader } from "@components/Common/Loader/Loader"; -import TrackerModal from "@components/Modal/TrackerModal/TrackerModal"; +import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal"; import { Navigation } from "@components/Navigation/Navigation"; import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs"; import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader"; diff --git a/src/pages/Tracker/tracker.scss b/src/pages/Tracker/tracker.scss index 7c9e2395..0523eb52 100644 --- a/src/pages/Tracker/tracker.scss +++ b/src/pages/Tracker/tracker.scss @@ -232,13 +232,11 @@ &__add { display: flex; - span { + margin: 0 15px 0 10px; + + .button-add-column { width: 33px; height: 33px; - background: #52b709; - border-radius: 44px; - color: whitesmoke; - cursor: pointer; font-size: 15px; display: flex; align-items: center; @@ -315,7 +313,7 @@ z-index: 2; display: flex; flex-direction: column; - background: linear-gradient(180deg, #FFFFFF 0%, #EBEBEB 100%); + background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%); border-radius: 40px; padding: 33px 24px 44px 34px; width: 425px; @@ -331,7 +329,7 @@ &__count { display: flex; align-items: end; - color: #1458DD; + color: #1458dd; font-size: 22px; margin-top: 10px; span { @@ -355,7 +353,7 @@ span { width: auto; height: auto; - color: #1458DD; + color: #1458dd; font-weight: 600; font-size: 18px; line-height: 22px; @@ -407,7 +405,7 @@ cursor: pointer; span { - background: #8BCC60; + background: #8bcc60; left: 0; } @@ -424,6 +422,7 @@ } &__checkBox { + margin: 0 15px 0 0; cursor: pointer; display: flex; align-items: center; From fbf64f2b399159f4ed80edcfd0a6045ecd941395 Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Fri, 23 Jun 2023 10:55:22 +0300 Subject: [PATCH 4/6] Fixed styles in tracker --- .../Modal/ModalSelect/modalSelect.scss | 4 ++ .../Modal/Tracker/ModalTicket/ModalTicket.jsx | 19 +++++----- .../Tracker/ModalTicket/modalTicket.scss | 35 +++++++++++++---- src/components/ProjectTiket/projectTiket.scss | 6 +++ src/pages/Tracker/Tracker.js | 14 ++++--- src/pages/Tracker/tracker.scss | 38 +++++++++++++------ 6 files changed, 82 insertions(+), 34 deletions(-) diff --git a/src/components/Modal/ModalSelect/modalSelect.scss b/src/components/Modal/ModalSelect/modalSelect.scss index 07844484..156d37ee 100644 --- a/src/components/Modal/ModalSelect/modalSelect.scss +++ b/src/components/Modal/ModalSelect/modalSelect.scss @@ -19,6 +19,10 @@ img { margin-right: 12px; } + + p:hover { + text-decoration: underline; + } } } diff --git a/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx b/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx index 44ab28cc..a1322d71 100644 --- a/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx +++ b/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx @@ -314,16 +314,17 @@ export const ModalTiсket = ({ onClick={(e) => e.stopPropagation()} >
-

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

+

+ Проект: +

{projectName}

+ +
Задача diff --git a/src/components/Modal/Tracker/ModalTicket/modalTicket.scss b/src/components/Modal/Tracker/ModalTicket/modalTicket.scss index 954b1c3c..1b7211e3 100644 --- a/src/components/Modal/Tracker/ModalTicket/modalTicket.scss +++ b/src/components/Modal/Tracker/ModalTicket/modalTicket.scss @@ -17,32 +17,53 @@ .modal-tiket__content { background: #ffffff; - //border: 1px solid #dde2e4; border-radius: 8px; display: flex; flex-direction: row; .content { + position: relative; display: flex; flex-direction: column; width: 600px; margin: 26px 0 0 21px; .title-project { - color: #1458dd; - font-family: "LabGrotesque", sans-serif; + max-width: 85%; display: flex; align-items: center; - font-weight: 700; - font-size: 22px; - line-height: 32px; &__category { margin-right: 17px; } + h2, + h3 { + font-weight: 700; + font-size: 22px; + line-height: 32px; + color: #1458dd; + margin: 0; + font-family: "LabGrotesque", sans-serif; + } + + h2 { + display: flex; + align-items: center; + flex-wrap: wrap; + flex-direction: row; + + h3 { + margin-left: 5px; + word-break: break-all; + } + } + &__full { - margin-left: 35%; + position: absolute; + position: absolute; + right: 28px; + top: 0; } } diff --git a/src/components/ProjectTiket/projectTiket.scss b/src/components/ProjectTiket/projectTiket.scss index 3c2d0b98..bc851751 100644 --- a/src/components/ProjectTiket/projectTiket.scss +++ b/src/components/ProjectTiket/projectTiket.scss @@ -6,6 +6,12 @@ padding: 17px 26px 16px; cursor: pointer; max-width: 440px; + transition: 0.4s; + + &:hover { + transition: 0.4s; + box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.11); + } @media (max-width: 1068px) { width: 47%; diff --git a/src/pages/Tracker/Tracker.js b/src/pages/Tracker/Tracker.js index aaf9df86..d99f1f5c 100644 --- a/src/pages/Tracker/Tracker.js +++ b/src/pages/Tracker/Tracker.js @@ -14,6 +14,7 @@ import { urlForLocal } from "@utils/helper"; import { apiRequest } from "@api/request"; import { getCorrectDate } from "@components/Calendar/calendarHelper"; +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/Tracker/TrackerModal/TrackerModal"; @@ -190,15 +191,16 @@ export const Tracker = () => { noProjectImg

Создайте свой первый проект

- +

Ставьте задачи, следите за прогрессом, ведите учёт рабочего @@ -208,15 +210,15 @@ export const Tracker = () => { )} {Boolean(projects.length) && !loader && (

- +

Ставьте задачи, следите за прогрессом, ведите учёт рабочего времени diff --git a/src/pages/Tracker/tracker.scss b/src/pages/Tracker/tracker.scss index 0523eb52..5cbdc118 100644 --- a/src/pages/Tracker/tracker.scss +++ b/src/pages/Tracker/tracker.scss @@ -142,8 +142,6 @@ margin-left: 17px; } } - button { - } } &__info { @@ -155,16 +153,11 @@ } .createProjectBtn { - background: #52b709; - border-radius: 44px; max-width: 188px; height: 50px; width: 100%; - border: none; font-weight: 400; font-size: 15px; - line-height: 32px; - color: #ffffff; display: flex; align-items: center; justify-content: center; @@ -228,6 +221,8 @@ font-size: 22px; line-height: 32px; margin-bottom: 0; + max-width: 30%; + word-break: break-all; } &__add { @@ -321,8 +316,9 @@ &__close { cursor: pointer; - width: 8px; - height: 8px; + position: absolute; + right: 20px; + top: 15px; margin-left: auto; } @@ -395,8 +391,8 @@ .delete { cursor: pointer; - width: 14px; - height: 14px; + width: 20px; + height: 20px; } } @@ -770,6 +766,10 @@ max-width: 450px; width: 100%; + &:focus-within { + border: 1px solid #0000004d; + } + @media (max-width: 690px) { max-width: 350px; } @@ -833,8 +833,15 @@ border-radius: 12px; padding: 12px 42px 7px 32px; justify-content: space-between; + transition: 0.4s; cursor: pointer; + &:hover { + transform: scale(0.99); + box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.11); + transition: 0.4s; + } + &__info { display: flex; flex-direction: column; @@ -967,9 +974,12 @@ background: #f1f1f1; border-radius: 12px; padding: 12px 42px 7px 32px; + transition: 0.4s; &:hover { - background: var(--ds-background-neutral-subtle-hovered, #f4f5f7); + transform: scale(0.99); + box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.11); + transition: 0.4s; } p { @@ -1046,6 +1056,10 @@ max-width: 300px; width: 100%; + &:focus-within { + border: 1px solid #0000004d; + } + @media (max-width: 590px) { max-width: 230px; } From bca8199a6ae32aabfaf28153f531e3e45a683366 Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Fri, 23 Jun 2023 14:46:08 +0300 Subject: [PATCH 5/6] Fixed modalTicket --- src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx | 2 +- src/components/Modal/Tracker/ModalTicket/modalTicket.scss | 7 +++++++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx b/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx index a1322d71..1b3ec8c7 100644 --- a/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx +++ b/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx @@ -343,7 +343,7 @@ export const ModalTiсket = ({ )}

{editOpen ? ( - { setInputsValue((prevValue) => ({ diff --git a/src/components/Modal/Tracker/ModalTicket/modalTicket.scss b/src/components/Modal/Tracker/ModalTicket/modalTicket.scss index 1b7211e3..efe4daa6 100644 --- a/src/components/Modal/Tracker/ModalTicket/modalTicket.scss +++ b/src/components/Modal/Tracker/ModalTicket/modalTicket.scss @@ -257,6 +257,13 @@ display: flex; flex-direction: column; margin-top: 10px; + + textarea { + min-height: 120px; + max-height: 450px; + font-size: 14px; + } + p { font-weight: 400; font-size: 14px; From f95812ac356ca09aab65cb969d16114fee1a0610 Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Fri, 23 Jun 2023 15:18:19 +0300 Subject: [PATCH 6/6] Fixed styles modalTracker --- .../Tracker/ModalTicket/modalTicket.scss | 3 +- .../Tracker/TrackerModal/TrackerModal.jsx | 370 +++++++++--------- .../Tracker/TrackerModal/trackerModal.scss | 197 +++++----- 3 files changed, 283 insertions(+), 287 deletions(-) diff --git a/src/components/Modal/Tracker/ModalTicket/modalTicket.scss b/src/components/Modal/Tracker/ModalTicket/modalTicket.scss index efe4daa6..60936eeb 100644 --- a/src/components/Modal/Tracker/ModalTicket/modalTicket.scss +++ b/src/components/Modal/Tracker/ModalTicket/modalTicket.scss @@ -32,6 +32,7 @@ max-width: 85%; display: flex; align-items: center; + flex-direction: row; &__category { margin-right: 17px; @@ -100,7 +101,7 @@ .comments__list { display: flex; flex-direction: column; - max-height: 420px; + max-height: 300px; overflow: auto; &::-webkit-scrollbar { diff --git a/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx b/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx index c77c53fe..ed3b0d2b 100644 --- a/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx +++ b/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx @@ -21,6 +21,7 @@ import { urlForLocal } from "@utils/helper"; import { apiRequest } from "@api/request"; import BaseButton from "@components/Common/BaseButton/BaseButton"; +import ModalLayout from "@components/Common/ModalLayout/ModalLayout"; import arrowDown from "assets/icons/arrows/selectArrow.png"; @@ -211,202 +212,197 @@ export const TrackerModal = ({ }, [active]); return ( -
{ - setActive(false); - setSelectWorkersOpen(false); - }} + { + // setSelectWorkersOpen(false); + // }} > -
e.stopPropagation()}> - {modalType === "addWorker" && ( -
-
-

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

- {/*
*/} - {/* setEmailWorker(e.target.value)}*/} - {/* />*/} - {/*
*/} -
setSelectWorkersOpen(!selectWorkersOpen)} - > -

- {selectedWorker - ? selectedWorker.employee.fio - : "Выберите пользователя"} -

- arrow - {Boolean(selectWorkersOpen) && ( -
- {Boolean(workers.length) ? ( - workers.map((worker) => { - if (worker === selectedWorker) { - return; - } - return ( -
{ - setSelectedWorker(worker); - }} - > -

{worker.employee.fio}

- avatar -
- ); - }) - ) : ( -
Нет пользователей
- )} -
- )} -
-
- - Добавить - -
- )} - {modalType === "createTiketProject" && ( -
-
-

Введите название и описание задачи

-
- setValueTiket(e.target.value)} - placeholder="Название задачи" - /> -
-
- setDescriptionTicket(e.target.value)} - placeholder="Описание задачи" - /> -
-
- - Создать - -
- )} - {modalType === "editProject" && ( -
-
-

Введите новое название

-
- setProjectName(e.target.value)} - /> -
-
- - - Сохранить - -
- )} - {modalType === "createProject" && ( -
-
-

{titleProject}

-
- setNameProject(e.target.value)} - /> -
- - Создать - -
-
- )} - {modalType === "addSubtask" && ( -
-
-

- Вы добавляете подзадачу{" "} -

в колонку(id) задачи "{defautlInput}"

-

-

Введите текст

-
- -
-
- e.preventDefault()} + {modalType === "addWorker" && ( +
+
+

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

+ {/*
*/} + {/* setEmailWorker(e.target.value)}*/} + {/* />*/} + {/*
*/} +
setSelectWorkersOpen(!selectWorkersOpen)} > - Добавить - -
- )} - {modalType === "createColumn" && ( -
-
-

Введите название колонки

-
- setValueColumn(e.target.value)} - /> -
+

+ {selectedWorker + ? selectedWorker.employee.fio + : "Выберите пользователя"} +

+ arrow + {Boolean(selectWorkersOpen) && ( +
+ {Boolean(workers.length) ? ( + workers.map((worker) => { + if (worker === selectedWorker) { + return; + } + return ( +
{ + setSelectedWorker(worker); + }} + > +

{worker.employee.fio}

+ avatar +
+ ); + }) + ) : ( +
Нет пользователей
+ )} +
+ )}
- +
+ + Добавить + +
+ )} + {modalType === "createTiketProject" && ( +
+
+

Введите название и описание задачи

+
+ setValueTiket(e.target.value)} + placeholder="Название задачи" + /> +
+
+ setDescriptionTicket(e.target.value)} + placeholder="Описание задачи" + /> +
+
+ + Создать + +
+ )} + {modalType === "editProject" && ( +
+
+

Введите новое название

+
+ setProjectName(e.target.value)} + /> +
+
+ + + Сохранить + +
+ )} + {modalType === "createProject" && ( +
+
+

{titleProject}

+
+ setNameProject(e.target.value)} + /> +
+ Создать
- )} - {modalType === "editColumn" && ( -
-
-

Введите новое название

-
- dispatch(setColumnName(e.target.value))} - /> -
-

Приоритет колонки

-
- dispatch(setColumnPriority(e.target.value))} - /> -
+
+ )} + {modalType === "addSubtask" && ( +
+
+

+ Вы добавляете подзадачу{" "} +

в колонку(id) задачи "{defautlInput}"

+

+

Введите текст

+
+
- - Сохранить -
- )} + e.preventDefault()}> + Добавить + +
+ )} + {modalType === "createColumn" && ( +
+
+

Введите название колонки

+
+ setValueColumn(e.target.value)} + /> +
+
+ + Создать + +
+ )} + {modalType === "editColumn" && ( +
+
+

Введите новое название

+
+ dispatch(setColumnName(e.target.value))} + /> +
+

Приоритет колонки

+
+ dispatch(setColumnPriority(e.target.value))} + /> +
+
+ + Сохранить + +
+ )} - setActive(false)}> -
-
+ setActive(false)}> + ); }; diff --git a/src/components/Modal/Tracker/TrackerModal/trackerModal.scss b/src/components/Modal/Tracker/TrackerModal/trackerModal.scss index c8f6ccc4..0181b6ef 100644 --- a/src/components/Modal/Tracker/TrackerModal/trackerModal.scss +++ b/src/components/Modal/Tracker/TrackerModal/trackerModal.scss @@ -1,3 +1,4 @@ +//Удалить при переходе всех модалок в обертку modalLayout .modal-add { z-index: 9; height: 100%; @@ -23,125 +24,123 @@ align-items: center; justify-content: center; } +} - .title-project { +.title-project { + display: flex; + align-items: center; + flex-direction: column; + margin: 0 0 15px 0; + + .input-container { + width: 287px; + height: 35px; + background: #ffffff; + border-radius: 8px; + margin: 12px 0; + + input::-webkit-inner-spin-button { + -webkit-appearance: none; + } + } + + h4 { + font-weight: 500; + font-size: 22px; + line-height: 26px; + color: #263238 !important; + } + + &__decs { + font-weight: 300; + font-size: 12px; + line-height: 14px; + margin: 12px 0 16px 0; + } + + &__textarea { + resize: none; + width: 302px; + height: 83px; + background: #ffffff; + border-radius: 8px; + border: none; + font-size: 15px; + line-height: 18px; + } + + .select__worker { display: flex; + justify-content: space-between; align-items: center; - flex-direction: column; - margin: 0 0 15px 0; + padding: 5px; + background: white; + border-radius: 5px; + cursor: pointer; + width: 100%; + position: relative; - .input-container { - width: 287px; - height: 35px; - background: #ffffff; - border-radius: 8px; - margin: 12px 0; - - input::-webkit-inner-spin-button { - -webkit-appearance: none; - } + p { + max-width: 150px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + font-size: 14px; } - h4 { - font-weight: 500; - font-size: 22px; - line-height: 26px; - color: #263238 !important; + img { + transition: all 0.3s ease; + width: 16px; + height: 16px; } - &__decs { - font-weight: 300; - font-size: 12px; - line-height: 14px; - margin: 12px 0 16px 0; - } - - &__textarea { - resize: none; - width: 302px; - height: 83px; - background: #ffffff; - border-radius: 8px; - border: none; - font-size: 15px; - line-height: 18px; - } - - .select__worker { + &__dropDown { display: flex; - justify-content: space-between; - align-items: center; + flex-direction: column; + position: absolute; + width: 100%; padding: 5px; + top: 35px; + left: 0; background: white; border-radius: 5px; - cursor: pointer; - width: 100%; - position: relative; + row-gap: 5px; - p { - max-width: 150px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - font-size: 14px; - } - - img { - transition: all 0.3s ease; - width: 16px; - height: 16px; - } - - &__dropDown { + .worker { display: flex; - flex-direction: column; - position: absolute; - width: 100%; - padding: 5px; - top: 35px; - left: 0; - background: white; - border-radius: 5px; - row-gap: 5px; - - .worker { - display: flex; - justify-content: space-between; - } - } - } - - .open { - .arrow { - transform: rotate(180deg); + justify-content: space-between; } } } - .name-project { - margin-left: 10px; - border: none; - outline: none; - height: 100%; - width: 90%; - font-size: 14px; + .open { + .arrow { + transform: rotate(180deg); + } } +} - .button-add { - width: 130px; - height: 37px; - // background: #52b709; - // border-radius: 44px; - // border: none; - font-weight: 400; - font-size: 15px; - line-height: 32px; - // color: #ffffff; - display: flex; - align-items: center; - justify-content: center; - margin: 0 auto; - } +.name-project { + margin-left: 10px; + border: none; + outline: none; + height: 100%; + width: 90%; + font-size: 14px; +} + +.button-add { + width: 130px; + height: 37px; + + font-weight: 400; + font-size: 15px; + line-height: 32px; + + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto; } .modal-add.active {