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

Pull of main

Browse Source
This commit is contained in:
MaxOvs19
2023-06-26 11:05:30 +03:00
parent 66ec2daea1 be8f006463
commit fc0226ad25
14 changed files with 986 additions and 998 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Modal/ModalSelect/modalSelect.scss
View File

@ -19,6 +19,10 @@
img {
margin-right: 12px;
}
p:hover {
text-decoration: underline;
}
}
}

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

@ -4,14 +4,13 @@ import { Link } from "react-router-dom";
import { modalToggle, setProjectBoardFetch } from "@redux/projectsTrackerSlice";
import { urlForLocal } from "@utils/helper";
import { getCorrectRequestDate, urlForLocal } from "@utils/helper";
import { apiRequest } from "@api/request";
import { getCorrectDate } from "@components/Calendar/calendarHelper";
import BaseButton from "@components/Common/BaseButton/BaseButton";
import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
import TrackerModal from "@components/Modal/TrackerModal/TrackerModal";
import 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>
);
};

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

@ -1,32 +1,70 @@
.tracker-ticket {
.modal-tiket {
z-index: 9;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.11);
position: fixed;
top: 0;
left: 0;
display: none;
align-items: center;
justify-content: center;
}
.modal-tiket.active {
display: flex;
}
.modal-tiket__content {
background: #ffffff;
padding: 0;
border-radius: 8px;
align-items: initial;
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;
}
}
@ -63,7 +101,7 @@
.comments__list {
display: flex;
flex-direction: column;
max-height: 420px;
max-height: 300px;
overflow: auto;
&::-webkit-scrollbar {
@ -93,8 +131,8 @@
&__subComment {
&:before {
content: '';
background: #E4E4E6;
content: "";
background: #e4e4e6;
height: 1px;
width: 7px;
position: absolute;
@ -105,9 +143,9 @@
&__main {
&:after {
content: '';
content: "";
position: absolute;
background-image: url("../../../images/mainTaskCommentImg.png");
background-image: url("assets/images/mainTaskCommentImg.png");
width: 10px;
height: 8px;
top: 50px;
@ -115,9 +153,9 @@
}
&:before {
content: '';
content: "";
position: absolute;
background: #E4E4E6;
background: #e4e4e6;
width: 1px;
height: calc(100% - 120px);
left: 29px;
@ -221,6 +259,12 @@
flex-direction: column;
margin-top: 10px;
textarea {
min-height: 120px;
max-height: 450px;
font-size: 14px;
}
p {
font-weight: 400;
font-size: 14px;
@ -243,10 +287,12 @@
.tasks {
justify-content: space-evenly;
&__button {
.button-green-add {
width: 180px;
height: 40px;
font-weight: 400;
font-size: 12px;
line-height: 32px;
}
}
@ -260,13 +306,18 @@
justify-content: space-between;
margin-left: 20px;
&__button {
.button-add-file {
display: flex;
align-items: center;
justify-content: center;
background: white;
width: 166px;
height: 40px;
border: 0.5px solid #1458dd;
border-radius: 44px;
font-weight: 400;
font-size: 12px;
line-height: 32px;
color: #1458dd;
img {
@ -310,6 +361,10 @@
cursor: pointer;
margin-right: 18px;
}
&:focus-within {
border: 1px solid #0000004d;
}
}
}
@ -370,6 +425,7 @@
display: flex;
align-items: center;
position: relative;
margin-bottom: 5px;
span {
color: #000000;
@ -380,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;
}
}
@ -579,6 +630,10 @@
font-weight: 700;
}
}
p:hover {
text-decoration: underline;
}
}
}
}

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

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

171
src/components/Modal/TrackerModal/trackerModal.scss
View File

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