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

Merge remote-tracking branch 'origin/lk_candidate' into candidate-area

Browse Source 
# Conflicts:
#	src/App.js
#	src/components/Footer/footer.scss
#	src/components/ProfileHeader/ProfileHeader.js
#	src/pages/AuthForCandidate/authForCandidate.scss
This commit is contained in:
Николай Полтщук
2023-04-19 20:37:40 +03:00
parent 69a3f9a1cf 9c847c3502
commit f4ada281da
60 changed files with 2268 additions and 742 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/pages/AuthForCandidate/authForCandidate.scss
View File

@ -6,7 +6,7 @@
.auth {
&__wrapper {
background: #FFFFFF;
background: #ffffff;
border-radius: 12px;
padding: 50px 0 35px 56px;
margin-top: 40px;
@ -55,7 +55,7 @@
input {
margin-bottom: 30px;
background: #EFF2F7;
background: #eff2f7;
border-radius: 8px;
min-width: 300px;
width: 100%;
@ -80,7 +80,7 @@
}
button {
background: #52B709;
background: #52b709;
border-radius: 44px;
max-width: 130px;
border: none;
@ -107,7 +107,7 @@
text-align: center;
span {
color: #52B709;
color: #52b709;
}
@media (max-width: 660px) {
@ -122,13 +122,19 @@
}
&__categoriesWrapper {
display: flex;
position: relative;
margin-top: 200px;
flex-wrap: wrap;
row-gap: 24px;
column-gap: 21px;
width: 100%;
display: grid;
grid-gap: 24px;
grid-template-columns: 1fr 1fr 1fr;
margin-bottom: 24px;
@media (max-width: 955px) {
grid-template-columns: 1fr 1fr;
}
@media (max-width: 668px) {
grid-template-columns: 1fr;
}
.categoriesItem {
@media (max-width: 1094px) {

2
src/pages/Home/Home.js
View File

@ -11,6 +11,7 @@ import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"
import {apiRequest} from "../../api/request";
import {Navigate} from "react-router-dom";
import { Navigation } from '../../components/Navigation/Navigation'
const Home = () => {
@ -58,6 +59,7 @@ const Home = () => {
return (
<>
<ProfileHeader/>
<Navigation />
<div className="catalog">
<div className='container'>
<ProfileBreadcrumbs links={[

2
src/pages/PartnerAddRequest/PartnerAddRequest.js
View File

@ -15,6 +15,7 @@ import deleteIcon from "../../images/close.png"
import './partnerAddRequest.scss'
import { Navigation } from '../../components/Navigation/Navigation';
export const PartnerAddRequest = () => {
if(localStorage.getItem('role_status') !== '18') {
@ -81,6 +82,7 @@ export const PartnerAddRequest = () => {
return (
<div className='partnerAddRequest'>
<ProfileHeader />
<Navigation />
<div className='container'>
<ProfileBreadcrumbs links={[
{name: 'Главная', link: '/profile'},

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

@ -18,6 +18,7 @@ import personImg from "../../images/mokPerson.png"
import deleteBtn from "../../images/deleteBtn.png"
import './partnerBid.scss'
import { Navigation } from '../../components/Navigation/Navigation';
export const PartnerBid = () => {
if(localStorage.getItem('role_status') !== '18') {
@ -62,6 +63,7 @@ export const PartnerBid = () => {
return (
<div className='partnerBid'>
<ProfileHeader />
<Navigation />
<div className='container'>
<ProfileBreadcrumbs links={[
{name: 'Главная', link: '/profile'},

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

@ -14,6 +14,7 @@ import {apiRequest} from "../../api/request";
import cursorImg from "../../images/cursorImg.png"
import './partnerRequests.scss'
import { Navigation } from '../../components/Navigation/Navigation';
export const PartnerRequests = () => {
if(localStorage.getItem('role_status') !== '18') {
@ -33,6 +34,7 @@ export const PartnerRequests = () => {
return (
<div className='partnerRequests'>
<ProfileHeader />
<Navigation />
<div className='container'>
<ProfileBreadcrumbs links={[
{name: 'Главная', link: '/profile'},

2
src/pages/PartnerSettings/PartnerSettings.js
View File

@ -7,11 +7,13 @@ import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
import kontur from "../../images/konturLogo.png";
import astral from "../../images/astralLogo.png";
import "./partnerSettings.scss";
import { Navigation } from "../../components/Navigation/Navigation";
export const PartnerSettings = () => {
return (
<div className="settings">
<ProfileHeader />
<Navigation />
<div className="container settings__page">
<ProfileBreadcrumbs
links={[

2
src/pages/PartnerTreaties/PartnerTreaties.js
View File

@ -15,6 +15,7 @@ import lockDone from "./Images/lockDone.svg"
import avatarMok from "./Images/avatarMok.png"
import './partnerTreaties.scss'
import { Navigation } from '../../components/Navigation/Navigation';
export const PartnerTreaties = () => {
const [toggleTab, setToggleTab] = useState(1);
@ -25,6 +26,7 @@ export const PartnerTreaties = () => {
return(
<div className="treaties">
<ProfileHeader/>
<Navigation />
<div className="container">
<ProfileBreadcrumbs
links={[

2
src/pages/PartnerСategories/PartnerСategories.js
View File

@ -22,6 +22,7 @@ import rightArrow from "../../images/arrowRight.png"
import avatarImg from "../PartnerEmployees/avatarMok.png";
import "./partnerСategories.scss"
import { Navigation } from '../../components/Navigation/Navigation';
export const PartnerCategories = () => {
const dispatch = useDispatch();
@ -130,6 +131,7 @@ export const PartnerCategories = () => {
return (
<div className="partnerCategories">
<ProfileHeader />
<Navigation />
<div className="container">
<ProfileBreadcrumbs links={[
{name: 'Главная', link: '/profile'},

2
src/pages/Payouts/Payouts.js
View File

@ -1,11 +1,13 @@
import React from 'react';
import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
import { Navigation } from '../../components/Navigation/Navigation';
export const Payouts = () => {
return (
<div className='payouts'>
<ProfileHeader />
<Navigation />
</div>
)
};

40
src/pages/Profile/Profile.js
View File

@ -20,6 +20,8 @@ import avatarMok from "../PartnerTreaties/Images/avatarMok.png"
import rightArrow from "../../images/arrowRight.png"
import './profile.scss'
import { CardControl } from '../../components/CardControl/CardControl';
import { Navigation } from '../../components/Navigation/Navigation';
export const Profile = () => {
@ -28,19 +30,19 @@ export const Profile = () => {
const [profileItemsInfo] = useState({
developer: [
{
path: '/calendar',
path: 'profile/calendar',
img: reportsIcon,
title: 'Ваша отчетность',
description: '<span></span>Отработанных в этом месяце часов'
},
{
path: '/summary',
path: 'profile/summary',
img: summaryIcon,
title: 'Данные и резюме',
description: 'Ваше резюме<br/><span>заполнено</span>'
},
{
path: '/tracker',
path: 'profile/tracker',
img: timerIcon,
title: 'Трекер времени',
description: 'Сколько времени занимает<br/> выполнение задач'
@ -52,7 +54,7 @@ export const Profile = () => {
description: 'У вас <span>подтвержден</span><br/> статус самозанятого'
},
{
path: '/settings',
path: 'profile/settings',
img: settingIcon,
title: 'Настройки аккаунта',
description: 'Перейдите чтобы начать<br/> редактирование'
@ -60,31 +62,31 @@ export const Profile = () => {
],
partner: [
{
path: '/requests',
path: 'profile/requests',
img: reportsIcon,
title: 'Запросы и открытые позиции',
description: '<span>У вас 2 вакансии<br/></span>открытые от лица компании'
},
{
path: '/categories',
path: 'profile/categories',
img: summaryIcon,
title: 'Данные персонала',
description: 'Наши специалисты <br/><span>уже работающие у вас</span>'
},
{
path: '/tracker',
path: 'profile/tracker',
img: timerIcon,
title: 'Трекер времени',
description: 'Контроль времени и<br/> выполнение задач'
},
{
path: '/treaties',
path: 'profile/treaties',
img: paymentIcon,
title: 'Договора и отчетность',
description: 'Ключевые условия<br/> договора'
},
{
path: '/settings',
path: 'profile/settings',
img: settingIcon,
title: 'Настройки аккаунта',
description: 'Перейдите чтобы начать<br/> редактирование'
@ -95,6 +97,7 @@ export const Profile = () => {
return (
<div className='profile'>
<ProfileHeader/>
<Navigation />
<div className='container'>
<ProfileBreadcrumbs links={[{name: 'Главная', link: '/profile'}]} />
<h2 className='profile__title'>
@ -119,18 +122,13 @@ export const Profile = () => {
<div className='profile__items'>
{
profileItemsInfo[user].map((item, index) => {
return <Link key={index} to={`/profile${item.path}`} className='item'>
<div className='item__about'>
<img src={item.img} alt='itemImg'/>
<h3>{item.title}</h3>
</div>
<div className='item__info'>
<p dangerouslySetInnerHTML={{__html: item.description}}></p>
<div className='item__infoLink'>
<img src={rightArrow} alt='arrow'/>
</div>
</div>
</Link>
return <CardControl
description={item.description}
img={item.img}
path={item.path}
title={item.title}
key={index}
/>
})
}
</div>

128
src/pages/Profile/profile.scss
View File

@ -49,79 +49,79 @@
justify-content: center;
}
.item {
max-width: 353px;
width: 100%;
padding: 35px 45px 15px 30px;
background: #FFFFFF;
border-radius: 12px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease;
// .item {
// max-width: 353px;
// width: 100%;
// padding: 35px 45px 15px 30px;
// background: #FFFFFF;
// border-radius: 12px;
// text-decoration: none;
// cursor: pointer;
// transition: all 0.3s ease;
&:hover {
box-shadow: 6px 5px 20px rgb(87 98 80 / 21%);
transform: scale(1.02);
}
// &:hover {
// box-shadow: 6px 5px 20px rgb(87 98 80 / 21%);
// transform: scale(1.02);
// }
@media (max-width: 1175px) {
width: 48%;
max-width: none;
}
// @media (max-width: 1175px) {
// width: 48%;
// max-width: none;
// }
@media (max-width: 925px) {
width: 100%;
padding: 15px 25px;
}
// @media (max-width: 925px) {
// width: 100%;
// padding: 15px 25px;
// }
&__about {
display: flex;
column-gap: 20px;
align-items: center;
margin-bottom: 30px;
// &__about {
// display: flex;
// column-gap: 20px;
// align-items: center;
// margin-bottom: 30px;
@media (max-width: 925px) {
margin-bottom: 15px;
}
// @media (max-width: 925px) {
// margin-bottom: 15px;
// }
h3 {
color: #000000;
font-weight: 500;
font-size: 18px;
line-height: 22px;
max-width: 125px;
margin-bottom: 0;
}
}
// h3 {
// color: #000000;
// font-weight: 500;
// font-size: 18px;
// line-height: 22px;
// max-width: 125px;
// margin-bottom: 0;
// }
// }
&__info {
display: flex;
justify-content: space-between;
align-items: center;
// &__info {
// display: flex;
// justify-content: space-between;
// align-items: center;
p {
font-weight: 700;
font-size: 12px;
line-height: 20px;
color: #000000;
margin-bottom: 0;
// p {
// font-weight: 700;
// font-size: 12px;
// line-height: 20px;
// color: #000000;
// margin-bottom: 0;
span {
color: #52B709;
font-weight: 700;
}
}
&Link {
width: 48px;
height: 48px;
background: #DDEEC6;
border-radius: 50px;
display: flex;
justify-content: center;
align-items: center;
}
}
}
// span {
// color: #52B709;
// font-weight: 700;
// }
// }
// &Link {
// width: 48px;
// height: 48px;
// background: #DDEEC6;
// border-radius: 50px;
// display: flex;
// justify-content: center;
// align-items: center;
// }
// }
// }
}
.container {

94
src/pages/ProfileCandidate/ProfileCandidate.js Normal file
View File

@ -0,0 +1,94 @@
import React, { useState } from 'react'
import './ProfileCandidate.scss'
import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
import { ProfileBreadcrumbs } from '../../components/ProfileBreadcrumbs/ProfileBreadcrumbs';
import { CardControl } from '../../components/CardControl/CardControl';
import settingIcon from "../../images/settingIcon.png"
import reportsIcon from "../../images/reports.png"
import noteIcon from "../../images/note.png"
import questionIcon from "../../images/question.png"
import medium_male from "../../images/medium_male.png"
import { Footer } from '../../components/Footer/Footer';
import { HeadBottom } from '../../components/features/Candidate-lk/HeadBottom';
export const ProfileCandidate = () => {
const [candidatsCardsControl] = useState([
{
path: 'quiz',
img: reportsIcon,
title: 'Мои тесты',
description: '<span>У вас 122 часа<br/></span>отработанных в этом месяце'
},
{
path: 'profile/settings',
img: settingIcon,
title: 'Настройки аккаунта',
description: 'Перейдите чтобы начать редактирование'
}
]
)
return (
<div className='profile-candidate'>
<ProfileHeader />
<div className="profile-candidate__head-bottom bottom-head">
<HeadBottom />
</div>
<div className="profile-candidate__container">
<ProfileBreadcrumbs links={[{ name: 'Главная', link: '/profile-candidate' }]} />
<div className="profile-candidate__title main-title">Добрый день, <span>Дмитрий</span></div>
<div className="profile-candidate__row">
<div className="profile-candidate__tests">
<div className='info-candidate'>
<div className="info-candidate__img">
<img src={medium_male} alt="" />
</div>
<div className="info-candidate__info">
<div className="info-candidate__title">Открыто {3} теста из {12}</div>
<div className="info-candidate__decor"></div>
</div>
</div>
<div className="profile-candidate__cards">
{
candidatsCardsControl.map((item, index) => <CardControl
description={item.description}
img={item.img}
path={item.path}
title={item.title}
key={index}
/>)
}
</div>
</div>
<div className="profile-candidate__instructions instructions-candidate">
<div className="instructions-candidate__container">
<div className="instructions-candidate___row">
<div className="instructions-candidate__title">Интсрукция:</div>
<div className="instructions-candidate__note">
<img className='instructions-candidate__icon' src={noteIcon} alt="" />
<div className="instructions-candidate__text">
Для подтверждения своих знаний - пройдите тестирование во вкладке
<span>“Мои тесты”</span>
</div>
</div>
</div>
<div className="instructions-candidate___row">
<div className="instructions-candidate__title">Зачем?</div>
<div className="instructions-candidate__note">
<img className='instructions-candidate__icon' src={questionIcon} alt="" />
<div className="instructions-candidate__text">
Тесты itguild предназначены для того, чтобы подтверждать навыки, которые вы указали у себя.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<Footer />
</div>
)
}

166
src/pages/ProfileCandidate/ProfileCandidate.scss Normal file
View File

@ -0,0 +1,166 @@
.profile-candidate{
background: #F1F1F1;
height: 100%;
min-height: 100vh;
font-family: "LabGrotesque", sans-serif;
display: flex;
flex-direction: column;
//max-width: 1200px;
&__container{
max-width: 1160px;
margin: 0 auto 42px auto;
flex: 1 1 auto;
padding: 0 15px;
}
&__title{
margin: 0 0 31px 0;
}
&__row{
display: flex;
gap: 30px;
flex-wrap: wrap;
}
// &__column{
// flex: 1 1 60%;
// }
&__tests{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex: 1 1 60%;
gap: 30px;
}
&__cards{
display: flex;
gap: 29px;
width: 100%;
@media (max-width: 660px) {
flex-wrap: wrap;
}
}
&__head-bottom{
margin: 0 0 27px 0;
//max-width: 1160px;
}
}
.instructions-candidate{
flex: 1 1 auto;
background: #FFFFFF;
border-radius: 12px;
&__container{
padding: 40px 18px 32px 36px;
display: flex;
flex-direction: column;
gap: 29px;
@media (max-width: 660px) {
padding: 20px;
}
}
&__note{
display: flex;
align-items: center;
gap: 22px;
&:not(:last-child){
margin: 0 0 30px 0;
}
}
&__icon{
width: 25px;
height: 30px;
}
&__title{
color: #52B709;
font-weight: 900;
font-size: 14px;
line-height: 171%;
margin: 0 0 20px 0;
}
&__text{
font-weight: 400;
font-size: 12px;
line-height: 200%;
color: #000000;
max-width: 235px;
span{
color: #406128;
font-weight: 700;
text-decoration: underline;
}
}
}
.info-candidate{
width: 100%;
background: #fff;
border-radius: 12px;
padding: 20px 45px;
display: flex;
align-items: center;
gap: 47px;
@media (max-width:560px) {
padding: 20px;
}
&__img{
flex: 0 0 88px;
height: 88px;
img{
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
}
&__info{
width: 100%;
}
&__title{
font-weight: 500;
font-size: 16px;
line-height: 200%;
color: #000000;
margin: 0 0 12px 0;
}
&__decor{
background: #52B709;
border-radius: 12px;
height: 8px;
width: 60%;
}
}
.bottom-head{
margin: 0 0 40px 0;
height: 66px;
background: #FFF;
&__container{
max-width: 1160px;
margin: 0 auto;
padding: 0 15px;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
&__img{
flex: 0 0 37px;
height: 37px;
img{
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
}
&__title{
font-weight: 500;
font-size: 18px;
line-height: 178%;
color: #807777;
}
}

2
src/pages/Summary/Summary.js
View File

@ -12,6 +12,7 @@ import gitImgItem from "../../images/gitItemImg.png"
import {apiRequest} from "../../api/request";
import {Navigate} from "react-router-dom";
import { Navigation } from '../../components/Navigation/Navigation';
import './summary.scss'
@ -30,6 +31,7 @@ export const Summary = () => {
return (
<div className='summary'>
<ProfileHeader/>
<Navigation />
<div className='container'>
<div className='summary__content'>
<ProfileBreadcrumbs links={[

2
src/pages/Tracker/Tracker.js
View File

@ -24,6 +24,7 @@ import noProjects from "../../images/noProjects.png";
import arrow from "../../images/arrowCalendar.png";
import "./tracker.scss";
import { Navigation } from "../../components/Navigation/Navigation";
export const Tracker = () => {
const [toggleTab, setToggleTab] = useState(1);
@ -532,6 +533,7 @@ export const Tracker = () => {
return (
<div className="tracker">
<ProfileHeader />
<Navigation />
<div className="container">
<div className="tracker__content">
<ProfileBreadcrumbs

2
src/pages/ViewReport/ViewReport.js
View File

@ -16,6 +16,7 @@ import arrow from "../../images/right-arrow.png";
import arrowSwitchDate from "../../images/arrowViewReport.png";
import './viewReport.scss'
import { Navigation } from '../../components/Navigation/Navigation';
export const ViewReport = () => {
if(localStorage.getItem('role_status') === '18') {
@ -79,6 +80,7 @@ export const ViewReport = () => {
return (
<div className='viewReport'>
<ProfileHeader/>
<Navigation />
<div className='container'>
<div className='viewReport__info'>
<ProfileBreadcrumbs links={[{name: 'Главная', link: '/profile'},

24
src/pages/quiz/InstructionPage.js
View File

@ -1,24 +0,0 @@
import {useNavigate} from "react-router-dom"
import {HeaderPageTestsQuiz} from "../../components/features/quiz/HeaderPageTests"
import {Instruction} from "../../components/features/quiz/Instructions"
import React from "react";
import {useSelector} from "react-redux";
import {selectedTest} from "../../redux/quizSlice";
export const InstructionPage = () => {
const test = useSelector(selectedTest)
let navigate = useNavigate();
if (!test) {
navigate('/quiz')
}
return (
<>
<HeaderPageTestsQuiz isVisibilityButton={false}/>
<Instruction/>
</>
)
};

26
src/pages/quiz/InterjacentPage.js
View File

@ -1,26 +0,0 @@
import React from "react";
import {useNavigate} from "react-router-dom"
import {useSelector} from "react-redux";
import {HeaderPageTestsQuiz} from "../../components/features/quiz/HeaderPageTests"
import {MyTestsQuiz} from "../../components/features/quiz/MyTestsQuiz"
import {selectedTest, selectPassedTests} from "../../redux/quizSlice";
export const InterjacentPage = () => {
const test = useSelector(selectedTest);
const passedTests = useSelector(selectPassedTests)
let navigate = useNavigate();
if (!test) {
navigate('/quiz')
}
return (
<>
<HeaderPageTestsQuiz isVisibilityButton={true}/>
<MyTestsQuiz listTests={passedTests}/>
</>
)
};

83
src/pages/quiz/PassingTests.js Normal file
View File

@ -0,0 +1,83 @@
import React, { useState } from 'react'
import { ProfileHeader } from '../../components/ProfileHeader/ProfileHeader'
import { HeadBottom } from '../../components/features/Candidate-lk/HeadBottom'
import { ProfileBreadcrumbs } from '../../components/ProfileBreadcrumbs/ProfileBreadcrumbs'
import { Link } from 'react-router-dom'
import { Footer } from '../../components/Footer/Footer'
import { QuizPassingInformation } from '../../components/features/quiz/Quiz-passing-information'
import { CardIntroduction } from '../../components/features/quiz/Card-introduction'
import { TaskQuiz } from '../../components/features/quiz/Task'
import { BlockCompletedTest } from '../../components/features/quiz/BlockCompletedTest'
import { useSelector } from 'react-redux'
import { completedTestSelector, selectedTest } from '../../redux/quizSlice'
export const PassingTests = () => {
//const selectedTest = useSelector(selectedTest)
if(''){
}
const time = new Date();
time.setSeconds(time.getSeconds() + 600);//600 - кол-во секунд для прохождения теста
const [startTest, setStartTest] = useState(false)
const completedTest = useSelector(completedTestSelector)
const introduction = [
{
title: 'Зачем?',
description: 'Тесты itguild предназначены для того, чтобы подтверждать навыки, которые вы указали у себя.'
},
{
title: 'Почему именно тестирование?',
description: 'Тесты itguild заменяют первое техническое собеседование по любой вакансии.'
},
{
title: 'Какие тесты нужно проходить?',
description: 'Здесь все довольно просто — следует проходить тесты по инструментам и навыкам, которыми вы владеете.'
}
]
return (
<div className='passing-tests-page'>
<ProfileHeader />
<HeadBottom />
<div className="passing-tests-page__container">
<ProfileBreadcrumbs links={[
{ name: 'Главная', link: '/profile-candidate' },
{ name: 'Тестирование', link: '/quiz' },
{ name: 'Прохождение тестов', link: '/quiz/test' },
]} />
<div className="passing-tests-page__title main-title">Тестирование в позиции Junior разработчик </div>
<div className="passing-tests-page__passing-information">
<QuizPassingInformation expiryTimestamp={time} setStartTest={setStartTest} />
</div>
{
!completedTest &&
<>
{startTest && <div className="passing-tests-page__block-green">Тестирование началось</div>}
{startTest ? <TaskQuiz /> : <div className='passing-tests-page__introduction'>
{
introduction.map((item, i) => <CardIntroduction description={item.description} title={item.title} key={i} />)
}
</div>}
{
!startTest && <div className="passing-tests-page__block-text block-text">
ИЛИ <Link to={''} >выполните тестове задание</Link> , без прохождения тестов
</div>
}
</>
}
{
completedTest && <>
<div className="passing-tests-page__block-green">Тестирование завершено</div>
<BlockCompletedTest />
</>
}
</div>
<Footer />
</div>
)
}

147
src/pages/quiz/QuizPage.js
View File

@ -1,17 +1,144 @@
import React from 'react'
import {HeaderQuiz} from "../../components/features/quiz/HeaderQuiz"
import {MyTestsQuiz} from "../../components/features/quiz/MyTestsQuiz"
import {useSelector} from "react-redux";
import {selectQuestionnairesOfUser} from "../../redux/quizSlice";
import React, { useEffect, useState } from 'react'
import { useDispatch, useSelector } from "react-redux";
import { questionnairesSelector, setQuestionnaires } from "../../redux/quizSlice";
import { ProfileHeader } from '../../components/ProfileHeader/ProfileHeader';
import { HeadBottom } from '../../components/features/Candidate-lk/HeadBottom';
import { ProfileBreadcrumbs } from '../../components/ProfileBreadcrumbs/ProfileBreadcrumbs';
import './quiz-page.scss'
import { SelectedCategory } from '../../components/features/quiz/SelectedCategory';
import { Footer } from '../../components/Footer/Footer';
import { Link } from 'react-router-dom';
import { CardAvailableTest } from '../../components/features/quiz/CardAviableTest';
import { apiRequest } from '../../api/request';
import CategoriesItem from '../../components/CategoriesItem/CategoriesItem';
import BackEndImg from "../../pages/PartnerСategories/images/personalBackEnd.png"
import FrontendImg from "../../pages/PartnerСategories/images/PersonalFrontend.png"
import ArchitectureImg from "../../pages/PartnerСategories/images/PersonalArchitecture.png"
import DesignImg from "../../pages/PartnerСategories/images/PersonalDesign.png"
import TestImg from "../../pages/PartnerСategories/images/PersonalTesters.png"
import AdminImg from "../../pages/PartnerСategories/images/PersonalAdmin.png"
import ManageImg from "../../pages/PartnerСategories/images/PersonalMng.png"
import CopyImg from "../../pages/PartnerСategories/images/PersonalCopy.png"
import SmmImg from "../../pages/PartnerСategories/images/PersonalSMM.png"
export const QuizPage = () => {
const allTests = useSelector(selectQuestionnairesOfUser)
const questionnaires = useSelector(questionnairesSelector)
const dispatch = useDispatch()
const [personalInfoItems] = useState([
{
title: 'Backend разработчики',
link: '/registration-candidate',
description: 'Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript',
available: true,
img: BackEndImg
},
{
title: 'Frontend разработчики',
link: '/registration-candidate',
description: 'Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript',
available: true,
img: FrontendImg
},
{
title: 'Архитектура проектов',
link: '/registration-candidate',
description: 'Потоки данных ER ERP CRM CQRS UML BPMN',
available: true,
img: ArchitectureImg
},
{
title: 'Дизайн проектов',
link: '/registration-candidate',
description: 'Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript',
available: true,
img: DesignImg
},
{
title: 'Тестирование проектов',
link: '/registration-candidate',
description: 'SQL Postman TestRail Kibana Ручное тестирование',
available: false,
img: TestImg
},
{
title: 'Администрирование проектов',
link: '/registration-candidate',
description: 'DevOps ELK Kubernetes Docker Bash Apache Oracle Git',
available: false,
img: AdminImg
},
{
title: 'Управление проектом',
link: '/registration-candidate',
description: 'Scrum Kanban Agile Miro CustDev',
available: false,
img: ManageImg
},
{
title: 'Копирайтинг проектов',
link: '/registration-candidate',
description: 'Теги Заголовок H1 Дескриптор Абзац Сценарий',
available: false,
img: CopyImg
},
{
title: 'Реклама и SMM',
link: '/registration-candidate',
description: 'Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript',
available: false,
img: SmmImg
},
]);
const userId = localStorage.getItem('id')
const [selectedCategory, setsetSelectedCategory] = useState(false)
useEffect(() => {
apiRequest(`/user-questionnaire/questionnaires-list?user_id=${userId}`)
.then(res => dispatch(setQuestionnaires(res)))
}, [])
return (
<>
<HeaderQuiz header={true}/>
<MyTestsQuiz listTests={allTests}/>
</>
<div className='quiz-page'>
<ProfileHeader />
<HeadBottom />
<div className="quiz-page__container">
<ProfileBreadcrumbs links={[{ name: 'Главная', link: '/profile-candidate' }, { name: 'Тестирование', link: '/quiz' }]} />
<div className="quiz-page__title main-title">{!selectedCategory ? 'Тестирование' : 'Замена специализации'}</div>
{!selectedCategory && <>
<div className="quiz-page__specialization">
<SelectedCategory setSelectedCategory={setsetSelectedCategory} />
</div>
<div className="quiz-page__block">
Доступные тесты
</div>
<div className="quiz-page__cards-test">
{
questionnaires.length ? questionnaires.map((item, index) => (
<CardAvailableTest
description={'Вы новичок с реальным опытом работы до 1 года, или без опыта'}
path={'quiz/test'}
status={item.status}
title={item.questionnaire_title}
passedTest={item.passedTest}
key={index}
/>)) : <h1>Анкет нет</h1>
}
</div>
<div className="block-text">
ИЛИ <Link to={''} >выполните тестове задание</Link> , без прохождения тестов
</div>
</>}
{selectedCategory && <div className="quiz-page__categories-items">
{personalInfoItems.map((item, index) => {
return <CategoriesItem link={item.link} key={index} title={item.title} img={item.img} skills={item.description} available={item.available} />
})
}
</div>}
</div>
<Footer />
</div>
)
}

42
src/pages/quiz/QuizReportPage.js Normal file
View File

@ -0,0 +1,42 @@
import { useNavigate } from "react-router-dom"
import { HeaderPageTestsQuiz } from "../../components/features/quiz/HeaderPageTests"
import { Results } from "../../components/features/quiz/Results";
import { useSelector } from "react-redux";
import { selectedTest } from "../../redux/quizSlice";
import React from "react";
import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
import { HeadBottom } from "../../components/features/Candidate-lk/HeadBottom";
import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { QuizReport } from "../../components/features/quiz/QuizReport";
import { Footer } from "../../components/Footer/Footer";
import suucessIcon from '../../images/quiz/success.png'
import { AlertResult } from "../../components/features/quiz/AlertResult";
export const QuizReportPage = () => {
const test = useSelector(selectedTest)
let navigate = useNavigate();
if (!test) {
navigate('/quiz')
}
return (
<div className="quiz-report-page">
<ProfileHeader />
<HeadBottom />
<div className="quiz-report-page__container">
<ProfileBreadcrumbs links={[{ name: 'Главная', link: '/profile-candidate' }, { name: 'Тестирование', link: '/quiz' },
{ name: 'Отчет по тестированию', link: '/quiz/report' }]} />
<div className="quiz-report-page__title main-title">Отчет по тестированию позиции Junior разработчик </div>
<div className="quiz-report-page__report-quiz">
<QuizReport />
</div>
<AlertResult />
</div>
<Footer />
</div>
)
};

24
src/pages/quiz/QuizTestPage.js
View File

@ -1,24 +0,0 @@
import {useNavigate} from 'react-router-dom'
import {HeaderPageTestsQuiz} from '../../components/features/quiz/HeaderPageTests'
import {TaskQuiz} from '../../components/features/quiz/Task'
import {useSelector} from "react-redux";
import {selectedTest} from "../../redux/quizSlice";
import React, {useEffect} from "react";
export const QuizTestPage = () => {
let navigate = useNavigate();
const test = useSelector(selectedTest);
useEffect(() => {
if (!test) {
navigate('/quiz')
}
}, []);
return (
<>
<HeaderPageTestsQuiz isVisibilityButton={false}/>
<TaskQuiz/>
</>
)
};

24
src/pages/quiz/ResultPage.js
View File

@ -1,24 +0,0 @@
import {useNavigate} from "react-router-dom"
import {HeaderPageTestsQuiz} from "../../components/features/quiz/HeaderPageTests"
import {Results} from "../../components/features/quiz/Results";
import {useSelector} from "react-redux";
import {selectedTest} from "../../redux/quizSlice";
import React from "react";
export const ResultPage = () => {
const test = useSelector(selectedTest)
let navigate = useNavigate();
if (!test) {
navigate('/quiz')
}
return (
<>
<HeaderPageTestsQuiz isVisibilityButton={false}/>
<Results/>
</>
)
};

143
src/pages/quiz/quiz-page.scss Normal file
View File

@ -0,0 +1,143 @@
.quiz-page{
background: #F1F1F1;
height: 100%;
min-height: 100vh;
font-family: "LabGrotesque", sans-serif;
display: flex;
flex-direction: column;
&__container{
max-width: 1160px;
margin: 0 auto 42px auto;
flex: 1 1 auto;
width: 100%;
padding: 0 15px;
}
&__title{
margin: 0 0 39px 0;
}
&__block{
background: #E1FCCF;
border-radius: 12px 12px 0px 0px;
font-weight: 400;
font-size: 18px;
line-height: 178%;
color: #000000;
padding: 20px 51px;
margin: 0 0 16px 0;
}
&__cards-test{
display: grid;
grid-gap: 29px;
grid-template-columns: 1fr 1fr 1fr;
margin-bottom: 29px;
@media (max-width: 955px) {
grid-template-columns: 1fr 1fr;
}
@media (max-width: 668px) {
grid-template-columns: 1fr;
}
}
&__specialization{
margin: 0 0 26px 0;
}
&__categories-items{
display: grid;
grid-gap: 24px;
grid-template-columns: 1fr 1fr 1fr;
margin-bottom: 24px;
@media (max-width: 955px) {
grid-template-columns: 1fr 1fr;
}
@media (max-width: 668px) {
grid-template-columns: 1fr;
}
}
}
.interjacent-page-quiz{
background: #F1F1F1;
height: 100%;
min-height: 100vh;
font-family: "LabGrotesque", sans-serif;
display: flex;
flex-direction: column;
&__title{
margin: 0 0 39px 0;
}
&__passing-information{
margin: 0 0 32px 0;
}
&__container{
max-width: 1160px;
margin: 0 auto 42px auto;
flex: 1 1 auto;
width: 100%;
padding: 0 15px;
}
&__introduction-items{
display: flex;
flex-wrap: wrap;
margin: 0px -25px -50px;
margin: 0 auto 54px auto;
}
}
.passing-tests-page{
background: #F1F1F1;
height: 100%;
min-height: 100vh;
font-family: "LabGrotesque", sans-serif;
display: flex;
flex-direction: column;
&__container{
max-width: 1160px;
margin: 0 auto 42px auto;
flex: 1 1 auto;
width: 100%;
padding: 0 15px;
}
&__title{
margin: 0 0 39px 0;
}
&__passing-information{
margin: 0 0 29px 0;
}
&__block-green{
font-weight: 400;
font-size: 18px;
line-height: 178%;
color: #000000;
background: #E1FCCF;
border-radius: 12px 12px 0px 0px;
padding: 20px 51px;
}
&__introduction{
display: flex;
flex-wrap: wrap;
}
}
.quiz-report-page{
background: #F1F1F1;
height: 100%;
min-height: 100vh;
font-family: "LabGrotesque", sans-serif;
display: flex;
flex-direction: column;
&__container{
max-width: 1160px;
margin: 0 auto 42px auto;
flex: 1 1 auto;
width: 100%;
padding: 0 15px;
}
&__title{
margin: 0 0 39px 0;
}
&__report-quiz{
margin: 0 0 28px 0;
}
}