apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #75 from apuc/fixed-pages

Browse Source 
Fixed pages Auth
This commit is contained in:
NikoM1k 2023-04-27 12:48:05 +03:00 committed by GitHub
commit cf4aee9ab2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 894 additions and 763 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

232
src/components/Candidate/Candidate.js
View File

@ -1,35 +1,38 @@
import React, {useEffect, useState} from 'react' import React, { useEffect, useState } from "react";
import {useParams, Link, useNavigate, Navigate} from 'react-router-dom' import { useParams, Link, useNavigate, Navigate } from "react-router-dom";
import {useSelector, useDispatch} from 'react-redux' import { useSelector, useDispatch } from "react-redux";
import SkillSection from '../SkillSection/SkillSection' import SkillSection from "../SkillSection/SkillSection";
import Sidebar from '../CandidateSidebar/CandidateSidebar' import Sidebar from "../CandidateSidebar/CandidateSidebar";
import {ProfileHeader} from "../ProfileHeader/ProfileHeader"; import { ProfileHeader } from "../ProfileHeader/ProfileHeader";
import {ProfileBreadcrumbs} from "../ProfileBreadcrumbs/ProfileBreadcrumbs"; import { ProfileBreadcrumbs } from "../ProfileBreadcrumbs/ProfileBreadcrumbs";
import {Footer} from '../Footer/Footer' import { Footer } from "../Footer/Footer";
import {currentCandidate, selectCurrentCandidate,} from '../../redux/outstaffingSlice' import {
currentCandidate,
selectCurrentCandidate,
} from "../../redux/outstaffingSlice";
import {apiRequest} from "../../api/request"; import { apiRequest } from "../../api/request";
import {createMarkup} from "../../helper"; import { createMarkup } from "../../helper";
import gitImgItem from "../../images/gitItemImg.png" import gitImgItem from "../../images/gitItemImg.png";
import rectangle from '../../images/rectangle_secondPage.png' import rectangle from "../../images/rectangle_secondPage.png";
import front from '../Outstaffing/images/front_end.png' import front from "../Outstaffing/images/front_end.png";
import back from '../Outstaffing/images/back_end.png' import back from "../Outstaffing/images/back_end.png";
import design from '../Outstaffing/images/design.png' import design from "../Outstaffing/images/design.png";
import rightArrow from "../../images/arrowRight.png" import rightArrow from "../../images/arrowRight.png";
import {LEVELS, SKILLS} from '../../constants/constants' import { LEVELS, SKILLS } from "../../constants/constants";
import './candidate.scss'
import "./candidate.scss";
import { Navigation } from "../Navigation/Navigation";
const Candidate = () => { const Candidate = () => {
if(localStorage.getItem('role_status') !== '18') { if (localStorage.getItem("role_status") !== "18") {
return <Navigate to="/profile" replace/> return <Navigate to="/profile" replace />;
} }
const {id: candidateId} = useParams(); const { id: candidateId } = useParams();
const navigate = useNavigate(); const navigate = useNavigate();
@ -39,121 +42,134 @@ const Candidate = () => {
const [activeSnippet, setActiveSnippet] = useState(true); const [activeSnippet, setActiveSnippet] = useState(true);
useEffect(() => { useEffect(() => {
window.scrollTo(0, 0) window.scrollTo(0, 0);
}, []); }, []);
useEffect(() => { useEffect(() => {
apiRequest(`/profile/${candidateId}`, { apiRequest(`/profile/${candidateId}`, {
params: Number(candidateId), params: Number(candidateId),
}).then((el) => dispatch(currentCandidate(el))) }).then((el) => dispatch(currentCandidate(el)));
}, [dispatch, candidateId]); }, [dispatch, candidateId]);
const {position_id, skillValues, vc_text: text} = currentCandidateObj; const { position_id, skillValues, vc_text: text } = currentCandidateObj;
const setStyles = () => { const setStyles = () => {
const styles = { const styles = {
classes: '', classes: "",
header: '', header: "",
img: '' img: "",
}; };
switch (Number(position_id)) { switch (Number(position_id)) {
case 1: { case 1: {
styles.classes = 'back'; styles.classes = "back";
styles.header = 'Backend'; styles.header = "Backend";
styles.img = back; styles.img = back;
break break;
} }
case 2: { case 2: {
styles.classes = 'des'; styles.classes = "des";
styles.header = 'Frontend'; styles.header = "Frontend";
styles.img = front; styles.img = front;
break break;
} }
case 3: { case 3: {
styles.classes = 'front'; styles.classes = "front";
styles.header = 'Design'; styles.header = "Design";
styles.img = design; styles.img = design;
break break;
} }
default: default:
break break;
} }
return styles return styles;
}; };
const {header, img, classes} = setStyles(); const { header, img, classes } = setStyles();
return ( return (
<div className='candidate__wrapper'> <div className="candidate__wrapper">
<ProfileHeader/> <ProfileHeader />
<div className='container candidate'> <Navigation />
<ProfileBreadcrumbs links={[ <div className="container candidate">
{name: 'Главная', link: '/profile'}, <ProfileBreadcrumbs
{name: 'Каталог свободных специалистов', link: '/profile/catalog'}, links={[
{name: `${currentCandidateObj.specification} ${SKILLS[currentCandidateObj.position_id]}, ${LEVELS[currentCandidateObj.level]}`, link: `/candidate/${currentCandidateObj.id}`} { name: "Главная", link: "/profile" },
{
name: "Каталог свободных специалистов",
link: "/profile/catalog",
},
{
name: `${currentCandidateObj.specification} ${
SKILLS[currentCandidateObj.position_id]
}, ${LEVELS[currentCandidateObj.level]}`,
link: `/candidate/${currentCandidateObj.id}`,
},
]} ]}
/> />
<div className='row'> <div className="row">
<div className='col-12 candidate__header'> <div className="col-12 candidate__header">
<div className="candidate__header__left">
<div className='candidate__header__left'> <h3>
<h3>{currentCandidateObj.specification} &nbsp; {SKILLS[currentCandidateObj.position_id]} &nbsp; {LEVELS[currentCandidateObj.level]}</h3> {currentCandidateObj.specification} &nbsp;{" "}
<div className='candidate__arrow' onClick={() => navigate('/profile/catalog')}> {SKILLS[currentCandidateObj.position_id]} &nbsp;{" "}
<div className='candidate__arrow-img'> {LEVELS[currentCandidateObj.level]}
<img src={rightArrow} alt=''/> </h3>
<div
className="candidate__arrow"
onClick={() => navigate("/profile/catalog")}
>
<div className="candidate__arrow-img">
<img src={rightArrow} alt="" />
</div> </div>
<div className='candidate__arrow-sp'> <div className="candidate__arrow-sp">
<span>Вернуться к списку</span> <span>Вернуться к списку</span>
</div> </div>
</div> </div>
</div> </div>
<div className='candidate__icon'> <div className="candidate__icon">
<h3>{header}</h3> <h3>{header}</h3>
<img className={classes} src={img} alt=''/> <img className={classes} src={img} alt="" />
</div>
</div> </div>
</div> </div>
<div className='candidate__main'>
<div className='row'>
<div className='col-12 col-xl-4'>
<Sidebar candidate={currentCandidateObj} position activeSnippet={activeSnippet}
setActiveSnippet={setActiveSnippet}/>
</div> </div>
{ <div className="candidate__main">
activeSnippet ? <div className="row">
( <div className="col-12 col-xl-4">
<div className='col-12 col-xl-8'> <Sidebar
<div className='candidate__main-description'> candidate={currentCandidateObj}
<img src={rectangle} alt=''/> position
<p className='candidate__hashtag'># Описание опыта</p> activeSnippet={activeSnippet}
setActiveSnippet={setActiveSnippet}
/>
</div>
{activeSnippet ? (
<div className="col-12 col-xl-8">
<div className="candidate__main-description">
<img src={rectangle} alt="" />
<p className="candidate__hashtag"># Описание опыта</p>
{text ? ( {text ? (
<div <div
className='candidate__text' className="candidate__text"
dangerouslySetInnerHTML={createMarkup(text)} dangerouslySetInnerHTML={createMarkup(text)}
></div> ></div>
) : ( ) : (
<p className='candidate__text-secondary'> <p className="candidate__text-secondary">
{currentCandidateObj.vc_text {currentCandidateObj.vc_text
? currentCandidateObj.vc_text ? currentCandidateObj.vc_text
: 'Описание отсутствует...'} : "Описание отсутствует..."}
</p> </p>
)} )}
<SkillSection skillsArr={skillValues}/> <SkillSection skillsArr={skillValues} />
</div> </div>
</div> </div>
) : ) : (
(
<div className="col-12 col-xl-8"> <div className="col-12 col-xl-8">
<div className="candidate__works works"> <div className="candidate__works works">
<div className="works__body"> <div className="works__body">
@ -161,51 +177,51 @@ const Candidate = () => {
<p>Страница портфолио кода разработчика</p> <p>Страница портфолио кода разработчика</p>
</div> </div>
<div className="works__item item-works"> <div className="works__item item-works">
<Link to='/' className="item-works__body"> <Link to="/" className="item-works__body">
<div className='item-works__body__head'> <div className="item-works__body__head">
<div className='item-works__body__info'> <div className="item-works__body__info">
<img src={gitImgItem} alt='img' /> <img src={gitImgItem} alt="img" />
<div className='item-works__body__project'> <div className="item-works__body__project">
<h5>cybershop-api</h5> <h5>cybershop-api</h5>
<p>Реактивная социальная сеть</p> <p>Реактивная социальная сеть</p>
</div> </div>
</div> </div>
<div className='item-works__body__head__arrow'> <div className="item-works__body__head__arrow">
<img src={rightArrow} alt='arrow' /> <img src={rightArrow} alt="arrow" />
</div> </div>
</div> </div>
<span>JavaScript </span> <span>JavaScript </span>
</Link> </Link>
</div> </div>
<div className="works__item item-works"> <div className="works__item item-works">
<Link to='/' className="item-works__body"> <Link to="/" className="item-works__body">
<div className='item-works__body__head'> <div className="item-works__body__head">
<div className='item-works__body__info'> <div className="item-works__body__info">
<img src={gitImgItem} alt='img' /> <img src={gitImgItem} alt="img" />
<div className='item-works__body__project'> <div className="item-works__body__project">
<h5>cybershop-api</h5> <h5>cybershop-api</h5>
<p>Реактивная социальная сеть</p> <p>Реактивная социальная сеть</p>
</div> </div>
</div> </div>
<div className='item-works__body__head__arrow'> <div className="item-works__body__head__arrow">
<img src={rightArrow} alt='arrow' /> <img src={rightArrow} alt="arrow" />
</div> </div>
</div> </div>
<span>JavaScript </span> <span>JavaScript </span>
</Link> </Link>
</div> </div>
<div className="works__item item-works"> <div className="works__item item-works">
<Link to='/' className="item-works__body"> <Link to="/" className="item-works__body">
<div className='item-works__body__head'> <div className="item-works__body__head">
<div className='item-works__body__info'> <div className="item-works__body__info">
<img src={gitImgItem} alt='img' /> <img src={gitImgItem} alt="img" />
<div className='item-works__body__project'> <div className="item-works__body__project">
<h5>cybershop-api</h5> <h5>cybershop-api</h5>
<p>Реактивная социальная сеть</p> <p>Реактивная социальная сеть</p>
</div> </div>
</div> </div>
<div className='item-works__body__head__arrow'> <div className="item-works__body__head__arrow">
<img src={rightArrow} alt='arrow' /> <img src={rightArrow} alt="arrow" />
</div> </div>
</div> </div>
<span>JavaScript </span> <span>JavaScript </span>
@ -214,15 +230,13 @@ const Candidate = () => {
</div> </div>
</div> </div>
</div> </div>
) )}
}
</div> </div>
</div> </div>
<Footer/> <Footer />
</div> </div>
</div> </div>
) );
}; };
export default Candidate export default Candidate;

2
src/components/CandidateSidebar/candidateSidebar.scss
View File

@ -29,7 +29,7 @@
} }
&__info { &__info {
padding-bottom: 40px; padding: 15px 0 40px 0;
text-align: center; text-align: center;
margin-top: 10px; margin-top: 10px;
width: 100%; width: 100%;

148
src/components/Description/Description.js
View File

@ -1,133 +1,105 @@
import React from 'react' import React from "react";
import {useSelector} from 'react-redux' import { useSelector } from "react-redux";
import {Link} from 'react-router-dom' import { Link } from "react-router-dom";
import ErrorBoundary from "../../hoc/ErrorBoundary"; import ErrorBoundary from "../../hoc/ErrorBoundary";
import {LEVELS, SKILLS} from '../../constants/constants' import { LEVELS, SKILLS } from "../../constants/constants";
import {selectProfiles} from '../../redux/outstaffingSlice' import { selectProfiles } from "../../redux/outstaffingSlice";
import {urlForLocal} from '../../helper' import { urlForLocal } from "../../helper";
import male from '../../images/medium_male.png' import male from "../../images/medium_male.png";
import rectangle from '../../images/rectangle_secondPage.png' import rectangle from "../../images/rectangle_secondPage.png";
import cursorImg from "../../images/cursorImg.png";
import './description.scss' import "./description.scss";
const Description = ({ onLoadMore, isLoadingMore }) => {
const Description = ({onLoadMore, isLoadingMore}) => { // const candidatesListArr = useSelector(selectProfiles);
const candidatesListArr = [];
const candidatesListArr = useSelector(selectProfiles);
return ( return (
<section className='description'> <section className="description">
<div className='container'> <div className="container">
<div className='description__wrapper'> <div className="description__wrapper">
<ErrorBoundary> <ErrorBoundary>
{candidatesListArr && Array.isArray(candidatesListArr) && candidatesListArr.length > 0 {candidatesListArr &&
? candidatesListArr.map((el) => ( Array.isArray(candidatesListArr) &&
<div className='row' key={el.id}> candidatesListArr.length > 0 ? (
<div className='col-2'> candidatesListArr.map((el) => (
{el.photo && <img className='description__img' src={urlForLocal(el.photo)} alt=''/>} <div className="row" key={el.id}>
<div className="col-2">
{el.photo && (
<img
className="description__img"
src={urlForLocal(el.photo)}
alt=""
/>
)}
</div> </div>
<div className='col-12 col-xl-6'> <div className="col-12 col-xl-6">
<h3 className='description__title'> <h3 className="description__title">
<Link to={`/candidate/${el.id}`}> <Link to={`/candidate/${el.id}`}>
{' '} {" "}
{el.specification} {SKILLS[el.position_id]},{' '} {el.specification} {SKILLS[el.position_id]},{" "}
{LEVELS[el.level]}{' '} {LEVELS[el.level]}{" "}
</Link> </Link>
</h3> </h3>
{el.vc_text_short ? ( {el.vc_text_short ? (
<div className='description__text'> <div className="description__text">
{el.vc_text_short} {el.vc_text_short}
</div> </div>
) : ( ) : (
<p className='description__text-secondary'> <p className="description__text-secondary">
Описание отсутствует... Описание отсутствует...
</p> </p>
)} )}
</div> </div>
<div className='col-12 col-xl-4'> <div className="col-12 col-xl-4">
<Link to={`/candidate/${el.id}`}> <Link to={`/candidate/${el.id}`}>
<button className='description__button'> <button className="description__button">
Подробное резюме Подробное резюме
</button> </button>
</Link> </Link>
</div> </div>
<div className='col-xl-2'></div> <div className="col-xl-2"></div>
<div className='col-12 col-xl-6'> <div className="col-12 col-xl-6">
<ul className='description__list'> <ul className="description__list">
{Array.isArray(el?.skillValues) && el.skillValues?.map((e) => ( {Array.isArray(el?.skillValues) &&
<li key={e.id} className='description__list-item'> el.skillValues?.map((e) => (
<li key={e.id} className="description__list-item">
{e.skill.name} {e.skill.name}
</li> </li>
))} ))}
</ul> </ul>
<img <img
className='description__rectangle' className="description__rectangle"
src={rectangle} src={rectangle}
alt='' alt=""
/> />
</div> </div>
<div className='col-xl-4'></div> <div className="col-xl-4"></div>
</div> </div>
)) ))
: /* : <div className={style.description__empty}>В данный момент в категории нет свободных специалистов</div> } */
candidatesListArr && Array.isArray(candidatesListArr) &&
candidatesListArr.map((el) => (
<div className='row' key={el.id}>
<div className='col-2'>
<img className='description__img' src={male} alt=''/>
</div>
<div className='col-12 col-xl-6'>
<h3 className='description__title'>
{SKILLS[el.position_id]}, {LEVELS[el.level]}
</h3>
{el.vc_text_short ? (
<div className='description__text'>
{el.vc_text_short}
</div>
) : ( ) : (
<p className='description__text-secondary'> <div className="description__empty">
Описание отсутствует... <img src={cursorImg}></img>
<p>
В данный момент<span> нет свободных </span> специалистов в
данной категории
</p> </p>
</div>
)} )}
</div>
<div className='col-12 col-xl-4'>
<Link to={`/candidate/${el.id}`}>
<button className='description__button'>
Подробное резюме
</button>
</Link>
</div>
<div className='col-xl-2'></div>
<div className='col-12 col-xl-6'>
<ul className='description__list'>
{Array.isArray(el?.skillValues) && el.skillValues?.map((e) => (
<li key={e.id} className='description__list-item'>
{e.skill.name}
</li>
))}
</ul>
<img
className='description__rectangle'
src={rectangle}
alt=''
/>
</div>
<div className='col-xl-4'></div>
</div>
))}
</ErrorBoundary> </ErrorBoundary>
</div> </div>
<div className='row'> <div className="row">
<div className='col-12'> <div className="col-12">
<div className='description__footer'> <div className="description__footer">
<div className='description__footer-btn'> <div className="description__footer-btn">
{candidatesListArr && ( {candidatesListArr && (
<button onClick={() => onLoadMore(2)}>Загрузить еще</button> <button onClick={() => onLoadMore(2)}>Загрузить еще</button>
)} )}
@ -137,7 +109,7 @@ const Description = ({onLoadMore, isLoadingMore}) => {
</div> </div>
</div> </div>
</section> </section>
) );
}; };
export default Description export default Description;

33
src/components/Description/description.scss
View File

@ -3,7 +3,7 @@
margin-bottom: 120px; margin-bottom: 120px;
&__title { &__title {
font-family: 'GT Eesti Pro Display'; font-family: "GT Eesti Pro Display";
font-size: 2.6em; font-size: 2.6em;
font-weight: 700; font-weight: 700;
font-style: normal; font-style: normal;
@ -18,13 +18,24 @@
} }
&__empty { &__empty {
font-family: 'GT Eesti Pro Display'; font-family: "LabGrotesque", sans-serif;
font-size: 2.4em;
font-weight: 500;
font-style: normal; font-style: normal;
letter-spacing: normal; font-weight: 700;
line-height: normal; font-size: 16px;
line-height: 32px;
text-align: center; text-align: center;
display: flex;
align-items: center;
justify-content: center;
span {
color: #406128;
}
img {
margin-right: 30px;
}
} }
&____wrapper { &____wrapper {
@ -43,7 +54,7 @@
} }
&__text { &__text {
font-family: 'GT Eesti Pro Display'; font-family: "GT Eesti Pro Display";
font-size: 1.6em; font-size: 1.6em;
font-weight: 100; font-weight: 100;
font-style: normal; font-style: normal;
@ -54,7 +65,7 @@
word-wrap: break-word; word-wrap: break-word;
&-secondary { &-secondary {
font-family: 'GT Eesti Pro Display'; font-family: "GT Eesti Pro Display";
font-size: 1.7em; font-size: 1.7em;
font-weight: 100; font-weight: 100;
font-style: normal; font-style: normal;
@ -72,7 +83,7 @@
background-color: #73c141; background-color: #73c141;
border: none; border: none;
color: #ffffff; color: #ffffff;
font-family: 'Muller'; font-family: "Muller";
font-weight: bold; font-weight: bold;
font-size: 1.6em; font-size: 1.6em;
line-height: normal; line-height: normal;
@ -95,7 +106,7 @@
flex-wrap: wrap; flex-wrap: wrap;
&-item { &-item {
font-family: 'GT Eesti Pro Display'; font-family: "GT Eesti Pro Display";
font-size: 1.7em; font-size: 1.7em;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
@ -126,7 +137,7 @@
background-color: white; background-color: white;
margin-right: 60px; margin-right: 60px;
color: #a0a0a0; color: #a0a0a0;
font-family: 'GT Eesti Pro Display'; font-family: "GT Eesti Pro Display";
font-size: 1.8em; font-size: 1.8em;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;

19
src/pages/AuthForDevelopers/AuthForDevelopers.js
View File

@ -4,7 +4,7 @@ import { AuthBox } from "../../components/AuthBox/AuthBox";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import arrow from "../../images/arrow__login_page.png"; import arrow from "../../images/arrow__login_page.png";
import authImg from "../../images/auth_img.png"; import medium from "../../images/medium_male_big.png";
import cross from "../../images/cross.png"; import cross from "../../images/cross.png";
import text from "../../images/Body_Text.png"; import text from "../../images/Body_Text.png";
import arrowBtn from "../../images/arrowRight.png"; import arrowBtn from "../../images/arrowRight.png";
@ -78,10 +78,10 @@ const AuthForDevelopers = () => {
<div className="col-12 col-xl-4"> <div className="col-12 col-xl-4">
<div className="auth-developers__info"> <div className="auth-developers__info">
<div className="auth-developers__info-box"> <div className="auth-developers__info-box">
<img src={authImg} alt="" /> <img src={medium} alt="" />
<h3> <h3>
Управление Frontend разработчик,
<br /> командой <br /> Middle
</h3> </h3>
</div> </div>
@ -100,13 +100,12 @@ const AuthForDevelopers = () => {
<ul className="auth-developers__info-list"> <ul className="auth-developers__info-list">
<li className="auth-developers__info-item"> <li className="auth-developers__info-item">
Рабочее Ruby on Rails
<br />
пространство
</li>
<li className="auth-info__list-item">
Управление задачами
</li> </li>
<li className="auth-developers__info-item">PHP</li>
<li className="auth-developers__info-item">Python</li>
<li className="auth-developers__info-item">Vue.js</li>
<li className="auth-developers__info-item">React. JS</li>
</ul> </ul>
</div> </div>

34
src/pages/AuthForDevelopers/authForDevelopers.scss
View File

@ -35,7 +35,6 @@
display: none; display: none;
} }
} }
&__info { &__info {
background-color: #e1fccf; background-color: #e1fccf;
margin-top: 70px; margin-top: 70px;
@ -45,10 +44,20 @@
padding-bottom: 310px; padding-bottom: 310px;
} }
&__info-box {
display: flex;
align-items: center;
}
@media (max-width: 575.98px) { @media (max-width: 575.98px) {
&__info { &__info {
max-width: 380px; max-width: 380px;
} }
&__info-box {
flex-direction: column;
justify-content: center;
}
} }
@media (max-width: 375.98px) { @media (max-width: 375.98px) {
@ -57,21 +66,9 @@
} }
} }
&__info-box {
display: flex;
align-items: center;
}
@media (max-width: 575.98px) {
&__info-box {
flex-direction: column;
justify-content: center;
}
}
&__info-box > img { &__info-box > img {
width: 150px; width: 165px;
height: 150px; height: 165px;
margin-left: -84px; margin-left: -84px;
margin-right: 30px; margin-right: 30px;
} }
@ -132,7 +129,7 @@
list-style: none; list-style: none;
margin-top: 110px; margin-top: 110px;
position: absolute; position: absolute;
left: 34px; right: -70px;
} }
@media (max-width: 575.98px) { @media (max-width: 575.98px) {
@ -144,7 +141,7 @@
&__info-item { &__info-item {
color: #1f1f1f; color: #1f1f1f;
font-family: "GT Eesti Pro Display"; font-family: "GT Eesti Pro Display";
font-size: 2.6em; font-size: 4em;
font-weight: 700; font-weight: 700;
font-style: normal; font-style: normal;
letter-spacing: normal; letter-spacing: normal;
@ -152,13 +149,11 @@
text-align: left; text-align: left;
text-decoration: underline; text-decoration: underline;
text-transform: uppercase; text-transform: uppercase;
margin-bottom: 34px;
} }
@media (max-width: 575.98px) { @media (max-width: 575.98px) {
&__info-item { &__info-item {
font-size: 2.6em; font-size: 2.6em;
margin-bottom: 14px;
} }
} }
@ -174,6 +169,7 @@
bottom: -40px; bottom: -40px;
} }
} }
////////////////////////////////////
&__auth-link { &__auth-link {
display: block; display: block;

22
src/pages/AuthForPartners/AuthForPartners.js
View File

@ -1,6 +1,6 @@
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import arrow from "../../images/arrow__login_page.png"; import arrow from "../../images/arrow__login_page.png";
import medium from "../../images/medium_male_big.png"; import authImg from "../../images/auth_img.png";
import cross from "../../images/cross.png"; import cross from "../../images/cross.png";
import text from "../../images/Body_Text.png"; import text from "../../images/Body_Text.png";
import arrowBtn from "../../images/arrowRight.png"; import arrowBtn from "../../images/arrowRight.png";
@ -71,13 +71,14 @@ const AuthForPartners = () => {
<div className="col-xl-2"> <div className="col-xl-2">
<img className="auth-partners__arrow" src={arrow} alt="" /> <img className="auth-partners__arrow" src={arrow} alt="" />
</div> </div>
<div className="col-12 col-xl-4"> <div className="col-12 col-xl-4">
<div className="auth-partners__info"> <div className="auth-partners__info">
<div className="auth-partners__info-box"> <div className="auth-partners__info-box">
<img src={medium} alt="" /> <img src={authImg} alt="" />
<h3> <h3>
Frontend разработчик, Управление
<br /> Middle <br /> командой
</h3> </h3>
</div> </div>
@ -95,11 +96,14 @@ const AuthForPartners = () => {
</div> </div>
<ul className="auth-partners__info-list"> <ul className="auth-partners__info-list">
<li className="auth-partners__info-item">Ruby on Rails</li> <li className="auth-partners__info-item">
<li className="auth-partners__info-item">PHP</li> Рабочее
<li className="auth-partners__info-item">Python</li> <br />
<li className="auth-partners__info-item">Vue.js</li> пространство
<li className="auth-partners__info-item">React. JS</li> </li>
<li className="auth-info__list-item">
Управление задачами
</li>
</ul> </ul>
</div> </div>

32
src/pages/AuthForPartners/authForPartners.scss
View File

@ -45,20 +45,10 @@
padding-bottom: 310px; padding-bottom: 310px;
} }
&__info-box {
display: flex;
align-items: center;
}
@media (max-width: 575.98px) { @media (max-width: 575.98px) {
&__info { &__info {
max-width: 380px; max-width: 380px;
} }
&__info-box {
flex-direction: column;
justify-content: center;
}
} }
@media (max-width: 375.98px) { @media (max-width: 375.98px) {
@ -67,9 +57,21 @@
} }
} }
&__info-box {
display: flex;
align-items: center;
}
@media (max-width: 575.98px) {
&__info-box {
flex-direction: column;
justify-content: center;
}
}
&__info-box > img { &__info-box > img {
width: 165px; width: 150px;
height: 165px; height: 150px;
margin-left: -84px; margin-left: -84px;
margin-right: 30px; margin-right: 30px;
} }
@ -130,7 +132,7 @@
list-style: none; list-style: none;
margin-top: 110px; margin-top: 110px;
position: absolute; position: absolute;
right: -70px; left: 34px;
} }
@media (max-width: 575.98px) { @media (max-width: 575.98px) {
@ -142,7 +144,7 @@
&__info-item { &__info-item {
color: #1f1f1f; color: #1f1f1f;
font-family: "GT Eesti Pro Display"; font-family: "GT Eesti Pro Display";
font-size: 4em; font-size: 2.6em;
font-weight: 700; font-weight: 700;
font-style: normal; font-style: normal;
letter-spacing: normal; letter-spacing: normal;
@ -150,11 +152,13 @@
text-align: left; text-align: left;
text-decoration: underline; text-decoration: underline;
text-transform: uppercase; text-transform: uppercase;
margin-bottom: 34px;
} }
@media (max-width: 575.98px) { @media (max-width: 575.98px) {
&__info-item { &__info-item {
font-size: 2.6em; font-size: 2.6em;
margin-bottom: 14px;
} }
} }

242
src/pages/PartnerBid/PartnerBid.js
View File

@ -1,119 +1,188 @@
import React, {useEffect, useState} from 'react'; import React, { useEffect, useState } from "react";
import {Link, Navigate, useNavigate} from "react-router-dom"; import { Link, Navigate, useNavigate } from "react-router-dom";
import {useSelector, useDispatch} from 'react-redux' import { useSelector, useDispatch } from "react-redux";
import {getPartnerRequestId, getPartnerRequests, setPartnerRequestId, setPartnerRequestInfo} from '../../redux/outstaffingSlice' import {
getPartnerRequestId,
getPartnerRequests,
setPartnerRequestId,
setPartnerRequestInfo,
} from "../../redux/outstaffingSlice";
import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader"; import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs" import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import {Footer} from "../../components/Footer/Footer"; import { Footer } from "../../components/Footer/Footer";
import { Navigation } from '../../components/Navigation/Navigation'; import { Navigation } from "../../components/Navigation/Navigation";
import {Loader} from "../../components/Loader/Loader" import { Loader } from "../../components/Loader/Loader";
import ModalAdd from "../../components/UI/ModalAdd/ModalAdd";
import {apiRequest} from "../../api/request"; import { apiRequest } from "../../api/request";
import {getCorrectDate} from "../../components/Calendar/calendarHelper"; import { getCorrectDate } from "../../components/Calendar/calendarHelper";
import {urlForLocal} from '../../helper' import { urlForLocal } from "../../helper";
import arrowSwitchDate from "../../images/arrowViewReport.png"; import arrowSwitchDate from "../../images/arrowViewReport.png";
import backEndImg from "../../images/QualificationInfo.png"; import backEndImg from "../../images/QualificationInfo.png";
import middle from "../../images/QualificationInfoMiddle.png"; import middle from "../../images/QualificationInfoMiddle.png";
import deleteBtn from "../../images/deleteBtn.png" import deleteBtn from "../../images/deleteBtn.png";
import './partnerBid.scss' import "./partnerBid.scss";
export const PartnerBid = () => { export const PartnerBid = () => {
if(localStorage.getItem('role_status') !== '18') { if (localStorage.getItem("role_status") !== "18") {
return <Navigate to="/profile" replace/> return <Navigate to="/profile" replace />;
} }
const dispatch = useDispatch(); const dispatch = useDispatch();
const requestId = useSelector(getPartnerRequestId); const requestId = useSelector(getPartnerRequestId);
const partnerRequests = useSelector(getPartnerRequests); const partnerRequests = useSelector(getPartnerRequests);
const navigate= useNavigate(); const navigate = useNavigate();
if (!requestId) { if (!requestId) {
return <Navigate to="/profile/requests" replace/> return <Navigate to="/profile/requests" replace />;
} }
useEffect(() => { useEffect(() => {
setLoader(true) setLoader(true);
apiRequest(`/request/get-request?request_id=${requestId}`).then((el) => { apiRequest(`/request/get-request?request_id=${requestId}`).then((el) => {
setRequestInfo(el) setRequestInfo(el);
dispatch(setPartnerRequestInfo(el)) dispatch(setPartnerRequestInfo(el));
setLoader(false) setLoader(false);
}) });
}, [requestId]); }, [requestId]);
const deleteRequest = () => { const deleteRequest = () => {
apiRequest('/request/update-request', { apiRequest("/request/update-request", {
method: 'PUT', method: "PUT",
data: { data: {
user_id: localStorage.getItem('id'), user_id: localStorage.getItem("id"),
request_id: requestId, request_id: requestId,
status: 0, status: 0,
} },
}).then((res) => { }).then((res) => {
navigate('/profile/requests'); navigate("/profile/requests");
}) });
}; };
const [requestInfo, setRequestInfo] = useState({}) const [requestInfo, setRequestInfo] = useState({});
const [loader, setLoader] = useState(false) const [loader, setLoader] = useState(false);
const [modalDelete, setModalDelete] = useState(false);
const [levels] = useState({ const [levels] = useState({
1: "Junior", 1: "Junior",
2: "Middle", 2: "Middle",
3: "Middle+", 3: "Middle+",
4: "Senior", 4: "Senior",
}) });
return ( return (
<div className='partnerBid'> <div className="partnerBid">
<ProfileHeader /> <ProfileHeader />
<Navigation /> <Navigation />
<div className='container'> <ModalAdd active={modalDelete} setActive={setModalDelete}>
<ProfileBreadcrumbs links={[ <div className="title-project modal-title-delete">
{name: 'Главная', link: '/profile'}, <h4>Подтверждение удаления</h4>
{name: 'Запросы и открытые позиции', link: '/profile/requests'}, <p className="title-project__decs modal-decs">
{name: 'Просмотр заявки - PHP разработчик', link: '/profile/bid'} Вы решили удалить заявку. После удаления ее нельзя будет
восстановить. Продолжаем?
</p>
<div className="buttons-modal">
<button
className="buttons-modal__no"
onClick={() => setModalDelete(false)}
>
Нет
</button>
<button
className="buttons-modal__yes"
onClick={() => deleteRequest()}
>
Да
</button>
</div>
</div>
</ModalAdd>
<div className="container">
<ProfileBreadcrumbs
links={[
{ name: "Главная", link: "/profile" },
{ name: "Запросы и открытые позиции", link: "/profile/requests" },
{ name: "Просмотр заявки - PHP разработчик", link: "/profile/bid" },
]} ]}
/> />
<h2 className='partnerBid__title'>Страница заявки </h2> <h2 className="partnerBid__title">Страница заявки </h2>
{loader && <Loader />} {loader && <Loader />}
{!loader && {!loader && (
<> <>
<div className='partnerBid__qualification'> <div className="partnerBid__qualification">
<h3>{requestInfo.title}</h3> <h3>{requestInfo.title}</h3>
<div className='partnerBid__qualification__buttons'> <div className="partnerBid__qualification__buttons">
<Link to='/profile/edit-request'>Редактировать</Link> <Link to="/profile/edit-request">Редактировать</Link>
<img src={deleteBtn} alt='delete' onClick={() => deleteRequest()}/> <img
src={deleteBtn}
alt="delete"
onClick={() => setModalDelete(true)}
/>
</div> </div>
</div> </div>
<div className='partnerBid__switcher'> <div className="partnerBid__switcher">
<div className={partnerRequests[partnerRequests.findIndex(el => el.id === requestId) - 1]?.id ? 'partnerBid__switcher__prev switchDate' : 'partnerBid__switcher__prev switchDate disable'} <div
className={
partnerRequests[
partnerRequests.findIndex((el) => el.id === requestId) - 1
]?.id
? "partnerBid__switcher__prev switchDate"
: "partnerBid__switcher__prev switchDate disable"
}
onClick={() => { onClick={() => {
dispatch(setPartnerRequestId(partnerRequests[partnerRequests.findIndex(el => el.id === requestId) - 1].id)) dispatch(
setPartnerRequestId(
partnerRequests[
partnerRequests.findIndex((el) => el.id === requestId) -
1
].id
)
);
}} }}
> >
<img src={arrowSwitchDate} alt='arrow'/> <img src={arrowSwitchDate} alt="arrow" />
</div> </div>
<p>Дата заявки : {getCorrectDate(requestInfo.created_at)} </p> <p>Дата заявки : {getCorrectDate(requestInfo.created_at)} </p>
<div className={partnerRequests[partnerRequests.findIndex(el => el.id === requestId) + 1]?.id ? 'partnerBid__switcher__next switchDate' : 'partnerBid__switcher__next switchDate disable'} <div
className={
partnerRequests[
partnerRequests.findIndex((el) => el.id === requestId) + 1
]?.id
? "partnerBid__switcher__next switchDate"
: "partnerBid__switcher__next switchDate disable"
}
onClick={() => { onClick={() => {
dispatch(setPartnerRequestId(partnerRequests[partnerRequests.findIndex(el => el.id === requestId) + 1].id)) dispatch(
setPartnerRequestId(
partnerRequests[
partnerRequests.findIndex((el) => el.id === requestId) +
1
].id
)
);
}} }}
> >
<img src={arrowSwitchDate} alt='arrow'/> <img src={arrowSwitchDate} alt="arrow" />
</div> </div>
</div> </div>
</> </>
} )}
{Boolean(Object.keys(requestInfo).length) && !loader && {Boolean(Object.keys(requestInfo).length) && !loader && (
<> <>
<div className='table__wrapper'> <div className="table__wrapper">
<table> <table>
<thead> <thead>
<tr> <tr>
<th><p>Требования к стеку разработчика</p></th> <th>
<th><p>Квалификация</p></th> <p>Требования к стеку разработчика</p>
</th>
<th>
<p>Квалификация</p>
</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -122,17 +191,22 @@ export const PartnerBid = () => {
<p> <p>
{requestInfo.position.name}. &nbsp; {requestInfo.position.name}. &nbsp;
{requestInfo.skills.map((skill, index) => { {requestInfo.skills.map((skill, index) => {
return <span key={skill.id}>{skill.name} return (
{requestInfo.skills.length > index + 1 ? ',' : '.'} <span key={skill.id}>
{skill.name}
{requestInfo.skills.length > index + 1
? ","
: "."}
&nbsp; &nbsp;
</span> </span>
);
})} })}
</p> </p>
</td> </td>
<td> <td>
<div className='qualification__info'> <div className="qualification__info">
<div className='img__wrapper'> <div className="img__wrapper">
<img src={backEndImg} alt='backEndImg' /> <img src={backEndImg} alt="backEndImg" />
</div> </div>
<p>{requestInfo.position.name}</p> <p>{requestInfo.position.name}</p>
</div> </div>
@ -140,43 +214,49 @@ export const PartnerBid = () => {
</tr> </tr>
<tr> <tr>
<td> <td>
<p> <p>{requestInfo.descr}</p>
{requestInfo.descr}
</p>
</td> </td>
<td> <td>
<div className='qualification__info'> <div className="qualification__info">
<div className='img__wrapper'> <div className="img__wrapper">
<img src={middle} alt='middleImg' /> <img src={middle} alt="middleImg" />
</div> </div>
<p className='middle'>{requestInfo.level}</p> <p className="middle">{requestInfo.level}</p>
</div> </div>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<div className='partnerBid__suitable'> <div className="partnerBid__suitable">
<div className='partnerBid__suitable__title'> <div className="partnerBid__suitable__title">
<p>Подходящие сотрудники по запросу</p> <p>Подходящие сотрудники по запросу</p>
</div> </div>
<div className='partnerBid__suitable__persons'> <div className="partnerBid__suitable__persons">
{requestInfo.result_profiles.length && requestInfo.result_profiles.map((person, index) => { {requestInfo.result_profiles.length &&
return <div key={index} className='partnerBid__suitable__person'> requestInfo.result_profiles.map((person, index) => {
<img src={urlForLocal(person.photo)} alt='avatar' /> return (
<p>{person.fio} - {person.position_title}, {levels[person.level]}</p> <div key={index} className="partnerBid__suitable__person">
<Link className='partnerBid__suitable__person__more' to={`/candidate/${person.id}`}> <img src={urlForLocal(person.photo)} alt="avatar" />
<p>
{person.fio} - {person.position_title},{" "}
{levels[person.level]}
</p>
<Link
className="partnerBid__suitable__person__more"
to={`/candidate/${person.id}`}
>
Подробнее Подробнее
</Link> </Link>
</div> </div>
}) );
} })}
</div> </div>
</div> </div>
</> </>
} )}
</div> </div>
<Footer/> <Footer />
</div> </div>
) );
}; };

71
src/pages/PartnerBid/partnerBid.scss
View File

@ -1,8 +1,8 @@
.partnerBid { .partnerBid {
background: #F1F1F1; background: #f1f1f1;
height: 100%; height: 100%;
min-height: 100vh; min-height: 100vh;
font-family: 'LabGrotesque', sans-serif; font-family: "LabGrotesque", sans-serif;
.container { .container {
max-width: 1160px; max-width: 1160px;
@ -21,7 +21,7 @@
} }
&__qualification { &__qualification {
background: #FFFFFF; background: #ffffff;
border-radius: 12px; border-radius: 12px;
padding: 20px 37px; padding: 20px 37px;
margin-top: 20px; margin-top: 20px;
@ -45,7 +45,7 @@
max-width: 168px; max-width: 168px;
width: 100%; width: 100%;
height: 48px; height: 48px;
background: #E1FCCF; background: #e1fccf;
border-radius: 44px; border-radius: 44px;
font-weight: 500; font-weight: 500;
font-size: 15px; font-size: 15px;
@ -81,7 +81,7 @@
.switchDate { .switchDate {
width: 48px; width: 48px;
height: 48px; height: 48px;
background: #8DC63F; background: #8dc63f;
border-radius: 50px; border-radius: 50px;
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -131,12 +131,10 @@
} }
thead { thead {
@media (max-width: 1205px) { @media (max-width: 1205px) {
display: grid; display: grid;
} }
tr { tr {
@media (max-width: 1205px) { @media (max-width: 1205px) {
display: grid; display: grid;
grid-template-columns: 74% calc(26% - 28px); grid-template-columns: 74% calc(26% - 28px);
@ -162,7 +160,6 @@
&:first-child { &:first-child {
padding: 32px 37px; padding: 32px 37px;
@media (max-width: 640px) { @media (max-width: 640px) {
padding: 15px; padding: 15px;
} }
@ -198,7 +195,6 @@
display: grid; display: grid;
} }
tr { tr {
@media (max-width: 1205px) { @media (max-width: 1205px) {
display: grid; display: grid;
grid-template-columns: 74% calc(26% - 28px); grid-template-columns: 74% calc(26% - 28px);
@ -264,7 +260,7 @@
.img__wrapper { .img__wrapper {
min-width: 48px; min-width: 48px;
height: 48px; height: 48px;
background: #8DC63F; background: #8dc63f;
border-radius: 50px; border-radius: 50px;
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -319,7 +315,7 @@
&__suitable { &__suitable {
&__title { &__title {
background: #E1FCCF; background: #e1fccf;
border-radius: 12px 12px 0px 0px; border-radius: 12px 12px 0px 0px;
margin-top: 48px; margin-top: 48px;
padding: 18px 37px; padding: 18px 37px;
@ -374,7 +370,7 @@
display: flex; display: flex;
padding: 21px 45px 19px; padding: 21px 45px 19px;
align-items: center; align-items: center;
background: #FFFFFF; background: #ffffff;
border-radius: 12px; border-radius: 12px;
&:hover { &:hover {
@ -399,7 +395,7 @@
&:after { &:after {
content: ""; content: "";
position: absolute; position: absolute;
background: #52B709; background: #52b709;
border-radius: 12px; border-radius: 12px;
width: 70%; width: 70%;
height: 8px; height: 8px;
@ -410,9 +406,9 @@
&__more { &__more {
padding: 9px 45px; padding: 9px 45px;
background: #52B709; background: #52b709;
border-radius: 44px; border-radius: 44px;
color: #FFFFFF; color: #ffffff;
font-weight: 500; font-weight: 500;
font-size: 16px; font-size: 16px;
line-height: 32px; line-height: 32px;
@ -427,9 +423,10 @@
&__info { &__info {
width: 24px; width: 24px;
height: 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); 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-radius: 6px;
border: 1px solid #DDDDDD; border: 1px solid #dddddd;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
display: flex; display: flex;
@ -439,7 +436,7 @@
&:before { &:before {
content: "..."; content: "...";
color: #6F6F6F; color: #6f6f6f;
font-size: 25px; font-size: 25px;
position: relative; position: relative;
top: -6px; top: -6px;
@ -502,6 +499,44 @@
} }
} }
.modal-decs {
text-align: center;
width: 78%;
}
.modal-title-delete {
align-items: center;
h4 {
margin: 0 auto;
font-size: 24px;
}
}
.buttons-modal {
width: 100%;
display: flex;
justify-content: space-evenly;
&__no,
&__yes {
width: 89px;
height: 50px;
border-radius: 44px;
font-size: 14px;
line-height: 32px;
color: white;
border: none;
}
&__no {
background: #a29eb6;
}
&__yes {
background: #52b709;
}
}
footer { footer {
margin-top: 70px; margin-top: 70px;
} }

132
src/pages/PartnerRequests/PartnerRequests.js
View File

@ -1,91 +1,101 @@
import React, {useEffect, useState} from 'react'; import React, { useEffect, useState } from "react";
import {Link, Navigate} from "react-router-dom"; import { Link, Navigate } from "react-router-dom";
import {useDispatch} from 'react-redux' import { useDispatch } from "react-redux";
import {setPartnerRequestId, setPartnerRequests} from '../../redux/outstaffingSlice' import {
setPartnerRequestId,
setPartnerRequests,
} from "../../redux/outstaffingSlice";
import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader"; import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs" import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import {SliderWorkers} from "../../components/SliderWorkers/SliderWorkers" import { SliderWorkers } from "../../components/SliderWorkers/SliderWorkers";
import {Loader} from "../../components/Loader/Loader" import { Loader } from "../../components/Loader/Loader";
import {Footer} from "../../components/Footer/Footer"; import { Footer } from "../../components/Footer/Footer";
import {apiRequest} from "../../api/request"; import { apiRequest } from "../../api/request";
import cursorImg from "../../images/cursorImg.png" import cursorImg from "../../images/cursorImg.png";
import './partnerRequests.scss' import "./partnerRequests.scss";
import { Navigation } from '../../components/Navigation/Navigation'; import { Navigation } from "../../components/Navigation/Navigation";
export const PartnerRequests = () => { export const PartnerRequests = () => {
if(localStorage.getItem('role_status') !== '18') { if (localStorage.getItem("role_status") !== "18") {
return <Navigate to="/profile" replace/> return <Navigate to="/profile" replace />;
} }
const dispatch = useDispatch(); const dispatch = useDispatch();
const [requests, setRequests] = useState([]) const [requests, setRequests] = useState([]);
const [loader, setLoader] = useState(true) const [loader, setLoader] = useState(true);
useEffect(() => { useEffect(() => {
apiRequest(`/request/get-request-list?user_id=${localStorage.getItem('id')}&search_depth=3`).then((el) => { apiRequest(
setRequests(el) `/request/get-request-list?user_id=${localStorage.getItem(
setLoader(false) "id"
}) )}&search_depth=3`
}, []) ).then((el) => {
setRequests(el);
setLoader(false);
});
}, []);
return ( return (
<div className='partnerRequests'> <div className="partnerRequests">
<ProfileHeader /> <ProfileHeader />
<Navigation /> <Navigation />
<div className='container'> <div className="container">
<ProfileBreadcrumbs links={[ <ProfileBreadcrumbs
{name: 'Главная', link: '/profile'}, links={[
{name: 'Запросы и открытые позиции', link: '/profile/requests'} { name: "Главная", link: "/profile" },
{ name: "Запросы и открытые позиции", link: "/profile/requests" },
]} ]}
/> />
<h2 className='partnerRequests__title'>Запросы</h2> <h2 className="partnerRequests__title">Запросы</h2>
{loader && {loader && <Loader />}
<Loader /> {Boolean(requests.length) && !loader && (
} <div className="partnerRequests__section">
{Boolean(requests.length) && !loader && <div className="partnerRequests__section__items">
<div className='partnerRequests__section'> {requests.map((item, index) => {
<div className='partnerRequests__section__items'> return (
{ <Link
requests.map((item, index) => { key={index}
return <Link key={index} to={'/profile/bid'} className='partnerRequests__section__item' to={"/profile/bid"}
className="partnerRequests__section__item"
onClick={() => { onClick={() => {
dispatch(setPartnerRequestId(item.id)) dispatch(setPartnerRequestId(item.id));
dispatch(setPartnerRequests(requests)) dispatch(setPartnerRequests(requests));
}}> }}
<p className='partnerRequests__section__item__name'> >
<p className="partnerRequests__section__item__name">
{item.position.name} {item.position.name}
</p> </p>
<p className='partnerRequests__section__item__count'> <p className="partnerRequests__section__item__count">
Подходящие кандидаты Подходящие кандидаты
<span>{item.result_count}</span> <span>{item.result_count}</span>
</p> </p>
</Link> </Link>
}) );
} })}
</div> </div>
<div className='partnerRequests__section__info'> <div className="partnerRequests__section__info">
<h3>Инструкция: подачи заявки</h3> <h3>Инструкция: подачи заявки</h3>
<p> <p>
Оператор компании заводит заявку и указывает необходимые параметры — Оператор компании заводит заявку и указывает необходимые
количество сотрудников, стек, уровень специалиста параметры — количество сотрудников, стек, уровень специалиста
</p> </p>
<Link to={'/profile/add-request'}> <Link to={"/profile/add-request"}>
<span>+</span> <span>+</span>
Создать запрос Создать запрос
</Link> </Link>
</div> </div>
</div> </div>
} )}
{!Boolean(requests.length) && !loader && {!Boolean(requests.length) && !loader && (
<div className="partnerRequests__noItems"> <div className="partnerRequests__noItems">
<div className="partnerRequests__noItems__create"> <div className="partnerRequests__noItems__create">
<div className="partnerRequests__noItems__create__link"> <div className="partnerRequests__noItems__create__link">
<img src={cursorImg} alt="cursor" /> <img src={cursorImg} alt="cursor" />
<p>У вас еще нет запросов на сотрудников</p> <p>У вас еще нет запросов на сотрудников</p>
<Link to={'/profile/add-request'}> <Link to={"/profile/add-request"}>
<span>+</span> <span>+</span>
Создать запрос Создать запрос
</Link> </Link>
@ -93,19 +103,25 @@ export const PartnerRequests = () => {
<div className="partnerRequests__noItems__create__instruction"> <div className="partnerRequests__noItems__create__instruction">
<h3>Инструкция: подачи заявки</h3> <h3>Инструкция: подачи заявки</h3>
<p> <p>
Оператор компании заводит заявку и указывает необходимые параметры — Оператор компании заводит заявку и указывает необходимые
количество сотрудников, стек, уровень специалиста параметры — количество сотрудников, стек, уровень специалиста
</p> </p>
</div> </div>
</div> </div>
<div className="partnerRequests__noItems__freeEmployees"> <div className="partnerRequests__noItems__freeEmployees">
<SliderWorkers title={"Свободные разработчики"} titleInfo={"в нашей базе"} /> <SliderWorkers
<p>Перейти в полный <Link to={'/profile/catalog'}>КАТАЛОГ</Link> сотрудников</p> title={"Свободные разработчики"}
titleInfo={"в нашей базе"}
/>
<p className="catalogLink">
Перейти в полный <Link to={"/profile/catalog"}>КАТАЛОГ</Link>{" "}
сотрудников
</p>
</div> </div>
</div> </div>
} )}
</div> </div>
<Footer/> <Footer />
</div> </div>
) );
}; };

42
src/pages/PartnerRequests/partnerRequests.scss
View File

@ -1,8 +1,8 @@
.partnerRequests { .partnerRequests {
background: #F1F1F1; background: #f1f1f1;
height: 100%; height: 100%;
min-height: 100vh; min-height: 100vh;
font-family: 'LabGrotesque', sans-serif; font-family: "LabGrotesque", sans-serif;
.container { .container {
max-width: 1160px; max-width: 1160px;
@ -22,7 +22,7 @@
&__section { &__section {
margin-top: 25px; margin-top: 25px;
background: #FFFFFF; background: #ffffff;
border-radius: 12px; border-radius: 12px;
padding: 33px 45px 40px; padding: 33px 45px 40px;
display: flex; display: flex;
@ -58,7 +58,7 @@
display: flex; display: flex;
width: 48%; width: 48%;
flex-direction: column; flex-direction: column;
background: #F1F1F1; background: #f1f1f1;
border-radius: 12px; border-radius: 12px;
padding: 20px 27px 15px 25px; padding: 20px 27px 15px 25px;
transition: 0.3s all ease; transition: 0.3s all ease;
@ -70,11 +70,11 @@
} }
&:before { &:before {
content: '...'; content: "...";
position: absolute; position: absolute;
right: 27px; right: 27px;
bottom: 17%; bottom: 17%;
color: #6F6F6F; color: #6f6f6f;
font-size: 23px; font-size: 23px;
} }
@ -93,7 +93,7 @@
} }
&__count { &__count {
color: #6F6F6F; color: #6f6f6f;
font-weight: 500; font-weight: 500;
font-size: 12px; font-size: 12px;
line-height: 24px; line-height: 24px;
@ -101,11 +101,11 @@
margin-bottom: 0; margin-bottom: 0;
span { span {
color: #6F6F6F; color: #6f6f6f;
font-weight: 500; font-weight: 500;
font-size: 14px; font-size: 14px;
line-height: 24px; line-height: 24px;
background: #DDDDDD; background: #dddddd;
border-radius: 4px; border-radius: 4px;
width: 21px; width: 21px;
height: 24px; height: 24px;
@ -136,7 +136,7 @@
} }
h3 { h3 {
color: #52B709; color: #52b709;
font-weight: 700; font-weight: 700;
font-size: 17px; font-size: 17px;
line-height: 24px; line-height: 24px;
@ -162,7 +162,7 @@
} }
a { a {
background: #52B709; background: #52b709;
max-width: 188px; max-width: 188px;
border-radius: 44px; border-radius: 44px;
height: 52px; height: 52px;
@ -170,7 +170,7 @@
font-weight: 400; font-weight: 400;
font-size: 15px; font-size: 15px;
line-height: 32px; line-height: 32px;
color: #FFFFFF; color: #ffffff;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -187,7 +187,7 @@
box-shadow: 6px 5px 20px rgb(87 98 80 / 21%); box-shadow: 6px 5px 20px rgb(87 98 80 / 21%);
transform: scale(1.02); transform: scale(1.02);
text-decoration: none; text-decoration: none;
color: #FFFFFF; color: #ffffff;
} }
} }
} }
@ -198,7 +198,7 @@
flex-direction: column; flex-direction: column;
&__create { &__create {
background: #FFFFFF; background: #ffffff;
border-radius: 12px; border-radius: 12px;
padding: 29px 33px 23px 36px; padding: 29px 33px 23px 36px;
display: flex; display: flex;
@ -216,7 +216,7 @@
&__link { &__link {
display: flex; display: flex;
background: #F1F1F1; background: #f1f1f1;
border-radius: 12px; border-radius: 12px;
padding: 11px 25px 12px 30px; padding: 11px 25px 12px 30px;
align-items: center; align-items: center;
@ -261,7 +261,7 @@
} }
a { a {
background: #52B709; background: #52b709;
max-width: 174px; max-width: 174px;
border-radius: 44px; border-radius: 44px;
width: 100%; width: 100%;
@ -270,7 +270,7 @@
font-weight: 400; font-weight: 400;
font-size: 15px; font-size: 15px;
line-height: 32px; line-height: 32px;
color: #FFFFFF; color: #ffffff;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -287,7 +287,7 @@
box-shadow: 6px 5px 20px rgb(87 98 80 / 21%); box-shadow: 6px 5px 20px rgb(87 98 80 / 21%);
transform: scale(1.02); transform: scale(1.02);
text-decoration: none; text-decoration: none;
color: #FFFFFF; color: #ffffff;
} }
} }
} }
@ -299,7 +299,7 @@
margin-left: 0; margin-left: 0;
} }
h3 { h3 {
color: #52B709; color: #52b709;
font-weight: 700; font-weight: 700;
font-size: 15px; font-size: 15px;
line-height: 15px; line-height: 15px;
@ -342,7 +342,7 @@
line-height: 32px; line-height: 32px;
} }
p { .catalogLink {
margin-top: 70px; margin-top: 70px;
width: 100%; width: 100%;
font-weight: 700; font-weight: 700;
@ -352,7 +352,7 @@
text-align: center; text-align: center;
a { a {
color: #0C7636; color: #0c7636;
} }
} }
} }