diff --git a/src/App.js b/src/App.js index 75b8d6dc..2bec9c98 100644 --- a/src/App.js +++ b/src/App.js @@ -25,8 +25,9 @@ import { PartnerSettings } from "./pages/PartnerSettings/PartnerSettings" import {PartnerRequests} from './pages/PartnerRequests/PartnerRequests' import {PartnerAddRequest} from './pages/PartnerAddRequest/PartnerAddRequest' import {PartnerBid} from './pages/PartnerBid/PartnerBid' -import {PartnerPersonalInfo} from "./pages/PartnerPersonalInfo/PartnerPersonalInfo"; +import {PartnerCategories} from "./pages/PartnerСategories/PartnerСategories"; import {PartnerTreaties} from "./pages/PartnerTreaties/PartnerTreaties"; +import {PartnerEmployees} from "./pages/PartnerEmployees/PartnerEmployees"; import './fonts/stylesheet.css' import 'bootstrap/dist/css/bootstrap.min.css' @@ -71,8 +72,9 @@ const App = () => { }/> }/> }/> - }/> + }/> }/> + }/> }/> 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/ProfileHeader/ProfileHeader.js b/src/components/ProfileHeader/ProfileHeader.js index 5be4cf30..8c165ad9 100644 --- a/src/components/ProfileHeader/ProfileHeader.js +++ b/src/components/ProfileHeader/ProfileHeader.js @@ -46,12 +46,16 @@ export const ProfileHeader = () => { }, ], partner: [ + { + path: '/', + name: 'Каталог' + }, { path: '/requests', name: 'Запросы' }, { - path: '/employees', + path: '/categories', name: 'Персонал' }, { 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/PartnerEmployees/PartnerEmployees.js b/src/pages/PartnerEmployees/PartnerEmployees.js new file mode 100644 index 00000000..64c08f4d --- /dev/null +++ b/src/pages/PartnerEmployees/PartnerEmployees.js @@ -0,0 +1,74 @@ +import React from 'react'; +import {Link, Navigate} from "react-router-dom"; +import {useSelector} from "react-redux"; +import {getPartnerEmployees} from "../../redux/outstaffingSlice"; + +import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader"; +import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs" +import {Footer} from "../../components/Footer/Footer"; + +import imgInfo from "./emplInfo.png" +import rightArrow from "../../images/arrowRight.png" + +import "./partnerEmployees.scss" + +export const PartnerEmployees = () => { + const partnerEmployees = useSelector(getPartnerEmployees); + if(localStorage.getItem('role_status') !== '18' || !partnerEmployees.length) { + return + } + return( +
+ +
+ +

Backend разработчики

+
+ {partnerEmployees.map((person) => { + return
+
+ avatar +

{person.name}

+
+
+
+
{person.qualification}
+ {person.level} +
+ img +

Данные и резюме

+
+ arrow +
+
+
+
+ Проект: +
{person.project}
+
+
+

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

+ {person.tasks_in_progress} +
+
+

Отработанных часов в марте

+ {person.month_hours} +
+
+
+
+
+ }) + + } +
+
+
+
+ ) +} diff --git a/src/pages/PartnerEmployees/avatarMok.png b/src/pages/PartnerEmployees/avatarMok.png new file mode 100644 index 00000000..3dad1696 Binary files /dev/null and b/src/pages/PartnerEmployees/avatarMok.png differ diff --git a/src/pages/PartnerEmployees/emplInfo.png b/src/pages/PartnerEmployees/emplInfo.png new file mode 100644 index 00000000..695fc9c7 Binary files /dev/null and b/src/pages/PartnerEmployees/emplInfo.png differ diff --git a/src/pages/PartnerEmployees/partnerEmployees.scss b/src/pages/PartnerEmployees/partnerEmployees.scss new file mode 100644 index 00000000..45933eb1 --- /dev/null +++ b/src/pages/PartnerEmployees/partnerEmployees.scss @@ -0,0 +1,170 @@ +.partnerEmployees { + background: #F1F1F1; + height: 100%; + min-height: 100vh; + font-family: 'LabGrotesque', sans-serif; + + &__title { + color: #000000; + font-weight: 700; + font-size: 22px; + line-height: 32px; + margin-bottom: 22px; + } + + &__items { + display: flex; + flex-direction: column; + row-gap: 20px; + } + + &__item { + background: #E1FCCF; + border-radius: 12px; + display: flex; + position: relative; + + &__name { + background: #FFFFFF; + border-radius: 12px; + padding: 25px 22px 25px; + display: flex; + align-items: center; + max-width: 274px; + width: 100%; + + img { + width: 77px; + height: 77px; + } + + h4 { + margin-left: 13px; + margin-bottom: 0; + font-weight: 500; + font-size: 16px; + line-height: 26px; + max-width: 96px; + color: #000000; + } + } + + &__info { + display: flex; + padding: 15px 50px 14px 16px; + width: 100%; + justify-content: space-between; + + &__qualification { + display: flex; + flex-direction: column; + justify-content: space-between; + + h5 { + font-weight: 500; + font-size: 18px; + color: #000000; + margin-bottom: 0; + } + + span { + color: #6F6F6F; + font-weight: 500; + font-size: 14px; + } + + .info_summary { + display: flex; + align-items: center; + + p { + font-weight: 400; + font-size: 14px; + line-height: 22px; + color: #000000; + margin: 0 18px 0 10px; + } + + .arrow { + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + background: #FFFFFF; + border-radius: 50px; + width: 41px; + height: 41px; + } + } + } + + &__project { + .name { + font-weight: 500; + font-size: 18px; + color: #111112; + } + + h5 { + margin-bottom: 0; + font-weight: 500; + font-size: 18px; + color: #111112; + } + + &__details { + display: flex; + margin-top: 24px; + column-gap: 25px; + + .details__item { + display: flex; + align-items: center; + + p { + margin-bottom: 0; + color: #6F6F6F; + font-weight: 500; + font-size: 13px; + line-height: 24px; + + span { + color: #406128; + font-weight: 700; + text-decoration: underline; + } + } + + .count { + display: flex; + align-items: center; + justify-content: center; + margin-left: 8px; + padding: 0 6px; + background: #DDDDDD; + border-radius: 4px; + font-weight: 500; + font-size: 14px; + line-height: 24px; + color: #6F6F6F; + } + } + } + } + } + } + + + .container { + max-width: 1160px; + margin-top: 23px; + + @media (max-width: 570px) { + margin-top: 0; + } + } + + footer { + margin-top: 70px; + } +} diff --git a/src/pages/PartnerSettings/PartnerSettings.js b/src/pages/PartnerSettings/PartnerSettings.js index eb8b4066..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/PartnerSettings/partnerSettings.scss b/src/pages/PartnerSettings/partnerSettings.scss index e1427067..d60d38e5 100644 --- a/src/pages/PartnerSettings/partnerSettings.scss +++ b/src/pages/PartnerSettings/partnerSettings.scss @@ -4,6 +4,13 @@ min-height: 100vh; font-family: 'LabGrotesque', sans-serif; + .infoPersonal__title { + color: #000000; + font-weight: 700; + font-size: 22px; + line-height: 32px; + } + &__page { max-width: 1160px !important; margin-top: 23px; diff --git a/src/pages/PartnerPersonalInfo/PartnerPersonalInfo.js b/src/pages/PartnerСategories/PartnerСategories.js similarity index 66% rename from src/pages/PartnerPersonalInfo/PartnerPersonalInfo.js rename to src/pages/PartnerСategories/PartnerСategories.js index 55867f2d..caaed3b2 100644 --- a/src/pages/PartnerPersonalInfo/PartnerPersonalInfo.js +++ b/src/pages/PartnerСategories/PartnerСategories.js @@ -1,10 +1,14 @@ import React, {useState} from 'react'; import {Link} from "react-router-dom"; +import {Navigate} from "react-router-dom"; +import {useDispatch} from "react-redux"; import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader"; import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs" import {Footer} from "../../components/Footer/Footer"; +import {setPartnerEmployees} from "../../redux/outstaffingSlice"; + import BackEndImg from "./images/personalBackEnd.png" import FrontendImg from "./images/PersonalFrontend.png" import ArchitectureImg from "./images/PersonalArchitecture.png" @@ -15,12 +19,12 @@ import ManageImg from "./images/PersonalMng.png" import CopyImg from "./images/PersonalCopy.png" import SmmImg from "./images/PersonalSMM.png" import rightArrow from "../../images/arrowRight.png" +import avatarImg from "../PartnerEmployees/avatarMok.png"; -import {Navigate} from "react-router-dom"; +import "./partnerСategories.scss" -import "./parthnerPersonalInfo.scss" - -export const PartnerPersonalInfo = () => { +export const PartnerCategories = () => { + const dispatch = useDispatch(); if(localStorage.getItem('role_status') !== '18') { return } @@ -28,81 +32,117 @@ export const PartnerPersonalInfo = () => { const [personalInfoItems] = useState([ { title: 'Backend разработчики', - link: '/profile', + link: '/profile/categories/employees', description: 'Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript', available: true, img: BackEndImg }, { title: 'Frontend разработчики', - link: '/profile', + link: '/profile/categories/employees', description: 'Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript', available: true, img: FrontendImg }, { title: 'Архитектура проектов', - link: '/profile', + link: '/profile/categories/employees', description: 'Потоки данных ER ERP CRM CQRS UML BPMN', available: true, img: ArchitectureImg }, { title: 'Дизайн проектов', - link: '/profile', + link: '/profile/categories/employees', description: 'Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript', available: true, img: DesignImg }, { title: 'Тестирование проектов', - link: '/profile', + link: '/profile/add-request', description: 'SQL Postman TestRail Kibana Ручное тестирование', available: false, img: TestImg }, { title: 'Администрирование проектов', - link: '/profile', + link: '/profile/add-request', description: 'DevOps ELK Kubernetes Docker Bash Apache Oracle Git', available: false, img: AdminImg }, { title: 'Управление проектом', - link: '/profile', + link: '/profile/add-request', description: 'Scrum Kanban Agile Miro CustDev', available: false, img: ManageImg }, { title: 'Копирайтинг проектов', - link: '/profile', + link: '/profile/add-request', description: 'Теги Заголовок H1 Дескриптор Абзац Сценарий', available: false, img: CopyImg }, { title: 'Реклама и SMM', - link: '/profile', + link: '/profile/add-request', description: 'Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript', available: false, img: SmmImg }, ]) + + const [mokPersons] = useState([ + { + personAvatar: avatarImg, + name: "Макаренко Дмитрий", + qualification: "PHP Backend - разработчик", + level: "Middle", + project: "Админка НВД Консалтинг", + tasks_in_progress: 5, + month_hours: 140, + id: 1 + }, + { + personAvatar: avatarImg, + name: "Макаренко Дмитрий", + qualification: "PHP Backend - разработчик", + level: "Middle", + project: "Админка НВД Консалтинг", + tasks_in_progress: 5, + month_hours: 140, + id: 2 + }, + { + personAvatar: avatarImg, + name: "Макаренко Дмитрий", + qualification: "PHP Backend - разработчик", + level: "Middle", + project: "Админка НВД Консалтинг", + tasks_in_progress: 5, + month_hours: 140, + id: 3 + }, + ]) return ( -
+
-

Данные персонала

-
+

Данные персонала

+
{personalInfoItems.map((item, index) => { - return + return { + dispatch(setPartnerEmployees(mokPersons)) + }}>
{item.title}

{item.title}

diff --git a/src/pages/PartnerPersonalInfo/images/PersonalAdmin.png b/src/pages/PartnerСategories/images/PersonalAdmin.png similarity index 100% rename from src/pages/PartnerPersonalInfo/images/PersonalAdmin.png rename to src/pages/PartnerСategories/images/PersonalAdmin.png diff --git a/src/pages/PartnerPersonalInfo/images/PersonalArchitecture.png b/src/pages/PartnerСategories/images/PersonalArchitecture.png similarity index 100% rename from src/pages/PartnerPersonalInfo/images/PersonalArchitecture.png rename to src/pages/PartnerСategories/images/PersonalArchitecture.png diff --git a/src/pages/PartnerPersonalInfo/images/PersonalCopy.png b/src/pages/PartnerСategories/images/PersonalCopy.png similarity index 100% rename from src/pages/PartnerPersonalInfo/images/PersonalCopy.png rename to src/pages/PartnerСategories/images/PersonalCopy.png diff --git a/src/pages/PartnerPersonalInfo/images/PersonalDesign.png b/src/pages/PartnerСategories/images/PersonalDesign.png similarity index 100% rename from src/pages/PartnerPersonalInfo/images/PersonalDesign.png rename to src/pages/PartnerСategories/images/PersonalDesign.png diff --git a/src/pages/PartnerPersonalInfo/images/PersonalFrontend.png b/src/pages/PartnerСategories/images/PersonalFrontend.png similarity index 100% rename from src/pages/PartnerPersonalInfo/images/PersonalFrontend.png rename to src/pages/PartnerСategories/images/PersonalFrontend.png diff --git a/src/pages/PartnerPersonalInfo/images/PersonalMng.png b/src/pages/PartnerСategories/images/PersonalMng.png similarity index 100% rename from src/pages/PartnerPersonalInfo/images/PersonalMng.png rename to src/pages/PartnerСategories/images/PersonalMng.png diff --git a/src/pages/PartnerPersonalInfo/images/PersonalSMM.png b/src/pages/PartnerСategories/images/PersonalSMM.png similarity index 100% rename from src/pages/PartnerPersonalInfo/images/PersonalSMM.png rename to src/pages/PartnerСategories/images/PersonalSMM.png diff --git a/src/pages/PartnerPersonalInfo/images/PersonalTesters.png b/src/pages/PartnerСategories/images/PersonalTesters.png similarity index 100% rename from src/pages/PartnerPersonalInfo/images/PersonalTesters.png rename to src/pages/PartnerСategories/images/PersonalTesters.png diff --git a/src/pages/PartnerPersonalInfo/images/personalBackEnd.png b/src/pages/PartnerСategories/images/personalBackEnd.png similarity index 100% rename from src/pages/PartnerPersonalInfo/images/personalBackEnd.png rename to src/pages/PartnerСategories/images/personalBackEnd.png diff --git a/src/pages/PartnerPersonalInfo/parthnerPersonalInfo.scss b/src/pages/PartnerСategories/partnerСategories.scss similarity index 96% rename from src/pages/PartnerPersonalInfo/parthnerPersonalInfo.scss rename to src/pages/PartnerСategories/partnerСategories.scss index 3caf5003..12179c6c 100644 --- a/src/pages/PartnerPersonalInfo/parthnerPersonalInfo.scss +++ b/src/pages/PartnerСategories/partnerСategories.scss @@ -1,4 +1,4 @@ -.personalInfo { +.partnerCategories { background: #F1F1F1; height: 100%; min-height: 100vh; @@ -6,9 +6,9 @@ &__title { color: #000000; - font-weight: 500; - font-size: 18px; - line-height: 22px; + font-weight: 700; + font-size: 22px; + line-height: 32px; } &__items { diff --git a/src/pages/Profile/Profile.js b/src/pages/Profile/Profile.js index bd5cfb5e..aa163181 100644 --- a/src/pages/Profile/Profile.js +++ b/src/pages/Profile/Profile.js @@ -65,7 +65,7 @@ export const Profile = () => { description: 'У вас 2 вакансии
открытые от лица компании' }, { - path: '/employees', + path: '/categories', img: summaryIcon, title: 'Данные персонала', description: 'Наши специалисты
уже работающие у вас' diff --git a/src/pages/Tracker/Tracker.js b/src/pages/Tracker/Tracker.js index 6ee734d7..175a039e 100644 --- a/src/pages/Tracker/Tracker.js +++ b/src/pages/Tracker/Tracker.js @@ -1,10 +1,11 @@ import React, { useState } from "react"; import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader"; +import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"; 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,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: "Открытые", @@ -45,7 +48,7 @@ export const Tracker = () => { files: 0, avatarCreated: avatarTest, avatarDo: avatarTest, - id: 1 + id: 1, }, { task: "PR - 2245", @@ -54,7 +57,7 @@ export const Tracker = () => { files: 0, avatarCreated: avatarTest, avatarDo: avatarTest, - id: 2 + id: 2, }, ], }, @@ -69,7 +72,7 @@ export const Tracker = () => { files: 0, avatarCreated: avatarTest, avatarDo: avatarTest, - id: 3 + id: 3, }, ], }, @@ -84,7 +87,7 @@ export const Tracker = () => { files: 0, avatarCreated: avatarTest, avatarDo: avatarTest, - id: 4 + id: 4, }, { task: "PR - 2245", @@ -93,7 +96,7 @@ export const Tracker = () => { files: 0, avatarCreated: avatarTest, avatarDo: avatarTest, - id: 5 + id: 5, }, { task: "PR - 2245", @@ -102,7 +105,7 @@ export const Tracker = () => { files: 0, avatarCreated: avatarTest, avatarDo: avatarTest, - id: 6 + id: 6, }, { task: "PR - 2245", @@ -111,7 +114,7 @@ export const Tracker = () => { files: 0, avatarCreated: avatarTest, avatarDo: avatarTest, - id: 9 + id: 9, }, ], }, @@ -126,7 +129,7 @@ export const Tracker = () => { files: 0, avatarCreated: avatarTest, avatarDo: avatarTest, - id: 7 + id: 7, }, { task: "PR - 2245", @@ -135,7 +138,7 @@ export const Tracker = () => { files: 0, avatarCreated: avatarTest, avatarDo: avatarTest, - id: 8 + id: 8, }, ], }, @@ -145,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 ( @@ -330,6 +366,11 @@ export const Tracker = () => {
+

Трекер

@@ -375,11 +416,12 @@ export const Tracker = () => {
); })} - -
@@ -391,8 +433,18 @@ export const Tracker = () => { } >
+

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

- + + setModalCreateColl(true)} + > + + +
avatar avatar @@ -422,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" + : "" + }`} >
@@ -436,7 +494,7 @@ export const Tracker = () => { {section.tasks.map((task, index) => { if (index > 2) { if (!section.open) { - return + return; } } return ( @@ -444,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)} > @@ -473,7 +533,16 @@ export const Tracker = () => { ); })} {section.tasks.length > 3 && ( - toggleMoreTasks(wrapperIndex)}>{section.open ? '-' : '+'} + toggleMoreTasks(wrapperIndex)} + > + {section.open ? "-" : "+"} + )}
); @@ -483,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/outstaffingSlice.js b/src/redux/outstaffingSlice.js index f48d9711..b2c02687 100644 --- a/src/redux/outstaffingSlice.js +++ b/src/redux/outstaffingSlice.js @@ -9,7 +9,8 @@ const initialState = { auth: false, positionId: null, profileInfo: {}, - reportsDates: '' + reportsDates: '', + partnerEmployees: [] }; export const outstaffingSlice = createSlice({ @@ -46,10 +47,13 @@ export const outstaffingSlice = createSlice({ setReportsDates: (state, action) => { state.reportsDates = action.payload; }, + setPartnerEmployees: (state, action) => { + state.partnerEmployees = action.payload + } }, }); -export const { tags, profiles, selectedItems, auth, currentCandidate, filteredCandidates, setPositionId, setUserInfo, setProfileInfo, setReportsDates } = outstaffingSlice.actions; +export const { tags, profiles, selectedItems, auth, currentCandidate, filteredCandidates, setPositionId, setUserInfo, setProfileInfo, setReportsDates, setPartnerEmployees } = outstaffingSlice.actions; export const selectProfiles = (state) => state.outstaffing.profiles; export const selectTags = (state) => state.outstaffing.tags; @@ -61,5 +65,6 @@ export const getPositionId = (state) => state.outstaffing.positionId; export const getProfileInfo = (state) => state.outstaffing.profileInfo; export const selectUserInfo = (state) => state.outstaffing.userInfo; export const getReportsDates = (state) => state.outstaffing.reportsDates; +export const getPartnerEmployees = (state) => state.outstaffing.partnerEmployees; export default outstaffingSlice.reducer; 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, + }), });