apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed modals btn

Browse Source
This commit is contained in:
MaxOvs19 2023-06-22 14:53:35 +03:00
parent 07740c3369
commit 9bc60434cc
7 changed files with 751 additions and 2086 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

282
src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx
View File

@ -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 (
<>
<ModalLayout
active={active}
setActive={setActive}
styles={"tracker-ticket"}
<div
className={active ? "modal-tiket active" : "modal-tiket"}
onClick={() => setActive(false)}
>
<div
className="modal-tiket__content"
onClick={(e) => e.stopPropagation()}
>
<div className="content">
<h3 className="title-project">
@ -258,17 +363,17 @@ export const ModalTiсket = ({
dispatch(modalToggle("addSubtask"));
setAddSubtask(true);
}}
styles={"tasks__button"}
styles={"button-green-add"}
>
<img src={plus}></img>
Добавить под задачу
</BaseButton>
</p>
<p className="file">
<BaseButton styles={"file__button"}>
<button>
<img src={file}></img>
Загрузить файл
</BaseButton>
</button>
<span>{0}</span>
Файлов
</p>
@ -289,50 +394,14 @@ export const ModalTiсket = ({
<div className="comments__list">
{comments.map((comment) => {
return (
<div className="comments__list__item" key={comment.id}>
<div className="comments__list__item__info">
<span>{getCorrectDate(comment.created_at)}</span>
<div
className={
commentsEditOpen[comment.id]
? "edit edit__open"
: "edit"
}
>
<img
src={edit}
alt="edit"
onClick={() => {
if (commentsEditOpen[comment.id]) {
editComment(comment.id);
}
setCommentsEditOpen((prevValue) => ({
...prevValue,
[comment.id]: !prevValue[comment.id],
}));
}}
/>
</div>
<img
src={del}
alt="delete"
onClick={() => deleteComment(comment.id)}
/>
</div>
{commentsEditOpen[comment.id] ? (
<input
value={commentsEditText[comment.id]}
onChange={(e) => {
setCommentsEditText((prevValue) => ({
...prevValue,
[comment.id]: e.target.value,
}));
}}
/>
) : (
<p>{commentsEditText[comment.id]}</p>
)}
</div>
<TrackerTaskComment
key={comment.id}
taskId={task.id}
comment={comment}
commentDelete={commentDelete}
addSubComment={addSubComment}
subCommentDelete={subCommentDelete}
/>
);
})}
</div>
@ -438,12 +507,29 @@ export const ModalTiсket = ({
<div className="time">
<img src={watch}></img>
<span>Длительность : </span>
<p>{"0:00:00"}</p>
<p>
{correctTimerTime(currentTimerCount.hours)}:
{correctTimerTime(currentTimerCount.minute)}:
{correctTimerTime(currentTimerCount.seconds)}
</p>
</div>
<button className="start">
Начать делать <img src={arrow}></img>
</button>
{timerStart ? (
<button className="stop" onClick={() => stopTaskTimer()}>
Остановить
</button>
) : (
<button
className={
task.executor_id === Number(localStorage.getItem("id"))
? "start"
: "start disable"
}
onClick={() => startTaskTimer()}
>
Начать делать <img src={arrow}></img>
</button>
)}
</div>
<div className="workers_box-bottom">
@ -475,14 +561,14 @@ export const ModalTiсket = ({
</div>
</div>
</div>
</ModalLayout>
</div>
<TrackerModal
active={addSubtask}
setActive={setAddSubtask}
defautlInput={task.column_id}
></TrackerModal>
</>
</div>
);
};

594
src/components/Modal/Tracker/ModalTicket/ModalTicket.scss
View File

@ -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;
}
}
}

18
src/components/UI/ModalTicket/modalTicket.scss → src/components/Modal/Tracker/ModalTicket/modalTicket.scss
View File

@ -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;
}
}

708
src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
View File

@ -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 (
<section className="ticket-full-screen">
<ProfileHeader />
<Navigation />
<div className="container">
<div className="tracker__content">
<ProfileBreadcrumbs
links={[
{ name: "Главная", link: "/profile" },
{ name: "Трекер", link: "/profile/tracker" },
]}
/>
<h2 className="tracker__title">Управление проектами с трекером</h2>
</div>
<section className="ticket-full-screen">
<ProfileHeader />
<Navigation />
<div className="container">
<div className="tracker__content">
<ProfileBreadcrumbs
links={[
{ name: "Главная", link: "/profile" },
{ name: "Трекер", link: "/profile/tracker" },
]}
/>
<h2 className="tracker__title">Управление проектами с трекером</h2>
</div>
<div className="tracker__tabs">
<div className="tracker__tabs__head">
<Link
to="/profile/tracker"
className="tab active-tab"
onClick={() => toggleTabs(1)}
>
<img src={project} alt="img" />
<p>Проекты </p>
</Link>
<Link
to="/profile/tracker"
className="tab"
onClick={() => toggleTabs(2)}
>
<img src={tasks} alt="img" />
<p>Все мои задачи</p>
</Link>
<Link
to="/profile/tracker"
className="tab"
onClick={() => toggleTabs(3)}
>
<img src={archive} alt="img" />
<p>Архив</p>
</Link>
</div>
{loader ? <Loader /> :
<>
<div className="tracker__tabs__content content-tabs">
<div className="tasks__head">
<div className="tasks__head__wrapper">
<h4>Проект : {projectBoard.name}</h4>
</div>
<div className="tracker__tabs">
<div className="tracker__tabs__head">
<Link
to="/profile/tracker"
className="tab active-tab"
onClick={() => toggleTabs(1)}
>
<img src={project} alt="img" />
<p>Проекты </p>
</Link>
<Link
to="/profile/tracker"
className="tab"
onClick={() => toggleTabs(2)}
>
<img src={tasks} alt="img" />
<p>Все мои задачи</p>
</Link>
<Link
to="/profile/tracker"
className="tab"
onClick={() => toggleTabs(3)}
>
<img src={archive} alt="img" />
<p>Архив</p>
</Link>
</div>
{loader ? (
<Loader />
) : (
<>
<div className="tracker__tabs__content content-tabs">
<div className="tasks__head">
<div className="tasks__head__wrapper">
<h4>Проект : {projectBoard.name}</h4>
<TrackerModal
active={modalAddWorker}
setActive={setModalAddWorker}
></TrackerModal>
<TrackerModal
active={modalAddWorker}
setActive={setModalAddWorker}
></TrackerModal>
<div className="tasks__head__persons">
{/*<img src={avatarTest} alt="avatar" />*/}
{/*<img src={avatarTest} alt="avatar" />*/}
<span className="countPersons">{projectBoard.projectUsers?.length}</span>
<span
className="addPerson"
onClick={() => {
setPersonListOpen(true)
}}
>
+
</span>
<p>добавить участника</p>
{personListOpen &&
<div className='persons__list'>
<img className='persons__list__close' src={close} alt='close' onClick={() => setPersonListOpen(false)} />
<div className='persons__list__count'><span>{projectBoard.projectUsers?.length}</span>участник</div>
<div className='persons__list__info'>В проекте - <span>“{projectBoard.name}”</span></div>
<div className='persons__list__items'>
{projectBoard.projectUsers?.map((person) => {
return <div className='persons__list__item' key={person.user_id}>
<img className='avatar' src={urlForLocal(person.user.avatar)} alt='avatar' />
<span>{person.user.fio}</span>
<img className='delete' src={close} alt='delete' onClick={() => deletePerson(person.user_id)}/>
</div>
})
}
</div>
<div className='persons__list__add'
onClick={() => {
dispatch(modalToggle("addWorker"));
setModalAddWorker(true);
setPersonListOpen(false)
}}
>
<span className='addPerson'>+</span>
<p>Добавить участников</p>
</div>
</div>
}
</div>
<Link to={`/profile/tracker`} className="link">
<div className="tasks__head__back">
<p>Вернуться на проекты</p>
<img src={arrow} alt="arrow" />
<div className="tasks__head__persons">
<span className="countPersons">
{projectBoard.projectUsers?.length}
</span>
<span
className="addPerson"
onClick={() => {
setPersonListOpen(true);
}}
>
+
</span>
<p>добавить участника</p>
{personListOpen && (
<div className="persons__list">
<img
className="persons__list__close"
src={close}
alt="close"
onClick={() => setPersonListOpen(false)}
/>
<div className="persons__list__count">
<span>{projectBoard.projectUsers?.length}</span>
участник
</div>
</Link>
<div className="persons__list__info">
В проекте - <span>“{projectBoard.name}”</span>
</div>
<div className="persons__list__items">
{projectBoard.projectUsers?.map((person) => {
return (
<div
className="persons__list__item"
key={person.user_id}
>
<img
className="avatar"
src={urlForLocal(person.user.avatar)}
alt="avatar"
/>
<span>{person.user.fio}</span>
<img
className="delete"
src={close}
alt="delete"
onClick={() => deletePerson(person.user_id)}
/>
</div>
);
})}
</div>
<div
className="persons__list__add"
onClick={() => {
dispatch(modalToggle("addWorker"));
setModalAddWorker(true);
setPersonListOpen(false);
}}
>
<span className="addPerson">+</span>
<p>Добавить участников</p>
</div>
</div>
)}
</div>
<Link to={`/profile/tracker`} className="link">
<div className="tasks__head__back">
<p>Вернуться на проекты</p>
<img src={arrow} alt="arrow" />
</div>
</Link>
</div>
</div>
</div>
<div className="modal-tiket__content ticket">
<div className="content ticket-whith">
<div className="content__task">
<span>Задача</span>
{editOpen ? (
<input
value={inputsValue.title}
onChange={(e) => {
setInputsValue((prevValue) => ({
...prevValue,
title: e.target.value,
}));
}}
/>
) : (
<h5>{inputsValue.title}</h5>
)}
<div className="content__description">
{editOpen ? (
<input
value={inputsValue.description}
onChange={(e) => {
setInputsValue((prevValue) => ({
...prevValue,
description: e.target.value,
}));
}}
/>
) : (
<p>{inputsValue.description}</p>
)}
</div>
<div className="content__communication">
<p className="tasks">
<BaseButton
onClick={() => {
dispatch(modalToggle("addSubtask"));
setModalAddWorker(true);
}}
styles={"button-green-add"}
>
<img src={plus}></img>
Добавить под задачу
</BaseButton>
</p>
<p className="file">
<button>
<img src={file} alt="file"></img>
Загрузить файл
</button>
<span>{0}</span>
Файлов
</p>
</div>
<div className="content__input">
<input
placeholder="Оставить комментарий"
value={inputsValue.comment}
onChange={(e) => {
setInputsValue((prevValue) => ({
...prevValue,
comment: e.target.value,
}));
}}
/>
<img src={send} onClick={createComment} alt="send"></img>
</div>
<div className="comments__list">
{comments.map((comment) => {
return (
<TrackerTaskComment
key={comment.id}
taskId={taskInfo.id}
comment={comment}
commentDelete={commentDelete}
addSubComment={addSubComment}
subCommentDelete={subCommentDelete}
/>
);
})}
</div>
</div>
<div className="modal-tiket__content ticket">
<div className="content ticket-whith">
<div className="content__task">
<span>Задача</span>
{editOpen ? <input value={inputsValue.title} onChange={(e) => {
setInputsValue((prevValue) => ({...prevValue, title: e.target.value}))
}} /> :<h5>{inputsValue.title}</h5>}
<div className="content__description">
{editOpen ? <input value={inputsValue.description} onChange={(e) => {
setInputsValue((prevValue) => ({...prevValue, description: e.target.value}))
}}/> :<p>{inputsValue.description}</p>}
{/*<img src={task} className="image-task"></img>*/}
</div>
<div className="content__communication">
<p className="tasks">
<button
onClick={() => {
dispatch(modalToggle("addSubtask"));
setModalAddWorker(true);
}}
>
<img src={plus} alt='plus'></img>
Добавить под задачу
</button>
</p>
<p className="file">
<button>
<img src={file} alt='file'></img>
Загрузить файл
</button>
<span>{0}</span>
Файлов
</p>
</div>
<div className="content__input">
<input placeholder="Оставить комментарий" value={inputsValue.comment} onChange={(e) => {
setInputsValue((prevValue) => ({...prevValue, comment: e.target.value}))
}} />
<img src={send} onClick={createComment} alt='send'></img>
</div>
<div className='comments__list'>
{comments.map((comment) => {
return <TrackerTaskComment
key={comment.id}
taskId={taskInfo.id}
comment={comment}
commentDelete={commentDelete}
addSubComment={addSubComment}
subCommentDelete={subCommentDelete}
/>
})
}
</div>
</div>
</div>
<div className="workers">
<div className="workers_box">
<p className="workers__creator">
Создатель : <span>{taskInfo.user?.fio}</span>
</p>
<div>
{Boolean(taskInfo.taskUsers?.length) &&
taskInfo.taskUsers.map((worker, index) => {
return (
<div className="worker" key={index}>
<img src={worker.avatar} alt="worket"></img>
<p>{worker.name}</p>
</div>
);
})}
</div>
<div className="workers">
<div className="workers_box">
<p className="workers__creator">
Создатель : <span>{taskInfo.user?.fio}</span>
</p>
<div>
{Boolean(taskInfo.taskUsers?.length) &&
taskInfo.taskUsers.map((worker, index) => {
return (
<div className="worker" key={index}>
<img src={worker.avatar} alt='worket'></img>
<p>{worker.name}</p>
</div>
);
})}
</div>
<div className="add-worker moreItems">
<button
onClick={() => {
dispatch(modalToggle("addWorker"));
setModalAddWorker(true);
}}
>
+
</button>
<span>Добавить исполнителя</span>
</div>
<div className="add-worker moreItems">
<button
onClick={() => {
dispatch(modalToggle("addWorker"));
setModalAddWorker(true);
}}
>
+
</button>
<span>Добавить участников</span>
</div>
</div>
<div className="add-worker moreItems">
<button
onClick={() => {
dispatch(modalToggle("addWorker"));
setModalAddWorker(true);
}}
>
+
</button>
<span>Добавить исполнителя</span>
</div>
<div className="add-worker moreItems">
<button
onClick={() => {
dispatch(modalToggle("addWorker"));
setModalAddWorker(true);
}}
>
+
</button>
<span>Добавить участников</span>
</div>
</div>
<div className="workers_box-middle">
<div className="time">
<img src={watch} alt='watch'></img>
<span>Длительность : </span>
<p>{"0:00:00"}</p>
</div>
<div className="workers_box-middle">
<div className="time">
<img src={watch} alt="watch"></img>
<span>Длительность : </span>
<p>{"0:00:00"}</p>
</div>
{timerStart ?
<button className="stop" onClick={() => stopTaskTimer()}>
Остановить
</button>
:
<button className={taskInfo.executor_id === Number(localStorage.getItem('id')) ? 'start' : 'start disable'} onClick={() => startTaskTimer()}>
Начать делать <img src={arrow2} alt='arrow'></img>
</button>
{timerStart ? (
<button className="stop" onClick={() => stopTaskTimer()}>
Остановить
</button>
) : (
<button
className={
taskInfo.executor_id ===
Number(localStorage.getItem("id"))
? "start"
: "start disable"
}
</div>
onClick={() => startTaskTimer()}
>
Начать делать <img src={arrow2} alt="arrow"></img>
</button>
)}
</div>
<div className="workers_box-bottom">
<div className={editOpen ? 'edit' : ''} onClick={() => {
if(editOpen) {
setEditOpen(!editOpen)
editTask()
} else {
setEditOpen(!editOpen)
}
}}>
<img src={edit} alt='edit'></img>
<p>{editOpen ? 'сохранить' : 'редактировать'}</p>
</div>
<div>
<img src={link} alt='link'></img>
<p>ссылка на проект</p>
</div>
<div>
<img src={archive2} alt='arch'></img>
<p>в архив</p>
</div>
<div onClick={deleteTask}>
<img src={del} alt='delete'></img>
<p>удалить</p>
</div>
</div>
<div className="workers_box-bottom">
<div
className={editOpen ? "edit" : ""}
onClick={() => {
if (editOpen) {
setEditOpen(!editOpen);
editTask();
} else {
setEditOpen(!editOpen);
}
}}
>
<img src={edit} alt="edit"></img>
<p>{editOpen ? "сохранить" : "редактировать"}</p>
</div>
<div>
<img src={link} alt="link"></img>
<p>ссылка на проект</p>
</div>
<div>
<img src={archive2} alt="arch"></img>
<p>в архив</p>
</div>
<div onClick={deleteTask}>
<img src={del} alt="delete"></img>
<p>удалить</p>
</div>
</div>
</>
}
</div>
<Footer />
</section>
</div>
</div>
</>
)}
</div>
<Footer />
</section>
);
};

484
src/components/UI/ModalTicket/ModalTicket.jsx
View File

@ -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 (
<div
className={active ? "modal-tiket active" : "modal-tiket"}
onClick={() => setActive(false)}
>
<div
className="modal-tiket__content"
onClick={(e) => e.stopPropagation()}
>
<div className="content">
<h3 className="title-project">
<img src={category} className="title-project__category"></img>
Проект: {projectName}
<Link
to={`/tracker/task/${task.id}`}
className="title-project__full"
>
<img src={fullScreen}></img>
</Link>
</h3>
<div className="content__task">
<span>Задача</span>
{editOpen ? <input value={inputsValue.title} onChange={(e) => {
setInputsValue((prevValue) => ({...prevValue, title: e.target.value}))
}} /> :<h5>{inputsValue.title}</h5>}
<div className="content__description">
{editOpen ? <input value={inputsValue.description} onChange={(e) => {
setInputsValue((prevValue) => ({...prevValue, description: e.target.value}))
}}/> :<p>{inputsValue.description}</p>}
{/*<img src={taskImg} className="image-task"></img>*/}
</div>
<div className="content__communication">
<p className="tasks">
<button
onClick={() => {
dispatch(modalToggle("addSubtask"));
setAddSubtask(true);
}}
>
<img src={plus}></img>
Добавить под задачу
</button>
</p>
<p className="file">
<button>
<img src={file}></img>
Загрузить файл
</button>
<span>{0}</span>
Файлов
</p>
</div>
<div className="content__input">
<input placeholder="Оставить комментарий" value={inputsValue.comment} onChange={(e) => {
setInputsValue((prevValue) => ({...prevValue, comment: e.target.value}))
}} />
<img src={send} onClick={createComment}></img>
</div>
<div className='comments__list'>
{comments.map((comment) => {
return <TrackerTaskComment
key={comment.id}
taskId={task.id}
comment={comment}
commentDelete={commentDelete}
addSubComment={addSubComment}
subCommentDelete={subCommentDelete}
/>
})
}
</div>
</div>
</div>
<div className="workers">
<div className="workers_box task__info">
<span className="exit" onClick={() => setActive(false)}></span>
<span className='nameProject'>{task.title}</span>
<p className="workers__creator">Создатель : {task.user?.fio}</p>
{executor ?
<div className='executor'>
<p>Исполнитель: {executor.fio}</p>
<img src={urlForLocal(executor.avatar)} alt='avatar' />
<img src={close} className='delete' onClick={() => deleteTaskExecutor()} />
</div> :
<div className="add-worker moreItems ">
<button onClick={() => setDropListOpen(true)}>+</button>
<span>Добавить исполнителя</span>
{dropListOpen &&
<div className='dropdownList'>
<img src={close} className='dropdownList__close' onClick={() => setDropListOpen(false)} />
{projectUsers.map((person) => {
return <div className='dropdownList__person' key={person.user_id} onClick={() => taskExecutor(person)}>
<span>{person.user.fio}</span>
<img src={urlForLocal(person.user.avatar)} />
</div>
})
}
</div>
}
</div>
}
{Boolean(members.length) &&
<div className='members'>
<p>Участники:</p>
<div className='members__list'>
{members.map((member) => {
return <div className='worker' key={member.user_id}>
<p>{member.fio}</p>
<img src={urlForLocal(member.avatar)} />
<img src={close} className='delete' onClick={() => deleteMember(member)} />
</div>
})
}
</div>
</div>
}
<div className="add-worker moreItems">
<button onClick={() => setDropListMembersOpen(true)}>+</button>
<span>Добавить участников</span>
{dropListMembersOpen &&
<div className='dropdownList'>
<img src={close} className='dropdownList__close' onClick={() => setDropListMembersOpen(false)} />
{users.length ? users.map((person) => {
return <div className='dropdownList__person' key={person.user_id} onClick={() => addMember(person)}>
<span>{person.user.fio}</span>
<img src={urlForLocal(person.user.avatar)} />
</div>
}) : <p className='noUsers'>Нет пользователей</p>
}
</div>
}
</div>
</div>
<div className="workers_box-middle">
<div className="time">
<img src={watch}></img>
<span>Длительность : </span>
<p>
{correctTimerTime(currentTimerCount.hours)}:{correctTimerTime(currentTimerCount.minute)}:{correctTimerTime(currentTimerCount.seconds)}
</p>
</div>
{timerStart ?
<button className="stop" onClick={() => stopTaskTimer()}>
Остановить
</button>
:
<button className={task.executor_id === Number(localStorage.getItem('id')) ? 'start' : 'start disable'} onClick={() => startTaskTimer()}>
Начать делать <img src={arrow}></img>
</button>
}
</div>
<div className="workers_box-bottom">
<div className={editOpen ? 'edit' : ''} onClick={() => {
if(editOpen) {
setEditOpen(!editOpen)
editTask()
} else {
setEditOpen(!editOpen)
}
}}>
<img src={edit}></img>
<p>{editOpen ? 'сохранить' : 'редактировать'}</p>
</div>
<div>
<img src={link}></img>
<p>ссылка на проект</p>
</div>
<div onClick={deleteTask}>
<img src={archive}></img>
<p>в архив</p>
</div>
<div onClick={deleteTask}>
<img src={del}></img>
<p>удалить</p>
</div>
</div>
</div>
</div>
<TrackerModal
active={addSubtask}
setActive={setAddSubtask}
defautlInput={task.column_id}
></TrackerModal>
</div>
);
};
export default ModalTiсket;

456
src/components/UI/TicketFullScreen/TicketFullScreen.jsx
View File

@ -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 (
<section className="ticket-full-screen">
<ProfileHeader />
<Navigation />
<div className="container">
<div className="tracker__content">
<ProfileBreadcrumbs
links={[
{ name: "Главная", link: "/profile" },
{ name: "Трекер", link: "/profile/tracker" },
]}
/>
<h2 className="tracker__title">Управление проектами с трекером</h2>
</div>
</div>
<div className="tracker__tabs">
<div className="tracker__tabs__head">
<Link
to="/profile/tracker"
className="tab active-tab"
onClick={() => toggleTabs(1)}
>
<img src={project} alt="img" />
<p>Проекты </p>
</Link>
<Link
to="/profile/tracker"
className="tab"
onClick={() => toggleTabs(2)}
>
<img src={tasks} alt="img" />
<p>Все мои задачи</p>
</Link>
<Link
to="/profile/tracker"
className="tab"
onClick={() => toggleTabs(3)}
>
<img src={archive} alt="img" />
<p>Архив</p>
</Link>
</div>
{loader ? <Loader /> :
<>
<div className="tracker__tabs__content content-tabs">
<div className="tasks__head">
<div className="tasks__head__wrapper">
<h4>Проект : {projectBoard.name}</h4>
<TrackerModal
active={modalAddWorker}
setActive={setModalAddWorker}
></TrackerModal>
<div className="tasks__head__persons">
{/*<img src={avatarTest} alt="avatar" />*/}
{/*<img src={avatarTest} alt="avatar" />*/}
<span className="countPersons">{projectBoard.projectUsers?.length}</span>
<span
className="addPerson"
onClick={() => {
setPersonListOpen(true)
}}
>
+
</span>
<p>добавить участника</p>
{personListOpen &&
<div className='persons__list'>
<img className='persons__list__close' src={close} alt='close' onClick={() => setPersonListOpen(false)} />
<div className='persons__list__count'><span>{projectBoard.projectUsers?.length}</span>участник</div>
<div className='persons__list__info'>В проекте - <span>“{projectBoard.name}”</span></div>
<div className='persons__list__items'>
{projectBoard.projectUsers?.map((person) => {
return <div className='persons__list__item' key={person.user_id}>
<img className='avatar' src={urlForLocal(person.user.avatar)} alt='avatar' />
<span>{person.user.fio}</span>
<img className='delete' src={close} alt='delete' onClick={() => deletePerson(person.user_id)}/>
</div>
})
}
</div>
<div className='persons__list__add'
onClick={() => {
dispatch(modalToggle("addWorker"));
setModalAddWorker(true);
setPersonListOpen(false)
}}
>
<span className='addPerson'>+</span>
<p>Добавить участников</p>
</div>
</div>
}
</div>
<Link to={`/profile/tracker`} className="link">
<div className="tasks__head__back">
<p>Вернуться на проекты</p>
<img src={arrow} alt="arrow" />
</div>
</Link>
</div>
</div>
</div>
<div className="modal-tiket__content ticket">
<div className="content ticket-whith">
<div className="content__task">
<span>Задача</span>
{editOpen ? <input value={inputsValue.title} onChange={(e) => {
setInputsValue((prevValue) => ({...prevValue, title: e.target.value}))
}} /> :<h5>{inputsValue.title}</h5>}
<div className="content__description">
{editOpen ? <input value={inputsValue.description} onChange={(e) => {
setInputsValue((prevValue) => ({...prevValue, description: e.target.value}))
}}/> :<p>{inputsValue.description}</p>}
{/*<img src={task} className="image-task"></img>*/}
</div>
<div className="content__communication">
<p className="tasks">
<button
onClick={() => {
dispatch(modalToggle("addSubtask"));
setModalAddWorker(true);
}}
>
<img src={plus}></img>
Добавить под задачу
</button>
</p>
<p className="file">
<button>
<img src={file}></img>
Загрузить файл
</button>
<span>{0}</span>
Файлов
</p>
</div>
<div className="content__input">
<input placeholder="Оставить комментарий" value={inputsValue.comment} onChange={(e) => {
setInputsValue((prevValue) => ({...prevValue, comment: e.target.value}))
}} />
<img src={send} onClick={createComment}></img>
</div>
<div className='comments__list'>
{comments.map((comment) => {
return <TrackerTaskComment
key={comment.id}
taskId={taskInfo.id}
comment={comment}
commentDelete={commentDelete}
addSubComment={addSubComment}
subCommentDelete={subCommentDelete}
/>
})
}
</div>
</div>
</div>
<div className="workers">
<div className="workers_box">
<p className="workers__creator">
Создатель : <span>{taskInfo.user?.fio}</span>
</p>
<div>
{Boolean(taskInfo.taskUsers?.length) &&
taskInfo.taskUsers.map((worker, index) => {
return (
<div className="worker" key={index}>
<img src={worker.avatar}></img>
<p>{worker.name}</p>
</div>
);
})}
</div>
<div className="add-worker moreItems">
<button
onClick={() => {
dispatch(modalToggle("addWorker"));
setModalAddWorker(true);
}}
>
+
</button>
<span>Добавить исполнителя</span>
</div>
<div className="add-worker moreItems">
<button
onClick={() => {
dispatch(modalToggle("addWorker"));
setModalAddWorker(true);
}}
>
+
</button>
<span>Добавить участников</span>
</div>
</div>
<div className="workers_box-middle">
<div className="time">
<img src={watch}></img>
<span>Длительность : </span>
<p>{"0:00:00"}</p>
</div>
{timerStart ?
<button className="stop" onClick={() => stopTaskTimer()}>
Остановить
</button>
:
<button className={taskInfo.executor_id === Number(localStorage.getItem('id')) ? 'start' : 'start disable'} onClick={() => startTaskTimer()}>
Начать делать <img src={arrow2}></img>
</button>
}
</div>
<div className="workers_box-bottom">
<div className={editOpen ? 'edit' : ''} onClick={() => {
if(editOpen) {
setEditOpen(!editOpen)
editTask()
} else {
setEditOpen(!editOpen)
}
}}>
<img src={edit}></img>
<p>{editOpen ? 'сохранить' : 'редактировать'}</p>
</div>
<div>
<img src={link}></img>
<p>ссылка на проект</p>
</div>
<div>
<img src={archive2}></img>
<p>в архив</p>
</div>
<div onClick={deleteTask}>
<img src={del}></img>
<p>удалить</p>
</div>
</div>
</div>
</div>
</>
}
</div>
<Footer />
</section>
);
};
export default TicketFullScreen;

295
src/pages/ProjectTracker/ProjectTracker.js
View File

@ -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 = () => {
<p>добавить колонку</p>
</div>
<div className="tasks__head__persons">
<span className="countPersons">{projectBoard.projectUsers?.length}</span>
<span className="countPersons">
{projectBoard.projectUsers?.length}
</span>
<span
className="addPerson"
onClick={() => {
setPersonListOpen(true)
setPersonListOpen(true);
}}
>
+
</span>
<p>добавить участника</p>
{personListOpen &&
<div className='persons__list'>
<img className='persons__list__close' src={close} alt='close' onClick={() => setPersonListOpen(false)} />
<div className='persons__list__count'><span>{projectBoard.projectUsers?.length}</span>участник</div>
<div className='persons__list__info'>В проекте - <span>“{projectBoard.name}”</span></div>
<div className='persons__list__items'>
{projectBoard.projectUsers?.map((person) => {
return <div className='persons__list__item' key={person.user_id}>
<img className='avatar' src={urlForLocal(person.user.avatar)} alt='avatar' />
<span>{person.user.fio}</span>
<img className='delete' src={close} alt='delete' onClick={() => deletePerson(person.user_id)}/>
</div>
})
}
{personListOpen && (
<div className="persons__list">
<img
className="persons__list__close"
src={close}
alt="close"
onClick={() => setPersonListOpen(false)}
/>
<div className="persons__list__count">
<span>{projectBoard.projectUsers?.length}</span>
участник
</div>
<div className="persons__list__info">
В проекте - <span>“{projectBoard.name}”</span>
</div>
<div className="persons__list__items">
{projectBoard.projectUsers?.map((person) => {
return (
<div
className="persons__list__item"
key={person.user_id}
>
<img
className="avatar"
src={urlForLocal(person.user.avatar)}
alt="avatar"
/>
<span>{person.user.fio}</span>
<img
className="delete"
src={close}
alt="delete"
onClick={() => deletePerson(person.user_id)}
/>
</div>
);
})}
</div>
<div
className="persons__list__add"
onClick={() => {
dispatch(modalToggle("addWorker"));
setModalAdd(true);
setPersonListOpen(false);
}}
>
<span className="addPerson">+</span>
<p>Добавить участников</p>
</div>
</div>
<div className='persons__list__add'
onClick={() => {
dispatch(modalToggle("addWorker"));
setModalAdd(true);
setPersonListOpen(false)
}}
>
<span className='addPerson'>+</span>
<p>Добавить участников</p>
</div>
</div>
}
)}
</div>
<div className="tasks__head__checkBox" onClick={filterParticipateTasks}>
<div
className="tasks__head__checkBox"
onClick={filterParticipateTasks}
>
<span>Участвую</span>
<div className="tasks__head__checkBox__box">
{checkBoxParticipateTasks &&
<img src={accept} alt='accept' />
}
{checkBoxParticipateTasks && (
<img src={accept} alt="accept" />
)}
</div>
</div>
<div className="tasks__head__checkBox" onClick={filterMyTask}>
<span>Мои</span>
<div className="tasks__head__checkBox__box">
{checkBoxMyTasks &&
<img src={accept} alt='accept' />
}
{checkBoxMyTasks && <img src={accept} alt="accept" />}
</div>
</div>
<Link to="/profile/tracker" className="tasks__head__back">
@ -364,14 +397,16 @@ export const ProjectTracker = () => {
</div>
</div>
{Boolean(modalActiveTicket) && <ModalTicket
{Boolean(modalActiveTicket) && (
<ModalTicket
active={modalActiveTicket}
setActive={setModalActiveTicket}
task={selectedTicket}
projectId={projectBoard.id}
projectName={projectBoard.name}
projectUsers={projectBoard.projectUsers}
/>}
/>
)}
<div className="tasks__container">
{Boolean(projectBoard?.columns) &&
@ -381,7 +416,7 @@ export const ProjectTracker = () => {
<div
key={column.id}
onDragOver={(e) => 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 = () => {
<div>
<span
className="add"
onClick={() => selectedTabTask(column.id, column.tasks.length)}
onClick={() =>
selectedTabTask(column.id, column.tasks.length)
}
>
+
</span>
@ -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 = () => {
<div
key={task.id}
className={`tasks__board__item ${
taskHover[task.id] ? "task__hover" : ""
taskHover[task.id] ? "task__hover" : ""
}`}
draggable={true}
onDragStart={(e) => 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)}
>
<div className="tasks__board__item__title">
<p className='task__board__item__title'>{task.title}</p>
<p className="task__board__item__title">
{task.title}
</p>
</div>
<p className="tasks__board__item__description">
{task.description}