860 lines
29 KiB
React
Raw Normal View History

2023-06-29 02:26:49 +03:00
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import { CKEditor } from "@ckeditor/ckeditor5-react";
2023-09-13 17:45:31 +03:00
import ru from "date-fns/locale/ru";
2023-09-13 17:46:56 +03:00
import React, { useEffect, useState } from "react";
import DatePicker, { registerLocale } from "react-datepicker";
2023-09-13 17:45:31 +03:00
import "react-datepicker/dist/react-datepicker.css";
2023-09-13 17:46:56 +03:00
import { useDispatch, useSelector } from "react-redux";
2023-06-22 14:56:31 +03:00
2023-06-27 18:35:59 +03:00
import { getProfileInfo } from "@redux/outstaffingSlice";
2023-05-03 16:47:20 +03:00
import {
2023-06-22 14:56:31 +03:00
addPersonToProject,
editColumnName,
editProjectName,
getColumnId,
getColumnName,
getColumnPriority,
2023-05-03 16:47:20 +03:00
getProjectBoard,
getValueModalType,
2023-06-22 14:56:31 +03:00
setColumnName,
setColumnPriority,
setProject,
2023-05-03 16:47:20 +03:00
setProjectBoardFetch,
2023-06-22 19:18:41 +03:00
} from "@redux/projectsTrackerSlice";
2023-09-13 17:46:56 +03:00
import { getCorrectRequestDate, urlForLocal } from "@utils/helper";
2023-06-22 19:18:41 +03:00
import { apiRequest } from "@api/request";
2023-07-14 03:03:49 +03:00
import { useNotification } from "@hooks/useNotification";
2023-09-13 17:46:56 +03:00
import { getCorrectDate } from "@components/Calendar/calendarHelper";
2023-06-22 19:18:41 +03:00
import BaseButton from "@components/Common/BaseButton/BaseButton";
import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
2023-06-22 19:18:41 +03:00
2023-09-13 17:46:56 +03:00
import arrowRight from "assets/icons/arrows/arrowRightCreateTask.svg";
2023-06-22 19:18:41 +03:00
import arrowDown from "assets/icons/arrows/selectArrow.png";
2023-10-30 01:35:28 +03:00
import close from "assets/icons/close.png";
2023-09-13 17:46:56 +03:00
import calendarImg from "assets/icons/createTaskCalendar.svg";
2023-11-09 21:03:19 +03:00
import crossWhite from "assets/icons/crossWhite.svg";
2023-06-29 02:27:08 +03:00
import avatarMok from "assets/images/avatarMok.png";
2023-06-22 19:18:41 +03:00
2023-05-05 16:10:25 +03:00
import "./trackerModal.scss";
2023-09-13 17:46:56 +03:00
2023-09-13 17:45:31 +03:00
registerLocale("ru", ru);
2023-04-10 21:22:22 +03:00
2023-05-05 16:10:25 +03:00
export const TrackerModal = ({
active,
setActive,
selectedTab,
defautlInput,
titleProject,
2023-05-08 16:57:35 +03:00
projectId,
2023-05-24 19:23:24 +03:00
priorityTask,
2023-06-27 18:35:59 +03:00
projectUsers,
2023-10-30 01:35:28 +03:00
projectMarks,
}) => {
2023-05-03 16:47:20 +03:00
const dispatch = useDispatch();
const projectBoard = useSelector(getProjectBoard);
2023-05-16 00:24:52 +03:00
const columnName = useSelector(getColumnName);
2023-06-22 14:56:31 +03:00
const columnId = useSelector(getColumnId);
const columnPriority = useSelector(getColumnPriority);
2023-06-27 18:35:44 +03:00
const profileInfo = useSelector(getProfileInfo);
2023-05-03 16:47:20 +03:00
const modalType = useSelector(getValueModalType);
2023-05-08 00:41:39 +03:00
const [projectName, setProjectName] = useState(defautlInput);
const [valueColumn, setValueColumn] = useState("");
const [nameProject, setNameProject] = useState("");
2023-05-03 16:47:20 +03:00
const [valueTiket, setValueTiket] = useState("");
2023-07-07 00:46:40 +03:00
const [descriptionTicket, setDescriptionTicket] = useState("");
2023-06-22 14:56:31 +03:00
const [workers, setWorkers] = useState([]);
const [selectWorkersOpen, setSelectWorkersOpen] = useState(false);
const [selectedWorker, setSelectedWorker] = useState(null);
const [selectColumnPriority, setSelectColumnPriority] = useState(
2023-12-04 18:01:04 +03:00
"Выберите приоритет колонки",
);
2023-06-27 18:35:59 +03:00
const [selectedExecutorTask, setSelectedExecutorTask] = useState(
2023-12-04 18:01:04 +03:00
"Выберите исполнителя задачи",
2023-06-27 18:35:59 +03:00
);
const [selectExecutorTaskOpen, setSelectExecutorTaskOpen] = useState(false);
2023-06-27 18:35:44 +03:00
const [correctProjectUsers, setCorrectProjectUsers] = useState([]);
2023-10-30 01:35:06 +03:00
const [correctProjectTags, setCorrectProjectTags] = useState([]);
const [taskTags, setTaskTags] = useState([]);
2023-10-30 01:35:28 +03:00
const [selectTagsOpen, setSelectTagsOpen] = useState(false);
2023-11-21 16:41:18 +03:00
const [selectedPriority, setSelectedPriority] = useState(null);
const [selectPriority, setSelectPriority] = useState(false);
const [selectColumnPriorityOpen, setSelectColumnPriorityOpen] =
useState(false);
2023-07-14 03:03:49 +03:00
const { showNotification } = useNotification();
2023-09-13 17:46:56 +03:00
const [deadLineDate, setDeadLineDate] = useState("");
const [datePickerOpen, setDatePickerOpen] = useState(false);
2023-09-13 17:45:31 +03:00
const [startDate, setStartDate] = useState(new Date());
2023-05-03 16:47:20 +03:00
2023-11-21 16:40:58 +03:00
const priority = [
{
2023-11-21 16:41:18 +03:00
name: "Высокий",
key: 2,
},
{
name: "Средний",
key: 1,
2023-11-21 16:40:58 +03:00
},
{
2023-11-21 16:41:18 +03:00
name: "Низкий",
key: 0,
2023-11-21 16:40:58 +03:00
},
2023-11-21 16:41:18 +03:00
];
2023-11-21 16:40:58 +03:00
2023-05-03 16:47:20 +03:00
function createTab() {
if (!valueColumn) {
2023-07-14 03:03:49 +03:00
showNotification({ show: true, text: "Введите название", type: "error" });
2023-05-03 16:47:20 +03:00
return;
}
apiRequest("/project-column/create-column", {
method: "POST",
data: {
project_id: projectBoard.id,
2023-06-22 14:56:31 +03:00
priority: projectBoard.columns.length
? projectBoard.columns.at(-1).priority + 1
: 1,
title: valueColumn,
2023-05-03 16:47:20 +03:00
},
2023-05-31 11:24:46 +03:00
}).then(() => {
2023-05-03 16:47:20 +03:00
dispatch(setProjectBoardFetch(projectBoard.id));
});
setValueColumn("");
2023-05-03 16:47:20 +03:00
setActive(false);
}
function createTiket() {
if (!valueTiket || !descriptionTicket) {
2023-07-14 03:03:49 +03:00
showNotification({
show: true,
text: "Введите название и описание",
type: "error",
});
2023-05-03 16:47:20 +03:00
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,
2023-11-21 16:41:18 +03:00
execution_priority: selectedPriority ? selectedPriority.key : "",
2023-05-24 19:23:24 +03:00
priority: priorityTask,
2023-09-13 17:46:56 +03:00
dead_line: deadLineDate ? getCorrectRequestDate(deadLineDate) : "",
2023-05-03 16:47:20 +03:00
},
2023-06-27 18:35:44 +03:00
}).then((res) => {
2023-07-14 03:03:33 +03:00
if (res.status === 500) {
2023-07-14 03:03:49 +03:00
showNotification({
show: true,
text: "Задача с таким именем уже существует",
type: "error",
});
2023-07-14 03:03:33 +03:00
} else {
2023-10-30 01:35:06 +03:00
for (let i = 0; i < taskTags.length; i++) {
apiRequest("/mark/attach", {
method: "POST",
data: {
mark_id: taskTags[i].id,
entity_type: 2,
2023-10-30 01:35:28 +03:00
entity_id: res.id,
2023-10-30 01:35:06 +03:00
},
}).then(() => {
2023-10-30 01:35:28 +03:00
setTaskTags([]);
2023-10-30 01:35:06 +03:00
});
}
2023-07-14 03:03:33 +03:00
if (selectedExecutorTask.user_id) {
apiRequest("/task/update-task", {
method: "PUT",
data: {
task_id: res.id,
executor_id: selectedExecutorTask.user_id,
},
}).then(() => {
dispatch(setProjectBoardFetch(projectBoard.id));
setActive(false);
setValueTiket("");
2023-09-11 18:28:56 +03:00
setDescriptionTicket("");
2023-07-14 03:03:33 +03:00
setSelectedExecutorTask("Выберите исполнителя задачи");
2023-11-21 16:41:18 +03:00
setSelectedPriority(null);
2023-07-14 03:03:33 +03:00
});
} else {
2023-06-27 18:35:44 +03:00
setActive(false);
setValueTiket("");
2023-09-11 18:28:56 +03:00
setDescriptionTicket("");
2023-07-14 03:03:33 +03:00
dispatch(setProjectBoardFetch(projectBoard.id));
}
2023-09-13 17:46:56 +03:00
setDeadLineDate("");
2023-07-14 03:03:49 +03:00
showNotification({
show: true,
text: "Задача создана",
type: "success",
});
2023-06-27 18:35:44 +03:00
}
2023-05-03 16:47:20 +03:00
});
}
2023-05-08 00:41:39 +03:00
function editProject() {
apiRequest("/project/update", {
method: "PUT",
data: {
project_id: projectId,
2023-05-08 16:57:35 +03:00
name: projectName,
2023-05-08 00:41:39 +03:00
},
2023-05-31 11:24:46 +03:00
}).then(() => {
2023-05-08 16:57:35 +03:00
setActive(false);
dispatch(editProjectName({ id: projectId, name: projectName }));
2023-05-08 00:41:39 +03:00
});
2023-05-05 00:50:48 +03:00
}
2023-06-09 03:19:09 +03:00
function changeColumnParams() {
projectBoard.columns.forEach((column) => {
if (column.id === columnId && column.priority !== columnPriority) {
2023-06-22 14:56:31 +03:00
const priorityColumns = [
{
column_id: column.id,
priority: Number(columnPriority),
},
];
2023-06-09 03:19:09 +03:00
for (let i = column.priority; i < columnPriority; i++) {
const currentColumn = {
column_id: projectBoard.columns[i].id,
2023-06-22 14:56:31 +03:00
priority: i,
};
priorityColumns.push(currentColumn);
2023-06-09 03:19:09 +03:00
}
for (let i = column.priority; i > columnPriority; i--) {
const currentColumn = {
column_id: projectBoard.columns[i - 2].id,
2023-06-22 14:56:31 +03:00
priority: i,
};
priorityColumns.push(currentColumn);
2023-06-09 03:19:09 +03:00
}
apiRequest("/project-column/set-priority", {
method: "POST",
data: {
project_id: projectBoard.id,
2023-06-22 14:56:31 +03:00
data: JSON.stringify(priorityColumns),
},
2023-06-09 03:19:09 +03:00
}).then(() => {
dispatch(setProjectBoardFetch(projectBoard.id));
2023-06-22 14:56:31 +03:00
});
2023-06-09 03:19:09 +03:00
}
2023-06-22 14:56:31 +03:00
});
changeColumnTitle();
2023-06-09 03:19:09 +03:00
}
function changeColumnTitle() {
2023-05-16 00:24:52 +03:00
apiRequest("/project-column/update-column", {
method: "PUT",
data: {
column_id: columnId,
2023-05-24 19:23:24 +03:00
title: columnName,
},
2023-05-31 11:24:46 +03:00
}).then(() => {
2023-05-16 00:24:52 +03:00
setActive(false);
2023-05-24 19:23:24 +03:00
dispatch(editColumnName({ id: columnId, title: columnName }));
});
2023-05-16 00:24:52 +03:00
}
function createProject() {
if (nameProject === "") {
return;
} else {
apiRequest("/project/create", {
method: "POST",
data: {
user_id: localStorage.getItem("id"),
name: nameProject,
2023-05-08 00:41:39 +03:00
status: 19,
},
}).then((res) => {
2023-07-14 03:03:33 +03:00
if (!Array.isArray(res.name)) {
const result = { ...res, columns: [] };
dispatch(setProject(result));
setActive(false);
setNameProject("");
} else {
2023-07-14 03:03:49 +03:00
showNotification({
show: true,
text: "Проект с таким именем уже существует",
type: "error",
});
2023-07-14 03:03:33 +03:00
}
});
}
}
2023-05-17 02:51:31 +03:00
function addUserToProject() {
apiRequest("/project/add-user", {
method: "POST",
data: {
2023-05-23 23:02:39 +03:00
user_id: selectedWorker.user_id,
2023-05-24 19:23:24 +03:00
project_id: projectBoard.id,
},
2023-05-17 02:51:31 +03:00
}).then((el) => {
2023-05-24 19:23:24 +03:00
dispatch(addPersonToProject(el));
2023-05-17 02:51:31 +03:00
setActive(false);
2023-05-24 19:23:24 +03:00
setSelectedWorker("");
setSelectWorkersOpen(false);
});
2023-05-17 02:51:31 +03:00
}
useEffect(() => {
2023-05-24 19:23:24 +03:00
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;
2023-12-04 18:01:04 +03:00
}, []),
2023-05-24 19:23:24 +03:00
);
})
: "";
2023-06-27 18:35:44 +03:00
if (
2023-06-27 18:35:59 +03:00
localStorage.getItem("role_status") !== "18" &&
projectUsers &&
Boolean(
2023-12-04 18:01:04 +03:00
!projectUsers.find((item) => item.user_id === profileInfo.id_user),
2023-06-27 18:35:59 +03:00
)
2023-06-27 18:35:44 +03:00
) {
2023-06-27 18:35:59 +03:00
setCorrectProjectUsers([
2023-06-27 18:35:44 +03:00
...projectUsers,
{
user: {
avatar: profileInfo.photo,
fio: profileInfo.fio,
},
user_id: profileInfo.id_user,
},
]);
} else {
2023-06-27 18:35:59 +03:00
setCorrectProjectUsers(projectUsers);
2023-06-27 18:35:44 +03:00
}
2023-11-19 20:01:50 +03:00
initListeners();
2023-05-24 19:23:24 +03:00
}, [active]);
2023-05-17 02:51:31 +03:00
2023-10-30 01:35:06 +03:00
useEffect(() => {
let tagIds = taskTags.map((tag) => tag.id);
if (projectMarks) {
setCorrectProjectTags(
2023-10-30 01:35:28 +03:00
projectMarks.reduce((acc, cur) => {
if (!tagIds.includes(cur.id)) acc.push(cur);
return acc;
2023-12-04 18:01:04 +03:00
}, []),
2023-10-30 01:35:06 +03:00
);
}
}, [taskTags, projectMarks]);
2023-11-19 20:01:27 +03:00
const initListeners = () => {
document.addEventListener("click", closeByClickingOut);
};
const closeByClickingOut = (event) => {
const path = event.path || (event.composedPath && event.composedPath());
if (
2023-11-19 20:01:50 +03:00
event &&
!path.find(
(div) =>
div.classList &&
(div.classList.contains("tags__selected__name") ||
2023-12-04 18:01:04 +03:00
div.classList.contains("tags__dropDown")),
2023-11-19 20:01:50 +03:00
)
2023-11-19 20:01:27 +03:00
) {
2023-11-19 20:01:50 +03:00
setSelectTagsOpen(false);
2023-11-19 20:01:27 +03:00
}
if (
2023-11-19 20:01:50 +03:00
event &&
!path.find(
(div) =>
div.classList &&
(div.classList.contains("select__executor") ||
2023-12-04 18:01:04 +03:00
div.classList.contains("select__executor__dropDown")),
2023-11-19 20:01:50 +03:00
)
2023-11-19 20:01:27 +03:00
) {
2023-11-19 20:01:50 +03:00
setSelectExecutorTaskOpen(false);
2023-11-19 20:01:27 +03:00
}
2023-11-19 20:01:50 +03:00
};
2023-11-19 20:01:27 +03:00
return (
<ModalLayout
active={active}
setActive={setActive}
2023-09-13 17:45:31 +03:00
type={modalType}
// onClick={() => {
// setSelectWorkersOpen(false);
// }}
>
{modalType === "addWorker" && (
2023-07-07 00:46:40 +03:00
<>
2023-07-07 00:46:58 +03:00
<div className="select__person">
2023-07-07 00:46:40 +03:00
<div className="title-project selectPerson">
<h4>Добавьте участника</h4>
{/*<div className="input-container">*/}
{/* <input*/}
{/* className="name-project"*/}
{/* value={emailWorker}*/}
{/* onChange={(e) => setEmailWorker(e.target.value)}*/}
{/* />*/}
{/*</div>*/}
2023-07-07 00:46:58 +03:00
<p className="selectPerson__info">
2023-12-04 18:00:12 +03:00
Выберите пользователя в проекте или добавьте по e-mail
2023-07-07 00:46:58 +03:00
</p>
<div className="invite__blocks">
<div className="addPersonBlock">
2023-07-07 00:46:40 +03:00
<div
className={
2023-07-07 00:46:58 +03:00
selectWorkersOpen
? "select__worker open"
: "select__worker"
2023-07-07 00:46:40 +03:00
}
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>
2023-07-07 00:46:58 +03:00
<BaseButton
styles={"button-add addPersonBtn"}
onClick={addUserToProject}
>
2023-07-07 00:46:40 +03:00
Добавить
</BaseButton>
</div>
2023-07-07 00:46:40 +03:00
<span>или</span>
2023-07-07 00:46:58 +03:00
<div className="invitePersonBlock">
<div className="input-container invitePersonBlock__input">
<input
className="name-project"
2023-12-04 19:28:40 +03:00
placeholder="e-mail"
2023-07-07 00:46:58 +03:00
type="email"
/>
2023-07-07 00:46:40 +03:00
</div>
<BaseButton styles={"button-add invitePersonBlock__btn"}>
Отправить приглашение
</BaseButton>
</div>
</div>
2023-05-03 16:47:20 +03:00
</div>
</div>
2023-07-07 00:46:40 +03:00
</>
)}
{modalType === "createTiketProject" && (
2023-06-27 18:35:44 +03:00
<>
<div className="title-project">
2023-09-13 17:46:56 +03:00
<div className="createTaskHead">
2023-10-30 01:35:06 +03:00
<div className="createTaskBody__right__owner">
<p>Создатель : {profileInfo?.fio}</p>
<img
2023-10-30 01:35:28 +03:00
src={
profileInfo.photo
? urlForLocal(profileInfo.photo)
: avatarMok
}
alt="avatar"
2023-10-30 01:35:06 +03:00
/>
2023-09-13 17:45:31 +03:00
</div>
2023-10-30 01:35:06 +03:00
{/*<span>Этап</span>*/}
{/*<div className="createTaskHead__selectColumn">*/}
{/* <span>Backlog</span>*/}
{/* <img src={arrowCreateTask} alt="arrow" />*/}
{/*</div>*/}
</div>
2023-09-13 17:46:56 +03:00
<div className="createTaskBody">
<div className="createTaskBody__left">
2023-09-13 17:45:31 +03:00
<h4>Введите название и описание задачи</h4>
<div className="input-container">
<input
2023-09-13 17:46:56 +03:00
maxLength="100"
className="name-project"
value={valueTiket}
onChange={(e) => setValueTiket(e.target.value)}
placeholder="Название задачи"
2023-09-13 17:45:31 +03:00
/>
</div>
<CKEditor
2023-09-13 17:46:56 +03:00
editor={ClassicEditor}
data={descriptionTicket}
config={{
toolbar: [
"heading",
"|",
"bold",
"italic",
"link",
"bulletedList",
"numberedList",
],
removePlugins: ["BlockQuote"],
placeholder: "Описание задачи",
}}
onChange={(event, editor) => {
const data = editor.getData();
setDescriptionTicket(data);
}}
2023-09-13 17:45:31 +03:00
/>
2023-06-27 18:35:59 +03:00
</div>
2023-09-13 17:46:56 +03:00
<div className="createTaskBody__right">
2023-10-30 01:35:06 +03:00
<div className="createTaskBody__right__tags">
2023-10-30 01:35:28 +03:00
<div className="tags__selected">
<div className="tags__selected__items">
2023-10-30 01:35:06 +03:00
{taskTags.map((tag) => {
2023-10-30 01:35:28 +03:00
return (
<div
className="selectedTag"
key={tag.id}
style={{ background: tag.color }}
>
<p>{tag.slug}</p>
<img
2023-11-09 21:03:19 +03:00
src={crossWhite}
2023-10-30 01:35:06 +03:00
className="delete"
alt="delete"
2023-10-30 01:35:28 +03:00
onClick={() =>
setTaskTags((prevState) =>
prevState.filter(
2023-12-04 18:01:04 +03:00
(prevTag) => prevTag.id !== tag.id,
),
2023-10-30 01:35:28 +03:00
)
}
/>
</div>
);
})}
2023-10-30 01:35:06 +03:00
</div>
2023-10-30 01:35:28 +03:00
<div
className="tags__selected__name"
onClick={() => setSelectTagsOpen(!selectTagsOpen)}
>
2023-11-21 16:53:05 +03:00
Выберите тег
2023-10-30 01:35:28 +03:00
<img
className={
selectTagsOpen ? "arrow arrow--open" : "arrow"
}
src={arrowDown}
alt="arrow"
/>
2023-10-30 01:35:06 +03:00
</div>
</div>
2023-10-30 01:35:28 +03:00
{selectTagsOpen && (
<div className="tags__dropDown">
<img
src={close}
className="close"
onClick={() => setSelectTagsOpen(false)}
/>
{correctProjectTags.map((tag) => {
return (
<div
className="tag__item"
key={tag.id}
onClick={() =>
setTaskTags((prevState) => [...prevState, tag])
}
>
2023-10-30 01:35:06 +03:00
<p>{tag.slug}</p>
<span style={{ background: tag.color }} />
</div>
2023-10-30 01:35:28 +03:00
);
})}
{Boolean(!correctProjectTags.length) && (
<p className="noTags">Нет тегов</p>
)}
</div>
)}
2023-09-13 17:45:31 +03:00
</div>
2023-11-21 16:41:18 +03:00
<div className="select__priority">
<div
className="select__priority__name"
onClick={() => setSelectPriority(!selectPriority)}
2023-11-21 16:40:58 +03:00
>
2023-11-21 16:41:18 +03:00
{selectedPriority
? `Приоритет: ${selectedPriority.name}`
2023-12-04 18:00:12 +03:00
: "Выберите приоритет"}
2023-11-21 16:40:58 +03:00
<img
2023-11-21 16:41:18 +03:00
className={selectPriority ? "arrow arrow--open" : "arrow"}
src={arrowDown}
alt="arrow"
2023-11-21 16:40:58 +03:00
/>
</div>
2023-11-21 16:41:18 +03:00
{selectPriority && (
<div className="select__priority__dropDown">
{priority.map((item) => {
return (
<div
className="dropdown__item"
key={item.key}
onClick={() => {
setSelectPriority(false);
setSelectedPriority(item);
}}
>
{item.name}
</div>
);
})}
</div>
)}
2023-11-21 16:40:58 +03:00
</div>
2023-09-13 17:45:31 +03:00
<div
2023-09-13 17:46:56 +03:00
onClick={() =>
setSelectExecutorTaskOpen(!selectExecutorTaskOpen)
}
className={
selectExecutorTaskOpen
? "select__executor select__executor--open"
: "select__executor"
}
2023-09-13 17:45:31 +03:00
>
<div className="selected__executor">
{selectedExecutorTask.user_id ? (
2023-09-13 17:46:56 +03:00
<>
<span>{selectedExecutorTask.user.fio}</span>
<img
className="avatar"
src={urlForLocal(selectedExecutorTask.user.avatar)}
alt="avatar"
/>
</>
2023-09-13 17:45:31 +03:00
) : (
2023-09-13 17:46:56 +03:00
<span>{selectedExecutorTask}</span>
2023-09-13 17:45:31 +03:00
)}
</div>
<img className="arrow" src={arrowDown} alt="arrow" />
{selectExecutorTaskOpen && (
2023-09-13 17:46:56 +03:00
<div className="select__executor__dropDown">
{correctProjectUsers.length ? (
correctProjectUsers.map((person) => {
return (
<div
onClick={() => setSelectedExecutorTask(person)}
className="executor"
key={person.user_id}
>
<span>{person.user.fio}</span>
<img
className="avatar"
src={
person.user?.avatar
? urlForLocal(person.user.avatar)
: avatarMok
}
alt="avatar"
/>
</div>
);
})
) : (
<span>Нет пользователей</span>
)}
</div>
2023-06-27 18:35:59 +03:00
)}
</div>
2023-09-13 17:46:56 +03:00
<div className="createTaskBody__right__deadLine">
<img src={calendarImg} alt="calendar" />
2023-09-13 17:45:31 +03:00
<span>Срок исполнения</span>
2023-09-13 17:46:56 +03:00
<img src={arrowRight} className="arrow" alt="arrow" />
<p onClick={() => setDatePickerOpen(!datePickerOpen)}>
{deadLineDate
? getCorrectDate(deadLineDate)
: "Дата не выбрана"}
</p>
2023-09-13 17:45:31 +03:00
<DatePicker
2023-09-13 17:46:56 +03:00
className="datePicker"
open={datePickerOpen}
locale="ru"
selected={startDate}
onChange={(date) => {
setDatePickerOpen(false);
setStartDate(date);
setDeadLineDate(date);
}}
2023-09-13 17:45:31 +03:00
/>
</div>
<BaseButton styles={"button-add"} onClick={createTiket}>
Создать
</BaseButton>
</div>
2023-06-27 18:35:44 +03:00
</div>
2023-05-03 16:47:20 +03:00
</div>
2023-06-27 18:35:44 +03:00
</>
)}
{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)}
/>
2023-05-03 22:06:19 +03:00
</div>
</div>
2023-06-22 19:18:41 +03:00
<BaseButton styles={"button-add"} onClick={editProject}>
Сохранить
</BaseButton>
</div>
)}
{modalType === "createProject" && (
<div>
<div className="title-project">
<h4>{titleProject}</h4>
<div className="input-container">
<input
2023-07-07 00:46:40 +03:00
maxLength="30"
className="name-project"
value={nameProject}
onChange={(e) => setNameProject(e.target.value)}
/>
</div>
<BaseButton styles={"button-add"} onClick={createProject}>
Создать
2023-06-22 19:18:41 +03:00
</BaseButton>
2023-05-03 22:06:19 +03:00
</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
2023-07-07 00:46:40 +03:00
maxLength="100"
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
2023-06-27 18:35:59 +03:00
className={
selectColumnPriorityOpen
? "select-priority select-priority--open"
: "select-priority"
}
onClick={() =>
setSelectColumnPriorityOpen(!selectColumnPriorityOpen)
}
>
<span>{selectColumnPriority}</span>
<img src={arrowDown} alt="arrow" />
{selectColumnPriorityOpen && (
<div className="select-priority__dropDown">
{projectBoard.columns.map((column, index) => {
return (
<span
key={column.id}
onClick={() => {
setSelectColumnPriority(index + 1);
dispatch(setColumnPriority(index + 1));
}}
>
{index + 1}
</span>
);
})}
</div>
)}
2023-05-04 18:38:56 +03:00
</div>
{/*<div className="input-container">*/}
{/* <input*/}
{/* className="name-project"*/}
{/* placeholder="Приоритет колонки"*/}
{/* type="number"*/}
{/* step="1"*/}
{/* value={columnPriority}*/}
{/* onChange={(e) => dispatch(setColumnPriority(e.target.value))}*/}
{/* />*/}
{/*</div>*/}
2023-05-04 18:38:56 +03:00
</div>
<BaseButton styles={"button-add"} onClick={changeColumnParams}>
Сохранить
</BaseButton>
</div>
)}
2023-05-03 16:47:20 +03:00
<span className="exit" onClick={() => setActive(false)}></span>
</ModalLayout>
2023-04-10 21:22:22 +03:00
);
};
2023-05-05 16:10:25 +03:00
export default TrackerModal;