From 88162816c5e3a03fa488fb4794ec5c4a193e4694 Mon Sep 17 00:00:00 2001 From: M1kola Date: Thu, 27 Apr 2023 14:51:01 +0300 Subject: [PATCH 1/5] tracker --- src/components/UI/ModalCreate/ModalCreate.js | 18 +++++++++++++++--- src/pages/Tracker/Tracker.js | 17 +++++++++++++---- src/pages/Tracker/tracker.scss | 4 +++- 3 files changed, 31 insertions(+), 8 deletions(-) diff --git a/src/components/UI/ModalCreate/ModalCreate.js b/src/components/UI/ModalCreate/ModalCreate.js index de7d8813..47ac2d03 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"; @@ -16,9 +17,20 @@ export const ModalCreate = ({ active, setActive, title }) => { 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, + // description: '', + // company_id: 3 + } + }).then((res) => { + dispatch(setProject(newItem)); + setActive(false); + setInputValue(""); + }) } } diff --git a/src/pages/Tracker/Tracker.js b/src/pages/Tracker/Tracker.js index 4535d567..fac2d70d 100644 --- a/src/pages/Tracker/Tracker.js +++ b/src/pages/Tracker/Tracker.js @@ -23,9 +23,12 @@ 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"; + +import "./tracker.scss"; + export const Tracker = () => { const [toggleTab, setToggleTab] = useState(1); const [tabTaskMok, setTabTaskMok] = useState([ @@ -385,6 +388,12 @@ export const Tracker = () => { false, ]); + useEffect(() => { + apiRequest(`/project/project-list?user_id=${localStorage.getItem('id')}&expand=columns`).then((el) => { + + }) + }, []) + const projects = useSelector(getProjects); const toggleTabs = (index) => { @@ -689,7 +698,7 @@ export const Tracker = () => {
setModalCreateColl(true)}>+ -

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

+

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

avatar @@ -698,10 +707,10 @@ export const Tracker = () => { + -

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

+

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

- Учавствую + Участвую arrow
diff --git a/src/pages/Tracker/tracker.scss b/src/pages/Tracker/tracker.scss index bc765bdc..9aefe3cb 100644 --- a/src/pages/Tracker/tracker.scss +++ b/src/pages/Tracker/tracker.scss @@ -250,6 +250,8 @@ font-size: 14px; line-height: 17px; max-width: 120px; + display: flex; + align-items: center; } } @@ -294,7 +296,7 @@ background: #00c5a8; color: white; font-size: 14px; - left: -35px; + left: -30px; z-index: 1; } From eeca39671a595054377ce43f41c1db5aa6d3a01e Mon Sep 17 00:00:00 2001 From: M1kola Date: Fri, 28 Apr 2023 14:56:59 +0300 Subject: [PATCH 2/5] tracker-connect --- src/components/ProjectTiket/ProjectTiket.js | 14 +- src/components/UI/ModalAdd/modalAdd.scss | 8 +- src/components/UI/ModalCreate/ModalCreate.js | 8 +- src/pages/Tracker/Tracker.js | 220 +++++++++++-------- src/pages/Tracker/tracker.scss | 3 + src/redux/projectsTrackerSlice.js | 53 +++-- 6 files changed, 179 insertions(+), 127 deletions(-) diff --git a/src/components/ProjectTiket/ProjectTiket.js b/src/components/ProjectTiket/ProjectTiket.js index 33e9ed7b..9d11c406 100644 --- a/src/components/ProjectTiket/ProjectTiket.js +++ b/src/components/ProjectTiket/ProjectTiket.js @@ -6,10 +6,15 @@ 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 { setProjectBoardFetch } from "../../redux/projectsTrackerSlice"; + import "./projectTiket.scss"; export const ProjectTiket = ({ project, index, setOpenProject }) => { const [modalSettings, setModalSettings] = useState(false); + const dispatch = useDispatch(); useEffect(() => { initListeners(); @@ -32,11 +37,14 @@ export const ProjectTiket = ({ project, index, setOpenProject }) => { return (
-

setOpenProject(true)}>{project.name}

+

{ + setOpenProject(true) + dispatch(setProjectBoardFetch(project.id)) + }}>{project.name}

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

- {project.count} - + + - + {/*{project.columns.length ? '+' : ''}*/} setModalSettings(true)}> ... 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 47ac2d03..8813a132 100644 --- a/src/components/UI/ModalCreate/ModalCreate.js +++ b/src/components/UI/ModalCreate/ModalCreate.js @@ -13,21 +13,15 @@ export const ModalCreate = ({ active, setActive, title }) => { if (inputValue === "") { return; } else { - let newItem = { - name: inputValue, - count: 0, - }; apiRequest('/project/create', { method: 'POST', data: { user_id: localStorage.getItem('id'), name: inputValue, status: 1, - // description: '', - // company_id: 3 } }).then((res) => { - dispatch(setProject(newItem)); + dispatch(setProject(res)); setActive(false); setInputValue(""); }) diff --git a/src/pages/Tracker/Tracker.js b/src/pages/Tracker/Tracker.js index fac2d70d..08bbb2c7 100644 --- a/src/pages/Tracker/Tracker.js +++ b/src/pages/Tracker/Tracker.js @@ -1,11 +1,11 @@ -import React, { useEffect, useState } from "react"; +import React, {useEffect, useRef, 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, getProjectBoard, moveProjectTask, setProjectBoardFetch } from "../../redux/projectsTrackerSlice"; import ModalTicket from "../../components/UI/ModalTicket/ModalTicket"; import ModalCreate from "../../components/UI/ModalCreate/ModalCreate"; @@ -26,10 +26,10 @@ import arrow from "../../images/arrowCalendar.png"; import {apiRequest} from "../../api/request"; import { Navigation } from "../../components/Navigation/Navigation"; - import "./tracker.scss"; export const Tracker = () => { + const dispatch = useDispatch(); const [toggleTab, setToggleTab] = useState(1); const [tabTaskMok, setTabTaskMok] = useState([ { @@ -369,18 +369,16 @@ export const Tracker = () => { const [modalCreateColl, setModalCreateColl] = useState(false); const [modalCreateTiket, setModalCreateTiket] = useState(false); const [valueTiket, setValueTiket] = useState(""); + const [descriptionTicket, setDescriptionTicket] = useState("") const [valueColl, setValueColl] = useState(""); // const [projectTasksOpen, setProjectTasksOpen] = useState(false); - const [selectedTab, setSelectedTab] = useState({ - name: "", - indexTab: 0, - task: [], - }); + const [selectedTab, setSelectedTab] = useState(0); const [startWrapperIndex, setStartWrapperIndex] = useState(null); + const startWrapperIndexTest = useRef({}) const [wrapperHover, setWrapperHover] = useState([ false, false, @@ -390,11 +388,12 @@ export const Tracker = () => { useEffect(() => { apiRequest(`/project/project-list?user_id=${localStorage.getItem('id')}&expand=columns`).then((el) => { - + dispatch(setAllProjects(el.projects)) }) }, []) const projects = useSelector(getProjects); + const projectBoard = useSelector(getProjectBoard); const toggleTabs = (index) => { if (projectTasksOpen) { @@ -403,10 +402,10 @@ export const Tracker = () => { setToggleTab(index); }; - function toggleMoreTasks(wrapperIndex) { + function toggleMoreTasks(columnId) { setTabTaskMok((prevArray) => prevArray.map((elem, index) => { - if (wrapperIndex === index) { + if (columnId === index) { return { ...elem, open: !elem.open }; } else { return elem; @@ -415,8 +414,9 @@ export const Tracker = () => { ); } - function dragStartHandler(e, task, wrapperIndex) { - setStartWrapperIndex({ task: task, index: wrapperIndex }); + function dragStartHandler(e, task, columnId) { + // setStartWrapperIndex({ task: task, index: columnId }); + startWrapperIndexTest.current = { task: task, index: columnId }; setTimeout(() => { e.target.classList.add("tasks__board__item__hide"); }, 0); @@ -435,13 +435,13 @@ export const Tracker = () => { e.preventDefault(); } - function dragEnterHandler(wrapperIndex) { - if (wrapperIndex === startWrapperIndex.index) { + function dragEnterHandler(columnId) { + if (columnId === startWrapperIndexTest.current.index) { return; } setWrapperHover((prevArray) => prevArray.map((elem, index) => { - if (index === wrapperIndex) { + if (index === columnId) { return true; } else { return false; @@ -450,9 +450,9 @@ export const Tracker = () => { ); } - function dragDropHandler(e, wrapperIndex) { + function dragDropHandler(e, columnId) { e.preventDefault(); - if (startWrapperIndex.index === wrapperIndex) { + if (startWrapperIndexTest.current.index === columnId) { return; } setWrapperHover((prevArray) => @@ -460,22 +460,27 @@ export const Tracker = () => { 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; - } - }) - ); + + if (columnId !== startWrapperIndexTest.current.index) { + dispatch(moveProjectTask({startWrapperIndex:startWrapperIndexTest.current, columnId})) + } + + // setTabTaskMok((prevArray) => + // prevArray.map((elem, index) => { + // if (index === columnId) { + // 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) { @@ -496,9 +501,8 @@ export const Tracker = () => { ); } - function selectedTabTask(e, wrapperIndex, name, tasks) { - let tab = { name: name, indexTab: wrapperIndex, task: tasks }; - setSelectedTab(tab); + function selectedTabTask(columnId) { + setSelectedTab(columnId); setModalCreateTiket(true); } @@ -508,39 +512,64 @@ export const Tracker = () => { } function createTiket() { - tabTaskMok.filter((item) => { - if (item.name == selectedTab.name) { - let idItem = 0; + if (!valueTiket || !descriptionTicket) { + return + } - 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); + 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("") + // tabTaskMok.filter((item) => { + // if (item.name == selectedTab.name) { + // let idItem = 0; + // + // item.tasks.forEach((item) => { + // idItem = item.id; + // }); + // + // let newTiket = { + // task: valueTiket, + // description: descriptionTicket, + // comments: 0, + // files: 0, + // avatarCreated: avatarTest, + // avatarDo: avatarTest, + // id: idItem + 1, + // }; + // + // item.tasks.push(newTiket); + // } + // }); } function createTab() { - let newTab = { - name: valueColl, - open: false, - tasks: [], - }; + if (!valueColl) { + return + } - tabTaskMok.unshift(newTab); + apiRequest('/project-column/create-column', { + method: 'POST', + data: { + project_id: projectBoard.id, + title: valueColl + } + }).then((res) => { + dispatch(setProjectBoardFetch(projectBoard.id)) + }) setValueColl(""); setModalCreateColl(false); } @@ -653,7 +682,7 @@ export const Tracker = () => { >
-

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

+

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

{
-

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

+

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

setValueTiket(e.target.value)} + placeholder='Название задачи' + > +
+
+ setDescriptionTicket(e.target.value)} + placeholder='Описание задачи' >
@@ -750,59 +788,53 @@ export const Tracker = () => {
- {tabTaskMok.map((section, wrapperIndex) => { + {Boolean(projectBoard?.columns) && Boolean(projectBoard.columns.length) && projectBoard.columns.map((column) => { return (
dragOverHandler(e)} - onDragEnter={(e) => dragEnterHandler(wrapperIndex)} - onDrop={(e) => dragDropHandler(e, wrapperIndex)} + onDragEnter={(e) => dragEnterHandler(column.id)} + onDrop={(e) => dragDropHandler(e, column.id)} className={`tasks__board ${ - section.tasks.length >= 3 ? "tasks__board__more" : "" + column.tasks.length >= 3 ? "tasks__board__more" : "" } ${ - wrapperHover[wrapperIndex] ? "tasks__board__hover" : "" + wrapperHover[column.id] ? "tasks__board__hover" : "" }`} >
- - {section.name} + {/**/} + + {column.title}
- selectedTabTask( - e, - wrapperIndex, - section.name, - section.tasks - ) - } + onClick={() => selectedTabTask(column.id)} > + ...
- {section.tasks.map((task, index) => { + {column.tasks.map((task, index) => { if (index > 2) { - if (!section.open) { + if (!column.open) { return; } } return (
- dragStartHandler(e, task, wrapperIndex) + dragStartHandler(e, task, column.id) } onDragEnd={(e) => dragEndHandler(e)} - onClick={(e) => openTicket(e, index)} + onClick={(e) => openTicket(e, task.id)} >
-

{task.task}

+

{task.title}

{task.description} @@ -816,24 +848,24 @@ export const Tracker = () => { filesImg {task.files} файлов

-
- avatar - avatar -
+ {/*
*/} + {/* avatar*/} + {/* avatar*/} + {/*
*/}
); })} - {section.tasks.length > 3 && ( + {column.tasks.length > 3 && ( toggleMoreTasks(wrapperIndex)} + onClick={() => toggleMoreTasks(column.id)} > - {section.open ? "-" : "+"} + {column.open ? "-" : "+"} )}
diff --git a/src/pages/Tracker/tracker.scss b/src/pages/Tracker/tracker.scss index 9aefe3cb..87226a4b 100644 --- a/src/pages/Tracker/tracker.scss +++ b/src/pages/Tracker/tracker.scss @@ -397,6 +397,9 @@ border-radius: 6px; background: #ffffff; cursor: pointer; + display: flex; + flex-direction: column; + justify-content: space-between; &__hide { opacity: 0; diff --git a/src/redux/projectsTrackerSlice.js b/src/redux/projectsTrackerSlice.js index c35991bf..62465064 100644 --- a/src/redux/projectsTrackerSlice.js +++ b/src/redux/projectsTrackerSlice.js @@ -1,34 +1,49 @@ -import { createSlice } from "@reduxjs/toolkit"; +import { createAsyncThunk, createSlice } from "@reduxjs/toolkit"; +import {apiRequest} from "../api/request"; +import {act} from "@testing-library/react"; const initialState = { - project: [ - { - name: "Разработка трекера", - count: 4, - }, - { - name: "Кинотеатр", - count: 4, - }, - { - name: "Проект страхование", - count: 4, - }, - ], + projects: [], + projectBoard: {} }; +export const setProjectBoardFetch = createAsyncThunk( + 'userInfo', + (id) => + 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); + }, + moveProjectTask: (state, action) => { + state.projectBoard.columns.forEach((column) => { + if (column.id === action.payload.columnId) { + column.tasks.push(action.payload.startWrapperIndex.task) + } + if (column.id === action.payload.startWrapperIndex.index) { + column.tasks.splice(column.tasks.indexOf(action.payload.startWrapperIndex.task), 1) + } + }) + } }, + extraReducers: { + [setProjectBoardFetch.fulfilled]: (state, action) => { + state.projectBoard = action.payload + } + } }); -export const { setProject } = projectsTrackerSlice.actions; +export const { setProject, setAllProjects, moveProjectTask } = projectsTrackerSlice.actions; -export const getProjects = (state) => state.tracker.project; +export const getProjects = (state) => state.tracker.projects; +export const getProjectBoard = (state) => state.tracker.projectBoard; export default projectsTrackerSlice.reducer; From 879a42f3b4b59f03a73a45663eddbd0f2b020041 Mon Sep 17 00:00:00 2001 From: Z1chi Date: Fri, 28 Apr 2023 16:15:46 +0300 Subject: [PATCH 3/5] =?UTF-8?q?=D0=A3=D0=B4=D0=B0=D0=BB=D0=B5=D0=BD=D0=B8?= =?UTF-8?q?=D0=B5=20=D1=82=D0=B0=D1=81=D0=BA=D0=B8=20=D1=81=20=D0=BA=D0=BE?= =?UTF-8?q?=D0=BB=D0=BE=D0=BD=D0=BA=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Tracker/Tracker.js | 151 +----------------------------- src/redux/projectsTrackerSlice.js | 5 +- 2 files changed, 3 insertions(+), 153 deletions(-) diff --git a/src/pages/Tracker/Tracker.js b/src/pages/Tracker/Tracker.js index 08bbb2c7..2227bb5c 100644 --- a/src/pages/Tracker/Tracker.js +++ b/src/pages/Tracker/Tracker.js @@ -31,114 +31,6 @@ import "./tracker.scss"; export const Tracker = () => { const dispatch = useDispatch(); 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, - }, - ], - }, - ]); - const [allTasks] = useState([ { name: "PR - 2245", @@ -377,7 +269,6 @@ export const Tracker = () => { const [selectedTab, setSelectedTab] = useState(0); - const [startWrapperIndex, setStartWrapperIndex] = useState(null); const startWrapperIndexTest = useRef({}) const [wrapperHover, setWrapperHover] = useState([ false, @@ -415,7 +306,6 @@ export const Tracker = () => { } function dragStartHandler(e, task, columnId) { - // setStartWrapperIndex({ task: task, index: columnId }); startWrapperIndexTest.current = { task: task, index: columnId }; setTimeout(() => { e.target.classList.add("tasks__board__item__hide"); @@ -449,7 +339,6 @@ export const Tracker = () => { }) ); } - function dragDropHandler(e, columnId) { e.preventDefault(); if (startWrapperIndexTest.current.index === columnId) { @@ -462,25 +351,8 @@ export const Tracker = () => { ); if (columnId !== startWrapperIndexTest.current.index) { - dispatch(moveProjectTask({startWrapperIndex:startWrapperIndexTest.current, columnId})) + dispatch(moveProjectTask({startWrapperIndex: startWrapperIndexTest.current, columnId})) } - - // setTabTaskMok((prevArray) => - // prevArray.map((elem, index) => { - // if (index === columnId) { - // 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) { @@ -533,27 +405,6 @@ export const Tracker = () => { setModalCreateTiket(false); setValueTiket(""); setDescriptionTicket("") - // tabTaskMok.filter((item) => { - // if (item.name == selectedTab.name) { - // let idItem = 0; - // - // item.tasks.forEach((item) => { - // idItem = item.id; - // }); - // - // let newTiket = { - // task: valueTiket, - // description: descriptionTicket, - // comments: 0, - // files: 0, - // avatarCreated: avatarTest, - // avatarDo: avatarTest, - // id: idItem + 1, - // }; - // - // item.tasks.push(newTiket); - // } - // }); } function createTab() { diff --git a/src/redux/projectsTrackerSlice.js b/src/redux/projectsTrackerSlice.js index 62465064..779ea66c 100644 --- a/src/redux/projectsTrackerSlice.js +++ b/src/redux/projectsTrackerSlice.js @@ -1,6 +1,5 @@ import { createAsyncThunk, createSlice } from "@reduxjs/toolkit"; import {apiRequest} from "../api/request"; -import {act} from "@testing-library/react"; const initialState = { projects: [], @@ -24,12 +23,12 @@ export const projectsTrackerSlice = createSlice({ state.projects.push(action.payload); }, moveProjectTask: (state, action) => { - state.projectBoard.columns.forEach((column) => { + state.projectBoard.columns.forEach((column, index) => { if (column.id === action.payload.columnId) { column.tasks.push(action.payload.startWrapperIndex.task) } if (column.id === action.payload.startWrapperIndex.index) { - column.tasks.splice(column.tasks.indexOf(action.payload.startWrapperIndex.task), 1) + state.projectBoard.columns[index].tasks = column.tasks.filter((task)=> task.id !== action.payload.startWrapperIndex.task.id); } }) } From 9152aa1adc245b2a89d3faa6db2012f208a20fad Mon Sep 17 00:00:00 2001 From: M1kola Date: Fri, 28 Apr 2023 18:29:13 +0300 Subject: [PATCH 4/5] tracker-connect --- src/components/ProjectTiket/ProjectTiket.js | 21 ++++++++-- src/components/UI/ModalTicket/ModalTicket.js | 41 +++++++++++++------ .../UI/ModalTicket/ModalTicket.scss | 5 ++- src/pages/Tracker/Tracker.js | 12 +++--- src/redux/projectsTrackerSlice.js | 14 ++++++- 5 files changed, 69 insertions(+), 24 deletions(-) diff --git a/src/components/ProjectTiket/ProjectTiket.js b/src/components/ProjectTiket/ProjectTiket.js index 9d11c406..53df6e24 100644 --- a/src/components/ProjectTiket/ProjectTiket.js +++ b/src/components/ProjectTiket/ProjectTiket.js @@ -6,9 +6,9 @@ import archiveSet from "../../images/archive.svg"; import del from "../../images/delete.svg"; import edit from "../../images/edit.svg"; -// import {apiRequest} from "../../api/request"; +import {apiRequest} from "../../api/request"; import {useDispatch} from "react-redux"; -import { setProjectBoardFetch } from "../../redux/projectsTrackerSlice"; +import { deleteProject, setProjectBoardFetch } from "../../redux/projectsTrackerSlice"; import "./projectTiket.scss"; @@ -35,6 +35,18 @@ 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 (

{ @@ -52,7 +64,7 @@ export const ProjectTiket = ({ project, index, setOpenProject }) => {
-
+
console.log(project)}>

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

@@ -64,7 +76,8 @@ export const ProjectTiket = ({ project, index, setOpenProject }) => {

в архив

-
+

удалить

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/pages/Tracker/Tracker.js b/src/pages/Tracker/Tracker.js index 2227bb5c..d44d98b3 100644 --- a/src/pages/Tracker/Tracker.js +++ b/src/pages/Tracker/Tracker.js @@ -255,7 +255,7 @@ export const Tracker = () => { // Modal State const [modalActiveTicket, setModalActiveTicket] = useState(false); - const [indexTicket, setIndexTicket] = useState(0); + const [selectedTicket, setSelectedTicket] = useState({}); const [modalAddWorker, setModalAddWorker] = useState(false); const [modalCreateProject, setModalCreateProject] = useState(false); const [modalCreateColl, setModalCreateColl] = useState(false); @@ -378,8 +378,8 @@ export const Tracker = () => { setModalCreateTiket(true); } - function openTicket(e, iTicket) { - setIndexTicket(iTicket); + function openTicket(e, task) { + setSelectedTicket(task); setModalActiveTicket(true); } @@ -610,7 +610,9 @@ export const Tracker = () => { @@ -682,7 +684,7 @@ export const Tracker = () => { dragStartHandler(e, task, column.id) } onDragEnd={(e) => dragEndHandler(e)} - onClick={(e) => openTicket(e, task.id)} + onClick={(e) => openTicket(e, task)} >

{task.title}

diff --git a/src/redux/projectsTrackerSlice.js b/src/redux/projectsTrackerSlice.js index 779ea66c..544dea1c 100644 --- a/src/redux/projectsTrackerSlice.js +++ b/src/redux/projectsTrackerSlice.js @@ -22,10 +22,22 @@ export const projectsTrackerSlice = createSlice({ setProject: (state, action) => { state.projects.push(action.payload); }, + deleteProject: (state, action) => { + console.log(action.payload) + 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); @@ -40,7 +52,7 @@ export const projectsTrackerSlice = createSlice({ } }); -export const { setProject, setAllProjects, moveProjectTask } = projectsTrackerSlice.actions; +export const { setProject, deleteProject, setAllProjects, moveProjectTask } = projectsTrackerSlice.actions; export const getProjects = (state) => state.tracker.projects; export const getProjectBoard = (state) => state.tracker.projectBoard; From d0506441b8ef9c8a17ed0e69af0fba30dc9fa209 Mon Sep 17 00:00:00 2001 From: M1kola Date: Tue, 2 May 2023 18:51:19 +0300 Subject: [PATCH 5/5] tracker-connect --- src/App.js | 2 + src/components/ProjectTiket/ProjectTiket.js | 14 +- src/components/ProjectTiket/projectTiket.scss | 7 +- .../UI/TicketFullScreen/TicketFullScreen.js | 35 +- src/pages/ProjectTracker/ProjectTracker.js | 417 ++++++++++++++++++ src/pages/Tracker/Tracker.js | 376 +--------------- src/pages/Tracker/tracker.scss | 2 + src/redux/projectsTrackerSlice.js | 10 +- 8 files changed, 471 insertions(+), 392 deletions(-) create mode 100644 src/pages/ProjectTracker/ProjectTracker.js 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(); @@ -49,13 +50,10 @@ export const ProjectTiket = ({ project, index, setOpenProject }) => { return (
-

{ - setOpenProject(true) - dispatch(setProjectBoardFetch(project.id)) - }}>{project.name}

+ {project.name}

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

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

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

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/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 d44d98b3..39e89014 100644 --- a/src/pages/Tracker/Tracker.js +++ b/src/pages/Tracker/Tracker.js @@ -1,27 +1,21 @@ -import React, {useEffect, useRef, 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 { setAllProjects, getProjects, getProjectBoard, moveProjectTask, setProjectBoardFetch } 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 {apiRequest} from "../../api/request"; import { Navigation } from "../../components/Navigation/Navigation"; @@ -30,7 +24,8 @@ import "./tracker.scss"; export const Tracker = () => { const dispatch = useDispatch(); - const [toggleTab, setToggleTab] = useState(1); + const projects = useSelector(getProjects); + const tab = useSelector(getToggleTab) const [allTasks] = useState([ { name: "PR - 2245", @@ -254,28 +249,7 @@ export const Tracker = () => { const [filterCompleteTasks, setFilterCompleteTasks] = useState(completeTasks); // Modal State - const [modalActiveTicket, setModalActiveTicket] = useState(false); - const [selectedTicket, setSelectedTicket] = useState({}); - 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 [descriptionTicket, setDescriptionTicket] = useState("") - const [valueColl, setValueColl] = useState(""); - // - - const [projectTasksOpen, setProjectTasksOpen] = useState(false); - - const [selectedTab, setSelectedTab] = useState(0); - - const startWrapperIndexTest = useRef({}) - const [wrapperHover, setWrapperHover] = useState([ - false, - false, - false, - false, - ]); useEffect(() => { apiRequest(`/project/project-list?user_id=${localStorage.getItem('id')}&expand=columns`).then((el) => { @@ -283,78 +257,10 @@ export const Tracker = () => { }) }, []) - const projects = useSelector(getProjects); - const projectBoard = useSelector(getProjectBoard); - const toggleTabs = (index) => { - if (projectTasksOpen) { - setProjectTasksOpen(false); - } - setToggleTab(index); + dispatch(setToggleTab(index)) }; - 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 filterArchiveTasks(e) { setFilterCompleteTasks( completeTasks.filter((item) => { @@ -373,58 +279,6 @@ export const Tracker = () => { ); } - 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 (
@@ -443,21 +297,21 @@ export const Tracker = () => {
toggleTabs(1)} > img

Проекты

toggleTabs(2)} > img

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

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

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

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

- - -
-

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

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

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

-

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

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

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

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

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

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

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

- 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 ? "-" : "+"} - - )} -
- ); - })} -
-
-
{
{ state.projects.push(action.payload); }, + setToggleTab: (state, action) => { + state.toggleTab = action.payload + }, deleteProject: (state, action) => { - console.log(action.payload) state.projects = state.projects.filter((project) => project.id !== action.payload.id) }, moveProjectTask: (state, action) => { @@ -52,9 +55,10 @@ export const projectsTrackerSlice = createSlice({ } }); -export const { setProject, deleteProject, setAllProjects, moveProjectTask } = projectsTrackerSlice.actions; +export const { setProject, deleteProject, setAllProjects, moveProjectTask, setToggleTab } = projectsTrackerSlice.actions; 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;