2023-04-18 13:58:36 +03:00
|
|
|
|
import React, {useEffect, useState } from 'react';
|
2023-02-21 19:05:04 +03:00
|
|
|
|
|
|
|
|
|
import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
|
2023-02-27 16:50:32 +03:00
|
|
|
|
import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"
|
2023-02-21 19:05:04 +03:00
|
|
|
|
import {Footer} from "../../components/Footer/Footer";
|
2023-04-18 13:58:36 +03:00
|
|
|
|
import {Link, Navigate, useNavigate} from "react-router-dom";
|
|
|
|
|
|
|
|
|
|
import {apiRequest} from "../../api/request";
|
2023-02-21 19:05:04 +03:00
|
|
|
|
|
|
|
|
|
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-02-21 19:05:04 +03:00
|
|
|
|
|
|
|
|
|
|
2023-03-16 15:10:53 +03:00
|
|
|
|
import './partnerAddRequest.scss'
|
2023-04-19 20:22:06 +03:00
|
|
|
|
import { Navigation } from '../../components/Navigation/Navigation';
|
2023-03-16 15:10:53 +03:00
|
|
|
|
|
2023-02-21 19:05:04 +03:00
|
|
|
|
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
|
|
|
|
|
2023-04-18 13:58:36 +03:00
|
|
|
|
const navigate= useNavigate();
|
2023-04-09 05:05:33 +03:00
|
|
|
|
|
2023-04-18 13:58:36 +03:00
|
|
|
|
const [skills, setSkills] = useState([])
|
|
|
|
|
const [filteredSkills, setFilteredSkills] = useState([])
|
|
|
|
|
const [specializationList, setSpecializationList] = useState([])
|
|
|
|
|
const [levelList, setLevelList] = useState([])
|
|
|
|
|
const [countList] = useState([1, 2, 3, 4, 5])
|
2023-04-09 05:05:33 +03:00
|
|
|
|
const [openSkillsSelect, setOpenSkillsSelect] = useState(false)
|
2023-04-18 13:58:36 +03:00
|
|
|
|
const [openSpecializationList, setOpenSpecializationListOpen] = useState(false)
|
|
|
|
|
const [openLevelList, setOpenLevelList] = useState(false)
|
|
|
|
|
const [openCountList, setOpenCountList] = useState(false)
|
|
|
|
|
const [selectedSkills, setSelectedSkills] = useState([])
|
|
|
|
|
const [selectedSpecialization, setSelectedSpecialization] = useState('Выберите специализацию')
|
|
|
|
|
const [selectedLevel, setSelectedLevel] = useState('Выберите уровень')
|
|
|
|
|
const [selectedCount, setSelectedCount] = useState('Выберите кол-во сотрудников')
|
|
|
|
|
const [inputs, setInputs] = useState({title: '', description: ''})
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
apiRequest(`/profile/positions-list`).then((el) => setSpecializationList(el))
|
|
|
|
|
apiRequest(`/profile/level-list`).then((el) => setLevelList(el))
|
|
|
|
|
apiRequest(`/skills/get-skills-list`).then((el) => {
|
|
|
|
|
setSkills(el)
|
|
|
|
|
setFilteredSkills(el)
|
|
|
|
|
})
|
|
|
|
|
}, [])
|
|
|
|
|
|
|
|
|
|
const disableBtn = () => {
|
|
|
|
|
if (!inputs.title ||
|
|
|
|
|
typeof selectedSpecialization === "string" ||
|
|
|
|
|
typeof selectedLevel === "string" ||
|
|
|
|
|
typeof selectedCount === "string" ||
|
|
|
|
|
!inputs.description ||
|
|
|
|
|
!selectedSkills.length) {
|
|
|
|
|
return false
|
|
|
|
|
}
|
|
|
|
|
return true
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const handler = () => {
|
|
|
|
|
apiRequest('/request/create-request', {
|
|
|
|
|
method: 'POST',
|
|
|
|
|
data: {
|
|
|
|
|
user_id: localStorage.getItem('id'),
|
|
|
|
|
title: inputs.title,
|
|
|
|
|
position_id: selectedSpecialization.id,
|
|
|
|
|
knowledge_level_id: selectedLevel.id,
|
|
|
|
|
specialist_count: selectedCount,
|
|
|
|
|
status: 1,
|
|
|
|
|
descr: inputs.description,
|
|
|
|
|
skill_ids: selectedSkills.map((skill) => {return skill.id})
|
|
|
|
|
}
|
|
|
|
|
}).then((res) => {
|
|
|
|
|
navigate('/profile/requests');
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
2023-04-09 05:05:33 +03:00
|
|
|
|
|
2023-02-21 19:05:04 +03:00
|
|
|
|
return (
|
|
|
|
|
<div className='partnerAddRequest'>
|
|
|
|
|
<ProfileHeader />
|
2023-04-19 20:22:06 +03:00
|
|
|
|
<Navigation />
|
2023-02-21 19:05:04 +03:00
|
|
|
|
<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'}
|
|
|
|
|
]}
|
|
|
|
|
/>
|
2023-02-21 19:05:04 +03:00
|
|
|
|
<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'>
|
2023-04-18 13:58:36 +03:00
|
|
|
|
<input onChange={e => setInputs((prevValue) => ({...prevValue, title: e.target.value}) )} type='text' placeholder='Вакансия'/>
|
2023-02-21 19:05:04 +03:00
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div className='form__block__section'>
|
|
|
|
|
<h3>Выберите специализацию</h3>
|
2023-04-18 13:58:36 +03:00
|
|
|
|
<div className='form__block__section__selects' onClick={() => {setOpenSpecializationListOpen(!openSpecializationList)}}>
|
2023-02-21 19:05:04 +03:00
|
|
|
|
<div className='form__block__section__select'>
|
2023-04-18 13:58:36 +03:00
|
|
|
|
<span>{typeof selectedSpecialization === "string" ? selectedSpecialization : selectedSpecialization.name}</span>
|
|
|
|
|
<img className={openSpecializationList ? 'rotate' : ''} src={arrowDown} />
|
2023-02-21 19:05:04 +03:00
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2023-04-18 13:58:36 +03:00
|
|
|
|
{openSpecializationList && Boolean(specializationList.length) &&
|
|
|
|
|
<div className='form__block__dropDown'>
|
|
|
|
|
{specializationList.map((specialization, index) => {
|
|
|
|
|
return <p
|
|
|
|
|
key={specialization.id}
|
|
|
|
|
onClick={() => {
|
|
|
|
|
setOpenSpecializationListOpen(false)
|
|
|
|
|
setSelectedSpecialization(specialization)
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
{specialization.name}</p>
|
|
|
|
|
})}
|
|
|
|
|
</div>
|
|
|
|
|
}
|
2023-02-21 19:05:04 +03:00
|
|
|
|
</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) => {
|
2023-04-18 13:58:36 +03:00
|
|
|
|
return<div className='skill' key={`selected-${skill.id}`}>
|
|
|
|
|
<span >{skill.name}</span>
|
2023-04-09 05:05:33 +03:00
|
|
|
|
<img src={deleteIcon} alt='delete'
|
|
|
|
|
onClick={() => {
|
2023-04-18 13:58:36 +03:00
|
|
|
|
setSkills(prevArray => [...prevArray, skill])
|
2023-04-09 05:05:33 +03:00
|
|
|
|
setFilteredSkills(prevArray => [...prevArray, skill])
|
|
|
|
|
setSelectedSkills(selectedSkills.filter((skill, indexSkill) => {
|
|
|
|
|
return indexSkill !== index
|
|
|
|
|
}))
|
|
|
|
|
}} />
|
|
|
|
|
</div>
|
|
|
|
|
})
|
|
|
|
|
}
|
2023-04-18 13:58:36 +03:00
|
|
|
|
<input type='text' placeholder='Выберите навыки'
|
|
|
|
|
onChange={(e) => {
|
|
|
|
|
setFilteredSkills(skills.filter((skill) => {
|
|
|
|
|
return skill.name.toLowerCase().includes(e.target.value.toLowerCase())
|
|
|
|
|
}))
|
|
|
|
|
}} />
|
2023-04-09 05:05:33 +03:00
|
|
|
|
</div>
|
|
|
|
|
{openSkillsSelect && Boolean(filteredSkills.length) &&
|
|
|
|
|
<div className='form__block__dropDown'>
|
|
|
|
|
{filteredSkills.map((skill, index) => {
|
|
|
|
|
return <span
|
2023-04-18 13:58:36 +03:00
|
|
|
|
key={skill.id}
|
2023-04-09 05:05:33 +03:00
|
|
|
|
onClick={() => {
|
|
|
|
|
setSelectedSkills(prevArray => [...prevArray, skill])
|
|
|
|
|
setFilteredSkills(filteredSkills.filter((skill, skillIndex) => {
|
|
|
|
|
return skillIndex !== index
|
|
|
|
|
}))
|
2023-04-18 13:58:36 +03:00
|
|
|
|
setSkills(skills.filter((initSkill) => {
|
|
|
|
|
return initSkill.id !==skill.id
|
|
|
|
|
}))
|
2023-04-09 05:05:33 +03:00
|
|
|
|
setOpenSkillsSelect(false)
|
|
|
|
|
}}
|
|
|
|
|
>
|
2023-04-18 13:58:36 +03:00
|
|
|
|
{skill.name}</span>
|
2023-04-09 05:05:33 +03:00
|
|
|
|
})}
|
|
|
|
|
</div>
|
|
|
|
|
}
|
|
|
|
|
</div>
|
2023-02-21 19:05:04 +03:00
|
|
|
|
</div>
|
|
|
|
|
<div className='partnerAddRequest__form__block form__block'>
|
|
|
|
|
<h3 className='form__block__title'>Квалификация</h3>
|
|
|
|
|
<div className='form__block__section'>
|
|
|
|
|
<h3>Выберите уровень знаний </h3>
|
2023-04-18 13:58:36 +03:00
|
|
|
|
<div className='form__block__section__select' onClick={() => setOpenLevelList(!openLevelList)}>
|
|
|
|
|
<span>{typeof selectedLevel === "string" ? selectedLevel : selectedLevel.name}</span>
|
|
|
|
|
<img className={openLevelList ? 'rotate' : ''} src={arrowDown} />
|
2023-02-21 19:05:04 +03:00
|
|
|
|
</div>
|
2023-04-18 13:58:36 +03:00
|
|
|
|
{openLevelList && Boolean(Object.values(levelList).length) &&
|
|
|
|
|
<div className='form__block__dropDown'>
|
|
|
|
|
{Object.values(levelList).map((level, index) => {
|
|
|
|
|
return <p
|
|
|
|
|
key={level}
|
|
|
|
|
onClick={() => {
|
|
|
|
|
setOpenLevelList(false)
|
|
|
|
|
setSelectedLevel({name: level, id: index + 1})
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
{level}</p>
|
|
|
|
|
})}
|
|
|
|
|
</div>
|
|
|
|
|
}
|
2023-02-21 19:05:04 +03:00
|
|
|
|
</div>
|
|
|
|
|
<div className='form__block__section'>
|
|
|
|
|
<h3>Введите необходимое описание</h3>
|
2023-04-18 13:58:36 +03:00
|
|
|
|
<textarea onChange={e => setInputs((prevValue) => ({...prevValue, description: e.target.value}) )}/>
|
2023-02-21 19:05:04 +03:00
|
|
|
|
</div>
|
|
|
|
|
<div className='form__block__section'>
|
|
|
|
|
<h3>Необходимое количество человек на позицию</h3>
|
2023-04-18 13:58:36 +03:00
|
|
|
|
<div className='form__block__section__select' onClick={() => setOpenCountList(true)}>
|
|
|
|
|
<span>{selectedCount}</span>
|
|
|
|
|
<img className={openCountList ? 'rotate' : ''} src={arrowDown} />
|
|
|
|
|
</div>
|
|
|
|
|
{openCountList &&
|
|
|
|
|
<div className='form__block__dropDown'>
|
|
|
|
|
{countList.map((count) => {
|
|
|
|
|
return <p
|
|
|
|
|
key={count}
|
|
|
|
|
onClick={() => {
|
|
|
|
|
setOpenCountList(false)
|
|
|
|
|
setSelectedCount(count)
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
{count}</p>
|
|
|
|
|
})}
|
2023-02-21 19:05:04 +03:00
|
|
|
|
</div>
|
2023-04-18 13:58:36 +03:00
|
|
|
|
}
|
2023-02-21 19:05:04 +03:00
|
|
|
|
</div>
|
|
|
|
|
<div className='form__block__buttons'>
|
2023-04-18 13:58:36 +03:00
|
|
|
|
<Link to='/profile/requests' className='form__block__cancel'>Отмена</Link>
|
|
|
|
|
<button onClick={() => handler()} className={disableBtn() ? 'form__block__save' : 'form__block__save disable'}>Сохранить</button>
|
2023-02-21 19:05:04 +03:00
|
|
|
|
</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>
|
2023-02-21 19:05:04 +03:00
|
|
|
|
<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>
|
2023-02-21 19:05:04 +03:00
|
|
|
|
<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>
|
2023-02-21 19:05:04 +03:00
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<Footer />
|
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
}
|