diff --git a/src/components/UI/ModalCreate/ModalCreate.js b/src/components/UI/ModalCreate/ModalCreate.js new file mode 100644 index 00000000..2b99b042 --- /dev/null +++ b/src/components/UI/ModalCreate/ModalCreate.js @@ -0,0 +1,50 @@ +import React, { useState } from "react"; +import { useDispatch, useSelector } from "react-redux"; +import { addProject } from "../../../redux/projectsTrackerSlice"; + +import "./ModalCreate.scss"; + +export const ModalCreate = ({ active, setActive, title }) => { + const [inputValue, setInputValue] = useState(""); + + const projectInfo = useSelector(addProject); + const dispatch = useDispatch(); + + function createName() { + let newItem = { + name: inputValue, + count: 0, + }; + dispatch(addProject(newItem)); + // console.log(newItem); + setActive(false); + } + + return ( +
setActive(false)} + > +
e.stopPropagation()} + > +
+

{title}

+
+ setInputValue(e.target.value)} + > +
+
+ +
+
+ ); +}; + +export default ModalCreate; diff --git a/src/components/UI/ModalCreate/ModalCreate.scss b/src/components/UI/ModalCreate/ModalCreate.scss new file mode 100644 index 00000000..66d56d3b --- /dev/null +++ b/src/components/UI/ModalCreate/ModalCreate.scss @@ -0,0 +1,71 @@ +.modal-project { + z-index: 9; + height: 100%; + width: 100%; + background-color: rgba(0, 0, 0, 0.11); + position: fixed; + top: 0; + left: 0; + display: flex; + align-items: center; + justify-content: center; + transform: scale(0); + + &__content { + padding: 15px; + background: #ffffff; + border: 1px solid #dde2e4; + border-radius: 8px; + display: flex; + flex-direction: column; + align-items: center; + + .title-project { + display: flex; + align-items: center; + flex-direction: column; + + .input-container { + width: 220px; + height: 25px; + border-radius: 44px; + border: 1px solid #d1d1d1; + } + + h4 { + color: #111112; + margin-bottom: 10px; + font-size: 14px !important; + } + } + + .name-project { + margin-left: 10px; + border: none; + outline: none; + height: 100%; + width: 90%; + font-size: 14px; + } + + .create-project { + margin: 15px 0 0 0; + width: 188px; + height: 40px; + background: #52b709; + border-radius: 44px; + border: none; + font-weight: 400; + font-size: 15px; + line-height: 32px; + color: #ffffff; + display: flex; + align-items: center; + justify-content: center; + } + } +} + +.modal-project.active { + transform: scale(1); +} diff --git a/src/components/UI/ModalProject/ModalProject.js b/src/components/UI/ModalProject/ModalProject.js deleted file mode 100644 index d4c48e86..00000000 --- a/src/components/UI/ModalProject/ModalProject.js +++ /dev/null @@ -1,27 +0,0 @@ -import React from "react"; - -import "./ModalProject.scss"; - -export const ModalProject = ({ active, setActive }) => { - return ( -
setActive(false)} - > -
e.stopPropagation()} - > -
-

Укажите название проекта:

-
- -
-
- -
-
- ); -}; - -export default ModalProject; diff --git a/src/components/UI/ModalProject/ModalProject.scss b/src/components/UI/ModalProject/ModalProject.scss deleted file mode 100644 index 3d62134d..00000000 --- a/src/components/UI/ModalProject/ModalProject.scss +++ /dev/null @@ -1,57 +0,0 @@ -.modal-project { - z-index: 9; - height: 100%; - width: 100%; - background-color: rgba(0, 0, 0, 0.11); - position: fixed; - top: 0; - left: 0; - display: flex; - align-items: center; - justify-content: center; - transform: scale(0); -} - -.modal-project.active { - transform: scale(1); -} - -.modal-project__content { - padding: 15px; - background: #ffffff; - border: 1px solid #dde2e4; - border-radius: 8px; - display: flex; - flex-direction: column; - align-items: center; - - .title-project { - display: flex; - align-items: center; - flex-direction: column; - - .input-container { - width: 220px; - height: 25px; - border-radius: 44px; - border: 1px solid #d1d1d1; - } - - h4 { - margin-bottom: 10px; - } - } - - .name-project { - margin-left: 10px; - border: none; - outline: none; - height: 100%; - width: 90%; - font-size: 14px; - } - - .create-project { - margin: 15px 0 0 0; - } -} diff --git a/src/pages/Tracker/Tracker.js b/src/pages/Tracker/Tracker.js index 6ee734d7..e8119213 100644 --- a/src/pages/Tracker/Tracker.js +++ b/src/pages/Tracker/Tracker.js @@ -4,7 +4,7 @@ import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader"; import { Footer } from "../../components/Footer/Footer"; import ModalTiket from "../../components/UI/ModalTiket/ModalTiket"; -import ModalProject from "../../components/UI/ModalProject/ModalProject"; +import ModalCreate from "../../components/UI/ModalCreate/ModalCreate"; import project from "../../images/trackerProject.svg"; import tasks from "../../images/trackerTasks.svg"; @@ -13,9 +13,11 @@ 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/search.svg" +import search from "../../images/search.svg"; import "./tracker.scss"; +import { useDispatch, useSelector } from "react-redux"; +import { addProject } from "../../redux/projectsTrackerSlice"; export const Tracker = () => { const [toggleTab, setToggleTab] = useState(1); @@ -45,7 +47,7 @@ export const Tracker = () => { files: 0, avatarCreated: avatarTest, avatarDo: avatarTest, - id: 1 + id: 1, }, { task: "PR - 2245", @@ -54,7 +56,7 @@ export const Tracker = () => { files: 0, avatarCreated: avatarTest, avatarDo: avatarTest, - id: 2 + id: 2, }, ], }, @@ -69,7 +71,7 @@ export const Tracker = () => { files: 0, avatarCreated: avatarTest, avatarDo: avatarTest, - id: 3 + id: 3, }, ], }, @@ -84,7 +86,7 @@ export const Tracker = () => { files: 0, avatarCreated: avatarTest, avatarDo: avatarTest, - id: 4 + id: 4, }, { task: "PR - 2245", @@ -93,7 +95,7 @@ export const Tracker = () => { files: 0, avatarCreated: avatarTest, avatarDo: avatarTest, - id: 5 + id: 5, }, { task: "PR - 2245", @@ -102,7 +104,7 @@ export const Tracker = () => { files: 0, avatarCreated: avatarTest, avatarDo: avatarTest, - id: 6 + id: 6, }, { task: "PR - 2245", @@ -111,7 +113,7 @@ export const Tracker = () => { files: 0, avatarCreated: avatarTest, avatarDo: avatarTest, - id: 9 + id: 9, }, ], }, @@ -126,7 +128,7 @@ export const Tracker = () => { files: 0, avatarCreated: avatarTest, avatarDo: avatarTest, - id: 7 + id: 7, }, { task: "PR - 2245", @@ -135,7 +137,7 @@ export const Tracker = () => { files: 0, avatarCreated: avatarTest, avatarDo: avatarTest, - id: 8 + id: 8, }, ], }, @@ -145,184 +147,217 @@ export const Tracker = () => { { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", - dateComplete: '07/мар/23', + dateComplete: "07/мар/23", avatarDo: avatarTest, }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", - dateComplete: '07/мар/23', + dateComplete: "07/мар/23", avatarDo: avatarTest, }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", - dateComplete: '07/мар/23', + dateComplete: "07/мар/23", avatarDo: avatarTest, }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", - dateComplete: '07/мар/23', + dateComplete: "07/мар/23", avatarDo: avatarTest, }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", - dateComplete: '07/мар/23', + dateComplete: "07/мар/23", avatarDo: avatarTest, }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", - dateComplete: '07/мар/23', + dateComplete: "07/мар/23", avatarDo: avatarTest, }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", - dateComplete: '07/мар/23', + dateComplete: "07/мар/23", avatarDo: avatarTest, }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", - dateComplete: '07/мар/23', + dateComplete: "07/мар/23", avatarDo: avatarTest, }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", - dateComplete: '07/мар/23', + dateComplete: "07/мар/23", avatarDo: avatarTest, }, { name: "PK - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", - dateComplete: '07/мар/23', + dateComplete: "07/мар/23", avatarDo: avatarTest, }, { name: "PE - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", - dateComplete: '07/мар/23', + dateComplete: "07/мар/23", avatarDo: avatarTest, }, { name: "PA - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", - dateComplete: '07/мар/23', + dateComplete: "07/мар/23", avatarDo: avatarTest, }, { name: "PB - 2245", description: "Верстать часть таблицы. Сверстать часть таблицы", - dateComplete: '07/мар/23', + dateComplete: "07/мар/23", avatarDo: avatarTest, }, { name: "PC - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", - dateComplete: '07/мар/23', + dateComplete: "07/мар/23", avatarDo: avatarTest, }, { name: "PD - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", - dateComplete: '07/мар/23', + dateComplete: "07/мар/23", avatarDo: avatarTest, }, { name: "PA - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", - dateComplete: '07/мар/23', + dateComplete: "07/мар/23", avatarDo: avatarTest, }, - ]) + ]); - const [filterCompleteTasks, setFilterCompleteTasks] = useState(completeTasks) + const [filterCompleteTasks, setFilterCompleteTasks] = useState(completeTasks); const [modalActiveTicket, setModalActiveTicket] = useState(false); - const [modalActiveProject, setModalActiveProject] = useState(false); - const [startWrapperIndex, setStartWrapperIndex] = useState(null) - const [wrapperHover, setWrapperHover] = useState([false, false, false, false]) + const [modalCreateProject, setModalCreateProject] = useState(false); + const [modalCreateColl, setModalCreateColl] = useState(false); + + const [startWrapperIndex, setStartWrapperIndex] = useState(null); + const [wrapperHover, setWrapperHover] = useState([ + false, + false, + false, + false, + ]); + + // const projectInfo = useSelector(addProject); + // const dispatch = useDispatch(); const toggleTabs = (index) => { setToggleTab(index); }; - function toggleMoreTasks (wrapperIndex) { - setTabTaskMok(prevArray => prevArray.map((elem, index) => { - if (wrapperIndex === index) { - return {...elem, open: !elem.open} - } else { - return elem - } - })) + 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}) + setStartWrapperIndex({ task: task, index: wrapperIndex }); setTimeout(() => { - e.target.classList.add('tasks__board__item__hide') - },0) + 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') + setWrapperHover((prevArray) => + prevArray.map((elem) => { + return false; + }) + ); + e.target.classList.remove("tasks__board__item__hide"); } function dragOverHandler(e) { - e.preventDefault() + e.preventDefault(); } function dragEnterHandler(wrapperIndex) { if (wrapperIndex === startWrapperIndex.index) { - return + return; } - setWrapperHover(prevArray => prevArray.map((elem, index) => { - if (index === wrapperIndex) { - return true - } else { - return false - } - })) + setWrapperHover((prevArray) => + prevArray.map((elem, index) => { + if (index === wrapperIndex) { + return true; + } else { + return false; + } + }) + ); } function dragDropHandler(e, wrapperIndex) { - e.preventDefault() + e.preventDefault(); if (startWrapperIndex.index === wrapperIndex) { - return + 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 - } - })) + 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) => { - if (!e.target.value) { - return item - } - if (item.name.toLowerCase().startsWith(e.target.value.toLowerCase()) || item.description.toLowerCase().startsWith(e.target.value.toLowerCase())) { - return item - } - })) + setFilterCompleteTasks( + completeTasks.filter((item) => { + if (!e.target.value) { + return item; + } + if ( + item.name.toLowerCase().startsWith(e.target.value.toLowerCase()) || + item.description + .toLowerCase() + .startsWith(e.target.value.toLowerCase()) + ) { + return item; + } + }) + ); + } + + function createProject() { + setModalCreateProject(true); } return ( @@ -375,11 +410,12 @@ export const Tracker = () => { ); })} - - @@ -391,8 +427,18 @@ export const Tracker = () => { } >
+

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

- + + setModalCreateColl(true)} + > + + +
avatar avatar @@ -422,7 +468,13 @@ export const Tracker = () => { onDragOver={(e) => 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' : ''}`} + className={`tasks__board ${ + section.tasks.length >= 3 ? "tasks__board__more" : "" + } ${ + wrapperHover[wrapperIndex] + ? "tasks__board__hover" + : "" + }`} >
@@ -436,7 +488,7 @@ export const Tracker = () => { {section.tasks.map((task, index) => { if (index > 2) { if (!section.open) { - return + return; } } return ( @@ -444,7 +496,9 @@ export const Tracker = () => { key={index} className="tasks__board__item" draggable={true} - onDragStart={(e) => dragStartHandler(e, task, wrapperIndex)} + onDragStart={(e) => + dragStartHandler(e, task, wrapperIndex) + } onDragEnd={(e) => dragEndHandler(e)} onClick={() => setModalActiveTicket(true)} > @@ -473,7 +527,16 @@ export const Tracker = () => { ); })} {section.tasks.length > 3 && ( - toggleMoreTasks(wrapperIndex)}>{section.open ? '-' : '+'} + toggleMoreTasks(wrapperIndex)} + > + {section.open ? "-" : "+"} + )}
); @@ -483,30 +546,35 @@ export const Tracker = () => {
-
+

Архив:

{filterCompleteTasks.length} задач(а)

-
- filterArchiveTasks(event)} /> - search +
+ filterArchiveTasks(event)} + /> + search
-
+
{filterCompleteTasks.map((task, index) => { - return
-
-

{task.description}

-

{task.dateComplete}

-
-
- avatar -

{task.name}

-
-
+ return ( +
+
+

{task.description}

+

{task.dateComplete}

+
+
+ avatar +

{task.name}

+
+
+ ); })}
diff --git a/src/redux/projectsTrackerSlice.js b/src/redux/projectsTrackerSlice.js new file mode 100644 index 00000000..f87eb14c --- /dev/null +++ b/src/redux/projectsTrackerSlice.js @@ -0,0 +1,34 @@ +import { createSlice } from "@reduxjs/toolkit"; + +const initialState = { + project: [ + { + name: "Разработка трекера", + count: 4, + }, + { + name: "Кинотеатр", + count: 4, + }, + { + name: "Проект страхование", + count: 4, + }, + ], +}; + +export const projectsTrackerSlice = createSlice({ + name: "projectsTracker", + initialState, + reducers: { + setProject(state, action) { + state.project.push(action.payload); + }, + }, +}); + +export const { setProject } = projectsTrackerSlice.actions; + +export const addProject = (state) => state.projectsTracker.setProject; + +export default projectsTrackerSlice.reducer; diff --git a/src/store/store.js b/src/store/store.js index 34e5ed26..f9067e1b 100644 --- a/src/store/store.js +++ b/src/store/store.js @@ -1,10 +1,10 @@ -import { configureStore } from '@reduxjs/toolkit'; -import outstaffingReducer from '../redux/outstaffingSlice'; -import loaderReducer from '../redux/loaderSlice'; -import roleReducer from '../redux/roleSlice'; -import reportReducer from '../redux/reportSlice'; -import quizSlice from '../redux/quizSlice'; - +import { configureStore } from "@reduxjs/toolkit"; +import outstaffingReducer from "../redux/outstaffingSlice"; +import loaderReducer from "../redux/loaderSlice"; +import roleReducer from "../redux/roleSlice"; +import reportReducer from "../redux/reportSlice"; +import quizSlice from "../redux/quizSlice"; +import projectsTrackerSlice from "../redux/projectsTrackerSlice"; export const store = configureStore({ reducer: { @@ -12,10 +12,11 @@ export const store = configureStore({ loader: loaderReducer, role: roleReducer, report: reportReducer, + tracker: projectsTrackerSlice, quiz: quizSlice, }, - middleware: getDefaultMiddleware => - getDefaultMiddleware({ - serializableCheck: false, - }), + middleware: (getDefaultMiddleware) => + getDefaultMiddleware({ + serializableCheck: false, + }), });