diff --git a/src/App.js b/src/App.js index e459d6c9..400f14f3 100644 --- a/src/App.js +++ b/src/App.js @@ -35,6 +35,7 @@ import { AuthForCandidate } from "./pages/AuthForCandidate/AuthForCandidate"; import { RegistrationForCandidate } from "./pages/RegistrationForCandidate/RegistrationForCandidate"; import { ProfileCandidate } from "./pages/ProfileCandidate/ProfileCandidate"; import { PassingTests } from "./pages/quiz/PassingTests"; +import { ProjectTracker } from "./pages/ProjectTracker/ProjectTracker"; import "./assets/global.scss"; import "./fonts/stylesheet.css"; @@ -53,6 +54,7 @@ const App = () => { path="/tracker/:id" element={} > + }/> } /> { +export const ProjectTiket = ({ project, index }) => { const [modalSettings, setModalSettings] = useState(false); + const dispatch = useDispatch(); useEffect(() => { initListeners(); @@ -30,13 +36,25 @@ export const ProjectTiket = ({ project, index, setOpenProject }) => { } } + function removeProject() { + apiRequest('/project/update', { + method: 'PUT', + data: { + project_id: project.id, + status: 0 + } + }).then((res) => { + dispatch(deleteProject(project)) + }) + } + return (
-

setOpenProject(true)}>{project.name}

+ {project.name}

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

- {project.count} - + + {project.columns.reduce((accumulator, currentValue) => accumulator + currentValue.tasks.length, 0)} + {/*{project.columns.length ? '+' : ''}*/} setModalSettings(true)}> ... @@ -56,7 +74,8 @@ export const ProjectTiket = ({ project, index, setOpenProject }) => {

в архив

-
+

удалить

diff --git a/src/components/ProjectTiket/projectTiket.scss b/src/components/ProjectTiket/projectTiket.scss index e7042099..ed8f08e2 100644 --- a/src/components/ProjectTiket/projectTiket.scss +++ b/src/components/ProjectTiket/projectTiket.scss @@ -19,7 +19,7 @@ padding: 8px 13px 8px; } - h3 { + a { font-weight: 700; font-size: 18px; line-height: 32px; @@ -27,7 +27,12 @@ margin-bottom: 10px; overflow: hidden; white-space: nowrap; + display: flex; text-overflow: ellipsis; + + &:hover { + color: black; + } } &__info { diff --git a/src/components/UI/ModalAdd/modalAdd.scss b/src/components/UI/ModalAdd/modalAdd.scss index 71fc24db..8f60c092 100644 --- a/src/components/UI/ModalAdd/modalAdd.scss +++ b/src/components/UI/ModalAdd/modalAdd.scss @@ -20,7 +20,7 @@ padding: 60px 60px 30px 60px; display: flex; flex-direction: column; - align-items: flex-start; + align-items: center; justify-content: center; } @@ -34,14 +34,14 @@ height: 35px; background: #ffffff; border-radius: 8px; + margin-top: 12px; } h4 { font-weight: 500; - font-size: 22px; + font-size: 17px; line-height: 26px; color: #263238 !important; - margin-bottom: 22px !important; } &__decs { @@ -73,7 +73,7 @@ } .button-add { - margin: 20px 40% 0 0; + margin: 20px; width: 130px; height: 37px; background: #52b709; diff --git a/src/components/UI/ModalCreate/ModalCreate.js b/src/components/UI/ModalCreate/ModalCreate.js index de7d8813..8813a132 100644 --- a/src/components/UI/ModalCreate/ModalCreate.js +++ b/src/components/UI/ModalCreate/ModalCreate.js @@ -1,6 +1,7 @@ import React, { useState } from "react"; import { useDispatch } from "react-redux"; import { setProject } from "../../../redux/projectsTrackerSlice"; +import {apiRequest} from "../../../api/request"; import "./ModalCreate.scss"; @@ -12,13 +13,18 @@ export const ModalCreate = ({ active, setActive, title }) => { if (inputValue === "") { return; } else { - let newItem = { - name: inputValue, - count: 0, - }; - dispatch(setProject(newItem)); - setActive(false); - setInputValue(""); + apiRequest('/project/create', { + method: 'POST', + data: { + user_id: localStorage.getItem('id'), + name: inputValue, + status: 1, + } + }).then((res) => { + dispatch(setProject(res)); + setActive(false); + setInputValue(""); + }) } } diff --git a/src/components/UI/ModalTicket/ModalTicket.js b/src/components/UI/ModalTicket/ModalTicket.js index 89933e43..f1bbef71 100644 --- a/src/components/UI/ModalTicket/ModalTicket.js +++ b/src/components/UI/ModalTicket/ModalTicket.js @@ -1,11 +1,16 @@ import React, { useState } from "react"; +import { Link } from "react-router-dom"; +import ModalAdd from "../ModalAdd/ModalAdd"; +import {apiRequest} from "../../../api/request"; +import {useDispatch} from "react-redux"; +import { setProjectBoardFetch } from "../../../redux/projectsTrackerSlice"; import avatarMock1 from "../../../images/avatarMoсk1.png"; import avatarMock2 from "../../../images/avatarMoсk2.png"; import category from "../../../images/category.png"; import watch from "../../../images/watch.png"; import file from "../../../images/fileModal.svg"; -import task from "../../../images/tasksMock.png"; +import taskImg from "../../../images/tasksMock.png"; import arrow from "../../../images/arrowStart.png"; import link from "../../../images/link.svg"; import archive from "../../../images/archive.svg"; @@ -15,11 +20,10 @@ import send from "../../../images/send.svg"; import plus from "../../../images/plus.svg"; import fullScreen from "../../../images/inFullScreen.svg"; -import ModalAdd from "../ModalAdd/ModalAdd"; import "./ModalTicket.scss"; -import { Link } from "react-router-dom"; -export const ModalTiсket = ({ active, setActive, index }) => { +export const ModalTiсket = ({ active, setActive, task, projectId, projectName }) => { + const dispatch = useDispatch(); const [tiket] = useState({ name: "Разработка трекера", code: "PR - 2245", @@ -39,6 +43,19 @@ export const ModalTiсket = ({ active, setActive, index }) => { ]); const [addSubtask, setAddSubtask] = useState(false); + function deleteTask() { + apiRequest('/task/update-task', { + method: 'PUT', + data: { + task_id : task.id, + status: 0 + } + }).then((res) => { + setActive(false) + dispatch(setProjectBoardFetch(projectId)) + }) + } + return (
{

- Проект: {tiket.name} - + Проект: {projectName} +

Задача -
{tiket.code}
+
{task.title}
-

{tiket.descriptions}

- +

{task.description}

+

{tiket.descriptions}

@@ -90,8 +107,8 @@ export const ModalTiсket = ({ active, setActive, index }) => {
setActive(false)}> - {tiket.code} -

Создатель : {tiket.creator}

+ {task.title} +

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

{workers.map((worker, index) => { return ( @@ -134,7 +151,7 @@ export const ModalTiсket = ({ active, setActive, index }) => {

в архив

-
+

удалить

diff --git a/src/components/UI/ModalTicket/ModalTicket.scss b/src/components/UI/ModalTicket/ModalTicket.scss index f1983bd1..f1a7132f 100644 --- a/src/components/UI/ModalTicket/ModalTicket.scss +++ b/src/components/UI/ModalTicket/ModalTicket.scss @@ -18,7 +18,7 @@ .modal-tiket__content { background: #ffffff; - border: 1px solid #dde2e4; + //border: 1px solid #dde2e4; border-radius: 8px; display: flex; flex-direction: row; @@ -291,13 +291,14 @@ } &-bottom { - padding: 40px 0 75px 56px; + padding: 40px 110px 75px 56px; font-weight: 400; font-size: 14px; line-height: 38px; div { display: flex; + cursor: pointer; align-items: center; p { diff --git a/src/components/UI/TicketFullScreen/TicketFullScreen.js b/src/components/UI/TicketFullScreen/TicketFullScreen.js index 37a4b127..38b44a05 100644 --- a/src/components/UI/TicketFullScreen/TicketFullScreen.js +++ b/src/components/UI/TicketFullScreen/TicketFullScreen.js @@ -5,6 +5,8 @@ import { ProfileBreadcrumbs } from "../../ProfileBreadcrumbs/ProfileBreadcrumbs" import { Footer } from "../../Footer/Footer"; import { Link } from "react-router-dom"; import ModalAdd from "../ModalAdd/ModalAdd"; +import { useDispatch } from "react-redux"; +import {setToggleTab} from "../../../redux/projectsTrackerSlice"; import avatarMock1 from "../../../images/avatarMoсk1.png"; import avatarMock2 from "../../../images/avatarMoсk2.png"; @@ -28,10 +30,10 @@ import edit from "../../../images/edit.svg"; import "./ticketFullScreen.scss"; export const TicketFullScreen = ({}) => { - const [toggleTab, setToggleTab] = useState(1); const [addSubtask, setAddSubtask] = useState(false); const [modalAddWorker, setModalAddWorker] = useState(false); const [valueTiket, setValueTiket] = useState(""); + const dispatch = useDispatch(); const [tiket] = useState({ name: "Разработка трекера", @@ -52,7 +54,7 @@ export const TicketFullScreen = ({}) => { ]); const toggleTabs = (index) => { - setToggleTab(index); + dispatch(setToggleTab(index)); }; return ( @@ -71,31 +73,30 @@ export const TicketFullScreen = ({}) => {
-
toggleTabs(1)} > img

Проекты

-
-
+ toggleTabs(2)} > img - -

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

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

+ + toggleTabs(3)} > img - -

Архив

- -
+

Архив

+
diff --git a/src/pages/ProjectTracker/ProjectTracker.js b/src/pages/ProjectTracker/ProjectTracker.js new file mode 100644 index 00000000..3af6307f --- /dev/null +++ b/src/pages/ProjectTracker/ProjectTracker.js @@ -0,0 +1,417 @@ +import React, {useEffect, useRef, useState} from "react"; +import {Link} from "react-router-dom"; +import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader"; +import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"; +import { Footer } from "../../components/Footer/Footer"; + +import { useDispatch, useSelector } from "react-redux"; +import {getProjectBoard, moveProjectTask, setProjectBoardFetch, setToggleTab} from "../../redux/projectsTrackerSlice"; + +import ModalTicket from "../../components/UI/ModalTicket/ModalTicket"; +import ModalAdd from "../../components/UI/ModalAdd/ModalAdd"; + +import project from "../../images/trackerProject.svg"; +import tasks from "../../images/trackerTasks.svg"; +import archive from "../../images/archiveTracker.svg"; +import avatarTest from "../../images/AvatarTest .png"; +import selectArrow from "../../images/select.svg"; +import commentsBoard from "../../images/commentsBoard.svg"; +import filesBoard from "../../images/filesBoard.svg"; +import arrow from "../../images/arrowCalendar.png"; + +import {apiRequest} from "../../api/request"; +import { Navigation } from "../../components/Navigation/Navigation"; + +export const ProjectTracker = () => { + const dispatch = useDispatch(); + const currentUrl = useState(window.location.pathname) + const projectId = currentUrl[0].split('/').at(-1) + + useEffect(() => { + dispatch(setProjectBoardFetch(projectId)) + }, []) + + // 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 [selectedTab, setSelectedTab] = useState(0); + + const startWrapperIndexTest = useRef({}) + const [wrapperHover, setWrapperHover] = useState([ + false, + false, + false, + false, + ]); + + const projectBoard = useSelector(getProjectBoard); + + // 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((prevArray) => + prevArray.map((elem) => { + return false; + }) + ); + e.target.classList.remove("tasks__board__item__hide"); + } + + function dragOverHandler(e) { + e.preventDefault(); + } + + function dragEnterHandler(columnId) { + if (columnId === startWrapperIndexTest.current.index) { + return; + } + setWrapperHover((prevArray) => + prevArray.map((elem, index) => { + if (index === columnId) { + return true; + } else { + return false; + } + }) + ); + } + function dragDropHandler(e, columnId) { + e.preventDefault(); + if (startWrapperIndexTest.current.index === columnId) { + return; + } + setWrapperHover((prevArray) => + prevArray.map((elem) => { + return 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)) + }) + + setModalCreateTiket(false); + setValueTiket(""); + setDescriptionTicket("") + } + + 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(""); + setModalCreateColl(false); + } + + 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 + + + + +

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

+
+
+ Участвую + 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)} + > + + + + ... +
+
+ {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/pages/Tracker/Tracker.js b/src/pages/Tracker/Tracker.js index 4535d567..39e89014 100644 --- a/src/pages/Tracker/Tracker.js +++ b/src/pages/Tracker/Tracker.js @@ -1,141 +1,31 @@ -import React, { useEffect, useState } from "react"; +import React, {useEffect, useState} from "react"; import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader"; import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"; import { Footer } from "../../components/Footer/Footer"; import { useDispatch, useSelector } from "react-redux"; -import { getProjects } from "../../redux/projectsTrackerSlice"; +import { setAllProjects, getProjects, setToggleTab, getToggleTab } from "../../redux/projectsTrackerSlice"; -import ModalTicket from "../../components/UI/ModalTicket/ModalTicket"; import ModalCreate from "../../components/UI/ModalCreate/ModalCreate"; -import ModalAdd from "../../components/UI/ModalAdd/ModalAdd"; import ProjectTiket from "../../components/ProjectTiket/ProjectTiket"; import project from "../../images/trackerProject.svg"; import tasks from "../../images/trackerTasks.svg"; import archive from "../../images/archiveTracker.svg"; import avatarTest from "../../images/AvatarTest .png"; -import selectArrow from "../../images/select.svg"; -import commentsBoard from "../../images/commentsBoard.svg"; -import filesBoard from "../../images/filesBoard.svg"; import search from "../../images/serchIcon.png"; import noProjects from "../../images/noProjects.png"; -import arrow from "../../images/arrowCalendar.png"; -import "./tracker.scss"; +import {apiRequest} from "../../api/request"; import { Navigation } from "../../components/Navigation/Navigation"; -export const Tracker = () => { - const [toggleTab, setToggleTab] = useState(1); - const [tabTaskMok, setTabTaskMok] = useState([ - { - name: "Открытые", - open: false, - tasks: [ - { - task: "PR - 2245", - description: "Сверстать часть таблицы. Сверстать часть таблицы", - comments: 12, - files: 0, - avatarCreated: avatarTest, - avatarDo: avatarTest, - id: 1, - }, - { - task: "PR - 2245", - description: "Сверстать часть таблицы. Сверстать часть таблицы", - comments: 12, - files: 0, - avatarCreated: avatarTest, - avatarDo: avatarTest, - id: 2, - }, - ], - }, - { - name: "В процессе", - open: false, - tasks: [ - { - task: "PR - 2245", - description: "Сверстать часть таблицы. Сверстать часть таблицы", - comments: 12, - files: 0, - avatarCreated: avatarTest, - avatarDo: avatarTest, - id: 3, - }, - ], - }, - { - name: "На проверке", - open: false, - tasks: [ - { - task: "PR - 2245", - description: "Сверстать часть таблицы. Сверстать часть таблицы", - comments: 12, - files: 0, - avatarCreated: avatarTest, - avatarDo: avatarTest, - id: 4, - }, - { - task: "PR - 2245", - description: "Сверстать часть таблицы. Сверстать часть таблицы", - comments: 12, - files: 0, - avatarCreated: avatarTest, - avatarDo: avatarTest, - id: 5, - }, - { - task: "PR - 2245", - description: "Сверстать часть таблицы. Сверстать часть таблицы", - comments: 12, - files: 0, - avatarCreated: avatarTest, - avatarDo: avatarTest, - id: 6, - }, - { - task: "PR - 2245", - description: "Сверстать часть таблицы. Сверстать часть таблицы", - comments: 12, - files: 0, - avatarCreated: avatarTest, - avatarDo: avatarTest, - id: 9, - }, - ], - }, - { - name: "Готово", - open: false, - tasks: [ - { - task: "PR - 2245", - description: "Сверстать часть таблицы. Сверстать часть таблицы", - comments: 12, - files: 0, - avatarCreated: avatarTest, - avatarDo: avatarTest, - id: 7, - }, - { - task: "PR - 2245", - description: "Сверстать часть таблицы. Сверстать часть таблицы", - comments: 12, - files: 0, - avatarCreated: avatarTest, - avatarDo: avatarTest, - id: 8, - }, - ], - }, - ]); +import "./tracker.scss"; +export const Tracker = () => { + const dispatch = useDispatch(); + const projects = useSelector(getProjects); + const tab = useSelector(getToggleTab) const [allTasks] = useState([ { name: "PR - 2245", @@ -359,116 +249,18 @@ export const Tracker = () => { const [filterCompleteTasks, setFilterCompleteTasks] = useState(completeTasks); // Modal State - const [modalActiveTicket, setModalActiveTicket] = useState(false); - const [indexTicket, setIndexTicket] = useState(0); - const [modalAddWorker, setModalAddWorker] = useState(false); const [modalCreateProject, setModalCreateProject] = useState(false); - const [modalCreateColl, setModalCreateColl] = useState(false); - const [modalCreateTiket, setModalCreateTiket] = useState(false); - const [valueTiket, setValueTiket] = useState(""); - const [valueColl, setValueColl] = useState(""); - // - const [projectTasksOpen, setProjectTasksOpen] = useState(false); - - const [selectedTab, setSelectedTab] = useState({ - name: "", - indexTab: 0, - task: [], - }); - - const [startWrapperIndex, setStartWrapperIndex] = useState(null); - const [wrapperHover, setWrapperHover] = useState([ - false, - false, - false, - false, - ]); - - const projects = useSelector(getProjects); + useEffect(() => { + apiRequest(`/project/project-list?user_id=${localStorage.getItem('id')}&expand=columns`).then((el) => { + dispatch(setAllProjects(el.projects)) + }) + }, []) const toggleTabs = (index) => { - if (projectTasksOpen) { - setProjectTasksOpen(false); - } - setToggleTab(index); + dispatch(setToggleTab(index)) }; - function toggleMoreTasks(wrapperIndex) { - setTabTaskMok((prevArray) => - prevArray.map((elem, index) => { - if (wrapperIndex === index) { - return { ...elem, open: !elem.open }; - } else { - return elem; - } - }) - ); - } - - function dragStartHandler(e, task, wrapperIndex) { - setStartWrapperIndex({ task: task, index: wrapperIndex }); - setTimeout(() => { - e.target.classList.add("tasks__board__item__hide"); - }, 0); - } - - function dragEndHandler(e) { - setWrapperHover((prevArray) => - prevArray.map((elem) => { - return false; - }) - ); - e.target.classList.remove("tasks__board__item__hide"); - } - - function dragOverHandler(e) { - e.preventDefault(); - } - - function dragEnterHandler(wrapperIndex) { - if (wrapperIndex === startWrapperIndex.index) { - return; - } - setWrapperHover((prevArray) => - prevArray.map((elem, index) => { - if (index === wrapperIndex) { - return true; - } else { - return false; - } - }) - ); - } - - function dragDropHandler(e, wrapperIndex) { - e.preventDefault(); - if (startWrapperIndex.index === wrapperIndex) { - return; - } - setWrapperHover((prevArray) => - prevArray.map((elem) => { - return false; - }) - ); - setTabTaskMok((prevArray) => - prevArray.map((elem, index) => { - if (index === wrapperIndex) { - return { ...elem, tasks: [...elem.tasks, startWrapperIndex.task] }; - } else if (index === startWrapperIndex.index) { - return { - ...elem, - tasks: elem.tasks.filter((item) => { - return item.id !== startWrapperIndex.task.id; - }), - }; - } else { - return elem; - } - }) - ); - } - function filterArchiveTasks(e) { setFilterCompleteTasks( completeTasks.filter((item) => { @@ -487,55 +279,6 @@ export const Tracker = () => { ); } - function selectedTabTask(e, wrapperIndex, name, tasks) { - let tab = { name: name, indexTab: wrapperIndex, task: tasks }; - setSelectedTab(tab); - setModalCreateTiket(true); - } - - function openTicket(e, iTicket) { - setIndexTicket(iTicket); - setModalActiveTicket(true); - } - - function createTiket() { - tabTaskMok.filter((item) => { - if (item.name == selectedTab.name) { - let idItem = 0; - - item.tasks.forEach((item) => { - idItem = item.id; - }); - - let newTiket = { - task: valueTiket, - description: "Сверстать часть таблицы. Сверстать часть таблицы", - comments: 0, - files: 0, - avatarCreated: avatarTest, - avatarDo: avatarTest, - id: idItem + 1, - }; - - item.tasks.push(newTiket); - } - }); - setModalCreateTiket(false); - setValueTiket(""); - } - - function createTab() { - let newTab = { - name: valueColl, - open: false, - tasks: [], - }; - - tabTaskMok.unshift(newTab); - setValueColl(""); - setModalCreateColl(false); - } - return (
@@ -554,21 +297,21 @@ export const Tracker = () => {
toggleTabs(1)} > img

Проекты

toggleTabs(2)} > img

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

toggleTabs(3)} > img @@ -578,7 +321,7 @@ export const Tracker = () => {
{ /> {Boolean(projects.length) && - !projectTasksOpen && projects.map((project, index) => { return ( ); })} - {!Boolean(projects.length) && !projectTasksOpen && ( + {!Boolean(projects.length) && (
@@ -620,7 +361,7 @@ export const Tracker = () => {

)} - {Boolean(projects.length) && !projectTasksOpen && ( + {Boolean(projects.length) && (
-
-
-

Проект : Разработка трекера

- - -
-

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

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

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

-

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

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

добавить задачу в проект

-
-
- avatar - avatar - +9 - - + - -

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

-
-
- Учавствую - arrow -
-
- Мои - arrow -
-
setProjectTasksOpen(false)} - > -

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

- arrow -
-
-
- - - - -
-

Введите название карточки

-
- setValueTiket(e.target.value)} - > -
-
- - - -
- {tabTaskMok.map((section, wrapperIndex) => { - return ( -
dragOverHandler(e)} - onDragEnter={(e) => dragEnterHandler(wrapperIndex)} - onDrop={(e) => dragDropHandler(e, wrapperIndex)} - className={`tasks__board ${ - section.tasks.length >= 3 ? "tasks__board__more" : "" - } ${ - wrapperHover[wrapperIndex] ? "tasks__board__hover" : "" - }`} - > -
- - {section.name} - -
- - selectedTabTask( - e, - wrapperIndex, - section.name, - section.tasks - ) - } - > - + - - ... -
-
- {section.tasks.map((task, index) => { - if (index > 2) { - if (!section.open) { - return; - } - } - return ( -
- dragStartHandler(e, task, wrapperIndex) - } - onDragEnd={(e) => dragEndHandler(e)} - onClick={(e) => openTicket(e, index)} - > -
-

{task.task}

-
-

- {task.description} -

-
-
- commentsImg - {task.comments} коментариев -
-
- filesImg - {task.files} файлов -
-
- avatar - avatar -
-
-
- ); - })} - {section.tasks.length > 3 && ( - toggleMoreTasks(wrapperIndex)} - > - {section.open ? "-" : "+"} - - )} -
- ); - })} -
-
-
{
+ apiRequest(`/project/get-project?project_id=${id}&expand=columns`) +); + export const projectsTrackerSlice = createSlice({ name: "projectsTracker", initialState, reducers: { - setProject: (state, action) => { - state.project.push(action.payload); + setAllProjects: (state, action) => { + state.projects = action.payload }, + setProject: (state, action) => { + state.projects.push(action.payload); + }, + setToggleTab: (state, action) => { + state.toggleTab = action.payload + }, + deleteProject: (state, action) => { + 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) + apiRequest(`/task/update-task`, { + method: 'PUT', + data: { + task_id: action.payload.startWrapperIndex.task.id, + 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); + } + }) + } }, + extraReducers: { + [setProjectBoardFetch.fulfilled]: (state, action) => { + state.projectBoard = action.payload + } + } }); -export const { setProject } = projectsTrackerSlice.actions; +export const { setProject, deleteProject, setAllProjects, moveProjectTask, setToggleTab } = projectsTrackerSlice.actions; -export const getProjects = (state) => state.tracker.project; +export const getProjects = (state) => state.tracker.projects; +export const getProjectBoard = (state) => state.tracker.projectBoard; +export const getToggleTab = (state) => state.tracker.toggleTab export default projectsTrackerSlice.reducer;