guild_front/src/pages/PartnerAddRequest/PartnerAddRequest.js

183 lines
11 KiB
JavaScript
Raw Normal View History

2023-04-09 05:05:33 +03:00
import React, { useState } from 'react';
import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
2023-02-27 16:50:32 +03:00
import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"
import {Footer} from "../../components/Footer/Footer";
2023-04-09 05:05:33 +03:00
import {Navigate} from "react-router-dom";
import arrowDown from "../../images/selectArrow.png"
2023-03-16 15:10:53 +03:00
import processImg from "../../images/partnerAddRequestFirstImg.png"
import reportImg from "../../images/partnerAddRequestSecondImg.png"
import documentsImg from "../../images/partnerAddRequestThirdInfo.png"
2023-04-09 05:05:33 +03:00
import deleteIcon from "../../images/close.png"
2023-03-16 15:10:53 +03:00
import './partnerAddRequest.scss'
export const PartnerAddRequest = () => {
2023-02-27 16:50:32 +03:00
if(localStorage.getItem('role_status') !== '18') {
return <Navigate to="/profile" replace/>
}
2023-04-09 05:05:33 +03:00
const [skills, setSkills] = useState(['REST API', 'Async/await'])
const [selectedSkills, setSelectedSkills] = useState([])
const [filteredSkills, setFilteredSkills] = useState(skills)
const [openSkillsSelect, setOpenSkillsSelect] = useState(false)
return (
<div className='partnerAddRequest'>
<ProfileHeader />
<div className='container'>
2023-02-27 16:50:32 +03:00
<ProfileBreadcrumbs links={[
{name: 'Главная', link: '/profile'},
{name: 'Запросы и открытые позиции', link: '/profile/requests'},
{name: 'Создание новой заявки', link: '/profile/add-request'}
]}
/>
<h2 className='partnerAddRequest__title'>Страница добавления заявки</h2>
<div className='partnerAddRequest__section'>
<div className='partnerAddRequest__form'>
<div className='partnerAddRequest__form__block form__block'>
<h3 className='form__block__title'>Данные открытой позиции</h3>
<div className='form__block__section'>
<h3>Название вакансии</h3>
<div className='form__block__section__input'>
<input type='text' placeholder='Вакансия'/>
</div>
</div>
<div className='form__block__section'>
<h3>Выберите специализацию</h3>
<div className='form__block__section__selects'>
<div className='form__block__section__select'>
<span>Разработка</span>
<img src={arrowDown} />
</div>
<div className='form__block__section__select'>
<span>Backend Developer</span>
<img src={arrowDown} />
</div>
</div>
</div>
2023-04-09 05:05:33 +03:00
<div className='form__block__section'>
<h3>Навыки</h3>
<div className='form__block__skills' onClick={() => {setOpenSkillsSelect(true)}}>
{Boolean(selectedSkills.length) &&
selectedSkills.map((skill, index) => {
return<div className='skill' key={index}>
<span >{skill}</span>
<img src={deleteIcon} alt='delete'
onClick={() => {
setFilteredSkills(prevArray => [...prevArray, skill])
setSelectedSkills(selectedSkills.filter((skill, indexSkill) => {
return indexSkill !== index
}))
}} />
</div>
})
}
{!selectedSkills.length &&
<input type='text' placeholder='Выберите навыки'
onChange={(e) => {
setFilteredSkills(skills.filter((skill) => {
return skill.toLowerCase().includes(e.target.value.toLowerCase())
}))
}} />
}
</div>
{openSkillsSelect && Boolean(filteredSkills.length) &&
<div className='form__block__dropDown'>
{filteredSkills.map((skill, index) => {
return <span
key={skill}
onClick={() => {
setSelectedSkills(prevArray => [...prevArray, skill])
setFilteredSkills(filteredSkills.filter((skill, skillIndex) => {
return skillIndex !== index
}))
setOpenSkillsSelect(false)
}}
>
{skill}</span>
})}
</div>
}
</div>
</div>
<div className='partnerAddRequest__form__block form__block'>
<h3 className='form__block__title'>Квалификация</h3>
<div className='form__block__section'>
<h3>Выберите уровень знаний </h3>
<div className='form__block__section__select'>
<span>Разработка</span>
<img src={arrowDown} />
</div>
</div>
<div className='form__block__section'>
<h3>Введите необходимое описание</h3>
<textarea/>
</div>
<div className='form__block__section'>
<h3>Необходимое количество человек на позицию</h3>
<div className='form__block__section__select'>
<span>2</span>
<img src={arrowDown} />
</div>
</div>
<div className='form__block__buttons'>
<button className='form__block__cancel'>Отмена</button>
<button className='form__block__save'>Сохранить</button>
</div>
</div>
</div>
<div className='partnerAddRequest__info'>
<div className='partnerAddRequest__info__block'>
2023-03-16 15:10:53 +03:00
<div className='partnerAddRequest__info__block__title'>
<img src={processImg} alt='process' />
<h4>Процесс:</h4>
</div>
<p>
При аутстафе мы предоставляем вам
it-специалистов при этом они находятся в
нашем штате.
<br/><br/>
Вы сможете прособеседовать наших
специалистов, посмотреть проекты и Git.
</p>
</div>
<div className='partnerAddRequest__info__block'>
2023-03-16 15:10:53 +03:00
<div className='partnerAddRequest__info__block__title'>
<img src={reportImg} alt='reportImg' />
<h4>Отчетность:</h4>
</div>
<p>
Вы можете обратиться к специалисту
напрямую.
<br/><br/>
Каждый день специалисты описывают
выполненные работы и затраченные
на это часы.
<br/><br/>
Можем выделить руководителя проекта
и тестировщиков.
</p>
</div>
2023-03-16 15:10:53 +03:00
<div className='partnerAddRequest__info__block'>
<div className='partnerAddRequest__info__block__title'>
<img src={documentsImg} alt='documentsImg' />
<h4>Обмен <br/>документами:</h4>
</div>
<p>
В Личном кабинете платформы
получайте отчеты выполненных работ
и счета на согласование и оплату
</p>
</div>
</div>
</div>
</div>
<Footer />
</div>
)
}