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

350
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,190 +42,201 @@ 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">
<h3>
{currentCandidateObj.specification} &nbsp;{" "}
{SKILLS[currentCandidateObj.position_id]} &nbsp;{" "}
{LEVELS[currentCandidateObj.level]}
</h3>
<div
className="candidate__arrow"
onClick={() => navigate("/profile/catalog")}
>
<div className="candidate__arrow-img">
<img src={rightArrow} alt="" />
</div>
<div className="candidate__arrow-sp">
<span>Вернуться к списку</span>
</div>
</div>
</div>
<div className='candidate__header__left'> <div className="candidate__icon">
<h3>{currentCandidateObj.specification} &nbsp; {SKILLS[currentCandidateObj.position_id]} &nbsp; {LEVELS[currentCandidateObj.level]}</h3> <h3>{header}</h3>
<div className='candidate__arrow' onClick={() => navigate('/profile/catalog')}> <img className={classes} src={img} alt="" />
<div className='candidate__arrow-img'> </div>
<img src={rightArrow} alt=''/> </div>
</div> </div>
<div className='candidate__arrow-sp'> <div className="candidate__main">
<span>Вернуться к списку</span> <div className="row">
<div className="col-12 col-xl-4">
<Sidebar
candidate={currentCandidateObj}
position
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 ? (
<div
className="candidate__text"
dangerouslySetInnerHTML={createMarkup(text)}
></div>
) : (
<p className="candidate__text-secondary">
{currentCandidateObj.vc_text
? currentCandidateObj.vc_text
: "Описание отсутствует..."}
</p>
)}
<SkillSection skillsArr={skillValues} />
</div>
</div>
) : (
<div className="col-12 col-xl-8">
<div className="candidate__works works">
<div className="works__body">
<div className="works__body__info">
<p>Страница портфолио кода разработчика</p>
</div>
<div className="works__item item-works">
<Link to="/" className="item-works__body">
<div className="item-works__body__head">
<div className="item-works__body__info">
<img src={gitImgItem} alt="img" />
<div className="item-works__body__project">
<h5>cybershop-api</h5>
<p>Реактивная социальная сеть</p>
</div>
</div>
<div className="item-works__body__head__arrow">
<img src={rightArrow} alt="arrow" />
</div>
</div>
<span>JavaScript </span>
</Link>
</div>
<div className="works__item item-works">
<Link to="/" className="item-works__body">
<div className="item-works__body__head">
<div className="item-works__body__info">
<img src={gitImgItem} alt="img" />
<div className="item-works__body__project">
<h5>cybershop-api</h5>
<p>Реактивная социальная сеть</p>
</div>
</div>
<div className="item-works__body__head__arrow">
<img src={rightArrow} alt="arrow" />
</div>
</div>
<span>JavaScript </span>
</Link>
</div>
<div className="works__item item-works">
<Link to="/" className="item-works__body">
<div className="item-works__body__head">
<div className="item-works__body__info">
<img src={gitImgItem} alt="img" />
<div className="item-works__body__project">
<h5>cybershop-api</h5>
<p>Реактивная социальная сеть</p>
</div>
</div>
<div className="item-works__body__head__arrow">
<img src={rightArrow} alt="arrow" />
</div>
</div>
<span>JavaScript </span>
</Link>
</div>
</div> </div>
</div> </div>
</div> </div>
)}
<div className='candidate__icon'>
<h3>{header}</h3>
<img className={classes} src={img} alt=''/>
</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>
{
activeSnippet ?
(
<div className='col-12 col-xl-8'>
<div className='candidate__main-description'>
<img src={rectangle} alt=''/>
<p className='candidate__hashtag'># Описание опыта</p>
{text ? (
<div
className='candidate__text'
dangerouslySetInnerHTML={createMarkup(text)}
></div>
) : (
<p className='candidate__text-secondary'>
{currentCandidateObj.vc_text
? currentCandidateObj.vc_text
: 'Описание отсутствует...'}
</p>
)}
<SkillSection skillsArr={skillValues}/>
</div>
</div>
) :
(
<div className="col-12 col-xl-8">
<div className="candidate__works works">
<div className="works__body">
<div className="works__body__info">
<p>Страница портфолио кода разработчика</p>
</div>
<div className="works__item item-works">
<Link to='/' className="item-works__body">
<div className='item-works__body__head'>
<div className='item-works__body__info'>
<img src={gitImgItem} alt='img' />
<div className='item-works__body__project'>
<h5>cybershop-api</h5>
<p>Реактивная социальная сеть</p>
</div>
</div>
<div className='item-works__body__head__arrow'>
<img src={rightArrow} alt='arrow' />
</div>
</div>
<span>JavaScript </span>
</Link>
</div>
<div className="works__item item-works">
<Link to='/' className="item-works__body">
<div className='item-works__body__head'>
<div className='item-works__body__info'>
<img src={gitImgItem} alt='img' />
<div className='item-works__body__project'>
<h5>cybershop-api</h5>
<p>Реактивная социальная сеть</p>
</div>
</div>
<div className='item-works__body__head__arrow'>
<img src={rightArrow} alt='arrow' />
</div>
</div>
<span>JavaScript </span>
</Link>
</div>
<div className="works__item item-works">
<Link to='/' className="item-works__body">
<div className='item-works__body__head'>
<div className='item-works__body__info'>
<img src={gitImgItem} alt='img' />
<div className='item-works__body__project'>
<h5>cybershop-api</h5>
<p>Реактивная социальная сеть</p>
</div>
</div>
<div className='item-works__body__head__arrow'>
<img src={rightArrow} alt='arrow' />
</div>
</div>
<span>JavaScript </span>
</Link>
</div>
</div>
</div>
</div>
)
}
</div>
</div>
<Footer/>
</div> </div>
<Footer />
</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%;

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

@ -1,143 +1,115 @@
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> <div className="col-2">
<div className='col-12 col-xl-6'> {el.photo && (
<h3 className='description__title'> <img
<Link to={`/candidate/${el.id}`}> className="description__img"
{' '} src={urlForLocal(el.photo)}
{el.specification} {SKILLS[el.position_id]},{' '} alt=""
{LEVELS[el.level]}{' '} />
</Link> )}
</h3> </div>
<div className="col-12 col-xl-6">
<h3 className="description__title">
<Link to={`/candidate/${el.id}`}>
{" "}
{el.specification} {SKILLS[el.position_id]},{" "}
{LEVELS[el.level]}{" "}
</Link>
</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>
) : (
<p className='description__text-secondary'>
Описание отсутствует...
</p>
)}
</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> </div>
)) ) : (
: /* : <div className={style.description__empty}>В данный момент в категории нет свободных специалистов</div> } */ <p className="description__text-secondary">
candidatesListArr && Array.isArray(candidatesListArr) && Описание отсутствует...
candidatesListArr.map((el) => ( </p>
<div className='row' key={el.id}> )}
<div className='col-2'> </div>
<img className='description__img' src={male} alt=''/> <div className="col-12 col-xl-4">
</div> <Link to={`/candidate/${el.id}`}>
<div className='col-12 col-xl-6'> <button className="description__button">
<h3 className='description__title'> Подробное резюме
{SKILLS[el.position_id]}, {LEVELS[el.level]} </button>
</h3> </Link>
</div>
{el.vc_text_short ? ( <div className="col-xl-2"></div>
<div className='description__text'> <div className="col-12 col-xl-6">
{el.vc_text_short} <ul className="description__list">
</div> {Array.isArray(el?.skillValues) &&
) : ( el.skillValues?.map((e) => (
<p className='description__text-secondary'> <li key={e.id} className="description__list-item">
Описание отсутствует... {e.skill.name}
</p> </li>
)} ))}
</div> </ul>
<div className='col-12 col-xl-4'> <img
<Link to={`/candidate/${el.id}`}> className="description__rectangle"
<button className='description__button'> src={rectangle}
Подробное резюме alt=""
</button> />
</Link> </div>
</div> <div className="col-xl-4"></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>
</div>
<div className='row'>
<div className='col-12'>
<div className='description__footer'>
<div className='description__footer-btn'>
{candidatesListArr && (
<button onClick={() => onLoadMore(2)}>Загрузить еще</button>
)}
</div> </div>
))
) : (
<div className="description__empty">
<img src={cursorImg}></img>
<p>
В данный момент<span> нет свободных </span> специалистов в
данной категории
</p>
</div>
)}
</ErrorBoundary>
</div>
<div className="row">
<div className="col-12">
<div className="description__footer">
<div className="description__footer-btn">
{candidatesListArr && (
<button onClick={() => onLoadMore(2)}>Загрузить еще</button>
)}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </div>
) </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;
} }
} }

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

@ -1,182 +1,262 @@
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 [levels] = useState({ const [modalDelete, setModalDelete] = useState(false);
1: "Junior", const [levels] = useState({
2: "Middle", 1: "Junior",
3: "Middle+", 2: "Middle",
4: "Senior", 3: "Middle+",
}) 4: "Senior",
return ( });
<div className='partnerBid'> return (
<ProfileHeader /> <div className="partnerBid">
<Navigation /> <ProfileHeader />
<div className='container'> <Navigation />
<ProfileBreadcrumbs links={[ <ModalAdd active={modalDelete} setActive={setModalDelete}>
{name: 'Главная', link: '/profile'}, <div className="title-project modal-title-delete">
{name: 'Запросы и открытые позиции', link: '/profile/requests'}, <h4>Подтверждение удаления</h4>
{name: 'Просмотр заявки - PHP разработчик', link: '/profile/bid'} <p className="title-project__decs modal-decs">
]} Вы решили удалить заявку. После удаления ее нельзя будет
/> восстановить. Продолжаем?
<h2 className='partnerBid__title'>Страница заявки </h2> </p>
{loader && <Loader />}
{!loader && <div className="buttons-modal">
<> <button
<div className='partnerBid__qualification'> className="buttons-modal__no"
<h3>{requestInfo.title}</h3> onClick={() => setModalDelete(false)}
<div className='partnerBid__qualification__buttons'> >
<Link to='/profile/edit-request'>Редактировать</Link> Нет
<img src={deleteBtn} alt='delete' onClick={() => deleteRequest()}/> </button>
</div> <button
</div> className="buttons-modal__yes"
<div className='partnerBid__switcher'> onClick={() => deleteRequest()}
<div className={partnerRequests[partnerRequests.findIndex(el => el.id === requestId) - 1]?.id ? 'partnerBid__switcher__prev switchDate' : 'partnerBid__switcher__prev switchDate disable'} >
onClick={() => { Да
dispatch(setPartnerRequestId(partnerRequests[partnerRequests.findIndex(el => el.id === requestId) - 1].id)) </button>
}} </div>
>
<img src={arrowSwitchDate} alt='arrow'/>
</div>
<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'}
onClick={() => {
dispatch(setPartnerRequestId(partnerRequests[partnerRequests.findIndex(el => el.id === requestId) + 1].id))
}}
>
<img src={arrowSwitchDate} alt='arrow'/>
</div>
</div>
</>
}
{Boolean(Object.keys(requestInfo).length) && !loader &&
<>
<div className='table__wrapper'>
<table>
<thead>
<tr>
<th><p>Требования к стеку разработчика</p></th>
<th><p>Квалификация</p></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p>
{requestInfo.position.name}. &nbsp;
{requestInfo.skills.map((skill, index) => {
return <span key={skill.id}>{skill.name}
{requestInfo.skills.length > index + 1 ? ',' : '.'}
&nbsp;
</span>
})}
</p>
</td>
<td>
<div className='qualification__info'>
<div className='img__wrapper'>
<img src={backEndImg} alt='backEndImg' />
</div>
<p>{requestInfo.position.name}</p>
</div>
</td>
</tr>
<tr>
<td>
<p>
{requestInfo.descr}
</p>
</td>
<td>
<div className='qualification__info'>
<div className='img__wrapper'>
<img src={middle} alt='middleImg' />
</div>
<p className='middle'>{requestInfo.level}</p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div className='partnerBid__suitable'>
<div className='partnerBid__suitable__title'>
<p>Подходящие сотрудники по запросу</p>
</div>
<div className='partnerBid__suitable__persons'>
{requestInfo.result_profiles.length && requestInfo.result_profiles.map((person, index) => {
return <div key={index} className='partnerBid__suitable__person'>
<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>
</div>
})
}
</div>
</div>
</>
}
</div>
<Footer/>
</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>
{loader && <Loader />}
{!loader && (
<>
<div className="partnerBid__qualification">
<h3>{requestInfo.title}</h3>
<div className="partnerBid__qualification__buttons">
<Link to="/profile/edit-request">Редактировать</Link>
<img
src={deleteBtn}
alt="delete"
onClick={() => setModalDelete(true)}
/>
</div>
</div>
<div className="partnerBid__switcher">
<div
className={
partnerRequests[
partnerRequests.findIndex((el) => el.id === requestId) - 1
]?.id
? "partnerBid__switcher__prev switchDate"
: "partnerBid__switcher__prev switchDate disable"
}
onClick={() => {
dispatch(
setPartnerRequestId(
partnerRequests[
partnerRequests.findIndex((el) => el.id === requestId) -
1
].id
)
);
}}
>
<img src={arrowSwitchDate} alt="arrow" />
</div>
<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"
}
onClick={() => {
dispatch(
setPartnerRequestId(
partnerRequests[
partnerRequests.findIndex((el) => el.id === requestId) +
1
].id
)
);
}}
>
<img src={arrowSwitchDate} alt="arrow" />
</div>
</div>
</>
)}
{Boolean(Object.keys(requestInfo).length) && !loader && (
<>
<div className="table__wrapper">
<table>
<thead>
<tr>
<th>
<p>Требования к стеку разработчика</p>
</th>
<th>
<p>Квалификация</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p>
{requestInfo.position.name}. &nbsp;
{requestInfo.skills.map((skill, index) => {
return (
<span key={skill.id}>
{skill.name}
{requestInfo.skills.length > index + 1
? ","
: "."}
&nbsp;
</span>
);
})}
</p>
</td>
<td>
<div className="qualification__info">
<div className="img__wrapper">
<img src={backEndImg} alt="backEndImg" />
</div>
<p>{requestInfo.position.name}</p>
</div>
</td>
</tr>
<tr>
<td>
<p>{requestInfo.descr}</p>
</td>
<td>
<div className="qualification__info">
<div className="img__wrapper">
<img src={middle} alt="middleImg" />
</div>
<p className="middle">{requestInfo.level}</p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div className="partnerBid__suitable">
<div className="partnerBid__suitable__title">
<p>Подходящие сотрудники по запросу</p>
</div>
<div className="partnerBid__suitable__persons">
{requestInfo.result_profiles.length &&
requestInfo.result_profiles.map((person, index) => {
return (
<div key={index} className="partnerBid__suitable__person">
<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>
</div>
);
})}
</div>
</div>
</>
)}
</div>
<Footer />
</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;
} }

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

@ -1,111 +1,127 @@
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) => {
return ( setRequests(el);
<div className='partnerRequests'> setLoader(false);
<ProfileHeader /> });
<Navigation /> }, []);
<div className='container'> return (
<ProfileBreadcrumbs links={[ <div className="partnerRequests">
{name: 'Главная', link: '/profile'}, <ProfileHeader />
{name: 'Запросы и открытые позиции', link: '/profile/requests'} <Navigation />
]} <div className="container">
/> <ProfileBreadcrumbs
<h2 className='partnerRequests__title'>Запросы</h2> links={[
{loader && { name: "Главная", link: "/profile" },
<Loader /> { name: "Запросы и открытые позиции", link: "/profile/requests" },
} ]}
{Boolean(requests.length) && !loader && />
<div className='partnerRequests__section'> <h2 className="partnerRequests__title">Запросы</h2>
<div className='partnerRequests__section__items'> {loader && <Loader />}
{ {Boolean(requests.length) && !loader && (
requests.map((item, index) => { <div className="partnerRequests__section">
return <Link key={index} to={'/profile/bid'} className='partnerRequests__section__item' <div className="partnerRequests__section__items">
onClick={() => { {requests.map((item, index) => {
dispatch(setPartnerRequestId(item.id)) return (
dispatch(setPartnerRequests(requests)) <Link
}}> key={index}
<p className='partnerRequests__section__item__name'> to={"/profile/bid"}
{item.position.name} className="partnerRequests__section__item"
</p> onClick={() => {
<p className='partnerRequests__section__item__count'> dispatch(setPartnerRequestId(item.id));
Подходящие кандидаты dispatch(setPartnerRequests(requests));
<span>{item.result_count}</span> }}
</p> >
</Link> <p className="partnerRequests__section__item__name">
}) {item.position.name}
} </p>
</div> <p className="partnerRequests__section__item__count">
<div className='partnerRequests__section__info'> Подходящие кандидаты
<h3>Инструкция: подачи заявки</h3> <span>{item.result_count}</span>
<p> </p>
Оператор компании заводит заявку и указывает необходимые параметры — </Link>
количество сотрудников, стек, уровень специалиста );
</p> })}
<Link to={'/profile/add-request'}>
<span>+</span>
Создать запрос
</Link>
</div>
</div>
}
{!Boolean(requests.length) && !loader &&
<div className="partnerRequests__noItems">
<div className="partnerRequests__noItems__create">
<div className="partnerRequests__noItems__create__link">
<img src={cursorImg} alt="cursor" />
<p>У вас еще нет запросов на сотрудников</p>
<Link to={'/profile/add-request'}>
<span>+</span>
Создать запрос
</Link>
</div>
<div className="partnerRequests__noItems__create__instruction">
<h3>Инструкция: подачи заявки</h3>
<p>
Оператор компании заводит заявку и указывает необходимые параметры —
количество сотрудников, стек, уровень специалиста
</p>
</div>
</div>
<div className="partnerRequests__noItems__freeEmployees">
<SliderWorkers title={"Свободные разработчики"} titleInfo={"в нашей базе"} />
<p>Перейти в полный <Link to={'/profile/catalog'}>КАТАЛОГ</Link> сотрудников</p>
</div>
</div>
}
</div> </div>
<Footer/> <div className="partnerRequests__section__info">
</div> <h3>Инструкция: подачи заявки</h3>
) <p>
Оператор компании заводит заявку и указывает необходимые
параметры — количество сотрудников, стек, уровень специалиста
</p>
<Link to={"/profile/add-request"}>
<span>+</span>
Создать запрос
</Link>
</div>
</div>
)}
{!Boolean(requests.length) && !loader && (
<div className="partnerRequests__noItems">
<div className="partnerRequests__noItems__create">
<div className="partnerRequests__noItems__create__link">
<img src={cursorImg} alt="cursor" />
<p>У вас еще нет запросов на сотрудников</p>
<Link to={"/profile/add-request"}>
<span>+</span>
Создать запрос
</Link>
</div>
<div className="partnerRequests__noItems__create__instruction">
<h3>Инструкция: подачи заявки</h3>
<p>
Оператор компании заводит заявку и указывает необходимые
параметры — количество сотрудников, стек, уровень специалиста
</p>
</div>
</div>
<div className="partnerRequests__noItems__freeEmployees">
<SliderWorkers
title={"Свободные разработчики"}
titleInfo={"в нашей базе"}
/>
<p className="catalogLink">
Перейти в полный <Link to={"/profile/catalog"}>КАТАЛОГ</Link>{" "}
сотрудников
</p>
</div>
</div>
)}
</div>
<Footer />
</div>
);
}; };

244
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;
@ -214,127 +214,127 @@
padding: 15px 15px; padding: 15px 15px;
} }
&__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;
width: 100%; width: 100%;
min-width: 650px; min-width: 650px;
justify-content: space-between; justify-content: space-between;
max-height: 70px; max-height: 70px;
@media (max-width: 720px) { @media (max-width: 720px) {
min-width: auto; min-width: auto;
} }
@media (max-width: 670px) { @media (max-width: 670px) {
max-height: inherit; max-height: inherit;
flex-direction: column; flex-direction: column;
row-gap: 8px; row-gap: 8px;
width: auto; width: auto;
img { img {
margin-right: 5px; margin-right: 5px;
}
}
@media (max-width: 480px) {
padding: 10px 15px;
}
p {
font-weight: 700;
font-size: 16px;
line-height: 32px;
color: #111112;
margin-bottom: 0;
@media (max-width: 480px) {
font-size: 14px;
}
@media (max-width: 380px) {
font-size: 12px;
}
}
a {
background: #52B709;
max-width: 174px;
border-radius: 44px;
width: 100%;
height: 46px;
border: none;
font-weight: 400;
font-size: 15px;
line-height: 32px;
color: #FFFFFF;
display: flex;
justify-content: center;
align-items: center;
transition: 0.3s all ease;
span {
color: white;
font-weight: 700;
font-size: 20px;
margin-right: 8px;
}
&:hover {
box-shadow: 6px 5px 20px rgb(87 98 80 / 21%);
transform: scale(1.02);
text-decoration: none;
color: #FFFFFF;
}
} }
} }
&__instruction { @media (max-width: 480px) {
margin-left: 45px; padding: 10px 15px;
}
@media (max-width: 1140px) { p {
margin-left: 0; font-weight: 700;
font-size: 16px;
line-height: 32px;
color: #111112;
margin-bottom: 0;
@media (max-width: 480px) {
font-size: 14px;
} }
h3 {
color: #52B709; @media (max-width: 380px) {
font-size: 12px;
}
}
a {
background: #52b709;
max-width: 174px;
border-radius: 44px;
width: 100%;
height: 46px;
border: none;
font-weight: 400;
font-size: 15px;
line-height: 32px;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
transition: 0.3s all ease;
span {
color: white;
font-weight: 700; font-weight: 700;
font-size: 15px; font-size: 20px;
line-height: 15px; margin-right: 8px;
margin-bottom: 7px;
@media (max-width: 1140px) {
text-align: center;
font-size: 22px;
margin-bottom: 15px;
}
@media (max-width: 530px) {
font-size: 16px;
}
} }
p { &:hover {
font-weight: 400; box-shadow: 6px 5px 20px rgb(87 98 80 / 21%);
font-size: 15px; transform: scale(1.02);
line-height: 24px; text-decoration: none;
color: #000000; color: #ffffff;
margin-bottom: 0;
@media (max-width: 1140px) {
text-align: center;
font-size: 16px;
}
@media (max-width: 530px) {
font-size: 14px;
}
} }
} }
} }
&__instruction {
margin-left: 45px;
@media (max-width: 1140px) {
margin-left: 0;
}
h3 {
color: #52b709;
font-weight: 700;
font-size: 15px;
line-height: 15px;
margin-bottom: 7px;
@media (max-width: 1140px) {
text-align: center;
font-size: 22px;
margin-bottom: 15px;
}
@media (max-width: 530px) {
font-size: 16px;
}
}
p {
font-weight: 400;
font-size: 15px;
line-height: 24px;
color: #000000;
margin-bottom: 0;
@media (max-width: 1140px) {
text-align: center;
font-size: 16px;
}
@media (max-width: 530px) {
font-size: 14px;
}
}
}
}
&__freeEmployees { &__freeEmployees {
h2 { h2 {
font-weight: 500; font-weight: 500;
@ -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;
} }
} }
} }