From 84e55a0f5462acbe79d3aa97cdee331c3b909c42 Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Tue, 21 Mar 2023 21:26:38 +0300 Subject: [PATCH 1/4] Fixed slider, auth pages and modal --- src/components/AuthBox/authBox.scss | 4 +- src/components/AuthHeader/AuthHeader.js | 4 +- src/components/AuthHeader/authHeader.scss | 3 ++ .../SliderWorkers/sliderWorkers.scss | 38 ++++++++++++----- src/components/UI/ModalTiket/ModalTiket.js | 9 +--- src/components/UI/ModalTiket/ModalTiket.scss | 39 +++++++++++------- src/images/ArrovLeftSlider.png | Bin 0 -> 614 bytes .../AuthForDevelopers/authForDevelopers.scss | 3 +- .../AuthForPartners/authForPartners.scss | 3 +- src/pages/PartnerSettings/PartnerSettings.js | 2 +- 10 files changed, 66 insertions(+), 39 deletions(-) create mode 100644 src/images/ArrovLeftSlider.png 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/SliderWorkers/sliderWorkers.scss b/src/components/SliderWorkers/sliderWorkers.scss index 46efcdd4..75dc79a7 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; } @@ -136,7 +152,7 @@ text-align: center; } - .worker-description { + &-description { display: flex; flex-direction: column; align-items: center; 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 0000000000000000000000000000000000000000..f14890588f65fd70c89cb7237cc75752a4a88c80 GIT binary patch literal 614 zcmV-s0-61ZP)EX>4Tx04R}tkv&MmKp2MKrbsc5$WWauh>AFB6^c+H)C#RSm|Xe?O&XFE z7e~Rh;NZ_<)xpJCR|i)?5c~mgb#YR3krKa43N2zhIPT%Sd*A!+J3y$HnPzp21DbA| zsYG1NWLL$|D}oq6AAo6@S;m|sCE+{1?h)YYU5sb>pZjz4s5y%P0g-r?8KzCV!SCI) z4bJ<-5muB{;&b9LlL{n$C`-Ngjg)JvC_t@Xlle$#8Fk#DPPEV zta9Gstd*;*StoyCIH#{HbDice5?I6%B#2N@MG0lth|#K(Vj)HQaUcJX>zBx-kgEhn zjs;YpL3aJ%fAG7vR(^8AOA5z<&KJk|7y&}NK%?e3-^Y&AI01ssz?I(eSL(pbC+W48 z7Ci!bw}Ff6mZt0hmpj1VlOdb3D+Or^`8@D`M&FbL`fq{mHLq{YeVjf3Y3fz-1~@nb zMhld^?(^=h_P+glrrEzAVRCYyFF4 {
From 8b8dda215f8ff8d8dd02d91b73564f690b0e60ed Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Wed, 22 Mar 2023 15:33:12 +0300 Subject: [PATCH 2/4] Fixed sidebar, AuthBox, and modalError --- src/components/AuthBox/AuthBox.js | 37 ++++++------------- src/components/SideBar/sidebar.scss | 2 +- .../SliderWorkers/sliderWorkers.scss | 1 - .../UI/ModalErrorLogin/ModalErrorLogin.js | 12 ++++-- .../AuthForDevelopers/AuthForDevelopers.js | 2 +- 5 files changed, 23 insertions(+), 31 deletions(-) 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/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 75dc79a7..55b9af26 100644 --- a/src/components/SliderWorkers/sliderWorkers.scss +++ b/src/components/SliderWorkers/sliderWorkers.scss @@ -144,7 +144,6 @@ img { margin: 0; - width: 50%; } p { 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/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"; From 4d8f7e6c657196ca780d43f764e097ef6951fa83 Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Wed, 22 Mar 2023 21:48:06 +0300 Subject: [PATCH 3/4] Added new reducer for tracker --- src/components/UI/ModalCreate/ModalCreate.js | 50 ++++ .../UI/ModalCreate/ModalCreate.scss | 71 +++++ .../UI/ModalProject/ModalProject.js | 27 -- .../UI/ModalProject/ModalProject.scss | 57 ---- src/pages/Tracker/Tracker.js | 282 +++++++++++------- src/redux/projectsTrackerSlice.js | 34 +++ src/store/store.js | 23 +- 7 files changed, 342 insertions(+), 202 deletions(-) create mode 100644 src/components/UI/ModalCreate/ModalCreate.js create mode 100644 src/components/UI/ModalCreate/ModalCreate.scss delete mode 100644 src/components/UI/ModalProject/ModalProject.js delete mode 100644 src/components/UI/ModalProject/ModalProject.scss create mode 100644 src/redux/projectsTrackerSlice.js 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, + }), }); From 6419b9dd97d00a2f4f12f7c5ebcd74c2e8374c4b Mon Sep 17 00:00:00 2001 From: M1kola Date: Thu, 23 Mar 2023 16:43:37 +0300 Subject: [PATCH 4/4] fixes --- src/components/UI/ModalCreate/ModalCreate.js | 10 +++--- src/pages/Tracker/Tracker.js | 34 ++++++++++---------- src/redux/projectsTrackerSlice.js | 4 +-- 3 files changed, 23 insertions(+), 25 deletions(-) diff --git a/src/components/UI/ModalCreate/ModalCreate.js b/src/components/UI/ModalCreate/ModalCreate.js index 2b99b042..04a2894c 100644 --- a/src/components/UI/ModalCreate/ModalCreate.js +++ b/src/components/UI/ModalCreate/ModalCreate.js @@ -1,13 +1,11 @@ import React, { useState } from "react"; -import { useDispatch, useSelector } from "react-redux"; -import { addProject } from "../../../redux/projectsTrackerSlice"; +import { useDispatch } from "react-redux"; +import { setProject } 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() { @@ -15,9 +13,9 @@ export const ModalCreate = ({ active, setActive, title }) => { name: inputValue, count: 0, }; - dispatch(addProject(newItem)); - // console.log(newItem); + dispatch(setProject(newItem)); setActive(false); + setInputValue("") } return ( diff --git a/src/pages/Tracker/Tracker.js b/src/pages/Tracker/Tracker.js index e8119213..bcb337af 100644 --- a/src/pages/Tracker/Tracker.js +++ b/src/pages/Tracker/Tracker.js @@ -17,24 +17,24 @@ import search from "../../images/search.svg"; import "./tracker.scss"; import { useDispatch, useSelector } from "react-redux"; -import { addProject } from "../../redux/projectsTrackerSlice"; +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: "Открытые", @@ -256,8 +256,8 @@ export const Tracker = () => { false, ]); - // const projectInfo = useSelector(addProject); - // const dispatch = useDispatch(); + const projects = useSelector(getProjects); + const dispatch = useDispatch(); const toggleTabs = (index) => { setToggleTab(index); diff --git a/src/redux/projectsTrackerSlice.js b/src/redux/projectsTrackerSlice.js index f87eb14c..c35991bf 100644 --- a/src/redux/projectsTrackerSlice.js +++ b/src/redux/projectsTrackerSlice.js @@ -21,7 +21,7 @@ export const projectsTrackerSlice = createSlice({ name: "projectsTracker", initialState, reducers: { - setProject(state, action) { + setProject: (state, action) => { state.project.push(action.payload); }, }, @@ -29,6 +29,6 @@ export const projectsTrackerSlice = createSlice({ export const { setProject } = projectsTrackerSlice.actions; -export const addProject = (state) => state.projectsTracker.setProject; +export const getProjects = (state) => state.tracker.project; export default projectsTrackerSlice.reducer;