diff --git a/src/components/AuthBox/AuthBox.js b/src/components/AuthBox/AuthBox.js index b91ad6b4..e614b6c0 100644 --- a/src/components/AuthBox/AuthBox.js +++ b/src/components/AuthBox/AuthBox.js @@ -3,24 +3,20 @@ import { Link, useNavigate } from "react-router-dom"; import { useDispatch, useSelector } from "react-redux"; import { Loader } from "../Loader/Loader"; -import ErrorBoundary from "../../hoc/ErrorBoundary"; import { auth, selectAuth, setUserInfo } from "../../redux/outstaffingSlice"; import { loading } from "../../redux/loaderSlice"; import { setRole } from "../../redux/roleSlice"; import { selectIsLoading } from "../../redux/loaderSlice"; +import ModalErrorLogin from "../../components/UI/ModalErrorLogin/ModalErrorLogin"; + import { apiRequest } from "../../api/request"; import ellipse from "../../images/ellipse.png"; import "./authBox.scss"; -import Swal from "sweetalert2"; -import withReactContent from "sweetalert2-react-content"; - -const SweetAlert = withReactContent(Swal); - export const AuthBox = ({ title }) => { const dispatch = useDispatch(); const ref = useRef(); @@ -30,15 +26,7 @@ export const AuthBox = ({ title }) => { const isLoading = useSelector(selectIsLoading); const [error, setError] = useState(null); - - const handleModalError = (error) => { - SweetAlert.fire({ - title: "Ошибка", - text: error, - }); - - setError(null); - }; + const [modalError, setModalError] = useState(false); useEffect(() => { if (!localStorage.getItem("auth_token")) { @@ -62,6 +50,7 @@ export const AuthBox = ({ title }) => { }).then((res) => { if (!res.access_token) { setError("Некорректные данные для входа"); + setModalError(true); dispatch(loading(false)); } else { localStorage.setItem("auth_token", res.access_token); @@ -104,15 +93,11 @@ export const AuthBox = ({ title }) => { {error && (
- - {handleModalError(error)} - {/* setError(null)}*/} - {/*/>*/} - +
)} @@ -130,7 +115,9 @@ export const AuthBox = ({ title }) => { {/* TODO: при клике отправлять на форму/модалку/страницу регистрации */} diff --git a/src/components/AuthBox/authBox.scss b/src/components/AuthBox/authBox.scss index c90c55fa..739ca575 100644 --- a/src/components/AuthBox/authBox.scss +++ b/src/components/AuthBox/authBox.scss @@ -150,11 +150,11 @@ width: 268px; height: 75px; border-radius: 38px; - background-color: #ffffff; + background-color: #f5f5f5; border: 2px solid #6aaf5c; font-family: "Muller"; font-size: 2em; - font-weight: 300; + font-weight: 400; letter-spacing: normal; line-height: 71.88px; text-align: center; diff --git a/src/components/AuthHeader/AuthHeader.js b/src/components/AuthHeader/AuthHeader.js index aa8a342c..8f1c65d3 100644 --- a/src/components/AuthHeader/AuthHeader.js +++ b/src/components/AuthHeader/AuthHeader.js @@ -8,7 +8,9 @@ export const AuthHeader = ({}) => { return (
-

itguild.

+

+ itguild.аутстафинг ИТ специалистов +

diff --git a/src/components/AuthHeader/authHeader.scss b/src/components/AuthHeader/authHeader.scss index 6cef0a80..1447a2b9 100644 --- a/src/components/AuthHeader/authHeader.scss +++ b/src/components/AuthHeader/authHeader.scss @@ -12,6 +12,9 @@ line-height: 32px; color: #000000; } + span { + color: #52b709; + } } &__navigation { diff --git a/src/components/SideBar/sidebar.scss b/src/components/SideBar/sidebar.scss index 441a7ef4..bb6591f5 100644 --- a/src/components/SideBar/sidebar.scss +++ b/src/components/SideBar/sidebar.scss @@ -1,6 +1,6 @@ .auth-menu { z-index: 99; - position: absolute; + position: fixed; top: 0; left: 0; width: 141px; diff --git a/src/components/SliderWorkers/sliderWorkers.scss b/src/components/SliderWorkers/sliderWorkers.scss index 46efcdd4..55b9af26 100644 --- a/src/components/SliderWorkers/sliderWorkers.scss +++ b/src/components/SliderWorkers/sliderWorkers.scss @@ -46,14 +46,16 @@ margin-left: 15px; img { - margin-right: 33px; + margin-right: 20px; + width: 100px; + height: 100px; } p { font-size: 15px; line-height: 22px; color: black; - width: 198px; + width: 160px; } &__resume { @@ -66,40 +68,54 @@ line-height: 32px; color: white; border: none; + transition: 0.5s; + + &:hover { + transition: 0.5s; + background-color: #52b709a8; + } } } .slick-next { + display: flex !important; + align-items: center; + justify-content: center; background-color: #8dc63f; width: 44px; height: 44px; border-radius: 44px; &:before { - content: ">"; - color: white; - font-size: 23px; + content: url("../../images/arrowViewReport.svg"); + } + + &:focus { + background-color: #8dc63f; } - &:focus, &:hover { background-color: #8ec63f91; } } .slick-prev { + display: flex !important; + align-items: center; + justify-content: center; background-color: #8dc63f; width: 44px; height: 44px; border-radius: 44px; &:before { - content: "<"; - color: white; - font-size: 23px; + content: url("../../images/ArrovLeftSlider.png"); + } + + &:focus { + background-color: #8dc63f; } - &:focus, &:hover { background-color: #8ec63f91; } @@ -128,7 +144,6 @@ img { margin: 0; - width: 50%; } p { @@ -136,7 +151,7 @@ text-align: center; } - .worker-description { + &-description { display: flex; flex-direction: column; align-items: center; diff --git a/src/components/UI/ModalCreate/ModalCreate.js b/src/components/UI/ModalCreate/ModalCreate.js new file mode 100644 index 00000000..04a2894c --- /dev/null +++ b/src/components/UI/ModalCreate/ModalCreate.js @@ -0,0 +1,48 @@ +import React, { useState } from "react"; +import { useDispatch } from "react-redux"; +import { setProject } from "../../../redux/projectsTrackerSlice"; + +import "./ModalCreate.scss"; + +export const ModalCreate = ({ active, setActive, title }) => { + const [inputValue, setInputValue] = useState(""); + const dispatch = useDispatch(); + + function createName() { + let newItem = { + name: inputValue, + count: 0, + }; + dispatch(setProject(newItem)); + setActive(false); + setInputValue("") + } + + 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/ModalErrorLogin/ModalErrorLogin.js b/src/components/UI/ModalErrorLogin/ModalErrorLogin.js index 37aa0780..842e5d91 100644 --- a/src/components/UI/ModalErrorLogin/ModalErrorLogin.js +++ b/src/components/UI/ModalErrorLogin/ModalErrorLogin.js @@ -2,7 +2,7 @@ import React from "react"; import "./modalErrorLogin.scss"; -export const ModalErrorLogin = ({ active, setActive }) => { +export const ModalErrorLogin = ({ active, setActive, title }) => { return (
{ onClick={(e) => e.stopPropagation()} >

Ошибка входа

-

Введены некоректные данные для входа

- setActive(false)}> 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/components/UI/ModalTiket/ModalTiket.js b/src/components/UI/ModalTiket/ModalTiket.js index 46bd6f1a..6b74aed0 100644 --- a/src/components/UI/ModalTiket/ModalTiket.js +++ b/src/components/UI/ModalTiket/ModalTiket.js @@ -40,14 +40,6 @@ export const ModalTiket = ({ active, setActive }) => { className="modal-tiket__content" onClick={(e) => e.stopPropagation()} > -
- - - - - - -

@@ -75,6 +67,7 @@ export const ModalTiket = ({ active, setActive }) => {

+ setActive(false)}> {tiket.code}

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

diff --git a/src/components/UI/ModalTiket/ModalTiket.scss b/src/components/UI/ModalTiket/ModalTiket.scss index a2c74a53..36aaf5c8 100644 --- a/src/components/UI/ModalTiket/ModalTiket.scss +++ b/src/components/UI/ModalTiket/ModalTiket.scss @@ -23,20 +23,6 @@ display: flex; flex-direction: row; - .author { - padding: 25px 0 0 0; - border-radius: 8px 0 0 8px; - display: flex; - flex-direction: column; - align-items: center; - width: 76px; - background: #fbfbfb; - - a { - margin-bottom: 16px; - } - } - .content { display: flex; flex-direction: column; @@ -109,10 +95,34 @@ } .workers { + position: relative; border-left: 1px solid #f1f1f1; width: 300px; padding: 40px; + .exit { + cursor: pointer; + position: absolute; + top: 22px; + right: 31px; + + &:before, + &:after { + content: ""; + position: absolute; + width: 16px; + height: 2px; + background: #263238; + } + + &:before { + transform: rotate(45deg); + } + &:after { + transform: rotate(-45deg); + } + } + span { font-family: "Inter", sans-serif; font-weight: 500; @@ -149,6 +159,7 @@ } .start { + font-size: 12px; margin-top: 25px; width: 151px; height: 40px; diff --git a/src/images/ArrovLeftSlider.png b/src/images/ArrovLeftSlider.png new file mode 100644 index 00000000..f1489058 Binary files /dev/null and b/src/images/ArrovLeftSlider.png differ diff --git a/src/pages/AuthForDevelopers/AuthForDevelopers.js b/src/pages/AuthForDevelopers/AuthForDevelopers.js index 09938d83..e3075654 100644 --- a/src/pages/AuthForDevelopers/AuthForDevelopers.js +++ b/src/pages/AuthForDevelopers/AuthForDevelopers.js @@ -1,4 +1,4 @@ -import React, { useEffect } from "react"; +import React, { useEffect, useState } from "react"; import { AuthBox } from "../../components/AuthBox/AuthBox"; diff --git a/src/pages/AuthForDevelopers/authForDevelopers.scss b/src/pages/AuthForDevelopers/authForDevelopers.scss index 5cf8aa60..25b5d894 100644 --- a/src/pages/AuthForDevelopers/authForDevelopers.scss +++ b/src/pages/AuthForDevelopers/authForDevelopers.scss @@ -1,4 +1,5 @@ .auth-developers { + font-family: "LabGrotesque", sans-serif; overflow: hidden; position: relative; @@ -200,7 +201,7 @@ &__partnersForDev { background: #52b7098c; color: #2d6505; - margin-left: -40px; + margin-left: -35px; } &__partnersForDev, diff --git a/src/pages/AuthForPartners/authForPartners.scss b/src/pages/AuthForPartners/authForPartners.scss index a34b5bf7..acee7572 100644 --- a/src/pages/AuthForPartners/authForPartners.scss +++ b/src/pages/AuthForPartners/authForPartners.scss @@ -1,4 +1,5 @@ .auth-partners { + font-family: "LabGrotesque", sans-serif; overflow: hidden; position: relative; @@ -302,7 +303,7 @@ &__partnersForPart { background: #406128; color: white; - margin-left: -40px; + margin-left: -35px; } &__partnersForPart, diff --git a/src/pages/PartnerSettings/PartnerSettings.js b/src/pages/PartnerSettings/PartnerSettings.js index db633a98..f83882cd 100644 --- a/src/pages/PartnerSettings/PartnerSettings.js +++ b/src/pages/PartnerSettings/PartnerSettings.js @@ -16,7 +16,7 @@ export const PartnerSettings = () => {
diff --git a/src/pages/Tracker/Tracker.js b/src/pages/Tracker/Tracker.js index b21d6d16..175a039e 100644 --- a/src/pages/Tracker/Tracker.js +++ b/src/pages/Tracker/Tracker.js @@ -5,7 +5,7 @@ import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBre 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"; @@ -14,26 +14,28 @@ 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 { getProjects } from "../../redux/projectsTrackerSlice"; export const Tracker = () => { const [toggleTab, setToggleTab] = useState(1); - const [projects] = useState([ - { - name: "Разработка трекера", - count: 4, - }, - { - name: "Кинотеатр", - count: 4, - }, - { - name: "Проект страхование", - count: 4, - }, - ]); + // const [projects] = useState([ + // { + // name: "Разработка трекера", + // count: 4, + // }, + // { + // name: "Кинотеатр", + // count: 4, + // }, + // { + // name: "Проект страхование", + // count: 4, + // }, + // ]); const [tabTaskMok, setTabTaskMok] = useState([ { name: "Открытые", @@ -46,7 +48,7 @@ export const Tracker = () => { files: 0, avatarCreated: avatarTest, avatarDo: avatarTest, - id: 1 + id: 1, }, { task: "PR - 2245", @@ -55,7 +57,7 @@ export const Tracker = () => { files: 0, avatarCreated: avatarTest, avatarDo: avatarTest, - id: 2 + id: 2, }, ], }, @@ -70,7 +72,7 @@ export const Tracker = () => { files: 0, avatarCreated: avatarTest, avatarDo: avatarTest, - id: 3 + id: 3, }, ], }, @@ -85,7 +87,7 @@ export const Tracker = () => { files: 0, avatarCreated: avatarTest, avatarDo: avatarTest, - id: 4 + id: 4, }, { task: "PR - 2245", @@ -94,7 +96,7 @@ export const Tracker = () => { files: 0, avatarCreated: avatarTest, avatarDo: avatarTest, - id: 5 + id: 5, }, { task: "PR - 2245", @@ -103,7 +105,7 @@ export const Tracker = () => { files: 0, avatarCreated: avatarTest, avatarDo: avatarTest, - id: 6 + id: 6, }, { task: "PR - 2245", @@ -112,7 +114,7 @@ export const Tracker = () => { files: 0, avatarCreated: avatarTest, avatarDo: avatarTest, - id: 9 + id: 9, }, ], }, @@ -127,7 +129,7 @@ export const Tracker = () => { files: 0, avatarCreated: avatarTest, avatarDo: avatarTest, - id: 7 + id: 7, }, { task: "PR - 2245", @@ -136,7 +138,7 @@ export const Tracker = () => { files: 0, avatarCreated: avatarTest, avatarDo: avatarTest, - id: 8 + id: 8, }, ], }, @@ -146,184 +148,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 projects = useSelector(getProjects); + 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 ( @@ -381,11 +416,12 @@ export const Tracker = () => {
); })} - -
@@ -397,8 +433,18 @@ export const Tracker = () => { } >
+

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

- + + setModalCreateColl(true)} + > + + +
avatar avatar @@ -428,7 +474,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" + : "" + }`} >
@@ -442,7 +494,7 @@ export const Tracker = () => { {section.tasks.map((task, index) => { if (index > 2) { if (!section.open) { - return + return; } } return ( @@ -450,7 +502,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)} > @@ -479,7 +533,16 @@ export const Tracker = () => { ); })} {section.tasks.length > 3 && ( - toggleMoreTasks(wrapperIndex)}>{section.open ? '-' : '+'} + toggleMoreTasks(wrapperIndex)} + > + {section.open ? "-" : "+"} + )}
); @@ -489,30 +552,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..c35991bf --- /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 getProjects = (state) => state.tracker.project; + +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, + }), });