Fixed eslint
This commit is contained in:
MaxOvs19
parent
07740c3369
commit
66ec2daea1
629
package-lock.json
generated
629
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
10
package.json
10
package.json
@ -7,8 +7,6 @@
|
||||
"@testing-library/jest-dom": "^5.12.0",
|
||||
"@testing-library/react": "^11.2.7",
|
||||
"@testing-library/user-event": "^12.8.3",
|
||||
"@typescript-eslint/eslint-plugin": "^4.5.0",
|
||||
"@typescript-eslint/parser": "^4.5.0",
|
||||
"axios": "^0.24.0",
|
||||
"babel": "^6.23.0",
|
||||
"bfj": "^7.0.2",
|
||||
@ -50,14 +48,17 @@
|
||||
"@babel/preset-env": "^7.20.2",
|
||||
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
|
||||
"@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",
|
||||
"copy-webpack-plugin": "^10.2.0",
|
||||
"cross-env": "^7.0.3",
|
||||
"css-loader": "6.7.3",
|
||||
"dotenv-webpack": "^7.0.3",
|
||||
"eslint": "^8.41.0",
|
||||
"eslint": "^8.43.0",
|
||||
"eslint-plugin-react": "^7.32.2",
|
||||
"html-webpack-plugin": "5.5.0",
|
||||
"husky": "^8.0.0",
|
||||
"mini-css-extract-plugin": "^2.7.2",
|
||||
"node-sass": "8.0.0",
|
||||
"postcss": "^8.4.21",
|
||||
@ -74,8 +75,7 @@
|
||||
"webpack-bundle-analyzer": "4.7.0",
|
||||
"webpack-cli": "^5.0.1",
|
||||
"webpack-dev-server": "4.11.1",
|
||||
"webpack-merge": "5.8.0",
|
||||
"husky": "^8.0.0"
|
||||
"webpack-merge": "5.8.0"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "cross-env SERVE=true webpack -c config/webpack/prod.js",
|
||||
|
||||
@ -1,13 +1,10 @@
|
||||
import React from "react";
|
||||
|
||||
import "./basebutton.scss"
|
||||
import "./basebutton.scss";
|
||||
|
||||
export const BaseButton = ({ children, styles, ...props }) => {
|
||||
return (
|
||||
<button
|
||||
className={styles ? `${styles} button` : "button"}
|
||||
{...props}
|
||||
>
|
||||
<button className={styles ? `${styles} button` : "button"} {...props}>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
|
||||
@ -1,45 +1,42 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { Link, useNavigate, useParams } from "react-router-dom";
|
||||
|
||||
import { ProfileHeader } from "../../../ProfileHeader/ProfileHeader";
|
||||
import { ProfileBreadcrumbs } from "../../../ProfileBreadcrumbs/ProfileBreadcrumbs";
|
||||
import { Footer } from "@components/Common/Footer/Footer";
|
||||
import { Link, useParams, useNavigate } from "react-router-dom";
|
||||
import TrackerModal from "../../../Modal/TrackerModal/TrackerModal";
|
||||
import TrackerTaskComment from "../../../TrackerTaskComment/TrackerTaskComment";
|
||||
import { Navigation } from "../../../Navigation/Navigation";
|
||||
import {Loader} from "@components/Common/Loader/Loader";
|
||||
import { 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 {
|
||||
deletePersonOnProject,
|
||||
getBoarderLoader,
|
||||
getProjectBoard,
|
||||
modalToggle,
|
||||
setProjectBoardFetch,
|
||||
setToggleTab,
|
||||
getProjectBoard,
|
||||
getBoarderLoader,
|
||||
} from "../../../../redux/projectsTrackerSlice";
|
||||
import { apiRequest } from "../../../../api/request";
|
||||
|
||||
import project from "../../../../assets/icons/trackerProject.svg";
|
||||
import watch from "../../../../assets/icons/watch.svg";
|
||||
import file from "../../../../assets/icons/fileModal.svg";
|
||||
import send from "../../../../assets/icons/send.svg";
|
||||
import arrow2 from "../../../../assets/icons/arrows/arrowStart.png";
|
||||
import plus from "../../../../assets/icons/plus.svg";
|
||||
import tasks from "../../../../assets/icons/trackerTasks.svg";
|
||||
import archive from "../../../../assets/icons/archive.svg";
|
||||
import arrow from "../../../../assets/icons/arrows/arrowCalendar.png";
|
||||
import link from "../../../../assets/icons/link.svg";
|
||||
import archive2 from "../../../../assets/icons/archive.svg";
|
||||
import del from "../../../../assets/icons/delete.svg";
|
||||
import edit from "../../../../assets/icons/edit.svg";
|
||||
import close from "../../../../assets/icons/close.png";
|
||||
|
||||
import { getCorrectRequestDate, urlForLocal } from "../../../../utils/helper";
|
||||
import TrackerModal from "../../../Modal/TrackerModal/TrackerModal";
|
||||
import { Navigation } from "../../../Navigation/Navigation";
|
||||
import { ProfileBreadcrumbs } from "../../../ProfileBreadcrumbs/ProfileBreadcrumbs";
|
||||
import { ProfileHeader } from "../../../ProfileHeader/ProfileHeader";
|
||||
import TrackerTaskComment from "../../../TrackerTaskComment/TrackerTaskComment";
|
||||
import "./ticketFullScreen.scss";
|
||||
|
||||
import {getCorrectRequestDate, urlForLocal} from "../../../../utils/helper";
|
||||
|
||||
export const TicketFullScreen = ({}) => {
|
||||
export const TicketFullScreen = () => {
|
||||
const [modalAddWorker, setModalAddWorker] = useState(false);
|
||||
const ticketId = useParams();
|
||||
const dispatch = useDispatch();
|
||||
@ -51,35 +48,41 @@ export const TicketFullScreen = ({}) => {
|
||||
const [inputsValue, setInputsValue] = useState({});
|
||||
const [loader, setLoader] = useState(true);
|
||||
const [comments, setComments] = useState([]);
|
||||
const [personListOpen, setPersonListOpen] = useState(false)
|
||||
const [timerStart, setTimerStart] = useState(false)
|
||||
const [timerInfo, setTimerInfo] = useState({})
|
||||
const [personListOpen, setPersonListOpen] = useState(false);
|
||||
const [timerStart, setTimerStart] = useState(false);
|
||||
const [timerInfo, setTimerInfo] = useState({});
|
||||
|
||||
useEffect(() => {
|
||||
apiRequest(`/task/get-task?task_id=${ticketId.id}`).then((taskInfo) => {
|
||||
setTaskInfo(taskInfo);
|
||||
setInputsValue({title: taskInfo.title, description: taskInfo.description, comment: ''})
|
||||
apiRequest(`/comment/get-by-entity?entity_type=2&entity_id=${taskInfo.id}`).then((res) => {
|
||||
setInputsValue({
|
||||
title: taskInfo.title,
|
||||
description: taskInfo.description,
|
||||
comment: "",
|
||||
});
|
||||
apiRequest(
|
||||
`/comment/get-by-entity?entity_type=2&entity_id=${taskInfo.id}`
|
||||
).then((res) => {
|
||||
const comments = res.reduce((acc, cur) => {
|
||||
if (!cur.parent_id) {
|
||||
acc.push({...cur, subComments: []})
|
||||
acc.push({ ...cur, subComments: [] });
|
||||
} else {
|
||||
acc.forEach((item) => {
|
||||
if (item.id === cur.parent_id) item.subComments.push(cur)
|
||||
})
|
||||
if (item.id === cur.parent_id) item.subComments.push(cur);
|
||||
});
|
||||
}
|
||||
return acc
|
||||
}, [])
|
||||
setComments(comments)
|
||||
})
|
||||
return acc;
|
||||
}, []);
|
||||
setComments(comments);
|
||||
});
|
||||
taskInfo.timers.forEach((time) => {
|
||||
if (!time.stopped_at) {
|
||||
setTimerStart(true)
|
||||
setTimerInfo(time)
|
||||
setTimerStart(true);
|
||||
setTimerInfo(time);
|
||||
}
|
||||
})
|
||||
});
|
||||
dispatch(setProjectBoardFetch(taskInfo.project_id));
|
||||
setLoader(boardLoader)
|
||||
setLoader(boardLoader);
|
||||
});
|
||||
}, []);
|
||||
|
||||
@ -101,10 +104,9 @@ export const TicketFullScreen = ({}) => {
|
||||
data: {
|
||||
task_id: taskInfo.id,
|
||||
title: inputsValue.title,
|
||||
description: inputsValue.description
|
||||
description: inputsValue.description,
|
||||
},
|
||||
}).then(() => {
|
||||
});
|
||||
}).then(() => {});
|
||||
}
|
||||
|
||||
function createComment() {
|
||||
@ -113,15 +115,15 @@ export const TicketFullScreen = ({}) => {
|
||||
data: {
|
||||
text: inputsValue.comment,
|
||||
entity_type: 2,
|
||||
entity_id: taskInfo.id
|
||||
}
|
||||
entity_id: taskInfo.id,
|
||||
},
|
||||
}).then((res) => {
|
||||
let newComment = res
|
||||
newComment.created_at = new Date()
|
||||
newComment.subComments = []
|
||||
setInputsValue((prevValue) => ({...prevValue, comment: ''}))
|
||||
setComments((prevValue) => ([...prevValue, newComment]))
|
||||
})
|
||||
let newComment = res;
|
||||
newComment.created_at = new Date();
|
||||
newComment.subComments = [];
|
||||
setInputsValue((prevValue) => ({ ...prevValue, comment: "" }));
|
||||
setComments((prevValue) => [...prevValue, newComment]);
|
||||
});
|
||||
}
|
||||
|
||||
function startTaskTimer() {
|
||||
@ -130,12 +132,12 @@ export const TicketFullScreen = ({}) => {
|
||||
data: {
|
||||
entity_type: 2,
|
||||
entity_id: taskInfo.id,
|
||||
created_at: getCorrectRequestDate(new Date())
|
||||
}
|
||||
created_at: getCorrectRequestDate(new Date()),
|
||||
},
|
||||
}).then((res) => {
|
||||
setTimerStart(true)
|
||||
setTimerInfo(res)
|
||||
})
|
||||
setTimerStart(true);
|
||||
setTimerInfo(res);
|
||||
});
|
||||
}
|
||||
|
||||
function stopTaskTimer() {
|
||||
@ -143,9 +145,9 @@ export const TicketFullScreen = ({}) => {
|
||||
method: "PUT",
|
||||
data: {
|
||||
timer_id: timerInfo.id,
|
||||
stopped_at: getCorrectRequestDate(new Date())
|
||||
}
|
||||
}).then(() => setTimerStart(false))
|
||||
stopped_at: getCorrectRequestDate(new Date()),
|
||||
},
|
||||
}).then(() => setTimerStart(false));
|
||||
}
|
||||
|
||||
function deletePerson(userId) {
|
||||
@ -153,47 +155,50 @@ export const TicketFullScreen = ({}) => {
|
||||
method: "DELETE",
|
||||
data: {
|
||||
project_id: projectBoard.id,
|
||||
user_id: userId
|
||||
user_id: userId,
|
||||
},
|
||||
}).then(() => {
|
||||
dispatch(deletePersonOnProject(userId))
|
||||
dispatch(deletePersonOnProject(userId));
|
||||
});
|
||||
}
|
||||
|
||||
function commentDelete(comment) {
|
||||
setComments((prevValue) => prevValue.filter((item) => item.id !== comment.id))
|
||||
setComments((prevValue) =>
|
||||
prevValue.filter((item) => item.id !== comment.id)
|
||||
);
|
||||
if (comment.subComments.length) {
|
||||
comment.subComments.forEach((subComment) => {
|
||||
apiRequest("/comment/update", {
|
||||
method: "PUT",
|
||||
data: {
|
||||
comment_id: subComment.id,
|
||||
status: 0
|
||||
}
|
||||
}).then(() => {
|
||||
})
|
||||
})
|
||||
status: 0,
|
||||
},
|
||||
}).then(() => {});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function addSubComment(commentId, subComment) {
|
||||
const addSubComment = comments
|
||||
const addSubComment = comments;
|
||||
addSubComment.forEach((comment) => {
|
||||
if (comment.id === commentId) {
|
||||
comment.subComments.push(subComment)
|
||||
comment.subComments.push(subComment);
|
||||
}
|
||||
})
|
||||
setComments(addSubComment)
|
||||
});
|
||||
setComments(addSubComment);
|
||||
}
|
||||
|
||||
function subCommentDelete(subComment) {
|
||||
const deleteSubComment = comments
|
||||
const deleteSubComment = comments;
|
||||
deleteSubComment.forEach((comment, index) => {
|
||||
if (comment.id === subComment.parent_id) {
|
||||
deleteSubComment[index].subComments = comment.subComments.filter((item) => item.id !== subComment.id)
|
||||
deleteSubComment[index].subComments = comment.subComments.filter(
|
||||
(item) => item.id !== subComment.id
|
||||
);
|
||||
}
|
||||
})
|
||||
setComments([...deleteSubComment])
|
||||
});
|
||||
setComments([...deleteSubComment]);
|
||||
}
|
||||
|
||||
const toggleTabs = (index) => {
|
||||
@ -242,7 +247,9 @@ export const TicketFullScreen = ({}) => {
|
||||
<p>Архив</p>
|
||||
</Link>
|
||||
</div>
|
||||
{loader ? <Loader /> :
|
||||
{loader ? (
|
||||
<Loader />
|
||||
) : (
|
||||
<>
|
||||
<div className="tracker__tabs__content content-tabs">
|
||||
<div className="tasks__head">
|
||||
@ -257,43 +264,69 @@ export const TicketFullScreen = ({}) => {
|
||||
<div className="tasks__head__persons">
|
||||
{/*<img src={avatarTest} alt="avatar" />*/}
|
||||
{/*<img src={avatarTest} alt="avatar" />*/}
|
||||
<span className="countPersons">{projectBoard.projectUsers?.length}</span>
|
||||
<span className="countPersons">
|
||||
{projectBoard.projectUsers?.length}
|
||||
</span>
|
||||
<span
|
||||
className="addPerson"
|
||||
onClick={() => {
|
||||
setPersonListOpen(true)
|
||||
setPersonListOpen(true);
|
||||
}}
|
||||
>
|
||||
+
|
||||
</span>
|
||||
<p>добавить участника</p>
|
||||
{personListOpen &&
|
||||
<div className='persons__list'>
|
||||
<img className='persons__list__close' src={close} alt='close' onClick={() => setPersonListOpen(false)} />
|
||||
<div className='persons__list__count'><span>{projectBoard.projectUsers?.length}</span>участник</div>
|
||||
<div className='persons__list__info'>В проекте - <span>“{projectBoard.name}”</span></div>
|
||||
<div className='persons__list__items'>
|
||||
{personListOpen && (
|
||||
<div className="persons__list">
|
||||
<img
|
||||
className="persons__list__close"
|
||||
src={close}
|
||||
alt="close"
|
||||
onClick={() => setPersonListOpen(false)}
|
||||
/>
|
||||
<div className="persons__list__count">
|
||||
<span>{projectBoard.projectUsers?.length}</span>
|
||||
участник
|
||||
</div>
|
||||
<div className="persons__list__info">
|
||||
В проекте - <span>“{projectBoard.name}”</span>
|
||||
</div>
|
||||
<div className="persons__list__items">
|
||||
{projectBoard.projectUsers?.map((person) => {
|
||||
return <div className='persons__list__item' key={person.user_id}>
|
||||
<img className='avatar' src={urlForLocal(person.user.avatar)} alt='avatar' />
|
||||
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)}/>
|
||||
<img
|
||||
className="delete"
|
||||
src={close}
|
||||
alt="delete"
|
||||
onClick={() => deletePerson(person.user_id)}
|
||||
/>
|
||||
</div>
|
||||
})
|
||||
}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className='persons__list__add'
|
||||
<div
|
||||
className="persons__list__add"
|
||||
onClick={() => {
|
||||
dispatch(modalToggle("addWorker"));
|
||||
setModalAddWorker(true);
|
||||
setPersonListOpen(false)
|
||||
setPersonListOpen(false);
|
||||
}}
|
||||
>
|
||||
<span className='addPerson'>+</span>
|
||||
<span className="addPerson">+</span>
|
||||
<p>Добавить участников</p>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
<Link to={`/profile/tracker`} className="link">
|
||||
<div className="tasks__head__back">
|
||||
@ -308,13 +341,33 @@ export const TicketFullScreen = ({}) => {
|
||||
<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>}
|
||||
{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>}
|
||||
{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">
|
||||
@ -325,13 +378,13 @@ export const TicketFullScreen = ({}) => {
|
||||
setModalAddWorker(true);
|
||||
}}
|
||||
>
|
||||
<img src={plus} alt='plus'></img>
|
||||
<img src={plus} alt="plus"></img>
|
||||
Добавить под задачу
|
||||
</button>
|
||||
</p>
|
||||
<p className="file">
|
||||
<button>
|
||||
<img src={file} alt='file'></img>
|
||||
<img src={file} alt="file"></img>
|
||||
Загрузить файл
|
||||
</button>
|
||||
<span>{0}</span>
|
||||
@ -339,14 +392,22 @@ export const TicketFullScreen = ({}) => {
|
||||
</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>
|
||||
<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'>
|
||||
<div className="comments__list">
|
||||
{comments.map((comment) => {
|
||||
return <TrackerTaskComment
|
||||
return (
|
||||
<TrackerTaskComment
|
||||
key={comment.id}
|
||||
taskId={taskInfo.id}
|
||||
comment={comment}
|
||||
@ -354,9 +415,8 @@ export const TicketFullScreen = ({}) => {
|
||||
addSubComment={addSubComment}
|
||||
subCommentDelete={subCommentDelete}
|
||||
/>
|
||||
})
|
||||
|
||||
}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -370,7 +430,7 @@ export const TicketFullScreen = ({}) => {
|
||||
taskInfo.taskUsers.map((worker, index) => {
|
||||
return (
|
||||
<div className="worker" key={index}>
|
||||
<img src={worker.avatar} alt='worket'></img>
|
||||
<img src={worker.avatar} alt="worket"></img>
|
||||
<p>{worker.name}</p>
|
||||
</div>
|
||||
);
|
||||
@ -403,51 +463,62 @@ export const TicketFullScreen = ({}) => {
|
||||
|
||||
<div className="workers_box-middle">
|
||||
<div className="time">
|
||||
<img src={watch} alt='watch'></img>
|
||||
<img src={watch} alt="watch"></img>
|
||||
<span>Длительность : </span>
|
||||
<p>{"0:00:00"}</p>
|
||||
</div>
|
||||
|
||||
{timerStart ?
|
||||
{timerStart ? (
|
||||
<button className="stop" onClick={() => stopTaskTimer()}>
|
||||
Остановить
|
||||
</button>
|
||||
:
|
||||
<button className={taskInfo.executor_id === Number(localStorage.getItem('id')) ? 'start' : 'start disable'} onClick={() => startTaskTimer()}>
|
||||
Начать делать <img src={arrow2} alt='arrow'></img>
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
className={
|
||||
taskInfo.executor_id ===
|
||||
Number(localStorage.getItem("id"))
|
||||
? "start"
|
||||
: "start disable"
|
||||
}
|
||||
onClick={() => startTaskTimer()}
|
||||
>
|
||||
Начать делать <img src={arrow2} alt="arrow"></img>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="workers_box-bottom">
|
||||
<div className={editOpen ? 'edit' : ''} onClick={() => {
|
||||
if(editOpen) {
|
||||
setEditOpen(!editOpen)
|
||||
editTask()
|
||||
<div
|
||||
className={editOpen ? "edit" : ""}
|
||||
onClick={() => {
|
||||
if (editOpen) {
|
||||
setEditOpen(!editOpen);
|
||||
editTask();
|
||||
} else {
|
||||
setEditOpen(!editOpen)
|
||||
setEditOpen(!editOpen);
|
||||
}
|
||||
}}>
|
||||
<img src={edit} alt='edit'></img>
|
||||
<p>{editOpen ? 'сохранить' : 'редактировать'}</p>
|
||||
}}
|
||||
>
|
||||
<img src={edit} alt="edit"></img>
|
||||
<p>{editOpen ? "сохранить" : "редактировать"}</p>
|
||||
</div>
|
||||
<div>
|
||||
<img src={link} alt='link'></img>
|
||||
<img src={link} alt="link"></img>
|
||||
<p>ссылка на проект</p>
|
||||
</div>
|
||||
<div>
|
||||
<img src={archive2} alt='arch'></img>
|
||||
<img src={archive2} alt="arch"></img>
|
||||
<p>в архив</p>
|
||||
</div>
|
||||
<div onClick={deleteTask}>
|
||||
<img src={del} alt='delete'></img>
|
||||
<img src={del} alt="delete"></img>
|
||||
<p>удалить</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
<Footer />
|
||||
</section>
|
||||
|
||||
@ -1,24 +1,23 @@
|
||||
import React, {useEffect, useState} from "react";
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
|
||||
import { apiRequest } from "../../../api/request";
|
||||
import { urlForLocal } from '../../../utils/helper'
|
||||
import arrowDown from "../../../assets/icons/arrows/selectArrow.png";
|
||||
import {
|
||||
setColumnName,
|
||||
setColumnPriority,
|
||||
addPersonToProject,
|
||||
editColumnName,
|
||||
editProjectName,
|
||||
getColumnId,
|
||||
getColumnName,
|
||||
getColumnPriority,
|
||||
getProjectBoard,
|
||||
getValueModalType,
|
||||
setColumnName,
|
||||
setColumnPriority,
|
||||
setProject,
|
||||
setProjectBoardFetch,
|
||||
editProjectName,
|
||||
editColumnName,
|
||||
getColumnName,
|
||||
getColumnId,
|
||||
addPersonToProject, getColumnPriority
|
||||
} from "../../../redux/projectsTrackerSlice";
|
||||
|
||||
import arrowDown from "../../../assets/icons/arrows/selectArrow.png"
|
||||
|
||||
import { urlForLocal } from "../../../utils/helper";
|
||||
import "./trackerModal.scss";
|
||||
|
||||
export const TrackerModal = ({
|
||||
@ -33,8 +32,8 @@ export const TrackerModal = ({
|
||||
const dispatch = useDispatch();
|
||||
const projectBoard = useSelector(getProjectBoard);
|
||||
const columnName = useSelector(getColumnName);
|
||||
const columnId = useSelector(getColumnId)
|
||||
const columnPriority = useSelector(getColumnPriority)
|
||||
const columnId = useSelector(getColumnId);
|
||||
const columnPriority = useSelector(getColumnPriority);
|
||||
|
||||
const modalType = useSelector(getValueModalType);
|
||||
const [projectName, setProjectName] = useState(defautlInput);
|
||||
@ -42,9 +41,9 @@ export const TrackerModal = ({
|
||||
const [nameProject, setNameProject] = useState("");
|
||||
const [valueTiket, setValueTiket] = useState("");
|
||||
const [descriptionTicket, setDescriptionTicket] = useState("");
|
||||
const [workers, setWorkers] = useState([])
|
||||
const [selectWorkersOpen, setSelectWorkersOpen] = useState(false)
|
||||
const [selectedWorker, setSelectedWorker] = useState(null)
|
||||
const [workers, setWorkers] = useState([]);
|
||||
const [selectWorkersOpen, setSelectWorkersOpen] = useState(false);
|
||||
const [selectedWorker, setSelectedWorker] = useState(null);
|
||||
|
||||
function createTab() {
|
||||
if (!valueColumn) {
|
||||
@ -55,7 +54,9 @@ export const TrackerModal = ({
|
||||
method: "POST",
|
||||
data: {
|
||||
project_id: projectBoard.id,
|
||||
priority: projectBoard.columns.length ? projectBoard.columns.at(-1).priority + 1 : 1,
|
||||
priority: projectBoard.columns.length
|
||||
? projectBoard.columns.at(-1).priority + 1
|
||||
: 1,
|
||||
title: valueColumn,
|
||||
},
|
||||
}).then(() => {
|
||||
@ -106,36 +107,38 @@ export const TrackerModal = ({
|
||||
function changeColumnParams() {
|
||||
projectBoard.columns.forEach((column) => {
|
||||
if (column.id === columnId && column.priority !== columnPriority) {
|
||||
const priorityColumns = [{
|
||||
const priorityColumns = [
|
||||
{
|
||||
column_id: column.id,
|
||||
priority: Number(columnPriority)
|
||||
}]
|
||||
priority: Number(columnPriority),
|
||||
},
|
||||
];
|
||||
for (let i = column.priority; i < columnPriority; i++) {
|
||||
const currentColumn = {
|
||||
column_id: projectBoard.columns[i].id,
|
||||
priority: i
|
||||
}
|
||||
priorityColumns.push(currentColumn)
|
||||
priority: i,
|
||||
};
|
||||
priorityColumns.push(currentColumn);
|
||||
}
|
||||
for (let i = column.priority; i > columnPriority; i--) {
|
||||
const currentColumn = {
|
||||
column_id: projectBoard.columns[i - 2].id,
|
||||
priority: i
|
||||
}
|
||||
priorityColumns.push(currentColumn)
|
||||
priority: i,
|
||||
};
|
||||
priorityColumns.push(currentColumn);
|
||||
}
|
||||
apiRequest("/project-column/set-priority", {
|
||||
method: "POST",
|
||||
data: {
|
||||
project_id: projectBoard.id,
|
||||
data: JSON.stringify(priorityColumns)
|
||||
}
|
||||
data: JSON.stringify(priorityColumns),
|
||||
},
|
||||
}).then(() => {
|
||||
dispatch(setProjectBoardFetch(projectBoard.id));
|
||||
})
|
||||
});
|
||||
}
|
||||
})
|
||||
changeColumnTitle()
|
||||
});
|
||||
changeColumnTitle();
|
||||
}
|
||||
|
||||
function changeColumnTitle() {
|
||||
@ -377,9 +380,9 @@ export const TrackerModal = ({
|
||||
<div className="input-container">
|
||||
<input
|
||||
className="name-project"
|
||||
placeholder='Приоритет колонки'
|
||||
type='number'
|
||||
step='1'
|
||||
placeholder="Приоритет колонки"
|
||||
type="number"
|
||||
step="1"
|
||||
value={columnPriority}
|
||||
onChange={(e) => dispatch(setColumnPriority(e.target.value))}
|
||||
/>
|
||||
|
||||
@ -1,34 +1,34 @@
|
||||
import React, { useState } from "react";
|
||||
import TrackerTaskSubComment from "../TrackerTaskComment/TrackerTaskComment";
|
||||
|
||||
import { apiRequest } from "../../api/request";
|
||||
import {urlForLocal} from '../../utils/helper';
|
||||
import {getCorrectDate} from "../Calendar/calendarHelper";
|
||||
import edit from "../../assets/icons/edit.svg";
|
||||
import del from "../../assets/icons/delete.svg";
|
||||
import edit from "../../assets/icons/edit.svg";
|
||||
import accept from "../../assets/images/accept.png";
|
||||
import { urlForLocal } from "../../utils/helper";
|
||||
import { getCorrectDate } from "../Calendar/calendarHelper";
|
||||
import TrackerTaskSubComment from "../TrackerTaskComment/TrackerTaskComment";
|
||||
|
||||
export const TrackerTaskComment = ({
|
||||
taskId,
|
||||
comment,
|
||||
commentDelete,
|
||||
addSubComment,
|
||||
subCommentDelete
|
||||
subCommentDelete,
|
||||
}) => {
|
||||
const [commentsEditOpen, setCommentsEditOpen] = useState(false)
|
||||
const [commentsEditText, setCommentsEditText] = useState(comment.text)
|
||||
const [subCommentsCreateOpen, setSubCommentsCreateOpen] = useState(false)
|
||||
const [subCommentsCreateText, setSubCommentsCreateText] = useState('')
|
||||
const [commentsEditOpen, setCommentsEditOpen] = useState(false);
|
||||
const [commentsEditText, setCommentsEditText] = useState(comment.text);
|
||||
const [subCommentsCreateOpen, setSubCommentsCreateOpen] = useState(false);
|
||||
const [subCommentsCreateText, setSubCommentsCreateText] = useState("");
|
||||
|
||||
function editComment() {
|
||||
if (commentsEditText === comment.text) return
|
||||
if (commentsEditText === comment.text) return;
|
||||
apiRequest("/comment/update", {
|
||||
method: "PUT",
|
||||
data: {
|
||||
comment_id: comment.id,
|
||||
text: commentsEditText
|
||||
}
|
||||
}).then(() => {
|
||||
})
|
||||
text: commentsEditText,
|
||||
},
|
||||
}).then(() => {});
|
||||
}
|
||||
|
||||
function deleteComment() {
|
||||
@ -36,94 +36,126 @@ export const TrackerTaskComment = ({
|
||||
method: "PUT",
|
||||
data: {
|
||||
comment_id: comment.id,
|
||||
status: 0
|
||||
}
|
||||
status: 0,
|
||||
},
|
||||
}).then(() => {
|
||||
if (comment.parent_id) {
|
||||
subCommentDelete(comment)
|
||||
subCommentDelete(comment);
|
||||
} else {
|
||||
commentDelete(comment)
|
||||
commentDelete(comment);
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
function createSubComment() {
|
||||
setSubCommentsCreateOpen(false)
|
||||
if(!subCommentsCreateText) return
|
||||
setSubCommentsCreateOpen(false);
|
||||
if (!subCommentsCreateText) return;
|
||||
apiRequest("/comment/create", {
|
||||
method: "POST",
|
||||
data: {
|
||||
text: subCommentsCreateText,
|
||||
entity_type: 2,
|
||||
entity_id: taskId,
|
||||
parent_id: comment.id
|
||||
}
|
||||
parent_id: comment.id,
|
||||
},
|
||||
}).then((res) => {
|
||||
let newSubComment = res
|
||||
newSubComment.created_at = new Date()
|
||||
setSubCommentsCreateText('')
|
||||
addSubComment(comment.id, newSubComment)
|
||||
})
|
||||
let newSubComment = res;
|
||||
newSubComment.created_at = new Date();
|
||||
setSubCommentsCreateText("");
|
||||
addSubComment(comment.id, newSubComment);
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={[!comment.parent_id && comment.subComments.length ? 'comments__list__item__main': '',
|
||||
'comments__list__item',
|
||||
comment.parent_id ? 'comments__list__item__subComment' : ''].join(' ')}>
|
||||
<div className='comments__list__item__info'>
|
||||
<div className='comments__list__item__fio'>
|
||||
<img src={urlForLocal(comment.user.avatar)} alt='avatar' />
|
||||
<div
|
||||
className={[
|
||||
!comment.parent_id && comment.subComments.length
|
||||
? "comments__list__item__main"
|
||||
: "",
|
||||
"comments__list__item",
|
||||
comment.parent_id ? "comments__list__item__subComment" : "",
|
||||
].join(" ")}
|
||||
>
|
||||
<div className="comments__list__item__info">
|
||||
<div className="comments__list__item__fio">
|
||||
<img src={urlForLocal(comment.user.avatar)} alt="avatar" />
|
||||
<p>{comment.user.fio}</p>
|
||||
</div>
|
||||
<div className='comments__list__item__date'>
|
||||
<div className="comments__list__item__date">
|
||||
<span>{getCorrectDate(comment.created_at)}</span>
|
||||
{comment.user_id === Number(localStorage.getItem('id')) &&
|
||||
{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'
|
||||
<div className={commentsEditOpen ? "edit edit__open" : "edit"}>
|
||||
<img
|
||||
src={edit}
|
||||
alt="edit"
|
||||
onClick={() => {
|
||||
createSubComment()
|
||||
if (commentsEditOpen) {
|
||||
editComment();
|
||||
}
|
||||
setCommentsEditOpen(!commentsEditOpen);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
:
|
||||
<span onClick={() => {
|
||||
setSubCommentsCreateOpen(true)
|
||||
}} className='comments__list__item__answer'>Ответить</span>
|
||||
}
|
||||
<img src={del} alt="delete" onClick={() => deleteComment()} />
|
||||
</>
|
||||
}
|
||||
{Boolean(comment.subComments?.length) && comment.subComments.map((subComment) => {
|
||||
return <TrackerTaskSubComment key={subComment.id} taskId={taskId} comment={subComment} subCommentDelete={subCommentDelete}/>
|
||||
})
|
||||
}
|
||||
)}
|
||||
</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;
|
||||
|
||||
@ -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 { 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 TrackerTaskComment from "../../../components/TrackerTaskComment/TrackerTaskComment";
|
||||
import { apiRequest } from "../../../api/request";
|
||||
import { useDispatch } from "react-redux";
|
||||
import "./modalTicket.scss"
|
||||
import {
|
||||
modalToggle,
|
||||
setProjectBoardFetch,
|
||||
} from "../../../redux/projectsTrackerSlice";
|
||||
|
||||
import category from "../../../assets/icons/category.svg";
|
||||
import watch from "../../../assets/icons/watch.svg";
|
||||
import file from "../../../assets/icons/fileModal.svg";
|
||||
import arrow from "../../../assets/icons/arrows/arrowStart.png";
|
||||
import link from "../../../assets/icons/link.svg";
|
||||
import archive from "../../../assets/icons/archive.svg";
|
||||
import del from "../../../assets/icons/delete.svg";
|
||||
import edit from "../../../assets/icons/edit.svg";
|
||||
import send from "../../../assets/icons/send.svg";
|
||||
import plus from "../../../assets/icons/plus.svg";
|
||||
import fullScreen from "../../../assets/icons/arrows/inFullScreen.svg";
|
||||
import close from "../../../assets/icons/closeProjectPersons.svg";
|
||||
|
||||
import {urlForLocal, getCorrectRequestDate} from "../../../utils/helper";
|
||||
import { getCorrectRequestDate, urlForLocal } from "../../../utils/helper";
|
||||
import "./modalTicket.scss";
|
||||
|
||||
export const ModalTiсket = ({
|
||||
active,
|
||||
@ -31,26 +30,30 @@ export const ModalTiсket = ({
|
||||
task,
|
||||
projectId,
|
||||
projectName,
|
||||
projectUsers
|
||||
projectUsers,
|
||||
}) => {
|
||||
const dispatch = useDispatch();
|
||||
const [addSubtask, setAddSubtask] = useState(false);
|
||||
const [editOpen, setEditOpen] = useState(false);
|
||||
const [inputsValue, setInputsValue] = useState({title: task.title, description: task.description, comment: ''});
|
||||
const [inputsValue, setInputsValue] = useState({
|
||||
title: task.title,
|
||||
description: task.description,
|
||||
comment: "",
|
||||
});
|
||||
const [comments, setComments] = useState([]);
|
||||
const [dropListOpen, setDropListOpen] = useState(false)
|
||||
const [dropListMembersOpen, setDropListMembersOpen] = useState(false)
|
||||
const [executor, setExecutor] = useState(task.executor)
|
||||
const [members, setMembers] = useState(task.taskUsers)
|
||||
const [users, setUsers] = useState([])
|
||||
const [timerStart, setTimerStart] = useState(false)
|
||||
const [timerInfo, setTimerInfo] = useState({})
|
||||
const [dropListOpen, setDropListOpen] = useState(false);
|
||||
const [dropListMembersOpen, setDropListMembersOpen] = useState(false);
|
||||
const [executor, setExecutor] = useState(task.executor);
|
||||
const [members, setMembers] = useState(task.taskUsers);
|
||||
const [users, setUsers] = useState([]);
|
||||
const [timerStart, setTimerStart] = useState(false);
|
||||
const [timerInfo, setTimerInfo] = useState({});
|
||||
const [currentTimerCount, setCurrentTimerCount] = useState({
|
||||
hours: 0,
|
||||
minute: 0,
|
||||
seconds: 0
|
||||
})
|
||||
const [timerId, setTimerId] = useState(null)
|
||||
seconds: 0,
|
||||
});
|
||||
const [timerId, setTimerId] = useState(null);
|
||||
|
||||
function deleteTask() {
|
||||
apiRequest("/task/update-task", {
|
||||
@ -59,7 +62,7 @@ export const ModalTiсket = ({
|
||||
task_id: task.id,
|
||||
status: 0,
|
||||
},
|
||||
}).then((res) => {
|
||||
}).then(() => {
|
||||
setActive(false);
|
||||
dispatch(setProjectBoardFetch(projectId));
|
||||
});
|
||||
@ -71,9 +74,9 @@ export const ModalTiсket = ({
|
||||
data: {
|
||||
task_id: task.id,
|
||||
title: inputsValue.title,
|
||||
description: inputsValue.description
|
||||
description: inputsValue.description,
|
||||
},
|
||||
}).then((res) => {
|
||||
}).then(() => {
|
||||
dispatch(setProjectBoardFetch(projectId));
|
||||
});
|
||||
}
|
||||
@ -84,19 +87,21 @@ export const ModalTiсket = ({
|
||||
data: {
|
||||
text: inputsValue.comment,
|
||||
entity_type: 2,
|
||||
entity_id: task.id
|
||||
}
|
||||
entity_id: task.id,
|
||||
},
|
||||
}).then((res) => {
|
||||
let newComment = res
|
||||
newComment.created_at = new Date()
|
||||
newComment.subComments = []
|
||||
setInputsValue((prevValue) => ({...prevValue, comment: ''}))
|
||||
setComments((prevValue) => ([...prevValue, newComment]))
|
||||
})
|
||||
let newComment = res;
|
||||
newComment.created_at = new Date();
|
||||
newComment.subComments = [];
|
||||
setInputsValue((prevValue) => ({ ...prevValue, comment: "" }));
|
||||
setComments((prevValue) => [...prevValue, newComment]);
|
||||
});
|
||||
}
|
||||
|
||||
function commentDelete(comment) {
|
||||
setComments((prevValue) => prevValue.filter((item) => item.id !== comment.id))
|
||||
setComments((prevValue) =>
|
||||
prevValue.filter((item) => item.id !== comment.id)
|
||||
);
|
||||
if (comment.subComments.length) {
|
||||
// promiseAll
|
||||
comment.subComments.forEach((subComment) => {
|
||||
@ -104,32 +109,33 @@ export const ModalTiсket = ({
|
||||
method: "PUT",
|
||||
data: {
|
||||
comment_id: subComment.id,
|
||||
status: 0
|
||||
}
|
||||
}).then(() => {
|
||||
})
|
||||
})
|
||||
status: 0,
|
||||
},
|
||||
}).then(() => {});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function addSubComment(commentId, subComment) {
|
||||
const addSubComment = comments
|
||||
const addSubComment = comments;
|
||||
addSubComment.forEach((comment) => {
|
||||
if (comment.id === commentId) {
|
||||
comment.subComments.push(subComment)
|
||||
comment.subComments.push(subComment);
|
||||
}
|
||||
})
|
||||
setComments(addSubComment)
|
||||
});
|
||||
setComments(addSubComment);
|
||||
}
|
||||
|
||||
function subCommentDelete(subComment) {
|
||||
const deleteSubComment = comments
|
||||
const deleteSubComment = comments;
|
||||
deleteSubComment.forEach((comment, index) => {
|
||||
if (comment.id === subComment.parent_id) {
|
||||
deleteSubComment[index].subComments = comment.subComments.filter((item) => item.id !== subComment.id)
|
||||
deleteSubComment[index].subComments = comment.subComments.filter(
|
||||
(item) => item.id !== subComment.id
|
||||
);
|
||||
}
|
||||
})
|
||||
setComments([...deleteSubComment])
|
||||
});
|
||||
setComments([...deleteSubComment]);
|
||||
}
|
||||
|
||||
function startTaskTimer() {
|
||||
@ -138,13 +144,13 @@ export const ModalTiсket = ({
|
||||
data: {
|
||||
entity_type: 2,
|
||||
entity_id: task.id,
|
||||
created_at: getCorrectRequestDate(new Date())
|
||||
}
|
||||
created_at: getCorrectRequestDate(new Date()),
|
||||
},
|
||||
}).then((res) => {
|
||||
setTimerStart(true)
|
||||
setTimerInfo(res)
|
||||
startTimer()
|
||||
})
|
||||
setTimerStart(true);
|
||||
setTimerInfo(res);
|
||||
startTimer();
|
||||
});
|
||||
}
|
||||
|
||||
function stopTaskTimer() {
|
||||
@ -152,12 +158,12 @@ export const ModalTiсket = ({
|
||||
method: "PUT",
|
||||
data: {
|
||||
timer_id: timerInfo.id,
|
||||
stopped_at: getCorrectRequestDate(new Date())
|
||||
}
|
||||
stopped_at: getCorrectRequestDate(new Date()),
|
||||
},
|
||||
}).then(() => {
|
||||
setTimerStart(false)
|
||||
clearInterval(timerId)
|
||||
})
|
||||
setTimerStart(false);
|
||||
clearInterval(timerId);
|
||||
});
|
||||
}
|
||||
|
||||
function taskExecutor(person) {
|
||||
@ -165,11 +171,11 @@ export const ModalTiсket = ({
|
||||
method: "PUT",
|
||||
data: {
|
||||
task_id: task.id,
|
||||
executor_id: person.user_id
|
||||
executor_id: person.user_id,
|
||||
},
|
||||
}).then((res) => {
|
||||
setDropListOpen(false)
|
||||
setExecutor(res.executor)
|
||||
setDropListOpen(false);
|
||||
setExecutor(res.executor);
|
||||
});
|
||||
}
|
||||
|
||||
@ -178,10 +184,10 @@ export const ModalTiсket = ({
|
||||
method: "PUT",
|
||||
data: {
|
||||
task_id: task.id,
|
||||
executor_id: 0
|
||||
executor_id: 0,
|
||||
},
|
||||
}).then(() => {
|
||||
setExecutor(null)
|
||||
setExecutor(null);
|
||||
});
|
||||
}
|
||||
|
||||
@ -190,11 +196,11 @@ export const ModalTiсket = ({
|
||||
method: "POST",
|
||||
data: {
|
||||
task_id: task.id,
|
||||
user_id: person.user_id
|
||||
user_id: person.user_id,
|
||||
},
|
||||
}).then((res) => {
|
||||
setDropListMembersOpen(false)
|
||||
setMembers((prevValue) => ([...prevValue, res]))
|
||||
setDropListMembersOpen(false);
|
||||
setMembers((prevValue) => [...prevValue, res]);
|
||||
});
|
||||
}
|
||||
|
||||
@ -203,88 +209,97 @@ export const ModalTiсket = ({
|
||||
method: "DELETE",
|
||||
data: {
|
||||
task_id: task.id,
|
||||
user_id: person.user_id
|
||||
user_id: person.user_id,
|
||||
},
|
||||
}).then(() => {
|
||||
setMembers(members.filter((item) => item.user_id !== person.user_id))
|
||||
setMembers(members.filter((item) => item.user_id !== person.user_id));
|
||||
});
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
apiRequest(`/comment/get-by-entity?entity_type=2&entity_id=${task.id}`).then((res) => {
|
||||
apiRequest(
|
||||
`/comment/get-by-entity?entity_type=2&entity_id=${task.id}`
|
||||
).then((res) => {
|
||||
const comments = res.reduce((acc, cur) => {
|
||||
if (!cur.parent_id) {
|
||||
acc.push({...cur, subComments: []})
|
||||
acc.push({ ...cur, subComments: [] });
|
||||
} else {
|
||||
acc.forEach((item) => {
|
||||
if (item.id === cur.parent_id) item.subComments.push(cur)
|
||||
})
|
||||
if (item.id === cur.parent_id) item.subComments.push(cur);
|
||||
});
|
||||
}
|
||||
return acc
|
||||
}, [])
|
||||
setComments(comments)
|
||||
})
|
||||
apiRequest(`/timer/get-by-entity?entity_type=2&entity_id=${task.id}`).then((res) => {
|
||||
let timerSeconds = 0
|
||||
res.length && res.forEach((time) => {
|
||||
timerSeconds += time.deltaSeconds
|
||||
return acc;
|
||||
}, []);
|
||||
setComments(comments);
|
||||
});
|
||||
apiRequest(`/timer/get-by-entity?entity_type=2&entity_id=${task.id}`).then(
|
||||
(res) => {
|
||||
let timerSeconds = 0;
|
||||
res.length &&
|
||||
res.forEach((time) => {
|
||||
timerSeconds += time.deltaSeconds;
|
||||
setCurrentTimerCount({
|
||||
hours: Math.floor(timerSeconds / 60 / 60),
|
||||
minute: Math.floor(timerSeconds / 60 % 60),
|
||||
seconds: timerSeconds % 60}
|
||||
)
|
||||
updateTimerHours = Math.floor(timerSeconds / 60 / 60)
|
||||
updateTimerMinute = Math.floor(timerSeconds / 60 % 60)
|
||||
updateTimerSec = timerSeconds % 60
|
||||
minute: Math.floor((timerSeconds / 60) % 60),
|
||||
seconds: timerSeconds % 60,
|
||||
});
|
||||
updateTimerHours = Math.floor(timerSeconds / 60 / 60);
|
||||
updateTimerMinute = Math.floor((timerSeconds / 60) % 60);
|
||||
updateTimerSec = timerSeconds % 60;
|
||||
if (!time.stopped_at) {
|
||||
setTimerStart(true)
|
||||
startTimer()
|
||||
setTimerInfo(time)
|
||||
setTimerStart(true);
|
||||
startTimer();
|
||||
setTimerInfo(time);
|
||||
}
|
||||
})
|
||||
})
|
||||
}, [])
|
||||
});
|
||||
}
|
||||
);
|
||||
}, []);
|
||||
|
||||
function startTimer () {
|
||||
setTimerId(setInterval(() => {
|
||||
run()
|
||||
}, 1000))
|
||||
function startTimer() {
|
||||
setTimerId(
|
||||
setInterval(() => {
|
||||
run();
|
||||
}, 1000)
|
||||
);
|
||||
}
|
||||
|
||||
let updateTimerSec = currentTimerCount.seconds, updateTimerMinute = currentTimerCount.minute, updateTimerHours = currentTimerCount.hours
|
||||
let updateTimerSec = currentTimerCount.seconds,
|
||||
updateTimerMinute = currentTimerCount.minute,
|
||||
updateTimerHours = currentTimerCount.hours;
|
||||
|
||||
function run () {
|
||||
updateTimerSec++
|
||||
function run() {
|
||||
updateTimerSec++;
|
||||
if (updateTimerSec > 60) {
|
||||
updateTimerMinute++
|
||||
updateTimerSec = 0
|
||||
updateTimerMinute++;
|
||||
updateTimerSec = 0;
|
||||
}
|
||||
if (updateTimerMinute === 60) {
|
||||
updateTimerMinute = 0
|
||||
updateTimerHours++
|
||||
updateTimerMinute = 0;
|
||||
updateTimerHours++;
|
||||
}
|
||||
|
||||
return setCurrentTimerCount({
|
||||
hours: updateTimerHours,
|
||||
minute: updateTimerMinute,
|
||||
seconds: updateTimerSec
|
||||
})
|
||||
seconds: updateTimerSec,
|
||||
});
|
||||
}
|
||||
|
||||
function correctTimerTime (time) {
|
||||
if (time < 10) return `0${time}`
|
||||
if (time > 10) return time
|
||||
function correctTimerTime(time) {
|
||||
if (time < 10) return `0${time}`;
|
||||
if (time > 10) return time;
|
||||
}
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
let ids = members.map((user) => user.user_id)
|
||||
setUsers(projectUsers.reduce((acc, cur) => {
|
||||
if (!ids.includes(cur.user_id)) acc.push(cur)
|
||||
return acc
|
||||
}, []))
|
||||
}, [members])
|
||||
|
||||
let ids = members.map((user) => user.user_id);
|
||||
setUsers(
|
||||
projectUsers.reduce((acc, cur) => {
|
||||
if (!ids.includes(cur.user_id)) acc.push(cur);
|
||||
return acc;
|
||||
}, [])
|
||||
);
|
||||
}, [members]);
|
||||
|
||||
return (
|
||||
<div
|
||||
@ -309,13 +324,33 @@ export const ModalTiсket = ({
|
||||
|
||||
<div className="content__task">
|
||||
<span>Задача</span>
|
||||
{editOpen ? <input value={inputsValue.title} onChange={(e) => {
|
||||
setInputsValue((prevValue) => ({...prevValue, title: e.target.value}))
|
||||
}} /> :<h5>{inputsValue.title}</h5>}
|
||||
{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>}
|
||||
{editOpen ? (
|
||||
<input
|
||||
value={inputsValue.description}
|
||||
onChange={(e) => {
|
||||
setInputsValue((prevValue) => ({
|
||||
...prevValue,
|
||||
description: e.target.value,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<p>{inputsValue.description}</p>
|
||||
)}
|
||||
{/*<img src={taskImg} className="image-task"></img>*/}
|
||||
</div>
|
||||
<div className="content__communication">
|
||||
@ -340,14 +375,22 @@ export const ModalTiсket = ({
|
||||
</p>
|
||||
</div>
|
||||
<div className="content__input">
|
||||
<input placeholder="Оставить комментарий" value={inputsValue.comment} onChange={(e) => {
|
||||
setInputsValue((prevValue) => ({...prevValue, comment: e.target.value}))
|
||||
}} />
|
||||
<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'>
|
||||
<div className="comments__list">
|
||||
{comments.map((comment) => {
|
||||
return <TrackerTaskComment
|
||||
return (
|
||||
<TrackerTaskComment
|
||||
key={comment.id}
|
||||
taskId={task.id}
|
||||
comment={comment}
|
||||
@ -355,72 +398,104 @@ export const ModalTiсket = ({
|
||||
addSubComment={addSubComment}
|
||||
subCommentDelete={subCommentDelete}
|
||||
/>
|
||||
})
|
||||
}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="workers">
|
||||
<div className="workers_box task__info">
|
||||
<span className="exit" onClick={() => setActive(false)}></span>
|
||||
<span className='nameProject'>{task.title}</span>
|
||||
<span className="nameProject">{task.title}</span>
|
||||
<p className="workers__creator">Создатель : {task.user?.fio}</p>
|
||||
|
||||
{executor ?
|
||||
<div className='executor'>
|
||||
{executor ? (
|
||||
<div className="executor">
|
||||
<p>Исполнитель: {executor.fio}</p>
|
||||
<img src={urlForLocal(executor.avatar)} alt='avatar' />
|
||||
<img src={close} className='delete' onClick={() => deleteTaskExecutor()} />
|
||||
</div> :
|
||||
<img src={urlForLocal(executor.avatar)} alt="avatar" />
|
||||
<img
|
||||
src={close}
|
||||
className="delete"
|
||||
onClick={() => deleteTaskExecutor()}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="add-worker moreItems ">
|
||||
<button onClick={() => setDropListOpen(true)}>+</button>
|
||||
<span>Добавить исполнителя</span>
|
||||
{dropListOpen &&
|
||||
<div className='dropdownList'>
|
||||
<img src={close} className='dropdownList__close' onClick={() => setDropListOpen(false)} />
|
||||
{dropListOpen && (
|
||||
<div className="dropdownList">
|
||||
<img
|
||||
src={close}
|
||||
className="dropdownList__close"
|
||||
onClick={() => setDropListOpen(false)}
|
||||
/>
|
||||
{projectUsers.map((person) => {
|
||||
return <div className='dropdownList__person' key={person.user_id} onClick={() => taskExecutor(person)}>
|
||||
return (
|
||||
<div
|
||||
className="dropdownList__person"
|
||||
key={person.user_id}
|
||||
onClick={() => taskExecutor(person)}
|
||||
>
|
||||
<span>{person.user.fio}</span>
|
||||
<img src={urlForLocal(person.user.avatar)} />
|
||||
</div>
|
||||
})
|
||||
}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
)}
|
||||
|
||||
{Boolean(members.length) &&
|
||||
<div className='members'>
|
||||
{Boolean(members.length) && (
|
||||
<div className="members">
|
||||
<p>Участники:</p>
|
||||
<div className='members__list'>
|
||||
<div className="members__list">
|
||||
{members.map((member) => {
|
||||
return <div className='worker' key={member.user_id}>
|
||||
return (
|
||||
<div className="worker" key={member.user_id}>
|
||||
<p>{member.fio}</p>
|
||||
<img src={urlForLocal(member.avatar)} />
|
||||
<img src={close} className='delete' onClick={() => deleteMember(member)} />
|
||||
<img
|
||||
src={close}
|
||||
className="delete"
|
||||
onClick={() => deleteMember(member)}
|
||||
/>
|
||||
</div>
|
||||
})
|
||||
}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
)}
|
||||
|
||||
<div className="add-worker moreItems">
|
||||
<button onClick={() => setDropListMembersOpen(true)}>+</button>
|
||||
<span>Добавить участников</span>
|
||||
{dropListMembersOpen &&
|
||||
<div className='dropdownList'>
|
||||
<img src={close} className='dropdownList__close' onClick={() => setDropListMembersOpen(false)} />
|
||||
{users.length ? users.map((person) => {
|
||||
return <div className='dropdownList__person' key={person.user_id} onClick={() => addMember(person)}>
|
||||
{dropListMembersOpen && (
|
||||
<div className="dropdownList">
|
||||
<img
|
||||
src={close}
|
||||
className="dropdownList__close"
|
||||
onClick={() => setDropListMembersOpen(false)}
|
||||
/>
|
||||
{users.length ? (
|
||||
users.map((person) => {
|
||||
return (
|
||||
<div
|
||||
className="dropdownList__person"
|
||||
key={person.user_id}
|
||||
onClick={() => addMember(person)}
|
||||
>
|
||||
<span>{person.user.fio}</span>
|
||||
<img src={urlForLocal(person.user.avatar)} />
|
||||
</div>
|
||||
}) : <p className='noUsers'>Нет пользователей</p>
|
||||
}
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<p className="noUsers">Нет пользователей</p>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -429,32 +504,44 @@ export const ModalTiсket = ({
|
||||
<img src={watch}></img>
|
||||
<span>Длительность : </span>
|
||||
<p>
|
||||
{correctTimerTime(currentTimerCount.hours)}:{correctTimerTime(currentTimerCount.minute)}:{correctTimerTime(currentTimerCount.seconds)}
|
||||
{correctTimerTime(currentTimerCount.hours)}:
|
||||
{correctTimerTime(currentTimerCount.minute)}:
|
||||
{correctTimerTime(currentTimerCount.seconds)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{timerStart ?
|
||||
{timerStart ? (
|
||||
<button className="stop" onClick={() => stopTaskTimer()}>
|
||||
Остановить
|
||||
</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>
|
||||
</button>
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="workers_box-bottom">
|
||||
<div className={editOpen ? 'edit' : ''} onClick={() => {
|
||||
if(editOpen) {
|
||||
setEditOpen(!editOpen)
|
||||
editTask()
|
||||
<div
|
||||
className={editOpen ? "edit" : ""}
|
||||
onClick={() => {
|
||||
if (editOpen) {
|
||||
setEditOpen(!editOpen);
|
||||
editTask();
|
||||
} else {
|
||||
setEditOpen(!editOpen)
|
||||
setEditOpen(!editOpen);
|
||||
}
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
<img src={edit}></img>
|
||||
<p>{editOpen ? 'сохранить' : 'редактировать'}</p>
|
||||
<p>{editOpen ? "сохранить" : "редактировать"}</p>
|
||||
</div>
|
||||
<div>
|
||||
<img src={link}></img>
|
||||
|
||||
@ -1,44 +1,42 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { Link, useNavigate, useParams } from "react-router-dom";
|
||||
|
||||
import { ProfileHeader } from "../../ProfileHeader/ProfileHeader";
|
||||
import { ProfileBreadcrumbs } from "../../ProfileBreadcrumbs/ProfileBreadcrumbs";
|
||||
import { Footer } from "@components/Common/Footer/Footer";
|
||||
import { Link, useParams, useNavigate } from "react-router-dom";
|
||||
import TrackerModal from "../../Modal/TrackerModal/TrackerModal";
|
||||
import TrackerTaskComment from "../../../components/TrackerTaskComment/TrackerTaskComment";
|
||||
import { Navigation } from "../../Navigation/Navigation";
|
||||
import {Loader} from "@components/Common/Loader/Loader";
|
||||
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 {
|
||||
deletePersonOnProject,
|
||||
getBoarderLoader,
|
||||
getProjectBoard,
|
||||
modalToggle,
|
||||
setProjectBoardFetch,
|
||||
setToggleTab,
|
||||
getProjectBoard,
|
||||
getBoarderLoader,
|
||||
} from "../../../redux/projectsTrackerSlice";
|
||||
import { apiRequest } from "../../../api/request";
|
||||
|
||||
import project from "../../../images/trackerProject.svg";
|
||||
import watch from "../../../images/watch.png";
|
||||
import file from "../../../images/fileModal.svg";
|
||||
import send from "../../../images/send.svg";
|
||||
import arrow2 from "../../../images/arrowStart.png";
|
||||
import plus from "../../../images/plus.svg";
|
||||
import tasks from "../../../images/trackerTasks.svg";
|
||||
import archive from "../../../images/archiveTracker.svg";
|
||||
import arrow from "../../../images/arrowCalendar.png";
|
||||
import link from "../../../images/link.svg";
|
||||
import archive2 from "../../../images/archive.svg";
|
||||
import del from "../../../images/delete.svg";
|
||||
import edit from "../../../images/edit.svg";
|
||||
import close from "../../../images/closeProjectPersons.svg";
|
||||
|
||||
import TrackerModal from "../../Modal/TrackerModal/TrackerModal";
|
||||
import { Navigation } from "../../Navigation/Navigation";
|
||||
import { ProfileBreadcrumbs } from "../../ProfileBreadcrumbs/ProfileBreadcrumbs";
|
||||
import { ProfileHeader } from "../../ProfileHeader/ProfileHeader";
|
||||
import "./ticketFullScreen.scss";
|
||||
import {getCorrectRequestDate, urlForLocal} from "../../../helper";
|
||||
|
||||
export const TicketFullScreen = ({}) => {
|
||||
export const TicketFullScreen = () => {
|
||||
const [modalAddWorker, setModalAddWorker] = useState(false);
|
||||
const ticketId = useParams();
|
||||
const dispatch = useDispatch();
|
||||
@ -50,35 +48,41 @@ export const TicketFullScreen = ({}) => {
|
||||
const [inputsValue, setInputsValue] = useState({});
|
||||
const [loader, setLoader] = useState(true);
|
||||
const [comments, setComments] = useState([]);
|
||||
const [personListOpen, setPersonListOpen] = useState(false)
|
||||
const [timerStart, setTimerStart] = useState(false)
|
||||
const [timerInfo, setTimerInfo] = useState({})
|
||||
const [personListOpen, setPersonListOpen] = useState(false);
|
||||
const [timerStart, setTimerStart] = useState(false);
|
||||
const [timerInfo, setTimerInfo] = useState({});
|
||||
|
||||
useEffect(() => {
|
||||
apiRequest(`/task/get-task?task_id=${ticketId.id}`).then((taskInfo) => {
|
||||
setTaskInfo(taskInfo);
|
||||
setInputsValue({title: taskInfo.title, description: taskInfo.description, comment: ''})
|
||||
apiRequest(`/comment/get-by-entity?entity_type=2&entity_id=${taskInfo.id}`).then((res) => {
|
||||
setInputsValue({
|
||||
title: taskInfo.title,
|
||||
description: taskInfo.description,
|
||||
comment: "",
|
||||
});
|
||||
apiRequest(
|
||||
`/comment/get-by-entity?entity_type=2&entity_id=${taskInfo.id}`
|
||||
).then((res) => {
|
||||
const comments = res.reduce((acc, cur) => {
|
||||
if (!cur.parent_id) {
|
||||
acc.push({...cur, subComments: []})
|
||||
acc.push({ ...cur, subComments: [] });
|
||||
} else {
|
||||
acc.forEach((item) => {
|
||||
if (item.id === cur.parent_id) item.subComments.push(cur)
|
||||
})
|
||||
if (item.id === cur.parent_id) item.subComments.push(cur);
|
||||
});
|
||||
}
|
||||
return acc
|
||||
}, [])
|
||||
setComments(comments)
|
||||
})
|
||||
return acc;
|
||||
}, []);
|
||||
setComments(comments);
|
||||
});
|
||||
taskInfo.timers.forEach((time) => {
|
||||
if (!time.stopped_at) {
|
||||
setTimerStart(true)
|
||||
setTimerInfo(time)
|
||||
setTimerStart(true);
|
||||
setTimerInfo(time);
|
||||
}
|
||||
})
|
||||
});
|
||||
dispatch(setProjectBoardFetch(taskInfo.project_id));
|
||||
setLoader(boardLoader)
|
||||
setLoader(boardLoader);
|
||||
});
|
||||
}, []);
|
||||
|
||||
@ -89,7 +93,7 @@ export const TicketFullScreen = ({}) => {
|
||||
task_id: ticketId.id,
|
||||
status: 0,
|
||||
},
|
||||
}).then((res) => {
|
||||
}).then(() => {
|
||||
navigate(`/tracker/project/${taskInfo.project_id}`);
|
||||
});
|
||||
}
|
||||
@ -100,10 +104,9 @@ export const TicketFullScreen = ({}) => {
|
||||
data: {
|
||||
task_id: taskInfo.id,
|
||||
title: inputsValue.title,
|
||||
description: inputsValue.description
|
||||
description: inputsValue.description,
|
||||
},
|
||||
}).then(() => {
|
||||
});
|
||||
}).then(() => {});
|
||||
}
|
||||
|
||||
function createComment() {
|
||||
@ -112,15 +115,15 @@ export const TicketFullScreen = ({}) => {
|
||||
data: {
|
||||
text: inputsValue.comment,
|
||||
entity_type: 2,
|
||||
entity_id: taskInfo.id
|
||||
}
|
||||
entity_id: taskInfo.id,
|
||||
},
|
||||
}).then((res) => {
|
||||
let newComment = res
|
||||
newComment.created_at = new Date()
|
||||
newComment.subComments = []
|
||||
setInputsValue((prevValue) => ({...prevValue, comment: ''}))
|
||||
setComments((prevValue) => ([...prevValue, newComment]))
|
||||
})
|
||||
let newComment = res;
|
||||
newComment.created_at = new Date();
|
||||
newComment.subComments = [];
|
||||
setInputsValue((prevValue) => ({ ...prevValue, comment: "" }));
|
||||
setComments((prevValue) => [...prevValue, newComment]);
|
||||
});
|
||||
}
|
||||
|
||||
function startTaskTimer() {
|
||||
@ -129,12 +132,12 @@ export const TicketFullScreen = ({}) => {
|
||||
data: {
|
||||
entity_type: 2,
|
||||
entity_id: taskInfo.id,
|
||||
created_at: getCorrectRequestDate(new Date())
|
||||
}
|
||||
created_at: getCorrectRequestDate(new Date()),
|
||||
},
|
||||
}).then((res) => {
|
||||
setTimerStart(true)
|
||||
setTimerInfo(res)
|
||||
})
|
||||
setTimerStart(true);
|
||||
setTimerInfo(res);
|
||||
});
|
||||
}
|
||||
|
||||
function stopTaskTimer() {
|
||||
@ -142,9 +145,9 @@ export const TicketFullScreen = ({}) => {
|
||||
method: "PUT",
|
||||
data: {
|
||||
timer_id: timerInfo.id,
|
||||
stopped_at: getCorrectRequestDate(new Date())
|
||||
}
|
||||
}).then(() => setTimerStart(false))
|
||||
stopped_at: getCorrectRequestDate(new Date()),
|
||||
},
|
||||
}).then(() => setTimerStart(false));
|
||||
}
|
||||
|
||||
function deletePerson(userId) {
|
||||
@ -152,47 +155,50 @@ export const TicketFullScreen = ({}) => {
|
||||
method: "DELETE",
|
||||
data: {
|
||||
project_id: projectBoard.id,
|
||||
user_id: userId
|
||||
user_id: userId,
|
||||
},
|
||||
}).then((res) => {
|
||||
dispatch(deletePersonOnProject(userId))
|
||||
}).then(() => {
|
||||
dispatch(deletePersonOnProject(userId));
|
||||
});
|
||||
}
|
||||
|
||||
function commentDelete(comment) {
|
||||
setComments((prevValue) => prevValue.filter((item) => item.id !== comment.id))
|
||||
setComments((prevValue) =>
|
||||
prevValue.filter((item) => item.id !== comment.id)
|
||||
);
|
||||
if (comment.subComments.length) {
|
||||
comment.subComments.forEach((subComment) => {
|
||||
apiRequest("/comment/update", {
|
||||
method: "PUT",
|
||||
data: {
|
||||
comment_id: subComment.id,
|
||||
status: 0
|
||||
}
|
||||
}).then(() => {
|
||||
})
|
||||
})
|
||||
status: 0,
|
||||
},
|
||||
}).then(() => {});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function addSubComment(commentId, subComment) {
|
||||
const addSubComment = comments
|
||||
const addSubComment = comments;
|
||||
addSubComment.forEach((comment) => {
|
||||
if (comment.id === commentId) {
|
||||
comment.subComments.push(subComment)
|
||||
comment.subComments.push(subComment);
|
||||
}
|
||||
})
|
||||
setComments(addSubComment)
|
||||
});
|
||||
setComments(addSubComment);
|
||||
}
|
||||
|
||||
function subCommentDelete(subComment) {
|
||||
const deleteSubComment = comments
|
||||
const deleteSubComment = comments;
|
||||
deleteSubComment.forEach((comment, index) => {
|
||||
if (comment.id === subComment.parent_id) {
|
||||
deleteSubComment[index].subComments = comment.subComments.filter((item) => item.id !== subComment.id)
|
||||
deleteSubComment[index].subComments = comment.subComments.filter(
|
||||
(item) => item.id !== subComment.id
|
||||
);
|
||||
}
|
||||
})
|
||||
setComments([...deleteSubComment])
|
||||
});
|
||||
setComments([...deleteSubComment]);
|
||||
}
|
||||
|
||||
const toggleTabs = (index) => {
|
||||
@ -241,7 +247,9 @@ export const TicketFullScreen = ({}) => {
|
||||
<p>Архив</p>
|
||||
</Link>
|
||||
</div>
|
||||
{loader ? <Loader /> :
|
||||
{loader ? (
|
||||
<Loader />
|
||||
) : (
|
||||
<>
|
||||
<div className="tracker__tabs__content content-tabs">
|
||||
<div className="tasks__head">
|
||||
@ -256,43 +264,69 @@ export const TicketFullScreen = ({}) => {
|
||||
<div className="tasks__head__persons">
|
||||
{/*<img src={avatarTest} alt="avatar" />*/}
|
||||
{/*<img src={avatarTest} alt="avatar" />*/}
|
||||
<span className="countPersons">{projectBoard.projectUsers?.length}</span>
|
||||
<span className="countPersons">
|
||||
{projectBoard.projectUsers?.length}
|
||||
</span>
|
||||
<span
|
||||
className="addPerson"
|
||||
onClick={() => {
|
||||
setPersonListOpen(true)
|
||||
setPersonListOpen(true);
|
||||
}}
|
||||
>
|
||||
+
|
||||
</span>
|
||||
<p>добавить участника</p>
|
||||
{personListOpen &&
|
||||
<div className='persons__list'>
|
||||
<img className='persons__list__close' src={close} alt='close' onClick={() => setPersonListOpen(false)} />
|
||||
<div className='persons__list__count'><span>{projectBoard.projectUsers?.length}</span>участник</div>
|
||||
<div className='persons__list__info'>В проекте - <span>“{projectBoard.name}”</span></div>
|
||||
<div className='persons__list__items'>
|
||||
{personListOpen && (
|
||||
<div className="persons__list">
|
||||
<img
|
||||
className="persons__list__close"
|
||||
src={close}
|
||||
alt="close"
|
||||
onClick={() => setPersonListOpen(false)}
|
||||
/>
|
||||
<div className="persons__list__count">
|
||||
<span>{projectBoard.projectUsers?.length}</span>
|
||||
участник
|
||||
</div>
|
||||
<div className="persons__list__info">
|
||||
В проекте - <span>“{projectBoard.name}”</span>
|
||||
</div>
|
||||
<div className="persons__list__items">
|
||||
{projectBoard.projectUsers?.map((person) => {
|
||||
return <div className='persons__list__item' key={person.user_id}>
|
||||
<img className='avatar' src={urlForLocal(person.user.avatar)} alt='avatar' />
|
||||
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)}/>
|
||||
<img
|
||||
className="delete"
|
||||
src={close}
|
||||
alt="delete"
|
||||
onClick={() => deletePerson(person.user_id)}
|
||||
/>
|
||||
</div>
|
||||
})
|
||||
}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className='persons__list__add'
|
||||
<div
|
||||
className="persons__list__add"
|
||||
onClick={() => {
|
||||
dispatch(modalToggle("addWorker"));
|
||||
setModalAddWorker(true);
|
||||
setPersonListOpen(false)
|
||||
setPersonListOpen(false);
|
||||
}}
|
||||
>
|
||||
<span className='addPerson'>+</span>
|
||||
<span className="addPerson">+</span>
|
||||
<p>Добавить участников</p>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
<Link to={`/profile/tracker`} className="link">
|
||||
<div className="tasks__head__back">
|
||||
@ -307,13 +341,33 @@ export const TicketFullScreen = ({}) => {
|
||||
<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>}
|
||||
{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>}
|
||||
{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">
|
||||
@ -338,14 +392,22 @@ export const TicketFullScreen = ({}) => {
|
||||
</p>
|
||||
</div>
|
||||
<div className="content__input">
|
||||
<input placeholder="Оставить комментарий" value={inputsValue.comment} onChange={(e) => {
|
||||
setInputsValue((prevValue) => ({...prevValue, comment: e.target.value}))
|
||||
}} />
|
||||
<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'>
|
||||
<div className="comments__list">
|
||||
{comments.map((comment) => {
|
||||
return <TrackerTaskComment
|
||||
return (
|
||||
<TrackerTaskComment
|
||||
key={comment.id}
|
||||
taskId={taskInfo.id}
|
||||
comment={comment}
|
||||
@ -353,9 +415,8 @@ export const TicketFullScreen = ({}) => {
|
||||
addSubComment={addSubComment}
|
||||
subCommentDelete={subCommentDelete}
|
||||
/>
|
||||
})
|
||||
|
||||
}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -407,28 +468,39 @@ export const TicketFullScreen = ({}) => {
|
||||
<p>{"0:00:00"}</p>
|
||||
</div>
|
||||
|
||||
{timerStart ?
|
||||
{timerStart ? (
|
||||
<button className="stop" onClick={() => stopTaskTimer()}>
|
||||
Остановить
|
||||
</button>
|
||||
:
|
||||
<button className={taskInfo.executor_id === Number(localStorage.getItem('id')) ? 'start' : 'start disable'} onClick={() => startTaskTimer()}>
|
||||
) : (
|
||||
<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()
|
||||
<div
|
||||
className={editOpen ? "edit" : ""}
|
||||
onClick={() => {
|
||||
if (editOpen) {
|
||||
setEditOpen(!editOpen);
|
||||
editTask();
|
||||
} else {
|
||||
setEditOpen(!editOpen)
|
||||
setEditOpen(!editOpen);
|
||||
}
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
<img src={edit}></img>
|
||||
<p>{editOpen ? 'сохранить' : 'редактировать'}</p>
|
||||
<p>{editOpen ? "сохранить" : "редактировать"}</p>
|
||||
</div>
|
||||
<div>
|
||||
<img src={link}></img>
|
||||
@ -446,7 +518,7 @@ export const TicketFullScreen = ({}) => {
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
<Footer />
|
||||
</section>
|
||||
|
||||
@ -1,44 +1,43 @@
|
||||
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 { 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 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 {
|
||||
getProjectBoard,
|
||||
getBoarderLoader,
|
||||
modalToggle,
|
||||
moveProjectTask,
|
||||
setProjectBoardFetch,
|
||||
setToggleTab,
|
||||
activeLoader,
|
||||
setColumnName,
|
||||
setColumnId,
|
||||
setColumnPriority,
|
||||
deletePersonOnProject,
|
||||
filterCreatedByMe,
|
||||
filteredParticipateTasks,
|
||||
movePositionProjectTask
|
||||
getBoarderLoader,
|
||||
getProjectBoard,
|
||||
modalToggle,
|
||||
movePositionProjectTask,
|
||||
moveProjectTask,
|
||||
setColumnId,
|
||||
setColumnName,
|
||||
setColumnPriority,
|
||||
setProjectBoardFetch,
|
||||
setToggleTab,
|
||||
} from "../../redux/projectsTrackerSlice";
|
||||
|
||||
import ModalTicket from "../../components/UI/ModalTicket/ModalTicket";
|
||||
import TrackerModal from "../../components/Modal/TrackerModal/TrackerModal";
|
||||
|
||||
import project from "../../assets/icons/trackerProject.svg";
|
||||
import tasks from "../../assets/icons/trackerTasks.svg";
|
||||
import archive from "../../assets/icons/archiveTracker.svg";
|
||||
import commentsBoard from "../../assets/icons/commentsBoard.svg";
|
||||
import filesBoard from "../../assets/icons/filesBoard.svg";
|
||||
import arrow from "../../assets/icons/arrows/arrowCalendar.png";
|
||||
import del from "../../assets/icons/delete.svg";
|
||||
import edit from "../../assets/icons/edit.svg";
|
||||
import close from "../../assets/icons/close.png"
|
||||
import accept from "../../assets/images/accept.png";
|
||||
import { urlForLocal } from "../../utils/helper";
|
||||
|
||||
export const ProjectTracker = () => {
|
||||
const dispatch = useDispatch();
|
||||
@ -48,13 +47,14 @@ export const ProjectTracker = () => {
|
||||
const [selectedTab, setSelectedTab] = useState(0);
|
||||
const [priorityTask, setPriorityTask] = useState(0);
|
||||
const [wrapperHover, setWrapperHover] = useState({});
|
||||
const [taskHover, setTaskHover] = useState({})
|
||||
const [taskHover, setTaskHover] = useState({});
|
||||
const [modalAdd, setModalAdd] = useState(false);
|
||||
const [modalActiveTicket, setModalActiveTicket] = useState(false);
|
||||
const [selectedTicket, setSelectedTicket] = useState({});
|
||||
const [personListOpen, setPersonListOpen] = useState(false)
|
||||
const [checkBoxParticipateTasks, setCheckBoxParticipateTasks] = useState(false)
|
||||
const [checkBoxMyTasks, setCheckBoxMyTasks] = useState(false)
|
||||
const [personListOpen, setPersonListOpen] = useState(false);
|
||||
const [checkBoxParticipateTasks, setCheckBoxParticipateTasks] =
|
||||
useState(false);
|
||||
const [checkBoxMyTasks, setCheckBoxMyTasks] = useState(false);
|
||||
const startWrapperIndexTest = useRef({});
|
||||
const projectBoard = useSelector(getProjectBoard);
|
||||
const loader = useSelector(getBoarderLoader);
|
||||
@ -65,20 +65,20 @@ export const ProjectTracker = () => {
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const tasksHover = {}
|
||||
const columnHover = {}
|
||||
const tasksHover = {};
|
||||
const columnHover = {};
|
||||
if (Object.keys(projectBoard).length) {
|
||||
projectBoard.columns.forEach((column) => {
|
||||
setOpenColumnSelect((prevState) => ({
|
||||
...prevState,
|
||||
[column.id]: false,
|
||||
}));
|
||||
columnHover[column.id] = false
|
||||
column.tasks.forEach(task => tasksHover[task.id] = false)
|
||||
columnHover[column.id] = false;
|
||||
column.tasks.forEach((task) => (tasksHover[task.id] = false));
|
||||
});
|
||||
}
|
||||
setWrapperHover(columnHover)
|
||||
setTaskHover(tasksHover)
|
||||
setWrapperHover(columnHover);
|
||||
setTaskHover(tasksHover);
|
||||
}, [projectBoard]);
|
||||
|
||||
function dragStartHandler(e, task, columnId) {
|
||||
@ -86,35 +86,37 @@ export const ProjectTracker = () => {
|
||||
}
|
||||
|
||||
function dragOverTaskHandler(e, task) {
|
||||
e.preventDefault()
|
||||
e.preventDefault();
|
||||
if (startWrapperIndexTest.current.task.id === task.id) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
setTaskHover((prevState) => ({[prevState]: false, [task.id]: true}))
|
||||
setTaskHover((prevState) => ({ [prevState]: false, [task.id]: true }));
|
||||
}
|
||||
|
||||
function dragLeaveTaskHandler(e) {
|
||||
setTaskHover((prevState) => ({[prevState]: false}))
|
||||
function dragLeaveTaskHandler() {
|
||||
setTaskHover((prevState) => ({ [prevState]: false }));
|
||||
}
|
||||
|
||||
function dragEndTaskHandler() {
|
||||
setTaskHover((prevState) => ({[prevState]: false}))
|
||||
setTaskHover((prevState) => ({ [prevState]: false }));
|
||||
setWrapperHover((prevState) => ({
|
||||
[prevState]: false,
|
||||
}));
|
||||
}
|
||||
|
||||
function dragDropTaskHandler(e, task, column) {
|
||||
e.preventDefault()
|
||||
e.preventDefault();
|
||||
if (task.id === startWrapperIndexTest.current.task.id) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
const finishTask = column.tasks.indexOf(task)
|
||||
dispatch(movePositionProjectTask({
|
||||
const finishTask = column.tasks.indexOf(task);
|
||||
dispatch(
|
||||
movePositionProjectTask({
|
||||
startTask: startWrapperIndexTest.current.task,
|
||||
finishTask: task,
|
||||
finishIndex: finishTask
|
||||
}))
|
||||
finishIndex: finishTask,
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
function dragOverHandler(e) {
|
||||
@ -139,9 +141,10 @@ export const ProjectTracker = () => {
|
||||
[prevState]: false,
|
||||
}));
|
||||
|
||||
if (startWrapperIndexTest.current.index === columnId
|
||||
||
|
||||
e.target.className.includes('__item')) {
|
||||
if (
|
||||
startWrapperIndexTest.current.index === columnId ||
|
||||
e.target.className.includes("__item")
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -159,7 +162,7 @@ export const ProjectTracker = () => {
|
||||
setSelectedTab(columnId);
|
||||
dispatch(modalToggle("createTiketProject"));
|
||||
setModalAdd(true);
|
||||
setPriorityTask(length)
|
||||
setPriorityTask(length);
|
||||
}
|
||||
|
||||
function openTicket(e, task) {
|
||||
@ -168,7 +171,7 @@ export const ProjectTracker = () => {
|
||||
}
|
||||
|
||||
function deleteColumn(column) {
|
||||
const priorityColumns = []
|
||||
const priorityColumns = [];
|
||||
apiRequest("/project-column/update-column", {
|
||||
method: "PUT",
|
||||
data: {
|
||||
@ -181,19 +184,19 @@ export const ProjectTracker = () => {
|
||||
for (let i = column.priority; i < projectBoard.columns.length; i++) {
|
||||
const currentColumn = {
|
||||
column_id: projectBoard.columns[i].id,
|
||||
priority: i
|
||||
}
|
||||
priorityColumns.push(currentColumn)
|
||||
priority: i,
|
||||
};
|
||||
priorityColumns.push(currentColumn);
|
||||
}
|
||||
apiRequest("/project-column/set-priority", {
|
||||
method: "POST",
|
||||
data: {
|
||||
project_id: projectBoard.id,
|
||||
data: JSON.stringify(priorityColumns)
|
||||
}
|
||||
data: JSON.stringify(priorityColumns),
|
||||
},
|
||||
}).then(() => {
|
||||
dispatch(setProjectBoardFetch(projectBoard.id));
|
||||
})
|
||||
});
|
||||
} else {
|
||||
dispatch(setProjectBoardFetch(projectBoard.id));
|
||||
}
|
||||
@ -205,33 +208,33 @@ export const ProjectTracker = () => {
|
||||
method: "DELETE",
|
||||
data: {
|
||||
project_id: projectBoard.id,
|
||||
user_id: userId
|
||||
user_id: userId,
|
||||
},
|
||||
}).then(() => {
|
||||
dispatch(deletePersonOnProject(userId))
|
||||
dispatch(deletePersonOnProject(userId));
|
||||
});
|
||||
}
|
||||
|
||||
function filterParticipateTasks() {
|
||||
if (!checkBoxParticipateTasks) {
|
||||
dispatch(filteredParticipateTasks(Number(localStorage.getItem('id'))))
|
||||
dispatch(filteredParticipateTasks(Number(localStorage.getItem("id"))));
|
||||
} else {
|
||||
dispatch(setProjectBoardFetch(projectId.id))
|
||||
setCheckBoxParticipateTasks(false)
|
||||
setCheckBoxMyTasks(false)
|
||||
dispatch(setProjectBoardFetch(projectId.id));
|
||||
setCheckBoxParticipateTasks(false);
|
||||
setCheckBoxMyTasks(false);
|
||||
}
|
||||
setCheckBoxParticipateTasks(!checkBoxParticipateTasks)
|
||||
setCheckBoxParticipateTasks(!checkBoxParticipateTasks);
|
||||
}
|
||||
|
||||
function filterMyTask() {
|
||||
if (!checkBoxMyTasks) {
|
||||
dispatch(filterCreatedByMe(Number(localStorage.getItem('id'))))
|
||||
dispatch(filterCreatedByMe(Number(localStorage.getItem("id"))));
|
||||
} else {
|
||||
dispatch(setProjectBoardFetch(projectId.id))
|
||||
setCheckBoxParticipateTasks(false)
|
||||
setCheckBoxMyTasks(false)
|
||||
dispatch(setProjectBoardFetch(projectId.id));
|
||||
setCheckBoxParticipateTasks(false);
|
||||
setCheckBoxMyTasks(false);
|
||||
}
|
||||
setCheckBoxMyTasks(!checkBoxMyTasks)
|
||||
setCheckBoxMyTasks(!checkBoxMyTasks);
|
||||
}
|
||||
|
||||
return (
|
||||
@ -303,58 +306,85 @@ export const ProjectTracker = () => {
|
||||
<p>добавить колонку</p>
|
||||
</div>
|
||||
<div className="tasks__head__persons">
|
||||
<span className="countPersons">{projectBoard.projectUsers?.length}</span>
|
||||
<span className="countPersons">
|
||||
{projectBoard.projectUsers?.length}
|
||||
</span>
|
||||
<span
|
||||
className="addPerson"
|
||||
onClick={() => {
|
||||
setPersonListOpen(true)
|
||||
setPersonListOpen(true);
|
||||
}}
|
||||
>
|
||||
+
|
||||
</span>
|
||||
<p>добавить участника</p>
|
||||
{personListOpen &&
|
||||
<div className='persons__list'>
|
||||
<img className='persons__list__close' src={close} alt='close' onClick={() => setPersonListOpen(false)} />
|
||||
<div className='persons__list__count'><span>{projectBoard.projectUsers?.length}</span>участник</div>
|
||||
<div className='persons__list__info'>В проекте - <span>“{projectBoard.name}”</span></div>
|
||||
<div className='persons__list__items'>
|
||||
{personListOpen && (
|
||||
<div className="persons__list">
|
||||
<img
|
||||
className="persons__list__close"
|
||||
src={close}
|
||||
alt="close"
|
||||
onClick={() => setPersonListOpen(false)}
|
||||
/>
|
||||
<div className="persons__list__count">
|
||||
<span>{projectBoard.projectUsers?.length}</span>
|
||||
участник
|
||||
</div>
|
||||
<div className="persons__list__info">
|
||||
В проекте - <span>“{projectBoard.name}”</span>
|
||||
</div>
|
||||
<div className="persons__list__items">
|
||||
{projectBoard.projectUsers?.map((person) => {
|
||||
return <div className='persons__list__item' key={person.user_id}>
|
||||
<img className='avatar' src={urlForLocal(person.user.avatar)} alt='avatar' />
|
||||
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)}/>
|
||||
<img
|
||||
className="delete"
|
||||
src={close}
|
||||
alt="delete"
|
||||
onClick={() => deletePerson(person.user_id)}
|
||||
/>
|
||||
</div>
|
||||
})
|
||||
}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className='persons__list__add'
|
||||
<div
|
||||
className="persons__list__add"
|
||||
onClick={() => {
|
||||
dispatch(modalToggle("addWorker"));
|
||||
setModalAdd(true);
|
||||
setPersonListOpen(false)
|
||||
setPersonListOpen(false);
|
||||
}}
|
||||
>
|
||||
<span className='addPerson'>+</span>
|
||||
<span className="addPerson">+</span>
|
||||
<p>Добавить участников</p>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
<div className="tasks__head__checkBox" onClick={filterParticipateTasks}>
|
||||
<div
|
||||
className="tasks__head__checkBox"
|
||||
onClick={filterParticipateTasks}
|
||||
>
|
||||
<span>Участвую</span>
|
||||
<div className="tasks__head__checkBox__box">
|
||||
{checkBoxParticipateTasks &&
|
||||
<img src={accept} alt='accept' />
|
||||
}
|
||||
{checkBoxParticipateTasks && (
|
||||
<img src={accept} alt="accept" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="tasks__head__checkBox" onClick={filterMyTask}>
|
||||
<span>Мои</span>
|
||||
<div className="tasks__head__checkBox__box">
|
||||
{checkBoxMyTasks &&
|
||||
<img src={accept} alt='accept' />
|
||||
}
|
||||
{checkBoxMyTasks && <img src={accept} alt="accept" />}
|
||||
</div>
|
||||
</div>
|
||||
<Link to="/profile/tracker" className="tasks__head__back">
|
||||
@ -364,14 +394,16 @@ export const ProjectTracker = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{Boolean(modalActiveTicket) && <ModalTicket
|
||||
{Boolean(modalActiveTicket) && (
|
||||
<ModalTicket
|
||||
active={modalActiveTicket}
|
||||
setActive={setModalActiveTicket}
|
||||
task={selectedTicket}
|
||||
projectId={projectBoard.id}
|
||||
projectName={projectBoard.name}
|
||||
projectUsers={projectBoard.projectUsers}
|
||||
/>}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="tasks__container">
|
||||
{Boolean(projectBoard?.columns) &&
|
||||
@ -381,7 +413,7 @@ export const ProjectTracker = () => {
|
||||
<div
|
||||
key={column.id}
|
||||
onDragOver={(e) => dragOverHandler(e)}
|
||||
onDragEnter={(e) => dragEnterHandler(column.id)}
|
||||
onDragEnter={() => dragEnterHandler(column.id)}
|
||||
onDrop={(e) => dragDropHandler(e, column.id)}
|
||||
className={`tasks__board ${
|
||||
wrapperHover[column.id] ? "tasks__board__hover" : ""
|
||||
@ -392,7 +424,9 @@ export const ProjectTracker = () => {
|
||||
<div>
|
||||
<span
|
||||
className="add"
|
||||
onClick={() => selectedTabTask(column.id, column.tasks.length)}
|
||||
onClick={() =>
|
||||
selectedTabTask(column.id, column.tasks.length)
|
||||
}
|
||||
>
|
||||
+
|
||||
</span>
|
||||
@ -419,9 +453,9 @@ export const ProjectTracker = () => {
|
||||
[column.id]: false,
|
||||
}));
|
||||
dispatch(modalToggle("editColumn"));
|
||||
dispatch(setColumnName(column.title))
|
||||
dispatch(setColumnId(column.id))
|
||||
dispatch(setColumnPriority(column.priority))
|
||||
dispatch(setColumnName(column.title));
|
||||
dispatch(setColumnId(column.id));
|
||||
dispatch(setColumnPriority(column.priority));
|
||||
setModalAdd(true);
|
||||
}}
|
||||
>
|
||||
@ -445,15 +479,21 @@ export const ProjectTracker = () => {
|
||||
taskHover[task.id] ? "task__hover" : ""
|
||||
}`}
|
||||
draggable={true}
|
||||
onDragStart={(e) => dragStartHandler(e, task, column.id)}
|
||||
onDragStart={(e) =>
|
||||
dragStartHandler(e, task, column.id)
|
||||
}
|
||||
onDragOver={(e) => dragOverTaskHandler(e, task)}
|
||||
onDragLeave={(e) => dragLeaveTaskHandler(e)}
|
||||
onDragEnd={(e) => dragEndTaskHandler()}
|
||||
onDrop={(e) => dragDropTaskHandler(e, task, column)}
|
||||
onDragEnd={() => dragEndTaskHandler()}
|
||||
onDrop={(e) =>
|
||||
dragDropTaskHandler(e, task, column)
|
||||
}
|
||||
onClick={(e) => openTicket(e, task)}
|
||||
>
|
||||
<div className="tasks__board__item__title">
|
||||
<p className='task__board__item__title'>{task.title}</p>
|
||||
<p className="task__board__item__title">
|
||||
{task.title}
|
||||
</p>
|
||||
</div>
|
||||
<p className="tasks__board__item__description">
|
||||
{task.description}
|
||||
|
||||
@ -10,7 +10,7 @@ const initialState = {
|
||||
boardLoader: false,
|
||||
columnName: "",
|
||||
columnId: 0,
|
||||
columnPriority: 0
|
||||
columnPriority: 0,
|
||||
};
|
||||
|
||||
export const setProjectBoardFetch = createAsyncThunk("userInfo", (id) =>
|
||||
@ -51,13 +51,16 @@ export const projectsTrackerSlice = createSlice({
|
||||
moveProjectTask: (state, action) => {
|
||||
state.projectBoard.columns.forEach((column, index) => {
|
||||
if (column.id === action.payload.columnId) {
|
||||
column.tasks.push({...action.payload.startWrapperIndex.task, column_id: column.id});
|
||||
column.tasks.push({
|
||||
...action.payload.startWrapperIndex.task,
|
||||
column_id: column.id,
|
||||
});
|
||||
apiRequest(`/task/update-task`, {
|
||||
method: "PUT",
|
||||
data: {
|
||||
task_id: action.payload.startWrapperIndex.task.id,
|
||||
column_id: column.id,
|
||||
priority: column.tasks.length - 1
|
||||
priority: column.tasks.length - 1,
|
||||
},
|
||||
}).then(() => {});
|
||||
}
|
||||
@ -71,10 +74,15 @@ export const projectsTrackerSlice = createSlice({
|
||||
movePositionProjectTask: (state, action) => {
|
||||
state.projectBoard.columns.forEach((column, index) => {
|
||||
if (column.id === action.payload.startTask.column_id) {
|
||||
state.projectBoard.columns[index].tasks = column.tasks.filter((task) => task.id !== action.payload.startTask.id)
|
||||
state.projectBoard.columns[index].tasks = column.tasks.filter(
|
||||
(task) => task.id !== action.payload.startTask.id
|
||||
);
|
||||
}
|
||||
if (column.id === action.payload.finishTask.column_id) {
|
||||
column.tasks.splice(action.payload.finishIndex, 0, {...action.payload.startTask, column_id: column.id})
|
||||
column.tasks.splice(action.payload.finishIndex, 0, {
|
||||
...action.payload.startTask,
|
||||
column_id: column.id,
|
||||
});
|
||||
apiRequest(`/task/update-task`, {
|
||||
method: "PUT",
|
||||
data: {
|
||||
@ -82,14 +90,14 @@ export const projectsTrackerSlice = createSlice({
|
||||
column_id: column.id,
|
||||
},
|
||||
}).then(() => {});
|
||||
const priorityTasks = []
|
||||
const priorityTasks = [];
|
||||
column.tasks.forEach((task, index) => {
|
||||
const curTask = {
|
||||
task_id: task.id,
|
||||
priority: index
|
||||
}
|
||||
priorityTasks.push(curTask)
|
||||
})
|
||||
priority: index,
|
||||
};
|
||||
priorityTasks.push(curTask);
|
||||
});
|
||||
apiRequest(`/task/set-priority`, {
|
||||
method: "POST",
|
||||
data: {
|
||||
@ -98,17 +106,21 @@ export const projectsTrackerSlice = createSlice({
|
||||
},
|
||||
}).then(() => {});
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
filterCreatedByMe: (state, action) => {
|
||||
state.projectBoard.columns.forEach((column) => {
|
||||
column.tasks = column.tasks.filter((task) => task.user_id === action.payload)
|
||||
})
|
||||
column.tasks = column.tasks.filter(
|
||||
(task) => task.user_id === action.payload
|
||||
);
|
||||
});
|
||||
},
|
||||
filteredParticipateTasks: (state, action) => {
|
||||
state.projectBoard.columns.forEach((column) => {
|
||||
column.tasks = column.tasks.filter((task) => task.taskUsers.some((person) => person.user_id === action.payload))
|
||||
})
|
||||
column.tasks = column.tasks.filter((task) =>
|
||||
task.taskUsers.some((person) => person.user_id === action.payload)
|
||||
);
|
||||
});
|
||||
},
|
||||
setColumnName: (state, action) => {
|
||||
state.columnName = action.payload;
|
||||
@ -117,7 +129,7 @@ export const projectsTrackerSlice = createSlice({
|
||||
state.columnId = action.payload;
|
||||
},
|
||||
setColumnPriority: (state, action) => {
|
||||
state.columnPriority = action.payload
|
||||
state.columnPriority = action.payload;
|
||||
},
|
||||
editProjectName: (state, action) => {
|
||||
state.projects.forEach((project) => {
|
||||
@ -162,7 +174,7 @@ export const {
|
||||
addPersonToProject,
|
||||
filterCreatedByMe,
|
||||
filteredParticipateTasks,
|
||||
movePositionProjectTask
|
||||
movePositionProjectTask,
|
||||
} = projectsTrackerSlice.actions;
|
||||
|
||||
export const getProjects = (state) => state.tracker.projects;
|
||||
@ -172,6 +184,6 @@ export const getValueModalType = (state) => state.tracker.modalType;
|
||||
export const getBoarderLoader = (state) => state.tracker.boardLoader;
|
||||
export const getColumnName = (state) => state.tracker.columnName;
|
||||
export const getColumnId = (state) => state.tracker.columnId;
|
||||
export const getColumnPriority = (state) => state.tracker.columnPriority
|
||||
export const getColumnPriority = (state) => state.tracker.columnPriority;
|
||||
|
||||
export default projectsTrackerSlice.reducer;
|
||||
|
||||
@ -53,12 +53,11 @@ export function scrollToForm() {
|
||||
}
|
||||
|
||||
export function getCorrectRequestDate(date) {
|
||||
const yyyy = String(date.getUTCFullYear())
|
||||
const yyyy = String(date.getUTCFullYear());
|
||||
const mm = String(date.getUTCMonth() + 1).padStart(2, "0");
|
||||
const dd = String(date.getUTCDate()).padStart(2, "0");
|
||||
const hh = String(date.getUTCHours())
|
||||
const min = String(date.getUTCMinutes())
|
||||
const sec = String(date.getUTCSeconds())
|
||||
return `${yyyy}-${mm}-${dd} ${hh}:${min}:${sec}`
|
||||
const hh = String(date.getUTCHours());
|
||||
const min = String(date.getUTCMinutes());
|
||||
const sec = String(date.getUTCSeconds());
|
||||
return `${yyyy}-${mm}-${dd} ${hh}:${min}:${sec}`;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user