Moving components and creating jsconfig
This commit is contained in:
MaxOvs19
98
src/components/Modal/ModalAspirant/ModalAspirant.jsx
Normal file
98
src/components/Modal/ModalAspirant/ModalAspirant.jsx
Normal file
@ -0,0 +1,98 @@
|
||||
import React, { useState } from "react";
|
||||
|
||||
import { Link } from "react-router-dom";
|
||||
import ModalLayout from "../../Common/ModalLayout/ModalLayout";
|
||||
import BaseButton from "../../Common/BaseButton/BaseButton";
|
||||
|
||||
import avatar from "../../../assets/images/mock/mokPerson.png";
|
||||
import logoTg from "../../../assets/icons/tgLogo.svg";
|
||||
import arrow from "../../../assets/icons/arrows/left-arrow.png";
|
||||
import interview from "../../../assets/images/logo/interviewLogo.svg";
|
||||
|
||||
import "./modalAspirant.scss";
|
||||
|
||||
export const ModalAspirant = ({ active, setActive, level }) => {
|
||||
const [date, setDate] = useState("");
|
||||
const [time, setTime] = useState("");
|
||||
const [modalSend, setModalSend] = useState(false);
|
||||
|
||||
const send = () => {
|
||||
if (date != "" && time != "") {
|
||||
setModalSend(true);
|
||||
|
||||
setTimeout(() => {
|
||||
setModalSend(false);
|
||||
setActive(false);
|
||||
}, 3200);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<ModalLayout active={active} setActive={setActive} styles={"aspirant"}>
|
||||
<div className="aspirant-decs">
|
||||
<h1>Выбранный кандидат</h1>
|
||||
<div className="aspirant-decs__avatar">
|
||||
<div className="aspirant-decs__avatar_title">
|
||||
<img src={avatar}></img>
|
||||
<p>
|
||||
{level.spec} {level.skils}, {level.level}{" "}
|
||||
</p>
|
||||
</div>
|
||||
<div className="aspirant-decs__avatar_back">
|
||||
<Link to={"/profile/catalog"}>
|
||||
<div>
|
||||
<img src={arrow}></img>
|
||||
</div>
|
||||
<p>Вернуться к списку</p>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="aspirant-decs__telega">
|
||||
<h4>Есть вопросы?</h4>
|
||||
<div className="aspirant-decs__telega-logo">
|
||||
<img src={logoTg}></img>
|
||||
<p>Напишите нам в Телеграм. Мы с удовольствием ответим!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-interview">
|
||||
<p>Дата собеседования</p>
|
||||
<div className="input">
|
||||
<input
|
||||
type="date"
|
||||
value={date}
|
||||
onChange={(e) => setDate(e.target.value)}
|
||||
></input>
|
||||
</div>
|
||||
|
||||
<p>Время собеседования</p>
|
||||
<div className="input">
|
||||
<input
|
||||
type="time"
|
||||
value={time}
|
||||
onChange={(e) => setTime(e.target.value)}
|
||||
></input>
|
||||
</div>
|
||||
<BaseButton onClick={send} styles="form-interview__submit">
|
||||
Отправить
|
||||
</BaseButton>
|
||||
</div>
|
||||
<span className="exit" onClick={() => setActive(false)}></span>
|
||||
<ModalLayout active={modalSend} setActive={setModalSend} styles={"send"}>
|
||||
<div className="send">
|
||||
<img src={interview}></img>
|
||||
<h2>Спасибо, собеседование назначено</h2>
|
||||
<p>
|
||||
Дата: <span>{date}</span>
|
||||
</p>
|
||||
<p>
|
||||
Время собеседования: <span>{time}</span>
|
||||
</p>
|
||||
</div>
|
||||
</ModalLayout>
|
||||
</ModalLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default ModalAspirant;
|
||||
170
src/components/Modal/ModalAspirant/modalAspirant.scss
Normal file
170
src/components/Modal/ModalAspirant/modalAspirant.scss
Normal file
@ -0,0 +1,170 @@
|
||||
.aspirant {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background: #ffffff;
|
||||
border: 1px solid #dde2e4;
|
||||
border-radius: 8px;
|
||||
padding: 0;
|
||||
|
||||
&-decs {
|
||||
padding: 54px 25px 51px 61px;
|
||||
border-right: 1px solid #f1f1f1;
|
||||
|
||||
h1 {
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
font-size: 30px;
|
||||
line-height: 32px;
|
||||
color: #000000;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
margin-top: 76px;
|
||||
|
||||
&_title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin: 0 22px 0 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
&_back {
|
||||
margin: 40px 0 0 0;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: #5b6871;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
div {
|
||||
background: #8dc63f;
|
||||
opacity: 0.3;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 15px 0 0;
|
||||
|
||||
img {
|
||||
margin: 0;
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: #5b6871;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__telega {
|
||||
text-align: left;
|
||||
|
||||
h4 {
|
||||
color: #52b709;
|
||||
font-size: 14px;
|
||||
margin: 55px 0 34px 0;
|
||||
}
|
||||
|
||||
p,
|
||||
h4 {
|
||||
font-weight: 900;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
p {
|
||||
width: 50%;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&-logo {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
img {
|
||||
margin: 0 19px 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-interview {
|
||||
text-align: left;
|
||||
padding: 54px 61px 51px 72px;
|
||||
|
||||
p {
|
||||
font-weight: 400;
|
||||
font-size: 15px;
|
||||
line-height: 18px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
&__submit {
|
||||
width: 174px;
|
||||
height: 46px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.input {
|
||||
background: #eff2f7;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 294px;
|
||||
height: 35px;
|
||||
margin: 0 0 36px 0;
|
||||
|
||||
input {
|
||||
background: #eff2f7;
|
||||
width: 90%;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.send {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
margin: 25px 0 31px 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
line-height: 17px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
color: #000000;
|
||||
margin-bottom: 10px;
|
||||
|
||||
span {
|
||||
color: #406128;
|
||||
}
|
||||
}
|
||||
}
|
||||
26
src/components/Modal/ModalErrorLogin/ModalErrorLogin.jsx
Normal file
26
src/components/Modal/ModalErrorLogin/ModalErrorLogin.jsx
Normal file
@ -0,0 +1,26 @@
|
||||
import React from "react";
|
||||
|
||||
import "./modalErrorLogin.scss";
|
||||
import ModalLayout from "../../Common/ModalLayout/ModalLayout";
|
||||
import BaseButton from "../../Common/BaseButton/BaseButton";
|
||||
|
||||
export const ModalErrorLogin = ({ active, setActive, title }) => {
|
||||
return (
|
||||
<ModalLayout active={active} setActive={setActive} styles={"error-login"}>
|
||||
<h2>Ошибка входа</h2>
|
||||
<p>{title}</p>
|
||||
<BaseButton
|
||||
styles={"error-login__button"}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setActive(false);
|
||||
}}
|
||||
>
|
||||
Попробовать еще раз
|
||||
</BaseButton>
|
||||
<span onClick={() => setActive(false)} className="exit"></span>
|
||||
</ModalLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default ModalErrorLogin;
|
||||
31
src/components/Modal/ModalErrorLogin/modalErrorLogin.scss
Normal file
31
src/components/Modal/ModalErrorLogin/modalErrorLogin.scss
Normal file
@ -0,0 +1,31 @@
|
||||
.error-login {
|
||||
position: relative;
|
||||
padding: 54px 76px;
|
||||
background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
|
||||
border-radius: 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
line-height: 29px;
|
||||
color: #263238;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
width: 176px;
|
||||
text-align: center;
|
||||
font-weight: 300;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
&__button {
|
||||
font-size: 14px;
|
||||
width: 198px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
79
src/components/Modal/ModalRegistration/ModalRegistration.jsx
Normal file
79
src/components/Modal/ModalRegistration/ModalRegistration.jsx
Normal file
@ -0,0 +1,79 @@
|
||||
import React from "react";
|
||||
|
||||
import ModalLayout from "../../Common/ModalLayout/ModalLayout";
|
||||
import BaseButton from "../../Common/BaseButton/BaseButton";
|
||||
|
||||
import telegramLogo from "../../../assets/icons/tgLogo.svg";
|
||||
import doc from "../../../assets/icons/doc.svg";
|
||||
import anyMoment from "../../../assets/icons/anyMoment.svg";
|
||||
|
||||
import "./modalRegistration.scss";
|
||||
|
||||
export const ModalRegistration = ({ active, setActive }) => {
|
||||
return (
|
||||
<ModalLayout active={active} setActive={setActive} styles={"registration"}>
|
||||
<div className="registration-body__left">
|
||||
<h2>
|
||||
Подключайтесь к <p>itguild.</p>
|
||||
</h2>
|
||||
<p className="registration-body__left-desc">
|
||||
Зарегистрируйтесь и назначайте собеседования любым специалистам без
|
||||
задержек
|
||||
</p>
|
||||
|
||||
<div className="input-body">
|
||||
<div className="input-body__box">
|
||||
<h5>Ваше имя</h5>
|
||||
<input></input>
|
||||
<h5>E-mail</h5>
|
||||
<input></input>
|
||||
</div>
|
||||
|
||||
<div className="input-body__box">
|
||||
<h5>Название компании</h5>
|
||||
<input></input>
|
||||
<h5>Пароль</h5>
|
||||
<input></input>
|
||||
</div>
|
||||
</div>
|
||||
<div className="button-box">
|
||||
<BaseButton
|
||||
onClick={(e) => e.preventDefault()}
|
||||
styles={"button-box__submit"}
|
||||
>
|
||||
Отправить
|
||||
</BaseButton>
|
||||
<h5>
|
||||
У вас уже есть аккаунт? <p>Войти</p>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div className="registration-body__right">
|
||||
<h4>Отказ от специалиста в любой момент</h4>
|
||||
<div className="registration-body__right-text">
|
||||
<img src={anyMoment}></img>
|
||||
<p>
|
||||
Поменяйте, откажитесь или возьмите еще специалиста в любой момент
|
||||
работы.
|
||||
</p>
|
||||
</div>
|
||||
<h4>100% постоплата</h4>
|
||||
<div className="registration-body__right-text">
|
||||
<img src={doc}></img>
|
||||
<p>
|
||||
Договор не подразумевает какую‑либо оплату до того, как вы
|
||||
арендовали специалиста
|
||||
</p>
|
||||
</div>
|
||||
<h4>Есть вопросы?</h4>
|
||||
<div className="registration-body__right-text">
|
||||
<img src={telegramLogo}></img>
|
||||
<p>Напишите нам в Телеграм. Мы с удовольствием ответим!</p>
|
||||
</div>
|
||||
</div>
|
||||
<span onClick={() => setActive(false)} className="exit"></span>
|
||||
</ModalLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default ModalRegistration;
|
||||
128
src/components/Modal/ModalRegistration/modalRegistration.scss
Normal file
128
src/components/Modal/ModalRegistration/modalRegistration.scss
Normal file
@ -0,0 +1,128 @@
|
||||
.registration {
|
||||
background: white;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 0;
|
||||
justify-content: space-between;
|
||||
border: 1px solid #dde2e4;
|
||||
border-radius: 8px;
|
||||
width: 1088px;
|
||||
height: 529px;
|
||||
|
||||
&-body {
|
||||
&__left {
|
||||
padding: 60px 0 30px 77px;
|
||||
|
||||
h2 {
|
||||
font-weight: 500;
|
||||
font-size: 35px;
|
||||
line-height: 32px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 405px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
h2 > p {
|
||||
font-size: 35px;
|
||||
color: #52b709;
|
||||
}
|
||||
|
||||
&-desc {
|
||||
text-align: center;
|
||||
width: 500px;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 28px;
|
||||
margin: 20px auto 0 auto;
|
||||
}
|
||||
|
||||
.input-body {
|
||||
margin-top: 44px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
&__box {
|
||||
margin-right: 25px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
h5 {
|
||||
font-weight: 400;
|
||||
font-size: 15px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 294px;
|
||||
height: 35px;
|
||||
background: #eff2f7;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
margin-bottom: 35px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-box {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-top: 10px;
|
||||
|
||||
&__submit {
|
||||
width: 174px;
|
||||
height: 46px;
|
||||
font-size: 18px;
|
||||
margin-right: 55px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
font-size: 16px;
|
||||
line-height: 28px;
|
||||
|
||||
p {
|
||||
color: #406128;
|
||||
text-decoration: underline;
|
||||
margin: 0 0 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__right {
|
||||
border-left: 1px solid #f1f1f1;
|
||||
padding: 80px 32px 46px 25px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
h4 {
|
||||
font-weight: 900;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
color: #52b709;
|
||||
margin-right: 100px;
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
&-text {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
p {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 22px;
|
||||
width: 205px;
|
||||
}
|
||||
|
||||
img {
|
||||
margin: 0 18px 20px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
491
src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx
Normal file
491
src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx
Normal file
@ -0,0 +1,491 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
import { apiRequest } from "../../../../api/request";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { urlForLocal } from "../../../../helper";
|
||||
import {
|
||||
modalToggle,
|
||||
setProjectBoardFetch,
|
||||
} from "../../../../redux/projectsTrackerSlice";
|
||||
import { getCorrectDate } from "../../../../components/Calendar/calendarHelper";
|
||||
|
||||
// import TrackerModal from "";
|
||||
import TrackerModal from "../../../UI/TrackerModal/TrackerModal";
|
||||
import ModalLayout from "../../../Common/ModalLayout/ModalLayout";
|
||||
import BaseButton from "../../../Common/BaseButton/BaseButton";
|
||||
|
||||
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 "./ModalTicket.scss";
|
||||
|
||||
export const ModalTiсket = ({
|
||||
active,
|
||||
setActive,
|
||||
task,
|
||||
projectId,
|
||||
projectName,
|
||||
projectUsers,
|
||||
}) => {
|
||||
const dispatch = useDispatch();
|
||||
const [addSubtask, setAddSubtask] = useState(false);
|
||||
const [editOpen, setEditOpen] = useState(false);
|
||||
const [inputsValue, setInputsValue] = useState({
|
||||
title: task.title,
|
||||
description: task.description,
|
||||
comment: "",
|
||||
});
|
||||
const [comments, setComments] = useState([]);
|
||||
const [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([]);
|
||||
|
||||
function deleteTask() {
|
||||
apiRequest("/task/update-task", {
|
||||
method: "PUT",
|
||||
data: {
|
||||
task_id: task.id,
|
||||
status: 0,
|
||||
},
|
||||
}).then((res) => {
|
||||
setActive(false);
|
||||
dispatch(setProjectBoardFetch(projectId));
|
||||
});
|
||||
}
|
||||
|
||||
function editTask() {
|
||||
apiRequest("/task/update-task", {
|
||||
method: "PUT",
|
||||
data: {
|
||||
task_id: task.id,
|
||||
title: inputsValue.title,
|
||||
description: inputsValue.description,
|
||||
},
|
||||
}).then((res) => {
|
||||
dispatch(setProjectBoardFetch(projectId));
|
||||
});
|
||||
}
|
||||
|
||||
function createComment() {
|
||||
apiRequest("/comment/create", {
|
||||
method: "POST",
|
||||
data: {
|
||||
text: inputsValue.comment,
|
||||
entity_type: 2,
|
||||
entity_id: task.id,
|
||||
},
|
||||
}).then((res) => {
|
||||
let newComment = res;
|
||||
newComment.created_at = new Date();
|
||||
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((res) => {
|
||||
setComments((prevValue) =>
|
||||
prevValue.filter((item) => item.id !== commentId)
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
function editComment(commentId) {
|
||||
apiRequest("/comment/update", {
|
||||
method: "PUT",
|
||||
data: {
|
||||
comment_id: commentId,
|
||||
text: commentsEditText[commentId],
|
||||
},
|
||||
}).then((res) => {});
|
||||
}
|
||||
|
||||
function taskExecutor(person) {
|
||||
apiRequest("/task/update-task", {
|
||||
method: "PUT",
|
||||
data: {
|
||||
task_id: task.id,
|
||||
executor_id: person.user_id,
|
||||
},
|
||||
}).then((res) => {
|
||||
setDropListOpen(false);
|
||||
setExecutor(res.executor);
|
||||
});
|
||||
}
|
||||
|
||||
function deleteTaskExecutor() {
|
||||
apiRequest("/task/update-task", {
|
||||
method: "PUT",
|
||||
data: {
|
||||
task_id: task.id,
|
||||
executor_id: 0,
|
||||
},
|
||||
}).then((res) => {
|
||||
setExecutor(null);
|
||||
});
|
||||
}
|
||||
|
||||
function addMember(person) {
|
||||
apiRequest("/task/add-user-to-task", {
|
||||
method: "POST",
|
||||
data: {
|
||||
task_id: task.id,
|
||||
user_id: person.user_id,
|
||||
},
|
||||
}).then((res) => {
|
||||
setDropListMembersOpen(false);
|
||||
setMembers((prevValue) => [...prevValue, res]);
|
||||
});
|
||||
}
|
||||
|
||||
function deleteMember(person) {
|
||||
apiRequest("/task/del-user", {
|
||||
method: "DELETE",
|
||||
data: {
|
||||
task_id: task.id,
|
||||
user_id: person.user_id,
|
||||
},
|
||||
}).then((res) => {
|
||||
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) => {
|
||||
setComments(res);
|
||||
res.forEach((item) => {
|
||||
setCommentsEditOpen((prevValue) => ({
|
||||
...prevValue,
|
||||
[item.id]: false,
|
||||
}));
|
||||
setCommentsEditText((prevValue) => ({
|
||||
...prevValue,
|
||||
[item.id]: item.text,
|
||||
}));
|
||||
});
|
||||
});
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
let ids = members.map((user) => user.user_id);
|
||||
setUsers(
|
||||
projectUsers.reduce((acc, cur) => {
|
||||
if (!ids.includes(cur.user_id)) acc.push(cur);
|
||||
return acc;
|
||||
}, [])
|
||||
);
|
||||
}, [members]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<ModalLayout
|
||||
active={active}
|
||||
setActive={setActive}
|
||||
styles={"tracker-ticket"}
|
||||
>
|
||||
<div className="content">
|
||||
<h3 className="title-project">
|
||||
<img src={category} className="title-project__category"></img>
|
||||
Проект: {projectName}
|
||||
<Link
|
||||
to={`/tracker/task/${task.id}`}
|
||||
className="title-project__full"
|
||||
>
|
||||
<img src={fullScreen}></img>
|
||||
</Link>
|
||||
</h3>
|
||||
|
||||
<div className="content__task">
|
||||
<span>Задача</span>
|
||||
{editOpen ? (
|
||||
<input
|
||||
value={inputsValue.title}
|
||||
onChange={(e) => {
|
||||
setInputsValue((prevValue) => ({
|
||||
...prevValue,
|
||||
title: e.target.value,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<h5>{inputsValue.title}</h5>
|
||||
)}
|
||||
<div className="content__description">
|
||||
{editOpen ? (
|
||||
<input
|
||||
value={inputsValue.description}
|
||||
onChange={(e) => {
|
||||
setInputsValue((prevValue) => ({
|
||||
...prevValue,
|
||||
description: e.target.value,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<p>{inputsValue.description}</p>
|
||||
)}
|
||||
{/*<img src={taskImg} className="image-task"></img>*/}
|
||||
</div>
|
||||
<div className="content__communication">
|
||||
<p className="tasks">
|
||||
<BaseButton
|
||||
onClick={() => {
|
||||
dispatch(modalToggle("addSubtask"));
|
||||
setAddSubtask(true);
|
||||
}}
|
||||
styles={"tasks__button"}
|
||||
>
|
||||
<img src={plus}></img>
|
||||
Добавить под задачу
|
||||
</BaseButton>
|
||||
</p>
|
||||
<p className="file">
|
||||
<BaseButton styles={"file__button"}>
|
||||
<img src={file}></img>
|
||||
Загрузить файл
|
||||
</BaseButton>
|
||||
<span>{0}</span>
|
||||
Файлов
|
||||
</p>
|
||||
</div>
|
||||
<div className="content__input">
|
||||
<input
|
||||
placeholder="Оставить комментарий"
|
||||
value={inputsValue.comment}
|
||||
onChange={(e) => {
|
||||
setInputsValue((prevValue) => ({
|
||||
...prevValue,
|
||||
comment: e.target.value,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
<img src={send} onClick={createComment}></img>
|
||||
</div>
|
||||
<div className="comments__list">
|
||||
{comments.map((comment) => {
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="workers">
|
||||
<div className="workers_box task__info">
|
||||
<span className="exit" onClick={() => setActive(false)}></span>
|
||||
<span className="nameProject">{task.title}</span>
|
||||
<p className="workers__creator">Создатель : {task.user?.fio}</p>
|
||||
|
||||
{executor ? (
|
||||
<div className="executor">
|
||||
<p>Исполнитель: {executor.fio}</p>
|
||||
<img src={urlForLocal(executor.avatar)} alt="avatar" />
|
||||
<img
|
||||
src={close}
|
||||
className="delete"
|
||||
onClick={() => deleteTaskExecutor()}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="add-worker moreItems ">
|
||||
<button onClick={() => setDropListOpen(true)}>+</button>
|
||||
<span>Добавить исполнителя</span>
|
||||
{dropListOpen && (
|
||||
<div className="dropdownList">
|
||||
<img
|
||||
src={close}
|
||||
className="dropdownList__close"
|
||||
onClick={() => setDropListOpen(false)}
|
||||
/>
|
||||
{projectUsers.map((person) => {
|
||||
return (
|
||||
<div
|
||||
className="dropdownList__person"
|
||||
key={person.user_id}
|
||||
onClick={() => taskExecutor(person)}
|
||||
>
|
||||
<span>{person.user.fio}</span>
|
||||
<img src={urlForLocal(person.user.avatar)} />
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{Boolean(members.length) && (
|
||||
<div className="members">
|
||||
<p>Участники:</p>
|
||||
<div className="members__list">
|
||||
{members.map((member) => {
|
||||
return (
|
||||
<div className="worker" key={member.user_id}>
|
||||
<p>{member.fio}</p>
|
||||
<img src={urlForLocal(member.avatar)} />
|
||||
<img
|
||||
src={close}
|
||||
className="delete"
|
||||
onClick={() => deleteMember(member)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="add-worker moreItems">
|
||||
<button onClick={() => setDropListMembersOpen(true)}>+</button>
|
||||
<span>Добавить участников</span>
|
||||
{dropListMembersOpen && (
|
||||
<div className="dropdownList">
|
||||
<img
|
||||
src={close}
|
||||
className="dropdownList__close"
|
||||
onClick={() => setDropListMembersOpen(false)}
|
||||
/>
|
||||
{users.length ? (
|
||||
users.map((person) => {
|
||||
return (
|
||||
<div
|
||||
className="dropdownList__person"
|
||||
key={person.user_id}
|
||||
onClick={() => addMember(person)}
|
||||
>
|
||||
<span>{person.user.fio}</span>
|
||||
<img src={urlForLocal(person.user.avatar)} />
|
||||
</div>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<p className="noUsers">Нет пользователей</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="workers_box-middle">
|
||||
<div className="time">
|
||||
<img src={watch}></img>
|
||||
<span>Длительность : </span>
|
||||
<p>{"0:00:00"}</p>
|
||||
</div>
|
||||
|
||||
<button className="start">
|
||||
Начать делать <img src={arrow}></img>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="workers_box-bottom">
|
||||
<div
|
||||
className={editOpen ? "edit" : ""}
|
||||
onClick={() => {
|
||||
if (editOpen) {
|
||||
setEditOpen(!editOpen);
|
||||
editTask();
|
||||
} else {
|
||||
setEditOpen(!editOpen);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<img src={edit}></img>
|
||||
<p>{editOpen ? "сохранить" : "редактировать"}</p>
|
||||
</div>
|
||||
<div>
|
||||
<img src={link}></img>
|
||||
<p>ссылка на проект</p>
|
||||
</div>
|
||||
<div onClick={deleteTask}>
|
||||
<img src={archive}></img>
|
||||
<p>в архив</p>
|
||||
</div>
|
||||
<div onClick={deleteTask}>
|
||||
<img src={del}></img>
|
||||
<p>удалить</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ModalLayout>
|
||||
|
||||
<TrackerModal
|
||||
active={addSubtask}
|
||||
setActive={setAddSubtask}
|
||||
defautlInput={task.column_id}
|
||||
></TrackerModal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ModalTiсket;
|
||||
465
src/components/Modal/Tracker/ModalTicket/ModalTicket.scss
Normal file
465
src/components/Modal/Tracker/ModalTicket/ModalTicket.scss
Normal file
@ -0,0 +1,465 @@
|
||||
.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;
|
||||
row-gap: 10px;
|
||||
&__item {
|
||||
padding: 10px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 438px;
|
||||
background: #f1f1f1;
|
||||
border-radius: 44px;
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
row-gap: 10px;
|
||||
|
||||
&__info {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
column-gap: 15px;
|
||||
|
||||
.edit {
|
||||
width: 25px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.edit__open {
|
||||
background: green;
|
||||
}
|
||||
|
||||
img {
|
||||
cursor: pointer;
|
||||
width: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__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;
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
|
||||
img {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,521 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
import { ProfileHeader } from "../../../ProfileHeader/ProfileHeader";
|
||||
import { ProfileBreadcrumbs } from "../../../ProfileBreadcrumbs/ProfileBreadcrumbs";
|
||||
import { Footer } from "../../../Footer/Footer";
|
||||
import { Link, useParams, useNavigate } from "react-router-dom";
|
||||
import TrackerModal from "../../../UI/TrackerModal/TrackerModal";
|
||||
import { Navigation } from "../../../Navigation/Navigation";
|
||||
import { Loader } from "../../../Loader/Loader";
|
||||
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import {
|
||||
deletePersonOnProject,
|
||||
modalToggle,
|
||||
setProjectBoardFetch,
|
||||
setToggleTab,
|
||||
getProjectBoard,
|
||||
getBoarderLoader,
|
||||
} from "../../../../redux/projectsTrackerSlice";
|
||||
import { apiRequest } from "../../../../api/request";
|
||||
import { urlForLocal } from "../../../../helper";
|
||||
import { getCorrectDate } from "../../../Calendar/calendarHelper";
|
||||
import BaseButton from "../../../Common/BaseButton/BaseButton";
|
||||
|
||||
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/archiveTracker.svg";
|
||||
import selectArrow from "../../../../assets/icons/arrows/select.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/closeProjectPersons.svg";
|
||||
|
||||
import "./ticketFullScreen.scss";
|
||||
|
||||
export const TicketFullScreen = ({}) => {
|
||||
const [modalAddWorker, setModalAddWorker] = useState(false);
|
||||
const ticketId = useParams();
|
||||
const dispatch = useDispatch();
|
||||
const navigate = useNavigate();
|
||||
const projectBoard = useSelector(getProjectBoard);
|
||||
const boardLoader = useSelector(getBoarderLoader);
|
||||
const [taskInfo, setTaskInfo] = useState({});
|
||||
const [editOpen, setEditOpen] = useState(false);
|
||||
const [inputsValue, setInputsValue] = useState({});
|
||||
const [loader, setLoader] = useState(true);
|
||||
const [comments, setComments] = useState([]);
|
||||
const [commentsEditOpen, setCommentsEditOpen] = useState({});
|
||||
const [commentsEditText, setCommentsEditText] = useState({});
|
||||
const [personListOpen, setPersonListOpen] = useState(false);
|
||||
|
||||
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) => {
|
||||
setComments(res);
|
||||
res.forEach((item) => {
|
||||
setCommentsEditOpen((prevValue) => ({
|
||||
...prevValue,
|
||||
[item.id]: false,
|
||||
}));
|
||||
setCommentsEditText((prevValue) => ({
|
||||
...prevValue,
|
||||
[item.id]: item.text,
|
||||
}));
|
||||
});
|
||||
});
|
||||
dispatch(setProjectBoardFetch(taskInfo.project_id));
|
||||
setLoader(boardLoader);
|
||||
});
|
||||
}, []);
|
||||
|
||||
function deleteTask() {
|
||||
apiRequest("/task/update-task", {
|
||||
method: "PUT",
|
||||
data: {
|
||||
task_id: ticketId.id,
|
||||
status: 0,
|
||||
},
|
||||
}).then((res) => {
|
||||
navigate(`/tracker/project/${taskInfo.project_id}`);
|
||||
});
|
||||
}
|
||||
|
||||
function editTask() {
|
||||
apiRequest("/task/update-task", {
|
||||
method: "PUT",
|
||||
data: {
|
||||
task_id: taskInfo.id,
|
||||
title: inputsValue.title,
|
||||
description: inputsValue.description,
|
||||
},
|
||||
}).then((res) => {});
|
||||
}
|
||||
|
||||
function createComment() {
|
||||
apiRequest("/comment/create", {
|
||||
method: "POST",
|
||||
data: {
|
||||
text: inputsValue.comment,
|
||||
entity_type: 2,
|
||||
entity_id: taskInfo.id,
|
||||
},
|
||||
}).then((res) => {
|
||||
let newComment = res;
|
||||
newComment.created_at = new Date();
|
||||
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((res) => {
|
||||
setComments((prevValue) =>
|
||||
prevValue.filter((item) => item.id !== commentId)
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
function editComment(commentId) {
|
||||
apiRequest("/comment/update", {
|
||||
method: "PUT",
|
||||
data: {
|
||||
comment_id: commentId,
|
||||
text: commentsEditText[commentId],
|
||||
},
|
||||
}).then((res) => {});
|
||||
}
|
||||
|
||||
function deletePerson(userId) {
|
||||
apiRequest("/project/del-user", {
|
||||
method: "DELETE",
|
||||
data: {
|
||||
project_id: projectBoard.id,
|
||||
user_id: userId,
|
||||
},
|
||||
}).then((res) => {
|
||||
dispatch(deletePersonOnProject(userId));
|
||||
});
|
||||
}
|
||||
|
||||
const toggleTabs = (index) => {
|
||||
dispatch(setToggleTab(index));
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="ticket-full-screen">
|
||||
<ProfileHeader />
|
||||
<Navigation />
|
||||
<div className="container">
|
||||
<div className="tracker__content">
|
||||
<ProfileBreadcrumbs
|
||||
links={[
|
||||
{ name: "Главная", link: "/profile" },
|
||||
{ name: "Трекер", link: "/profile/tracker" },
|
||||
]}
|
||||
/>
|
||||
<h2 className="tracker__title">Управление проектами с трекером</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="tracker__tabs">
|
||||
<div className="tracker__tabs__head">
|
||||
<Link
|
||||
to="/profile/tracker"
|
||||
className="tab active-tab"
|
||||
onClick={() => toggleTabs(1)}
|
||||
>
|
||||
<img src={project} alt="img" />
|
||||
<p>Проекты </p>
|
||||
</Link>
|
||||
<Link
|
||||
to="/profile/tracker"
|
||||
className="tab"
|
||||
onClick={() => toggleTabs(2)}
|
||||
>
|
||||
<img src={tasks} alt="img" />
|
||||
<p>Все мои задачи</p>
|
||||
</Link>
|
||||
<Link
|
||||
to="/profile/tracker"
|
||||
className="tab"
|
||||
onClick={() => toggleTabs(3)}
|
||||
>
|
||||
<img src={archive} alt="img" />
|
||||
<p>Архив</p>
|
||||
</Link>
|
||||
</div>
|
||||
{loader ? (
|
||||
<Loader />
|
||||
) : (
|
||||
<>
|
||||
<div className="tracker__tabs__content content-tabs">
|
||||
<div className="tasks__head">
|
||||
<div className="tasks__head__wrapper">
|
||||
<h4>Проект : {projectBoard.name}</h4>
|
||||
|
||||
<TrackerModal
|
||||
active={modalAddWorker}
|
||||
setActive={setModalAddWorker}
|
||||
></TrackerModal>
|
||||
|
||||
<div className="tasks__head__persons">
|
||||
{/*<img src={avatarTest} alt="avatar" />*/}
|
||||
{/*<img src={avatarTest} alt="avatar" />*/}
|
||||
<span className="countPersons">
|
||||
{projectBoard.projectUsers?.length}
|
||||
</span>
|
||||
<span
|
||||
className="addPerson"
|
||||
onClick={() => {
|
||||
setPersonListOpen(true);
|
||||
}}
|
||||
>
|
||||
+
|
||||
</span>
|
||||
<p>добавить участника</p>
|
||||
{personListOpen && (
|
||||
<div className="persons__list">
|
||||
<img
|
||||
className="persons__list__close"
|
||||
src={close}
|
||||
alt="close"
|
||||
onClick={() => setPersonListOpen(false)}
|
||||
/>
|
||||
<div className="persons__list__count">
|
||||
<span>{projectBoard.projectUsers?.length}</span>
|
||||
участник
|
||||
</div>
|
||||
<div className="persons__list__info">
|
||||
В проекте - <span>“{projectBoard.name}”</span>
|
||||
</div>
|
||||
<div className="persons__list__items">
|
||||
{projectBoard.projectUsers?.map((person) => {
|
||||
return (
|
||||
<div
|
||||
className="persons__list__item"
|
||||
key={person.user_id}
|
||||
>
|
||||
<img
|
||||
className="avatar"
|
||||
src={urlForLocal(person.user.avatar)}
|
||||
alt="avatar"
|
||||
/>
|
||||
<span>{person.user.fio}</span>
|
||||
<img
|
||||
className="delete"
|
||||
src={close}
|
||||
alt="delete"
|
||||
onClick={() => deletePerson(person.user_id)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div
|
||||
className="persons__list__add"
|
||||
onClick={() => {
|
||||
dispatch(modalToggle("addWorker"));
|
||||
setModalAddWorker(true);
|
||||
setPersonListOpen(false);
|
||||
}}
|
||||
>
|
||||
<span className="addPerson">+</span>
|
||||
<p>Добавить участников</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="tasks__head__select">
|
||||
<span>Учавствую</span>
|
||||
<img src={selectArrow} alt="arrow" />
|
||||
</div>
|
||||
<div className="tasks__head__select">
|
||||
<span>Мои</span>
|
||||
<img src={selectArrow} alt="arrow" />
|
||||
</div>
|
||||
<Link to={`/profile/tracker`} className="link">
|
||||
<div className="tasks__head__back">
|
||||
<p>Вернуться на проекты</p>
|
||||
<img src={arrow} alt="arrow" />
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="tracker-ticket ticket">
|
||||
<div className="content ticket-whith">
|
||||
<div className="content__task">
|
||||
<span>Задача</span>
|
||||
{editOpen ? (
|
||||
<input
|
||||
value={inputsValue.title}
|
||||
onChange={(e) => {
|
||||
setInputsValue((prevValue) => ({
|
||||
...prevValue,
|
||||
title: e.target.value,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<h5>{inputsValue.title}</h5>
|
||||
)}
|
||||
<div className="content__description">
|
||||
{editOpen ? (
|
||||
<input
|
||||
value={inputsValue.description}
|
||||
onChange={(e) => {
|
||||
setInputsValue((prevValue) => ({
|
||||
...prevValue,
|
||||
description: e.target.value,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<p>{inputsValue.description}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="content__communication">
|
||||
<p className="tasks">
|
||||
<BaseButton
|
||||
onClick={() => {
|
||||
dispatch(modalToggle("addSubtask"));
|
||||
setAddSubtask(true);
|
||||
}}
|
||||
styles={"tasks__button"}
|
||||
>
|
||||
<img src={plus}></img>
|
||||
Добавить под задачу
|
||||
</BaseButton>
|
||||
</p>
|
||||
<p className="file">
|
||||
<BaseButton styles={"file__button"}>
|
||||
<img src={file}></img>
|
||||
Загрузить файл
|
||||
</BaseButton>
|
||||
<span>{0}</span>
|
||||
Файлов
|
||||
</p>
|
||||
</div>
|
||||
<div className="content__input">
|
||||
<input
|
||||
placeholder="Оставить комментарий"
|
||||
value={inputsValue.comment}
|
||||
onChange={(e) => {
|
||||
setInputsValue((prevValue) => ({
|
||||
...prevValue,
|
||||
comment: e.target.value,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
<img src={send} onClick={createComment}></img>
|
||||
</div>
|
||||
<div className="comments__list">
|
||||
{comments.map((comment) => {
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="workers">
|
||||
<div className="workers_box">
|
||||
<p className="workers__creator">
|
||||
Создатель : <span>{taskInfo.user?.fio}</span>
|
||||
</p>
|
||||
<div>
|
||||
{Boolean(taskInfo.taskUsers?.length) &&
|
||||
taskInfo.taskUsers.map((worker, index) => {
|
||||
return (
|
||||
<div className="worker" key={index}>
|
||||
<img src={worker.avatar}></img>
|
||||
<p>{worker.name}</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="add-worker moreItems">
|
||||
<button
|
||||
onClick={() => {
|
||||
dispatch(modalToggle("addWorker"));
|
||||
setModalAddWorker(true);
|
||||
}}
|
||||
>
|
||||
+
|
||||
</button>
|
||||
<span>Добавить исполнителя</span>
|
||||
</div>
|
||||
<div className="add-worker moreItems">
|
||||
<button
|
||||
onClick={() => {
|
||||
dispatch(modalToggle("addWorker"));
|
||||
setModalAddWorker(true);
|
||||
}}
|
||||
>
|
||||
+
|
||||
</button>
|
||||
<span>Добавить участников</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="workers_box-middle">
|
||||
<div className="time">
|
||||
<img src={watch}></img>
|
||||
<span>Длительность : </span>
|
||||
<p>{"0:00:00"}</p>
|
||||
</div>
|
||||
|
||||
<button className="start">
|
||||
Начать делать <img src={arrow2}></img>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="workers_box-bottom">
|
||||
<div
|
||||
className={editOpen ? "edit" : ""}
|
||||
onClick={() => {
|
||||
if (editOpen) {
|
||||
setEditOpen(!editOpen);
|
||||
editTask();
|
||||
} else {
|
||||
setEditOpen(!editOpen);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<img src={edit}></img>
|
||||
<p>{editOpen ? "сохранить" : "редактировать"}</p>
|
||||
</div>
|
||||
<div>
|
||||
<img src={link}></img>
|
||||
<p>ссылка на проект</p>
|
||||
</div>
|
||||
<div>
|
||||
<img src={archive2}></img>
|
||||
<p>в архив</p>
|
||||
</div>
|
||||
<div onClick={deleteTask}>
|
||||
<img src={del}></img>
|
||||
<p>удалить</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<Footer />
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default TicketFullScreen;
|
||||
@ -0,0 +1,24 @@
|
||||
.ticket-full-screen {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.ticket {
|
||||
border: none;
|
||||
justify-content: center;
|
||||
|
||||
&-whith {
|
||||
width: 850px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.content-tabs {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: #252c32;
|
||||
&:hover {
|
||||
color: #252c32;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user