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

Fixed eslint

Browse Source
This commit is contained in:
MaxOvs19 2023-06-26 10:56:39 +03:00
parent 07740c3369
commit 66ec2daea1
11 changed files with 1684 additions and 1470 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

629
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

10
package.json
View File

@ -7,8 +7,6 @@
"@testing-library/jest-dom": "^5.12.0", "@testing-library/jest-dom": "^5.12.0",
"@testing-library/react": "^11.2.7", "@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3", "@testing-library/user-event": "^12.8.3",
"@typescript-eslint/eslint-plugin": "^4.5.0",
"@typescript-eslint/parser": "^4.5.0",
"axios": "^0.24.0", "axios": "^0.24.0",
"babel": "^6.23.0", "babel": "^6.23.0",
"bfj": "^7.0.2", "bfj": "^7.0.2",
@ -50,14 +48,17 @@
"@babel/preset-env": "^7.20.2", "@babel/preset-env": "^7.20.2",
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.10", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
"@trivago/prettier-plugin-sort-imports": "^4.1.1", "@trivago/prettier-plugin-sort-imports": "^4.1.1",
"@typescript-eslint/eslint-plugin": "^5.60.0",
"@typescript-eslint/parser": "^5.60.0",
"babel-loader": "^9.1.2", "babel-loader": "^9.1.2",
"copy-webpack-plugin": "^10.2.0", "copy-webpack-plugin": "^10.2.0",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"css-loader": "6.7.3", "css-loader": "6.7.3",
"dotenv-webpack": "^7.0.3", "dotenv-webpack": "^7.0.3",
"eslint": "^8.41.0", "eslint": "^8.43.0",
"eslint-plugin-react": "^7.32.2", "eslint-plugin-react": "^7.32.2",
"html-webpack-plugin": "5.5.0", "html-webpack-plugin": "5.5.0",
"husky": "^8.0.0",
"mini-css-extract-plugin": "^2.7.2", "mini-css-extract-plugin": "^2.7.2",
"node-sass": "8.0.0", "node-sass": "8.0.0",
"postcss": "^8.4.21", "postcss": "^8.4.21",
@ -74,8 +75,7 @@
"webpack-bundle-analyzer": "4.7.0", "webpack-bundle-analyzer": "4.7.0",
"webpack-cli": "^5.0.1", "webpack-cli": "^5.0.1",
"webpack-dev-server": "4.11.1", "webpack-dev-server": "4.11.1",
"webpack-merge": "5.8.0", "webpack-merge": "5.8.0"
"husky": "^8.0.0"
}, },
"scripts": { "scripts": {
"build": "cross-env SERVE=true webpack -c config/webpack/prod.js", "build": "cross-env SERVE=true webpack -c config/webpack/prod.js",

7
src/components/Common/BaseButton/BaseButton.jsx
View File

@ -1,13 +1,10 @@
import React from "react"; import React from "react";
import "./basebutton.scss" import "./basebutton.scss";
export const BaseButton = ({ children, styles, ...props }) => { export const BaseButton = ({ children, styles, ...props }) => {
return ( return (
<button <button className={styles ? `${styles} button` : "button"} {...props}>
className={styles ? `${styles} button` : "button"}
{...props}
>
{children} {children}
</button> </button>
); );

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

@ -1,45 +1,42 @@
import React, { useEffect, useState } from "react"; 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 { Footer } from "@components/Common/Footer/Footer";
import { Link, useParams, useNavigate } from "react-router-dom"; import { Loader } from "@components/Common/Loader/Loader";
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 { apiRequest } from "../../../../api/request";
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 { import {
deletePersonOnProject, deletePersonOnProject,
getBoarderLoader,
getProjectBoard,
modalToggle, modalToggle,
setProjectBoardFetch, setProjectBoardFetch,
setToggleTab, setToggleTab,
getProjectBoard,
getBoarderLoader,
} from "../../../../redux/projectsTrackerSlice"; } from "../../../../redux/projectsTrackerSlice";
import { apiRequest } from "../../../../api/request"; import { getCorrectRequestDate, urlForLocal } from "../../../../utils/helper";
import TrackerModal from "../../../Modal/TrackerModal/TrackerModal";
import project from "../../../../assets/icons/trackerProject.svg"; import { Navigation } from "../../../Navigation/Navigation";
import watch from "../../../../assets/icons/watch.svg"; import { ProfileBreadcrumbs } from "../../../ProfileBreadcrumbs/ProfileBreadcrumbs";
import file from "../../../../assets/icons/fileModal.svg"; import { ProfileHeader } from "../../../ProfileHeader/ProfileHeader";
import send from "../../../../assets/icons/send.svg"; import TrackerTaskComment from "../../../TrackerTaskComment/TrackerTaskComment";
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 "./ticketFullScreen.scss"; import "./ticketFullScreen.scss";
import {getCorrectRequestDate, urlForLocal} from "../../../../utils/helper"; export const TicketFullScreen = () => {
export const TicketFullScreen = ({}) => {
const [modalAddWorker, setModalAddWorker] = useState(false); const [modalAddWorker, setModalAddWorker] = useState(false);
const ticketId = useParams(); const ticketId = useParams();
const dispatch = useDispatch(); const dispatch = useDispatch();
@ -51,35 +48,41 @@ export const TicketFullScreen = ({}) => {
const [inputsValue, setInputsValue] = useState({}); const [inputsValue, setInputsValue] = useState({});
const [loader, setLoader] = useState(true); const [loader, setLoader] = useState(true);
const [comments, setComments] = useState([]); const [comments, setComments] = useState([]);
const [personListOpen, setPersonListOpen] = useState(false) const [personListOpen, setPersonListOpen] = useState(false);
const [timerStart, setTimerStart] = useState(false) const [timerStart, setTimerStart] = useState(false);
const [timerInfo, setTimerInfo] = useState({}) const [timerInfo, setTimerInfo] = useState({});
useEffect(() => { useEffect(() => {
apiRequest(`/task/get-task?task_id=${ticketId.id}`).then((taskInfo) => { apiRequest(`/task/get-task?task_id=${ticketId.id}`).then((taskInfo) => {
setTaskInfo(taskInfo); setTaskInfo(taskInfo);
setInputsValue({title: taskInfo.title, description: taskInfo.description, comment: ''}) setInputsValue({
apiRequest(`/comment/get-by-entity?entity_type=2&entity_id=${taskInfo.id}`).then((res) => { 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) => { const comments = res.reduce((acc, cur) => {
if (!cur.parent_id) { if (!cur.parent_id) {
acc.push({...cur, subComments: []}) acc.push({ ...cur, subComments: [] });
} else { } else {
acc.forEach((item) => { 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 return acc;
}, []) }, []);
setComments(comments) setComments(comments);
}) });
taskInfo.timers.forEach((time) => { taskInfo.timers.forEach((time) => {
if (!time.stopped_at) { if (!time.stopped_at) {
setTimerStart(true) setTimerStart(true);
setTimerInfo(time) setTimerInfo(time);
} }
}) });
dispatch(setProjectBoardFetch(taskInfo.project_id)); dispatch(setProjectBoardFetch(taskInfo.project_id));
setLoader(boardLoader) setLoader(boardLoader);
}); });
}, []); }, []);
@ -101,10 +104,9 @@ export const TicketFullScreen = ({}) => {
data: { data: {
task_id: taskInfo.id, task_id: taskInfo.id,
title: inputsValue.title, title: inputsValue.title,
description: inputsValue.description description: inputsValue.description,
}, },
}).then(() => { }).then(() => {});
});
} }
function createComment() { function createComment() {
@ -113,15 +115,15 @@ export const TicketFullScreen = ({}) => {
data: { data: {
text: inputsValue.comment, text: inputsValue.comment,
entity_type: 2, entity_type: 2,
entity_id: taskInfo.id entity_id: taskInfo.id,
} },
}).then((res) => { }).then((res) => {
let newComment = res let newComment = res;
newComment.created_at = new Date() newComment.created_at = new Date();
newComment.subComments = [] newComment.subComments = [];
setInputsValue((prevValue) => ({...prevValue, comment: ''})) setInputsValue((prevValue) => ({ ...prevValue, comment: "" }));
setComments((prevValue) => ([...prevValue, newComment])) setComments((prevValue) => [...prevValue, newComment]);
}) });
} }
function startTaskTimer() { function startTaskTimer() {
@ -130,12 +132,12 @@ export const TicketFullScreen = ({}) => {
data: { data: {
entity_type: 2, entity_type: 2,
entity_id: taskInfo.id, entity_id: taskInfo.id,
created_at: getCorrectRequestDate(new Date()) created_at: getCorrectRequestDate(new Date()),
} },
}).then((res) => { }).then((res) => {
setTimerStart(true) setTimerStart(true);
setTimerInfo(res) setTimerInfo(res);
}) });
} }
function stopTaskTimer() { function stopTaskTimer() {
@ -143,9 +145,9 @@ export const TicketFullScreen = ({}) => {
method: "PUT", method: "PUT",
data: { data: {
timer_id: timerInfo.id, timer_id: timerInfo.id,
stopped_at: getCorrectRequestDate(new Date()) stopped_at: getCorrectRequestDate(new Date()),
} },
}).then(() => setTimerStart(false)) }).then(() => setTimerStart(false));
} }
function deletePerson(userId) { function deletePerson(userId) {
@ -153,47 +155,50 @@ export const TicketFullScreen = ({}) => {
method: "DELETE", method: "DELETE",
data: { data: {
project_id: projectBoard.id, project_id: projectBoard.id,
user_id: userId user_id: userId,
}, },
}).then(() => { }).then(() => {
dispatch(deletePersonOnProject(userId)) dispatch(deletePersonOnProject(userId));
}); });
} }
function commentDelete(comment) { 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) { if (comment.subComments.length) {
comment.subComments.forEach((subComment) => { comment.subComments.forEach((subComment) => {
apiRequest("/comment/update", { apiRequest("/comment/update", {
method: "PUT", method: "PUT",
data: { data: {
comment_id: subComment.id, comment_id: subComment.id,
status: 0 status: 0,
} },
}).then(() => { }).then(() => {});
}) });
})
} }
} }
function addSubComment(commentId, subComment) { function addSubComment(commentId, subComment) {
const addSubComment = comments const addSubComment = comments;
addSubComment.forEach((comment) => { addSubComment.forEach((comment) => {
if (comment.id === commentId) { if (comment.id === commentId) {
comment.subComments.push(subComment) comment.subComments.push(subComment);
} }
}) });
setComments(addSubComment) setComments(addSubComment);
} }
function subCommentDelete(subComment) { function subCommentDelete(subComment) {
const deleteSubComment = comments const deleteSubComment = comments;
deleteSubComment.forEach((comment, index) => { deleteSubComment.forEach((comment, index) => {
if (comment.id === subComment.parent_id) { 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) => { const toggleTabs = (index) => {
@ -201,256 +206,322 @@ export const TicketFullScreen = ({}) => {
}; };
return ( return (
<section className="ticket-full-screen"> <section className="ticket-full-screen">
<ProfileHeader /> <ProfileHeader />
<Navigation /> <Navigation />
<div className="container"> <div className="container">
<div className="tracker__content"> <div className="tracker__content">
<ProfileBreadcrumbs <ProfileBreadcrumbs
links={[ links={[
{ name: "Главная", link: "/profile" }, { name: "Главная", link: "/profile" },
{ name: "Трекер", link: "/profile/tracker" }, { name: "Трекер", link: "/profile/tracker" },
]} ]}
/> />
<h2 className="tracker__title">Управление проектами с трекером</h2> <h2 className="tracker__title">Управление проектами с трекером</h2>
</div>
</div> </div>
<div className="tracker__tabs"> </div>
<div className="tracker__tabs__head"> <div className="tracker__tabs">
<Link <div className="tracker__tabs__head">
to="/profile/tracker" <Link
className="tab active-tab" to="/profile/tracker"
onClick={() => toggleTabs(1)} className="tab active-tab"
> onClick={() => toggleTabs(1)}
<img src={project} alt="img" /> >
<p>Проекты </p> <img src={project} alt="img" />
</Link> <p>Проекты </p>
<Link </Link>
to="/profile/tracker" <Link
className="tab" to="/profile/tracker"
onClick={() => toggleTabs(2)} className="tab"
> onClick={() => toggleTabs(2)}
<img src={tasks} alt="img" /> >
<p>Все мои задачи</p> <img src={tasks} alt="img" />
</Link> <p>Все мои задачи</p>
<Link </Link>
to="/profile/tracker" <Link
className="tab" to="/profile/tracker"
onClick={() => toggleTabs(3)} className="tab"
> onClick={() => toggleTabs(3)}
<img src={archive} alt="img" /> >
<p>Архив</p> <img src={archive} alt="img" />
</Link> <p>Архив</p>
</div> </Link>
{loader ? <Loader /> : </div>
<> {loader ? (
<div className="tracker__tabs__content content-tabs"> <Loader />
<div className="tasks__head"> ) : (
<div className="tasks__head__wrapper"> <>
<h4>Проект : {projectBoard.name}</h4> <div className="tracker__tabs__content content-tabs">
<div className="tasks__head">
<div className="tasks__head__wrapper">
<h4>Проект : {projectBoard.name}</h4>
<TrackerModal <TrackerModal
active={modalAddWorker} active={modalAddWorker}
setActive={setModalAddWorker} setActive={setModalAddWorker}
></TrackerModal> ></TrackerModal>
<div className="tasks__head__persons"> <div className="tasks__head__persons">
{/*<img src={avatarTest} alt="avatar" />*/} {/*<img src={avatarTest} alt="avatar" />*/}
{/*<img src={avatarTest} alt="avatar" />*/} {/*<img src={avatarTest} alt="avatar" />*/}
<span className="countPersons">{projectBoard.projectUsers?.length}</span> <span className="countPersons">
<span {projectBoard.projectUsers?.length}
className="addPerson" </span>
onClick={() => { <span
setPersonListOpen(true) className="addPerson"
}} onClick={() => {
> setPersonListOpen(true);
+ }}
</span> >
<p>добавить участника</p> +
{personListOpen && </span>
<div className='persons__list'> <p>добавить участника</p>
<img className='persons__list__close' src={close} alt='close' onClick={() => setPersonListOpen(false)} /> {personListOpen && (
<div className='persons__list__count'><span>{projectBoard.projectUsers?.length}</span>участник</div> <div className="persons__list">
<div className='persons__list__info'>В проекте - <span>“{projectBoard.name}”</span></div> <img
<div className='persons__list__items'> className="persons__list__close"
{projectBoard.projectUsers?.map((person) => { src={close}
return <div className='persons__list__item' key={person.user_id}> alt="close"
<img className='avatar' src={urlForLocal(person.user.avatar)} alt='avatar' /> onClick={() => setPersonListOpen(false)}
<span>{person.user.fio}</span> />
<img className='delete' src={close} alt='delete' onClick={() => deletePerson(person.user_id)}/> <div className="persons__list__count">
</div> <span>{projectBoard.projectUsers?.length}</span>
}) участник
}
</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> </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> </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} 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>
<div className="modal-tiket__content ticket"> </div>
<div className="content ticket-whith"> <div className="workers">
<div className="content__task"> <div className="workers_box">
<span>Задача</span> <p className="workers__creator">
{editOpen ? <input value={inputsValue.title} onChange={(e) => { Создатель : <span>{taskInfo.user?.fio}</span>
setInputsValue((prevValue) => ({...prevValue, title: e.target.value})) </p>
}} /> :<h5>{inputsValue.title}</h5>} <div>
<div className="content__description"> {Boolean(taskInfo.taskUsers?.length) &&
{editOpen ? <input value={inputsValue.description} onChange={(e) => { taskInfo.taskUsers.map((worker, index) => {
setInputsValue((prevValue) => ({...prevValue, description: e.target.value})) return (
}}/> :<p>{inputsValue.description}</p>} <div className="worker" key={index}>
{/*<img src={task} className="image-task"></img>*/} <img src={worker.avatar} alt="worket"></img>
</div> <p>{worker.name}</p>
<div className="content__communication"> </div>
<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>
<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"> <div className="add-worker moreItems">
<button <button
onClick={() => { onClick={() => {
dispatch(modalToggle("addWorker")); dispatch(modalToggle("addWorker"));
setModalAddWorker(true); setModalAddWorker(true);
}} }}
> >
+ +
</button> </button>
<span>Добавить исполнителя</span> <span>Добавить исполнителя</span>
</div> </div>
<div className="add-worker moreItems"> <div className="add-worker moreItems">
<button <button
onClick={() => { onClick={() => {
dispatch(modalToggle("addWorker")); dispatch(modalToggle("addWorker"));
setModalAddWorker(true); setModalAddWorker(true);
}} }}
> >
+ +
</button> </button>
<span>Добавить участников</span> <span>Добавить участников</span>
</div> </div>
</div> </div>
<div className="workers_box-middle"> <div className="workers_box-middle">
<div className="time"> <div className="time">
<img src={watch} alt='watch'></img> <img src={watch} alt="watch"></img>
<span>Длительность : </span> <span>Длительность : </span>
<p>{"0:00:00"}</p> <p>{"0:00:00"}</p>
</div> </div>
{timerStart ? {timerStart ? (
<button className="stop" onClick={() => stopTaskTimer()}> <button className="stop" onClick={() => stopTaskTimer()}>
Остановить Остановить
</button> </button>
: ) : (
<button className={taskInfo.executor_id === Number(localStorage.getItem('id')) ? 'start' : 'start disable'} onClick={() => startTaskTimer()}> <button
Начать делать <img src={arrow2} alt='arrow'></img> className={
</button> 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="workers_box-bottom">
<div className={editOpen ? 'edit' : ''} onClick={() => { <div
if(editOpen) { className={editOpen ? "edit" : ""}
setEditOpen(!editOpen) onClick={() => {
editTask() if (editOpen) {
} else { setEditOpen(!editOpen);
setEditOpen(!editOpen) editTask();
} } else {
}}> setEditOpen(!editOpen);
<img src={edit} alt='edit'></img> }
<p>{editOpen ? 'сохранить' : 'редактировать'}</p> }}
</div> >
<div> <img src={edit} alt="edit"></img>
<img src={link} alt='link'></img> <p>{editOpen ? "сохранить" : "редактировать"}</p>
<p>ссылка на проект</p> </div>
</div> <div>
<div> <img src={link} alt="link"></img>
<img src={archive2} alt='arch'></img> <p>ссылка на проект</p>
<p>в архив</p> </div>
</div> <div>
<div onClick={deleteTask}> <img src={archive2} alt="arch"></img>
<img src={del} alt='delete'></img> <p>в архив</p>
<p>удалить</p> </div>
</div> <div onClick={deleteTask}>
</div> <img src={del} alt="delete"></img>
<p>удалить</p>
</div> </div>
</div> </div>
</> </div>
} </div>
</div> </>
<Footer /> )}
</section> </div>
<Footer />
</section>
); );
}; };

83
src/components/Modal/TrackerModal/TrackerModal.jsx
View File

@ -1,24 +1,23 @@
import React, {useEffect, useState} from "react"; import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { apiRequest } from "../../../api/request"; import { apiRequest } from "../../../api/request";
import { urlForLocal } from '../../../utils/helper' import arrowDown from "../../../assets/icons/arrows/selectArrow.png";
import { import {
setColumnName, addPersonToProject,
setColumnPriority, editColumnName,
editProjectName,
getColumnId,
getColumnName,
getColumnPriority,
getProjectBoard, getProjectBoard,
getValueModalType, getValueModalType,
setColumnName,
setColumnPriority,
setProject, setProject,
setProjectBoardFetch, setProjectBoardFetch,
editProjectName,
editColumnName,
getColumnName,
getColumnId,
addPersonToProject, getColumnPriority
} from "../../../redux/projectsTrackerSlice"; } from "../../../redux/projectsTrackerSlice";
import { urlForLocal } from "../../../utils/helper";
import arrowDown from "../../../assets/icons/arrows/selectArrow.png"
import "./trackerModal.scss"; import "./trackerModal.scss";
export const TrackerModal = ({ export const TrackerModal = ({
@ -33,8 +32,8 @@ export const TrackerModal = ({
const dispatch = useDispatch(); const dispatch = useDispatch();
const projectBoard = useSelector(getProjectBoard); const projectBoard = useSelector(getProjectBoard);
const columnName = useSelector(getColumnName); const columnName = useSelector(getColumnName);
const columnId = useSelector(getColumnId) const columnId = useSelector(getColumnId);
const columnPriority = useSelector(getColumnPriority) const columnPriority = useSelector(getColumnPriority);
const modalType = useSelector(getValueModalType); const modalType = useSelector(getValueModalType);
const [projectName, setProjectName] = useState(defautlInput); const [projectName, setProjectName] = useState(defautlInput);
@ -42,9 +41,9 @@ export const TrackerModal = ({
const [nameProject, setNameProject] = useState(""); const [nameProject, setNameProject] = useState("");
const [valueTiket, setValueTiket] = useState(""); const [valueTiket, setValueTiket] = useState("");
const [descriptionTicket, setDescriptionTicket] = useState(""); const [descriptionTicket, setDescriptionTicket] = useState("");
const [workers, setWorkers] = useState([]) const [workers, setWorkers] = useState([]);
const [selectWorkersOpen, setSelectWorkersOpen] = useState(false) const [selectWorkersOpen, setSelectWorkersOpen] = useState(false);
const [selectedWorker, setSelectedWorker] = useState(null) const [selectedWorker, setSelectedWorker] = useState(null);
function createTab() { function createTab() {
if (!valueColumn) { if (!valueColumn) {
@ -55,7 +54,9 @@ export const TrackerModal = ({
method: "POST", method: "POST",
data: { data: {
project_id: projectBoard.id, 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, title: valueColumn,
}, },
}).then(() => { }).then(() => {
@ -106,36 +107,38 @@ export const TrackerModal = ({
function changeColumnParams() { function changeColumnParams() {
projectBoard.columns.forEach((column) => { projectBoard.columns.forEach((column) => {
if (column.id === columnId && column.priority !== columnPriority) { if (column.id === columnId && column.priority !== columnPriority) {
const priorityColumns = [{ const priorityColumns = [
column_id: column.id, {
priority: Number(columnPriority) column_id: column.id,
}] priority: Number(columnPriority),
},
];
for (let i = column.priority; i < columnPriority; i++) { for (let i = column.priority; i < columnPriority; i++) {
const currentColumn = { const currentColumn = {
column_id: projectBoard.columns[i].id, column_id: projectBoard.columns[i].id,
priority: i priority: i,
} };
priorityColumns.push(currentColumn) priorityColumns.push(currentColumn);
} }
for (let i = column.priority; i > columnPriority; i--) { for (let i = column.priority; i > columnPriority; i--) {
const currentColumn = { const currentColumn = {
column_id: projectBoard.columns[i - 2].id, column_id: projectBoard.columns[i - 2].id,
priority: i priority: i,
} };
priorityColumns.push(currentColumn) priorityColumns.push(currentColumn);
} }
apiRequest("/project-column/set-priority", { apiRequest("/project-column/set-priority", {
method: "POST", method: "POST",
data: { data: {
project_id: projectBoard.id, project_id: projectBoard.id,
data: JSON.stringify(priorityColumns) data: JSON.stringify(priorityColumns),
} },
}).then(() => { }).then(() => {
dispatch(setProjectBoardFetch(projectBoard.id)); dispatch(setProjectBoardFetch(projectBoard.id));
}) });
} }
}) });
changeColumnTitle() changeColumnTitle();
} }
function changeColumnTitle() { function changeColumnTitle() {
@ -376,12 +379,12 @@ export const TrackerModal = ({
<h4>Приоритет колонки</h4> <h4>Приоритет колонки</h4>
<div className="input-container"> <div className="input-container">
<input <input
className="name-project" className="name-project"
placeholder='Приоритет колонки' placeholder="Приоритет колонки"
type='number' type="number"
step='1' step="1"
value={columnPriority} value={columnPriority}
onChange={(e) => dispatch(setColumnPriority(e.target.value))} onChange={(e) => dispatch(setColumnPriority(e.target.value))}
/> />
</div> </div>
</div> </div>

264
src/components/TrackerTaskComment/TrackerTaskComment.jsx
View File

@ -1,129 +1,161 @@
import React, { useState } from "react"; import React, { useState } from "react";
import TrackerTaskSubComment from "../TrackerTaskComment/TrackerTaskComment";
import { apiRequest } from "../../api/request"; 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 del from "../../assets/icons/delete.svg";
import edit from "../../assets/icons/edit.svg";
import accept from "../../assets/images/accept.png"; 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 = ({ export const TrackerTaskComment = ({
taskId, taskId,
comment, comment,
commentDelete, commentDelete,
addSubComment, addSubComment,
subCommentDelete subCommentDelete,
}) => { }) => {
const [commentsEditOpen, setCommentsEditOpen] = useState(false) const [commentsEditOpen, setCommentsEditOpen] = useState(false);
const [commentsEditText, setCommentsEditText] = useState(comment.text) const [commentsEditText, setCommentsEditText] = useState(comment.text);
const [subCommentsCreateOpen, setSubCommentsCreateOpen] = useState(false) const [subCommentsCreateOpen, setSubCommentsCreateOpen] = useState(false);
const [subCommentsCreateText, setSubCommentsCreateText] = useState('') const [subCommentsCreateText, setSubCommentsCreateText] = useState("");
function editComment() { function editComment() {
if (commentsEditText === comment.text) return if (commentsEditText === comment.text) return;
apiRequest("/comment/update", { apiRequest("/comment/update", {
method: "PUT", method: "PUT",
data: { data: {
comment_id: comment.id, comment_id: comment.id,
text: commentsEditText text: commentsEditText,
} },
}).then(() => { }).then(() => {});
}) }
}
function deleteComment() { function deleteComment() {
apiRequest("/comment/update", { apiRequest("/comment/update", {
method: "PUT", method: "PUT",
data: { data: {
comment_id: comment.id, comment_id: comment.id,
status: 0 status: 0,
} },
}).then(() => { }).then(() => {
if (comment.parent_id) { if (comment.parent_id) {
subCommentDelete(comment) subCommentDelete(comment);
} else { } else {
commentDelete(comment) commentDelete(comment);
} }
}) });
} }
function createSubComment() { function createSubComment() {
setSubCommentsCreateOpen(false) setSubCommentsCreateOpen(false);
if(!subCommentsCreateText) return if (!subCommentsCreateText) return;
apiRequest("/comment/create", { apiRequest("/comment/create", {
method: "POST", method: "POST",
data: { data: {
text: subCommentsCreateText, text: subCommentsCreateText,
entity_type: 2, entity_type: 2,
entity_id: taskId, entity_id: taskId,
parent_id: comment.id parent_id: comment.id,
} },
}).then((res) => { }).then((res) => {
let newSubComment = res let newSubComment = res;
newSubComment.created_at = new Date() newSubComment.created_at = new Date();
setSubCommentsCreateText('') setSubCommentsCreateText("");
addSubComment(comment.id, newSubComment) addSubComment(comment.id, newSubComment);
}) });
} }
return ( return (
<div className={[!comment.parent_id && comment.subComments.length ? 'comments__list__item__main': '', <div
'comments__list__item', className={[
comment.parent_id ? 'comments__list__item__subComment' : ''].join(' ')}> !comment.parent_id && comment.subComments.length
<div className='comments__list__item__info'> ? "comments__list__item__main"
<div className='comments__list__item__fio'> : "",
<img src={urlForLocal(comment.user.avatar)} alt='avatar' /> "comments__list__item",
<p>{comment.user.fio}</p> comment.parent_id ? "comments__list__item__subComment" : "",
</div> ].join(" ")}
<div className='comments__list__item__date'> >
<span>{getCorrectDate(comment.created_at)}</span> <div className="comments__list__item__info">
{comment.user_id === Number(localStorage.getItem('id')) && <div className="comments__list__item__fio">
<> <img src={urlForLocal(comment.user.avatar)} alt="avatar" />
<div className={commentsEditOpen ? 'edit edit__open' : 'edit'} > <p>{comment.user.fio}</p>
<img src={edit} alt='edit' onClick={() => {
if (commentsEditOpen) {
editComment()
}
setCommentsEditOpen(!commentsEditOpen)
}} />
</div>
<img src={del} alt='delete' onClick={() => deleteComment()} />
</>
}
</div>
</div>
{commentsEditOpen ?
<input className='comments__list__item__text' value={commentsEditText} onChange={(e) => {
setCommentsEditText(e.target.value)
}} /> :
<p className='comments__list__item__text'>{commentsEditText}</p>}
{!comment.parent_id &&
<>
{
subCommentsCreateOpen ?
<div className='comments__list__item__answer__new'>
<input value={subCommentsCreateText} onChange={(e) => {
setSubCommentsCreateText(e.target.value)
}}/>
<img src={accept} alt='accept'
onClick={() => {
createSubComment()
}}
/>
</div>
:
<span onClick={() => {
setSubCommentsCreateOpen(true)
}} className='comments__list__item__answer'>Ответить</span>
}
</>
}
{Boolean(comment.subComments?.length) && comment.subComments.map((subComment) => {
return <TrackerTaskSubComment key={subComment.id} taskId={taskId} comment={subComment} subCommentDelete={subCommentDelete}/>
})
}
</div> </div>
) <div className="comments__list__item__date">
} <span>{getCorrectDate(comment.created_at)}</span>
{comment.user_id === Number(localStorage.getItem("id")) && (
<>
<div className={commentsEditOpen ? "edit edit__open" : "edit"}>
<img
src={edit}
alt="edit"
onClick={() => {
if (commentsEditOpen) {
editComment();
}
setCommentsEditOpen(!commentsEditOpen);
}}
/>
</div>
<img src={del} alt="delete" onClick={() => deleteComment()} />
</>
)}
</div>
</div>
{commentsEditOpen ? (
<input
className="comments__list__item__text"
value={commentsEditText}
onChange={(e) => {
setCommentsEditText(e.target.value);
}}
/>
) : (
<p className="comments__list__item__text">{commentsEditText}</p>
)}
{!comment.parent_id && (
<>
{subCommentsCreateOpen ? (
<div className="comments__list__item__answer__new">
<input
value={subCommentsCreateText}
onChange={(e) => {
setSubCommentsCreateText(e.target.value);
}}
/>
<img
src={accept}
alt="accept"
onClick={() => {
createSubComment();
}}
/>
</div>
) : (
<span
onClick={() => {
setSubCommentsCreateOpen(true);
}}
className="comments__list__item__answer"
>
Ответить
</span>
)}
</>
)}
{Boolean(comment.subComments?.length) &&
comment.subComments.map((subComment) => {
return (
<TrackerTaskSubComment
key={subComment.id}
taskId={taskId}
comment={subComment}
subCommentDelete={subCommentDelete}
/>
);
})}
</div>
);
};
export default TrackerTaskComment export default TrackerTaskComment;

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

@ -1,29 +1,28 @@
import React, {useEffect, useState} from "react"; import React, { useEffect, useState } from "react";
import { useDispatch } from "react-redux";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { apiRequest } from "../../../api/request";
import archive from "../../../assets/icons/archive.svg";
import arrow from "../../../assets/icons/arrows/arrowStart.png";
import fullScreen from "../../../assets/icons/arrows/inFullScreen.svg";
import category from "../../../assets/icons/category.svg";
import close from "../../../assets/icons/closeProjectPersons.svg";
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 watch from "../../../assets/icons/watch.svg";
import TrackerModal from "../../../components/Modal/TrackerModal/TrackerModal"; import TrackerModal from "../../../components/Modal/TrackerModal/TrackerModal";
import TrackerTaskComment from "../../../components/TrackerTaskComment/TrackerTaskComment"; import TrackerTaskComment from "../../../components/TrackerTaskComment/TrackerTaskComment";
import { apiRequest } from "../../../api/request";
import { useDispatch } from "react-redux";
import "./modalTicket.scss"
import { import {
modalToggle, modalToggle,
setProjectBoardFetch, setProjectBoardFetch,
} from "../../../redux/projectsTrackerSlice"; } from "../../../redux/projectsTrackerSlice";
import { getCorrectRequestDate, urlForLocal } from "../../../utils/helper";
import category from "../../../assets/icons/category.svg"; import "./modalTicket.scss";
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 = ({ export const ModalTiсket = ({
active, active,
@ -31,26 +30,30 @@ export const ModalTiсket = ({
task, task,
projectId, projectId,
projectName, projectName,
projectUsers projectUsers,
}) => { }) => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const [addSubtask, setAddSubtask] = useState(false); const [addSubtask, setAddSubtask] = useState(false);
const [editOpen, setEditOpen] = useState(false); const [editOpen, setEditOpen] = useState(false);
const [inputsValue, setInputsValue] = useState({title: task.title, description: task.description, comment: ''}); const [inputsValue, setInputsValue] = useState({
title: task.title,
description: task.description,
comment: "",
});
const [comments, setComments] = useState([]); const [comments, setComments] = useState([]);
const [dropListOpen, setDropListOpen] = useState(false) const [dropListOpen, setDropListOpen] = useState(false);
const [dropListMembersOpen, setDropListMembersOpen] = useState(false) const [dropListMembersOpen, setDropListMembersOpen] = useState(false);
const [executor, setExecutor] = useState(task.executor) const [executor, setExecutor] = useState(task.executor);
const [members, setMembers] = useState(task.taskUsers) const [members, setMembers] = useState(task.taskUsers);
const [users, setUsers] = useState([]) const [users, setUsers] = useState([]);
const [timerStart, setTimerStart] = useState(false) const [timerStart, setTimerStart] = useState(false);
const [timerInfo, setTimerInfo] = useState({}) const [timerInfo, setTimerInfo] = useState({});
const [currentTimerCount, setCurrentTimerCount] = useState({ const [currentTimerCount, setCurrentTimerCount] = useState({
hours: 0, hours: 0,
minute: 0, minute: 0,
seconds: 0 seconds: 0,
}) });
const [timerId, setTimerId] = useState(null) const [timerId, setTimerId] = useState(null);
function deleteTask() { function deleteTask() {
apiRequest("/task/update-task", { apiRequest("/task/update-task", {
@ -59,7 +62,7 @@ export const ModalTiсket = ({
task_id: task.id, task_id: task.id,
status: 0, status: 0,
}, },
}).then((res) => { }).then(() => {
setActive(false); setActive(false);
dispatch(setProjectBoardFetch(projectId)); dispatch(setProjectBoardFetch(projectId));
}); });
@ -71,9 +74,9 @@ export const ModalTiсket = ({
data: { data: {
task_id: task.id, task_id: task.id,
title: inputsValue.title, title: inputsValue.title,
description: inputsValue.description description: inputsValue.description,
}, },
}).then((res) => { }).then(() => {
dispatch(setProjectBoardFetch(projectId)); dispatch(setProjectBoardFetch(projectId));
}); });
} }
@ -84,19 +87,21 @@ export const ModalTiсket = ({
data: { data: {
text: inputsValue.comment, text: inputsValue.comment,
entity_type: 2, entity_type: 2,
entity_id: task.id entity_id: task.id,
} },
}).then((res) => { }).then((res) => {
let newComment = res let newComment = res;
newComment.created_at = new Date() newComment.created_at = new Date();
newComment.subComments = [] newComment.subComments = [];
setInputsValue((prevValue) => ({...prevValue, comment: ''})) setInputsValue((prevValue) => ({ ...prevValue, comment: "" }));
setComments((prevValue) => ([...prevValue, newComment])) setComments((prevValue) => [...prevValue, newComment]);
}) });
} }
function commentDelete(comment) { 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) { if (comment.subComments.length) {
// promiseAll // promiseAll
comment.subComments.forEach((subComment) => { comment.subComments.forEach((subComment) => {
@ -104,32 +109,33 @@ export const ModalTiсket = ({
method: "PUT", method: "PUT",
data: { data: {
comment_id: subComment.id, comment_id: subComment.id,
status: 0 status: 0,
} },
}).then(() => { }).then(() => {});
}) });
})
} }
} }
function addSubComment(commentId, subComment) { function addSubComment(commentId, subComment) {
const addSubComment = comments const addSubComment = comments;
addSubComment.forEach((comment) => { addSubComment.forEach((comment) => {
if (comment.id === commentId) { if (comment.id === commentId) {
comment.subComments.push(subComment) comment.subComments.push(subComment);
} }
}) });
setComments(addSubComment) setComments(addSubComment);
} }
function subCommentDelete(subComment) { function subCommentDelete(subComment) {
const deleteSubComment = comments const deleteSubComment = comments;
deleteSubComment.forEach((comment, index) => { deleteSubComment.forEach((comment, index) => {
if (comment.id === subComment.parent_id) { 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]);
} }
function startTaskTimer() { function startTaskTimer() {
@ -138,13 +144,13 @@ export const ModalTiсket = ({
data: { data: {
entity_type: 2, entity_type: 2,
entity_id: task.id, entity_id: task.id,
created_at: getCorrectRequestDate(new Date()) created_at: getCorrectRequestDate(new Date()),
} },
}).then((res) => { }).then((res) => {
setTimerStart(true) setTimerStart(true);
setTimerInfo(res) setTimerInfo(res);
startTimer() startTimer();
}) });
} }
function stopTaskTimer() { function stopTaskTimer() {
@ -152,12 +158,12 @@ export const ModalTiсket = ({
method: "PUT", method: "PUT",
data: { data: {
timer_id: timerInfo.id, timer_id: timerInfo.id,
stopped_at: getCorrectRequestDate(new Date()) stopped_at: getCorrectRequestDate(new Date()),
} },
}).then(() => { }).then(() => {
setTimerStart(false) setTimerStart(false);
clearInterval(timerId) clearInterval(timerId);
}) });
} }
function taskExecutor(person) { function taskExecutor(person) {
@ -165,11 +171,11 @@ export const ModalTiсket = ({
method: "PUT", method: "PUT",
data: { data: {
task_id: task.id, task_id: task.id,
executor_id: person.user_id executor_id: person.user_id,
}, },
}).then((res) => { }).then((res) => {
setDropListOpen(false) setDropListOpen(false);
setExecutor(res.executor) setExecutor(res.executor);
}); });
} }
@ -178,10 +184,10 @@ export const ModalTiсket = ({
method: "PUT", method: "PUT",
data: { data: {
task_id: task.id, task_id: task.id,
executor_id: 0 executor_id: 0,
}, },
}).then(() => { }).then(() => {
setExecutor(null) setExecutor(null);
}); });
} }
@ -190,11 +196,11 @@ export const ModalTiсket = ({
method: "POST", method: "POST",
data: { data: {
task_id: task.id, task_id: task.id,
user_id: person.user_id user_id: person.user_id,
}, },
}).then((res) => { }).then((res) => {
setDropListMembersOpen(false) setDropListMembersOpen(false);
setMembers((prevValue) => ([...prevValue, res])) setMembers((prevValue) => [...prevValue, res]);
}); });
} }
@ -203,88 +209,97 @@ export const ModalTiсket = ({
method: "DELETE", method: "DELETE",
data: { data: {
task_id: task.id, task_id: task.id,
user_id: person.user_id user_id: person.user_id,
}, },
}).then(() => { }).then(() => {
setMembers(members.filter((item) => item.user_id !== person.user_id)) setMembers(members.filter((item) => item.user_id !== person.user_id));
}); });
} }
useEffect(() => { useEffect(() => {
apiRequest(`/comment/get-by-entity?entity_type=2&entity_id=${task.id}`).then((res) => { apiRequest(
`/comment/get-by-entity?entity_type=2&entity_id=${task.id}`
).then((res) => {
const comments = res.reduce((acc, cur) => { const comments = res.reduce((acc, cur) => {
if (!cur.parent_id) { if (!cur.parent_id) {
acc.push({...cur, subComments: []}) acc.push({ ...cur, subComments: [] });
} else { } else {
acc.forEach((item) => { 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 return acc;
}, []) }, []);
setComments(comments) setComments(comments);
}) });
apiRequest(`/timer/get-by-entity?entity_type=2&entity_id=${task.id}`).then((res) => { apiRequest(`/timer/get-by-entity?entity_type=2&entity_id=${task.id}`).then(
let timerSeconds = 0 (res) => {
res.length && res.forEach((time) => { let timerSeconds = 0;
timerSeconds += time.deltaSeconds res.length &&
setCurrentTimerCount({ res.forEach((time) => {
hours: Math.floor(timerSeconds / 60 / 60), timerSeconds += time.deltaSeconds;
minute: Math.floor(timerSeconds / 60 % 60), setCurrentTimerCount({
seconds: timerSeconds % 60} hours: Math.floor(timerSeconds / 60 / 60),
) minute: Math.floor((timerSeconds / 60) % 60),
updateTimerHours = Math.floor(timerSeconds / 60 / 60) seconds: timerSeconds % 60,
updateTimerMinute = Math.floor(timerSeconds / 60 % 60) });
updateTimerSec = timerSeconds % 60 updateTimerHours = Math.floor(timerSeconds / 60 / 60);
if (!time.stopped_at) { updateTimerMinute = Math.floor((timerSeconds / 60) % 60);
setTimerStart(true) updateTimerSec = timerSeconds % 60;
startTimer() if (!time.stopped_at) {
setTimerInfo(time) setTimerStart(true);
} startTimer();
}) setTimerInfo(time);
}) }
}, []) });
}
);
}, []);
function startTimer () { function startTimer() {
setTimerId(setInterval(() => { setTimerId(
run() setInterval(() => {
}, 1000)) run();
}, 1000)
);
} }
let updateTimerSec = currentTimerCount.seconds, updateTimerMinute = currentTimerCount.minute, updateTimerHours = currentTimerCount.hours let updateTimerSec = currentTimerCount.seconds,
updateTimerMinute = currentTimerCount.minute,
updateTimerHours = currentTimerCount.hours;
function run () { function run() {
updateTimerSec++ updateTimerSec++;
if (updateTimerSec > 60) { if (updateTimerSec > 60) {
updateTimerMinute++ updateTimerMinute++;
updateTimerSec = 0 updateTimerSec = 0;
} }
if (updateTimerMinute === 60) { if (updateTimerMinute === 60) {
updateTimerMinute = 0 updateTimerMinute = 0;
updateTimerHours++ updateTimerHours++;
} }
return setCurrentTimerCount({ return setCurrentTimerCount({
hours: updateTimerHours, hours: updateTimerHours,
minute: updateTimerMinute, minute: updateTimerMinute,
seconds: updateTimerSec seconds: updateTimerSec,
}) });
} }
function correctTimerTime (time) { function correctTimerTime(time) {
if (time < 10) return `0${time}` if (time < 10) return `0${time}`;
if (time > 10) return time if (time > 10) return time;
} }
useEffect(() => { useEffect(() => {
let ids = members.map((user) => user.user_id) let ids = members.map((user) => user.user_id);
setUsers(projectUsers.reduce((acc, cur) => { setUsers(
if (!ids.includes(cur.user_id)) acc.push(cur) projectUsers.reduce((acc, cur) => {
return acc if (!ids.includes(cur.user_id)) acc.push(cur);
}, [])) return acc;
}, [members]) }, [])
);
}, [members]);
return ( return (
<div <div
@ -309,13 +324,33 @@ export const ModalTiсket = ({
<div className="content__task"> <div className="content__task">
<span>Задача</span> <span>Задача</span>
{editOpen ? <input value={inputsValue.title} onChange={(e) => { {editOpen ? (
setInputsValue((prevValue) => ({...prevValue, title: e.target.value})) <input
}} /> :<h5>{inputsValue.title}</h5>} value={inputsValue.title}
onChange={(e) => {
setInputsValue((prevValue) => ({
...prevValue,
title: e.target.value,
}));
}}
/>
) : (
<h5>{inputsValue.title}</h5>
)}
<div className="content__description"> <div className="content__description">
{editOpen ? <input value={inputsValue.description} onChange={(e) => { {editOpen ? (
setInputsValue((prevValue) => ({...prevValue, description: e.target.value})) <input
}}/> :<p>{inputsValue.description}</p>} value={inputsValue.description}
onChange={(e) => {
setInputsValue((prevValue) => ({
...prevValue,
description: e.target.value,
}));
}}
/>
) : (
<p>{inputsValue.description}</p>
)}
{/*<img src={taskImg} className="image-task"></img>*/} {/*<img src={taskImg} className="image-task"></img>*/}
</div> </div>
<div className="content__communication"> <div className="content__communication">
@ -340,87 +375,127 @@ export const ModalTiсket = ({
</p> </p>
</div> </div>
<div className="content__input"> <div className="content__input">
<input placeholder="Оставить комментарий" value={inputsValue.comment} onChange={(e) => { <input
setInputsValue((prevValue) => ({...prevValue, comment: e.target.value})) placeholder="Оставить комментарий"
}} /> value={inputsValue.comment}
onChange={(e) => {
setInputsValue((prevValue) => ({
...prevValue,
comment: e.target.value,
}));
}}
/>
<img src={send} onClick={createComment}></img> <img src={send} onClick={createComment}></img>
</div> </div>
<div className='comments__list'> <div className="comments__list">
{comments.map((comment) => { {comments.map((comment) => {
return <TrackerTaskComment return (
<TrackerTaskComment
key={comment.id} key={comment.id}
taskId={task.id} taskId={task.id}
comment={comment} comment={comment}
commentDelete={commentDelete} commentDelete={commentDelete}
addSubComment={addSubComment} addSubComment={addSubComment}
subCommentDelete={subCommentDelete} subCommentDelete={subCommentDelete}
/> />
}) );
} })}
</div> </div>
</div> </div>
</div> </div>
<div className="workers"> <div className="workers">
<div className="workers_box task__info"> <div className="workers_box task__info">
<span className="exit" onClick={() => setActive(false)}></span> <span className="exit" onClick={() => setActive(false)}></span>
<span className='nameProject'>{task.title}</span> <span className="nameProject">{task.title}</span>
<p className="workers__creator">Создатель : {task.user?.fio}</p> <p className="workers__creator">Создатель : {task.user?.fio}</p>
{executor ? {executor ? (
<div className='executor'> <div className="executor">
<p>Исполнитель: {executor.fio}</p> <p>Исполнитель: {executor.fio}</p>
<img src={urlForLocal(executor.avatar)} alt='avatar' /> <img src={urlForLocal(executor.avatar)} alt="avatar" />
<img src={close} className='delete' onClick={() => deleteTaskExecutor()} /> <img
</div> : src={close}
className="delete"
onClick={() => deleteTaskExecutor()}
/>
</div>
) : (
<div className="add-worker moreItems "> <div className="add-worker moreItems ">
<button onClick={() => setDropListOpen(true)}>+</button> <button onClick={() => setDropListOpen(true)}>+</button>
<span>Добавить исполнителя</span> <span>Добавить исполнителя</span>
{dropListOpen && {dropListOpen && (
<div className='dropdownList'> <div className="dropdownList">
<img src={close} className='dropdownList__close' onClick={() => setDropListOpen(false)} /> <img
src={close}
className="dropdownList__close"
onClick={() => setDropListOpen(false)}
/>
{projectUsers.map((person) => { {projectUsers.map((person) => {
return <div className='dropdownList__person' key={person.user_id} onClick={() => taskExecutor(person)}> return (
<span>{person.user.fio}</span> <div
<img src={urlForLocal(person.user.avatar)} /> className="dropdownList__person"
</div> key={person.user_id}
}) onClick={() => taskExecutor(person)}
} >
<span>{person.user.fio}</span>
<img src={urlForLocal(person.user.avatar)} />
</div>
);
})}
</div> </div>
} )}
</div> </div>
} )}
{Boolean(members.length) && {Boolean(members.length) && (
<div className='members'> <div className="members">
<p>Участники:</p> <p>Участники:</p>
<div className='members__list'> <div className="members__list">
{members.map((member) => { {members.map((member) => {
return <div className='worker' key={member.user_id}> return (
<p>{member.fio}</p> <div className="worker" key={member.user_id}>
<img src={urlForLocal(member.avatar)} /> <p>{member.fio}</p>
<img src={close} className='delete' onClick={() => deleteMember(member)} /> <img src={urlForLocal(member.avatar)} />
</div> <img
}) src={close}
} className="delete"
onClick={() => deleteMember(member)}
/>
</div>
);
})}
</div> </div>
</div> </div>
} )}
<div className="add-worker moreItems"> <div className="add-worker moreItems">
<button onClick={() => setDropListMembersOpen(true)}>+</button> <button onClick={() => setDropListMembersOpen(true)}>+</button>
<span>Добавить участников</span> <span>Добавить участников</span>
{dropListMembersOpen && {dropListMembersOpen && (
<div className='dropdownList'> <div className="dropdownList">
<img src={close} className='dropdownList__close' onClick={() => setDropListMembersOpen(false)} /> <img
{users.length ? users.map((person) => { src={close}
return <div className='dropdownList__person' key={person.user_id} onClick={() => addMember(person)}> className="dropdownList__close"
<span>{person.user.fio}</span> onClick={() => setDropListMembersOpen(false)}
<img src={urlForLocal(person.user.avatar)} /> />
</div> {users.length ? (
}) : <p className='noUsers'>Нет пользователей</p> users.map((person) => {
} return (
</div> <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> </div>
@ -429,32 +504,44 @@ export const ModalTiсket = ({
<img src={watch}></img> <img src={watch}></img>
<span>Длительность : </span> <span>Длительность : </span>
<p> <p>
{correctTimerTime(currentTimerCount.hours)}:{correctTimerTime(currentTimerCount.minute)}:{correctTimerTime(currentTimerCount.seconds)} {correctTimerTime(currentTimerCount.hours)}:
{correctTimerTime(currentTimerCount.minute)}:
{correctTimerTime(currentTimerCount.seconds)}
</p> </p>
</div> </div>
{timerStart ? {timerStart ? (
<button className="stop" onClick={() => stopTaskTimer()}> <button className="stop" onClick={() => stopTaskTimer()}>
Остановить Остановить
</button> </button>
: ) : (
<button className={task.executor_id === Number(localStorage.getItem('id')) ? 'start' : 'start disable'} onClick={() => startTaskTimer()}> <button
className={
task.executor_id === Number(localStorage.getItem("id"))
? "start"
: "start disable"
}
onClick={() => startTaskTimer()}
>
Начать делать <img src={arrow}></img> Начать делать <img src={arrow}></img>
</button> </button>
} )}
</div> </div>
<div className="workers_box-bottom"> <div className="workers_box-bottom">
<div className={editOpen ? 'edit' : ''} onClick={() => { <div
if(editOpen) { className={editOpen ? "edit" : ""}
setEditOpen(!editOpen) onClick={() => {
editTask() if (editOpen) {
} else { setEditOpen(!editOpen);
setEditOpen(!editOpen) editTask();
} } else {
}}> setEditOpen(!editOpen);
}
}}
>
<img src={edit}></img> <img src={edit}></img>
<p>{editOpen ? 'сохранить' : 'редактировать'}</p> <p>{editOpen ? "сохранить" : "редактировать"}</p>
</div> </div>
<div> <div>
<img src={link}></img> <img src={link}></img>

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

@ -1,44 +1,42 @@
import React, { useEffect, useState } from "react"; 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 { Footer } from "@components/Common/Footer/Footer";
import { Link, useParams, useNavigate } from "react-router-dom"; import { Loader } from "@components/Common/Loader/Loader";
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 { apiRequest } from "../../../api/request";
import TrackerTaskComment from "../../../components/TrackerTaskComment/TrackerTaskComment";
import { getCorrectRequestDate, urlForLocal } from "../../../helper";
import archive2 from "../../../images/archive.svg";
import archive from "../../../images/archiveTracker.svg";
import arrow from "../../../images/arrowCalendar.png";
import arrow2 from "../../../images/arrowStart.png";
import close from "../../../images/closeProjectPersons.svg";
import del from "../../../images/delete.svg";
import edit from "../../../images/edit.svg";
import file from "../../../images/fileModal.svg";
import link from "../../../images/link.svg";
import plus from "../../../images/plus.svg";
import send from "../../../images/send.svg";
import project from "../../../images/trackerProject.svg";
import tasks from "../../../images/trackerTasks.svg";
import watch from "../../../images/watch.png";
import { import {
deletePersonOnProject, deletePersonOnProject,
getBoarderLoader,
getProjectBoard,
modalToggle, modalToggle,
setProjectBoardFetch, setProjectBoardFetch,
setToggleTab, setToggleTab,
getProjectBoard,
getBoarderLoader,
} from "../../../redux/projectsTrackerSlice"; } from "../../../redux/projectsTrackerSlice";
import { apiRequest } from "../../../api/request"; import TrackerModal from "../../Modal/TrackerModal/TrackerModal";
import { Navigation } from "../../Navigation/Navigation";
import project from "../../../images/trackerProject.svg"; import { ProfileBreadcrumbs } from "../../ProfileBreadcrumbs/ProfileBreadcrumbs";
import watch from "../../../images/watch.png"; import { ProfileHeader } from "../../ProfileHeader/ProfileHeader";
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 "./ticketFullScreen.scss";
import {getCorrectRequestDate, urlForLocal} from "../../../helper";
export const TicketFullScreen = ({}) => { export const TicketFullScreen = () => {
const [modalAddWorker, setModalAddWorker] = useState(false); const [modalAddWorker, setModalAddWorker] = useState(false);
const ticketId = useParams(); const ticketId = useParams();
const dispatch = useDispatch(); const dispatch = useDispatch();
@ -50,35 +48,41 @@ export const TicketFullScreen = ({}) => {
const [inputsValue, setInputsValue] = useState({}); const [inputsValue, setInputsValue] = useState({});
const [loader, setLoader] = useState(true); const [loader, setLoader] = useState(true);
const [comments, setComments] = useState([]); const [comments, setComments] = useState([]);
const [personListOpen, setPersonListOpen] = useState(false) const [personListOpen, setPersonListOpen] = useState(false);
const [timerStart, setTimerStart] = useState(false) const [timerStart, setTimerStart] = useState(false);
const [timerInfo, setTimerInfo] = useState({}) const [timerInfo, setTimerInfo] = useState({});
useEffect(() => { useEffect(() => {
apiRequest(`/task/get-task?task_id=${ticketId.id}`).then((taskInfo) => { apiRequest(`/task/get-task?task_id=${ticketId.id}`).then((taskInfo) => {
setTaskInfo(taskInfo); setTaskInfo(taskInfo);
setInputsValue({title: taskInfo.title, description: taskInfo.description, comment: ''}) setInputsValue({
apiRequest(`/comment/get-by-entity?entity_type=2&entity_id=${taskInfo.id}`).then((res) => { 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) => { const comments = res.reduce((acc, cur) => {
if (!cur.parent_id) { if (!cur.parent_id) {
acc.push({...cur, subComments: []}) acc.push({ ...cur, subComments: [] });
} else { } else {
acc.forEach((item) => { 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 return acc;
}, []) }, []);
setComments(comments) setComments(comments);
}) });
taskInfo.timers.forEach((time) => { taskInfo.timers.forEach((time) => {
if (!time.stopped_at) { if (!time.stopped_at) {
setTimerStart(true) setTimerStart(true);
setTimerInfo(time) setTimerInfo(time);
} }
}) });
dispatch(setProjectBoardFetch(taskInfo.project_id)); dispatch(setProjectBoardFetch(taskInfo.project_id));
setLoader(boardLoader) setLoader(boardLoader);
}); });
}, []); }, []);
@ -89,7 +93,7 @@ export const TicketFullScreen = ({}) => {
task_id: ticketId.id, task_id: ticketId.id,
status: 0, status: 0,
}, },
}).then((res) => { }).then(() => {
navigate(`/tracker/project/${taskInfo.project_id}`); navigate(`/tracker/project/${taskInfo.project_id}`);
}); });
} }
@ -100,10 +104,9 @@ export const TicketFullScreen = ({}) => {
data: { data: {
task_id: taskInfo.id, task_id: taskInfo.id,
title: inputsValue.title, title: inputsValue.title,
description: inputsValue.description description: inputsValue.description,
}, },
}).then(() => { }).then(() => {});
});
} }
function createComment() { function createComment() {
@ -112,15 +115,15 @@ export const TicketFullScreen = ({}) => {
data: { data: {
text: inputsValue.comment, text: inputsValue.comment,
entity_type: 2, entity_type: 2,
entity_id: taskInfo.id entity_id: taskInfo.id,
} },
}).then((res) => { }).then((res) => {
let newComment = res let newComment = res;
newComment.created_at = new Date() newComment.created_at = new Date();
newComment.subComments = [] newComment.subComments = [];
setInputsValue((prevValue) => ({...prevValue, comment: ''})) setInputsValue((prevValue) => ({ ...prevValue, comment: "" }));
setComments((prevValue) => ([...prevValue, newComment])) setComments((prevValue) => [...prevValue, newComment]);
}) });
} }
function startTaskTimer() { function startTaskTimer() {
@ -129,12 +132,12 @@ export const TicketFullScreen = ({}) => {
data: { data: {
entity_type: 2, entity_type: 2,
entity_id: taskInfo.id, entity_id: taskInfo.id,
created_at: getCorrectRequestDate(new Date()) created_at: getCorrectRequestDate(new Date()),
} },
}).then((res) => { }).then((res) => {
setTimerStart(true) setTimerStart(true);
setTimerInfo(res) setTimerInfo(res);
}) });
} }
function stopTaskTimer() { function stopTaskTimer() {
@ -142,9 +145,9 @@ export const TicketFullScreen = ({}) => {
method: "PUT", method: "PUT",
data: { data: {
timer_id: timerInfo.id, timer_id: timerInfo.id,
stopped_at: getCorrectRequestDate(new Date()) stopped_at: getCorrectRequestDate(new Date()),
} },
}).then(() => setTimerStart(false)) }).then(() => setTimerStart(false));
} }
function deletePerson(userId) { function deletePerson(userId) {
@ -152,47 +155,50 @@ export const TicketFullScreen = ({}) => {
method: "DELETE", method: "DELETE",
data: { data: {
project_id: projectBoard.id, project_id: projectBoard.id,
user_id: userId user_id: userId,
}, },
}).then((res) => { }).then(() => {
dispatch(deletePersonOnProject(userId)) dispatch(deletePersonOnProject(userId));
}); });
} }
function commentDelete(comment) { 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) { if (comment.subComments.length) {
comment.subComments.forEach((subComment) => { comment.subComments.forEach((subComment) => {
apiRequest("/comment/update", { apiRequest("/comment/update", {
method: "PUT", method: "PUT",
data: { data: {
comment_id: subComment.id, comment_id: subComment.id,
status: 0 status: 0,
} },
}).then(() => { }).then(() => {});
}) });
})
} }
} }
function addSubComment(commentId, subComment) { function addSubComment(commentId, subComment) {
const addSubComment = comments const addSubComment = comments;
addSubComment.forEach((comment) => { addSubComment.forEach((comment) => {
if (comment.id === commentId) { if (comment.id === commentId) {
comment.subComments.push(subComment) comment.subComments.push(subComment);
} }
}) });
setComments(addSubComment) setComments(addSubComment);
} }
function subCommentDelete(subComment) { function subCommentDelete(subComment) {
const deleteSubComment = comments const deleteSubComment = comments;
deleteSubComment.forEach((comment, index) => { deleteSubComment.forEach((comment, index) => {
if (comment.id === subComment.parent_id) { 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) => { const toggleTabs = (index) => {
@ -241,212 +247,278 @@ export const TicketFullScreen = ({}) => {
<p>Архив</p> <p>Архив</p>
</Link> </Link>
</div> </div>
{loader ? <Loader /> : {loader ? (
<> <Loader />
<div className="tracker__tabs__content content-tabs"> ) : (
<div className="tasks__head"> <>
<div className="tasks__head__wrapper"> <div className="tracker__tabs__content content-tabs">
<h4>Проект : {projectBoard.name}</h4> <div className="tasks__head">
<div className="tasks__head__wrapper">
<h4>Проект : {projectBoard.name}</h4>
<TrackerModal <TrackerModal
active={modalAddWorker} active={modalAddWorker}
setActive={setModalAddWorker} setActive={setModalAddWorker}
></TrackerModal> ></TrackerModal>
<div className="tasks__head__persons"> <div className="tasks__head__persons">
{/*<img src={avatarTest} alt="avatar" />*/} {/*<img src={avatarTest} alt="avatar" />*/}
{/*<img src={avatarTest} alt="avatar" />*/} {/*<img src={avatarTest} alt="avatar" />*/}
<span className="countPersons">{projectBoard.projectUsers?.length}</span> <span className="countPersons">
<span {projectBoard.projectUsers?.length}
className="addPerson" </span>
onClick={() => { <span
setPersonListOpen(true) className="addPerson"
}} onClick={() => {
> setPersonListOpen(true);
+ }}
</span> >
<p>добавить участника</p> +
{personListOpen && </span>
<div className='persons__list'> <p>добавить участника</p>
<img className='persons__list__close' src={close} alt='close' onClick={() => setPersonListOpen(false)} /> {personListOpen && (
<div className='persons__list__count'><span>{projectBoard.projectUsers?.length}</span>участник</div> <div className="persons__list">
<div className='persons__list__info'>В проекте - <span>“{projectBoard.name}”</span></div> <img
<div className='persons__list__items'> className="persons__list__close"
{projectBoard.projectUsers?.map((person) => { src={close}
return <div className='persons__list__item' key={person.user_id}> alt="close"
<img className='avatar' src={urlForLocal(person.user.avatar)} alt='avatar' /> onClick={() => setPersonListOpen(false)}
<span>{person.user.fio}</span> />
<img className='delete' src={close} alt='delete' onClick={() => deletePerson(person.user_id)}/> <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>
}) )}
}
</div> </div>
<div className='persons__list__add' <Link to={`/profile/tracker`} className="link">
onClick={() => { <div className="tasks__head__back">
dispatch(modalToggle("addWorker")); <p>Вернуться на проекты</p>
setModalAddWorker(true); <img src={arrow} alt="arrow" />
setPersonListOpen(false) </div>
}} </Link>
> </div>
<span className='addPerson'>+</span> </div>
<p>Добавить участников</p> </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>
}
</div> </div>
<Link to={`/profile/tracker`} className="link"> <div className="workers">
<div className="tasks__head__back"> <div className="workers_box">
<p>Вернуться на проекты</p> <p className="workers__creator">
<img src={arrow} alt="arrow" /> Создатель : <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>
</Link>
</div> <div className="workers_box-middle">
</div> <div className="time">
</div> <img src={watch}></img>
<div className="modal-tiket__content ticket"> <span>Длительность : </span>
<div className="content ticket-whith"> <p>{"0:00:00"}</p>
<div className="content__task"> </div>
<span>Задача</span>
{editOpen ? <input value={inputsValue.title} onChange={(e) => { {timerStart ? (
setInputsValue((prevValue) => ({...prevValue, title: e.target.value})) <button className="stop" onClick={() => stopTaskTimer()}>
}} /> :<h5>{inputsValue.title}</h5>} Остановить
<div className="content__description"> </button>
{editOpen ? <input value={inputsValue.description} onChange={(e) => { ) : (
setInputsValue((prevValue) => ({...prevValue, description: e.target.value})) <button
}}/> :<p>{inputsValue.description}</p>} className={
{/*<img src={task} className="image-task"></img>*/} taskInfo.executor_id ===
</div> Number(localStorage.getItem("id"))
<div className="content__communication"> ? "start"
<p className="tasks"> : "start disable"
<button }
onClick={() => startTaskTimer()}
>
Начать делать <img src={arrow2}></img>
</button>
)}
</div>
<div className="workers_box-bottom">
<div
className={editOpen ? "edit" : ""}
onClick={() => { onClick={() => {
dispatch(modalToggle("addSubtask")); if (editOpen) {
setModalAddWorker(true); setEditOpen(!editOpen);
editTask();
} else {
setEditOpen(!editOpen);
}
}} }}
> >
<img src={plus}></img> <img src={edit}></img>
Добавить под задачу <p>{editOpen ? "сохранить" : "редактировать"}</p>
</button> </div>
</p> <div>
<p className="file"> <img src={link}></img>
<button> <p>ссылка на проект</p>
<img src={file}></img> </div>
Загрузить файл <div>
</button> <img src={archive2}></img>
<span>{0}</span> <p>в архив</p>
Файлов </div>
</p> <div onClick={deleteTask}>
</div> <img src={del}></img>
<div className="content__input"> <p>удалить</p>
<input placeholder="Оставить комментарий" value={inputsValue.comment} onChange={(e) => { </div>
setInputsValue((prevValue) => ({...prevValue, comment: e.target.value})) </div>
}} />
<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>
</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> </div>
<Footer /> <Footer />
</section> </section>

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

@ -1,44 +1,43 @@
import React, { useEffect, useRef, useState } from "react"; 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 { useDispatch, useSelector } from "react-redux";
import { Link, useParams } from "react-router-dom";
import { Footer } from "@components/Common/Footer/Footer";
import { Loader } from "@components/Common/Loader/Loader";
import { apiRequest } from "../../api/request"; import { apiRequest } from "../../api/request";
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";
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 ModalTicket from "../../components/UI/ModalTicket/ModalTicket";
import { import {
getProjectBoard,
getBoarderLoader,
modalToggle,
moveProjectTask,
setProjectBoardFetch,
setToggleTab,
activeLoader, activeLoader,
setColumnName,
setColumnId,
setColumnPriority,
deletePersonOnProject, deletePersonOnProject,
filterCreatedByMe, filterCreatedByMe,
filteredParticipateTasks, filteredParticipateTasks,
movePositionProjectTask getBoarderLoader,
getProjectBoard,
modalToggle,
movePositionProjectTask,
moveProjectTask,
setColumnId,
setColumnName,
setColumnPriority,
setProjectBoardFetch,
setToggleTab,
} from "../../redux/projectsTrackerSlice"; } from "../../redux/projectsTrackerSlice";
import { urlForLocal } from "../../utils/helper";
import ModalTicket from "../../components/UI/ModalTicket/ModalTicket";
import TrackerModal from "../../components/Modal/TrackerModal/TrackerModal";
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";
export const ProjectTracker = () => { export const ProjectTracker = () => {
const dispatch = useDispatch(); const dispatch = useDispatch();
@ -48,13 +47,14 @@ export const ProjectTracker = () => {
const [selectedTab, setSelectedTab] = useState(0); const [selectedTab, setSelectedTab] = useState(0);
const [priorityTask, setPriorityTask] = useState(0); const [priorityTask, setPriorityTask] = useState(0);
const [wrapperHover, setWrapperHover] = useState({}); const [wrapperHover, setWrapperHover] = useState({});
const [taskHover, setTaskHover] = useState({}) const [taskHover, setTaskHover] = useState({});
const [modalAdd, setModalAdd] = useState(false); const [modalAdd, setModalAdd] = useState(false);
const [modalActiveTicket, setModalActiveTicket] = useState(false); const [modalActiveTicket, setModalActiveTicket] = useState(false);
const [selectedTicket, setSelectedTicket] = useState({}); const [selectedTicket, setSelectedTicket] = useState({});
const [personListOpen, setPersonListOpen] = useState(false) const [personListOpen, setPersonListOpen] = useState(false);
const [checkBoxParticipateTasks, setCheckBoxParticipateTasks] = useState(false) const [checkBoxParticipateTasks, setCheckBoxParticipateTasks] =
const [checkBoxMyTasks, setCheckBoxMyTasks] = useState(false) useState(false);
const [checkBoxMyTasks, setCheckBoxMyTasks] = useState(false);
const startWrapperIndexTest = useRef({}); const startWrapperIndexTest = useRef({});
const projectBoard = useSelector(getProjectBoard); const projectBoard = useSelector(getProjectBoard);
const loader = useSelector(getBoarderLoader); const loader = useSelector(getBoarderLoader);
@ -65,20 +65,20 @@ export const ProjectTracker = () => {
}, []); }, []);
useEffect(() => { useEffect(() => {
const tasksHover = {} const tasksHover = {};
const columnHover = {} const columnHover = {};
if (Object.keys(projectBoard).length) { if (Object.keys(projectBoard).length) {
projectBoard.columns.forEach((column) => { projectBoard.columns.forEach((column) => {
setOpenColumnSelect((prevState) => ({ setOpenColumnSelect((prevState) => ({
...prevState, ...prevState,
[column.id]: false, [column.id]: false,
})); }));
columnHover[column.id] = false columnHover[column.id] = false;
column.tasks.forEach(task => tasksHover[task.id] = false) column.tasks.forEach((task) => (tasksHover[task.id] = false));
}); });
} }
setWrapperHover(columnHover) setWrapperHover(columnHover);
setTaskHover(tasksHover) setTaskHover(tasksHover);
}, [projectBoard]); }, [projectBoard]);
function dragStartHandler(e, task, columnId) { function dragStartHandler(e, task, columnId) {
@ -86,35 +86,37 @@ export const ProjectTracker = () => {
} }
function dragOverTaskHandler(e, task) { function dragOverTaskHandler(e, task) {
e.preventDefault() e.preventDefault();
if (startWrapperIndexTest.current.task.id === task.id) { 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) { function dragLeaveTaskHandler() {
setTaskHover((prevState) => ({[prevState]: false})) setTaskHover((prevState) => ({ [prevState]: false }));
} }
function dragEndTaskHandler() { function dragEndTaskHandler() {
setTaskHover((prevState) => ({[prevState]: false})) setTaskHover((prevState) => ({ [prevState]: false }));
setWrapperHover((prevState) => ({ setWrapperHover((prevState) => ({
[prevState]: false, [prevState]: false,
})); }));
} }
function dragDropTaskHandler(e, task, column) { function dragDropTaskHandler(e, task, column) {
e.preventDefault() e.preventDefault();
if (task.id === startWrapperIndexTest.current.task.id) { if (task.id === startWrapperIndexTest.current.task.id) {
return return;
} }
const finishTask = column.tasks.indexOf(task) const finishTask = column.tasks.indexOf(task);
dispatch(movePositionProjectTask({ dispatch(
startTask: startWrapperIndexTest.current.task, movePositionProjectTask({
finishTask: task, startTask: startWrapperIndexTest.current.task,
finishIndex: finishTask finishTask: task,
})) finishIndex: finishTask,
})
);
} }
function dragOverHandler(e) { function dragOverHandler(e) {
@ -139,9 +141,10 @@ export const ProjectTracker = () => {
[prevState]: false, [prevState]: false,
})); }));
if (startWrapperIndexTest.current.index === columnId if (
|| startWrapperIndexTest.current.index === columnId ||
e.target.className.includes('__item')) { e.target.className.includes("__item")
) {
return; return;
} }
@ -159,7 +162,7 @@ export const ProjectTracker = () => {
setSelectedTab(columnId); setSelectedTab(columnId);
dispatch(modalToggle("createTiketProject")); dispatch(modalToggle("createTiketProject"));
setModalAdd(true); setModalAdd(true);
setPriorityTask(length) setPriorityTask(length);
} }
function openTicket(e, task) { function openTicket(e, task) {
@ -168,7 +171,7 @@ export const ProjectTracker = () => {
} }
function deleteColumn(column) { function deleteColumn(column) {
const priorityColumns = [] const priorityColumns = [];
apiRequest("/project-column/update-column", { apiRequest("/project-column/update-column", {
method: "PUT", method: "PUT",
data: { data: {
@ -181,19 +184,19 @@ export const ProjectTracker = () => {
for (let i = column.priority; i < projectBoard.columns.length; i++) { for (let i = column.priority; i < projectBoard.columns.length; i++) {
const currentColumn = { const currentColumn = {
column_id: projectBoard.columns[i].id, column_id: projectBoard.columns[i].id,
priority: i priority: i,
} };
priorityColumns.push(currentColumn) priorityColumns.push(currentColumn);
} }
apiRequest("/project-column/set-priority", { apiRequest("/project-column/set-priority", {
method: "POST", method: "POST",
data: { data: {
project_id: projectBoard.id, project_id: projectBoard.id,
data: JSON.stringify(priorityColumns) data: JSON.stringify(priorityColumns),
} },
}).then(() => { }).then(() => {
dispatch(setProjectBoardFetch(projectBoard.id)); dispatch(setProjectBoardFetch(projectBoard.id));
}) });
} else { } else {
dispatch(setProjectBoardFetch(projectBoard.id)); dispatch(setProjectBoardFetch(projectBoard.id));
} }
@ -205,33 +208,33 @@ export const ProjectTracker = () => {
method: "DELETE", method: "DELETE",
data: { data: {
project_id: projectBoard.id, project_id: projectBoard.id,
user_id: userId user_id: userId,
}, },
}).then(() => { }).then(() => {
dispatch(deletePersonOnProject(userId)) dispatch(deletePersonOnProject(userId));
}); });
} }
function filterParticipateTasks() { function filterParticipateTasks() {
if (!checkBoxParticipateTasks) { if (!checkBoxParticipateTasks) {
dispatch(filteredParticipateTasks(Number(localStorage.getItem('id')))) dispatch(filteredParticipateTasks(Number(localStorage.getItem("id"))));
} else { } else {
dispatch(setProjectBoardFetch(projectId.id)) dispatch(setProjectBoardFetch(projectId.id));
setCheckBoxParticipateTasks(false) setCheckBoxParticipateTasks(false);
setCheckBoxMyTasks(false) setCheckBoxMyTasks(false);
} }
setCheckBoxParticipateTasks(!checkBoxParticipateTasks) setCheckBoxParticipateTasks(!checkBoxParticipateTasks);
} }
function filterMyTask() { function filterMyTask() {
if (!checkBoxMyTasks) { if (!checkBoxMyTasks) {
dispatch(filterCreatedByMe(Number(localStorage.getItem('id')))) dispatch(filterCreatedByMe(Number(localStorage.getItem("id"))));
} else { } else {
dispatch(setProjectBoardFetch(projectId.id)) dispatch(setProjectBoardFetch(projectId.id));
setCheckBoxParticipateTasks(false) setCheckBoxParticipateTasks(false);
setCheckBoxMyTasks(false) setCheckBoxMyTasks(false);
} }
setCheckBoxMyTasks(!checkBoxMyTasks) setCheckBoxMyTasks(!checkBoxMyTasks);
} }
return ( return (
@ -303,58 +306,85 @@ export const ProjectTracker = () => {
<p>добавить колонку</p> <p>добавить колонку</p>
</div> </div>
<div className="tasks__head__persons"> <div className="tasks__head__persons">
<span className="countPersons">{projectBoard.projectUsers?.length}</span> <span className="countPersons">
{projectBoard.projectUsers?.length}
</span>
<span <span
className="addPerson" className="addPerson"
onClick={() => { onClick={() => {
setPersonListOpen(true) setPersonListOpen(true);
}} }}
> >
+ +
</span> </span>
<p>добавить участника</p> <p>добавить участника</p>
{personListOpen && {personListOpen && (
<div className='persons__list'> <div className="persons__list">
<img className='persons__list__close' src={close} alt='close' onClick={() => setPersonListOpen(false)} /> <img
<div className='persons__list__count'><span>{projectBoard.projectUsers?.length}</span>участник</div> className="persons__list__close"
<div className='persons__list__info'>В проекте - <span>“{projectBoard.name}”</span></div> src={close}
<div className='persons__list__items'> alt="close"
{projectBoard.projectUsers?.map((person) => { onClick={() => setPersonListOpen(false)}
return <div className='persons__list__item' key={person.user_id}> />
<img className='avatar' src={urlForLocal(person.user.avatar)} alt='avatar' /> <div className="persons__list__count">
<span>{person.user.fio}</span> <span>{projectBoard.projectUsers?.length}</span>
<img className='delete' src={close} alt='delete' onClick={() => deletePerson(person.user_id)}/> участник
</div> </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>
<div className='persons__list__add' )}
onClick={() => {
dispatch(modalToggle("addWorker"));
setModalAdd(true);
setPersonListOpen(false)
}}
>
<span className='addPerson'>+</span>
<p>Добавить участников</p>
</div>
</div>
}
</div> </div>
<div className="tasks__head__checkBox" onClick={filterParticipateTasks}> <div
className="tasks__head__checkBox"
onClick={filterParticipateTasks}
>
<span>Участвую</span> <span>Участвую</span>
<div className="tasks__head__checkBox__box"> <div className="tasks__head__checkBox__box">
{checkBoxParticipateTasks && {checkBoxParticipateTasks && (
<img src={accept} alt='accept' /> <img src={accept} alt="accept" />
} )}
</div> </div>
</div> </div>
<div className="tasks__head__checkBox" onClick={filterMyTask}> <div className="tasks__head__checkBox" onClick={filterMyTask}>
<span>Мои</span> <span>Мои</span>
<div className="tasks__head__checkBox__box"> <div className="tasks__head__checkBox__box">
{checkBoxMyTasks && {checkBoxMyTasks && <img src={accept} alt="accept" />}
<img src={accept} alt='accept' />
}
</div> </div>
</div> </div>
<Link to="/profile/tracker" className="tasks__head__back"> <Link to="/profile/tracker" className="tasks__head__back">
@ -364,14 +394,16 @@ export const ProjectTracker = () => {
</div> </div>
</div> </div>
{Boolean(modalActiveTicket) && <ModalTicket {Boolean(modalActiveTicket) && (
<ModalTicket
active={modalActiveTicket} active={modalActiveTicket}
setActive={setModalActiveTicket} setActive={setModalActiveTicket}
task={selectedTicket} task={selectedTicket}
projectId={projectBoard.id} projectId={projectBoard.id}
projectName={projectBoard.name} projectName={projectBoard.name}
projectUsers={projectBoard.projectUsers} projectUsers={projectBoard.projectUsers}
/>} />
)}
<div className="tasks__container"> <div className="tasks__container">
{Boolean(projectBoard?.columns) && {Boolean(projectBoard?.columns) &&
@ -381,7 +413,7 @@ export const ProjectTracker = () => {
<div <div
key={column.id} key={column.id}
onDragOver={(e) => dragOverHandler(e)} onDragOver={(e) => dragOverHandler(e)}
onDragEnter={(e) => dragEnterHandler(column.id)} onDragEnter={() => dragEnterHandler(column.id)}
onDrop={(e) => dragDropHandler(e, column.id)} onDrop={(e) => dragDropHandler(e, column.id)}
className={`tasks__board ${ className={`tasks__board ${
wrapperHover[column.id] ? "tasks__board__hover" : "" wrapperHover[column.id] ? "tasks__board__hover" : ""
@ -392,7 +424,9 @@ export const ProjectTracker = () => {
<div> <div>
<span <span
className="add" className="add"
onClick={() => selectedTabTask(column.id, column.tasks.length)} onClick={() =>
selectedTabTask(column.id, column.tasks.length)
}
> >
+ +
</span> </span>
@ -419,9 +453,9 @@ export const ProjectTracker = () => {
[column.id]: false, [column.id]: false,
})); }));
dispatch(modalToggle("editColumn")); dispatch(modalToggle("editColumn"));
dispatch(setColumnName(column.title)) dispatch(setColumnName(column.title));
dispatch(setColumnId(column.id)) dispatch(setColumnId(column.id));
dispatch(setColumnPriority(column.priority)) dispatch(setColumnPriority(column.priority));
setModalAdd(true); setModalAdd(true);
}} }}
> >
@ -442,18 +476,24 @@ export const ProjectTracker = () => {
<div <div
key={task.id} key={task.id}
className={`tasks__board__item ${ className={`tasks__board__item ${
taskHover[task.id] ? "task__hover" : "" taskHover[task.id] ? "task__hover" : ""
}`} }`}
draggable={true} draggable={true}
onDragStart={(e) => dragStartHandler(e, task, column.id)} onDragStart={(e) =>
dragStartHandler(e, task, column.id)
}
onDragOver={(e) => dragOverTaskHandler(e, task)} onDragOver={(e) => dragOverTaskHandler(e, task)}
onDragLeave={(e) => dragLeaveTaskHandler(e)} onDragLeave={(e) => dragLeaveTaskHandler(e)}
onDragEnd={(e) => dragEndTaskHandler()} onDragEnd={() => dragEndTaskHandler()}
onDrop={(e) => dragDropTaskHandler(e, task, column)} onDrop={(e) =>
dragDropTaskHandler(e, task, column)
}
onClick={(e) => openTicket(e, task)} onClick={(e) => openTicket(e, task)}
> >
<div className="tasks__board__item__title"> <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> </div>
<p className="tasks__board__item__description"> <p className="tasks__board__item__description">
{task.description} {task.description}

48
src/redux/projectsTrackerSlice.js
View File

@ -10,7 +10,7 @@ const initialState = {
boardLoader: false, boardLoader: false,
columnName: "", columnName: "",
columnId: 0, columnId: 0,
columnPriority: 0 columnPriority: 0,
}; };
export const setProjectBoardFetch = createAsyncThunk("userInfo", (id) => export const setProjectBoardFetch = createAsyncThunk("userInfo", (id) =>
@ -51,13 +51,16 @@ export const projectsTrackerSlice = createSlice({
moveProjectTask: (state, action) => { moveProjectTask: (state, action) => {
state.projectBoard.columns.forEach((column, index) => { state.projectBoard.columns.forEach((column, index) => {
if (column.id === action.payload.columnId) { 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`, { apiRequest(`/task/update-task`, {
method: "PUT", method: "PUT",
data: { data: {
task_id: action.payload.startWrapperIndex.task.id, task_id: action.payload.startWrapperIndex.task.id,
column_id: column.id, column_id: column.id,
priority: column.tasks.length - 1 priority: column.tasks.length - 1,
}, },
}).then(() => {}); }).then(() => {});
} }
@ -71,10 +74,15 @@ export const projectsTrackerSlice = createSlice({
movePositionProjectTask: (state, action) => { movePositionProjectTask: (state, action) => {
state.projectBoard.columns.forEach((column, index) => { state.projectBoard.columns.forEach((column, index) => {
if (column.id === action.payload.startTask.column_id) { 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) { 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`, { apiRequest(`/task/update-task`, {
method: "PUT", method: "PUT",
data: { data: {
@ -82,14 +90,14 @@ export const projectsTrackerSlice = createSlice({
column_id: column.id, column_id: column.id,
}, },
}).then(() => {}); }).then(() => {});
const priorityTasks = [] const priorityTasks = [];
column.tasks.forEach((task, index) => { column.tasks.forEach((task, index) => {
const curTask = { const curTask = {
task_id: task.id, task_id: task.id,
priority: index priority: index,
} };
priorityTasks.push(curTask) priorityTasks.push(curTask);
}) });
apiRequest(`/task/set-priority`, { apiRequest(`/task/set-priority`, {
method: "POST", method: "POST",
data: { data: {
@ -98,17 +106,21 @@ export const projectsTrackerSlice = createSlice({
}, },
}).then(() => {}); }).then(() => {});
} }
}) });
}, },
filterCreatedByMe: (state, action) => { filterCreatedByMe: (state, action) => {
state.projectBoard.columns.forEach((column) => { 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) => { filteredParticipateTasks: (state, action) => {
state.projectBoard.columns.forEach((column) => { 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) => { setColumnName: (state, action) => {
state.columnName = action.payload; state.columnName = action.payload;
@ -117,7 +129,7 @@ export const projectsTrackerSlice = createSlice({
state.columnId = action.payload; state.columnId = action.payload;
}, },
setColumnPriority: (state, action) => { setColumnPriority: (state, action) => {
state.columnPriority = action.payload state.columnPriority = action.payload;
}, },
editProjectName: (state, action) => { editProjectName: (state, action) => {
state.projects.forEach((project) => { state.projects.forEach((project) => {
@ -162,7 +174,7 @@ export const {
addPersonToProject, addPersonToProject,
filterCreatedByMe, filterCreatedByMe,
filteredParticipateTasks, filteredParticipateTasks,
movePositionProjectTask movePositionProjectTask,
} = projectsTrackerSlice.actions; } = projectsTrackerSlice.actions;
export const getProjects = (state) => state.tracker.projects; 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 getBoarderLoader = (state) => state.tracker.boardLoader;
export const getColumnName = (state) => state.tracker.columnName; export const getColumnName = (state) => state.tracker.columnName;
export const getColumnId = (state) => state.tracker.columnId; 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; export default projectsTrackerSlice.reducer;

11
src/utils/helper.js
View File

@ -53,12 +53,11 @@ export function scrollToForm() {
} }
export function getCorrectRequestDate(date) { export function getCorrectRequestDate(date) {
const yyyy = String(date.getUTCFullYear()) const yyyy = String(date.getUTCFullYear());
const mm = String(date.getUTCMonth() + 1).padStart(2, "0"); const mm = String(date.getUTCMonth() + 1).padStart(2, "0");
const dd = String(date.getUTCDate()).padStart(2, "0"); const dd = String(date.getUTCDate()).padStart(2, "0");
const hh = String(date.getUTCHours()) const hh = String(date.getUTCHours());
const min = String(date.getUTCMinutes()) const min = String(date.getUTCMinutes());
const sec = String(date.getUTCSeconds()) const sec = String(date.getUTCSeconds());
return `${yyyy}-${mm}-${dd} ${hh}:${min}:${sec}` return `${yyyy}-${mm}-${dd} ${hh}:${min}:${sec}`;
} }