diff --git a/src/components/ProjectTiket/ProjectTiket.js b/src/components/ProjectTiket/ProjectTiket.jsx similarity index 58% rename from src/components/ProjectTiket/ProjectTiket.js rename to src/components/ProjectTiket/ProjectTiket.jsx index e223dd6d..9c237928 100644 --- a/src/components/ProjectTiket/ProjectTiket.js +++ b/src/components/ProjectTiket/ProjectTiket.jsx @@ -1,20 +1,22 @@ import React, { useEffect, useState } from "react"; -import {Link} from "react-router-dom"; -import ModalSettings from "../UI/ModalSettings/ModalSettings"; +import { useDispatch } from "react-redux"; +import { Link } from "react-router-dom"; +import { apiRequest } from "../../api/request"; +import { deleteProject, modalToggle } from "../../redux/projectsTrackerSlice"; + +import { ModalSelect } from "../UI/ModalSelect/ModalSelect"; +import ModalAdd from "../UI/ModalAdd/ModalAdd"; import link from "../../images/link.svg"; import archiveSet from "../../images/archive.svg"; import del from "../../images/delete.svg"; import edit from "../../images/edit.svg"; -import {apiRequest} from "../../api/request"; -import {useDispatch} from "react-redux"; -import { deleteProject } from "../../redux/projectsTrackerSlice"; - import "./projectTiket.scss"; export const ProjectTiket = ({ project, index }) => { - const [modalSettings, setModalSettings] = useState(false); + const [modalSelect, setModalSelect] = useState(false); + const [modalAdd, setModalAdd] = useState(false); const dispatch = useDispatch(); useEffect(() => { @@ -32,20 +34,20 @@ export const ProjectTiket = ({ project, index }) => { event && !path.find((item) => item.classList && item.classList.contains("project")) ) { - setModalSettings(false); + setModalSelect(false); } } function removeProject() { - apiRequest('/project/update', { - method: 'PUT', + apiRequest("/project/update", { + method: "PUT", data: { project_id: project.id, - status: 0 - } + status: 0, + }, }).then((res) => { - dispatch(deleteProject(project)) - }) + dispatch(deleteProject(project)); + }); } return ( @@ -53,16 +55,33 @@ export const ProjectTiket = ({ project, index }) => { {project.name}

Открытые задачи

- {project.columns.reduce((accumulator, currentValue) => accumulator + currentValue.tasks.length, 0)} - {/*{project.columns.length ? '+' : ''}*/} - setModalSettings(true)}> + + {project.columns.reduce( + (accumulator, currentValue) => + accumulator + currentValue.tasks.length, + 0 + )} + + setModalSelect(true)}> ...
- + + +
-
+
{ + dispatch(modalToggle("editProject")); + setModalAdd(true); + setModalSelect(false); + }} + >

редактировать

@@ -74,13 +93,12 @@ export const ProjectTiket = ({ project, index }) => {

в архив

-
+

удалить

- +
); }; diff --git a/src/components/ProjectTiket/projectTiket.scss b/src/components/ProjectTiket/projectTiket.scss index ed8f08e2..3c2d0b98 100644 --- a/src/components/ProjectTiket/projectTiket.scss +++ b/src/components/ProjectTiket/projectTiket.scss @@ -83,7 +83,6 @@ color: #6f6f6f; right: 0; top: -35%; - z-index: 999; @media (max-width: 430px) { display: none; diff --git a/src/components/SliderWorkers/SliderWorkers.js b/src/components/SliderWorkers/SliderWorkers.jsx similarity index 100% rename from src/components/SliderWorkers/SliderWorkers.js rename to src/components/SliderWorkers/SliderWorkers.jsx diff --git a/src/components/UI/ModalAdd/ModalAdd.jsx b/src/components/UI/ModalAdd/ModalAdd.jsx index f16c8240..9f1e192f 100644 --- a/src/components/UI/ModalAdd/ModalAdd.jsx +++ b/src/components/UI/ModalAdd/ModalAdd.jsx @@ -1,17 +1,200 @@ -import React from "react"; +import React, { useState } from "react"; + +import { useDispatch, useSelector } from "react-redux"; +import { apiRequest } from "../../../api/request"; +import { + getProjectBoard, + getValueModalType, + setProjectBoardFetch, +} from "../../../redux/projectsTrackerSlice"; import "./modalAdd.scss"; -export const ModalAdd = ({ children, active, setActive }) => { +export const ModalAdd = ({ active, setActive, selectedTab, defautlInput }) => { + const dispatch = useDispatch(); + const projectBoard = useSelector(getProjectBoard); + + const modalType = useSelector(getValueModalType); + + const [valueTiket, setValueTiket] = useState(""); + const [valueColl, setValueColl] = useState(""); + const [descriptionTicket, setDescriptionTicket] = useState(""); + + function createTab() { + if (!valueColl) { + return; + } + + apiRequest("/project-column/create-column", { + method: "POST", + data: { + project_id: projectBoard.id, + title: valueColl, + }, + }).then((res) => { + dispatch(setProjectBoardFetch(projectBoard.id)); + }); + setValueColl(""); + 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, + }, + }).then((res) => { + dispatch(setProjectBoardFetch(projectBoard.id)); + }); + + setActive(false); + setValueTiket(""); + setDescriptionTicket(""); + } + + function getModal() { + switch (modalType) { + case "createColumn": + return ( +
e.stopPropagation()} + > +
+

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

+
+ setValueColl(e.target.value)} + > +
+
+ + setActive(false)}> +
+ ); + case "addWorker": + return ( +
e.stopPropagation()} + > +
+

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

+

Введите имя или e-mail

+
+ setValueTiket(e.target.value)} + > +
+
+ + setActive(false)}> +
+ ); + case "createTiketProject": + return ( +
e.stopPropagation()} + > +
+

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

+
+ setValueTiket(e.target.value)} + placeholder="Название задачи" + > +
+
+ setDescriptionTicket(e.target.value)} + placeholder="Описание задачи" + > +
+
+ + setActive(false)}> +
+ ); + case "editProject": + return ( +
e.stopPropagation()} + > +
+

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

+
+ setValueTiket(e.target.value)} + > +
+
+ + setActive(false)}> +
+ ); + case "editColumn": + return ( +
e.stopPropagation()} + > +
+

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

+
+ setValueTiket(e.target.value)} + > +
+
+ + setActive(false)}> +
+ ); + default: + return null; + } + } + return (
setActive(false)} > -
e.stopPropagation()}> - {children} - setActive(false)}> -
+ {getModal()}
); }; diff --git a/src/components/UI/ModalAdd/modalAdd.scss b/src/components/UI/ModalAdd/modalAdd.scss index 8f60c092..9e54d8b4 100644 --- a/src/components/UI/ModalAdd/modalAdd.scss +++ b/src/components/UI/ModalAdd/modalAdd.scss @@ -48,7 +48,7 @@ font-weight: 300; font-size: 12px; line-height: 14px; - margin: -13px 0 16px 0; + margin: 12px 0 16px 0; } &__textarea { diff --git a/src/components/UI/ModalSelect/ModalSelect.jsx b/src/components/UI/ModalSelect/ModalSelect.jsx new file mode 100644 index 00000000..68726efd --- /dev/null +++ b/src/components/UI/ModalSelect/ModalSelect.jsx @@ -0,0 +1,14 @@ +import React from "react"; + +import "./modalSelect.scss"; + +export const ModalSelect = ({ active, children }) => { + return ( +
+ ... + {children} +
+ ); +}; + +export default ModalSelect; diff --git a/src/components/UI/ModalSettings/modalSettings.scss b/src/components/UI/ModalSelect/modalSelect.scss similarity index 78% rename from src/components/UI/ModalSettings/modalSettings.scss rename to src/components/UI/ModalSelect/modalSelect.scss index a77ea861..07844484 100644 --- a/src/components/UI/ModalSettings/modalSettings.scss +++ b/src/components/UI/ModalSelect/modalSelect.scss @@ -21,6 +21,14 @@ } } } + + &-ellipsis { + position: absolute; + top: -2px; + left: 10px; + font-size: 21px; + color: #6f6f6f; + } } &__settings.active { diff --git a/src/components/UI/ModalSettings/ModalSettings.jsx b/src/components/UI/ModalSettings/ModalSettings.jsx deleted file mode 100644 index e3ffb5d5..00000000 --- a/src/components/UI/ModalSettings/ModalSettings.jsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from "react"; - -import "./modalSettings.scss"; - -export const ModalSettings = ({ active, children }) => { - return ( -
- {children} -
- ); -}; - -export default ModalSettings; diff --git a/src/components/UI/TicketFullScreen/TicketFullScreen.jsx b/src/components/UI/TicketFullScreen/TicketFullScreen.jsx index 12c08012..68503758 100644 --- a/src/components/UI/TicketFullScreen/TicketFullScreen.jsx +++ b/src/components/UI/TicketFullScreen/TicketFullScreen.jsx @@ -1,13 +1,15 @@ -import React, {useEffect, useState} from "react"; +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 ModalAdd from "../ModalAdd/ModalAdd"; +import { Navigation } from "../../Navigation/Navigation"; + import { useDispatch } from "react-redux"; import { setToggleTab } from "../../../redux/projectsTrackerSlice"; -import {apiRequest} from "../../../api/request"; +import { apiRequest } from "../../../api/request"; import project from "../../../images/trackerProject.svg"; import watch from "../../../images/watch.png"; @@ -32,20 +34,22 @@ export const TicketFullScreen = ({}) => { const [addSubtask, setAddSubtask] = useState(false); const [modalAddWorker, setModalAddWorker] = useState(false); const [valueTiket, setValueTiket] = useState(""); - const ticketId = useParams() + const ticketId = useParams(); const dispatch = useDispatch(); const navigate = useNavigate(); - const [projectInfo, setProjectInfo] = useState({}) - const [taskInfo, setTaskInfo] = useState({}) + const [projectInfo, setProjectInfo] = useState({}); + const [taskInfo, setTaskInfo] = useState({}); useEffect(() => { apiRequest(`/task/get-task?task_id=${ticketId.id}`).then((taskInfo) => { - setTaskInfo(taskInfo) - apiRequest(`/project/get-project?project_id=${taskInfo.project_id}`).then((project) => { - setProjectInfo(project) - }) - }) - }, []) + setTaskInfo(taskInfo); + apiRequest(`/project/get-project?project_id=${taskInfo.project_id}`).then( + (project) => { + setProjectInfo(project); + } + ); + }); + }, []); function deleteTask() { apiRequest("/task/update-task", { @@ -55,7 +59,7 @@ export const TicketFullScreen = ({}) => { status: 0, }, }).then((res) => { - navigate(`/tracker/project/${taskInfo.project_id}`) + navigate(`/tracker/project/${taskInfo.project_id}`); }); } @@ -66,6 +70,7 @@ export const TicketFullScreen = ({}) => { return (
+
{
toggleTabs(1)} > @@ -88,7 +93,7 @@ export const TicketFullScreen = ({}) => {

Проекты

toggleTabs(2)} > @@ -96,7 +101,7 @@ export const TicketFullScreen = ({}) => {

Все мои задачи

toggleTabs(3)} > @@ -189,16 +194,19 @@ export const TicketFullScreen = ({}) => {
-

Создатель : {taskInfo.user?.fio}

+

+ Создатель : {taskInfo.user?.fio} +

- {Boolean(taskInfo.taskUsers?.length) && taskInfo.taskUsers.map((worker, index) => { - return ( -
- -

{worker.name}

-
- ); - })} + {Boolean(taskInfo.taskUsers?.length) && + taskInfo.taskUsers.map((worker, index) => { + return ( +
+ +

{worker.name}

+
+ ); + })}
diff --git a/src/pages/AuthForCandidate/AuthForCandidate.js b/src/pages/AuthForCandidate/AuthForCandidate.jsx similarity index 100% rename from src/pages/AuthForCandidate/AuthForCandidate.js rename to src/pages/AuthForCandidate/AuthForCandidate.jsx diff --git a/src/pages/AuthForDevelopers/AuthForDevelopers.js b/src/pages/AuthForDevelopers/AuthForDevelopers.jsx similarity index 100% rename from src/pages/AuthForDevelopers/AuthForDevelopers.js rename to src/pages/AuthForDevelopers/AuthForDevelopers.jsx diff --git a/src/pages/PartnerBid/PartnerBid.js b/src/pages/PartnerBid/PartnerBid.jsx similarity index 100% rename from src/pages/PartnerBid/PartnerBid.js rename to src/pages/PartnerBid/PartnerBid.jsx diff --git a/src/pages/PartnerSettings/PartnerSettings.js b/src/pages/PartnerSettings/PartnerSettings.jsx similarity index 100% rename from src/pages/PartnerSettings/PartnerSettings.js rename to src/pages/PartnerSettings/PartnerSettings.jsx diff --git a/src/pages/ProjectTracker/ProjectTracker.js b/src/pages/ProjectTracker/ProjectTracker.js index 586d1cbc..de272f97 100644 --- a/src/pages/ProjectTracker/ProjectTracker.js +++ b/src/pages/ProjectTracker/ProjectTracker.js @@ -1,11 +1,19 @@ -import React, {useEffect, useRef, useState} from "react"; -import {Link, useParams} from "react-router-dom"; +import React, { useEffect, useRef, useState } from "react"; +import { Link, useParams } from "react-router-dom"; import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader"; import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"; import { Footer } from "../../components/Footer/Footer"; +import { Navigation } from "../../components/Navigation/Navigation"; import { useDispatch, useSelector } from "react-redux"; -import {getProjectBoard, moveProjectTask, setProjectBoardFetch, setToggleTab} from "../../redux/projectsTrackerSlice"; +import { apiRequest } from "../../api/request"; +import { + getProjectBoard, + modalToggle, + moveProjectTask, + setProjectBoardFetch, + setToggleTab, +} from "../../redux/projectsTrackerSlice"; import ModalTicket from "../../components/UI/ModalTicket/ModalTicket"; import ModalAdd from "../../components/UI/ModalAdd/ModalAdd"; @@ -21,422 +29,347 @@ import arrow from "../../images/arrowCalendar.png"; import del from "../../images/delete.svg"; import edit from "../../images/edit.svg"; -import {apiRequest} from "../../api/request"; -import { Navigation } from "../../components/Navigation/Navigation"; - export const ProjectTracker = () => { - const dispatch = useDispatch(); - const projectId = useParams() - const [openColumnSelect, setOpenColumnSelect] = useState({}) - const [selectedTab, setSelectedTab] = useState(0); - const startWrapperIndexTest = useRef({}) - const [wrapperHover, setWrapperHover] = useState({}); - const projectBoard = useSelector(getProjectBoard); - useEffect(() => { - dispatch(setProjectBoardFetch(projectId.id)) - }, []) + const dispatch = useDispatch(); + const projectId = useParams(); - useEffect(() => { - if (Object.keys(projectBoard).length) { - projectBoard.columns.forEach(column => { - setOpenColumnSelect(prevState => ({...prevState, [column.id]: false})) - setWrapperHover(prevState => ({...prevState, [column.id]: false})) - }) - } - }, [projectBoard]) + const [openColumnSelect, setOpenColumnSelect] = useState({}); + const [selectedTab, setSelectedTab] = useState(0); + const [wrapperHover, setWrapperHover] = useState({}); + const [modalAdd, setModalAdd] = useState(false); + const [modalActiveTicket, setModalActiveTicket] = useState(false); + const [selectedTicket, setSelectedTicket] = useState({}); - // Modal State - const [modalActiveTicket, setModalActiveTicket] = useState(false); - const [selectedTicket, setSelectedTicket] = useState({}); - const [modalAddWorker, setModalAddWorker] = useState(false); - const [modalCreateColl, setModalCreateColl] = useState(false); - const [modalCreateTiket, setModalCreateTiket] = useState(false); - const [valueTiket, setValueTiket] = useState(""); - const [descriptionTicket, setDescriptionTicket] = useState("") - const [valueColl, setValueColl] = useState(""); - // + const startWrapperIndexTest = useRef({}); + const projectBoard = useSelector(getProjectBoard); - // function toggleMoreTasks(columnId) { - // setTabTaskMok((prevArray) => - // prevArray.map((elem, index) => { - // if (columnId === index) { - // return { ...elem, open: !elem.open }; - // } else { - // return elem; - // } - // }) - // ); - // } + useEffect(() => { + dispatch(setProjectBoardFetch(projectId.id)); + }, []); - function dragStartHandler(e, task, columnId) { - startWrapperIndexTest.current = { task: task, index: columnId }; - setTimeout(() => { - e.target.classList.add("tasks__board__item__hide"); - }, 0); + useEffect(() => { + if (Object.keys(projectBoard).length) { + projectBoard.columns.forEach((column) => { + setOpenColumnSelect((prevState) => ({ + ...prevState, + [column.id]: false, + })); + setWrapperHover((prevState) => ({ ...prevState, [column.id]: false })); + }); + } + }, [projectBoard]); + + // function toggleMoreTasks(columnId) { + // setTabTaskMok((prevArray) => + // prevArray.map((elem, index) => { + // if (columnId === index) { + // return { ...elem, open: !elem.open }; + // } else { + // return elem; + // } + // }) + // ); + // } + + function dragStartHandler(e, task, columnId) { + startWrapperIndexTest.current = { task: task, index: columnId }; + setTimeout(() => { + e.target.classList.add("tasks__board__item__hide"); + }, 0); + } + + function dragEndHandler(e) { + setWrapperHover((prevState) => ({ + [prevState]: false, + })); + e.target.classList.remove("tasks__board__item__hide"); + } + + function dragOverHandler(e) { + e.preventDefault(); + } + + function dragEnterHandler(columnId) { + if (columnId === startWrapperIndexTest.current.index) { + return; } - function dragEndHandler(e) { - setWrapperHover(prevState => ({ - [prevState]: false - }) - ); - e.target.classList.remove("tasks__board__item__hide"); + setWrapperHover((prevState) => ({ + [prevState]: false, + [columnId]: true, + })); + } + function dragDropHandler(e, columnId) { + e.preventDefault(); + if (startWrapperIndexTest.current.index === columnId) { + return; } - function dragOverHandler(e) { - e.preventDefault(); - } + setWrapperHover((prevState) => ({ + [prevState]: false, + })); - function dragEnterHandler(columnId) { - if (columnId === startWrapperIndexTest.current.index) { - return; - } - - setWrapperHover(prevState => ({ - [prevState]: false, [columnId]: true - })) - } - function dragDropHandler(e, columnId) { - e.preventDefault(); - if (startWrapperIndexTest.current.index === columnId) { - return; - } - - setWrapperHover(prevState => ({ - [prevState]: false - }) - ); - - if (columnId !== startWrapperIndexTest.current.index) { - dispatch(moveProjectTask({startWrapperIndex: startWrapperIndexTest.current, columnId})) - } - } - - function selectedTabTask(columnId) { - setSelectedTab(columnId); - setModalCreateTiket(true); - } - - function openTicket(e, task) { - setSelectedTicket(task); - setModalActiveTicket(true); - } - - 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 - } - }).then((res) => { - dispatch(setProjectBoardFetch(projectBoard.id)) + if (columnId !== startWrapperIndexTest.current.index) { + dispatch( + moveProjectTask({ + startWrapperIndex: startWrapperIndexTest.current, + columnId, }) - - setModalCreateTiket(false); - setValueTiket(""); - setDescriptionTicket("") + ); } + } - function createTab() { - if (!valueColl) { - return - } + function selectedTabTask(columnId) { + setSelectedTab(columnId); + dispatch(modalToggle("createTiketProject")); + setModalAdd(true); + } - apiRequest('/project-column/create-column', { - method: 'POST', - data: { - project_id: projectBoard.id, - title: valueColl - } - }).then((res) => { - dispatch(setProjectBoardFetch(projectBoard.id)) - }) - setValueColl(""); - setModalCreateColl(false); - } + function openTicket(e, task) { + setSelectedTicket(task); + setModalActiveTicket(true); + } - function deleteColumn(id) { - apiRequest('/project-column/update-column', { - method: 'PUT', - data: { - column_id: id, - project_id: projectBoard.id, - status: 0 - } - }).then((res) => { - dispatch(setProjectBoardFetch(projectBoard.id)) - }) - } + function deleteColumn(id) { + apiRequest("/project-column/update-column", { + method: "PUT", + data: { + column_id: id, + project_id: projectBoard.id, + status: 0, + }, + }).then((res) => { + dispatch(setProjectBoardFetch(projectBoard.id)); + }); + } - return ( -
- - -
-
- -

Управление проектами с трекером

-
-
-
-
- dispatch(setToggleTab(1))} - > - img -

Проекты

- - dispatch(setToggleTab(2))} - > - img -

Все мои задачи

- - dispatch(setToggleTab(3))} - > - img -

Архив

- -
-
-
-
-
-

Проект : {projectBoard.name}

+ return ( +
+ + +
+
+ +

Управление проектами с трекером

+
+
+
+
+ dispatch(setToggleTab(1))} + > + img +

Проекты

+ + dispatch(setToggleTab(2))} + > + img +

Все мои задачи

+ + dispatch(setToggleTab(3))} + > + img +

Архив

+ +
+
+
+
+
+

Проект : {projectBoard.name}

- -
-

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

-
- setValueColl(e.target.value)} - > -
-
- - + - -
-

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

-

- Введите имя или e-mail{" "} -

-
- setValueTiket(e.target.value)} - > -
-
- - - -
- setModalCreateColl(true)}>+ -

добавить колонку

-
-
- avatar - avatar - +9 - +
+ { + dispatch(modalToggle("createColumn")); + setModalAdd(true); + }} + > + -

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

-
-
- Участвую - arrow -
-
- Мои - arrow -
- -

Вернуться на проекты

- arrow - -
-
- - - - -
-

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

-
- setValueTiket(e.target.value)} - placeholder='Название задачи' - > -
-
- setDescriptionTicket(e.target.value)} - placeholder='Описание задачи' - > -
-
- - - -
- {Boolean(projectBoard?.columns) && Boolean(projectBoard.columns.length) && projectBoard.columns.map((column) => { - return ( -
dragOverHandler(e)} - onDragEnter={(e) => dragEnterHandler(column.id)} - onDrop={(e) => dragDropHandler(e, column.id)} - className={`tasks__board ${ - column.tasks.length >= 3 ? "tasks__board__more" : "" - } ${ - wrapperHover[column.id] ? "tasks__board__hover" : "" - }`} - > -
- {/**/} - - {column.title} - -
- selectedTabTask(column.id)} - > - + - - { - setOpenColumnSelect(prevState => ({...prevState, [column.id]: true})) - }} className="more">... -
-
- {openColumnSelect[column.id] && -
-
{ - setOpenColumnSelect(prevState => ({...prevState, [column.id]: false})) - }}> - edit - Изменить -
-
deleteColumn(column.id)}> - delete - Удалить -
-
- } - {column.tasks.map((task, index) => { - if (index > 2) { - if (!column.open) { - return; - } - } - return ( -
- dragStartHandler(e, task, column.id) - } - onDragEnd={(e) => dragEndHandler(e)} - onClick={(e) => openTicket(e, task)} - > -
-

{task.title}

-
-

- {task.description} -

-
-
- commentsImg - {task.comments} коментариев -
-
- filesImg - {task.files} файлов -
- {/*
*/} - {/* avatar*/} - {/* avatar*/} - {/*
*/} -
-
- ); - })} - {column.tasks.length > 3 && ( - toggleMoreTasks(column.id)} - > - {column.open ? "-" : "+"} - - )} -
- ); - })} -
-
+

добавить колонку

+
+ avatar + avatar + +9 + { + dispatch(modalToggle("addWorker")); + setModalAdd(true); + }} + > + + + +

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

+
+
+ Участвую + arrow +
+
+ Мои + arrow +
+ +

Вернуться на проекты

+ arrow + +
-
+ + + +
+ {Boolean(projectBoard?.columns) && + Boolean(projectBoard.columns.length) && + projectBoard.columns.map((column) => { + return ( +
dragOverHandler(e)} + onDragEnter={(e) => dragEnterHandler(column.id)} + onDrop={(e) => dragDropHandler(e, column.id)} + className={`tasks__board ${ + column.tasks.length >= 3 ? "tasks__board__more" : "" + } ${ + wrapperHover[column.id] ? "tasks__board__hover" : "" + }`} + > +
+ {/**/} + {column.title} +
+ selectedTabTask(column.id)} + > + + + + { + setOpenColumnSelect((prevState) => ({ + ...prevState, + [column.id]: true, + })); + }} + className="more" + > + ... + +
+
+ {openColumnSelect[column.id] && ( +
+
{ + setOpenColumnSelect((prevState) => ({ + ...prevState, + [column.id]: false, + })); + dispatch(modalToggle("editColumn")); + setModalAdd(true); + }} + > + edit + Изменить +
+
deleteColumn(column.id)} + > + delete + Удалить +
+
+ )} + {column.tasks.map((task, index) => { + if (index > 2) { + if (!column.open) { + return; + } + } + return ( +
+ dragStartHandler(e, task, column.id) + } + onDragEnd={(e) => dragEndHandler(e)} + onClick={(e) => openTicket(e, task)} + > +
+

{task.title}

+
+

+ {task.description} +

+
+
+ commentsImg + {task.comments} коментариев +
+
+ filesImg + {task.files} файлов +
+ {/*
*/} + {/* avatar*/} + {/* avatar*/} + {/*
*/} +
+
+ ); + })} + {column.tasks.length > 3 && ( + toggleMoreTasks(column.id)} + > + {column.open ? "-" : "+"} + + )} +
+ ); + })} +
+
- ); +
+
+ ); }; diff --git a/src/redux/projectsTrackerSlice.js b/src/redux/projectsTrackerSlice.js index 0bba58a3..71145e03 100644 --- a/src/redux/projectsTrackerSlice.js +++ b/src/redux/projectsTrackerSlice.js @@ -1,16 +1,15 @@ import { createAsyncThunk, createSlice } from "@reduxjs/toolkit"; -import {apiRequest} from "../api/request"; +import { apiRequest } from "../api/request"; const initialState = { projects: [], projectBoard: {}, - toggleTab: 1 + toggleTab: 1, + modalType: "", }; -export const setProjectBoardFetch = createAsyncThunk( - 'userInfo', - (id) => - apiRequest(`/project/get-project?project_id=${id}&expand=columns`) +export const setProjectBoardFetch = createAsyncThunk("userInfo", (id) => + apiRequest(`/project/get-project?project_id=${id}&expand=columns`) ); export const projectsTrackerSlice = createSlice({ @@ -18,47 +17,61 @@ export const projectsTrackerSlice = createSlice({ initialState, reducers: { setAllProjects: (state, action) => { - state.projects = action.payload + state.projects = action.payload; }, setProject: (state, action) => { state.projects.push(action.payload); }, setToggleTab: (state, action) => { - state.toggleTab = action.payload + state.toggleTab = action.payload; }, deleteProject: (state, action) => { - state.projects = state.projects.filter((project) => project.id !== action.payload.id) + state.projects = state.projects.filter( + (project) => project.id !== action.payload.id + ); }, moveProjectTask: (state, action) => { state.projectBoard.columns.forEach((column, index) => { if (column.id === action.payload.columnId) { - column.tasks.push(action.payload.startWrapperIndex.task) + column.tasks.push(action.payload.startWrapperIndex.task); apiRequest(`/task/update-task`, { - method: 'PUT', + method: "PUT", data: { task_id: action.payload.startWrapperIndex.task.id, - column_id: column.id - } - }).then((res) => { - }) + column_id: column.id, + }, + }).then((res) => {}); } if (column.id === action.payload.startWrapperIndex.index) { - state.projectBoard.columns[index].tasks = column.tasks.filter((task)=> task.id !== action.payload.startWrapperIndex.task.id); + state.projectBoard.columns[index].tasks = column.tasks.filter( + (task) => task.id !== action.payload.startWrapperIndex.task.id + ); } - }) - } + }); + }, + modalToggle: (state, action) => { + state.modalType = action.payload; + }, }, extraReducers: { [setProjectBoardFetch.fulfilled]: (state, action) => { - state.projectBoard = action.payload - } - } + state.projectBoard = action.payload; + }, + }, }); -export const { setProject, deleteProject, setAllProjects, moveProjectTask, setToggleTab } = projectsTrackerSlice.actions; +export const { + setProject, + deleteProject, + setAllProjects, + moveProjectTask, + setToggleTab, + modalToggle, +} = projectsTrackerSlice.actions; export const getProjects = (state) => state.tracker.projects; export const getProjectBoard = (state) => state.tracker.projectBoard; -export const getToggleTab = (state) => state.tracker.toggleTab +export const getToggleTab = (state) => state.tracker.toggleTab; +export const getValueModalType = (state) => state.tracker.modalType; export default projectsTrackerSlice.reducer;