Pull of main
This commit is contained in:
MaxOvs19
commit
fc0226ad25
@ -19,6 +19,10 @@
|
||||
img {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
p:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -4,14 +4,13 @@ import { Link } from "react-router-dom";
|
||||
|
||||
import { modalToggle, setProjectBoardFetch } from "@redux/projectsTrackerSlice";
|
||||
|
||||
import { urlForLocal } from "@utils/helper";
|
||||
import { getCorrectRequestDate, urlForLocal } from "@utils/helper";
|
||||
|
||||
import { apiRequest } from "@api/request";
|
||||
|
||||
import { getCorrectDate } from "@components/Calendar/calendarHelper";
|
||||
import BaseButton from "@components/Common/BaseButton/BaseButton";
|
||||
import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
|
||||
import TrackerModal from "@components/Modal/TrackerModal/TrackerModal";
|
||||
import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
|
||||
import TrackerTaskComment from "@components/TrackerTaskComment/TrackerTaskComment";
|
||||
|
||||
import archive from "assets/icons/archive.svg";
|
||||
import arrow from "assets/icons/arrows/arrowStart.png";
|
||||
@ -26,7 +25,7 @@ import plus from "assets/icons/plus.svg";
|
||||
import send from "assets/icons/send.svg";
|
||||
import watch from "assets/icons/watch.svg";
|
||||
|
||||
import "./ModalTicket.scss";
|
||||
import "./modalTicket.scss";
|
||||
|
||||
export const ModalTiсket = ({
|
||||
active,
|
||||
@ -45,13 +44,19 @@ export const ModalTiсket = ({
|
||||
comment: "",
|
||||
});
|
||||
const [comments, setComments] = useState([]);
|
||||
const [commentsEditOpen, setCommentsEditOpen] = useState({});
|
||||
const [commentsEditText, setCommentsEditText] = useState({});
|
||||
const [dropListOpen, setDropListOpen] = useState(false);
|
||||
const [dropListMembersOpen, setDropListMembersOpen] = useState(false);
|
||||
const [executor, setExecutor] = useState(task.executor);
|
||||
const [members, setMembers] = useState(task.taskUsers);
|
||||
const [users, setUsers] = useState([]);
|
||||
const [timerStart, setTimerStart] = useState(false);
|
||||
const [timerInfo, setTimerInfo] = useState({});
|
||||
const [currentTimerCount, setCurrentTimerCount] = useState({
|
||||
hours: 0,
|
||||
minute: 0,
|
||||
seconds: 0,
|
||||
});
|
||||
const [timerId, setTimerId] = useState(null);
|
||||
|
||||
function deleteTask() {
|
||||
apiRequest("/task/update-task", {
|
||||
@ -90,37 +95,78 @@ export const ModalTiсket = ({
|
||||
}).then((res) => {
|
||||
let newComment = res;
|
||||
newComment.created_at = new Date();
|
||||
newComment.subComments = [];
|
||||
setInputsValue((prevValue) => ({ ...prevValue, comment: "" }));
|
||||
setComments((prevValue) => [...prevValue, newComment]);
|
||||
setCommentsEditOpen((prevValue) => ({ ...prevValue, [res.id]: false }));
|
||||
setCommentsEditText((prevValue) => ({
|
||||
...prevValue,
|
||||
[res.id]: res.text,
|
||||
}));
|
||||
});
|
||||
}
|
||||
function deleteComment(commentId) {
|
||||
apiRequest("/comment/update", {
|
||||
method: "PUT",
|
||||
data: {
|
||||
comment_id: commentId,
|
||||
status: 0,
|
||||
},
|
||||
}).then(() => {
|
||||
setComments((prevValue) =>
|
||||
prevValue.filter((item) => item.id !== commentId)
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
function editComment(commentId) {
|
||||
apiRequest("/comment/update", {
|
||||
function commentDelete(comment) {
|
||||
setComments((prevValue) =>
|
||||
prevValue.filter((item) => item.id !== comment.id)
|
||||
);
|
||||
if (comment.subComments.length) {
|
||||
// promiseAll
|
||||
comment.subComments.forEach((subComment) => {
|
||||
apiRequest("/comment/update", {
|
||||
method: "PUT",
|
||||
data: {
|
||||
comment_id: subComment.id,
|
||||
status: 0,
|
||||
},
|
||||
}).then(() => {});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function addSubComment(commentId, subComment) {
|
||||
const addSubComment = comments;
|
||||
addSubComment.forEach((comment) => {
|
||||
if (comment.id === commentId) {
|
||||
comment.subComments.push(subComment);
|
||||
}
|
||||
});
|
||||
setComments(addSubComment);
|
||||
}
|
||||
|
||||
function subCommentDelete(subComment) {
|
||||
const deleteSubComment = comments;
|
||||
deleteSubComment.forEach((comment, index) => {
|
||||
if (comment.id === subComment.parent_id) {
|
||||
deleteSubComment[index].subComments = comment.subComments.filter(
|
||||
(item) => item.id !== subComment.id
|
||||
);
|
||||
}
|
||||
});
|
||||
setComments([...deleteSubComment]);
|
||||
}
|
||||
|
||||
function startTaskTimer() {
|
||||
apiRequest("/timer/create", {
|
||||
method: "POST",
|
||||
data: {
|
||||
entity_type: 2,
|
||||
entity_id: task.id,
|
||||
created_at: getCorrectRequestDate(new Date()),
|
||||
},
|
||||
}).then((res) => {
|
||||
setTimerStart(true);
|
||||
setTimerInfo(res);
|
||||
startTimer();
|
||||
});
|
||||
}
|
||||
|
||||
function stopTaskTimer() {
|
||||
apiRequest("/timer/update", {
|
||||
method: "PUT",
|
||||
data: {
|
||||
comment_id: commentId,
|
||||
text: commentsEditText[commentId],
|
||||
timer_id: timerInfo.id,
|
||||
stopped_at: getCorrectRequestDate(new Date()),
|
||||
},
|
||||
}).then(() => {});
|
||||
}).then(() => {
|
||||
setTimerStart(false);
|
||||
clearInterval(timerId);
|
||||
});
|
||||
}
|
||||
|
||||
function taskExecutor(person) {
|
||||
@ -177,20 +223,77 @@ export const ModalTiсket = ({
|
||||
apiRequest(
|
||||
`/comment/get-by-entity?entity_type=2&entity_id=${task.id}`
|
||||
).then((res) => {
|
||||
setComments(res);
|
||||
res.forEach((item) => {
|
||||
setCommentsEditOpen((prevValue) => ({
|
||||
...prevValue,
|
||||
[item.id]: false,
|
||||
}));
|
||||
setCommentsEditText((prevValue) => ({
|
||||
...prevValue,
|
||||
[item.id]: item.text,
|
||||
}));
|
||||
});
|
||||
const comments = res.reduce((acc, cur) => {
|
||||
if (!cur.parent_id) {
|
||||
acc.push({ ...cur, subComments: [] });
|
||||
} else {
|
||||
acc.forEach((item) => {
|
||||
if (item.id === cur.parent_id) item.subComments.push(cur);
|
||||
});
|
||||
}
|
||||
return acc;
|
||||
}, []);
|
||||
setComments(comments);
|
||||
});
|
||||
apiRequest(`/timer/get-by-entity?entity_type=2&entity_id=${task.id}`).then(
|
||||
(res) => {
|
||||
let timerSeconds = 0;
|
||||
res.length &&
|
||||
res.forEach((time) => {
|
||||
timerSeconds += time.deltaSeconds;
|
||||
setCurrentTimerCount({
|
||||
hours: Math.floor(timerSeconds / 60 / 60),
|
||||
minute: Math.floor((timerSeconds / 60) % 60),
|
||||
seconds: timerSeconds % 60,
|
||||
});
|
||||
updateTimerHours = Math.floor(timerSeconds / 60 / 60);
|
||||
updateTimerMinute = Math.floor((timerSeconds / 60) % 60);
|
||||
updateTimerSec = timerSeconds % 60;
|
||||
if (!time.stopped_at) {
|
||||
setTimerStart(true);
|
||||
startTimer();
|
||||
setTimerInfo(time);
|
||||
}
|
||||
});
|
||||
}
|
||||
);
|
||||
}, []);
|
||||
|
||||
function startTimer() {
|
||||
setTimerId(
|
||||
setInterval(() => {
|
||||
run();
|
||||
}, 1000)
|
||||
);
|
||||
}
|
||||
|
||||
let updateTimerSec = currentTimerCount.seconds,
|
||||
updateTimerMinute = currentTimerCount.minute,
|
||||
updateTimerHours = currentTimerCount.hours;
|
||||
|
||||
function run() {
|
||||
updateTimerSec++;
|
||||
if (updateTimerSec > 60) {
|
||||
updateTimerMinute++;
|
||||
updateTimerSec = 0;
|
||||
}
|
||||
if (updateTimerMinute === 60) {
|
||||
updateTimerMinute = 0;
|
||||
updateTimerHours++;
|
||||
}
|
||||
|
||||
return setCurrentTimerCount({
|
||||
hours: updateTimerHours,
|
||||
minute: updateTimerMinute,
|
||||
seconds: updateTimerSec,
|
||||
});
|
||||
}
|
||||
|
||||
function correctTimerTime(time) {
|
||||
if (time < 10) return `0${time}`;
|
||||
if (time > 10) return time;
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
let ids = members.map((user) => user.user_id);
|
||||
setUsers(
|
||||
@ -202,23 +305,26 @@ export const ModalTiсket = ({
|
||||
}, [members]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<ModalLayout
|
||||
active={active}
|
||||
setActive={setActive}
|
||||
styles={"tracker-ticket"}
|
||||
<div
|
||||
className={active ? "modal-tiket active" : "modal-tiket"}
|
||||
onClick={() => setActive(false)}
|
||||
>
|
||||
<div
|
||||
className="modal-tiket__content"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="content">
|
||||
<h3 className="title-project">
|
||||
<Link to={`/tracker/task/${task.id}`} className="title-project__full">
|
||||
<img src={fullScreen}></img>
|
||||
</Link>
|
||||
|
||||
<div className="title-project">
|
||||
<img src={category} className="title-project__category"></img>
|
||||
Проект: {projectName}
|
||||
<Link
|
||||
to={`/tracker/task/${task.id}`}
|
||||
className="title-project__full"
|
||||
>
|
||||
<img src={fullScreen}></img>
|
||||
</Link>
|
||||
</h3>
|
||||
<h2>
|
||||
Проект:
|
||||
<h3>{projectName}</h3>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="content__task">
|
||||
<span>Задача</span>
|
||||
@ -237,7 +343,7 @@ export const ModalTiсket = ({
|
||||
)}
|
||||
<div className="content__description">
|
||||
{editOpen ? (
|
||||
<input
|
||||
<textarea
|
||||
value={inputsValue.description}
|
||||
onChange={(e) => {
|
||||
setInputsValue((prevValue) => ({
|
||||
@ -258,14 +364,14 @@ export const ModalTiсket = ({
|
||||
dispatch(modalToggle("addSubtask"));
|
||||
setAddSubtask(true);
|
||||
}}
|
||||
styles={"tasks__button"}
|
||||
styles={"button-green-add"}
|
||||
>
|
||||
<img src={plus}></img>
|
||||
Добавить под задачу
|
||||
</BaseButton>
|
||||
</p>
|
||||
<p className="file">
|
||||
<BaseButton styles={"file__button"}>
|
||||
<BaseButton styles={"button-add-file"}>
|
||||
<img src={file}></img>
|
||||
Загрузить файл
|
||||
</BaseButton>
|
||||
@ -289,50 +395,14 @@ export const ModalTiсket = ({
|
||||
<div className="comments__list">
|
||||
{comments.map((comment) => {
|
||||
return (
|
||||
<div className="comments__list__item" key={comment.id}>
|
||||
<div className="comments__list__item__info">
|
||||
<span>{getCorrectDate(comment.created_at)}</span>
|
||||
<div
|
||||
className={
|
||||
commentsEditOpen[comment.id]
|
||||
? "edit edit__open"
|
||||
: "edit"
|
||||
}
|
||||
>
|
||||
<img
|
||||
src={edit}
|
||||
alt="edit"
|
||||
onClick={() => {
|
||||
if (commentsEditOpen[comment.id]) {
|
||||
editComment(comment.id);
|
||||
}
|
||||
setCommentsEditOpen((prevValue) => ({
|
||||
...prevValue,
|
||||
[comment.id]: !prevValue[comment.id],
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<img
|
||||
src={del}
|
||||
alt="delete"
|
||||
onClick={() => deleteComment(comment.id)}
|
||||
/>
|
||||
</div>
|
||||
{commentsEditOpen[comment.id] ? (
|
||||
<input
|
||||
value={commentsEditText[comment.id]}
|
||||
onChange={(e) => {
|
||||
setCommentsEditText((prevValue) => ({
|
||||
...prevValue,
|
||||
[comment.id]: e.target.value,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<p>{commentsEditText[comment.id]}</p>
|
||||
)}
|
||||
</div>
|
||||
<TrackerTaskComment
|
||||
key={comment.id}
|
||||
taskId={task.id}
|
||||
comment={comment}
|
||||
commentDelete={commentDelete}
|
||||
addSubComment={addSubComment}
|
||||
subCommentDelete={subCommentDelete}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
@ -356,7 +426,12 @@ export const ModalTiсket = ({
|
||||
</div>
|
||||
) : (
|
||||
<div className="add-worker moreItems ">
|
||||
<button onClick={() => setDropListOpen(true)}>+</button>
|
||||
<BaseButton
|
||||
onClick={() => setDropListOpen(true)}
|
||||
styles={"button-add-worker"}
|
||||
>
|
||||
+
|
||||
</BaseButton>
|
||||
<span>Добавить исполнителя</span>
|
||||
{dropListOpen && (
|
||||
<div className="dropdownList">
|
||||
@ -404,7 +479,12 @@ export const ModalTiсket = ({
|
||||
)}
|
||||
|
||||
<div className="add-worker moreItems">
|
||||
<button onClick={() => setDropListMembersOpen(true)}>+</button>
|
||||
<BaseButton
|
||||
onClick={() => setDropListMembersOpen(true)}
|
||||
styles={"button-add-worker"}
|
||||
>
|
||||
+
|
||||
</BaseButton>
|
||||
<span>Добавить участников</span>
|
||||
{dropListMembersOpen && (
|
||||
<div className="dropdownList">
|
||||
@ -438,12 +518,29 @@ export const ModalTiсket = ({
|
||||
<div className="time">
|
||||
<img src={watch}></img>
|
||||
<span>Длительность : </span>
|
||||
<p>{"0:00:00"}</p>
|
||||
<p>
|
||||
{correctTimerTime(currentTimerCount.hours)}:
|
||||
{correctTimerTime(currentTimerCount.minute)}:
|
||||
{correctTimerTime(currentTimerCount.seconds)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button className="start">
|
||||
Начать делать <img src={arrow}></img>
|
||||
</button>
|
||||
{timerStart ? (
|
||||
<button className="stop" onClick={() => stopTaskTimer()}>
|
||||
Остановить
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
className={
|
||||
task.executor_id === Number(localStorage.getItem("id"))
|
||||
? "start"
|
||||
: "start disable"
|
||||
}
|
||||
onClick={() => startTaskTimer()}
|
||||
>
|
||||
Начать делать <img src={arrow}></img>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="workers_box-bottom">
|
||||
@ -475,14 +572,14 @@ export const ModalTiсket = ({
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ModalLayout>
|
||||
</div>
|
||||
|
||||
<TrackerModal
|
||||
active={addSubtask}
|
||||
setActive={setAddSubtask}
|
||||
defautlInput={task.column_id}
|
||||
></TrackerModal>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -1,594 +0,0 @@
|
||||
.tracker-ticket {
|
||||
background: #ffffff;
|
||||
padding: 0;
|
||||
border-radius: 8px;
|
||||
align-items: initial;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 600px;
|
||||
margin: 26px 0 0 21px;
|
||||
|
||||
.title-project {
|
||||
color: #1458dd;
|
||||
font-family: "LabGrotesque", sans-serif;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 700;
|
||||
font-size: 22px;
|
||||
line-height: 32px;
|
||||
|
||||
&__category {
|
||||
margin-right: 17px;
|
||||
}
|
||||
|
||||
&__full {
|
||||
margin-left: 35%;
|
||||
}
|
||||
}
|
||||
|
||||
&__task {
|
||||
margin-top: -5px;
|
||||
padding: 18px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
input {
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
max-width: 340px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
button {
|
||||
img {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-family: "Inter", sans-serif;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: #1a1919;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.comments__list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 420px;
|
||||
overflow: auto;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #cbd9f9;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #c5c0c6;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
&__item {
|
||||
padding: 10px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 438px;
|
||||
border-radius: 44px;
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
&__subComment {
|
||||
&:before {
|
||||
content: '';
|
||||
background: #E4E4E6;
|
||||
height: 1px;
|
||||
width: 7px;
|
||||
position: absolute;
|
||||
top: 36%;
|
||||
left: 2.5%;
|
||||
}
|
||||
}
|
||||
|
||||
&__main {
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background-image: url("../../../images/mainTaskCommentImg.png");
|
||||
width: 10px;
|
||||
height: 8px;
|
||||
top: 50px;
|
||||
left: 25px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background: #E4E4E6;
|
||||
width: 1px;
|
||||
height: calc(100% - 120px);
|
||||
left: 29px;
|
||||
top: 65px;
|
||||
}
|
||||
}
|
||||
|
||||
&__fio {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
p {
|
||||
font-size: 12px;
|
||||
color: #000000;
|
||||
line-height: 32px;
|
||||
max-width: 150px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
&__date {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 5px;
|
||||
|
||||
img {
|
||||
cursor: pointer;
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&__text {
|
||||
margin-left: 34px;
|
||||
}
|
||||
|
||||
&__info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.edit {
|
||||
width: 25px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.edit__open {
|
||||
background: green;
|
||||
}
|
||||
}
|
||||
|
||||
&__answer {
|
||||
margin-left: 34px;
|
||||
text-decoration-line: underline;
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
line-height: 32px;
|
||||
cursor: pointer;
|
||||
|
||||
&__new {
|
||||
margin-left: 34px;
|
||||
font-size: 14px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid gainsboro;
|
||||
padding: 3px 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 5px;
|
||||
|
||||
img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 90%;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__description {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 10px;
|
||||
|
||||
p {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 140%;
|
||||
color: #252c32;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.image-task {
|
||||
margin: 10px 0 20px 0;
|
||||
max-width: 330px;
|
||||
}
|
||||
}
|
||||
|
||||
&__communication {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: 29px 0 0 -5px;
|
||||
|
||||
.tasks {
|
||||
justify-content: space-evenly;
|
||||
|
||||
&__button {
|
||||
width: 180px;
|
||||
height: 40px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.tasks,
|
||||
.file {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.file {
|
||||
justify-content: space-between;
|
||||
margin-left: 20px;
|
||||
|
||||
&__button {
|
||||
background: white;
|
||||
width: 166px;
|
||||
height: 40px;
|
||||
border: 0.5px solid #1458dd;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #1458dd;
|
||||
|
||||
img {
|
||||
margin-right: 9px;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
margin: 0 3px 0 11px;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
line-height: 15px;
|
||||
color: #6e7c87;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__input {
|
||||
margin: 20px 0 20px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 438px;
|
||||
height: 40px;
|
||||
background: #f1f1f1;
|
||||
border-radius: 44px;
|
||||
|
||||
input {
|
||||
width: 80%;
|
||||
background: inherit;
|
||||
border: none;
|
||||
outline: none;
|
||||
padding-left: 30px;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 32px;
|
||||
border-radius: 44px;
|
||||
}
|
||||
|
||||
img {
|
||||
cursor: pointer;
|
||||
margin-right: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.members {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 14px;
|
||||
|
||||
&__list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.workers {
|
||||
position: relative;
|
||||
border-left: 1px solid #f1f1f1;
|
||||
|
||||
.exit {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 35px;
|
||||
right: 40px;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 2px;
|
||||
background: #263238;
|
||||
}
|
||||
|
||||
&:before {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
&:after {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
font-family: "Inter", sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 11px;
|
||||
color: #807777;
|
||||
}
|
||||
|
||||
.nameProject {
|
||||
max-width: 200px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.add-worker {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
span {
|
||||
color: #000000;
|
||||
font-size: 12px;
|
||||
line-height: 32px;
|
||||
margin-left: 17px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
background: #8bcc60;
|
||||
border-radius: 44px;
|
||||
width: 33px;
|
||||
height: 33px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
.start {
|
||||
font-size: 12px;
|
||||
margin-top: 25px;
|
||||
width: 151px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
color: white;
|
||||
background: #1458dd;
|
||||
border-radius: 44px;
|
||||
|
||||
img {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.disable {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.stop {
|
||||
font-size: 12px;
|
||||
margin-top: 25px;
|
||||
width: 151px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
color: white;
|
||||
background: red;
|
||||
border-radius: 44px;
|
||||
}
|
||||
|
||||
.time {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 12px;
|
||||
margin-top: 20px;
|
||||
width: 160px;
|
||||
|
||||
p {
|
||||
color: #000000;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__creator {
|
||||
font-size: 14px;
|
||||
line-height: 32px;
|
||||
font-weight: 500;
|
||||
color: #2d4a17;
|
||||
max-width: 200px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
span {
|
||||
margin-left: 5px;
|
||||
font-size: 14px;
|
||||
line-height: 32px;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.worker {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
p {
|
||||
max-width: 170px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 25px;
|
||||
max-height: 25px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.task__info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 5px;
|
||||
|
||||
.delete {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.executor {
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
align-items: center;
|
||||
|
||||
p {
|
||||
max-width: 170px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
img {
|
||||
margin-left: 5px;
|
||||
max-width: 25px;
|
||||
max-height: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdownList {
|
||||
position: absolute;
|
||||
background: white;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
border: 1px solid gray;
|
||||
width: 260px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 8px;
|
||||
|
||||
.noUsers {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__close {
|
||||
cursor: pointer;
|
||||
margin-left: auto;
|
||||
width: 12px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
&__person {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
max-width: 30px;
|
||||
max-height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&_box {
|
||||
padding: 25px 85px 40px 40px;
|
||||
border-bottom: 1px solid #f1f1f1;
|
||||
|
||||
&-middle {
|
||||
padding: 0px 40px 25px 40px;
|
||||
border-bottom: 1px solid #f1f1f1;
|
||||
}
|
||||
|
||||
&-bottom {
|
||||
padding: 40px 110px 75px 56px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 38px;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
padding-left: 10px;
|
||||
|
||||
p {
|
||||
margin: 0 0 0 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.edit {
|
||||
background: #52b709;
|
||||
border-radius: 50px;
|
||||
|
||||
p {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.subtask {
|
||||
h4 {
|
||||
width: 90%;
|
||||
p {
|
||||
color: #1458dd;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -17,32 +17,54 @@
|
||||
|
||||
.modal-tiket__content {
|
||||
background: #ffffff;
|
||||
//border: 1px solid #dde2e4;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 600px;
|
||||
margin: 26px 0 0 21px;
|
||||
|
||||
.title-project {
|
||||
color: #1458dd;
|
||||
font-family: "LabGrotesque", sans-serif;
|
||||
max-width: 85%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 700;
|
||||
font-size: 22px;
|
||||
line-height: 32px;
|
||||
flex-direction: row;
|
||||
|
||||
&__category {
|
||||
margin-right: 17px;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3 {
|
||||
font-weight: 700;
|
||||
font-size: 22px;
|
||||
line-height: 32px;
|
||||
color: #1458dd;
|
||||
margin: 0;
|
||||
font-family: "LabGrotesque", sans-serif;
|
||||
}
|
||||
|
||||
h2 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
|
||||
h3 {
|
||||
margin-left: 5px;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
|
||||
&__full {
|
||||
margin-left: 35%;
|
||||
position: absolute;
|
||||
position: absolute;
|
||||
right: 28px;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -79,7 +101,7 @@
|
||||
.comments__list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 420px;
|
||||
max-height: 300px;
|
||||
overflow: auto;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
@ -109,8 +131,8 @@
|
||||
|
||||
&__subComment {
|
||||
&:before {
|
||||
content: '';
|
||||
background: #E4E4E6;
|
||||
content: "";
|
||||
background: #e4e4e6;
|
||||
height: 1px;
|
||||
width: 7px;
|
||||
position: absolute;
|
||||
@ -121,9 +143,9 @@
|
||||
|
||||
&__main {
|
||||
&:after {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
background-image: url("../../../assets/images/mainTaskCommentImg.png");
|
||||
background-image: url("assets/images/mainTaskCommentImg.png");
|
||||
width: 10px;
|
||||
height: 8px;
|
||||
top: 50px;
|
||||
@ -131,9 +153,9 @@
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
background: #E4E4E6;
|
||||
background: #e4e4e6;
|
||||
width: 1px;
|
||||
height: calc(100% - 120px);
|
||||
left: 29px;
|
||||
@ -236,6 +258,13 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 10px;
|
||||
|
||||
textarea {
|
||||
min-height: 120px;
|
||||
max-height: 450px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
@ -258,16 +287,12 @@
|
||||
.tasks {
|
||||
justify-content: space-evenly;
|
||||
|
||||
button {
|
||||
.button-green-add {
|
||||
width: 180px;
|
||||
height: 40px;
|
||||
background: #52b709;
|
||||
border-radius: 44px;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 32px;
|
||||
border: none;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
@ -281,7 +306,7 @@
|
||||
justify-content: space-between;
|
||||
margin-left: 20px;
|
||||
|
||||
button {
|
||||
.button-add-file {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -336,6 +361,10 @@
|
||||
cursor: pointer;
|
||||
margin-right: 18px;
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
border: 1px solid #0000004d;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -396,6 +425,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
margin-bottom: 5px;
|
||||
|
||||
span {
|
||||
color: #000000;
|
||||
@ -406,17 +436,12 @@
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
background: #8bcc60;
|
||||
border-radius: 44px;
|
||||
.button-add-worker {
|
||||
width: 33px;
|
||||
height: 33px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
@ -605,6 +630,10 @@
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
p:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -2,24 +2,6 @@ import React, { useEffect, useState } from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { Link, useNavigate, 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/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,
|
||||
@ -27,13 +9,36 @@ import {
|
||||
modalToggle,
|
||||
setProjectBoardFetch,
|
||||
setToggleTab,
|
||||
} from "../../../../redux/projectsTrackerSlice";
|
||||
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";
|
||||
} from "@redux/projectsTrackerSlice";
|
||||
|
||||
import { getCorrectRequestDate, urlForLocal } from "@utils/helper";
|
||||
|
||||
import { apiRequest } from "@api/request";
|
||||
|
||||
import BaseButton from "@components/Common/BaseButton/BaseButton";
|
||||
import { Footer } from "@components/Common/Footer/Footer";
|
||||
import { Loader } from "@components/Common/Loader/Loader";
|
||||
import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
|
||||
import { Navigation } from "@components/Navigation/Navigation";
|
||||
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
|
||||
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
|
||||
import TrackerTaskComment from "@components/TrackerTaskComment/TrackerTaskComment";
|
||||
|
||||
import archive from "assets/icons/archive.svg";
|
||||
import archive2 from "assets/icons/archive.svg";
|
||||
import arrow from "assets/icons/arrows/arrowCalendar.png";
|
||||
import arrow2 from "assets/icons/arrows/arrowStart.png";
|
||||
import close from "assets/icons/close.png";
|
||||
import del from "assets/icons/delete.svg";
|
||||
import edit from "assets/icons/edit.svg";
|
||||
import file from "assets/icons/fileModal.svg";
|
||||
import link from "assets/icons/link.svg";
|
||||
import plus from "assets/icons/plus.svg";
|
||||
import send from "assets/icons/send.svg";
|
||||
import project from "assets/icons/trackerProject.svg";
|
||||
import tasks from "assets/icons/trackerTasks.svg";
|
||||
import watch from "assets/icons/watch.svg";
|
||||
|
||||
import "./ticketFullScreen.scss";
|
||||
|
||||
export const TicketFullScreen = () => {
|
||||
@ -262,8 +267,6 @@ export const TicketFullScreen = () => {
|
||||
></TrackerModal>
|
||||
|
||||
<div className="tasks__head__persons">
|
||||
{/*<img src={avatarTest} alt="avatar" />*/}
|
||||
{/*<img src={avatarTest} alt="avatar" />*/}
|
||||
<span className="countPersons">
|
||||
{projectBoard.projectUsers?.length}
|
||||
</span>
|
||||
@ -368,25 +371,25 @@ export const TicketFullScreen = () => {
|
||||
) : (
|
||||
<p>{inputsValue.description}</p>
|
||||
)}
|
||||
{/*<img src={task} className="image-task"></img>*/}
|
||||
</div>
|
||||
<div className="content__communication">
|
||||
<p className="tasks">
|
||||
<button
|
||||
<BaseButton
|
||||
onClick={() => {
|
||||
dispatch(modalToggle("addSubtask"));
|
||||
setModalAddWorker(true);
|
||||
}}
|
||||
styles={"button-green-add"}
|
||||
>
|
||||
<img src={plus} alt="plus"></img>
|
||||
<img src={plus}></img>
|
||||
Добавить под задачу
|
||||
</button>
|
||||
</BaseButton>
|
||||
</p>
|
||||
<p className="file">
|
||||
<button>
|
||||
<img src={file} alt="file"></img>
|
||||
<BaseButton styles={"button-add-file"}>
|
||||
<img src={file}></img>
|
||||
Загрузить файл
|
||||
</button>
|
||||
</BaseButton>
|
||||
<span>{0}</span>
|
||||
Файлов
|
||||
</p>
|
||||
@ -438,25 +441,28 @@ export const TicketFullScreen = () => {
|
||||
</div>
|
||||
|
||||
<div className="add-worker moreItems">
|
||||
<button
|
||||
<BaseButton
|
||||
onClick={() => {
|
||||
dispatch(modalToggle("addWorker"));
|
||||
setModalAddWorker(true);
|
||||
}}
|
||||
styles={"button-add-worker"}
|
||||
>
|
||||
+
|
||||
</button>
|
||||
</BaseButton>
|
||||
<span>Добавить исполнителя</span>
|
||||
</div>
|
||||
<div className="add-worker moreItems">
|
||||
<button
|
||||
<BaseButton
|
||||
onClick={() => {
|
||||
dispatch(modalToggle("addWorker"));
|
||||
setModalAddWorker(true);
|
||||
}}
|
||||
styles={"button-add-worker"}
|
||||
>
|
||||
+
|
||||
</button>
|
||||
</BaseButton>
|
||||
|
||||
<span>Добавить участников</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
409
src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx
Normal file
409
src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx
Normal file
@ -0,0 +1,409 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
|
||||
import {
|
||||
addPersonToProject,
|
||||
editColumnName,
|
||||
editProjectName,
|
||||
getColumnId,
|
||||
getColumnName,
|
||||
getColumnPriority,
|
||||
getProjectBoard,
|
||||
getValueModalType,
|
||||
setColumnName,
|
||||
setColumnPriority,
|
||||
setProject,
|
||||
setProjectBoardFetch,
|
||||
} from "@redux/projectsTrackerSlice";
|
||||
|
||||
import { urlForLocal } from "@utils/helper";
|
||||
|
||||
import { apiRequest } from "@api/request";
|
||||
|
||||
import BaseButton from "@components/Common/BaseButton/BaseButton";
|
||||
import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
|
||||
|
||||
import arrowDown from "assets/icons/arrows/selectArrow.png";
|
||||
|
||||
import "./trackerModal.scss";
|
||||
|
||||
export const TrackerModal = ({
|
||||
active,
|
||||
setActive,
|
||||
selectedTab,
|
||||
defautlInput,
|
||||
titleProject,
|
||||
projectId,
|
||||
priorityTask,
|
||||
}) => {
|
||||
const dispatch = useDispatch();
|
||||
const projectBoard = useSelector(getProjectBoard);
|
||||
const columnName = useSelector(getColumnName);
|
||||
const columnId = useSelector(getColumnId);
|
||||
const columnPriority = useSelector(getColumnPriority);
|
||||
|
||||
const modalType = useSelector(getValueModalType);
|
||||
const [projectName, setProjectName] = useState(defautlInput);
|
||||
const [valueColumn, setValueColumn] = useState("");
|
||||
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);
|
||||
|
||||
function createTab() {
|
||||
if (!valueColumn) {
|
||||
return;
|
||||
}
|
||||
|
||||
apiRequest("/project-column/create-column", {
|
||||
method: "POST",
|
||||
data: {
|
||||
project_id: projectBoard.id,
|
||||
priority: projectBoard.columns.length
|
||||
? projectBoard.columns.at(-1).priority + 1
|
||||
: 1,
|
||||
title: valueColumn,
|
||||
},
|
||||
}).then(() => {
|
||||
dispatch(setProjectBoardFetch(projectBoard.id));
|
||||
});
|
||||
setValueColumn("");
|
||||
setActive(false);
|
||||
}
|
||||
|
||||
function createTiket() {
|
||||
if (!valueTiket || !descriptionTicket) {
|
||||
return;
|
||||
}
|
||||
|
||||
apiRequest("/task/create-task", {
|
||||
method: "POST",
|
||||
data: {
|
||||
project_id: projectBoard.id,
|
||||
title: valueTiket,
|
||||
description: descriptionTicket,
|
||||
status: 1,
|
||||
user_id: localStorage.getItem("id"),
|
||||
column_id: selectedTab,
|
||||
priority: priorityTask,
|
||||
},
|
||||
}).then(() => {
|
||||
dispatch(setProjectBoardFetch(projectBoard.id));
|
||||
});
|
||||
|
||||
setActive(false);
|
||||
setValueTiket("");
|
||||
setDescriptionTicket("");
|
||||
}
|
||||
|
||||
function editProject() {
|
||||
apiRequest("/project/update", {
|
||||
method: "PUT",
|
||||
data: {
|
||||
project_id: projectId,
|
||||
name: projectName,
|
||||
},
|
||||
}).then(() => {
|
||||
setActive(false);
|
||||
dispatch(editProjectName({ id: projectId, name: projectName }));
|
||||
});
|
||||
}
|
||||
|
||||
function changeColumnParams() {
|
||||
projectBoard.columns.forEach((column) => {
|
||||
if (column.id === columnId && column.priority !== columnPriority) {
|
||||
const priorityColumns = [
|
||||
{
|
||||
column_id: column.id,
|
||||
priority: Number(columnPriority),
|
||||
},
|
||||
];
|
||||
for (let i = column.priority; i < columnPriority; i++) {
|
||||
const currentColumn = {
|
||||
column_id: projectBoard.columns[i].id,
|
||||
priority: i,
|
||||
};
|
||||
priorityColumns.push(currentColumn);
|
||||
}
|
||||
for (let i = column.priority; i > columnPriority; i--) {
|
||||
const currentColumn = {
|
||||
column_id: projectBoard.columns[i - 2].id,
|
||||
priority: i,
|
||||
};
|
||||
priorityColumns.push(currentColumn);
|
||||
}
|
||||
apiRequest("/project-column/set-priority", {
|
||||
method: "POST",
|
||||
data: {
|
||||
project_id: projectBoard.id,
|
||||
data: JSON.stringify(priorityColumns),
|
||||
},
|
||||
}).then(() => {
|
||||
dispatch(setProjectBoardFetch(projectBoard.id));
|
||||
});
|
||||
}
|
||||
});
|
||||
changeColumnTitle();
|
||||
}
|
||||
|
||||
function changeColumnTitle() {
|
||||
apiRequest("/project-column/update-column", {
|
||||
method: "PUT",
|
||||
data: {
|
||||
column_id: columnId,
|
||||
title: columnName,
|
||||
},
|
||||
}).then(() => {
|
||||
setActive(false);
|
||||
dispatch(editColumnName({ id: columnId, title: columnName }));
|
||||
});
|
||||
}
|
||||
|
||||
function createProject() {
|
||||
if (nameProject === "") {
|
||||
return;
|
||||
} else {
|
||||
apiRequest("/project/create", {
|
||||
method: "POST",
|
||||
data: {
|
||||
user_id: localStorage.getItem("id"),
|
||||
name: nameProject,
|
||||
status: 19,
|
||||
},
|
||||
}).then((res) => {
|
||||
const result = { ...res, columns: [] };
|
||||
dispatch(setProject(result));
|
||||
setActive(false);
|
||||
setNameProject("");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function addUserToProject() {
|
||||
apiRequest("/project/add-user", {
|
||||
method: "POST",
|
||||
data: {
|
||||
user_id: selectedWorker.user_id,
|
||||
project_id: projectBoard.id,
|
||||
},
|
||||
}).then((el) => {
|
||||
dispatch(addPersonToProject(el));
|
||||
setActive(false);
|
||||
setSelectedWorker("");
|
||||
setSelectWorkersOpen(false);
|
||||
});
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
modalType === "addWorker"
|
||||
? apiRequest("/project/my-employee").then((el) => {
|
||||
let persons = el.managerEmployees;
|
||||
let ids = projectBoard.projectUsers.map((user) => user.user_id);
|
||||
setWorkers(
|
||||
persons.reduce((acc, cur) => {
|
||||
if (!ids.includes(cur.user_id)) acc.push(cur);
|
||||
return acc;
|
||||
}, [])
|
||||
);
|
||||
})
|
||||
: "";
|
||||
}, [active]);
|
||||
|
||||
return (
|
||||
<ModalLayout
|
||||
active={active}
|
||||
setActive={setActive}
|
||||
// onClick={() => {
|
||||
// setSelectWorkersOpen(false);
|
||||
// }}
|
||||
>
|
||||
{modalType === "addWorker" && (
|
||||
<div>
|
||||
<div className="title-project">
|
||||
<h4>Добавьте участника</h4>
|
||||
{/*<div className="input-container">*/}
|
||||
{/* <input*/}
|
||||
{/* className="name-project"*/}
|
||||
{/* value={emailWorker}*/}
|
||||
{/* onChange={(e) => setEmailWorker(e.target.value)}*/}
|
||||
{/* />*/}
|
||||
{/*</div>*/}
|
||||
<div
|
||||
className={
|
||||
selectWorkersOpen ? "select__worker open" : "select__worker"
|
||||
}
|
||||
onClick={() => setSelectWorkersOpen(!selectWorkersOpen)}
|
||||
>
|
||||
<p>
|
||||
{selectedWorker
|
||||
? selectedWorker.employee.fio
|
||||
: "Выберите пользователя"}
|
||||
</p>
|
||||
<img className="arrow" src={arrowDown} alt="arrow" />
|
||||
{Boolean(selectWorkersOpen) && (
|
||||
<div className="select__worker__dropDown">
|
||||
{Boolean(workers.length) ? (
|
||||
workers.map((worker) => {
|
||||
if (worker === selectedWorker) {
|
||||
return;
|
||||
}
|
||||
return (
|
||||
<div
|
||||
className="worker"
|
||||
key={worker.id}
|
||||
onClick={() => {
|
||||
setSelectedWorker(worker);
|
||||
}}
|
||||
>
|
||||
<p>{worker.employee.fio}</p>
|
||||
<img
|
||||
src={urlForLocal(worker.employee.avatar)}
|
||||
alt="avatar"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<div>Нет пользователей</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<BaseButton styles={"button-add"} onClick={addUserToProject}>
|
||||
Добавить
|
||||
</BaseButton>
|
||||
</div>
|
||||
)}
|
||||
{modalType === "createTiketProject" && (
|
||||
<div>
|
||||
<div className="title-project">
|
||||
<h4>Введите название и описание задачи</h4>
|
||||
<div className="input-container">
|
||||
<input
|
||||
className="name-project"
|
||||
value={valueTiket}
|
||||
onChange={(e) => setValueTiket(e.target.value)}
|
||||
placeholder="Название задачи"
|
||||
/>
|
||||
</div>
|
||||
<div className="input-container">
|
||||
<input
|
||||
className="name-project"
|
||||
value={descriptionTicket}
|
||||
onChange={(e) => setDescriptionTicket(e.target.value)}
|
||||
placeholder="Описание задачи"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<BaseButton styles={"button-add"} onClick={createTiket}>
|
||||
Создать
|
||||
</BaseButton>
|
||||
</div>
|
||||
)}
|
||||
{modalType === "editProject" && (
|
||||
<div>
|
||||
<div className="title-project">
|
||||
<h4>Введите новое название</h4>
|
||||
<div className="input-container">
|
||||
<input
|
||||
className="name-project"
|
||||
value={projectName}
|
||||
onChange={(e) => setProjectName(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<BaseButton styles={"button-add"} onClick={editProject}>
|
||||
Сохранить
|
||||
</BaseButton>
|
||||
</div>
|
||||
)}
|
||||
{modalType === "createProject" && (
|
||||
<div>
|
||||
<div className="title-project">
|
||||
<h4>{titleProject}</h4>
|
||||
<div className="input-container">
|
||||
<input
|
||||
className="name-project"
|
||||
value={nameProject}
|
||||
onChange={(e) => setNameProject(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<BaseButton styles={"button-add"} onClick={createProject}>
|
||||
Создать
|
||||
</BaseButton>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{modalType === "addSubtask" && (
|
||||
<div>
|
||||
<div className="title-project subtask">
|
||||
<h4>
|
||||
Вы добавляете подзадачу{" "}
|
||||
<p>в колонку(id) задачи "{defautlInput}"</p>
|
||||
</h4>
|
||||
<p className="title-project__decs">Введите текст</p>
|
||||
<div>
|
||||
<textarea className="title-project__textarea"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<BaseButton styles={"button-add"} onClick={(e) => e.preventDefault()}>
|
||||
Добавить
|
||||
</BaseButton>
|
||||
</div>
|
||||
)}
|
||||
{modalType === "createColumn" && (
|
||||
<div>
|
||||
<div className="title-project">
|
||||
<h4>Введите название колонки</h4>
|
||||
<div className="input-container">
|
||||
<input
|
||||
className="name-project"
|
||||
value={valueColumn}
|
||||
onChange={(e) => setValueColumn(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<BaseButton styles={"button-add"} onClick={createTab}>
|
||||
Создать
|
||||
</BaseButton>
|
||||
</div>
|
||||
)}
|
||||
{modalType === "editColumn" && (
|
||||
<div>
|
||||
<div className="title-project">
|
||||
<h4>Введите новое название</h4>
|
||||
<div className="input-container">
|
||||
<input
|
||||
className="name-project"
|
||||
value={columnName}
|
||||
onChange={(e) => dispatch(setColumnName(e.target.value))}
|
||||
/>
|
||||
</div>
|
||||
<h4>Приоритет колонки</h4>
|
||||
<div className="input-container">
|
||||
<input
|
||||
className="name-project"
|
||||
placeholder="Приоритет колонки"
|
||||
type="number"
|
||||
step="1"
|
||||
value={columnPriority}
|
||||
onChange={(e) => dispatch(setColumnPriority(e.target.value))}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<BaseButton styles={"button-add"} onClick={changeColumnParams}>
|
||||
Сохранить
|
||||
</BaseButton>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<span className="exit" onClick={() => setActive(false)}></span>
|
||||
</ModalLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default TrackerModal;
|
||||
171
src/components/Modal/Tracker/TrackerModal/trackerModal.scss
Normal file
171
src/components/Modal/Tracker/TrackerModal/trackerModal.scss
Normal file
@ -0,0 +1,171 @@
|
||||
//Удалить при переходе всех модалок в обертку modalLayout
|
||||
.modal-add {
|
||||
z-index: 9;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.11);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transform: scale(0);
|
||||
|
||||
&__content {
|
||||
position: relative;
|
||||
width: 424px;
|
||||
background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
|
||||
border-radius: 24px;
|
||||
|
||||
padding: 60px 60px 30px 60px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.title-project {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
margin: 0 0 15px 0;
|
||||
|
||||
.input-container {
|
||||
width: 287px;
|
||||
height: 35px;
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
margin: 12px 0;
|
||||
|
||||
input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-weight: 500;
|
||||
font-size: 22px;
|
||||
line-height: 26px;
|
||||
color: #263238 !important;
|
||||
}
|
||||
|
||||
&__decs {
|
||||
font-weight: 300;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
margin: 12px 0 16px 0;
|
||||
}
|
||||
|
||||
&__textarea {
|
||||
resize: none;
|
||||
width: 302px;
|
||||
height: 83px;
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
font-size: 15px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.select__worker {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 5px;
|
||||
background: white;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
p {
|
||||
max-width: 150px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
img {
|
||||
transition: all 0.3s ease;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
&__dropDown {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
top: 35px;
|
||||
left: 0;
|
||||
background: white;
|
||||
border-radius: 5px;
|
||||
row-gap: 5px;
|
||||
|
||||
.worker {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.open {
|
||||
.arrow {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.name-project {
|
||||
margin-left: 10px;
|
||||
border: none;
|
||||
outline: none;
|
||||
height: 100%;
|
||||
width: 90%;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.button-add {
|
||||
width: 130px;
|
||||
height: 37px;
|
||||
|
||||
font-weight: 400;
|
||||
font-size: 15px;
|
||||
line-height: 32px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.modal-add.active {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.exit {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 35px;
|
||||
right: 40px;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 2px;
|
||||
background: #263238;
|
||||
}
|
||||
|
||||
&:before {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
&:after {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
@ -1,171 +0,0 @@
|
||||
.modal-add {
|
||||
z-index: 9;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.11);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transform: scale(0);
|
||||
|
||||
&__content {
|
||||
position: relative;
|
||||
width: 424px;
|
||||
background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
|
||||
border-radius: 24px;
|
||||
|
||||
padding: 60px 60px 30px 60px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.title-project {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
.input-container {
|
||||
width: 287px;
|
||||
height: 35px;
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
margin: 12px 0;
|
||||
|
||||
input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-weight: 500;
|
||||
font-size: 22px;
|
||||
line-height: 26px;
|
||||
color: #263238 !important;
|
||||
}
|
||||
|
||||
&__decs {
|
||||
font-weight: 300;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
margin: 12px 0 16px 0;
|
||||
}
|
||||
|
||||
&__textarea {
|
||||
resize: none;
|
||||
width: 302px;
|
||||
height: 83px;
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
font-size: 15px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.select__worker {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 5px;
|
||||
background: white;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
p {
|
||||
max-width: 150px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
img {
|
||||
transition: all 0.3s ease;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
&__dropDown {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
top: 35px;
|
||||
left: 0;
|
||||
background: white;
|
||||
border-radius: 5px;
|
||||
row-gap: 5px;
|
||||
|
||||
.worker {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.open {
|
||||
.arrow {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.name-project {
|
||||
margin-left: 10px;
|
||||
border: none;
|
||||
outline: none;
|
||||
height: 100%;
|
||||
width: 90%;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.button-add {
|
||||
width: 130px;
|
||||
height: 37px;
|
||||
background: #52b709;
|
||||
border-radius: 44px;
|
||||
border: none;
|
||||
font-weight: 400;
|
||||
font-size: 15px;
|
||||
line-height: 32px;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-add.active {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.exit {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 35px;
|
||||
right: 40px;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 2px;
|
||||
background: #263238;
|
||||
}
|
||||
|
||||
&:before {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
&:after {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
@ -7,7 +7,7 @@ import { deleteProject, modalToggle } from "@redux/projectsTrackerSlice";
|
||||
import { apiRequest } from "@api/request";
|
||||
|
||||
import { ModalSelect } from "@components/Modal/ModalSelect/ModalSelect";
|
||||
import TrackerModal from "@components/Modal/TrackerModal/TrackerModal";
|
||||
import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
|
||||
|
||||
import archiveSet from "assets/icons/archive.svg";
|
||||
import del from "assets/icons/delete.svg";
|
||||
|
||||
@ -6,6 +6,12 @@
|
||||
padding: 17px 26px 16px;
|
||||
cursor: pointer;
|
||||
max-width: 440px;
|
||||
transition: 0.4s;
|
||||
|
||||
&:hover {
|
||||
transition: 0.4s;
|
||||
box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.11);
|
||||
}
|
||||
|
||||
@media (max-width: 1068px) {
|
||||
width: 47%;
|
||||
|
||||
@ -1,12 +1,15 @@
|
||||
import React, { useState } from "react";
|
||||
|
||||
import { apiRequest } from "../../api/request";
|
||||
import del from "../../assets/icons/delete.svg";
|
||||
import edit from "../../assets/icons/edit.svg";
|
||||
import accept from "../../assets/images/accept.png";
|
||||
import { urlForLocal } from "../../utils/helper";
|
||||
import { getCorrectDate } from "../Calendar/calendarHelper";
|
||||
import TrackerTaskSubComment from "../TrackerTaskComment/TrackerTaskComment";
|
||||
import { urlForLocal } from "@utils/helper";
|
||||
|
||||
import { apiRequest } from "@api/request";
|
||||
|
||||
import { getCorrectDate } from "@components/Calendar/calendarHelper";
|
||||
import TrackerTaskSubComment from "@components/TrackerTaskComment/TrackerTaskComment";
|
||||
|
||||
import del from "assets/icons/delete.svg";
|
||||
import edit from "assets/icons/edit.svg";
|
||||
import accept from "assets/images/accept.png";
|
||||
|
||||
export const TrackerTaskComment = ({
|
||||
taskId,
|
||||
|
||||
@ -2,25 +2,6 @@ import React, { useEffect, useRef, useState } from "react";
|
||||
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 {
|
||||
activeLoader,
|
||||
deletePersonOnProject,
|
||||
@ -36,8 +17,31 @@ import {
|
||||
setColumnPriority,
|
||||
setProjectBoardFetch,
|
||||
setToggleTab,
|
||||
} from "../../redux/projectsTrackerSlice";
|
||||
import { urlForLocal } from "../../utils/helper";
|
||||
} from "@redux/projectsTrackerSlice";
|
||||
|
||||
import { urlForLocal } from "@utils/helper";
|
||||
|
||||
import { apiRequest } from "@api/request";
|
||||
|
||||
import BaseButton from "@components/Common/BaseButton/BaseButton";
|
||||
import { Footer } from "@components/Common/Footer/Footer";
|
||||
import { Loader } from "@components/Common/Loader/Loader";
|
||||
import ModalTicket from "@components/Modal/Tracker/ModalTicket/ModalTicket";
|
||||
import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
|
||||
import { Navigation } from "@components/Navigation/Navigation";
|
||||
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
|
||||
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
|
||||
|
||||
import archive from "assets/icons/archiveTracker.svg";
|
||||
import arrow from "assets/icons/arrows/arrowCalendar.png";
|
||||
import close from "assets/icons/close.png";
|
||||
import commentsBoard from "assets/icons/commentsBoard.svg";
|
||||
import del from "assets/icons/delete.svg";
|
||||
import edit from "assets/icons/edit.svg";
|
||||
import filesBoard from "assets/icons/filesBoard.svg";
|
||||
import project from "assets/icons/trackerProject.svg";
|
||||
import tasks from "assets/icons/trackerTasks.svg";
|
||||
import accept from "assets/images/accept.png";
|
||||
|
||||
export const ProjectTracker = () => {
|
||||
const dispatch = useDispatch();
|
||||
@ -295,14 +299,23 @@ export const ProjectTracker = () => {
|
||||
<h4>Проект : {projectBoard.name}</h4>
|
||||
|
||||
<div className="tasks__head__add">
|
||||
<span
|
||||
<BaseButton
|
||||
onClick={() => {
|
||||
dispatch(modalToggle("createColumn"));
|
||||
setModalAdd(true);
|
||||
}}
|
||||
styles={"button-add-column"}
|
||||
>
|
||||
+
|
||||
</BaseButton>
|
||||
{/* <span
|
||||
onClick={() => {
|
||||
dispatch(modalToggle("createColumn"));
|
||||
setModalAdd(true);
|
||||
}}
|
||||
>
|
||||
+
|
||||
</span>
|
||||
</span> */}
|
||||
<p>добавить колонку</p>
|
||||
</div>
|
||||
<div className="tasks__head__persons">
|
||||
|
||||
@ -14,9 +14,10 @@ import { urlForLocal } from "@utils/helper";
|
||||
import { apiRequest } from "@api/request";
|
||||
|
||||
import { getCorrectDate } from "@components/Calendar/calendarHelper";
|
||||
import BaseButton from "@components/Common/BaseButton/BaseButton";
|
||||
import { Footer } from "@components/Common/Footer/Footer";
|
||||
import { Loader } from "@components/Common/Loader/Loader";
|
||||
import TrackerModal from "@components/Modal/TrackerModal/TrackerModal";
|
||||
import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
|
||||
import { Navigation } from "@components/Navigation/Navigation";
|
||||
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
|
||||
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
|
||||
@ -190,15 +191,16 @@ export const Tracker = () => {
|
||||
<img src={noProjects} alt="noProjectImg" />
|
||||
<p>Создайте свой первый проект</p>
|
||||
</div>
|
||||
<button
|
||||
className="createProjectBtn"
|
||||
|
||||
<BaseButton
|
||||
styles={"createProjectBtn"}
|
||||
onClick={() => {
|
||||
dispatch(modalToggle("createProject"));
|
||||
setModalCreateProject(true);
|
||||
}}
|
||||
>
|
||||
<span>+</span>Создать проект
|
||||
</button>
|
||||
</BaseButton>
|
||||
</div>
|
||||
<p className="no-projects__info">
|
||||
Ставьте задачи, следите за прогрессом, ведите учёт рабочего
|
||||
@ -208,15 +210,15 @@ export const Tracker = () => {
|
||||
)}
|
||||
{Boolean(projects.length) && !loader && (
|
||||
<div className="create-newProject">
|
||||
<button
|
||||
className="createProjectBtn"
|
||||
<BaseButton
|
||||
styles="createProjectBtn"
|
||||
onClick={() => {
|
||||
dispatch(modalToggle("createProject"));
|
||||
setModalCreateProject(true);
|
||||
}}
|
||||
>
|
||||
<span>+</span>Создать проект
|
||||
</button>
|
||||
</BaseButton>
|
||||
<p>
|
||||
Ставьте задачи, следите за прогрессом, ведите учёт рабочего
|
||||
времени
|
||||
|
||||
@ -142,8 +142,6 @@
|
||||
margin-left: 17px;
|
||||
}
|
||||
}
|
||||
button {
|
||||
}
|
||||
}
|
||||
|
||||
&__info {
|
||||
@ -155,16 +153,11 @@
|
||||
}
|
||||
|
||||
.createProjectBtn {
|
||||
background: #52b709;
|
||||
border-radius: 44px;
|
||||
max-width: 188px;
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
border: none;
|
||||
font-weight: 400;
|
||||
font-size: 15px;
|
||||
line-height: 32px;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -228,17 +221,17 @@
|
||||
font-size: 22px;
|
||||
line-height: 32px;
|
||||
margin-bottom: 0;
|
||||
max-width: 30%;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
&__add {
|
||||
display: flex;
|
||||
span {
|
||||
margin: 0 15px 0 10px;
|
||||
|
||||
.button-add-column {
|
||||
width: 33px;
|
||||
height: 33px;
|
||||
background: #52b709;
|
||||
border-radius: 44px;
|
||||
color: whitesmoke;
|
||||
cursor: pointer;
|
||||
font-size: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -315,7 +308,7 @@
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: linear-gradient(180deg, #FFFFFF 0%, #EBEBEB 100%);
|
||||
background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
|
||||
border-radius: 40px;
|
||||
padding: 33px 24px 44px 34px;
|
||||
width: 425px;
|
||||
@ -323,15 +316,16 @@
|
||||
|
||||
&__close {
|
||||
cursor: pointer;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 15px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
&__count {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
color: #1458DD;
|
||||
color: #1458dd;
|
||||
font-size: 22px;
|
||||
margin-top: 10px;
|
||||
span {
|
||||
@ -355,7 +349,7 @@
|
||||
span {
|
||||
width: auto;
|
||||
height: auto;
|
||||
color: #1458DD;
|
||||
color: #1458dd;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
line-height: 22px;
|
||||
@ -397,8 +391,8 @@
|
||||
|
||||
.delete {
|
||||
cursor: pointer;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -407,7 +401,7 @@
|
||||
cursor: pointer;
|
||||
|
||||
span {
|
||||
background: #8BCC60;
|
||||
background: #8bcc60;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
@ -424,6 +418,7 @@
|
||||
}
|
||||
|
||||
&__checkBox {
|
||||
margin: 0 15px 0 0;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -771,6 +766,10 @@
|
||||
max-width: 450px;
|
||||
width: 100%;
|
||||
|
||||
&:focus-within {
|
||||
border: 1px solid #0000004d;
|
||||
}
|
||||
|
||||
@media (max-width: 690px) {
|
||||
max-width: 350px;
|
||||
}
|
||||
@ -834,8 +833,15 @@
|
||||
border-radius: 12px;
|
||||
padding: 12px 42px 7px 32px;
|
||||
justify-content: space-between;
|
||||
transition: 0.4s;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
transform: scale(0.99);
|
||||
box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.11);
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
&__info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -968,9 +974,12 @@
|
||||
background: #f1f1f1;
|
||||
border-radius: 12px;
|
||||
padding: 12px 42px 7px 32px;
|
||||
transition: 0.4s;
|
||||
|
||||
&:hover {
|
||||
background: var(--ds-background-neutral-subtle-hovered, #f4f5f7);
|
||||
transform: scale(0.99);
|
||||
box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.11);
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
p {
|
||||
@ -1047,6 +1056,10 @@
|
||||
max-width: 300px;
|
||||
width: 100%;
|
||||
|
||||
&:focus-within {
|
||||
border: 1px solid #0000004d;
|
||||
}
|
||||
|
||||
@media (max-width: 590px) {
|
||||
max-width: 230px;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user