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 ( { // setSelectWorkersOpen(false); // }} > {modalType === "addWorker" && (

Добавьте участника

{/*
*/} {/* setEmailWorker(e.target.value)}*/} {/* />*/} {/*
*/}
setSelectWorkersOpen(!selectWorkersOpen)} >

{selectedWorker ? selectedWorker.employee.fio : "Выберите пользователя"}

arrow {Boolean(selectWorkersOpen) && (
{Boolean(workers.length) ? ( workers.map((worker) => { if (worker === selectedWorker) { return; } return (
{ setSelectedWorker(worker); }} >

{worker.employee.fio}

avatar
); }) ) : (
Нет пользователей
)}
)}
Добавить
)} {modalType === "createTiketProject" && (

Введите название и описание задачи

setValueTiket(e.target.value)} placeholder="Название задачи" />
setDescriptionTicket(e.target.value)} placeholder="Описание задачи" />
Создать
)} {modalType === "editProject" && (

Введите новое название

setProjectName(e.target.value)} />
Сохранить
)} {modalType === "createProject" && (

{titleProject}

setNameProject(e.target.value)} />
Создать
)} {modalType === "addSubtask" && (

Вы добавляете подзадачу{" "}

в колонку(id) задачи "{defautlInput}"

Введите текст

e.preventDefault()}> Добавить
)} {modalType === "createColumn" && (

Введите название колонки

setValueColumn(e.target.value)} />
Создать
)} {modalType === "editColumn" && (

Введите новое название

dispatch(setColumnName(e.target.value))} />

Приоритет колонки

dispatch(setColumnPriority(e.target.value))} />
Сохранить
)} setActive(false)}>
); }; export default TrackerModal;