From 15ed4b8c1d5cfd5d47aa1631f31a10e123877cd5 Mon Sep 17 00:00:00 2001 From: M1kola Date: Thu, 23 Feb 2023 14:57:26 +0300 Subject: [PATCH 1/2] partner bid page --- src/App.js | 2 + src/components/ProfileHeader/ProfileHeader.js | 2 +- src/images/QualificationInfo.png | Bin 0 -> 672 bytes src/images/QualificationInfoMiddle.png | Bin 0 -> 507 bytes src/images/mokPerson.png | Bin 0 -> 6039 bytes src/pages/AuthForPartners/AuthForPartners.js | 2 +- src/pages/PartnerBid/PartnerBid.js | 119 +++++ src/pages/PartnerBid/partnerBid.scss | 440 ++++++++++++++++++ src/pages/PartnerRequests/PartnerRequests.js | 2 +- src/pages/Profile/Profile.js | 2 +- 10 files changed, 565 insertions(+), 4 deletions(-) create mode 100644 src/images/QualificationInfo.png create mode 100644 src/images/QualificationInfoMiddle.png create mode 100644 src/images/mokPerson.png create mode 100644 src/pages/PartnerBid/PartnerBid.js create mode 100644 src/pages/PartnerBid/partnerBid.scss diff --git a/src/App.js b/src/App.js index 84bf489b..cbd1e31b 100644 --- a/src/App.js +++ b/src/App.js @@ -24,6 +24,7 @@ import {Payouts} from './pages/Payouts/Payouts' import {Settings} from './pages/Settings/Settings' import {PartnerRequests} from './pages/PartnerRequests/PartnerRequests' import {PartnerAddRequest} from './pages/PartnerAddRequest/PartnerAddRequest' +import {PartnerBid} from './pages/PartnerBid/PartnerBid' import './fonts/stylesheet.css' import 'bootstrap/dist/css/bootstrap.min.css' @@ -68,6 +69,7 @@ const App = () => { }/> }/> }/> + }/> }/> diff --git a/src/components/ProfileHeader/ProfileHeader.js b/src/components/ProfileHeader/ProfileHeader.js index d63aae34..ae91b927 100644 --- a/src/components/ProfileHeader/ProfileHeader.js +++ b/src/components/ProfileHeader/ProfileHeader.js @@ -21,7 +21,7 @@ export const ProfileHeader = () => { const userRole = useSelector(getRole); const profileInfo = useSelector(getProfileInfo); - const [user] = useState('developer') + const [user] = useState('partner') const [navInfo] = useState({ developer: [ { diff --git a/src/images/QualificationInfo.png b/src/images/QualificationInfo.png new file mode 100644 index 0000000000000000000000000000000000000000..a540a284c837b044d1c497bbbe44767a9090e598 GIT binary patch literal 672 zcmV;R0$=@!P)P0012b1^@s6UwFrL00009a7bBm000XU z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yPGi}+=x2B6D0}vGj7&P|CmlsoO9%i`9>YUYZpoR6$_myrA7<(N`;G?l^p?saZ`$c%hXYB!qw6yjTi4ZKU zd(A?9mVXApAuTQqVM!Wf=M)CImE^6M-_NLa4)|8e*Ci`N?#t8>oQ<3;9Qwo&Lfh)D z_D|p6|KT>BmGH@m4pVE)r?!Kyv(VK~#7F#n!=1 z!!Q&E;P;$ENx3+7kvNtOIzqX11dd!e!3Hf8WCXfFM@X5VY*3DzASY6Ruz62yL<9lZ zjw604lHv1a=0M(w43lDNiO`C#4)`nc8x_lxhJn(+1Y*1+GEvn1Qx;qQWj zgQb$DSlh+@9gq_zUj|77X?oRM2ORX>UB!jwkyo->*d1h^v_Qh1Lk(zK4>cpfrG$0 zN~zoz?gW0pqq!^G1nGY|hc0n}qk=AQFJKGYI1Pq@&gb5$dc9B6V=m4R?FF6ipAgNG x?#IU1MOi-ILSJc&*!D7|zlETi19%Mq`2;H;2AL>NoU{M{002ovPDHLkV1jAr(%%38 literal 0 HcmV?d00001 diff --git a/src/images/mokPerson.png b/src/images/mokPerson.png new file mode 100644 index 0000000000000000000000000000000000000000..b1e0bf52a26dbbd321053a2a66bf3394095d257f GIT binary patch literal 6039 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 RXpjH^002ovPDHLkV1lbfy%GQb literal 0 HcmV?d00001 diff --git a/src/pages/AuthForPartners/AuthForPartners.js b/src/pages/AuthForPartners/AuthForPartners.js index 7c23cfdf..660b85f4 100644 --- a/src/pages/AuthForPartners/AuthForPartners.js +++ b/src/pages/AuthForPartners/AuthForPartners.js @@ -22,7 +22,7 @@ const AuthForPartners = () => { useEffect(()=> { if (isAuth || getToken) { - navigate('/') + navigate('/profile') } }, [getToken]); diff --git a/src/pages/PartnerBid/PartnerBid.js b/src/pages/PartnerBid/PartnerBid.js new file mode 100644 index 00000000..dbd75cf9 --- /dev/null +++ b/src/pages/PartnerBid/PartnerBid.js @@ -0,0 +1,119 @@ +import React, {useState} from 'react'; +import {Link} from "react-router-dom"; + +import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader"; +import {Footer} from "../../components/Footer/Footer"; + +import arrowSwitchDate from "../../images/arrowViewReport.png"; +import backEndImg from "../../images/QualificationInfo.png"; +import middle from "../../images/QualificationInfoMiddle.png"; +import personImg from "../../images/mokPerson.png" + +import './partnerBid.scss' + +export const PartnerBid = () => { + const [mokPersons] = useState([ + { + name: 'Дмитрий, PHP Back end - разработчик, Middle', + link: '', + img: personImg + }, + { + name: 'Дмитрий, PHP Back end - разработчик, Middle', + link: '', + img: personImg + }, + { + name: 'Дмитрий, PHP Back end - разработчик, Middle', + link: '', + img: personImg + } + ]) + return ( +
+ +
+

Страница заявки

+
+

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

+
+
+
+ arrow +
+

Дата заявки : 19 декабря 2022 года

+
+ arrow +
+
+
+ + + + + + + + + + + + + + + + + +

Требования к стеку разработчика

Квалификация

+

+ PHP приветствуется аккуратность в коде. MySQL - умение писать запросы к MySQL, + понимание как происходит запрос. Средний уровень: AJAX, JSON, общее понимание; + CSS/CSS3, HTML, Bootstrap; +

+ 		+
+
+ backEndImg +
+

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

+
+
+

+ Знание современных фреймворков Laravel, Yii 2, FuelPHP, Симфони; + Знания по разработке REST API; + Знание PHP,HTML,CSS,MySQL,Pyhton,JavaScript. +

+ 		+
+
+ middleImg +
+

Средний
(Middle)

+
+
+
+
+
+

Подходящие сотрудники по запросу

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

{person.name}

+ + Подробнее + +
+ +
+
+ }) + } +
+
+
+
+
+ ) +}; diff --git a/src/pages/PartnerBid/partnerBid.scss b/src/pages/PartnerBid/partnerBid.scss new file mode 100644 index 00000000..05afb705 --- /dev/null +++ b/src/pages/PartnerBid/partnerBid.scss @@ -0,0 +1,440 @@ +.partnerBid { + background: #F1F1F1; + height: 100%; + min-height: 100vh; + font-family: 'LabGrotesque', sans-serif; + + .container { + max-width: 1160px; + margin-top: 23px; + + @media (max-width: 570px) { + margin-top: 0; + } + } + + &__title { + color: #000000; + font-weight: 700; + font-size: 22px; + line-height: 32px; + } + + &__qualification { + background: #FFFFFF; + border-radius: 12px; + padding: 20px 37px; + margin-top: 20px; + + h3 { + color: #000000; + font-weight: 500; + font-size: 22px; + line-height: 32px; + margin-bottom: 0; + } + } + + &__switcher { + display: flex; + margin: 30px 0; + justify-content: center; + align-items: center; + + @media (max-width: 550px) { + justify-content: space-between; + } + + .switchDate { + width: 48px; + height: 48px; + background: #8DC63F; + border-radius: 50px; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + } + + &__prev { + transform: rotate(180deg); + } + + p { + color: #000000; + font-weight: 400; + font-size: 12px; + line-height: 32px; + margin: 0 100px; + + @media (max-width: 550px) { + margin: 0; + } + } + } + + .table__wrapper { + margin: 0 -28px; + overflow: hidden; + position: relative; + + @media (max-width: 1205px) { + margin: 0; + } + + table { + width: 100%; + border-collapse: separate; + border-spacing: 28px 0; + + @media (max-width: 1205px) { + display: grid; + border-collapse: collapse; + } + + thead { + + @media (max-width: 1205px) { + display: grid; + } + tr { + + @media (max-width: 1205px) { + display: grid; + grid-template-columns: 74% calc(26% - 28px); + column-gap: 28px; + } + + @media (max-width: 900px) { + grid-template-columns: 65% calc(35% - 28px); + } + + @media (max-width: 515px) { + grid-template-columns: 65% calc(35% - 10px); + column-gap: 10px; + } + + th { + background: white; + border-radius: 12px 12px 0 0; + font-weight: 500; + font-size: 22px; + line-height: 32px; + + &:first-child { + padding: 32px 37px; + + + @media (max-width: 640px) { + padding: 15px; + } + } + + &:last-child { + padding: 32px 50px 32px 48px; + + @media (max-width: 640px) { + padding: 15px; + } + } + + p { + margin-bottom: 0; + } + + @media (max-width: 1000px) { + font-size: 15px; + line-height: 20px; + text-align: center; + } + + @media (max-width: 515px) { + font-size: 12px; + } + } + } + } + + tbody { + @media (max-width: 1205px) { + display: grid; + } + tr { + + @media (max-width: 1205px) { + display: grid; + grid-template-columns: 74% calc(26% - 28px); + column-gap: 28px; + } + + @media (max-width: 900px) { + grid-template-columns: 65% calc(35% - 28px); + } + + @media (max-width: 515px) { + column-gap: 10px; + grid-template-columns: 65% calc(35% - 10px); + } + td { + background: white; + p { + margin-bottom: 0; + color: #000000; + font-weight: 400; + font-size: 14px; + line-height: 24px; + + @media (max-width: 515px) { + font-size: 12px; + line-height: 18px; + } + + @media (max-width: 450px) { + font-size: 10px; + } + } + &:first-child { + padding: 0 27px 35px 39px; + + @media (max-width: 580px) { + padding: 15px; + } + } + + &:last-child { + padding: 0 45px 35px; + + @media (max-width: 580px) { + padding: 15px; + } + } + + .qualification__info { + display: flex; + align-items: center; + + @media (max-width: 1000px) { + flex-direction: column; + row-gap: 5px; + + p { + margin: 0 !important; + text-align: center; + } + } + + .img__wrapper { + min-width: 48px; + height: 48px; + background: #8DC63F; + border-radius: 50px; + display: flex; + justify-content: center; + align-items: center; + + @media (max-width: 515px) { + min-width: 25px; + height: 25px; + + img { + width: 17px; + height: 17px; + } + } + } + + p { + font-weight: 400; + font-size: 14px; + line-height: 18px; + margin-left: 25px; + + @media (max-width: 515px) { + font-size: 12px; + line-height: 18px; + } + } + + .middle { + color: #406128; + font-weight: 900; + font-size: 14px; + line-height: 18px; + + @media (max-width: 515px) { + font-size: 12px; + line-height: 18px; + } + } + } + } + + &:last-child { + td { + border-radius: 0 0 12px 12px; + } + } + } + } + } + } + + &__suitable { + &__title { + background: #E1FCCF; + border-radius: 12px 12px 0px 0px; + margin-top: 48px; + padding: 18px 37px; + position: relative; + + p { + color: #000000; + font-weight: 500; + font-size: 22px; + line-height: 32px; + + @media (max-width: 540px) { + font-size: 15px; + height: 20px; + } + } + } + + &__persons { + display: flex; + flex-direction: column; + row-gap: 18px; + position: relative; + top: -15px; + } + + &__person { + display: flex; + padding: 21px 45px 19px; + align-items: center; + background: #FFFFFF; + border-radius: 12px; + + img { + width: 88px; + height: 88px; + } + + p { + color: #000000; + font-weight: 500; + font-size: 16px; + line-height: 32px; + margin-left: 60px; + position: relative; + + &:after { + content: ""; + position: absolute; + background: #52B709; + border-radius: 12px; + width: 70%; + height: 8px; + bottom: -14px; + left: 0; + } + } + + &__more { + padding: 9px 45px; + background: #52B709; + border-radius: 44px; + color: #FFFFFF; + font-weight: 500; + font-size: 16px; + line-height: 32px; + margin-left: 200px; + + &:hover { + color: white; + text-decoration: none; + } + } + + &__info { + width: 24px; + height: 24px; + box-shadow: 0px 3px 2px -2px rgba(0, 0, 0, 0.06), 0px 5px 3px -2px rgba(0, 0, 0, 0.02); + border-radius: 6px; + border: 1px solid #DDDDDD; + cursor: pointer; + position: relative; + display: flex; + align-items: center; + justify-content: center; + margin-left: 60px; + + &:before { + content: "..."; + color: #6F6F6F; + font-size: 25px; + position: relative; + top: -6px; + } + } + + @media (max-width: 1100px) { + justify-content: space-between; + p { + margin-left: 0; + } + + &__more { + margin-left: 0; + } + + &__info { + margin-left: 0; + } + } + + @media (max-width: 825px) { + padding: 15px; + } + + @media (max-width: 750px) { + p { + max-width: 220px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + margin-bottom: 0; + } + } + + @media (max-width: 575px) { + img { + width: 35px; + height: 35px; + } + } + + @media (max-width: 630px) { + &__more { + padding: 5px 20px; + } + } + + @media (max-width: 510px) { + p { + font-size: 12px; + max-width: 150px; + } + + &__more { + font-size: 12px; + padding: 2px 10px; + } + } + } + } + + footer { + margin-top: 70px; + } +} diff --git a/src/pages/PartnerRequests/PartnerRequests.js b/src/pages/PartnerRequests/PartnerRequests.js index 7822b64d..4ff96d3e 100644 --- a/src/pages/PartnerRequests/PartnerRequests.js +++ b/src/pages/PartnerRequests/PartnerRequests.js @@ -34,7 +34,7 @@ export const PartnerRequests = () => {
{ items.map((item, index) => { - return + return

{item.name}

diff --git a/src/pages/Profile/Profile.js b/src/pages/Profile/Profile.js index ce887a34..44d329f8 100644 --- a/src/pages/Profile/Profile.js +++ b/src/pages/Profile/Profile.js @@ -22,7 +22,7 @@ import './profile.scss' export const Profile = () => { const profileInfo = useSelector(getProfileInfo); - const [user] = useState('developer') + const [user] = useState('partner') const [profileItemsInfo] = useState({ developer: [ { From 31cc5acbe1ddd7b0eb0f1de67aa299aa523489f3 Mon Sep 17 00:00:00 2001 From: M1kola Date: Mon, 27 Feb 2023 16:50:32 +0300 Subject: [PATCH 2/2] partner-personal-area --- src/App.js | 5 +- src/components/AuthBox/AuthBox.js | 1 + src/components/Calendar/Calendar.js | 5 +- src/components/Candidate/Candidate.js | 5 +- .../ProfileBreadcrumbs/ProfileBreadcrumbs.js | 16 ++++++ .../profileBreadcrumbs.scss | 50 ++++++++++++++++++ .../ProfileCalendar/ProfileCalendar.js | 7 ++- src/components/ProfileHeader/ProfileHeader.js | 2 +- src/components/ReportForm/ReportForm.js | 11 +++- src/images/BreadcrumbsArrow.png | Bin 0 -> 187 bytes src/pages/FormPage/FormPage.js | 5 +- src/pages/Home/Home.js | 4 ++ .../PartnerAddRequest/PartnerAddRequest.js | 11 ++++ src/pages/PartnerBid/PartnerBid.js | 16 ++++-- src/pages/PartnerRequests/PartnerRequests.js | 11 +++- src/pages/Profile/Profile.js | 4 +- src/pages/Summary/Summary.js | 10 ++++ src/pages/ViewReport/ViewReport.js | 10 +++- 18 files changed, 157 insertions(+), 16 deletions(-) create mode 100644 src/components/ProfileBreadcrumbs/ProfileBreadcrumbs.js create mode 100644 src/components/ProfileBreadcrumbs/profileBreadcrumbs.scss create mode 100644 src/images/BreadcrumbsArrow.png diff --git a/src/App.js b/src/App.js index cbd1e31b..75176d24 100644 --- a/src/App.js +++ b/src/App.js @@ -39,8 +39,6 @@ const App = () => { - }/> - }/> }/> @@ -61,6 +59,7 @@ const App = () => { }/> + }/> }/> }/> }/> @@ -72,7 +71,7 @@ const App = () => { }/> - }/> + }/> diff --git a/src/components/AuthBox/AuthBox.js b/src/components/AuthBox/AuthBox.js index 40011dfb..d07661e4 100644 --- a/src/components/AuthBox/AuthBox.js +++ b/src/components/AuthBox/AuthBox.js @@ -77,6 +77,7 @@ export const AuthBox = ({title, altTitle, roleChangeLink}) => { localStorage.setItem('auth_token', res.access_token); localStorage.setItem('id', res.id); localStorage.setItem('cardId', res.card_id); + localStorage.setItem('role_status', res.status); localStorage.setItem( 'access_token_expired_at', res.access_token_expired_at diff --git a/src/components/Calendar/Calendar.js b/src/components/Calendar/Calendar.js index 09d26c94..9b35e7be 100644 --- a/src/components/Calendar/Calendar.js +++ b/src/components/Calendar/Calendar.js @@ -1,6 +1,6 @@ import React, {useEffect, useState} from 'react' import {useSelector} from 'react-redux' -import {Link, useNavigate} from 'react-router-dom' +import {Link, Navigate, useNavigate} from 'react-router-dom' import CalendarComponent from './CalendarComponent' import {currentMonth} from './calendarHelper' @@ -16,6 +16,9 @@ import {urlForLocal} from "../../helper"; const Calendar = () => { + if(localStorage.getItem('role_status') !== '18') { + return + } const candidateForCalendar = useSelector(selectCurrentCandidate); diff --git a/src/components/Candidate/Candidate.js b/src/components/Candidate/Candidate.js index 4dbdd427..f0c31be6 100644 --- a/src/components/Candidate/Candidate.js +++ b/src/components/Candidate/Candidate.js @@ -1,5 +1,5 @@ import React, {useEffect, useState} from 'react' -import {useParams, Link, useNavigate} from 'react-router-dom' +import {useParams, Link, useNavigate, Navigate} from 'react-router-dom' import {useSelector, useDispatch} from 'react-redux' import SkillSection from '../SkillSection/SkillSection' @@ -23,6 +23,9 @@ import {Header} from "../Header/Header"; const Candidate = () => { + if(localStorage.getItem('role_status') !== '18') { + return + } const {id: candidateId} = useParams(); const navigate = useNavigate(); diff --git a/src/components/ProfileBreadcrumbs/ProfileBreadcrumbs.js b/src/components/ProfileBreadcrumbs/ProfileBreadcrumbs.js new file mode 100644 index 00000000..7ef5f280 --- /dev/null +++ b/src/components/ProfileBreadcrumbs/ProfileBreadcrumbs.js @@ -0,0 +1,16 @@ +import React from 'react' +import {Link} from "react-router-dom"; + +import './profileBreadcrumbs.scss' + +export const ProfileBreadcrumbs = ({ links }) => { + return ( +
+ {links.map((link, index) => { + return {link.name} + }) + + } +
+ ) +} diff --git a/src/components/ProfileBreadcrumbs/profileBreadcrumbs.scss b/src/components/ProfileBreadcrumbs/profileBreadcrumbs.scss new file mode 100644 index 00000000..9992152d --- /dev/null +++ b/src/components/ProfileBreadcrumbs/profileBreadcrumbs.scss @@ -0,0 +1,50 @@ +.profileBreadcrumbs { + display: flex; + margin-bottom: 12px; + + @media (max-width: 570px) { + margin-top: 15px; + } + + a { + color: #5B6871; + font-weight: 400; + font-size: 12px; + line-height: 16px; + transition: 0.3s all ease; + position: relative; + margin-right: 20px; + display: flex; + align-items: center; + + @media (max-width: 525px) { + font-size: 10px; + } + + @media (max-width: 455px) { + font-size: 9px; + } + + &:hover { + text-decoration: none; + color: #000000; + } + + &:after { + content: ''; + background-image: url("../../images/BreadcrumbsArrow.png"); + background-repeat: no-repeat; + width: 7px; + height:10px; + position: absolute; + right: -14px; + } + + &:last-child { + margin-right: 0; + &:after { + background: none; + } + } + } +} diff --git a/src/components/ProfileCalendar/ProfileCalendar.js b/src/components/ProfileCalendar/ProfileCalendar.js index 6fd2dcbe..a81a2325 100644 --- a/src/components/ProfileCalendar/ProfileCalendar.js +++ b/src/components/ProfileCalendar/ProfileCalendar.js @@ -2,12 +2,13 @@ import React, { useEffect, useState } from 'react' import {useDispatch, useSelector} from 'react-redux' import {getReports} from '../Calendar/calendarHelper' -import { Link } from 'react-router-dom' +import {Link, Navigate} from 'react-router-dom' import moment from "moment"; import {ProfileCalendarComponent} from "./ProfileCalendarComponent"; import {Loader} from "../Loader/Loader"; import {ProfileHeader} from "../ProfileHeader/ProfileHeader"; +import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs" import { Footer } from '../Footer/Footer' import {urlForLocal} from "../../helper"; @@ -21,6 +22,9 @@ import './profileCalendar.scss' export const ProfileCalendar = () => { + if(localStorage.getItem('role_status') === '18') { + return + } const dispatch = useDispatch(); const profileInfo = useSelector(getProfileInfo) const requestDates = useSelector(getRequestDates) @@ -62,6 +66,7 @@ export const ProfileCalendar = () => {
+

Ваши отчеты

diff --git a/src/components/ProfileHeader/ProfileHeader.js b/src/components/ProfileHeader/ProfileHeader.js index ae91b927..845b284a 100644 --- a/src/components/ProfileHeader/ProfileHeader.js +++ b/src/components/ProfileHeader/ProfileHeader.js @@ -21,7 +21,7 @@ export const ProfileHeader = () => { const userRole = useSelector(getRole); const profileInfo = useSelector(getProfileInfo); - const [user] = useState('partner') + const [user] = useState(localStorage.getItem('role_status') === '18' ? 'partner' : 'developer') const [navInfo] = useState({ developer: [ { diff --git a/src/components/ReportForm/ReportForm.js b/src/components/ReportForm/ReportForm.js index 77163999..02dc26cd 100644 --- a/src/components/ReportForm/ReportForm.js +++ b/src/components/ReportForm/ReportForm.js @@ -1,15 +1,15 @@ import React, {useState, useEffect} from 'react' import {useSelector} from 'react-redux' -import {Link, useNavigate} from 'react-router-dom' +import {Link, Navigate, useNavigate} from 'react-router-dom' import DatePicker, { registerLocale } from "react-datepicker" import {getCorrectDate, getCreatedDate} from '../Calendar/calendarHelper' import ru from "date-fns/locale/ru" registerLocale("ru", ru); import {Loader} from '../Loader/Loader' -import {currentMonthAndDay} from '../Calendar/calendarHelper' import {Footer} from "../Footer/Footer"; import {ProfileHeader} from "../ProfileHeader/ProfileHeader"; +import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs" import {apiRequest} from "../../api/request"; @@ -25,6 +25,9 @@ import './reportForm.scss' import "react-datepicker/dist/react-datepicker.css"; const ReportForm = () => { + if(localStorage.getItem('role_status') === '18') { + return + } const navigate= useNavigate(); const reportDate = useSelector(getReportDate); @@ -96,6 +99,10 @@ const ReportForm = () => {
+

Ваши отчеты - добавить отчет

diff --git a/src/images/BreadcrumbsArrow.png b/src/images/BreadcrumbsArrow.png new file mode 100644 index 0000000000000000000000000000000000000000..a518b4edb969aad9739a8c700c2f22a60ae6525a GIT binary patch literal 187 zcmeAS@N?(olHy`uVBq!ia0vp^>_E)L!3HEN&baUbDb50q$YKTtZeb8+WSBKa0w~B> z9OUlAu$e073tP2 emevnhTbU-jHoX5-pe6xmHiM_DpUXO@geCxmJvkWw literal 0 HcmV?d00001 diff --git a/src/pages/FormPage/FormPage.js b/src/pages/FormPage/FormPage.js index 8d3e757f..6675cc81 100644 --- a/src/pages/FormPage/FormPage.js +++ b/src/pages/FormPage/FormPage.js @@ -1,6 +1,6 @@ import React, {useEffect} from 'react' import {useDispatch, useSelector} from 'react-redux' -import {useParams, useNavigate} from 'react-router-dom' +import {useParams, useNavigate, Navigate} from 'react-router-dom' import SVG from 'react-inlinesvg' import Form from '../../components/Form/Form' @@ -22,6 +22,9 @@ import {urlForLocal} from "../../helper"; import './formPage.scss' const FormPage = () => { + if(localStorage.getItem('role_status') !== '18') { + return + } const params = useParams(); const navigate = useNavigate(); const dispatch = useDispatch(); diff --git a/src/pages/Home/Home.js b/src/pages/Home/Home.js index 0ae31db8..905b5543 100644 --- a/src/pages/Home/Home.js +++ b/src/pages/Home/Home.js @@ -9,9 +9,13 @@ import {profiles, tags} from '../../redux/outstaffingSlice' import {Header} from "../../components/Header/Header"; import {apiRequest} from "../../api/request"; +import {Navigate} from "react-router-dom"; const Home = () => { + if(localStorage.getItem('role_status') !== '18') { + return + } const [isLoadingMore, setIsLoadingMore] = useState(false); const [index, setIndex] = useState(4); diff --git a/src/pages/PartnerAddRequest/PartnerAddRequest.js b/src/pages/PartnerAddRequest/PartnerAddRequest.js index 3ea3ad4a..a81d9dfd 100644 --- a/src/pages/PartnerAddRequest/PartnerAddRequest.js +++ b/src/pages/PartnerAddRequest/PartnerAddRequest.js @@ -1,17 +1,28 @@ import React from 'react'; import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader"; +import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs" import {Footer} from "../../components/Footer/Footer"; import arrowDown from "../../images/selectArrow.png" import './partnerAddRequest.scss' +import {Navigate} from "react-router-dom"; export const PartnerAddRequest = () => { + if(localStorage.getItem('role_status') !== '18') { + return + } return (
+

Страница добавления заявки

diff --git a/src/pages/PartnerBid/PartnerBid.js b/src/pages/PartnerBid/PartnerBid.js index dbd75cf9..9b1326bb 100644 --- a/src/pages/PartnerBid/PartnerBid.js +++ b/src/pages/PartnerBid/PartnerBid.js @@ -1,7 +1,8 @@ import React, {useState} from 'react'; -import {Link} from "react-router-dom"; +import {Link, Navigate} from "react-router-dom"; import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader"; +import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs" import {Footer} from "../../components/Footer/Footer"; import arrowSwitchDate from "../../images/arrowViewReport.png"; @@ -12,6 +13,9 @@ import personImg from "../../images/mokPerson.png" import './partnerBid.scss' export const PartnerBid = () => { + if(localStorage.getItem('role_status') !== '18') { + return + } const [mokPersons] = useState([ { name: 'Дмитрий, PHP Back end - разработчик, Middle', @@ -33,6 +37,12 @@ export const PartnerBid = () => {
+

Страница заявки

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

@@ -97,8 +107,8 @@ export const PartnerBid = () => {

Подходящие сотрудники по запросу

- {mokPersons.map((person) => { - return
+ {mokPersons.map((person, index) => { + return
avatar

{person.name}

diff --git a/src/pages/PartnerRequests/PartnerRequests.js b/src/pages/PartnerRequests/PartnerRequests.js index 4ff96d3e..01e3b15b 100644 --- a/src/pages/PartnerRequests/PartnerRequests.js +++ b/src/pages/PartnerRequests/PartnerRequests.js @@ -1,12 +1,16 @@ import React, {useState} from 'react'; -import {Link} from "react-router-dom"; +import {Link, Navigate} from "react-router-dom"; import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader"; +import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs" import {Footer} from "../../components/Footer/Footer"; import './partnerRequests.scss' export const PartnerRequests = () => { + if(localStorage.getItem('role_status') !== '18') { + return + } const [items] = useState([ { name: 'PHP разработчик ', @@ -29,6 +33,11 @@ export const PartnerRequests = () => {
+

Запросы

diff --git a/src/pages/Profile/Profile.js b/src/pages/Profile/Profile.js index 44d329f8..8b96cca2 100644 --- a/src/pages/Profile/Profile.js +++ b/src/pages/Profile/Profile.js @@ -3,6 +3,7 @@ import {useSelector} from "react-redux"; import {Link} from "react-router-dom"; import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader"; +import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs" import {Footer} from "../../components/Footer/Footer"; import {getProfileInfo} from "../../redux/outstaffingSlice"; @@ -22,7 +23,7 @@ import './profile.scss' export const Profile = () => { const profileInfo = useSelector(getProfileInfo); - const [user] = useState('partner') + const [user] = useState(localStorage.getItem('role_status') === '18' ? 'partner' : 'developer') const [profileItemsInfo] = useState({ developer: [ { @@ -94,6 +95,7 @@ export const Profile = () => {
+

{user === 'developer' ?

Добрый день, 

{profileInfo.fio} diff --git a/src/pages/Summary/Summary.js b/src/pages/Summary/Summary.js index 48bf6294..c496e028 100644 --- a/src/pages/Summary/Summary.js +++ b/src/pages/Summary/Summary.js @@ -2,6 +2,7 @@ import React, {useEffect, useState} from 'react'; import {useSelector} from "react-redux"; import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader"; import {getProfileInfo} from "../../redux/outstaffingSlice"; +import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs" import {Footer} from '../../components/Footer/Footer' import {transformHtml, urlForLocal} from "../../helper"; @@ -11,8 +12,12 @@ import gitImgItem from "../../images/gitItemImg.png" import './summary.scss' import {apiRequest} from "../../api/request"; +import {Navigate} from "react-router-dom"; export const Summary = () => { + if(localStorage.getItem('role_status') === '18') { + return + } const profileInfo = useSelector(getProfileInfo); const [openGit, setOpenGit] = useState(false); const [gitInfo, setGitInfo] = useState([]); @@ -26,6 +31,11 @@ export const Summary = () => {
+

Ваше резюме {openGit && - Git}

{openGit &&
setOpenGit(false)}> arrow diff --git a/src/pages/ViewReport/ViewReport.js b/src/pages/ViewReport/ViewReport.js index 99833f7f..4c6fbed6 100644 --- a/src/pages/ViewReport/ViewReport.js +++ b/src/pages/ViewReport/ViewReport.js @@ -1,11 +1,12 @@ import React, {useEffect, useState} from 'react' -import {Link} from "react-router-dom"; +import {Link, Navigate} from "react-router-dom"; import {useSelector} from "react-redux"; import {getReportDate} from "../../redux/reportSlice"; import {Loader} from "../../components/Loader/Loader" import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader"; +import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs" import {Footer} from "../../components/Footer/Footer"; import arrow from "../../images/right-arrow.png"; @@ -16,6 +17,9 @@ import {getCorrectDate, getCreatedDate} from '../../components/Calendar/calendar import './viewReport.scss' export const ViewReport = () => { + if(localStorage.getItem('role_status') === '18') { + return + } const reportDate = useSelector(getReportDate); const [taskText, setTaskText] = useState([]); @@ -76,6 +80,10 @@ export const ViewReport = () => {
+

Ваши отчеты - просмотр отчета за день

arrow

Вернуться