reports create, refactoring

This commit is contained in:
kurpfish 2021-11-30 16:00:58 +02:00
parent 76c46067ef
commit 4629bc74a9
61 changed files with 26047 additions and 3865 deletions

21910
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -14,9 +14,9 @@
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <!-- <noscript>You need to enable JavaScript to run this app.</noscript> -->
<div id="root"></div> <div id="root"></div>
<script type="text/javascript"> <!-- <script type="text/javascript">
(function (m, e, t, r, i, k, a) { (function (m, e, t, r, i, k, a) {
m[i] = m[i] || function () { (m[i].a = m[i].a || []).push(arguments) }; m[i] = m[i] || function () { (m[i].a = m[i].a || []).push(arguments) };
m[i].l = 1 * new Date(); k = e.createElement(t), a = e.getElementsByTagName(t)[0], k.async = 1, k.src = r, a.parentNode.insertBefore(k, a) m[i].l = 1 * new Date(); k = e.createElement(t), a = e.getElementsByTagName(t)[0], k.async = 1, k.src = r, a.parentNode.insertBefore(k, a)
@ -32,7 +32,7 @@
</script> </script>
<noscript> <noscript>
<div><img src="https://mc.yandex.ru/watch/84188125" style="position:absolute; left:-9999px;" alt="" /></div> <div><img src="https://mc.yandex.ru/watch/84188125" style="position:absolute; left:-9999px;" alt="" /></div>
</noscript> </noscript> -->
</body> </body>
</html> </html>

View File

@ -36,7 +36,7 @@ const App = (props) => {
path='/candidate/:id' path='/candidate/:id'
component={CandidatePage} component={CandidatePage}
/> />
<ProtectedRoute path='/calendar' component={CalendarPage} /> <ProtectedRoute path='/:userId/calendar' component={CalendarPage} />
<ProtectedRoute <ProtectedRoute
exact exact
path='/candidate/:id/form' path='/candidate/:id/form'

View File

@ -1,8 +1,10 @@
import React, { useState } from 'react' import React, { useState } from 'react'
import { AuthBox } from '../AuthBox/AuthBox'
import { useDispatch, useSelector } from 'react-redux' import { useDispatch, useSelector } from 'react-redux'
import { auth } from '../../redux/outstaffingSlice' import { auth } from '../../redux/outstaffingSlice'
import { loading } from '../../redux/loaderSlice' import { loading } from '../../redux/loaderSlice'
import style from './AuthForDevelopers.module.css'
import ellipse from '../../images/ellipse.png' import ellipse from '../../images/ellipse.png'
import arrow from '../../images/arrow__login_page.png' import arrow from '../../images/arrow__login_page.png'
import authImg from '../../images/auth_img.png' import authImg from '../../images/auth_img.png'
@ -10,115 +12,42 @@ import cross from '../../images/cross.png'
import text from '../../images/Body_Text.png' import text from '../../images/Body_Text.png'
import vector from '../../images/Vector_Smart_Object.png' import vector from '../../images/Vector_Smart_Object.png'
import vectorBlack from '../../images/Vector_Smart_Object_black.png' import vectorBlack from '../../images/Vector_Smart_Object_black.png'
import { fetchAuth } from '../../server/server'
import { selectAuth } from '../../redux/outstaffingSlice'; import { selectAuth } from '../../redux/outstaffingSlice'
import { selectIsLoading } from '../../redux/loaderSlice'; import { Redirect, Link } from 'react-router-dom'
import { setRole } from '../../redux/roleSlice';
import { Redirect, Link } from 'react-router-dom';
import { Loader } from '../Loader/Loader'
import { withSwalInstance } from 'sweetalert2-react';
import swal from 'sweetalert2';
import { Footer } from '../Footer/Footer' import { Footer } from '../Footer/Footer'
const SweetAlert = withSwalInstance(swal); import './authForDevelopers.scss'
const AuthForDevelopers = () => { const AuthForDevelopers = () => {
const dispatch = useDispatch()
const isAuth = useSelector(selectAuth) const isAuth = useSelector(selectAuth)
const isLoading = useSelector(selectIsLoading)
const [username, setUsername] = useState('') if (isAuth) {
const [password, setPassword] = useState('')
const [error, setError] = useState(null);
if(isAuth) {
return <Redirect to='/' /> return <Redirect to='/' />
} }
return ( return (
<section className={style.developers}> <section className='auth-developers'>
<div className={style.developers__background}> <div className='auth-developers__background'>
<img className={style.vector} src={vector} alt='' /> <img className='auth-developers__vector' src={vector} alt='' />
<img className={style.vectorBlack} src={vectorBlack} alt='' /> <img
className='auth-developers__vector-black'
src={'./images/Vector_Smart_Object_black.png'}
alt=''
/>
<div className='container'> <div className='container'>
<div className='row'> <div className='row'>
<div className='col-12 col-xl-6'> <div className='col-12 col-xl-6'>
<div className={style.developers__box}> <div className='auth-developers__box'>
<h2 className={style.developers__title}> <AuthBox title='Для разработчиков' roleChangeLink='/auth' />
Войти в <span>систему</span>
</h2>
<div className={style.developers__partners}>
<img src={ellipse} alt='' />
<span>Для разработчиков</span>
</div>
<form className={style.developers__form}>
<label htmlFor='login'>Ваш логин:</label>
<input
id='login'
type='text'
placeholder='Логин'
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
<label htmlFor='password'>Пароль:</label>
<input
id='password'
type='password'
placeholder='Пароль'
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
{ error && <div className={style.form__error}>
<SweetAlert
show={!!error}
title="Ошибка"
text={error}
onConfirm={() => setError(null)}
/>
</div> }
<div className={style.form__buttons}>
<button
className={style.form__btn}
onClick={!isLoading ? (e) => {
e.preventDefault();
dispatch(loading(true))
fetchAuth({
username,
password,
dispatch: ()=> {
dispatch(auth(true))
dispatch(loading(false))
dispatch(setRole('ROLE_DEV'))
},
catchError: () => {
setError('Некорректные данные для входа')
dispatch(loading(false))
}
})
} : ()=>{}}
>
{ isLoading ? <Loader /> : 'Войти' }
</button>
<button className={`${style.form__btn__partners} ${style.auth__link}`}>
<Link to='/auth'>Для партнёров</Link>
</button>
</div>
</form>
</div> </div>
</div> </div>
<div className='col-xl-2'> <div className='col-xl-2'>
<img className={style.developers__arrow} src={arrow} alt='' /> <img className='auth-developers__arrow' src={arrow} alt='' />
</div> </div>
<div className='col-12 col-xl-4'> <div className='col-12 col-xl-4'>
<div className={style.developers__info}> <div className='auth-developers__info'>
<div className={style.developers__info__box}> <div className='auth-developers__info-box'>
<img src={authImg} alt='' /> <img src={authImg} alt='' />
<h3> <h3>
Управление Управление
@ -126,28 +55,30 @@ const AuthForDevelopers = () => {
</h3> </h3>
</div> </div>
<div className={style.developers__info__container}> <div className='auth-developers__info-container'>
<div className={style.developers__info__img}> <div className='auth-developers__info-img'>
<div> <div>
<img className='cross' src={cross} alt='' /> <img className='cross' src={cross} alt='' />
</div> </div>
<div> <div>
{/* <img className={style.specialists} src={specialists} alt="" /> */} {/* <img className='auth-specialists} src={specialists} alt="" /> */}
<p className={style.specialists}>20 Специалистов</p> <p className='auth-developers__specialists'>
20 Специалистов
</p>
</div> </div>
</div> </div>
<ul className={style.info__list}> <ul className='auth-developers__info-list'>
<li className={style.info__list__item}> <li className='auth-developers__info-item'>
Рабочее пространство Рабочее пространство
</li> </li>
<li className={style.info__list__item}> <li className='auth-info__list-item'>
Управление задачами Управление задачами
</li> </li>
</ul> </ul>
</div> </div>
<img className={style.img__text} src={text} alt='' /> <img className='auth-developers__img-text' src={text} alt='' />
</div> </div>
</div> </div>
</div> </div>

View File

@ -1,385 +0,0 @@
.developers {
overflow: hidden;
}
.developers__background {
background-color: #f1f1f1;
position: relative;
}
.vector,
.vectorBlack {
position: absolute;
}
.vector {
top: -720px;
left: -320px;
}
.vectorBlack {
top: 460px;
right: -224px;
}
@media (max-width: 575.98px) {
.vector,
.vectorBlack {
display: none;
}
}
.developers__box {
display: flex;
flex-direction: column;
align-self: center;
margin-bottom: 194px;
}
@media (max-width: 575.98px) {
.developers__box {
margin-bottom: 44px;
}
}
.developers__title {
font-family: 'GT Eesti Pro Display';
font-size: 5.3em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 77.81px;
text-align: left;
margin-top: 164px;
}
@media (max-width: 575.98px) {
.developers__title {
text-align: center;
margin-top: 44px;
}
}
.developers__title > span {
font-family: 'GT Eesti Pro Display';
color: #52b709;
font-style: normal;
letter-spacing: 0.56px;
line-height: normal;
}
.developers__partners {
display: flex;
align-items: center;
justify-content: center;
margin-top: 15px;
margin-bottom: 65px;
}
.developers__partners > img {
width: 6px;
height: 6px;
margin-left: 120px;
}
.developers__partners > span {
color: #18586e;
font-family: 'GT Eesti Pro Display';
font-size: 1.6em;
font-weight: 500;
font-style: normal;
letter-spacing: normal;
line-height: 16.81px;
text-align: left;
margin-left: 10px;
}
.developers__form {
display: flex;
flex-direction: column;
}
.developers__form > label {
color: #48802d;
font-family: 'GT Eesti Pro Display';
font-size: 2.4em;
font-weight: 500;
font-style: normal;
letter-spacing: normal;
line-height: 16.81px;
text-align: left;
margin-bottom: 20px;
margin-left: 45px;
}
.developers__form > input {
max-width: 366px;
height: 75px;
box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
border-radius: 37px;
border: 1px solid #c4c4c4;
background-color: #ffffff;
margin-bottom: 60px;
color: #a6a6a6;
font-family: 'GT Eesti Pro Display';
font-size: 2.2em;
font-weight: 300;
font-style: normal;
letter-spacing: normal;
line-height: normal;
text-align: left;
padding-left: 45px;
outline: none;
}
.form__buttons {
display: flex;
justify-content: start;
align-items: center;
}
.form__btn {
width: 268px;
height: 75px;
box-shadow: 6px 5px 20px rgba(82, 151, 34, 0.21);
border-radius: 38px;
background-color: #ffffff;
background-image: linear-gradient(to top, #6aaf5c 0%, #52b709 100%),
linear-gradient(
36deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.16) 47%,
rgba(255, 255, 255, 0.17) 50%,
rgba(255, 255, 255, 0) 100%
);
border: none;
color: #ffffff;
font-family: 'Muller';
font-weight: 500;
font-size: 2.2em;
font-weight: bold;
letter-spacing: normal;
line-height: 71.88px;
text-align: center;
border: 2px solid #6aaf5c;
margin-right: 1.5rem;
}
.form__btn:hover .loader * {
fill: #6aaf5c;
}
.form__btn:hover {
background-image: none;
background-color: #ffffff;
border: 2px solid #6aaf5c;
color: #6aaf5c !important;
transition: .3s;
}
.form__btn__partners {
width: 268px;
height: 75px;
border-radius: 38px;
background-color: #ffffff;
border: 2px solid #6aaf5c;
font-family: 'Muller';
font-size: 2em;
font-weight: 300;
letter-spacing: normal;
line-height: 71.88px;
text-align: center;
}
.form__btn__partners a {
color: #6aaf5c !important;
}
/* .form__error {
font-size: 16px;
color: #b21;
margin-left: 45px;
} */
@media (max-width: 575.98px) {
.form__btn {
margin: 0 auto;
}
}
.developers__arrow {
margin-top: 360px;
}
@media (max-width: 575.98px) {
.developers__arrow {
display: none;
}
}
.developers__info {
background-color: #e1fccf;
margin-top: 70px;
max-width: 310px;
padding-top: 30px;
position: relative;
padding-bottom: 310px;
}
@media (max-width: 575.98px) {
.developers__info {
max-width: 380px;
}
}
@media (max-width: 375.98px) {
.developers__info {
max-width: 340px;
}
}
.developers__info__box {
display: flex;
align-items: center;
}
@media (max-width: 575.98px) {
.developers__info__box {
flex-direction: column;
justify-content: center;
}
}
.developers__info__box > img {
width: 150px;
height: 150px;
margin-left: -84px;
margin-right: 30px;
}
@media (max-width: 575.98px) {
.developers__info__box > img {
margin-left: 0px;
margin-right: 0px;
}
}
.developers__info__box > h3 {
font-family: 'GT Eesti Pro Display';
font-size: 2em;
font-weight: 100;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
text-align: left;
}
@media (max-width: 575.98px) {
.developers__info__box > h3 {
margin-top: 20px;
}
}
.developers__info__container {
display: flex;
position: relative;
}
.developers__info__img {
display: flex;
flex-direction: column;
text-align: center;
margin-top: 28px;
margin-left: -20px;
}
@media (max-width: 575.98px) {
.developers__info__img {
margin-left: -48px;
}
}
.developers__info__img > div > img {
margin-bottom: 100px;
}
.specialists {
font-family: 'GT Eesti Pro Display';
font-size: 1.8em;
font-weight: 100;
font-style: normal;
letter-spacing: normal;
line-height: 26.12px;
text-align: left;
transform: rotate(-90deg);
text-transform: uppercase;
}
.info__list {
list-style: none;
margin-top: 110px;
position: absolute;
left: 114px;
}
@media (max-width: 575.98px) {
.info__list {
left: 34px;
}
}
.info__list__item {
color: #1f1f1f;
font-family: 'GT Eesti Pro Display';
font-size: 4em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 56.95px;
text-align: left;
text-decoration: underline;
text-transform: uppercase;
margin-bottom: 34px;
}
@media (max-width: 575.98px) {
.info__list__item {
font-size: 2.6em;
margin-bottom: 14px;
}
}
.img__text {
position: absolute;
right: -68px;
bottom: -84px;
}
@media (max-width: 575.98px) {
.img__text {
right: -10px;
}
}
.auth__link {
display: block;
}
.auth__link a {
display: block;
width: 100%;
height: 100%;
color: #fff;
}
@media (max-width: 766px) {
.form__buttons {
flex-direction: column;
}
.form__btn {
margin: 0;
margin-bottom: 1.5rem;
}
}

View File

@ -1,149 +1,74 @@
import React, { useState } from 'react'; import React from 'react'
import { useDispatch } from 'react-redux'; import arrow from '../../images/arrow__login_page.png'
import { auth } from '../../redux/outstaffingSlice'; import medium from '../../images/medium_male_big.png'
import { loading } from '../../redux/loaderSlice'; import cross from '../../images/cross.png'
import style from './AuthForPartners.module.css'; import text from '../../images/Body_Text.png'
import ellipse from '../../images/ellipse.png'; import vector from '../../images/Vector_Smart_Object.png'
import arrow from '../../images/arrow__login_page.png'; import vectorBlack from '../../images/Vector_Smart_Object_black.png'
import medium from '../../images/medium_male_big.png';
import cross from '../../images/cross.png';
import text from '../../images/Body_Text.png';
import align from '../../images/align-left.png';
import phone from '../../images/phone.png';
import telegram from '../../images/telegram.png';
import vector from '../../images/Vector_Smart_Object.png';
import vectorBlack from '../../images/Vector_Smart_Object_black.png';
import { fetchAuth } from '../../server/server'
import { useSelector } from 'react-redux' import { useSelector } from 'react-redux'
import { selectAuth } from '../../redux/outstaffingSlice'; import { selectAuth } from '../../redux/outstaffingSlice'
import { selectIsLoading } from '../../redux/loaderSlice'; import { Redirect } from 'react-router-dom'
import { setRole } from '../../redux/roleSlice';
import { Redirect, Link } from 'react-router-dom';
import { Loader } from '../Loader/Loader'
import { withSwalInstance } from 'sweetalert2-react';
import swal from 'sweetalert2';
import { Footer } from '../Footer/Footer' import { Footer } from '../Footer/Footer'
import { AuthBox } from '../AuthBox/AuthBox'
const SweetAlert = withSwalInstance(swal); import './authForPartners.scss'
const AuthForPartners = () => { const AuthForPartners = () => {
const dispatch = useDispatch()
const isAuth = useSelector(selectAuth) const isAuth = useSelector(selectAuth)
const isLoading = useSelector(selectIsLoading)
const [username, setUsername] = useState('') if (isAuth) {
const [password, setPassword] = useState('')
const [error, setError] = useState(null);
if(isAuth) {
return <Redirect to='/' /> return <Redirect to='/' />
} }
return ( return (
<section className={style.partners}> <section className='auth-partners'>
<div className={style.partners__background}> <div className='auth-partners__background'>
<img className={style.vector} src={vector} alt="" /> <img className='auth-partners__vector' src={vector} alt='' />
<img className={style.vectorBlack} src={vectorBlack} alt="" /> <img className='auth-partners__vector-black' src={vectorBlack} alt='' />
<div className="container"> <div className='container'>
<div className="row"> <div className='row'>
<div className="col-12 col-xl-6"> <div className='col-12 col-xl-6'>
<div className={style.partners__box}> <div className='auth-partners__box'>
<h2 className={style.partners__title}> <AuthBox title='Для партнёров' roleChangeLink='/authdev' />
Войти в <span>систему</span>
</h2>
<div className={style.partners__partners}>
<img src={ellipse} alt="" />
<span>Для партнеров</span>
</div>
<form className={style.partners__form}>
<label htmlFor="login">Ваш логин:</label>
<input id="login" type="text" placeholder="Логин"
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
<label htmlFor="password">Пароль:</label>
<input id="password" type="password" placeholder="Пароль"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
{ error && <div className={style.form__error}>
<SweetAlert
show={!!error}
title="Ошибка"
text={error}
onConfirm={() => setError(null)}
/>
</div> }
<div className={style.form__buttons}>
<button
className={style.form__btn}
onClick={!isLoading ? (e) => {
e.preventDefault();
dispatch(loading(true))
fetchAuth({
username,
password,
dispatch: ()=> {
dispatch(auth(true))
dispatch(loading(false))
dispatch(setRole('ROLE_PARTNER'))
},
catchError: () => {
setError('Некорректные данные для входа')
dispatch(loading(false))
}
})
} : ()=>{}}
>
{ isLoading ? <Loader /> : 'Войти' }
</button>
<button className={`${style.form__btn__dev} ${style.auth__link}`}>
<Link to='/authdev'>Для разработчиков</Link>
</button>
</div>
</form>
</div> </div>
</div> </div>
<div className="col-xl-2"> <div className='col-xl-2'>
<img className={style.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={style.partners__info}> <div className='auth-partners__info'>
<div className={style.partners__info__box}> <div className='auth-partners__info-box'>
<img src={medium} alt="" /> <img src={medium} alt='' />
<h3> <h3>
Frontend разработчик, Frontend разработчик,
<br /> Middle <br /> Middle
</h3> </h3>
</div> </div>
<div className={style.partners__info__container}> <div className='auth-partners__info-container'>
<div className={style.partners__info__img}> <div className='auth-partners__info-img'>
<div> <div>
<img className="cross" src={cross} alt="" /> <img className='cross' src={cross} alt='' />
</div> </div>
<div> <div>
{/* <img className={style.specialists} src={specialists} alt="" /> */} {/* <img className='auth-specialists} src={specialists} alt="" /> */}
<p className={style.specialists}>20 Специалистов</p> <p className='auth-partners__specialists'>
20 Специалистов
</p>
</div> </div>
</div> </div>
<ul className={style.info__list}> <ul className='auth-partners__info-list'>
<li className={style.info__list__item}>Ruby on Rails</li> <li className='auth-partners__info-item'>Ruby on Rails</li>
<li className={style.info__list__item}>PHP</li> <li className='auth-partners__info-item'>PHP</li>
<li className={style.info__list__item}>Python</li> <li className='auth-partners__info-item'>Python</li>
<li className={style.info__list__item}>Vue.js</li> <li className='auth-partners__info-item'>Vue.js</li>
<li className={style.info__list__item}>React. JS</li> <li className='auth-partners__info-item'>React. JS</li>
</ul> </ul>
</div> </div>
<img className={style.img__text} src={text} alt="" /> <img className='auth-partners__img-text' src={text} alt='' />
</div> </div>
</div> </div>
</div> </div>
@ -151,7 +76,7 @@ const AuthForPartners = () => {
</div> </div>
</div> </div>
</section> </section>
); )
}; }
export default AuthForPartners; export default AuthForPartners

View File

@ -1,466 +0,0 @@
.partners {
overflow: hidden;
}
.partners__background {
background-color: #f1f1f1;
position: relative;
}
.vector,
.vectorBlack {
position: absolute;
}
.vector {
top: -720px;
left: -320px;
}
.vectorBlack {
top: 460px;
right: -224px;
}
@media (max-width: 575.98px) {
.vector,
.vectorBlack {
display: none;
}
}
.partners__box {
display: flex;
flex-direction: column;
align-self: center;
margin-bottom: 194px;
}
@media (max-width: 575.98px) {
.partners__box {
margin-bottom: 44px;
}
}
.partners__title {
font-family: 'GT Eesti Pro Display';
font-size: 5.3em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 77.81px;
text-align: left;
margin-top: 164px;
}
@media (max-width: 575.98px) {
.partners__title {
text-align: center;
margin-top: 44px;
}
}
.partners__title > span {
font-family: 'GT Eesti Pro Display';
color: #52b709;
font-style: normal;
letter-spacing: 0.56px;
line-height: normal;
}
.partners__partners {
display: flex;
align-items: center;
justify-content: center;
margin-top: 15px;
margin-bottom: 65px;
}
.partners__partners > img {
width: 6px;
height: 6px;
margin-left: 120px;
}
.partners__partners > span {
color: #18586e;
font-family: 'GT Eesti Pro Display';
font-size: 1.6em;
font-weight: 500;
font-style: normal;
letter-spacing: normal;
line-height: 16.81px;
text-align: left;
margin-left: 10px;
}
.partners__form {
display: flex;
flex-direction: column;
}
.partners__form > label {
color: #48802d;
font-family: 'GT Eesti Pro Display';
font-size: 2.4em;
font-weight: 500;
font-style: normal;
letter-spacing: normal;
line-height: 16.81px;
text-align: left;
margin-bottom: 20px;
margin-left: 45px;
}
.partners__form > input {
max-width: 366px;
height: 75px;
box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
border-radius: 37px;
border: 1px solid #c4c4c4;
background-color: #ffffff;
margin-bottom: 60px;
color: #a6a6a6;
font-family: 'GT Eesti Pro Display';
font-size: 2.2em;
font-weight: 300;
font-style: normal;
letter-spacing: normal;
line-height: normal;
text-align: left;
padding-left: 45px;
outline: none;
}
.form__buttons {
display: flex;
justify-content: start;
align-items: center;
}
.form__btn {
width: 268px;
height: 75px;
box-shadow: 6px 5px 20px rgba(82, 151, 34, 0.21);
border-radius: 38px;
background-color: #ffffff;
background-image: linear-gradient(to top, #6aaf5c 0%, #52b709 100%),
linear-gradient(
36deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.16) 47%,
rgba(255, 255, 255, 0.17) 50%,
rgba(255, 255, 255, 0) 100%
);
border: none;
color: #ffffff;
font-family: 'Muller';
font-weight: bold;
font-size: 2.2em;
letter-spacing: normal;
line-height: 71.88px;
text-align: center;
border: 2px solid #6aaf5c;
margin-right: 1.5rem;
}
.form__btn:hover {
background-image: none;
background-color: #ffffff;
border: 2px solid #6aaf5c;
color: #6aaf5c !important;
transition: .3s;
}
.form__btn__dev {
width: 268px;
height: 75px;
border-radius: 38px;
background-color: #ffffff;
border: 2px solid #6aaf5c;
font-family: 'Muller';
font-size: 2em;
font-weight: 300;
letter-spacing: normal;
line-height: 71.88px;
text-align: center;
}
.form__btn__dev a {
color: #6aaf5c !important;
}
/* .form__error {
font-size: 16px;
color: #b21;
margin-left: 45px;
} */
@media (max-width: 575.98px) {
.form__btn {
margin: 0 auto;
}
}
.partners__arrow {
margin-top: 360px;
}
@media (max-width: 575.98px) {
.partners__arrow {
display: none;
}
}
.partners__info {
background-color: #e1fccf;
margin-top: 70px;
max-width: 310px;
padding-top: 30px;
position: relative;
padding-bottom: 310px;
}
@media (max-width: 575.98px) {
.partners__info {
max-width: 380px;
}
}
@media (max-width: 375.98px) {
.partners__info {
max-width: 340px;
}
}
.partners__info__box {
display: flex;
align-items: center;
}
@media (max-width: 575.98px) {
.partners__info__box {
flex-direction: column;
justify-content: center;
}
}
.partners__info__box > img {
width: 165px;
height: 165px;
margin-left: -84px;
margin-right: 30px;
}
@media (max-width: 575.98px) {
.partners__info__box > img {
margin-left: 0px;
margin-right: 0px;
}
}
.partners__info__box > h3 {
font-family: 'GT Eesti Pro Display';
font-size: 2em;
font-weight: 100;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
text-align: left;
}
@media (max-width: 575.98px) {
.partners__info__box > h3 {
margin-top: 20px;
}
}
.partners__info__container {
display: flex;
position: relative;
}
.partners__info__img {
display: flex;
flex-direction: column;
text-align: center;
margin-top: 28px;
}
@media (max-width: 575.98px) {
.partners__info__img {
margin-left: -48px;
}
}
.partners__info__img > div > img {
margin-bottom: 100px;
}
.specialists {
font-family: 'GT Eesti Pro Display';
font-size: 1.8em;
font-weight: 100;
font-style: normal;
letter-spacing: normal;
line-height: 26.12px;
text-align: left;
transform: rotate(-90deg);
text-transform: uppercase;
}
/* .specialists {
margin-left: 26px;
} */
.info__list {
list-style: none;
margin-top: 110px;
position: absolute;
right: -120px;
}
@media (max-width: 575.98px) {
.info__list {
left: 34px;
}
}
.info__list__item {
color: #1f1f1f;
font-family: 'GT Eesti Pro Display';
font-size: 4em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 56.95px;
text-align: left;
text-decoration: underline;
text-transform: uppercase;
}
@media (max-width: 575.98px) {
.info__list__item {
font-size: 2.6em;
}
}
.img__text {
position: absolute;
right: -68px;
bottom: -84px;
}
@media (max-width: 575.98px) {
.img__text {
right: -10px;
}
}
.partners__footer__left {
display: flex;
align-items: center;
margin-bottom: 60px;
}
@media (max-width: 575.98px) {
.partners__footer__left {
margin-top: 120px;
}
}
.footer__left__sp {
padding: 0 100px 0 34px;
}
@media (max-width: 575.98px) {
.footer__left__sp {
padding: 0;
margin-left: 10px;
}
}
.partners__footer__left > div > span {
color: #18586e;
font-family: 'GT Eesti Pro Display';
font-size: 1.6em;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 16.81px;
text-align: left;
}
@media (max-width: 575.98px) {
.partners__footer__left > div > span {
font-size: 1.2em;
}
}
.partners__footer__icon {
text-align: end;
}
.partners__footer__icon > img {
margin-left: 20px;
}
@media (max-width: 575.98px) {
.partners__footer__icon > img {
margin-left: 10px;
}
}
.partners__footer__right {
display: flex;
flex-direction: column;
align-items: left;
}
@media (max-width: 575.98px) {
.partners__footer__right {
margin-bottom: 20px;
}
}
.phone {
color: #003b65;
font-family: 'CeraPro';
font-size: 2.1em;
letter-spacing: normal;
line-height: 25px;
text-align: left;
}
.workingHours {
color: #003b65;
font-family: 'CeraPro';
font-size: 1.2em;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: normal;
margin-left: 24px;
}
.auth__link {
display: block;
}
.auth__link a {
display: block;
width: 100%;
height: 100%;
color: #fff;
}
@media (max-width: 766px) {
.form__buttons {
flex-direction: column;
}
.form__btn {
margin: 0;
margin-bottom: 1.5rem;
}
}

View File

@ -0,0 +1,212 @@
.auth-developers {
overflow: hidden;
}
.auth-developers__background {
background-color: #f1f1f1;
position: relative;
}
.auth-developers__vector,
.auth-developers__vector-black {
position: absolute;
}
.auth-developers__vector {
top: -720px;
left: -320px;
}
.auth-developers__vector-black {
top: 460px;
right: -224px;
}
@media (max-width: 575.98px) {
.auth-developers__vector,
.auth-developers__vector-black {
display: none;
}
}
/* .form__error {
font-size: 16px;
color: #b21;
margin-left: 45px;
} */
.auth-developers__arrow {
margin-top: 360px;
}
@media (max-width: 575.98px) {
.auth-developers__arrow {
display: none;
}
}
.auth-developers__info {
background-color: #e1fccf;
margin-top: 70px;
max-width: 310px;
padding-top: 30px;
position: relative;
padding-bottom: 310px;
}
@media (max-width: 575.98px) {
.auth-developers__info {
max-width: 380px;
}
}
@media (max-width: 375.98px) {
.auth-developers__info {
max-width: 340px;
}
}
.auth-developers__info-box {
display: flex;
align-items: center;
}
@media (max-width: 575.98px) {
.auth-developers__info-box {
flex-direction: column;
justify-content: center;
}
}
.auth-developers__info-box > img {
width: 150px;
height: 150px;
margin-left: -84px;
margin-right: 30px;
}
@media (max-width: 575.98px) {
.auth-developers__info-box > img {
margin-left: 0px;
margin-right: 0px;
}
}
.auth-developers__info-box > h3 {
font-family: 'GT Eesti Pro Display';
font-size: 2em;
font-weight: 100;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
text-align: left;
}
@media (max-width: 575.98px) {
.auth-developers__info-box > h3 {
margin-top: 20px;
}
}
.auth-developers__info-container {
display: flex;
position: relative;
}
.auth-developers__info-img {
display: flex;
flex-direction: column;
text-align: center;
margin-top: 28px;
margin-left: -20px;
}
@media (max-width: 575.98px) {
.auth-developers__info-img {
margin-left: -48px;
}
}
.auth-developers__info-img > div > img {
margin-bottom: 100px;
}
.auth-developers__specialists {
font-family: 'GT Eesti Pro Display';
font-size: 1.8em;
font-weight: 100;
font-style: normal;
letter-spacing: normal;
line-height: 26.12px;
text-align: left;
transform: rotate(-90deg);
text-transform: uppercase;
}
.auth-developers__info-list {
list-style: none;
margin-top: 110px;
position: absolute;
left: 114px;
}
@media (max-width: 575.98px) {
.auth-developers__info-list {
left: 34px;
}
}
.auth-developers__info-item {
color: #1f1f1f;
font-family: 'GT Eesti Pro Display';
font-size: 4em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 56.95px;
text-align: left;
text-decoration: underline;
text-transform: uppercase;
margin-bottom: 34px;
}
@media (max-width: 575.98px) {
.auth-developers__info-item {
font-size: 2.6em;
margin-bottom: 14px;
}
}
.auth-developers__img-text {
position: absolute;
right: -68px;
bottom: -84px;
}
@media (max-width: 575.98px) {
.auth-developers__img-text {
right: -10px;
}
}
.auth-developers__auth-link {
display: block;
}
.auth-developers__auth-link a {
display: block;
width: 100%;
height: 100%;
color: #fff;
}
@media (max-width: 766px) {
.auth-developers__form-buttons {
flex-direction: column;
}
.auth-developers__form-btn {
margin: 0;
margin-bottom: 1.5rem;
}
}

View File

@ -0,0 +1,292 @@
.auth-partners {
overflow: hidden;
}
.auth-partners__background {
background-color: #f1f1f1;
position: relative;
}
.auth-partners__vector,
.auth-partners__vector-black {
position: absolute;
}
.auth-partners__vector {
top: -720px;
left: -320px;
}
.auth-partners__vector-black {
top: 460px;
right: -224px;
}
@media (max-width: 575.98px) {
.auth-partners__vector,
.auth-partners__vector-black {
display: none;
}
}
.auth-partners__arrow {
margin-top: 360px;
}
@media (max-width: 575.98px) {
.auth-partners__arrow {
display: none;
}
}
.auth-partners__info {
background-color: #e1fccf;
margin-top: 70px;
max-width: 310px;
padding-top: 30px;
position: relative;
padding-bottom: 310px;
}
@media (max-width: 575.98px) {
.auth-partners__info {
max-width: 380px;
}
}
@media (max-width: 375.98px) {
.auth-partners__info {
max-width: 340px;
}
}
.auth-partners__info-box {
display: flex;
align-items: center;
}
@media (max-width: 575.98px) {
.auth-partners__info-box {
flex-direction: column;
justify-content: center;
}
}
.auth-partners__info-box > img {
width: 165px;
height: 165px;
margin-left: -84px;
margin-right: 30px;
}
@media (max-width: 575.98px) {
.auth-partners__info-box > img {
margin-left: 0px;
margin-right: 0px;
}
}
.auth-partners__info-box > h3 {
font-family: 'GT Eesti Pro Display';
font-size: 2em;
font-weight: 100;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
text-align: left;
}
@media (max-width: 575.98px) {
.auth-partners__info-box > h3 {
margin-top: 20px;
}
}
.auth-partners__info-container {
display: flex;
position: relative;
}
.auth-partners__info-img {
display: flex;
flex-direction: column;
text-align: center;
margin-top: 28px;
}
@media (max-width: 575.98px) {
.auth-partners__info-img {
margin-left: -48px;
}
}
.auth-partners__info-img > div > img {
margin-bottom: 100px;
}
.auth-partners__specialists {
font-family: 'GT Eesti Pro Display';
font-size: 1.8em;
font-weight: 100;
font-style: normal;
letter-spacing: normal;
line-height: 26.12px;
text-align: left;
transform: rotate(-90deg);
text-transform: uppercase;
}
/* .specialists {
margin-left: 26px;
} */
.auth-partners__info-list {
list-style: none;
margin-top: 110px;
position: absolute;
right: -120px;
}
@media (max-width: 575.98px) {
.auth-partners__info-list {
left: 34px;
}
}
.auth-partners__info-item {
color: #1f1f1f;
font-family: 'GT Eesti Pro Display';
font-size: 4em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 56.95px;
text-align: left;
text-decoration: underline;
text-transform: uppercase;
}
@media (max-width: 575.98px) {
.auth-partners__info-item {
font-size: 2.6em;
}
}
.auth-partners__img-text {
position: absolute;
right: -68px;
bottom: -84px;
}
@media (max-width: 575.98px) {
.auth-partners__img-text {
right: -10px;
}
}
.auth-partners__footer--left {
display: flex;
align-items: center;
margin-bottom: 60px;
}
@media (max-width: 575.98px) {
.auth-partners__footer--left {
margin-top: 120px;
}
}
.auth-partners__footer__sp {
padding: 0 100px 0 34px;
}
@media (max-width: 575.98px) {
.auth-partners__footer__sp {
padding: 0;
margin-left: 10px;
}
}
.auth-partners__footer--left > div > span {
color: #18586e;
font-family: 'GT Eesti Pro Display';
font-size: 1.6em;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 16.81px;
text-align: left;
}
@media (max-width: 575.98px) {
.auth-partners__footer--left > div > span {
font-size: 1.2em;
}
}
.auth-partners__footer-icon {
text-align: end;
}
.auth-partners__footer-icon > img {
margin-left: 20px;
}
@media (max-width: 575.98px) {
.auth-partners__footer-icon > img {
margin-left: 10px;
}
}
.auth-partners__footer--right {
display: flex;
flex-direction: column;
align-items: left;
}
@media (max-width: 575.98px) {
.auth-partners__footer--right {
margin-bottom: 20px;
}
}
.auth-partners__phone {
color: #003b65;
font-family: 'CeraPro';
font-size: 2.1em;
letter-spacing: normal;
line-height: 25px;
text-align: left;
}
.auth-partners__working-hours {
color: #003b65;
font-family: 'CeraPro';
font-size: 1.2em;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: normal;
margin-left: 24px;
}
.auth-partners__auth-link {
display: block;
}
.auth-partners__auth-link a {
display: block;
width: 100%;
height: 100%;
color: #fff;
}
@media (max-width: 766px) {
.auth-partners__form-buttons {
flex-direction: column;
}
.auth-partners__form-btn {
margin: 0;
margin-bottom: 1.5rem;
}
}

View File

@ -0,0 +1,101 @@
import React, { useState } from 'react'
import { Link } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
import { auth } from '../../redux/outstaffingSlice'
import { loading } from '../../redux/loaderSlice'
import ellipse from '../../images/ellipse.png'
import { Loader } from '../Loader/Loader'
import { fetchAuth } from '../../server/server'
import { setRole } from '../../redux/roleSlice'
import { selectIsLoading } from '../../redux/loaderSlice'
import './authBox.scss'
import { withSwalInstance } from 'sweetalert2-react'
import swal from 'sweetalert2'
const SweetAlert = withSwalInstance(swal)
export const AuthBox = ({ title, roleChangeLink }) => {
const dispatch = useDispatch()
const isLoading = useSelector(selectIsLoading)
const [username, setUsername] = useState('')
const [password, setPassword] = useState('')
const [error, setError] = useState(null)
return (
<div className='auth-box'>
<h2 className='auth-box__header'>
Войти в <span>систему</span>
</h2>
<div className='auth-box__title'>
<img src={ellipse} alt='' />
<span>{title}</span>
</div>
<form className='auth-box__form'>
<label htmlFor='login'>Ваш логин:</label>
<input
id='login'
type='text'
placeholder='Логин'
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
<label htmlFor='password'>Пароль:</label>
<input
id='password'
type='password'
placeholder='Пароль'
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
{error && (
<div className='auth-box__form-error'>
<SweetAlert
show={!!error}
title='Ошибка'
text={error}
onConfirm={() => setError(null)}
/>
</div>
)}
<div className='auth-box__form-buttons'>
<button
className='auth-box__form-btn'
onClick={
!isLoading
? (e) => {
e.preventDefault()
dispatch(loading(true))
fetchAuth({
username,
password,
dispatch: () => {
dispatch(auth(true))
dispatch(loading(false))
dispatch(setRole('ROLE_PARTNER'))
},
catchError: () => {
setError('Некорректные данные для входа')
dispatch(loading(false))
}
})
}
: () => {}
}
>
{isLoading ? <Loader /> : 'Войти'}
</button>
<button className='auth-box__form-btn--role auth-box__auth-link'>
<Link to={roleChangeLink}>Для разработчиков</Link>
</button>
</div>
</form>
</div>
)
}

View File

@ -0,0 +1,196 @@
.auth-box {
display: flex;
flex-direction: column;
align-self: center;
margin-bottom: 194px;
&__header {
font-family: "GT Eesti Pro Display";
font-size: 5.3em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 77.81px;
text-align: left;
margin-top: 164px;
span {
color: #52b709;
letter-spacing: .56px;
line-height: normal;
}
}
&__sign-in {
font-family: 'GT Eesti Pro Display';
font-size: 5.3em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 77.81px;
text-align: left;
margin-top: 164px;
span {
font-family: 'GT Eesti Pro Display';
color: #52b709;
font-style: normal;
letter-spacing: 0.56px;
line-height: normal;
}
}
&__title {
display: flex;
align-items: center;
justify-content: center;
margin-top: 15px;
margin-bottom: 65px;
span {
color: #18586e;
font-family: 'GT Eesti Pro Display';
font-size: 1.6em;
font-weight: 500;
font-style: normal;
letter-spacing: normal;
line-height: 16.81px;
text-align: left;
margin-left: 10px;
}
img {
width: 6px;
height: 6px;
margin-left: 120px;
}
}
&__form {
display: flex;
flex-direction: column;
label {
color: #48802d;
font-family: 'GT Eesti Pro Display';
font-size: 2.4em;
font-weight: 500;
font-style: normal;
letter-spacing: normal;
line-height: 16.81px;
text-align: left;
margin-bottom: 20px;
margin-left: 45px;
}
input {
max-width: 366px;
height: 75px;
box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
border-radius: 37px;
border: 1px solid #c4c4c4;
background-color: #ffffff;
margin-bottom: 60px;
color: #a6a6a6;
font-family: 'GT Eesti Pro Display';
font-size: 2.2em;
font-weight: 300;
font-style: normal;
letter-spacing: normal;
line-height: normal;
text-align: left;
padding-left: 45px;
outline: none;
}
&-buttons {
display: flex;
justify-content: start;
align-items: center;
}
&-btn {
width: 268px;
height: 75px;
box-shadow: 6px 5px 20px rgba(82, 151, 34, 0.21);
border-radius: 38px;
background-color: #ffffff;
background-image: linear-gradient(to top, #6aaf5c 0%, #52b709 100%),
linear-gradient(
36deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.16) 47%,
rgba(255, 255, 255, 0.17) 50%,
rgba(255, 255, 255, 0) 100%
);
border: none;
color: #ffffff;
font-family: 'Muller';
font-weight: 500;
font-size: 2.2em;
font-weight: bold;
letter-spacing: normal;
line-height: 71.88px;
text-align: center;
border: 2px solid #6aaf5c;
margin-right: 1.5rem;
&:hover {
background-image: none;
background-color: #ffffff;
border: 2px solid #6aaf5c;
color: #6aaf5c !important;
transition: 0.3s;
.loader * {
fill: #6aaf5c;
}
}
&--role {
width: 268px;
height: 75px;
border-radius: 38px;
background-color: #ffffff;
border: 2px solid #6aaf5c;
font-family: 'Muller';
font-size: 2em;
font-weight: 300;
letter-spacing: normal;
line-height: 71.88px;
text-align: center;
border: 2px solid #6aaf5c;
margin-right: 1.5rem;
a {
color: #6aaf5c !important;
}
}
.loader * {
fill: #fff !important;
}
}
}
}
@media (max-width: 575.98px) {
.auth-box {
margin-bottom: 44px;
&__sign-in {
text-align: center;
margin-top: 44px;
}
&__form-buttons {
margin: 0 auto;
flex-direction: column;
&>* {
margin-bottom: 1.5rem;
}
}
}
}

View File

@ -1,61 +1,92 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react'
import { useSelector } from 'react-redux'; import { useDispatch, useSelector } from 'react-redux'
import { selectCurrentCandidate } from '../../redux/outstaffingSlice'; import { selectCurrentCandidate, auth } from '../../redux/outstaffingSlice'
import { Link } from 'react-router-dom'; import { Link, useHistory, useParams } from 'react-router-dom'
import style from './Calendar.module.css'; import calendarMale from '../../images/medium_male.png'
import calendarMale from '../../images/medium_male.png'; import rectangle from '../../images/rectangle_secondPage.png'
import rectangle from '../../images/rectangle_secondPage.png'; import CalendarComponent from './CalendarComponent'
import CalendarComponent from './CalendarComponent'; import { currentMonth } from './calendarHelper'
import { currentMonth } from './calendarHelper'; import { Footer } from '../Footer/Footer'
import { Footer } from '../Footer/Footer';
import { fetchReportList } from '../../server/server'
import { getRole } from '../../redux/roleSlice'
import './calendar.scss'
const getDateParamString = ({ paramName, value }) => {
return value ? `${paramName}=${value}` : ''
}
const Calendar = () => { const Calendar = () => {
const candidateForCalendar = useSelector(selectCurrentCandidate); const dispatch = useDispatch()
const candidateForCalendar = useSelector(selectCurrentCandidate)
const role = useSelector(getRole)
const { userId } = useParams()
const [month, setMonth] = useState('')
const [fromDate, setFromDate] = useState(null)
const [toDate, setToDate] = useState(null)
const [month, setMonth] = useState(''); const history = useHistory()
useEffect(() => { useEffect(() => {
setMonth(currentMonth); fetchReportList({
}, [month]); link: `${
process.env.REACT_APP_API_URL
}/api/reports/index?user_id=${userId}${getDateParamString({
paramName: 'fromDate',
value: fromDate
})}${getDateParamString({
paramName: 'toDate',
value: toDate
})}`,
history,
role,
logout: () => dispatch(auth(false))
})
}, [])
const { name, skillsName, photo } = candidateForCalendar; useEffect(() => {
setMonth(currentMonth)
}, [month])
const abbreviatedName = name && name.substring(0, name.lastIndexOf(' ')); const { name, skillsName, photo } = candidateForCalendar
const abbreviatedName = name && name.substring(0, name.lastIndexOf(' '))
return ( return (
<section className={style.calendar}> <section className='calendar'>
<div className="row"> <div className='row'>
<h2 className={style.calendar__title}> <h2 className='calendar__profile'>
Добрый день, <span>Александр !</span> Добрый день, <span>Александр !</span>
</h2> </h2>
<div className="col-12 col-xl-12 d-flex justify-content-between align-items-center flex-column flex-sm-row"> <div className='col-12 col-xl-12 d-flex justify-content-between align-items-center flex-column flex-sm-row'>
<div className={style.calendarHeader__info}> <div className='calendar__info'>
<img className={style.calendarHeader__info__img} src={photo} alt="img" /> <img className='calendar__info-img' src={photo} alt='img' />
<h3 className={style.calendarHeader__info__name}>{abbreviatedName}</h3> <h3 className='calendar__info-name'>{abbreviatedName}</h3>
</div> </div>
<div className={style.calendarHeader__title}> <div className='calendar__title'>
<h3 className={style.calendarHeader__title__text}>{skillsName} разработчик</h3> <h3 className='calendar__title-text'>{skillsName} разработчик</h3>
<img className={style.calendarHeader__title__img} src={rectangle} alt="img" /> <img className='calendar__title-img' src={rectangle} alt='img' />
</div> </div>
<div> <div>
<Link to="/report"> <Link to='/report'>
<button className={style.calendarHeader__btn}>Заполнить отчет за день</button> <button className='calendar__btn'>Заполнить отчет за день</button>
</Link> </Link>
</div>
</div> </div>
</div> </div>
</div>
<div className="row"> <div className='row'>
<div className="col-12 col-xl-12"> <div className='col-12 col-xl-12'>
<CalendarComponent /> <CalendarComponent />
<p className={style.calendarFooter__text}> <p className='calendar__hours'>
{month} : <span> 60 часов </span> {month} : <span> 60 часов </span>
</p> </p>
</div>
</div> </div>
<Footer /> </div>
<Footer />
</section> </section>
); )
}; }
export default Calendar; export default Calendar

View File

@ -1,299 +0,0 @@
.calendar {
margin-bottom: 40px;
}
.calendar__title {
color: #282828;
font-family: 'GT Eesti Pro Display';
font-size: 3.4em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 48.74px;
text-align: left;
margin-top: 80px;
margin-bottom: 60px;
}
@media (max-width: 575.98px) {
.calendar__title {
font-size: 5em;
text-align: center;
margin: 60px 0 40px 0;
}
}
@media (max-width: 560.98px) {
.calendar__title {
font-size: 4.8em;
}
}
@media (max-width: 540.98px) {
.calendar__title {
font-size: 4.6em;
}
}
@media (max-width: 520.98px) {
.calendar__title {
font-size: 4.4em;
}
}
@media (max-width: 486.98px) {
.calendar__title {
font-size: 4.2em;
}
}
@media (max-width: 466.98px) {
.calendar__title {
font-size: 4em;
}
}
@media (max-width: 446.98px) {
.calendar__title {
font-size: 3.8em;
}
}
@media (max-width: 425.98px) {
.calendar__title {
font-size: 3.6em;
}
}
.calendar__title > span {
color: #52b709;
font-style: normal;
letter-spacing: 0.56px;
line-height: normal;
}
.calendarHeader__info {
background-color: #f9f9f9;
display: flex;
position: relative;
width: 24%;
height: 112px;
}
@media (max-width: 575.98px) {
.calendarHeader__info {
width: 74%;
height: 94px;
margin-top: 40px;
margin-bottom: 40px;
}
}
@media (max-width: 375.98px) {
.calendarHeader__info {
width: 84%;
height: 94px;
margin-top: 20px;
}
}
.calendarHeader__info__img {
position: absolute;
width: 132px;
height: 132px;
left: -40px;
top: -10px;
}
@media (max-width: 575.98px) {
.calendarHeader__info__img {
position: absolute;
width: 110px;
height: 110px;
left: 0;
}
}
.calendarHeader__info__name {
font-family: 'GT Eesti Pro Display';
font-size: 2em;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 30px;
text-align: left;
position: absolute;
top: 50%;
left: 68%;
transform: translate(-50%, -50%);
}
@media (max-width: 575.98px) {
.calendarHeader__title {
margin-left: 100px;
}
}
@media (max-width: 505.98px) {
.calendarHeader__title {
margin-left: 80px;
}
}
@media (max-width: 455.98px) {
.calendarHeader__title {
margin-left: 60px;
}
}
@media (max-width: 375.98px) {
.calendarHeader__title {
margin-left: 40px;
}
}
@media (max-width: 348.98px) {
.calendarHeader__title {
margin-left: 0;
}
}
.calendarHeader__title__text {
font-family: 'GT Eesti Pro Display';
font-size: 2.7em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
text-align: left;
}
@media (max-width: 575.98px) {
.calendarHeader__title__text {
font-size: 4.4em;
}
}
@media (max-width: 564.98px) {
.calendarHeader__title__text {
font-size: 4.2em;
}
}
@media (max-width: 544.98px) {
.calendarHeader__title__text {
font-size: 4em;
}
}
@media (max-width: 524.98px) {
.calendarHeader__title__text {
font-size: 3.6em;
}
}
@media (max-width: 504.98px) {
.calendarHeader__title__text {
font-size: 3.6em;
}
}
@media (max-width: 484.98px) {
.calendarHeader__title__text {
font-size: 3.4em;
}
}
@media (max-width: 464.98px) {
.calendarHeader__title__text {
font-size: 3.2em;
}
}
@media (max-width: 444.98px) {
.calendarHeader__title__text {
font-size: 3em;
}
}
@media (max-width: 375.98px) {
.calendarHeader__title__text {
font-size: 2.7em;
}
}
@media (max-width: 325.98px) {
.calendarHeader__title__text {
font-size: 2.7em;
}
}
@media (max-width: 575.98px) {
.calendarHeader__title__img {
width: 60%;
margin: 30px 0;
}
}
@media (max-width: 525.98px) {
.calendarHeader__title__img {
left: 15%;
}
}
@media (max-width: 414.98px) {
.calendarHeader__title__img {
left: 10%;
}
}
@media (max-width: 375.98px) {
.calendarHeader__title__img {
left: 5%;
}
}
.calendarHeader__btn {
width: 280px;
height: 62px;
box-shadow: 6px 5px 20px rgba(82, 151, 34, 0.21);
border-radius: 31px;
background-color: #ffffff;
background-image: linear-gradient(to top, #6aaf5c 0%, #52b709 100%),
linear-gradient(
36deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.16) 47%,
rgba(255, 255, 255, 0.17) 50%,
rgba(255, 255, 255, 0) 100%
);
border: none;
color: #ffffff;
font-family: 'Muller';
font-size: 1.6em;
letter-spacing: normal;
text-align: center;
}
.calendarFooter__text {
font-family: 'GT Eesti Pro Display';
font-size: 2.2em;
font-weight: 600;
font-style: normal;
letter-spacing: normal;
line-height: 30px;
text-align: left;
margin-left: 68px;
}
.calendarFooter__text > span {
font-family: 'GT Eesti Pro Display';
font-weight: 100;
font-style: normal;
letter-spacing: normal;
line-height: normal;
}
.calendar footer {
margin-top: 2rem !important;
}

View File

@ -1,69 +1,70 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react'
import style from './CalendarComponent.module.css'; import ellipse from '../../images/ellipse.png'
import ellipse from '../../images/ellipse.png'; import rectangle from '../../images/rectangle__calendar.png'
import rectangle from '../../images/rectangle__calendar.png'; import calendarIcon from '../../images/calendar_icon.png'
import calendarIcon from '../../images/calendar_icon.png'; import moment from 'moment'
import moment from 'moment'; import 'moment/locale/ru'
import 'moment/locale/ru'; import { calendarHelper, currentMonthAndDay } from './calendarHelper'
import { calendarHelper, currentMonthAndDay } from './calendarHelper';
import './calendarComponent.scss'
const CalendarComponent = () => { const CalendarComponent = () => {
const [value, setValue] = useState(moment()); const [value, setValue] = useState(moment())
const [calendar, setCalendar] = useState([]); const [calendar, setCalendar] = useState([])
useEffect(() => { useEffect(() => {
setCalendar(calendarHelper(value)); setCalendar(calendarHelper(value))
}, [value]); }, [value])
function beforeToday(day) { function beforeToday(day) {
return day.isBefore(new Date(), 'day'); return day.isBefore(new Date(), 'day')
} }
function isToday(day) { function isToday(day) {
return day.isSame(new Date(), 'day'); return day.isSame(new Date(), 'day')
} }
function dayStyles(day) { function dayStyles(day) {
if (beforeToday(day)) return `${style.before}`; if (beforeToday(day)) return `before`
if (isToday(day)) return `${style.today}`; if (isToday(day)) return `today`
if (day.day() === 6 || day.day() === 0) return `${style.selected}`; if (day.day() === 6 || day.day() === 0) return `selected`
return ''; return ''
} }
function prevMonth() { function prevMonth() {
return value.clone().subtract(1, 'month'); return value.clone().subtract(1, 'month')
} }
function nextMonth() { function nextMonth() {
return value.clone().subtract(2, 'month'); return value.clone().subtract(2, 'month')
} }
const prevMonthFirst = () => { const prevMonthFirst = () => {
return moment().subtract(1, 'month').format('MMMM'); return moment().subtract(1, 'month').format('MMMM')
}; }
const prevMonthSecond = () => { const prevMonthSecond = () => {
return moment().subtract(2, 'month').format('MMMM'); return moment().subtract(2, 'month').format('MMMM')
}; }
return ( return (
<div className={style.CalendarComponent}> <div className='calendar-component'>
<div className={style.CalendarComponent__header}> <div className='calendar-component__header'>
<h3>Мои отчеты</h3> <h3>Мои отчеты</h3>
<div className={style.CalendarComponent__header__box}> <div className='calendar-component__header-box'>
<img src={ellipse} alt="" /> <img src={ellipse} alt='' />
<span onClick={() => setValue(prevMonth())}>{prevMonthFirst()}</span> <span onClick={() => setValue(prevMonth())}>{prevMonthFirst()}</span>
</div> </div>
<div className={style.CalendarComponent__header__box}> <div className='calendar-component__header-box'>
<img src={ellipse} alt="" /> <img src={ellipse} alt='' />
<span onClick={() => setValue(nextMonth())}>{prevMonthSecond()}</span> <span onClick={() => setValue(nextMonth())}>{prevMonthSecond()}</span>
</div> </div>
</div> </div>
<div className={style.CalendarComponent__rectangle}> <div className='calendar-component__rectangle'>
<img src={rectangle} alt="" /> <img src={rectangle} alt='' />
</div> </div>
<div className={style.CalendarComponent__body}> <div className='calendar-component__body'>
<div> <div>
<p>Пн</p> <p>Пн</p>
<p>Вт</p> <p>Вт</p>
@ -74,7 +75,7 @@ const CalendarComponent = () => {
<p>Вс</p> <p>Вс</p>
</div> </div>
<div className={style.CalendarComponent__form}> <div className='calendar-component__form'>
{calendar.map((week) => {calendar.map((week) =>
week.map((day) => ( week.map((day) => (
<button <button
@ -82,9 +83,9 @@ const CalendarComponent = () => {
key={day} key={day}
className={dayStyles(day)} className={dayStyles(day)}
name={day.format('dddd')} name={day.format('dddd')}
id="btn" id='btn'
> >
<img className={style.calendarIcon} src={calendarIcon} alt="" /> <img className={'calendar__icon'} src={calendarIcon} alt='' />
{currentMonthAndDay(day)} {currentMonthAndDay(day)}
</button> </button>
)) ))
@ -92,7 +93,7 @@ const CalendarComponent = () => {
</div> </div>
</div> </div>
</div> </div>
); )
}; }
export default CalendarComponent; export default CalendarComponent

View File

@ -1,244 +0,0 @@
.CalendarComponent {
position: relative;
margin-top: 80px;
margin-bottom: 60px;
background-color: #f9f9f9;
padding-left: 68px;
padding-right: 54px;
padding-top: 48px;
padding-bottom: 94px;
}
@media (max-width: 575.98px) {
.CalendarComponent {
margin-bottom: 40px;
padding: 28px 0 48px 0;
}
}
.CalendarComponent__header {
display: flex;
}
.CalendarComponent__header > h3 {
font-family: 'GT Eesti Pro Display';
font-size: 2.5em;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 30px;
text-align: left;
}
@media (max-width: 575.98px) {
.CalendarComponent__header > h3 {
position: absolute;
top: -10%;
left: 25%;
}
}
.CalendarComponent__header__box {
display: flex;
align-items: center;
margin-left: 40px;
}
@media (max-width: 575.98px) {
.CalendarComponent__header__box {
margin-left: 20px;
}
}
.CalendarComponent__header__box > img {
width: 6px;
height: 6px;
}
.CalendarComponent__header__box > span {
color: #18586e;
font-family: 'GT Eesti Pro Display';
font-size: 1.6em;
font-weight: 500;
font-style: normal;
letter-spacing: normal;
line-height: 16.81px;
text-align: left;
margin-left: 10px;
cursor: pointer;
}
.CalendarComponent__rectangle {
margin: 36px 0;
}
@media (max-width: 575.98px) {
.CalendarComponent__rectangle {
margin: 24px 0;
}
}
.CalendarComponent__rectangle > img {
width: 100%;
}
.CalendarComponent__body > div {
display: flex;
justify-content: space-around;
}
.CalendarComponent__body > div > p {
color: #398208;
font-family: 'GT Eesti Pro Display';
font-size: 25px;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 30px;
text-align: left;
}
.CalendarComponent__form {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.CalendarComponent__form > button {
width: 125px;
height: 42px;
box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
border-radius: 5px;
border: 1px solid #c4c4c4;
background-color: #ffffff;
margin-top: 20px;
font-family: 'GT Eesti Pro Display';
font-size: 1.2em;
font-weight: 100;
font-style: normal;
letter-spacing: normal;
line-height: normal;
text-align: center;
}
@media (max-width: 575.98px) {
.CalendarComponent__form > button {
width: 72px;
height: 40px;
}
}
@media (max-width: 560.98px) {
.CalendarComponent__form > button {
width: 70px;
height: 40px;
}
}
@media (max-width: 540.98px) {
.CalendarComponent__form > button {
width: 68px;
height: 40px;
}
}
@media (max-width: 520.98px) {
.CalendarComponent__form > button {
width: 66px;
height: 40px;
}
}
@media (max-width: 500.98px) {
.CalendarComponent__form > button {
width: 64px;
height: 40px;
}
}
@media (max-width: 480.98px) {
.CalendarComponent__form > button {
width: 60px;
height: 40px;
}
}
@media (max-width: 460.98px) {
.CalendarComponent__form > button {
width: 56px;
height: 40px;
}
}
@media (max-width: 440.98px) {
.CalendarComponent__form > button {
width: 52px;
height: 40px;
}
}
@media (max-width: 428.98px) {
.CalendarComponent__form > button {
width: 50px;
height: 40px;
}
}
@media (max-width: 414.98px) {
.CalendarComponent__form > button {
width: 49px;
height: 40px;
}
}
@media (max-width: 395.98px) {
.CalendarComponent__form > button {
width: 46px;
height: 40px;
}
}
@media (max-width: 350.98px) {
.CalendarComponent__form > button {
width: 44px;
height: 40px;
}
}
@media (max-width: 349.98px) {
.CalendarComponent__form > button {
width: 42px;
height: 40px;
}
}
@media (max-width: 346.98px) {
.CalendarComponent__form > button {
width: 40px;
height: 40px;
}
}
.calendarIcon {
margin-right: 10px;
margin-top: -4px;
}
@media (max-width: 575.98px) {
.calendarIcon {
display: none;
}
}
.before {
background-color: #f0f7e0 !important;
}
.today {
font-weight: bold !important;
border: 1px solid #398208 !important;
}
.selected {
background-color: #f9f9c3 !important;
}

View File

@ -0,0 +1,301 @@
.calendar {
margin-bottom: 40px;
&__profile {
color: #282828;
font-family: 'GT Eesti Pro Display';
font-size: 3.4em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 48.74px;
text-align: left;
margin-top: 80px;
margin-bottom: 60px;
span {
color: #52b709;
font-style: normal;
letter-spacing: 0.56px;
line-height: normal;
}
}
&__info {
background-color: #f9f9f9;
display: flex;
position: relative;
width: 24%;
height: 112px;
&-name {
font-family: 'GT Eesti Pro Display';
font-size: 2em;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 30px;
text-align: left;
position: absolute;
top: 50%;
left: 68%;
transform: translate(-50%, -50%);
}
&-img {
position: absolute;
width: 132px;
height: 132px;
left: -40px;
top: -10px;
}
}
&__title {
&-text {
font-family: 'GT Eesti Pro Display';
font-size: 2.7em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
text-align: left;
}
}
&__btn {
width: 280px;
height: 62px;
box-shadow: 6px 5px 20px rgba(82, 151, 34, 0.21);
border-radius: 31px;
background-color: #ffffff;
background-image: linear-gradient(to top, #6aaf5c 0%, #52b709 100%),
linear-gradient(
36deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.16) 47%,
rgba(255, 255, 255, 0.17) 50%,
rgba(255, 255, 255, 0) 100%
);
border: none;
color: #ffffff;
font-family: 'Muller';
font-size: 1.6em;
letter-spacing: normal;
text-align: center;
}
&__hours {
font-family: 'GT Eesti Pro Display';
font-size: 2.2em;
font-weight: 600;
font-style: normal;
letter-spacing: normal;
line-height: 30px;
text-align: left;
margin-left: 68px;
span {
font-family: 'GT Eesti Pro Display';
font-weight: 100;
font-style: normal;
letter-spacing: normal;
line-height: normal;
}
}
footer {
margin-top: 2rem !important;
}
}
@media (max-width: 575.98px) {
.calendar__profile {
font-size: 5em;
text-align: center;
margin: 60px 0 40px 0;
}
}
@media (max-width: 560.98px) {
.calendar__profile {
font-size: 4.8em;
}
}
@media (max-width: 540.98px) {
.calendar__profile {
font-size: 4.6em;
}
}
@media (max-width: 520.98px) {
.calendar__profile {
font-size: 4.4em;
}
}
@media (max-width: 486.98px) {
.calendar__profile {
font-size: 4.2em;
}
}
@media (max-width: 466.98px) {
.calendar__profile {
font-size: 4em;
}
}
@media (max-width: 446.98px) {
.calendar__profile {
font-size: 3.8em;
}
}
@media (max-width: 425.98px) {
.calendar__profile {
font-size: 3.6em;
}
}
@media (max-width: 575.98px) {
.calendar__info {
width: 74%;
height: 94px;
margin-top: 40px;
margin-bottom: 40px;
}
}
@media (max-width: 375.98px) {
.calendar__info {
width: 84%;
height: 94px;
margin-top: 20px;
}
}
@media (max-width: 575.98px) {
.calendar__info-img {
position: absolute;
width: 110px;
height: 110px;
left: 0;
}
}
@media (max-width: 575.98px) {
.calendar__title {
margin-left: 100px;
}
}
@media (max-width: 505.98px) {
.calendarHeader__title {
margin-left: 80px;
}
}
@media (max-width: 455.98px) {
.calendar__title {
margin-left: 60px;
}
}
@media (max-width: 375.98px) {
.calendar__title {
margin-left: 40px;
}
}
@media (max-width: 348.98px) {
.calendar__title {
margin-left: 0;
}
}
@media (max-width: 575.98px) {
.calendar__title-text {
font-size: 4.4em;
}
}
@media (max-width: 564.98px) {
.calendar__title-text {
font-size: 4.2em;
}
}
@media (max-width: 544.98px) {
.calendar__title-text {
font-size: 4em;
}
}
@media (max-width: 524.98px) {
.calendar__title-text {
font-size: 3.6em;
}
}
@media (max-width: 504.98px) {
.calendar__title-text {
font-size: 3.6em;
}
}
@media (max-width: 484.98px) {
.calendar__title-text {
font-size: 3.4em;
}
}
@media (max-width: 464.98px) {
.calendar__title-text {
font-size: 3.2em;
}
}
@media (max-width: 444.98px) {
.calendar__title-text {
font-size: 3em;
}
}
@media (max-width: 375.98px) {
.calendar__title-text {
font-size: 2.7em;
}
}
@media (max-width: 325.98px) {
.calendar__title-text {
font-size: 2.7em;
}
}
@media (max-width: 575.98px) {
.calendar__title-img {
width: 60%;
margin: 30px 0;
}
}
@media (max-width: 525.98px) {
.calendar__title-img {
left: 15%;
}
}
@media (max-width: 414.98px) {
.calendar__title-img {
left: 10%;
}
}
@media (max-width: 375.98px) {
.calendar__title-img {
left: 5%;
}
}

View File

@ -0,0 +1,263 @@
.calendar-component {
position: relative;
margin-top: 80px;
margin-bottom: 60px;
background-color: #f9f9f9;
padding-left: 68px;
padding-right: 54px;
padding-top: 48px;
padding-bottom: 94px;
&__header {
display: flex;
h3 {
font-family: 'GT Eesti Pro Display';
font-size: 2.5em;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 30px;
text-align: left;
}
&-box {
display: flex;
align-items: center;
margin-left: 40px;
img {
width: 6px;
height: 6px;
}
span {
color: #18586e;
font-family: 'GT Eesti Pro Display';
font-size: 1.6em;
font-weight: 500;
font-style: normal;
letter-spacing: normal;
line-height: 16.81px;
text-align: left;
margin-left: 10px;
cursor: pointer;
}
}
}
&__rectangle {
margin: 36px 0;
img {
width: 100%;
}
}
&__body {
div {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
p {
color: #398208;
font-family: 'GT Eesti Pro Display';
font-size: 25px;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 30px;
text-align: center;
}
}
}
&__form {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
button {
margin: 0 auto;
width: 125px;
height: 42px;
box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
border-radius: 5px;
border: 1px solid #c4c4c4;
background-color: #ffffff;
margin-top: 20px;
font-family: 'GT Eesti Pro Display';
font-size: 1.2em;
font-weight: 100;
font-style: normal;
letter-spacing: normal;
line-height: normal;
text-align: center;
}
}
}
@media (max-width: 1200px) {
.calendar-component {
&__form {
button {
width: 100px;
height: 40px;
}
}
}
}
@media (max-width: 968px) {
.calendar-component {
margin-bottom: 40px;
padding: 28px 0 48px 0;
&__header {
h3 {
position: absolute;
top: -10%;
left: 25%;
}
&-box {
margin-left: 20px;
}
}
&__rectangle {
margin: 24px 0;
}
&__form {
button {
width: 72px;
height: 40px;
img {
display: none;
}
}
}
}
}
@media (max-width: 768px) {
.calendar-component__form > button {
width: 70px;
height: 40px;
img {
display: none;
}
}
}
@media (max-width: 540.98px) {
.calendar-component__form > button {
width: 68px;
height: 40px;
}
}
@media (max-width: 520.98px) {
.calendar-component__form > button {
width: 66px;
height: 40px;
}
}
@media (max-width: 500.98px) {
.calendar-component__form > button {
width: 64px;
height: 40px;
}
}
@media (max-width: 480.98px) {
.calendar-component__form > button {
width: 60px;
height: 40px;
}
}
@media (max-width: 460.98px) {
.calendar-component__form > button {
width: 56px;
height: 40px;
}
}
@media (max-width: 440.98px) {
.calendar-component__form > button {
width: 52px;
height: 40px;
}
}
@media (max-width: 428.98px) {
.calendar-component__form > button {
width: 50px;
height: 40px;
}
}
@media (max-width: 414.98px) {
.calendar-component__form > button {
width: 49px;
height: 40px;
}
}
@media (max-width: 395.98px) {
.calendar-component__form > button {
width: 46px;
height: 40px;
}
}
@media (max-width: 350.98px) {
.calendar-component__form > button {
width: 44px;
height: 40px;
}
}
@media (max-width: 349.98px) {
.calendar-component__form > button {
width: 42px;
height: 40px;
}
}
@media (max-width: 346.98px) {
.calendar-component__form > button {
width: 40px;
height: 40px;
}
}
.calendar__icon {
margin-right: 10px;
margin-top: -4px;
}
@media (max-width: 575.98px) {
.calendar__icon {
display: none;
}
}
.before {
background-color: #f0f7e0 !important;
}
.today {
font-weight: bold !important;
border: 1px solid #398208 !important;
}
.selected {
background-color: #f9f9c3 !important;
}

View File

@ -1,140 +1,153 @@
import React, { useEffect } from 'react'; import React, { useEffect } from 'react'
import { useHistory, useParams, Link } from 'react-router-dom'; import { useHistory, useParams, Link } from 'react-router-dom'
import { useSelector, useDispatch } from 'react-redux'; import { useSelector, useDispatch } from 'react-redux'
import { currentCandidate, selectCurrentCandidate, auth } from '../../redux/outstaffingSlice'; import {
import arrow from '../../images/right-arrow.png'; currentCandidate,
import rectangle from '../../images/rectangle_secondPage.png'; selectCurrentCandidate,
import Sidebar from '../Sidebar/Sidebar'; auth
import SectionSkills from './SectionSkills'; } from '../../redux/outstaffingSlice'
import front from '../../images/front_end.png'; import arrow from '../../images/right-arrow.png'
import back from '../../images/back_end.png'; import rectangle from '../../images/rectangle_secondPage.png'
import design from '../../images/design.png'; import Sidebar from '../CandidateSidebar/CandidateSidebar'
import { fetchItemsForId } from '../../server/server'; import SkillSection from '../SkillSection/SkillSection'
import { Footer } from '../Footer/Footer'; import front from '../../images/front_end.png'
import back from '../../images/back_end.png'
import design from '../../images/design.png'
import { fetchGet } from '../../server/server'
import { Footer } from '../Footer/Footer'
import './candidate.css'; import './candidate.scss'
import { getRole } from '../../redux/roleSlice'; import { getRole } from '../../redux/roleSlice'
const Candidate = () => { const Candidate = () => {
const history = useHistory(); const history = useHistory()
const { id: candidateId } = useParams(); const { id: candidateId } = useParams()
const dispatch = useDispatch(); const dispatch = useDispatch()
const role = useSelector(getRole); const role = useSelector(getRole)
useEffect(() => { useEffect(() => {
window.scrollTo(0, 0) window.scrollTo(0, 0)
}, []) }, [])
useEffect(() => { useEffect(() => {
fetchItemsForId({ link: `${process.env.REACT_APP_API_URL}/api/profile/`, index:Number(candidateId), history, role, logout: dispatch(auth(false)) }).then((el) => fetchGet({
dispatch(currentCandidate(el)) link: `${process.env.REACT_APP_API_URL}/api/profile/`,
); params: Number(candidateId),
}, [dispatch, candidateId]); history,
role,
logout: () => dispatch(auth(false))
}).then((el) => dispatch(currentCandidate(el)))
}, [dispatch, candidateId])
const currentCandidateObj = useSelector(selectCurrentCandidate); const currentCandidateObj = useSelector(selectCurrentCandidate)
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
};
function createMarkup(text) {
return { __html: text.split('</p>').join('</p>') };
} }
const { header, img, classes } = setStyles(); function createMarkup(text) {
return { __html: text.split('</p>').join('</p>') }
}
const { header, img, classes } = setStyles()
return ( return (
<div className='candidate'> <div className='candidate'>
<div className="row"> <div className='row'>
<div className="col-12"> <div className='col-12'>
<div className='candidate__title'> <div className='candidate__title'>
<h2> <h2>
<span>Аутстаффинг</span> it-персонала <span>Аутстаффинг</span> it-персонала
</h2> </h2>
</div>
</div>
</div>
<div className='row'>
<div className='col-12'>
<div className='candidate__header'>
<div className='candidate__arrow' onClick={() => history.push('/')}>
<div className='candidate__arrow-img'>
<img src={arrow} alt='' />
</div>
<div className='candidate__arrow-sp'>
<span>Вернуться к списку</span>
</div>
</div>
<div className='candidate__icon'>
<h3>{header}</h3>
<img className={classes} src={img} alt='' />
</div> </div>
</div> </div>
</div> </div>
</div>
<div className="row"> <div className='candidate__main'>
<div className="col-12"> <div className='row'>
<div className='candidate__header'> <div className='col-12 col-xl-4'>
<div className='arrow' onClick={() => history.push('/')}> <Sidebar candidate={currentCandidateObj} position />
<div className='arrow__img'>
<img src={arrow} alt="" />
</div>
<div className='arrow__sp'>
<span>Вернуться к списку</span>
</div>
</div>
<div className='icon'>
<h3>{header}</h3>
<img className={classes} src={img} alt="" />
</div>
</div>
</div> </div>
</div> <div className='col-12 col-xl-8'>
<div className='candidate__main'> <div className='candidate__main-description'>
<div className="row"> <img src={rectangle} alt='' />
<div className="col-12 col-xl-4"> <p className='candidate__hashtag'># Описание опыта</p>
<Sidebar candidate={currentCandidateObj} /> {text ? (
</div> <div
<div className="col-12 col-xl-8"> className='candidate__text'
<div className='candidate__main__description'> dangerouslySetInnerHTML={createMarkup(text)}
<img src={rectangle} alt="" /> ></div>
<p className='hashtag'># Описание опыта</p> ) : (
{text ? ( <p className='candidate__text-secondary'>
<div className='candidate__text' dangerouslySetInnerHTML={createMarkup(text)}></div> {currentCandidateObj.vc_text
) : ( ? currentCandidateObj.vc_text
<p className='candidate__textSecondary'> : 'Описание отсутствует...'}
{currentCandidateObj.vc_text ? currentCandidateObj.vc_text : 'Описание отсутствует...' } </p>
</p> )}
)} {/* <Link to={`/candidate/${currentCandidateObj.id}/form`}>
{/* <Link to={`/candidate/${currentCandidateObj.id}/form`}>
<button type="submit" className='candidate__btn'> <button type="submit" className='candidate__btn'>
Выбрать к собеседованию Выбрать к собеседованию
</button> </button>
</Link> */} </Link> */}
<SectionSkills skillsArr={skillValues} /> <SkillSection skillsArr={skillValues} />
</div>
</div> </div>
</div> </div>
</div> </div>
<Footer /> </div>
<Footer />
</div> </div>
); )
}; }
export default Candidate; export default Candidate

View File

@ -1,13 +0,0 @@
import React from 'react';
import './candidate.css';
const SectionSkills = ({ skillsArr }) => {
return (
<div className='SectionSkills'>
<h3>Навыки:</h3>
<ul>{skillsArr && skillsArr.map((skills) => <li key={skills.id}>{skills.skill.name}</li>)}</ul>
</div>
);
};
export default SectionSkills;

View File

@ -1,309 +0,0 @@
.candidate__title {
margin-top: 60px;
}
.candidate__title > h2 {
text-align: center;
color: #52b709;
font-family: 'GT Eesti Pro Display';
font-size: 5em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 77.81px;
}
@media (max-width: 575.98px) {
.candidate__title > h2 {
font-size: 5em;
line-height: normal;
}
}
@media (max-width: 375.98px) {
.candidate__title > h2 {
font-size: 4.5em;
line-height: normal;
}
}
.candidate__title > h2 > span {
color: #282828;
font-style: normal;
letter-spacing: 0.56px;
line-height: normal;
}
.candidate__header {
display: flex;
align-items: center;
margin-top: 120px;
margin-left: 60px;
}
@media (max-width: 768px) {
.candidate__header {
flex-direction: column;
}
.candidate__header .arrow {
margin-left: 60px;
margin-bottom: 40px;
}
}
@media (max-width: 575.98px) {
.candidate__header {
display: flex;
flex-direction: column;
margin-left: 0;
margin-top: 40px;
}
.candidate__header .arrow {
margin-left: 0;
}
}
.arrow {
display: flex;
justify-content: space-between;
align-items: center;
}
@media (max-width: 575.98px) {
.arrow {
margin-bottom: 40px;
}
}
.arrow__img > img {
cursor: pointer;
}
.arrow__sp > span {
margin-left: 40px;
margin-right: 120px;
font-family: 'GT Eesti Pro Display';
font-size: 1.8em;
font-weight: 100;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
text-align: left;
}
@media (max-width: 575.98px) {
.arrow__sp > span {
margin-right: 0px;
}
}
.icon {
min-width: 260px;
min-height: 120px;
background-color: #f9f9f9;
border-radius: 20px;
position: relative;
}
.icon > h3 {
position: absolute;
right: 20%;
top: 40%;
font-family: 'GT Eesti Pro Display';
font-size: 1.8em;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: normal;
text-align: left;
}
.icon > img {
position: absolute;
}
.front {
left: -5%;
}
.back {
top: 11%;
left: -9%;
}
.des {
top: 24%;
left: -9%;
}
.candidate__main {
margin-top: 60px;
}
.candidate__main__description {
padding-left: 16px;
}
.candidate__main__description > h2 {
font-family: 'GT Eesti Pro Display';
font-size: 2.8em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
text-align: left;
}
@media (max-width: 575.98px) {
.candidate__main__description > h2 {
font-size: 3.2em;
text-align: center;
position: absolute;
top: -410px;
left: 0;
}
}
@media (max-width: 375.98px) {
.candidate__main__description > h2 {
font-size: 3em;
}
}
@media (max-width: 345.98px) {
.candidate__main__description > h2 {
font-size: 2.6em;
}
}
@media (max-width: 575.98px) {
.candidate__main__description > img {
/* width: 50%;
display: block;
margin: 0 auto; */
display: none;
}
}
.candidate__main__description > p {
font-family: 'GT Eesti Pro Display';
font-size: 1.2em;
font-weight: 300;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
text-align: left;
margin: 20px 0px;
}
@media (min-width: 576.98px) {
.candidate__btn {
display: none;
}
}
@media (max-width: 575.98px) {
.candidate__btn {
display: block;
width: 221px;
height: 49px;
box-shadow: 0 8px 20px rgba(82, 151, 34, 0.21);
border-radius: 24px;
background-color: #ffffff;
background-image: linear-gradient(to top, #6aaf5c 0%, #52b709 100%),
linear-gradient(
36deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.16) 47%,
rgba(255, 255, 255, 0.17) 50%,
rgba(255, 255, 255, 0) 100%
);
color: #ffffff;
font-family: 'Muller';
font-size: 1.3em;
letter-spacing: normal;
text-align: left;
border: none;
text-align: center;
margin: 28px auto;
}
}
.SectionSkills {
display: flex;
border: 1px solid #69bf2c;
padding: 28px 40px 16px 30px;
margin-top: 60px;
border-radius: 10px;
margin-bottom: 60px;
}
@media (max-width: 575.98px) {
.SectionSkills {
display: none;
}
}
.SectionSkills > h3 {
font-family: 'GT Eesti Pro Display';
font-size: 1.8em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 28px;
text-align: left;
}
.SectionSkills > ul {
list-style: none;
display: flex;
padding-left: 0;
flex-wrap: wrap;
}
.SectionSkills > ul > li {
font-family: 'GT Eesti Pro Display';
font-size: 1.8em;
font-weight: 100;
font-style: normal;
letter-spacing: normal;
line-height: 28px;
text-align: left;
margin-left: 20px;
}
.candidate__text > p {
font-family: 'GT Eesti Pro Display';
font-size: 1.6em;
font-weight: 100;
font-style: normal;
letter-spacing: normal;
text-align: left;
}
.candidate__textSecondary {
font-family: 'GT Eesti Pro Display';
font-size: 1.6em;
font-weight: 100;
font-style: normal;
letter-spacing: normal;
line-height: 24px;
text-align: left;
line-height: 28px;
}
.candidate + .logout-button{
top: 80px !important;
}
.candidate footer {
margin-top: 2.5rem !important;
}
@media (max-width: 1199px) {
.candidate + .logout-button {
top: 16px !important;
}
}

View File

@ -0,0 +1,293 @@
.candidate {
&__title {
margin-top: 60px;
h2 {
text-align: center;
color: #52b709;
font-family: 'GT Eesti Pro Display';
font-size: 5em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 77.81px;
span {
color: #282828;
font-style: normal;
letter-spacing: 0.56px;
line-height: normal;
}
}
}
&__header {
display: flex;
align-items: center;
margin-top: 120px;
margin-left: 60px;
}
&__main {
margin-top: 60px;
&-description {
padding-left: 16px;
h2 {
font-family: 'GT Eesti Pro Display';
font-size: 2.8em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
text-align: left;
}
p {
font-family: 'GT Eesti Pro Display';
font-size: 1.2em;
font-weight: 300;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
text-align: left;
margin: 20px 0px;
}
}
}
&__text {
p {
font-family: 'GT Eesti Pro Display';
font-size: 1.6em;
font-weight: 100;
font-style: normal;
letter-spacing: normal;
text-align: left;
}
&-secondary {
font-family: 'GT Eesti Pro Display';
font-size: 1.6em;
font-weight: 100;
font-style: normal;
letter-spacing: normal;
line-height: 24px;
text-align: left;
line-height: 28px;
}
}
&__icon {
min-width: 260px;
min-height: 120px;
background-color: #f9f9f9;
border-radius: 20px;
position: relative;
img {
position: absolute;
}
h3 {
position: absolute;
right: 20%;
top: 40%;
font-family: 'GT Eesti Pro Display';
font-size: 1.8em;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: normal;
text-align: left;
}
}
&__arrow {
display: flex;
justify-content: space-between;
align-items: center;
}
footer {
margin-top: 2.5rem !important;
}
}
@media (max-width: 575.98px) {
.candidate {
&__title {
h2 {
font-size: 5em;
line-height: normal;
}
}
&__arrow {
margin-bottom: 40px;
&-img {
img {
cursor: pointer;
}
}
&-sp {
span {
margin-left: 40px;
margin-right: 120px;
font-family: 'GT Eesti Pro Display';
font-size: 1.8em;
font-weight: 100;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
text-align: left;
}
}
}
}
}
@media (max-width: 375.98px) {
.candidate {
&__title {
h2 {
font-size: 4.5em;
line-height: normal;
}
}
}
}
@media (max-width: 768px) {
.candidate {
&__header {
flex-direction: column;
}
&__arrow {
margin-left: 60px;
margin-bottom: 40px;
}
}
}
@media (max-width: 575.98px) {
.candidate {
&__header {
display: flex;
flex-direction: column;
margin-left: 0;
margin-top: 40px;
}
&__main {
&-description {
h2 {
font-size: 3.2em;
text-align: center;
position: absolute;
top: -410px;
left: 0;
}
img {
display: none;
}
}
}
&__btn {
display: block;
width: 221px;
height: 49px;
box-shadow: 0 8px 20px rgba(82, 151, 34, 0.21);
border-radius: 24px;
background-color: #ffffff;
background-image: linear-gradient(to top, #6aaf5c 0%, #52b709 100%),
linear-gradient(
36deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.16) 47%,
rgba(255, 255, 255, 0.17) 50%,
rgba(255, 255, 255, 0) 100%
);
color: #ffffff;
font-family: 'Muller';
font-size: 1.3em;
letter-spacing: normal;
text-align: left;
border: none;
text-align: center;
margin: 28px auto;
}
&__arrow {
margin-left: 0;
&-sp {
span {
margin-right: 0px;
}
}
}
}
}
.front {
left: -5%;
}
.back {
top: 11%;
left: -9%;
}
.des {
top: 24%;
left: -9%;
}
@media (max-width: 1199px) {
.candidate + .logout-button {
top: 16px !important;
}
}
@media (max-width: 375.98px) {
.candidate {
&__main {
&-description {
h2 {
font-size: 3em;
}
}
}
}
}
@media (max-width: 345.98px) {
.candidate {
&__main {
&-description {
h2 {
font-size: 2.6em;
}
}
}
}
}
@media (min-width: 576.98px) {
.candidate {
&__btn {
display: none;
}
}
}
.candidate + .logout-button {
top: 80px !important;
}

View File

@ -2,8 +2,10 @@ import React from 'react'
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import { Achievement } from '../Achievement/Achievement' import { Achievement } from '../Achievement/Achievement'
import { LEVELS, SKILLS } from '../constants/constants'
import maleBig from '../../images/medium_male_big.png' import maleBig from '../../images/medium_male_big.png'
import './sidebar.scss' import './candidateSidebar.scss'
const getYearsString = (years) => { const getYearsString = (years) => {
let yearsString let yearsString
@ -19,26 +21,31 @@ const getYearsString = (years) => {
return `${years} ${yearsString}` return `${years} ${yearsString}`
} }
const Sidebar = ({ candidate }) => { const CandidateSidebar = ({ candidate, position }) => {
console.log('c', candidate)
return ( return (
<div className='candidateSidebar'> <div className='candidate-sidebar'>
<div className='candidateSidebar__info'> <div className='candidate-sidebar__info'>
<div className='candidate-sidebar__position'>
<h2>
{candidate.specification} {SKILLS[candidate.position_id]},{' '}
{LEVELS[candidate.level]}{' '}
</h2>
</div>
<img src={candidate.photo} alt='' /> <img src={candidate.photo} alt='' />
{candidate && candidate.years_of_exp && ( {candidate && candidate.years_of_exp && (
<> <>
<p className='candidateSidebar__experience-title'>Опыт работы</p> <p className='candidate-sidebar__experience-title'>Опыт работы</p>
<p className='candidateSidebar__experience'> <p className='candidate-sidebar__experience'>
{getYearsString(candidate.years_of_exp)} {getYearsString(candidate.years_of_exp)}
</p> </p>
</> </>
)} )}
<Link to={`/candidate/${candidate.id}/form`}> <Link to={`/candidate/${candidate.id}/form`}>
<button className='candidateSidebar__select'> <button className='candidate-sidebar__select'>
Выбрать к собеседованию Выбрать к собеседованию
</button> </button>
</Link> </Link>
<div className='candidateSidebar__achievements'> <div className='candidate-sidebar__achievements'>
{candidate && {candidate &&
candidate.achievements && candidate.achievements &&
candidate.achievements.map((item) => { candidate.achievements.map((item) => {
@ -50,4 +57,4 @@ const Sidebar = ({ candidate }) => {
) )
} }
export default Sidebar export default CandidateSidebar

View File

@ -1,4 +1,4 @@
.candidateSidebar { .candidate-sidebar {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -7,6 +7,19 @@
position: sticky; position: sticky;
top: 80px; top: 80px;
&__position {
margin-bottom: 1rem;
h2 {
font-size: 3rem !important;
font-family: 'GT Eesti Pro Display';
font-size: 2.6em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
}
}
&__achievements { &__achievements {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -14,26 +27,32 @@
padding: 0 1rem; padding: 0 1rem;
margin-bottom: 80px; margin-bottom: 80px;
} }
}
.candidateSidebar__info { &__info {
text-align: center; text-align: center;
margin-top: 40px; margin-top: 10px;
} width: 100%;
display: flex;
@media (max-width: 575.98px) { justify-content: center;
.candidateSidebar__info { align-items: flex-start;
margin-top: 140px; flex-direction: column;
} }
} }
.candidateSidebar__info > img { @media (max-width: 575.98px) {
.candidate-sidebar__info {
margin-top: 30px;
align-items: center;
}
}
.candidate-sidebar__info > img {
width: 180px; width: 180px;
height: 180px; height: 180px;
border-radius: 100px; border-radius: 100px;
} }
.candidateSidebar__experience-title { .candidate-sidebar__experience-title {
font-family: 'GT Eesti Pro Display'; font-family: 'GT Eesti Pro Display';
font-size: 1.8em; font-size: 1.8em;
font-weight: normal; font-weight: normal;
@ -43,7 +62,7 @@
margin-top: 20px; margin-top: 20px;
} }
.candidateSidebar__experience { .candidate-sidebar__experience {
font-family: 'GT Eesti Pro Display'; font-family: 'GT Eesti Pro Display';
font-size: 3em; font-size: 3em;
font-weight: 700; font-weight: 700;
@ -52,7 +71,7 @@
line-height: normal; line-height: normal;
} }
.candidateSidebar__select { .candidate-sidebar__select {
width: 280px; width: 280px;
height: 60px; height: 60px;
border-radius: 100px; border-radius: 100px;
@ -69,13 +88,13 @@
margin-bottom: 40px; margin-bottom: 40px;
} }
.candidateSidebar__select:hover { .candidate-sidebar__select:hover {
background: rgba(0, 0, 0, 0); background: rgba(0, 0, 0, 0);
color: #73c141; color: #73c141;
box-shadow: inset 0 0 0 3px #73c141; box-shadow: inset 0 0 0 3px #73c141;
} }
.candidateSidebar__info__l { .candidate-sidebar__info__l {
font-family: 'GT Eesti Pro Display'; font-family: 'GT Eesti Pro Display';
font-size: 1.8em; font-size: 1.8em;
font-weight: 600; font-weight: 600;
@ -85,20 +104,20 @@
text-align: center; text-align: center;
} }
.candidateSidebar__arrows { .candidateS-sidebar__arrows {
display: flex; display: flex;
align-items: center; align-items: center;
margin-top: 20px; margin-top: 20px;
} }
@media (max-width: 575.98px) { @media (max-width: 575.98px) {
.candidateSidebar__info__l, .candidate-sidebar__info__l,
.candidateSidebar__arrows { .candidate-sidebar__arrows {
display: none; display: none;
} }
} }
.arrow__left { .candidate-sidebar__arrow--left {
position: relative; position: relative;
width: 30px; width: 30px;
height: 30px; height: 30px;
@ -106,14 +125,14 @@
background-color: #f6f6f6; background-color: #f6f6f6;
} }
.arrow__left > img { .candidate-sidebar__arrow--left > img {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.arrows__sp { .candidate-sidebar__arrows-sp {
color: #705fa3; color: #705fa3;
font-family: 'Circe'; font-family: 'Circe';
font-size: 1.3em; font-size: 1.3em;
@ -124,7 +143,7 @@
margin: 0 10px; margin: 0 10px;
} }
.arrow__right { .candidate-sidebar__arrow--right {
position: relative; position: relative;
width: 30px; width: 30px;
height: 30px; height: 30px;
@ -132,7 +151,7 @@
background-color: #74be4d; background-color: #74be4d;
} }
.arrow__right > img { .candidate-sidebar__arrow--right > img {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
@ -140,18 +159,18 @@
} }
@media (max-width: 1199px) { @media (max-width: 1199px) {
.candidateSidebar { .candidate-sidebar {
flex-direction: row; flex-direction: row;
padding-left: 16px; padding-left: 16px;
} }
.candidateSidebar__info { .candidate-sidebar__info {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.candidateSidebar__info__e, .candidate-sidebar__info__e,
.candidateSidebar__info__y { .candidate-sidebar__info__y {
width: 180px; width: 180px;
} }
} }

View File

@ -1,143 +1,238 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react'
import style from './Description.module.css'; 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 { Link, useHistory } from 'react-router-dom'
import { Link, useHistory } from 'react-router-dom'; import { LEVELS, SKILLS } from '../constants/constants'
import { LEVELS, SKILLS } from '../constants/constants'; import {
import { selectProfiles, selectFilteredCandidates, selectItems, auth } from '../../redux/outstaffingSlice'; selectProfiles,
import { useSelector, useDispatch } from 'react-redux'; selectFilteredCandidates,
import { fetchProfile } from '../../server/server'; selectItems,
import { Loader } from '../Loader/Loader'; auth
import { getRole } from '../../redux/roleSlice'; } from '../../redux/outstaffingSlice'
import { useSelector, useDispatch } from 'react-redux'
import { fetchGet } from '../../server/server'
import { Loader } from '../Loader/Loader'
import { getRole } from '../../redux/roleSlice'
import './description.scss'
const Description = ({ onLoadMore, isLoadingMore }) => { const Description = ({ onLoadMore, isLoadingMore }) => {
const dispatch = useDispatch(); const dispatch = useDispatch()
const [isLoaded, setIsLoaded] = useState(false); const [isLoaded, setIsLoaded] = useState(false)
const history = useHistory(); const history = useHistory()
const role = useSelector(getRole) const role = useSelector(getRole)
const candidatesListArr = useSelector(selectProfiles); const candidatesListArr = useSelector(selectProfiles)
const itemsArr = useSelector(selectItems); const itemsArr = useSelector(selectItems)
const filteredListArr = useSelector(selectFilteredCandidates); const filteredListArr = useSelector(selectFilteredCandidates)
const [allCandidates, getAllCandidates] = useState([]); const [allCandidates, getAllCandidates] = useState([])
useEffect(() => { useEffect(() => {
fetchProfile({ link: `${process.env.REACT_APP_API_URL}/api/profile?limit=`, index: 1000, history, role, logout: dispatch(auth(false)) }).then((p) => { fetchGet({
getAllCandidates(p); link: `${process.env.REACT_APP_API_URL}/api/profile?limit=`,
setIsLoaded(true); params: 1000,
}); history,
}, []); role,
logout: () => dispatch(auth(false))
}).then((p) => {
getAllCandidates(p)
setIsLoaded(true)
})
}, [])
if(!filteredListArr) { if (!filteredListArr) {
return ( return (
<section className={style.description}> <section className='description'>
<div className="container"> <div className='container'>
<div className={style.description__wrapper}> <div className='description__wrapper'>
{ {candidatesListArr && candidatesListArr.length > 0 ? (
candidatesListArr && candidatesListArr.length > 0 ? candidatesListArr.map((el) => ( candidatesListArr.map((el) => (
<div className="row" key={el.id}> <div className='row' key={el.id}>
<div className="col-2 col-xs-12"> <div className='col-2 col-xs-12'>
<img className={style.description__img} src={el.photo} alt="" /> <img className='description__img' src={el.photo} alt='' />
</div>
<div className="col-12 col-xl-6">
<h3 className={style.description__title}>
<Link to={`/candidate/${el.id}`}>{el.specification} {SKILLS[el.position_id]}, {LEVELS[el.level]} </Link>
</h3>
{el.vc_text_short ? (
<div className={style.description__text}>{el.vc_text_short}</div>
) : (
<p className={style.description__textSecondary}>Описание отсутствует...</p>
)}
</div>
<div className="col-12 col-xl-4">
<Link to={`/candidate/${el.id}`}>
<button className={style.description__button}>Подробное резюме</button>
</Link>
</div>
<div className="col-xl-2"></div>
<div className="col-12 col-xl-6">
<ul className={style.description__list}>
{el.skillValues.map((e) => (
<li key={e.id} className={style.description__list__item}>
{e.skill.name}
</li>
))}
</ul>
<img className={style.description__rectangle} src={rectangle} alt="" />
</div>
<div className="col-xl-4"></div>
</div>
)) : <div className={style.description__empty}>{
isLoaded ? 'В данный момент в категории нет свободных специалистов' : 'Загрузка...'
}</div>}
</div>
<div className="row">
<div className="col-12">
<div className={style.description__footer}>
<div className={style.description__footer__btn}>
<button onClick={() => onLoadMore(2)}>
{
isLoadingMore ? <Loader width={40} height={40} /> : 'Загрузить еще'
} </button>
</div>
</div>
</div>
</div>
</div>
</section>
);
}
return (
<section className={style.description}>
<div className="container">
<div className={style.description__wrapper}>
{filteredListArr && filteredListArr.length > 0
? filteredListArr.map((el) => (
<div className="row" key={el.id}>
<div className="col-2">
<img className={style.description__img} src={el.photo} alt="" />
</div> </div>
<div className="col-12 col-xl-6"> <div className='col-12 col-xl-6'>
<h3 className={style.description__title}> <h3 className='description__title'>
<Link to={`/candidate/${el.id}`}> {el.specification} {SKILLS[el.position_id]}, {LEVELS[el.level]} </Link> <Link to={`/candidate/${el.id}`}>
{el.specification} {SKILLS[el.position_id]},{' '}
{LEVELS[el.level]}{' '}
</Link>
</h3> </h3>
{el.vc_text_short ? ( {el.vc_text_short ? (
<div className={style.description__text}>{el.vc_text_short}</div> <div className='description__text'>
{el.vc_text_short}
</div>
) : ( ) : (
<p className={style.description__textSecondary}>Описание отсутствует...</p> <p className='description__text-secondary'>
Описание отсутствует...
</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={style.description__button}>Подробное резюме</button> <button className='description__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={style.description__list}> <ul className='description__list'>
{el.skillValues.map((e) => ( {el.skillValues.map((e) => (
<li key={e.id} className={style.description__list__item}> <li key={e.id} className='description__list-item'>
{e.skill.name} {e.skill.name}
</li> </li>
))} ))}
</ul> </ul>
<img className={style.description__rectangle} src={rectangle} alt="" /> <img
className='description__rectangle'
src={rectangle}
alt=''
/>
</div> </div>
<div className="col-xl-4"></div> <div className='col-xl-4'></div>
</div> </div>
)) ))
: <div className={style.description__empty}>В данный момент в категории нет свободных специалистов</div> } ) : (
<div className='description__empty'>
{isLoaded
? 'В данный момент в категории нет свободных специалистов'
: 'Загрузка...'}
</div>
)}
</div>
<div className='row'>
<div className='col-12'>
<div className='description__footer'>
<div className='description__footer-btn'>
<button onClick={() => onLoadMore(2)}>
{isLoadingMore ? (
<Loader width={40} height={40} />
) : (
'Загрузить еще'
)}{' '}
</button>
</div>
</div>
</div>
</div>
</div>
</section>
)
}
return (
<section className='description'>
<div className='container'>
<div className='description__wrapper'>
{filteredListArr && filteredListArr.length > 0
? filteredListArr.map((el) => (
<div className='row' key={el.id}>
<div className='col-2'>
<img className='description__img' src={el.photo} alt='' />
</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 ? (
<div className='description__text'>
{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'>
{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 className={style.description__empty}>В данный момент в категории нет свободных специалистов</div> } */
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'>
Описание отсутствует...
</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'>
{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>
<div className="row"> <div className='row'>
<div className="col-12"> <div className='col-12'>
<div className={style.description__footer}> <div className='description__footer'>
<div className={style.description__footer__btn}> <div className='description__footer-btn'>
{(candidatesListArr.length !== allCandidates.length && filteredListArr.length > 0) || filteredListArr===null ? ( {allCandidates &&
candidatesListArr &&
candidatesListArr.length !== allCandidates.length &&
filteredListArr.length === 0 ? (
<button onClick={() => onLoadMore(2)}>Загрузить еще</button> <button onClick={() => onLoadMore(2)}>Загрузить еще</button>
) : null} ) : null}
</div> </div>
@ -146,7 +241,7 @@ const Description = ({ onLoadMore, isLoadingMore }) => {
</div> </div>
</div> </div>
</section> </section>
); )
}; }
export default Description; export default Description

View File

@ -1,250 +0,0 @@
.description {
margin-top: 40px;
margin-bottom: 120px;
}
.description__empty {
font-family: 'GT Eesti Pro Display';
font-size: 2.4em;
font-weight: 500;
font-style: normal;
letter-spacing: normal;
line-height: normal;
text-align: center;
}
.description__wrapper {
border: 1px solid #efefef;
background-color: #fdfdfd;
padding: 60px 40px 0 40px;
border-bottom: none;
position: relative;
}
.description__img {
margin-top: 16px;
width: 118px;
height: 118px;
border-radius: 100px;
}
@media (max-width: 575.98px) {
.description__img {
position: absolute;
top: 100px;
left: calc(50% - 60px);
}
.description__wrapper {
padding: 45px 40px 0 40px;
}
}
.description__title {
font-family: 'GT Eesti Pro Display';
font-size: 2.6em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
text-align: left;
margin-bottom: 10px;
}
.description__title a {
color: #333;
}
@media (max-width: 575.98px) {
.description__title {
text-align: center;
margin-bottom: 170px;
font-size: 3em;
}
}
@media (max-width: 376px) {
.description__title {
font-size: 2.8em;
}
}
@media (max-width: 346px) {
.description__title {
font-size: 2.6em;
}
}
.description__text {
font-family: 'GT Eesti Pro Display';
font-size: 1.6em;
font-weight: 100;
font-style: normal;
letter-spacing: normal;
line-height: 24px;
text-align: left;
line-height: 28px;
word-wrap: break-word;
}
.description__textSecondary {
font-family: 'GT Eesti Pro Display';
font-size: 1.7em;
font-weight: 100;
font-style: normal;
letter-spacing: normal;
line-height: 24px;
text-align: left;
line-height: 28px;
}
@media (max-width: 575.98px) {
.description__text {
margin-left: 20px;
font-size: 1.6em;
}
}
.description__button {
width: 280px;
height: 60px;
border-radius: 100px;
background-color: #73c141;
border: none;
color: #ffffff;
font-family: 'Muller';
font-weight: bold;
font-size: 1.6em;
line-height: normal;
letter-spacing: 0.8px;
text-align: center;
margin-top: 74px;
margin-left: 30px;
}
.description__button:hover {
background: rgba(0, 0, 0, 0);
color: #73c141;
box-shadow: inset 0 0 0 3px #73c141;
}
@media (max-width: 575.98px) {
.description__button {
width: 220px;
height: 50px;
z-index: 5;
margin-left: 85px;
margin-top: 40px;
margin-bottom: 40px;
}
}
@media (max-width: 375.98px) {
.description__button {
margin-left: 60px;
}
}
@media (max-width: 325.98px) {
.description__button {
margin-left: 30px;
}
}
.description__list {
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
}
.description__list__item {
font-family: 'GT Eesti Pro Display';
font-size: 1.7em;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
text-align: left;
line-height: 36px;
margin-right: 10px;
word-wrap: break-word;
}
@media (max-width: 575.98px) {
.description__list__item {
font-size: 1.5em;
text-align: center;
margin-bottom: 0;
}
}
.description__rectangle {
display: block;
margin: 50px auto;
}
@media (max-width: 575.98px) {
.description__rectangle {
width: 80%;
margin: 50px auto 80px auto;
}
}
.description__footer {
display: flex;
justify-content: center;
margin-top: 60px;
}
.description__footer__btn > button {
width: 200px;
height: 48px;
border-radius: 100px;
border: 1px solid #73c141;
background-color: white;
margin-right: 60px;
color: #a0a0a0;
font-family: 'GT Eesti Pro Display';
font-size: 1.8em;
font-weight: 400;
font-style: normal;
letter-spacing: 0.6px;
line-height: normal;
text-align: center;
}
@media (max-width: 575.98px) {
.description {
margin-bottom: 16px;
}
.description__footer {
margin-top: 0;
}
.description__footer__btn > button {
width: 160px;
margin-right: 10px;
font-size: 1.6em;
}
}
.description__footer__box {
display: flex;
align-items: center;
}
.description__footer__sp {
color: #705fa3;
font-family: Circe;
font-size: 1.3em;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
text-align: center;
margin: 0 10px;
}
@media (max-width: 1199px) {
.description__button {
margin: 1.5rem 0;
}
}

View File

@ -0,0 +1,252 @@
.description {
margin-top: 40px;
margin-bottom: 120px;
&__title {
font-family: 'GT Eesti Pro Display';
font-size: 2.6em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
text-align: left;
margin-bottom: 10px;
a {
color: #333;
}
}
&__empty {
font-family: 'GT Eesti Pro Display';
font-size: 2.4em;
font-weight: 500;
font-style: normal;
letter-spacing: normal;
line-height: normal;
text-align: center;
}
&____wrapper {
border: 1px solid #efefef;
background-color: #fdfdfd;
padding: 60px 40px 0 40px;
border-bottom: none;
position: relative;
}
&__img {
margin-top: 16px;
width: 118px;
height: 118px;
border-radius: 100px;
}
&__text {
font-family: 'GT Eesti Pro Display';
font-size: 1.6em;
font-weight: 100;
font-style: normal;
letter-spacing: normal;
line-height: 24px;
text-align: left;
line-height: 28px;
word-wrap: break-word;
&-secondary {
font-family: 'GT Eesti Pro Display';
font-size: 1.7em;
font-weight: 100;
font-style: normal;
letter-spacing: normal;
line-height: 24px;
text-align: left;
line-height: 28px;
}
}
&__button {
width: 280px;
height: 60px;
border-radius: 100px;
background-color: #73c141;
border: none;
color: #ffffff;
font-family: 'Muller';
font-weight: bold;
font-size: 1.6em;
line-height: normal;
letter-spacing: 0.8px;
text-align: center;
margin-top: 74px;
margin-left: 30px;
&:hover {
background: rgba(0, 0, 0, 0);
color: #73c141;
box-shadow: inset 0 0 0 3px #73c141;
}
}
&__list {
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
&-item {
font-family: 'GT Eesti Pro Display';
font-size: 1.7em;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
text-align: left;
line-height: 36px;
margin-right: 10px;
word-wrap: break-word;
}
}
&__rectangle {
display: block;
margin: 50px auto;
}
&__footer {
display: flex;
justify-content: center;
margin-top: 60px;
&-btn {
button {
width: 200px;
height: 48px;
border-radius: 100px;
border: 1px solid #73c141;
background-color: white;
margin-right: 60px;
color: #a0a0a0;
font-family: 'GT Eesti Pro Display';
font-size: 1.8em;
font-weight: 400;
font-style: normal;
letter-spacing: 0.6px;
line-height: normal;
text-align: center;
}
}
&-box {
display: flex;
align-items: center;
}
&-sp {
color: #705fa3;
font-family: Circe;
font-size: 1.3em;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
text-align: center;
margin: 0 10px;
}
}
}
@media (max-width: 575.98px) {
.description {
margin-bottom: 16px;
&__wrapper {
padding: 35px 40px 0 40px;
}
&__title {
text-align: center;
margin-bottom: 170px;
font-size: 3em;
}
&__text {
margin-left: 20px;
font-size: 1.6em;
}
&__img {
position: absolute;
top: 100px;
left: calc(50% - 60px);
}
&__button {
width: 220px;
height: 50px;
z-index: 5;
margin-left: 85px;
margin-top: 40px;
margin-bottom: 40px;
}
&__list {
&-item {
font-size: 1.5em;
text-align: center;
margin-bottom: 0;
}
}
&__rectangle {
width: 80%;
margin: 50px auto 80px auto;
}
&__footer {
margin-top: 0;
&-btn {
button {
width: 160px;
margin-right: 10px;
font-size: 1.6em;
}
}
}
}
}
@media (max-width: 1199px) {
.description {
&__button {
margin: 1.5rem 0;
}
}
}
@media (max-width: 376px) {
.description {
&__title {
font-size: 2.8em;
}
&__button {
margin-left: 60px;
}
}
}
@media (max-width: 346px) {
.description {
&__title {
font-size: 2.6em;
}
}
}
@media (max-width: 325.98px) {
.description {
&__button {
margin-left: 30px;
}
}
}

View File

@ -1,46 +1,47 @@
import React from 'react'; import React from 'react'
import './footer.css';
import align from '../../images/align-left.png' import align from '../../images/align-left.png'
import phone from '../../images/phone.png' import phone from '../../images/phone.png'
import telegram from '../../images/telegram.png' import telegram from '../../images/telegram.png'
import './footer.scss'
export const Footer = () => { export const Footer = () => {
return ( return (
<div className='container'> <div className='container'>
<footer> <footer>
<div className='footer row'> <div className='footer row'>
<div className='col-12 col-xl-7'> <div className='col-12 col-xl-7'>
<div className='footer__left'> <div className='footer__left'>
<div className='footer__img'> <div className='footer__img'>
<img src={align} alt='' /> <img src={align} alt='' />
</div> </div>
<div className='footer__description'> <div className='footer__description'>
<span> <span>
Подберем и документально оформим IT-специалистов, после чего передадим исполнителей под ваше руководство. Подберем и документально оформим IT-специалистов, после чего
Вы получаете полное управление над сотрудниками, имея возможность контролировать и заменять IT штат.{' '} передадим исполнителей под ваше руководство. Вы получаете
</span> полное управление над сотрудниками, имея возможность
</div> контролировать и заменять IT штат.{' '}
</div> </span>
</div> </div>
<div className='col-4 col-xl-2'>
<div className='footer__icon'>
<img src={phone} alt='' />
<img src={telegram} alt='' />
</div>
</div>
<div className='col-8 col-xl-3'>
<div className='footer__right'>
<p className='footer__phone'>+7 495 156 78 98</p>
<p className='footer__hours'>Будни с 9:00 до 21:00</p>
</div>
</div> </div>
</div> </div>
<div className='copyright'>2021 © Outstaffing</div>
</footer> <div className='col-4 col-xl-2'>
<div className='footer__icon'>
<img src={phone} alt='' />
<img src={telegram} alt='' />
</div>
</div>
<div className='col-8 col-xl-3'>
<div className='footer__right'>
<p className='footer__phone'>+7 495 156 78 98</p>
<p className='footer__hours'>Будни с 9:00 до 21:00</p>
</div>
</div>
</div> </div>
) <div className='footer__copyright'>2021 © Outstaffing</div>
</footer>
</div>
)
} }

View File

@ -1,101 +0,0 @@
footer {
margin-top: -3rem;
}
footer .copyright {
padding: 1rem 1rem 1rem 5.6rem;
font-family: 'Muller';
font-weight: 300;
font-size: 1.2em;
}
.footer__left {
display: flex;
align-items: center;
}
@media (max-width: 575.98px) {
.footer__left {
margin-top: 80px;
}
}
.footer__description {
padding: 0 100px 0 34px;
}
@media (max-width: 575.98px) {
.footer__description {
padding: 0;
margin-left: 10px;
}
}
.footer__left > div > span {
color: #18586e;
font-family: 'GT Eesti Pro Display';
font-size: 1.6em;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 16.81px;
text-align: left;
}
@media (max-width: 575.98px) {
.footer__left > div > span {
font-size: 1.2em;
}
}
.footer__icon {
text-align: end;
}
.footer__icon > img {
margin-left: 20px;
}
@media (max-width: 575.98px) {
.footer__icon > img {
margin-left: 10px;
}
}
.footer__right {
display: flex;
flex-direction: column;
align-items: left;
}
@media (max-width: 575.98px) {
.footer__right {
margin-bottom: 20px;
}
}
.footer__phone {
color: #003b65;
font-family: 'CeraPro';
font-size: 2.1em;
letter-spacing: normal;
line-height: 25px;
text-align: left;
}
.footer__working-hours {
color: #003b65;
font-family: 'CeraPro';
font-size: 1.2em;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: normal;
margin-left: 24px;
}
@media (max-width: 1199px) {
.footer__left {
margin-bottom: 20px;
}
}

View File

@ -0,0 +1,99 @@
.footer {
margin-top: -3rem;
&__left {
display: flex;
align-items: center;
}
&__description {
padding: 0 100px 0 34px;
span {
color: #18586e;
font-family: 'GT Eesti Pro Display';
font-size: 1.6em;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 16.81px;
text-align: left;
}
}
&__icon {
text-align: end;
img {
margin-left: 20px;
}
}
&__right {
display: flex;
flex-direction: column;
align-items: left;
}
&__phone {
color: #003b65;
font-family: 'CeraPro';
font-size: 2.1em;
letter-spacing: normal;
line-height: 25px;
text-align: left;
}
&__working-hours {
color: #003b65;
font-family: 'CeraPro';
font-size: 1.2em;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: normal;
margin-left: 24px;
}
&__copyright {
padding: 1rem 1rem 1rem 5.6rem;
font-family: 'Muller';
font-weight: 300;
font-size: 1.2em;
}
}
@media (max-width: 1199px) {
.footer {
&__left {
margin-bottom: 20px;
}
}
}
@media (max-width: 575.98px) {
.footer {
&__left {
margin-top: 80px;
}
&__description {
padding: 0;
margin-left: 10px;
span {
font-size: 1.2em;
}
}
&__icon {
img {
margin-left: 10px;
}
}
&__right {
margin-bottom: 20px;
}
}
}

View File

@ -1,90 +1,112 @@
import React, { useState } from 'react'; import React, { useState } from 'react'
import style from './Form.module.css'; import { fetchPost } from '../../server/server'
import { fetchForm } from '../../server/server'; import { auth } from '../../redux/outstaffingSlice'
import { auth } from '../../redux/outstaffingSlice'; import { useHistory, useParams, Redirect } from 'react-router-dom'
import { useHistory, useParams, Redirect } from 'react-router-dom'; import { Loader } from '../Loader/Loader'
import { Loader } from '../Loader/Loader';
import PhoneInput from 'react-phone-input-2' import PhoneInput from 'react-phone-input-2'
import 'react-phone-input-2/lib/style.css' import 'react-phone-input-2/lib/style.css'
import './form.css'; import './form.scss'
import { withSwalInstance } from 'sweetalert2-react'; import { withSwalInstance } from 'sweetalert2-react'
import swal from 'sweetalert2'; import swal from 'sweetalert2'
import { useSelector, useDispatch } from 'react-redux'; import { useSelector, useDispatch } from 'react-redux'
import { getRole } from '../../redux/roleSlice'; import { getRole } from '../../redux/roleSlice'
const SweetAlert = withSwalInstance(swal); const SweetAlert = withSwalInstance(swal)
const Form = () => { const Form = () => {
const dispatch = useDispatch(); const dispatch = useDispatch()
const history = useHistory(); const history = useHistory()
const role = useSelector(getRole); const role = useSelector(getRole)
const urlParams = useParams(); const urlParams = useParams()
const [status, setStatus] = useState(null); const [status, setStatus] = useState(null)
const [data, setData] = useState({ const [data, setData] = useState({
email: '', email: '',
phone: '', phone: '',
comment: '', comment: ''
}); })
const [isFetching, setIsFetching] = useState(false); const [isFetching, setIsFetching] = useState(false)
const handleChange = (e) => { const handleChange = (e) => {
const { id, value } = e.target; const { id, value } = e.target
setData((prev) => ({ setData((prev) => ({
...prev, ...prev,
[id]: value, [id]: value
})); }))
}; }
const handleSubmit = (e) => { const handleSubmit = (e) => {
e.preventDefault(); e.preventDefault()
setIsFetching(true) setIsFetching(true)
const formData = new FormData(); const formData = new FormData()
formData.append('profile_id', urlParams.id); formData.append('profile_id', urlParams.id)
formData.append('email', data.email); formData.append('email', data.email)
formData.append('phone', data.phone); formData.append('phone', data.phone)
formData.append('comment', data.comment); formData.append('comment', data.comment)
fetchForm({ link: `${process.env.REACT_APP_API_URL}/api/profile/add-to-interview`, index: { fetchPost({
profile_id: urlParams.id, link: `${process.env.REACT_APP_API_URL}/api/profile/add-to-interview`,
...data, params: {
}, history, role, logout: dispatch(auth(false)) }).then( (res)=> res.json() profile_id: urlParams.id,
.then( resJSON => { ...data
setStatus(resJSON); },
setIsFetching(false); history,
role,
logout: () => dispatch(auth(false))
}).then((res) =>
res.json().then((resJSON) => {
setStatus(resJSON)
setIsFetching(false)
}) })
) )
}; }
return ( return (
<> <>
{status && <SweetAlert {status && (
show={!!status} <SweetAlert
text={status.errors ? status.errors[Object.keys(status.errors)[0]] : 'Форма отправлена'} show={!!status}
onConfirm={status.errors ? () => {setStatus(null);} : () => {setStatus(null); history.push(`/candidate/${urlParams.id}`)}} text={
/>} status.errors
<div className="row"> ? status.errors[Object.keys(status.errors)[0]]
<div className="col-sm-12"> : 'Форма отправлена'
<form className={style.form} id="test"> }
<label htmlFor="email">Емейл:</label> onConfirm={
status.errors
? () => {
setStatus(null)
}
: () => {
setStatus(null)
history.push(`/candidate/${urlParams.id}`)
}
}
/>
)}
<div className='row'>
<div className='col-sm-12'>
<form className='form' id='test'>
<label htmlFor='email'>Емейл:</label>
<input <input
onChange={handleChange} onChange={handleChange}
id="email" id='email'
name="Email" name='Email'
type="email" type='email'
placeholder="Емейл" placeholder='Емейл'
value={data.email} value={data.email}
/> />
<label htmlFor="phone">Номер телефона:</label> <label htmlFor='phone'>Номер телефона:</label>
<PhoneInput <PhoneInput
id="phone" id='phone'
name="Phone" name='Phone'
country={'ru'} country={'ru'}
value={data.phone} value={data.phone}
onChange={e=>handleChange({target: {value:e, id: 'phone' }})} onChange={(e) =>
handleChange({ target: { value: e, id: 'phone' } })
}
/> />
{/* <input {/* <input
onChange={handleChange} onChange={handleChange}
@ -97,22 +119,22 @@ const Form = () => {
<textarea <textarea
onChange={handleChange} onChange={handleChange}
id="comment" id='comment'
rows="5" rows='5'
cols="40" cols='40'
name="Comment" name='Comment'
placeholder="Оставьте комментарий" placeholder='Оставьте комментарий'
value={data.comment} value={data.comment}
></textarea> ></textarea>
<button onClick={handleSubmit} className={style.form__btn} type="submit"> <button onClick={handleSubmit} className='form__btn' type='submit'>
{ isFetching ? <Loader /> : 'Отправить' } {isFetching ? <Loader /> : 'Отправить'}
</button> </button>
</form> </form>
</div> </div>
</div> </div>
</> </>
); )
}; }
export default Form; export default Form

View File

@ -1,104 +0,0 @@
.form {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 120px;
}
.form > label {
color: #48802d;
font-family: 'GT Eesti Pro Display';
font-size: 2.4em;
font-weight: 500;
font-style: normal;
letter-spacing: normal;
line-height: 16.81px;
text-align: left;
margin-bottom: 20px;
}
.form > input {
max-width: 366px;
height: 62px;
box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
border-radius: 37px;
border: 1px solid #c4c4c4;
background-color: #ffffff;
margin-bottom: 60px;
color: #a6a6a6;
font-family: 'GT Eesti Pro Display';
font-size: 2.2em;
font-weight: 300;
font-style: normal;
letter-spacing: normal;
line-height: normal;
text-align: left;
padding-left: 45px;
outline: none;
}
.form > textarea {
max-width: 366px;
height: 62px;
margin-bottom: 40px;
box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
border-radius: 37px;
border: 1px solid #c4c4c4;
background-color: #ffffff;
margin-bottom: 60px;
color: #a6a6a6;
font-family: 'GT Eesti Pro Display';
font-size: 1.2em;
font-weight: 300;
font-style: normal;
letter-spacing: normal;
line-height: normal;
text-align: left;
padding-left: 25px;
padding-top: 25px;
outline: none;
}
textarea {
resize: none;
}
.form__btn {
width: 332px;
height: 75px;
box-shadow: 6px 5px 20px rgba(82, 151, 34, 0.21);
border-radius: 38px;
background-color: #ffffff;
background-image: linear-gradient(to top, #6aaf5c 0%, #52b709 100%),
linear-gradient(
36deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.16) 47%,
rgba(255, 255, 255, 0.17) 50%,
rgba(255, 255, 255, 0) 100%
);
border: none;
color: #ffffff;
font-family: 'Muller';
font-size: 2.2em;
letter-spacing: normal;
line-height: 71.88px;
text-align: center;
}
@media (max-width: 575.98px) {
.form__arrow {
margin-bottom: 40px;
}
}
@media (max-width: 575.98px) {
.form__arrow__sp > span {
margin-right: 0px;
}
}

View File

@ -1,15 +0,0 @@
.react-tel-input {
width: min-content !important;
margin-bottom: 60px;
}
.react-tel-input .form-control {
padding: 30px 30px 30px 48px;
border-radius: 37px;
width: 332px;
}
.react-tel-input .flag-dropdown {
border-top-left-radius: 37px;
border-bottom-left-radius: 37px;
}

View File

@ -0,0 +1,114 @@
.form {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 120px;
& > label {
color: #48802d;
font-family: 'GT Eesti Pro Display';
font-size: 2.4em;
font-weight: 500;
font-style: normal;
letter-spacing: normal;
line-height: 16.81px;
text-align: left;
margin-bottom: 20px;
}
& > input {
max-width: 366px;
height: 62px;
box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
border-radius: 37px;
border: 1px solid #c4c4c4;
background-color: #ffffff;
margin-bottom: 60px;
color: #a6a6a6;
font-family: 'GT Eesti Pro Display';
font-size: 2.2em;
font-weight: 300;
font-style: normal;
letter-spacing: normal;
line-height: normal;
text-align: left;
padding-left: 45px;
outline: none;
}
& > textarea {
max-width: 366px;
height: 62px;
margin-bottom: 40px;
box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
border-radius: 37px;
border: 1px solid #c4c4c4;
background-color: #ffffff;
margin-bottom: 60px;
color: #a6a6a6;
font-family: 'GT Eesti Pro Display';
font-size: 1.2em;
font-weight: 300;
font-style: normal;
letter-spacing: normal;
line-height: normal;
text-align: left;
padding-left: 25px;
padding-top: 25px;
outline: none;
resize: none;
}
&__btn {
width: 332px;
height: 75px;
box-shadow: 6px 5px 20px rgba(82, 151, 34, 0.21);
border-radius: 38px;
background-color: #ffffff;
background-image: linear-gradient(to top, #6aaf5c 0%, #52b709 100%),
linear-gradient(
36deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.16) 47%,
rgba(255, 255, 255, 0.17) 50%,
rgba(255, 255, 255, 0) 100%
);
border: none;
color: #ffffff;
font-family: 'Muller';
font-size: 2.2em;
letter-spacing: normal;
line-height: 71.88px;
text-align: center;
}
.react-tel-input {
width: min-content !important;
margin-bottom: 60px;
}
.react-tel-input .form-control {
padding: 30px 30px 30px 48px;
border-radius: 37px;
width: 332px;
}
.react-tel-input .flag-dropdown {
border-top-left-radius: 37px;
border-bottom-left-radius: 37px;
}
}
@media (max-width: 575.98px) {
.form {
.arrow {
margin-bottom: 40px;
&-sp {
span {
margin-right: 0px;
}
}
}
}
}

View File

@ -1,45 +1,58 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch, useSelector } from 'react-redux'
import Outstaffing from '../Outstaffing/Outstaffing'; import Outstaffing from '../Outstaffing/Outstaffing'
import Description from '../Description/Description'; import Description from '../Description/Description'
import { fetchProfile, fetchSkills } from '../../server/server'; import { fetchGet } from '../../server/server'
import { profiles, tags, auth } from '../../redux/outstaffingSlice'; import { profiles, tags, auth } from '../../redux/outstaffingSlice'
import { getRole } from '../../redux/roleSlice'; import { getRole } from '../../redux/roleSlice'
import { Footer } from '../Footer/Footer'; import { Footer } from '../Footer/Footer'
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom'
const Home = () => { const Home = () => {
const history = useHistory() const history = useHistory()
const [isLoadingMore, setIsLoadingMore] = useState(false); const [isLoadingMore, setIsLoadingMore] = useState(false)
const [index, setIndex] = useState(4); const [index, setIndex] = useState(4)
const dispatch = useDispatch(); const dispatch = useDispatch()
const role = useSelector(getRole) const role = useSelector(getRole)
useEffect(() => { useEffect(() => {
setIsLoadingMore(true); setIsLoadingMore(true)
fetchProfile({ link:`${process.env.REACT_APP_API_URL}/api/profile?limit=`, index, history, role, logout: dispatch(auth(false)) }).then((profileArr) => { fetchGet({
dispatch(profiles(profileArr)); link: `${process.env.REACT_APP_API_URL}/api/profile?limit=`,
setIsLoadingMore(false); params: index,
}); history,
role,
logout: () => dispatch(auth(false))
}).then((profileArr) => {
dispatch(profiles(profileArr))
setIsLoadingMore(false)
})
fetchSkills({ link: `${process.env.REACT_APP_API_URL}/api/skills/skills-on-main-page`, history, role, logout: dispatch(auth(false)) }).then((skills) => { fetchGet({
if(!skills) { return [] } link: `${process.env.REACT_APP_API_URL}/api/skills/skills-on-main-page`,
const keys = Object.keys(skills); history,
const values = Object.values(skills); role,
logout: () => dispatch(auth(false))
}).then((skills) => {
if (!skills) {
return []
}
const keys = Object.keys(skills)
const values = Object.values(skills)
const tempTags = values.map((value, index) => const tempTags = values.map((value, index) =>
value.map((val) => { value.map((val) => {
return { id: val.id, value: val.tags, name: keys[index] }; return { id: val.id, value: val.tags, name: keys[index] }
}) })
); )
dispatch(tags(tempTags)); dispatch(tags(tempTags))
}); })
}, [dispatch, index]); }, [dispatch, index])
const loadMore = (count) => { const loadMore = (count) => {
setIndex((prev) => prev + count); setIndex((prev) => prev + count)
}; }
return ( return (
<> <>
@ -47,7 +60,7 @@ const Home = () => {
<Description onLoadMore={loadMore} isLoadingMore={isLoadingMore} /> <Description onLoadMore={loadMore} isLoadingMore={isLoadingMore} />
<Footer /> <Footer />
</> </>
); )
}; }
export default Home; export default Home

View File

@ -1,18 +0,0 @@
import React from 'react';
import style from './InputsComponent.module.css';
const InputsComponent = ({ inputsArr, deleteInput, remove }) =>
inputsArr.map((input) => (
<form id={input} key={input} className={style.reportForm__form}>
{/* <span>{input}.</span> */}
<div className={style.input__text}>
<input name="text" type="text" />
</div>
<div className={style.input__number}>
<input name="number" type="number" min="1" />
</div>
<img onClick={() => deleteInput(input)} src={remove} alt="" />
</form>
));
export default InputsComponent;

View File

@ -1,69 +0,0 @@
.reportForm__form {
position: relative;
display: flex;
justify-content: space-between;
margin-left: 14px;
margin-bottom: 28px;
}
.reportForm__form > span {
font-family: 'GT Eesti Pro Display';
font-size: 2em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
text-align: left;
position: absolute;
left: 0;
bottom: 7px;
}
.input__text,
.input__number {
display: flex;
flex-direction: column;
margin-left: 20px;
}
.input__text > input {
width: 460px;
height: 42px;
box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
border-radius: 5px;
border: 1px solid #c4c4c4;
background-color: #ffffff;
outline: none;
font-size: 1.8em;
padding-left: 20px;
padding-right: 20px;
}
@media (max-width: 575.98px) {
.input__text > input {
max-width: 460px;
}
}
.input__number > input {
width: 141px;
height: 42px;
box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
border-radius: 5px;
border: 1px solid #c4c4c4;
background-color: #ffffff;
outline: none;
font-size: 1.8em;
text-align: center;
}
@media (max-width: 575.98px) {
.input__number > input {
max-width: 141px;
}
}
.reportForm__form > img {
margin-top: 5px;
width: 23px;
height: 23px;
}

View File

@ -1,15 +1,10 @@
import SVGLoader from "react-loader-spinner"; import SVGLoader from 'react-loader-spinner'
import './loader.css' import './loader.scss'
export const Loader = ({ width=50, height=50 }) => { export const Loader = ({ width = 50, height = 50 }) => {
return ( return (
<div className='loader'> <div className='loader'>
<SVGLoader <SVGLoader type='Circles' color='#fff' height={height} width={width} />
type="Circles" </div>
color="#fff" )
height={height}
width={width}
/>
</div>
);
} }

View File

@ -1,11 +0,0 @@
.loader {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.loader:hover path {
fill: #6aaf5c;
}

View File

@ -0,0 +1,13 @@
.loader {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
&:hover {
path {
fill: #6aaf5c;
}
}
}

View File

@ -1,31 +1,31 @@
import React, { useState } from 'react'; import React, { useState } from 'react'
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch, useSelector } from 'react-redux'
import { Loader } from '../Loader/Loader'; import { Loader } from '../Loader/Loader'
import { auth } from '../../redux/outstaffingSlice'; import { auth } from '../../redux/outstaffingSlice'
import { getRole } from '../../redux/roleSlice'; import { getRole } from '../../redux/roleSlice'
import './logoutButton.css' import './logoutButton.scss'
export const LogoutButton = () => { export const LogoutButton = () => {
const [isLoggingOut, setIsLoggingOut] = useState(false); const [isLoggingOut, setIsLoggingOut] = useState(false)
const dispatch = useDispatch(); const dispatch = useDispatch()
const userRole = useSelector(getRole); const userRole = useSelector(getRole)
const history = useHistory(); const history = useHistory()
return ( return (
<div className='logout-button'> <div className='logout-button'>
<button onClick={()=>{ <button
setIsLoggingOut(true); onClick={() => {
localStorage.clear(); setIsLoggingOut(true)
dispatch(auth(false)); localStorage.clear()
setIsLoggingOut(false); dispatch(auth(false))
history.push(userRole === 'ROLE_DEV' ? '/authdev' : '/auth') setIsLoggingOut(false)
}}> history.push(userRole === 'ROLE_DEV' ? '/authdev' : '/auth')
}}
{ >
isLoggingOut ? <Loader /> : 'Выйти' {isLoggingOut ? <Loader /> : 'Выйти'}{' '}
} </button> </button>
</div> </div>
) )
} }

View File

@ -1,11 +1,10 @@
.logout-button { .logout-button {
position: absolute; position: absolute;
top: 70px; top: 70px;
right: 2.5rem; right: 2.5rem;
z-index: 100; z-index: 100;
}
.logout-button button { button {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -21,19 +20,21 @@
border: 3px solid #6aaf5c; border: 3px solid #6aaf5c;
font-family: 'Muller'; font-family: 'Muller';
text-align: center; text-align: center;
} }
.logout-button:hover button { &:hover {
background-color: #ffffff; button {
color: #6aaf5c; background-color: #ffffff;
border: 3px solid #6aaf5c; color: #6aaf5c;
box-shadow: 3px 2px 5px rgba(82, 151, 34, 0.21); border: 3px solid #6aaf5c;
transition: .3s; box-shadow: 3px 2px 5px rgba(82, 151, 34, 0.21);
transition: 0.3s;
}
}
} }
@media (max-width: 1199px) { @media (max-width: 1199px) {
.logout-button { .logout-button {
top: 16px !important; top: 16px !important;
} }
} }

View File

@ -1,78 +1,96 @@
import React, { useState } from 'react'; import React, { useState } from 'react'
import { useSelector, useDispatch } from 'react-redux'; import { useSelector, useDispatch } from 'react-redux'
import style from './Outstaffing.module.css'; import OutstaffingBlock from '../OutstaffingBlock/OutstaffingBlock'
import OutstaffingBlock from './OutstaffingBlock'; import TagSelect from '../Select/TagSelect'
import TagSelect from '../Select/TagSelect'; import {
import { selectTags, getPositionId, setPositionId } from '../../redux/outstaffingSlice'; selectTags,
import front from '../../images/front_end.png'; getPositionId,
import back from '../../images/back_end.png'; setPositionId
import design from '../../images/design.png'; } from '../../redux/outstaffingSlice'
import front from '../../images/front_end.png'
import back from '../../images/back_end.png'
import design from '../../images/design.png'
import './outstaffing.scss'
const createSelectPositionHandler =
const createSelectPositionHandler = ({ positionId, setPositionId, dispatch }) => id => { ({ positionId, setPositionId, dispatch }) =>
if(id===positionId) { (id) => {
dispatch(setPositionId(null)); if (id === positionId) {
} else { dispatch(setPositionId(null))
dispatch(setPositionId(id)); } else {
dispatch(setPositionId(id))
}
} }
}
const Outstaffing = () => { const Outstaffing = () => {
const dispatch = useDispatch(); const dispatch = useDispatch()
const positionId = useSelector(getPositionId) const positionId = useSelector(getPositionId)
const tagsArr = useSelector(selectTags); const tagsArr = useSelector(selectTags)
const onSelectPosition = createSelectPositionHandler({ positionId, setPositionId, dispatch }); const onSelectPosition = createSelectPositionHandler({
positionId,
setPositionId,
dispatch
})
return ( return (
<> <>
<section className={style.outstaffing}> <section className='outstaffing'>
<div className="row"> <div className='row'>
<div className="col-12"> <div className='col-12'>
<div className={style.outstaffing__title}> <div className='outstaffing__title'>
<h2> <h2>
<span>Аутстаффинг</span> it-персонала <span>Аутстаффинг</span> it-персонала
</h2> </h2>
</div>
</div> </div>
</div> </div>
</div>
<div className="row"> <div className='row'>
<div className="col-12 col-xl-4"> <div className='col-12 col-xl-4'>
<OutstaffingBlock <OutstaffingBlock
dataTags={tagsArr && tagsArr.flat().filter((tag) => tag.name === 'skills_front')} dataTags={
img={front} tagsArr &&
header="Frontend" tagsArr.flat().filter((tag) => tag.name === 'skills_front')
positionId='2' }
isSelected={positionId==='2'} img={front}
onSelect={id=>onSelectPosition(id)} header='Frontend'
/> positionId='2'
</div> isSelected={positionId === '2'}
<div className="col-12 col-xl-4"> onSelect={(id) => onSelectPosition(id)}
<OutstaffingBlock />
dataTags={tagsArr.flat().filter((tag) => tag.name === 'skills_back')}
img={back}
header="Backend"
positionId='1'
isSelected={positionId==='1'}
onSelect={id=>onSelectPosition(id)}
/>
</div>
<div className="col-12 col-xl-4">
<OutstaffingBlock
dataTags={tagsArr.flat().filter((tag) => tag.name === 'skills_design')}
img={design}
header="Дизайн"
positionId='5'
isSelected={positionId==='5'}
onSelect={id=>onSelectPosition(id)}
/>
</div>
</div> </div>
<div className='col-12 col-xl-4'>
<OutstaffingBlock
dataTags={
tagsArr &&
tagsArr.flat().filter((tag) => tag.name === 'skills_back')
}
img={back}
header='Backend'
positionId='1'
isSelected={positionId === '1'}
onSelect={(id) => onSelectPosition(id)}
/>
</div>
<div className='col-12 col-xl-4'>
<OutstaffingBlock
dataTags={
tagsArr &&
tagsArr.flat().filter((tag) => tag.name === 'skills_design')
}
img={design}
header='Дизайн'
positionId='5'
isSelected={positionId === '5'}
onSelect={(id) => onSelectPosition(id)}
/>
</div>
</div>
</section> </section>
<TagSelect /> <TagSelect />
</> </>
); )
}; }
export default Outstaffing; export default Outstaffing

View File

@ -1,174 +0,0 @@
.outstaffing__box__selected .outstaffing__box__img {
background-color: #52b70999;
color: #f9f9f9;
}
.outstaffing__title {
margin-top: 60px;
}
.outstaffing__title > h2 {
text-align: center;
color: #52b709;
font-family: 'GT Eesti Pro Display';
font-size: 5em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 77.81px;
}
@media (max-width: 375.98px) {
.outstaffing__title > h2 {
font-size: 4.5em;
line-height: normal;
}
}
@media (min-width: 376px) {
.outstaffing__title > h2 {
font-size: 5em;
line-height: normal;
}
}
.outstaffing__title > h2 > span {
color: #282828;
font-style: normal;
letter-spacing: 0.56px;
line-height: normal;
}
.outstaffing__box {
margin-top: 60px;
display: flex;
flex-direction: column;
align-items: center;
}
@media (max-width: 575.98px) {
.outstaffing__box {
margin-top: 40px;
}
}
.outstaffing__box__img {
min-width: 260px;
min-height: 120px;
background-color: #f9f9f9;
border-radius: 20px;
position: relative;
}
.outstaffing__box__img > h3 {
position: absolute;
right: 25%;
top: 40%;
font-family: 'GT Eesti Pro Display';
font-size: 18px;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: normal;
text-align: left;
}
.outstaffing__box__img > img {
position: absolute;
}
.outstaffing__box > div {
margin-top: 60px;
}
.outstaffing__box > p {
font-family: 'GT Eesti Pro Display';
font-size: 1.2em;
font-weight: 300;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
text-align: left;
margin-bottom: 0;
}
@media (max-width: 575.98px) {
.outstaffing__box__text {
display: none;
}
}
.front {
left: -5%;
}
.back {
top: 11%;
left: -9%;
}
.des {
top: 24%;
left: -9%;
}
@media (max-width: 575.98px) {
.mobile__none {
display: none;
}
}
.mobile__block {
display: block;
animation: fadeInFromNone 0.5s ease-out;
}
@media (max-width: 575.98px) {
@keyframes fadeInFromNone {
0% {
display: none;
opacity: 0;
transform: translateY(-100px);
}
10% {
display: block;
opacity: 0;
transform: translateY(-50px);
}
100% {
display: block;
opacity: 1;
transform: translateY(0px);
}
}
}
.outstaffing__box > div > ul {
padding-left: 0;
}
.border {
border: 2px solid #cdeaba;
}
.items > li {
font-family: 'GT Eesti Pro Display';
font-size: 1.8em;
font-weight: 100;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
text-align: left;
list-style: none;
cursor: pointer;
}
@media (max-width: 1199px) {
.outstaffing__box {
margin-top: 0;
}
.outstaffing__box>div {
margin-top: 32px;
}
}

View File

@ -1,84 +0,0 @@
import React from 'react';
import OutsideClickHandler from 'react-outside-click-handler';
import { useDispatch, useSelector } from 'react-redux';
import { selectItems, selectedItems, filteredCandidates, auth } from '../../redux/outstaffingSlice';
import { fetchItemsForId } from '../../server/server';
import style from './Outstaffing.module.css';
import { fetchProfile } from '../../server/server';
import { useHistory } from 'react-router-dom';
import { getRole } from '../../redux/roleSlice';
const handlePositionClick = ({dispatch, positionId, isSelected, onSelect, history, role}) => {
if(isSelected) {
fetchProfile({ link: `${process.env.REACT_APP_API_URL}/api/profile?limit=`, index: 4, history, role, logout: dispatch(auth(false)) }).then((profileArr) => {
dispatch(filteredCandidates(profileArr));
dispatch(selectedItems([]));
onSelect(positionId);
}
);
} else {
fetchItemsForId({ link: `${process.env.REACT_APP_API_URL}/api/profile?position_id=`, index: positionId, history, role, logout: dispatch(auth(false)) }).then((el) => {
dispatch(filteredCandidates(el));
dispatch(selectedItems([]));
onSelect(positionId);
}
);
}
};
const OutstaffingBlock = ({ dataTags = [], selected, img, header, positionId, isSelected, onSelect }) => {
const history = useHistory();
const role = useSelector(getRole);
const dispatch = useDispatch();
const itemsArr = useSelector(selectItems);
const handleBlockClick = (item, id) => {
if (!itemsArr.find((el) => item === el.value)) {
dispatch(selectedItems([...itemsArr, { id, value: item, label: item }]));
}
};
let classes;
dataTags.forEach((el) => {
if (el.name === 'skills_back') {
classes = style.back;
} else if (el.name === 'skills_design') {
classes = style.des;
} else if (el.name === 'skills_front') {
classes = style.front;
}
});
return (
<OutsideClickHandler
onOutsideClick={() => {
isSelected && onSelect(null)
}}
>
<div className={`${style.outstaffing__box} ${isSelected?style.outstaffing__box__selected:''}`} >
<div className={`${style.outstaffing__box__img} ${selected ? style.border : ''}`} onClick={()=>handlePositionClick({dispatch, positionId, isSelected, onSelect, history, role})}>
<h3>{header}</h3>
<img className={classes} src={img} alt="img" />
</div>
<div className={`${selected ? style.mobile__block : style.mobile__none}`}>
<p className={style.outstaffing__box__text}># Популярный стек</p>
{dataTags && (
<ul className={style.items}>
{dataTags.map((item) => (
<li key={item.id} onClick={() => handleBlockClick(item.value, item.id)}>
{item.value}
</li>
))}
</ul>
)}
</div>
</div>
</OutsideClickHandler>
);
};
export default OutstaffingBlock;

View File

@ -0,0 +1,73 @@
.outstaffing {
&__title {
margin-top: 60px;
h2 {
text-align: center;
color: #52b709;
font-family: 'GT Eesti Pro Display';
font-size: 5em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 77.81px;
span {
color: #282828;
font-style: normal;
letter-spacing: 0.56px;
line-height: normal;
}
}
}
}
@media (max-width: 375.98px) {
.outstaffing__title > h2 {
font-size: 4.5em;
line-height: normal;
}
}
@media (min-width: 376px) {
.outstaffing__title > h2 {
font-size: 5em;
line-height: normal;
}
}
.front {
left: -5%;
}
.back {
top: 11%;
left: -9%;
}
.des {
top: 24%;
left: -9%;
}
@media (max-width: 575.98px) {
@keyframes fadeInFromNone {
0% {
display: none;
opacity: 0;
transform: translateY(-100px);
}
10% {
display: block;
opacity: 0;
transform: translateY(-50px);
}
100% {
display: block;
opacity: 1;
transform: translateY(0px);
}
}
}

View File

@ -0,0 +1,141 @@
import React from 'react'
import OutsideClickHandler from 'react-outside-click-handler'
import { useDispatch, useSelector } from 'react-redux'
import {
selectItems,
selectedItems,
filteredCandidates,
auth
} from '../../redux/outstaffingSlice'
import { fetchGet } from '../../server/server'
import { useHistory } from 'react-router-dom'
import { getRole } from '../../redux/roleSlice'
import './outstaffingBlock.scss'
const handlePositionClick = ({
dispatch,
positionId,
isSelected,
onSelect,
history,
role
}) => {
if (isSelected) {
fetchGet({
link: `${process.env.REACT_APP_API_URL}/api/profile?limit=`,
params: 4,
history,
role,
logout: () => dispatch(auth(false))
}).then((profileArr) => {
dispatch(filteredCandidates(profileArr))
dispatch(selectedItems([]))
onSelect(positionId)
})
} else {
fetchGet({
link: `${process.env.REACT_APP_API_URL}/api/profile?position_id=`,
params: positionId,
history,
role,
logout: () => dispatch(auth(false))
}).then((el) => {
dispatch(filteredCandidates(el))
dispatch(selectedItems([]))
onSelect(positionId)
})
}
}
const OutstaffingBlock = ({
dataTags = [],
selected,
img,
header,
positionId,
isSelected,
onSelect
}) => {
const history = useHistory()
const role = useSelector(getRole)
const dispatch = useDispatch()
const itemsArr = useSelector(selectItems)
const handleBlockClick = (item, id) => {
if (!itemsArr.find((el) => item === el.value)) {
dispatch(selectedItems([...itemsArr, { id, value: item, label: item }]))
}
}
let classes
dataTags.forEach((el) => {
if (el.name === 'skills_back') {
classes = 'back'
} else if (el.name === 'skills_design') {
classes = 'des'
} else if (el.name === 'skills_front') {
classes = 'front'
}
})
return (
<OutsideClickHandler
onOutsideClick={() => {
isSelected && onSelect(null)
}}
>
<div
className={`outstaffing-block${
isSelected ? ' outstaffing-block__selected' : ''
}`}
>
<div
className={`outstaffing-block__img ${
selected ? ' outstaffing-block__border' : ''
}`}
onClick={() =>
handlePositionClick({
dispatch,
positionId,
isSelected,
onSelect,
history,
role
})
}
>
<h3>{header}</h3>
<img className={classes} src={img} alt='img' />
</div>
<div
className={`${
selected
? 'outstaffing-block__mobile--block'
: 'outstaffing-block__mobile--none'
}`}
>
<p className='outstaffing-block__text'># Популярный стек</p>
{dataTags && (
<ul className='outstaffing-block__items'>
{dataTags.map((item) => (
<li
key={item.id}
onClick={() => handleBlockClick(item.value, item.id)}
>
{item.value}
</li>
))}
</ul>
)}
</div>
</div>
</OutsideClickHandler>
)
}
export default OutstaffingBlock

View File

@ -0,0 +1,103 @@
.outstaffing-block__selected .outstaffing-block__img {
background-color: #52b70999;
color: #f9f9f9;
}
.outstaffing-block {
margin-top: 60px;
display: flex;
flex-direction: column;
align-items: center;
& > div {
margin-top: 60px;
& > ul {
padding-left: 0;
}
}
& > p {
font-family: 'GT Eesti Pro Display';
font-size: 1.2em;
font-weight: 300;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
text-align: left;
margin-bottom: 0;
}
&__img {
min-width: 260px;
min-height: 120px;
background-color: #f9f9f9;
border-radius: 20px;
position: relative;
h3 {
position: absolute;
right: 25%;
top: 40%;
font-family: 'GT Eesti Pro Display';
font-size: 18px;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: normal;
text-align: left;
}
img {
position: absolute;
}
}
&__mobile--block {
display: block;
animation: fadeInFromNone 0.5s ease-out;
}
&__border {
border: 2px solid #cdeaba;
}
&__items {
li {
font-family: 'GT Eesti Pro Display';
font-size: 1.8em;
font-weight: 100;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
text-align: left;
list-style: none;
cursor: pointer;
}
}
}
@media (max-width: 575.98px) {
.outstaffing-block__mobile--none {
display: none;
}
}
@media (max-width: 1199px) {
.outstaffing-block {
margin-top: 0;
& > div {
margin-top: 32px;
}
}
}
@media (max-width: 575.98px) {
.outstaffing-block {
margin-top: 40px;
&____text {
display: none;
}
}
}

View File

@ -1,93 +1,175 @@
import React, { useState } from 'react'; import React, { useState } from 'react'
import style from './ReportForm.module.css'; import { useSelector, useDispatch } from 'react-redux'
import calendarIcon from '../../images/calendar_icon.png'; import { fetchPost } from '../../server/server'
import ellipse from '../../images/ellipse.png'; import { useHistory, useParams, Redirect } from 'react-router-dom'
import remove from '../../images/remove.png'; import { Loader } from '../Loader/Loader'
import addIcon from '../../images/addIcon.png'; import { auth } from '../../redux/outstaffingSlice'
import { currentMonthAndDayReportPage } from '../Calendar/calendarHelper'; import { getRole } from '../../redux/roleSlice'
import InputsComponent from '../InputsComponent/InputsComponent'; import calendarIcon from '../../images/calendar_icon.png'
import ellipse from '../../images/ellipse.png'
import remove from '../../images/remove.png'
import addIcon from '../../images/addIcon.png'
import { currentMonthAndDayReportPage } from '../Calendar/calendarHelper'
import './reportForm.scss'
const getCreatedDate = () => {
const date = new Date();
const dd = String(date.getDate()).padStart(2, '0')
const mm = String(date.getMonth() + 1).padStart(2, '0')
const yyyy = date.getFullYear()
return `${yyyy}-${mm}-${dd}`
}
const ReportForm = () => { const ReportForm = () => {
const [inputs, setInputs] = useState([1]); const dispatch = useDispatch()
const history = useHistory()
const role = useSelector(getRole)
const [isFetching, setIsFetching] = useState(false)
const [inputs, setInputs] = useState([ { task: '', hours_spent: '', minutes_spent: 0 } ]);
const [troublesInputValue, setTroublesInputValue] = useState('');
const [scheduledInputValue, setScheduledInputValue] = useState('');
const addInput = () => { const addInput = () => {
const lastElement = inputs[inputs.length - 1]; setInputs((prev) => [...prev, { task: '', hours_spent: '', minutes_spent: 0 }])
}
setInputs((prev) => [...prev, lastElement + 1]); const deleteInput = (indexRemove) => {
}; if (indexRemove !== 1) {
setInputs((prev) => prev.filter((el, index) => index !== indexRemove))
const deleteInput = (id) => {
if (id !== 1) {
setInputs((prev) => prev.filter((el) => el !== id));
} }
}; }
return ( return (
<section className="reportForm"> <section className='report-form'>
<div className="row"> <div className='row'>
<div className="col-xl-12"> <div className='col-xl-12'>
<div className={style.reportForm__block}> <div className='report-form__block'>
<div className={style.reportForm__blockTitle}> <div className='report-form__block-title'>
<h2>Добавить отчет</h2> <h2>Добавить отчет</h2>
<h3>Дата заполнения отчета:</h3> <h3>Дата заполнения отчета:</h3>
</div> </div>
<div className={style.reportForm__blockImg}> <div className='report-form__block-img'>
<img className={style.calendarIcon} src={calendarIcon} alt="" /> <img
{currentMonthAndDayReportPage()} className='report-form__calendar-icon'
</div> src={calendarIcon}
<div className={style.reportForm__tasks}> alt=''
<img src={ellipse} alt="" /> />
<span>Какие задачи были выполнены?</span> {currentMonthAndDayReportPage()}
</div> </div>
<div className='report-form__task-list'>
<img src={ellipse} alt='' />
<span>Какие задачи были выполнены?</span>
</div> </div>
</div> </div>
</div> </div>
</div>
<div className="row"> <div className='row'>
<div className="col-8"> <div className='col-8'>
<div className={style.reportForm__text}> <div className='report-form__task-header'>
<p className={style.text1}>Краткое описание задачи</p> <p className='report-form__task-title--description'>
<p className={style.text2}>Количество часов</p> Краткое описание задачи
</div> </p>
<InputsComponent deleteInput={deleteInput} inputsArr={inputs} remove={remove} /> <p className='report-form__task-title--hours'>Количество часов</p>
<div className={style.reportForm__formAdd}>
<img onClick={addInput} src={addIcon} alt="" />
<span>Добавить еще </span>
</div>
</div> </div>
<div className="col-4"></div>
</div>
<div className="row"> {inputs.map((input, index) => {
<div className="col-12"> return (
<div className={style.reportForm__inptuBox}> <form id={'input'} key={`input__${index}`} className='report-form__task-form'>
<div className={style.reportForm__tasks}> <div className='report-form__task-number'>
<img src={ellipse} alt="" /> {index+1}.
<span>Какие сложности возникли?</span> </div>
</div> <div className='report-form__task-input report-form__task-input--description'>
<input type="text" /> <input name='text' type='text' onChange={ e => setInputs(inputs.map( (input, inputIndex) => {
<div className={style.reportForm__tasks}> return index === inputIndex
<img src={ellipse} alt="" /> ? {
<span>Что планируется сделать завтра?</span> ...input,
</div> task: e.target.value
<input type="text" /> }
</div> : input
}))} />
</div>
<div className='report-form__task-input report-form__task-input--hours'>
<input name='number' type='number' min='1' onChange={ e => setInputs(inputs.map( (input, inputIndex) => {
return index === inputIndex
? {
...input,
hours_spent: Number(e.target.value)
}
: input
}))} />
</div>
<div className='report-form__task-remove'>
<img onClick={() => deleteInput(index)} src={remove} alt='' />
</div>
</form>
)
})}
<div className='report-form__form-add'>
<img onClick={addInput} src={addIcon} alt='' />
<span>Добавить еще </span>
</div> </div>
</div> </div>
<div className="row"> <div className='col-4'></div>
<div className="col-12"> </div>
<div className={style.reportForm__footer}>
<button className={style.reportForm__footer__btn} type="submit"> <div className='row'>
Отправить <div className='col-12'>
</button> <div className='report-form__input-box'>
<p className={style.reportForm__footer__text}> <div className='report-form__troubles'>
Всего за день : <span>60 часов</span> <img src={ellipse} alt='' />
</p> <span>Какие сложности возникли?</span>
</div> </div>
<input type='text' value={troublesInputValue} onChange={e => setTroublesInputValue(e.target.value)} />
<div className='report-form__scheduled'>
<img src={ellipse} alt='' />
<span>Что планируется сделать завтра?</span>
</div>
<input type='text' value={scheduledInputValue} onChange={e => setScheduledInputValue(e.target.value)} />
</div> </div>
</div> </div>
</div>
<div className='row'>
<div className='col-12'>
<div className='report-form__footer'>
<button className='report-form__footer-btn' onClick={() => {
fetchPost({
link: `${process.env.REACT_APP_API_URL}/api/reports/create`,
history,
role,
body: {
tasks: inputs,
difficulties: troublesInputValue,
tomorrow: scheduledInputValue,
created_at: getCreatedDate(),
status: 1,
},
logout: () => dispatch(auth(false))
}).then((res) =>
res.json().then((resJSON) => {
setInputs( () => [] )
setTroublesInputValue('');
setScheduledInputValue('');
setIsFetching(false)
setInputs(() => [ { task: '', hours_spent: '', minutes_spent: 0 } ]);
})
)
}}>
{isFetching ? <Loader /> : 'Отправить'}
</button>
<p className='report-form__footer-text'>
Всего за день : <span>60 часов</span>
</p>
</div>
</div>
</div>
</section> </section>
); )
}; }
export default ReportForm; export default ReportForm

View File

@ -1,172 +0,0 @@
.reportForm__blockTitle {
margin-top: 76px;
}
.reportForm__blockTitle > h2 {
color: #282828;
font-family: 'GT Eesti Pro Display';
font-size: 3.3em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 48.74px;
text-align: left;
}
.reportForm__blockTitle > h3 {
font-family: 'GT Eesti Pro Display';
font-size: 2.1em;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 30px;
text-align: left;
margin-top: 52px;
margin-bottom: 35px;
}
.reportForm__blockImg {
width: 280px;
height: 42px;
box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
border-radius: 5px;
border: 1px solid #398208;
background-color: #ffffff;
display: flex;
align-items: center;
font-family: 'GT Eesti Pro Display';
font-size: 13px;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: normal;
text-align: left;
}
.reportForm__blockImg > img {
margin-left: 20px;
margin-right: 20px;
}
.reportForm__tasks {
margin-top: 40px;
display: flex;
align-items: center;
}
.reportForm__tasks > img {
width: 6px;
height: 6px;
margin-left: 12px;
margin-right: 12px;
}
.reportForm__tasks > span {
color: #18586e;
font-family: 'GT Eesti Pro Display';
font-size: 2em;
font-weight: 500;
font-style: normal;
letter-spacing: normal;
line-height: 16.81px;
text-align: left;
}
.reportForm__text {
display: flex;
justify-content: space-between;
margin-top: 40px;
}
.reportForm__text > p {
font-family: 'GT Eesti Pro Display';
font-size: 1.3em;
font-weight: 100;
font-style: normal;
letter-spacing: normal;
line-height: normal;
text-align: left;
margin-bottom: 26px;
}
.text1 {
margin-left: 20px;
}
.text2 {
margin-right: 86px;
}
.reportForm__formAdd {
margin-left: 28px;
}
.reportForm__formAdd > span {
font-family: 'GT Eesti Pro Display';
font-size: 1.3em;
font-weight: 100;
font-style: normal;
letter-spacing: normal;
line-height: normal;
text-align: left;
margin-left: 20px;
}
.reportForm__inptuBox > input {
margin-left: 10px;
margin-top: 30px;
margin-bottom: 40px;
width: 460px;
height: 42px;
box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
border-radius: 5px;
border: 1px solid #c4c4c4;
background-color: #ffffff;
font-size: 1.8em;
padding-left: 20px;
padding-right: 20px;
outline: none;
}
.reportForm__footer {
display: flex;
align-items: center;
}
.reportForm__footer__btn {
width: 166px;
height: 62px;
box-shadow: 6px 5px 20px rgba(82, 151, 34, 0.21);
border-radius: 31px;
background-color: #ffffff;
background-image: linear-gradient(to top, #6aaf5c 0%, #52b709 100%),
linear-gradient(
36deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.16) 47%,
rgba(255, 255, 255, 0.17) 50%,
rgba(255, 255, 255, 0) 100%
);
color: #ffffff;
font-family: 'Muller';
font-size: 1.6em;
letter-spacing: normal;
text-align: center;
border: none;
}
.reportForm__footer__text {
font-family: 'GT Eesti Pro Display';
font-size: 1.9em;
font-weight: 600;
font-style: normal;
letter-spacing: normal;
line-height: 22.38px;
text-align: left;
margin-left: 40px;
margin-bottom: 0;
}
.reportForm__footer__text > span {
font-weight: 100;
}

View File

@ -0,0 +1,310 @@
.report-form {
&__block-title {
margin-top: 76px;
h2 {
color: #282828;
font-family: 'GT Eesti Pro Display';
font-size: 3.3em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 48.74px;
text-align: left;
}
h3 {
font-family: 'GT Eesti Pro Display';
font-size: 2.1em;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 30px;
text-align: left;
margin-top: 52px;
margin-bottom: 35px;
}
}
&__block-img {
width: 280px;
height: 42px;
box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
border-radius: 5px;
border: 1px solid #398208;
background-color: #ffffff;
display: flex;
align-items: center;
font-family: 'GT Eesti Pro Display';
font-size: 13px;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: normal;
text-align: left;
img {
margin-left: 20px;
margin-right: 20px;
}
}
&__task {
&-number {
height: 14px;
color: #282828;
font-family: "GT Eesti Pro Display";
font-size: 20px;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 48.74px;
width: 40px;
}
&-list {
margin-top: 40px;
display: flex;
align-items: center;
& > span {
color: #18586e;
font-family: 'GT Eesti Pro Display';
font-size: 2em;
font-weight: 500;
font-style: normal;
letter-spacing: normal;
line-height: 16.81px;
text-align: left;
}
img {
width: 6px;
height: 6px;
margin-left: 12px;
margin-right: 12px;
}
}
&-header {
display: flex;
justify-content: flex-start;
margin-top: 40px;
margin-left: 50px;
p {
font-family: 'GT Eesti Pro Display';
font-size: 1.3em;
font-weight: 100;
font-style: normal;
letter-spacing: normal;
line-height: normal;
text-align: left;
margin-bottom: 26px;
}
}
&-title {
&--description {
margin-left: 20px;
}
&--hours {
margin-left: 330px;
}
}
&-remove {
margin-left: 20px;
display: flex;
align-items: center;
}
&-form {
display: flex;
margin-left: 20px;
margin-bottom: 28px;
}
&-input {
display: flex;
flex-direction: column;
margin-left: 20px;
&--description {
input {
width: 460px;
height: 42px;
box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
border-radius: 5px;
border: 1px solid #c4c4c4;
background-color: #ffffff;
outline: none;
font-size: 1.8em;
padding-left: 20px;
padding-right: 20px;
}
}
&--hours {
input {
width: 141px;
height: 42px;
box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
border-radius: 5px;
border: 1px solid #c4c4c4;
background-color: #ffffff;
outline: none;
font-size: 1.8em;
text-align: center;
}
}
}
}
&__form-add {
margin-left: 28px;
span {
font-family: 'GT Eesti Pro Display';
font-size: 1.3em;
font-weight: 100;
font-style: normal;
letter-spacing: normal;
line-height: normal;
text-align: left;
margin-left: 20px;
}
}
&__input-box {
input {
margin-left: 10px;
margin-top: 30px;
margin-bottom: 20px;
width: 460px;
height: 42px;
box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
border-radius: 5px;
border: 1px solid #c4c4c4;
background-color: #ffffff;
font-size: 1.8em;
padding-left: 20px;
padding-right: 20px;
outline: none;
}
}
&__tasks,
&__troubles,
&__scheduled {
margin-top: 40px;
display: flex;
align-items: center;
span {
color: #18586e;
font-family: 'GT Eesti Pro Display';
font-size: 2em;
font-weight: 500;
font-style: normal;
letter-spacing: normal;
line-height: 16.81px;
text-align: left;
}
img {
width: 6px;
height: 6px;
margin-left: 12px;
margin-right: 12px;
}
}
&__footer {
display: flex;
align-items: center;
margin-top: 20px;
&-btn {
width: 166px;
height: 62px;
box-shadow: 6px 5px 20px rgba(82, 151, 34, 0.21);
border-radius: 31px;
background-color: #ffffff;
background-image: linear-gradient(to top, #6aaf5c 0%, #52b709 100%),
linear-gradient(
36deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.16) 47%,
rgba(255, 255, 255, 0.17) 50%,
rgba(255, 255, 255, 0) 100%
);
color: #ffffff;
font-family: 'Muller';
font-size: 1.6em;
letter-spacing: normal;
text-align: center;
border: none;
}
&-text {
font-family: 'GT Eesti Pro Display';
font-size: 1.9em;
font-weight: 600;
font-style: normal;
letter-spacing: normal;
line-height: 22.38px;
text-align: left;
margin-left: 40px;
margin-bottom: 0;
span {
font-weight: 100;
}
}
}
&__form {
position: relative;
display: flex;
justify-content: space-between;
margin-left: 14px;
margin-bottom: 28px;
span {
font-family: 'GT Eesti Pro Display';
font-size: 2em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
text-align: left;
position: absolute;
left: 0;
bottom: 7px;
}
img {
margin-top: 5px;
width: 23px;
height: 23px;
}
}
}
@media (max-width: 575.98px) {
.report-form {
&__task {
&-input {
&--description {
max-width: 460px;
}
&--hours {
max-width: 141px;
}
}
}
}
}

View File

@ -1,64 +1,90 @@
import React, { useState } from 'react'; import React, { useState } from 'react'
import { useSelector, useDispatch } from 'react-redux'; import { useSelector, useDispatch } from 'react-redux'
import Select from 'react-select'; import Select from 'react-select'
import { Loader } from '../Loader/Loader'; import { Loader } from '../Loader/Loader'
import style from './TagSelect.module.css'; import style from './TagSelect.module.css'
import { selectedItems, selectItems, selectTags, filteredCandidates, setPositionId, auth } from '../../redux/outstaffingSlice'; import {
import { fetchItemsForId } from '../../server/server'; selectedItems,
import { useHistory } from 'react-router-dom'; selectItems,
import { getRole } from '../../redux/roleSlice'; selectTags,
filteredCandidates,
setPositionId,
auth
} from '../../redux/outstaffingSlice'
import { fetchGet } from '../../server/server'
import { useHistory } from 'react-router-dom'
import { getRole } from '../../redux/roleSlice'
const TagSelect = () => { const TagSelect = () => {
const history = useHistory; const history = useHistory
const role = useSelector(getRole); const role = useSelector(getRole)
const [searchLoading, setSearchLoading] = useState(false); const [searchLoading, setSearchLoading] = useState(false)
const dispatch = useDispatch(); const dispatch = useDispatch()
const itemsArr = useSelector(selectItems); const itemsArr = useSelector(selectItems)
const tagsArr = useSelector(selectTags); const tagsArr = useSelector(selectTags)
const handleSubmit = ({ dispatch, setSearchLoading }) => { const handleSubmit = ({ dispatch, setSearchLoading }) => {
setSearchLoading(true) setSearchLoading(true)
dispatch(setPositionId(null)); dispatch(setPositionId(null))
const filterItemsId = itemsArr.map((item) => item.id).join(); const filterItemsId = itemsArr.map((item) => item.id).join()
fetchItemsForId({ link: `${process.env.REACT_APP_API_URL}/api/profile?skills=`, index: filterItemsId, history, role, logout: dispatch(auth(false)) }).then((el) => { fetchGet({
link: `${process.env.REACT_APP_API_URL}/api/profile?skills=`,
params: filterItemsId,
history,
role,
logout: () => dispatch(auth(false))
}).then((el) => {
dispatch(filteredCandidates(el)) dispatch(filteredCandidates(el))
setSearchLoading(false) setSearchLoading(false)
}); })
// dispatch(selectedItems([])); // dispatch(selectedItems([]));
}; }
return ( return (
<> <>
<section className={style.search}> <section className={style.search}>
<div className="row"> <div className='row'>
<div className="col-12"> <div className='col-12'>
<h2 className={style.search__title}>Найти специалиста по навыкам</h2> <h2 className={style.search__title}>
<div className={style.search__box}> Найти специалиста по навыкам
<Select </h2>
value={itemsArr} <div className={style.search__box}>
onChange={(value) => dispatch(selectedItems(value))} <Select
isMulti value={itemsArr}
name="tags" onChange={(value) => dispatch(selectedItems(value))}
className={style.select} isMulti
classNamePrefix={style.select} name='tags'
options={tagsArr.flat().map((item) => { className={style.select}
return { id: item.id, value: item.value, label: item.value }; classNamePrefix={style.select}
})} options={
/> tagsArr &&
<button onClick={()=>handleSubmit({dispatch, setSearchLoading})} type="submit" className={style.search__submit}> tagsArr.flat().map((item) => {
{ searchLoading ? <Loader width={30} height={30} /> : 'Поиск' } return {
</button> id: item.id,
</div> value: item.value,
label: item.value
}
})
}
/>
<button
onClick={() => handleSubmit({ dispatch, setSearchLoading })}
type='submit'
className={style.search__submit}
>
{searchLoading ? <Loader width={30} height={30} /> : 'Поиск'}
</button>
</div> </div>
</div> </div>
</div>
</section> </section>
</> </>
); )
}; }
export default TagSelect; export default TagSelect

View File

@ -0,0 +1,18 @@
import React from 'react'
import './skillSection.scss'
const SkillSection = ({ skillsArr }) => {
return (
<div className='skill-section'>
<h3>Навыки:</h3>
<ul>
{skillsArr &&
skillsArr.map((skills) => (
<li key={skills.id}>{skills.skill.name}</li>
))}
</ul>
</div>
)
}
export default SkillSection

View File

@ -0,0 +1,42 @@
.skill-section {
display: flex;
border: 1px solid #69bf2c;
padding: 28px 40px 16px 30px;
margin-top: 60px;
border-radius: 10px;
margin-bottom: 60px;
h3 {
font-family: 'GT Eesti Pro Display';
font-size: 1.8em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 28px;
text-align: left;
}
ul {
list-style: none;
display: flex;
padding-left: 0;
flex-wrap: wrap;
li {
font-family: 'GT Eesti Pro Display';
font-size: 1.8em;
font-weight: 100;
font-style: normal;
letter-spacing: normal;
line-height: 28px;
text-align: left;
margin-left: 20px;
}
}
}
@media (max-width: 575.98px) {
.skill-section {
display: none;
}
}

1
src/images/calendar.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16"><g><g><image width="16" height="16" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAfUlEQVQ4jeXSMQrCUBCE4S9tII1HsU7hyXIQD+EZPEDwLIJi9Yg2+1QQMftaB/5iB3bYgeWlTaDBA1OQ9vYouCcpsWvB0HDBgJtI+9btl3euAcdGSg3YNXJ9rwDbYO38rFB1CNbOHwH/fEEnrw4XOGGWf6I5dvUY5Z9oRP8AEMJY2tGN6tUAAAAASUVORK5CYII="/></g></g></svg>

After

Width:  |  Height:  |  Size: 457 B

View File

Before

Width:  |  Height:  |  Size: 423 B

After

Width:  |  Height:  |  Size: 423 B

View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="5" height="9" viewBox="0 0 5 9"><g><g><image width="5" height="9" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAJCAYAAAD6reaeAAAAaklEQVQImVWOvRFAQBSE10jez6XXGCOkABrQBw0Q0w89CDRgnuDO3Nlw55tvF8ijPELpTIWTHkIG4TkS1ELIoLzCrAAcVxB6ILyjacrPc0P5gvcuc3EdyS2RwdkFpyzBmdaHuD79bsafxwt/CxfNS2+70AAAAABJRU5ErkJggg=="/></g></g></svg>

Before

Width:  |  Height:  |  Size: 427 B

View File

@ -1,82 +1,99 @@
import React, { useState } from 'react'; import React, { useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch, useSelector } from 'react-redux'
import { useHistory, useParams, Link } from 'react-router-dom'; import { useHistory, useParams, Link } from 'react-router-dom'
import { currentCandidate, selectCurrentCandidate, auth } from '../redux/outstaffingSlice'; import {
import SVG from 'react-inlinesvg'; currentCandidate,
import { WithLogout } from '../hoc/withLogout'; selectCurrentCandidate,
import Form from '../components/Form/Form'; auth
import { LEVELS, SKILLS } from '../components/constants/constants'; } from '../redux/outstaffingSlice'
import { fetchItemsForId } from '../server/server'; import SVG from 'react-inlinesvg'
import { Footer } from '../components/Footer/Footer'; import { WithLogout } from '../hoc/withLogout'
import Form from '../components/Form/Form'
import { LEVELS, SKILLS } from '../components/constants/constants'
import { fetchGet } from '../server/server'
import { Footer } from '../components/Footer/Footer'
import arrow from '../images/right-arrow.png'; import arrow from '../images/right-arrow.png'
import rectangle from '../images/rectangle_secondPage.png'; import rectangle from '../images/rectangle_secondPage.png'
import telegramIcon from '../images/telegram-icon.svg'; import telegramIcon from '../images/telegram-icon.svg'
import './formPage.scss'; import './formPage.scss'
import { getRole } from '../redux/roleSlice'; import { getRole } from '../redux/roleSlice'
const goBack = (history) => { const goBack = (history) => {
history.goBack(); history.goBack()
};
const FormPage = () => {
const params = useParams();
const history = useHistory();
const dispatch = useDispatch();
const candidate = useSelector(selectCurrentCandidate);
const role = useSelector(getRole);
if(!candidate.id) {
fetchItemsForId({ link: `${process.env.REACT_APP_API_URL}/api/profile/`, index: Number(params.id), history, role, logout: dispatch(auth(false)) }).then((el) =>
dispatch(currentCandidate(el))
);
}
return (
<WithLogout>
<div className='form-page'>
<div className='form-page__back'>
<div className='form-page__arrow' onClick={() => goBack(history)}>
<div className='form-page__arrow-img'>
<img src={arrow} alt="" />
</div>
<div className='form-page__back-to-candidate'>
<span>Вернуться к кандидату</span>
</div>
</div>
</div>
<div className='form-page__candidate'>
<div className='form-page__avatar'>
<img src={candidate.photo} />
</div>
<div className='form-page__candidate-info'>
<div className='form-page__position'>
<span>{candidate.specification} {SKILLS[candidate.position_id]}, {LEVELS[candidate.level]}</span>
</div>
<div className='form-page__selected'>
<img src={rectangle} />
<span>Выбранный кандидат</span>
</div>
</div>
</div>
<div className='form-page__interview'>
<div className='form-page__form'><Form /></div>
<div className='form-page__separator'>
<div className='form-page__line'></div>
<div className='form-page__option'>или</div>
</div>
<div className='form-page__telegram'>
<div className='form-page__telegram-text'>Заявка на собеседование через телеграм</div>
<div className='form-page__telegram-icon'>
<a href='https://t.me/st0kir' target='_blank'><SVG src={telegramIcon} /></a>
</div>
</div>
</div>
<Footer />
</div>
</WithLogout>
)
} }
export default FormPage; const FormPage = () => {
const params = useParams()
const history = useHistory()
const dispatch = useDispatch()
const candidate = useSelector(selectCurrentCandidate)
const role = useSelector(getRole)
if (!candidate.id) {
fetchGet({
link: `${process.env.REACT_APP_API_URL}/api/profile/`,
params: Number(params.id),
history,
role,
logout: () => dispatch(auth(false))
}).then((el) => dispatch(currentCandidate(el)))
}
return (
<WithLogout>
<div className='form-page'>
<div className='form-page__back'>
<div className='form-page__arrow' onClick={() => goBack(history)}>
<div className='form-page__arrow-img'>
<img src={arrow} alt='' />
</div>
<div className='form-page__back-to-candidate'>
<span>Вернуться к кандидату</span>
</div>
</div>
</div>
<div className='form-page__candidate'>
<div className='form-page__avatar'>
<img src={candidate.photo} />
</div>
<div className='form-page__candidate-info'>
<div className='form-page__position'>
<span>
{candidate.specification} {SKILLS[candidate.position_id]},{' '}
{LEVELS[candidate.level]}
</span>
</div>
<div className='form-page__selected'>
<img src={rectangle} />
<span>Выбранный кандидат</span>
</div>
</div>
</div>
<div className='form-page__interview'>
<div className='form-page__form'>
<Form />
</div>
<div className='form-page__separator'>
<div className='form-page__line'></div>
<div className='form-page__option'>или</div>
</div>
<div className='form-page__telegram'>
<div className='form-page__telegram-text'>
Заявка на собеседование через телеграм
</div>
<div className='form-page__telegram-icon'>
<a href='https://t.me/st0kir' target='_blank'>
<SVG src={telegramIcon} />
</a>
</div>
</div>
</div>
<Footer />
</div>
</WithLogout>
)
}
export default FormPage

View File

@ -4,11 +4,12 @@ import arrowLeft from '../images/right-arrow.png'
import SVG from 'react-inlinesvg' import SVG from 'react-inlinesvg'
import prevDateArrowIcon from '../images/prevDateArrow.svg' import dateArrowIcon from '../images/dateArrow.svg'
import nextDateArrowIcon from '../images/nextDateArrow.svg' import calendarIcon from '../images/calendar.svg'
import { TaskItem } from '../components/TaskItem/TaskItem'
import './singleReportPage.scss' import './singleReportPage.scss'
import { TaskItem } from '../components/TaskItem/TaskItem'
const tasks = [ const tasks = [
{ {
@ -41,16 +42,16 @@ const SingleReportPage = () => {
<div className='single-report-page__title-date'> <div className='single-report-page__title-date'>
<div className='single-report-page__title-date--prev'> <div className='single-report-page__title-date--prev'>
<button> <button>
<SVG src={prevDateArrowIcon} /> <SVG src={dateArrowIcon} />
</button> </button>
</div> </div>
<div className='single-report-page__title-date--actual'> <div className='single-report-page__title-date--actual'>
<img src='' /> <SVG src={calendarIcon} />
<p></p> <p>15 июня</p>
</div> </div>
<div className='single-report-page__title-date--next single-report-page__title-date--enabled'> <div className='single-report-page__title-date--next single-report-page__title-date--enabled'>
<button> <button>
<SVG src={nextDateArrowIcon} /> <SVG src={dateArrowIcon} />
</button> </button>
</div> </div>
</div> </div>

View File

@ -9,9 +9,9 @@
&-text { &-text {
margin-left: 3.1rem; margin-left: 3.1rem;
color: #000000; color: #000000;
font-family: 'GT Eesti Pro Display - Thin'; font-family: 'GT Eesti Pro Display';
font-size: 18px; font-size: 18px;
font-weight: 400; font-weight: 300;
letter-spacing: normal; letter-spacing: normal;
line-height: 36px; line-height: 36px;
text-align: left; text-align: left;
@ -40,6 +40,37 @@
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
&--prev {
transform: rotateZ(180deg);
}
&--actual {
width: 125px;
height: 42px;
box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
border-radius: 5px;
border: 1px solid #c4c4c4;
background-color: #f0f7e0;
display: flex;
justify-content: center;
align-items: center;
margin: 0 65px;
p {
margin-left: 10px;
margin-bottom: 0;
color: #000000;
font-family: "GT Eesti Pro Display";
font-size: 13px;
font-weight: 300;
font-style: normal;
letter-spacing: normal;
line-height: normal;
}
}
} }
button { button {
@ -47,7 +78,7 @@
outline: none; outline: none;
width: 31px; width: 31px;
height: 31px; height: 31px;
background-color: #f6f6f6; background-color: #54b611;
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
justify-content: center; justify-content: center;

View File

@ -1,17 +1,22 @@
export const withAuthRedirect = actionCall => ({link, index, history, role, logout}) => { export const withAuthRedirect =
return actionCall(link, index) (actionCall) =>
.then(res => { ({ link, params, history, role, logout, body }) => {
if(res.status && res.status == 401) { const linkWithParams = params
localStorage.clear(); ? `${link}?${new URLSearchParams(params)}`
logout(); : link
history.push(role === 'ROLE_DEV' ? '/authdev' : '/auth') ; return actionCall(linkWithParams, body)
} .then((res) => {
if (res.status && res.status == 401) {
localStorage.clear()
logout()
history.push(role === 'ROLE_DEV' ? '/authdev' : '/auth')
}
return res; return res
}) })
.catch(err => { .catch((err) => {
localStorage.clear(); localStorage.clear()
logout(); logout()
history.push(role === 'ROLE_DEV' ? '/authdev' : '/auth'); history.push(role === 'ROLE_DEV' ? '/authdev' : '/auth')
}) })
} }

View File

@ -1,59 +1,4 @@
import { withAuthRedirect } from "./authRedirect" import { withAuthRedirect } from './authRedirect'
export const fetchProfile = withAuthRedirect(async (link, index) => {
try {
const response = await fetch(`${link}${index}`, {
method: 'GET',
headers: {
// 'Access-Control-Request-Headers': 'authorization',
'Authorization': `Bearer ${localStorage.getItem('auth_token')}`,
// 'Origin': `${process.env.REACT_APP_BASE_URL}`,
}
})
let data = await response.json()
return data
} catch (error) {
console.log('Query error', error)
}
})
export const fetchSkills = withAuthRedirect(async (link) => {
try {
const response = await fetch(link, {
method: 'GET',
headers: {
// 'Access-Control-Request-Headers': 'authorization',
'Authorization': `Bearer ${localStorage.getItem('auth_token')}`,
// 'Origin': `${process.env.REACT_APP_BASE_URL}`,
}
})
let data = await response.json()
return data
} catch (error) {
console.log('Query error', error)
}
})
export const fetchItemsForId = withAuthRedirect(async (link, id) => {
console.log(`Bearer ${localStorage.getItem('auth_token')}`);
try {
const response = await fetch(`${link}${id}`, {
method: 'GET',
headers: {
// 'Access-Control-Request-Headers': 'authorization',
'Authorization': `Bearer ${localStorage.getItem('auth_token')}`,
// 'Origin': `${process.env.REACT_APP_BASE_URL}`,
}
})
let data = await response.json()
return data
} catch (error) {
console.log('Query error', error)
}
})
export const fetchForm = withAuthRedirect(async (link, info) => { export const fetchForm = withAuthRedirect(async (link, info) => {
try { try {
@ -61,9 +6,9 @@ export const fetchForm = withAuthRedirect(async (link, info) => {
method: 'POST', method: 'POST',
headers: { headers: {
// 'Access-Control-Request-Headers': 'authorization', // 'Access-Control-Request-Headers': 'authorization',
'Authorization': `Bearer ${localStorage.getItem('auth_token')}`, Authorization: `Bearer ${localStorage.getItem('auth_token')}`,
// 'Origin': `${process.env.REACT_APP_BASE_URL}`, Origin: `${process.env.REACT_APP_BASE_URL}`,
'Content-Type': 'application/json', 'Content-Type': 'application/json'
}, },
body: JSON.stringify(info) body: JSON.stringify(info)
}) })
@ -74,38 +19,98 @@ export const fetchForm = withAuthRedirect(async (link, info) => {
} }
}) })
export const fetchAuth = async ({ username, password, dispatch, catchError }) => { export const fetchAuth = async ({
const baseURL = process.env.REACT_APP_BASE_URL; username,
const apiURL = process.env.REACT_APP_API_URL; password,
dispatch,
catchError
}) => {
const baseURL = process.env.REACT_APP_BASE_URL
const apiURL = process.env.REACT_APP_API_URL
try { try {
const response = await fetch( const response = await fetch(`${apiURL}/api/user/login`, {
`${apiURL}/api/user/login`, method: 'POST',
{ mode: 'cors',
method: 'POST', headers: {
headers: { 'Access-Control-Request-Headers': 'authorization',
'Content-Type': 'application/json', 'Content-Type': 'application/json',
// 'Origin': `${baseURL}`, // Origin: `http://localhost`
}, },
body: JSON.stringify({ body: JSON.stringify({
username, username,
password password
}) })
} })
)
if(!response.ok) { if (!response.ok) {
catchError(); catchError()
return response.statusText; return response.statusText
} }
response response.json().then((resJSON) => {
.json() localStorage.setItem('auth_token', resJSON.access_token)
.then((resJSON) => { localStorage.setItem(
localStorage.setItem('auth_token', resJSON.access_token) 'access_token_expired_at',
localStorage.setItem('access_token_expired_at', resJSON.access_token_expired_at) resJSON.access_token_expired_at
dispatch(); )
}) dispatch()
})
} catch (error) { } catch (error) {
console.error('Error occured: ', error) console.error('Error occured: ', error)
} }
} }
export const fetchReportList = withAuthRedirect(async (link) => {
try {
const response = await fetch(
`https://guild.loc/api/reports/index?user_id=26&fromDate=2021-10-18`,
// link,
{
method: 'GET',
headers: {
Authorization: `Bearer ${localStorage.getItem('auth_token')}`
}
}
)
let data = await response.json()
return data
} catch (error) {
console.log('Query error', error)
}
})
export const fetchGet = withAuthRedirect(async (link) => {
try {
const response = await fetch(link, {
method: 'GET',
headers: {
Authorization: `Bearer ${localStorage.getItem('auth_token')}`
}
})
let data = await response.json()
return data
} catch (error) {
console.log('Query error', error)
}
})
export const fetchPost = withAuthRedirect(async (link, body) => {
console.log('i',body)
try {
const response = await fetch(link, {
method: 'POST',
headers: {
Authorization: `Bearer ${localStorage.getItem('auth_token')}`,
'Content-Type': 'application/json',
Origin: `http://localhost`
},
body: JSON.stringify(body)
})
return response
} catch (error) {
console.log('Query error', error)
}
})