Compare commits

..

No commits in common. "16a5a1f5480f2a4e4bc5ac044aae1cd0e949bcac" and "a7c58b26096059ceeafb3c21e73c54a0f6e835dd" have entirely different histories.

2 changed files with 242 additions and 331 deletions

View File

@ -34,20 +34,17 @@ export const PartnerAddRequest = () => {
const [specializationList, setSpecializationList] = useState([]); const [specializationList, setSpecializationList] = useState([]);
const [levelList, setLevelList] = useState([]); const [levelList, setLevelList] = useState([]);
const [countList] = useState([1, 2, 3, 4, 5]); const [countList] = useState([1, 2, 3, 4, 5]);
const [locationList] = useState(["РФ", "Беларусь"]);
const [openSkillsSelect, setOpenSkillsSelect] = useState(false); const [openSkillsSelect, setOpenSkillsSelect] = useState(false);
const [openSpecializationList, setOpenSpecializationListOpen] = const [openSpecializationList, setOpenSpecializationListOpen] =
useState(false); useState(false);
const [openLevelList, setOpenLevelList] = useState(false); const [openLevelList, setOpenLevelList] = useState(false);
const [openCountList, setOpenCountList] = useState(false); const [openCountList, setOpenCountList] = useState(false);
const [openLocationList, setOpenLocationList] = useState(false);
const [editRequest, setEditRequest] = useState(false); const [editRequest, setEditRequest] = useState(false);
const [selectedSkills, setSelectedSkills] = useState([]); const [selectedSkills, setSelectedSkills] = useState([]);
const [selectedSpecialization, setSelectedSpecialization] = useState( const [selectedSpecialization, setSelectedSpecialization] = useState(
"Выберите специализацию" "Выберите специализацию"
); );
const [selectedLevel, setSelectedLevel] = useState("Выберите уровень"); const [selectedLevel, setSelectedLevel] = useState("Выберите уровень");
const [selectedLocation, setSelectedLocation] = useState("Выберите локацию");
const [selectedCount, setSelectedCount] = useState( const [selectedCount, setSelectedCount] = useState(
"Выберите кол-во сотрудников" "Выберите кол-во сотрудников"
); );
@ -180,7 +177,6 @@ export const PartnerAddRequest = () => {
setOpenSpecializationListOpen(false); setOpenSpecializationListOpen(false);
setOpenLevelList(false); setOpenLevelList(false);
setOpenCountList(false); setOpenCountList(false);
setOpenLocationList(false);
} }
}; };
@ -206,329 +202,280 @@ export const PartnerAddRequest = () => {
? "Страница редактирования заявки" ? "Страница редактирования заявки"
: "Страница добавления заявки"} : "Страница добавления заявки"}
</h2> </h2>
<div className="partner-add-request__main"> <div className="partner-add-request__section">
<div className="partner-add-request__section"> <div className="partner-add-request__form">
<div className="partner-add-request__form"> <div className="partner-add-request__form__block form__block">
<div className="partner-add-request__form__block form__block"> <h3 className="form__block__title">Данные открытой позиции</h3>
<h3 className="form__block__title">Данные открытой позиции</h3> <div className="form__block__section">
<div className="form__block__section"> <h3>Название вакансии</h3>
<h3>Название вакансии</h3> <div className="form__block__section__input">
<div className="form__block__section__input"> <input
<input value={inputs.title}
value={inputs.title}
onChange={(e) =>
setInputs((prevValue) => ({
...prevValue,
title: e.target.value
}))
}
type="text"
placeholder="Вакансия"
/>
</div>
</div>
<div className="form__block__section">
<h3>Выберите специализацию</h3>
<div
className="form__block__section__selects"
onClick={() => {
setOpenSpecializationListOpen(!openSpecializationList);
}}
>
<div className="form__block__section__select">
<span>
{typeof selectedSpecialization === "string"
? selectedSpecialization
: selectedSpecialization.name}
</span>
<img
className={openSpecializationList ? "rotate" : ""}
src={arrowDown}
/>
</div>
</div>
{openSpecializationList &&
Boolean(specializationList.length) && (
<div className="form__block__dropDown">
{specializationList.map((specialization) => {
return (
<p
key={specialization.id}
onClick={() => {
setOpenSpecializationListOpen(false);
setSelectedSpecialization(specialization);
}}
>
{specialization.name}
</p>
);
})}
</div>
)}
</div>
<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={`selected-${skill.id}`}>
<span>{skill.name}</span>
<img
src={deleteIcon}
alt="delete"
onClick={() => {
setSkills((prevArray) => [...prevArray, skill]);
setFilteredSkills((prevArray) => [
...prevArray,
skill
]);
setSelectedSkills(
selectedSkills.filter((skill, indexSkill) => {
return indexSkill !== index;
})
);
}}
/>
</div>
);
})}
<input
type="text"
placeholder="Выберите навыки"
onChange={(e) => {
setFilteredSkills(
skills.filter((skill) => {
return skill.name
.toLowerCase()
.includes(e.target.value.toLowerCase());
})
);
}}
/>
</div>
{openSkillsSelect && Boolean(filteredSkills.length) && (
<div className="form__block__dropDown">
{filteredSkills.map((skill, index) => {
return (
<span
key={skill.id}
onClick={() => {
setSelectedSkills((prevArray) => [
...prevArray,
skill
]);
setFilteredSkills(
filteredSkills.filter((skill, skillIndex) => {
return skillIndex !== index;
})
);
setSkills(
skills.filter((initSkill) => {
return initSkill.id !== skill.id;
})
);
setOpenSkillsSelect(false);
}}
>
{skill.name}
</span>
);
})}
</div>
)}
</div>
</div>
<div className="partner-add-request__form__block form__block">
<h3 className="form__block__title">Квалификация</h3>
<div className="form__block__section">
<h3>Выберите уровень знаний </h3>
<div
className="form__block__section__select"
onClick={() => setOpenLevelList(!openLevelList)}
>
<span>
{typeof selectedLevel === "string"
? selectedLevel
: selectedLevel.name}
</span>
<img
className={openLevelList ? "rotate" : ""}
src={arrowDown}
/>
</div>
{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>
)}
</div>
<div className="form__block__section">
<h3>Введите необходимое описание</h3>
<textarea
value={inputs.description}
onChange={(e) => onChange={(e) =>
setInputs((prevValue) => ({ setInputs((prevValue) => ({
...prevValue, ...prevValue,
description: e.target.value title: e.target.value
})) }))
} }
type="text"
placeholder="Вакансия"
/> />
</div> </div>
<div className="form__block__section"> </div>
<h3>Необходимое количество человек на позицию</h3> <div className="form__block__section">
<div <h3>Выберите специализацию</h3>
className="form__block__section__select" <div
onClick={() => setOpenCountList(true)} className="form__block__section__selects"
> onClick={() => {
<span>{selectedCount}</span> setOpenSpecializationListOpen(!openSpecializationList);
}}
>
<div className="form__block__section__select">
<span>
{typeof selectedSpecialization === "string"
? selectedSpecialization
: selectedSpecialization.name}
</span>
<img <img
className={openCountList ? "rotate" : ""} className={openSpecializationList ? "rotate" : ""}
src={arrowDown} src={arrowDown}
/> />
</div> </div>
{openCountList && ( </div>
{openSpecializationList &&
Boolean(specializationList.length) && (
<div className="form__block__dropDown"> <div className="form__block__dropDown">
{countList.map((count) => { {specializationList.map((specialization) => {
return ( return (
<p <p
key={count} key={specialization.id}
onClick={() => { onClick={() => {
setOpenCountList(false); setOpenSpecializationListOpen(false);
setSelectedCount(count); setSelectedSpecialization(specialization);
}} }}
> >
{count} {specialization.name}
</p> </p>
); );
})} })}
</div> </div>
)} )}
</div>
<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={`selected-${skill.id}`}>
<span>{skill.name}</span>
<img
src={deleteIcon}
alt="delete"
onClick={() => {
setSkills((prevArray) => [...prevArray, skill]);
setFilteredSkills((prevArray) => [
...prevArray,
skill
]);
setSelectedSkills(
selectedSkills.filter((skill, indexSkill) => {
return indexSkill !== index;
})
);
}}
/>
</div>
);
})}
<input
type="text"
placeholder="Выберите навыки"
onChange={(e) => {
setFilteredSkills(
skills.filter((skill) => {
return skill.name
.toLowerCase()
.includes(e.target.value.toLowerCase());
})
);
}}
/>
</div> </div>
{openSkillsSelect && Boolean(filteredSkills.length) && (
<div className="form__block__dropDown">
{filteredSkills.map((skill, index) => {
return (
<span
key={skill.id}
onClick={() => {
setSelectedSkills((prevArray) => [
...prevArray,
skill
]);
setFilteredSkills(
filteredSkills.filter((skill, skillIndex) => {
return skillIndex !== index;
})
);
setSkills(
skills.filter((initSkill) => {
return initSkill.id !== skill.id;
})
);
setOpenSkillsSelect(false);
}}
>
{skill.name}
</span>
);
})}
</div>
)}
</div> </div>
</div> </div>
<div className="partner-add-request__info"> <div className="partner-add-request__form__block form__block">
<div className="partner-add-request__info__block"> <h3 className="form__block__title">Квалификация</h3>
<div className="partner-add-request__info__block__title"> <div className="form__block__section">
<img src={processImg} alt="process" /> <h3>Выберите уровень знаний </h3>
<h4>Процесс:</h4> <div
className="form__block__section__select"
onClick={() => setOpenLevelList(!openLevelList)}
>
<span>
{typeof selectedLevel === "string"
? selectedLevel
: selectedLevel.name}
</span>
<img
className={openLevelList ? "rotate" : ""}
src={arrowDown}
/>
</div> </div>
<p> {openLevelList && Boolean(Object.values(levelList).length) && (
При аутстаффе мы предоставляем вам IT-специалистов при этом <div className="form__block__dropDown">
они находятся в нашем штате. {Object.values(levelList).map((level, index) => {
<br /> return (
<br /> <p
Вы сможете прособеседовать наших специалистов, посмотреть key={level}
проекты и Git. onClick={() => {
</p> setOpenLevelList(false);
setSelectedLevel({ name: level, id: index + 1 });
}}
>
{level}
</p>
);
})}
</div>
)}
</div> </div>
<div className="partner-add-request__info__block"> <div className="form__block__section">
<div className="partner-add-request__info__block__title"> <h3>Введите необходимое описание</h3>
<img src={reportImg} alt="reportImg" /> <textarea
<h4>Отчетность:</h4> value={inputs.description}
</div> onChange={(e) =>
<p> setInputs((prevValue) => ({
Вы можете обратиться к специалисту напрямую. ...prevValue,
<br /> description: e.target.value
<br /> }))
Каждый день специалисты описывают выполненные работы и }
затраченные на это часы. />
<br />
<br />
Можем выделить руководителя проекта и тестировщиков.
</p>
</div> </div>
<div className="partner-add-request__info__block"> <div className="form__block__section">
<div className="partner-add-request__info__block__title"> <h3>Необходимое количество человек на позицию</h3>
<img src={documentsImg} alt="documentsImg" /> <div
<h4> className="form__block__section__select"
Обмен <br /> onClick={() => setOpenCountList(true)}
документами: >
</h4> <span>{selectedCount}</span>
<img
className={openCountList ? "rotate" : ""}
src={arrowDown}
/>
</div> </div>
<p> {openCountList && (
В Личном кабинете платформы получайте отчеты выполненных работ <div className="form__block__dropDown">
и счеты на согласование и оплату {countList.map((count) => {
</p> return (
<p
key={count}
onClick={() => {
setOpenCountList(false);
setSelectedCount(count);
}}
>
{count}
</p>
);
})}
</div>
)}
</div>
<div className="form__block__buttons">
<Link to="/profile/requests" className="form__block__cancel">
Отмена
</Link>
<button
onClick={() => handler()}
className={
disableBtn()
? "form__block__save"
: "form__block__save disable"
}
>
Сохранить
</button>
</div> </div>
</div> </div>
</div> </div>
<div className="partner-add-request__special"> <div className="partner-add-request__info">
<h4>Основные требования по вакансии</h4> <div className="partner-add-request__info__block">
<div className="form__block__section special__select"> <div className="partner-add-request__info__block__title">
<h3>Локация</h3> <img src={processImg} alt="process" />
<div <h4>Процесс:</h4>
className="form__block__section__select"
onClick={() => setOpenLocationList(true)}
>
<span>{selectedLocation}</span>
<img
className={openLocationList ? "rotate" : ""}
src={arrowDown}
/>
</div> </div>
{openLocationList && (
<div className="form__block__dropDown">
{locationList.map((location, index) => {
return (
<p
key={index}
onClick={() => {
setOpenLocationList(false);
setSelectedLocation(location);
}}
>
{location}
</p>
);
})}
</div>
)}
</div>
<div className="form__block__section">
<h3>Ставка</h3>
<div className="form__block__section__input special__select">
<input type="text" placeholder="Оплата" />
</div>
</div>
<div className="form__block__buttons">
<Link to="/profile/requests" className="form__block__cancel">
Отмена
</Link>
<button
onClick={() => handler()}
className={
disableBtn()
? "form__block__save"
: "form__block__save disable"
}
>
Сохранить
</button>
<p> <p>
Нажимая "Сохранить", вы соглашаетесь с Правилами обработки и При аутстаффе мы предоставляем вам IT-специалистов при этом они
использования персональных данных находятся в нашем штате.
<br />
<br />
Вы сможете прособеседовать наших специалистов, посмотреть
проекты и Git.
</p>
</div>
<div className="partner-add-request__info__block">
<div className="partner-add-request__info__block__title">
<img src={reportImg} alt="reportImg" />
<h4>Отчетность:</h4>
</div>
<p>
Вы можете обратиться к специалисту напрямую.
<br />
<br />
Каждый день специалисты описывают выполненные работы и
затраченные на это часы.
<br />
<br />
Можем выделить руководителя проекта и тестировщиков.
</p>
</div>
<div className="partner-add-request__info__block">
<div className="partner-add-request__info__block__title">
<img src={documentsImg} alt="documentsImg" />
<h4>
Обмен <br />
документами:
</h4>
</div>
<p>
В Личном кабинете платформы получайте отчеты выполненных работ и
счеты на согласование и оплату
</p> </p>
</div> </div>
</div> </div>

View File

@ -23,31 +23,6 @@
line-height: 32px; line-height: 32px;
} }
&__main {
display: flex;
flex-direction: column;
row-gap: 30px;
}
&__special {
background: rgba(255, 255, 255, 1);
border-radius: 12px;
padding: 41px 45px 35px 55px;
display: flex;
flex-direction: column;
h4 {
font-weight: 700;
color: rgba(91, 104, 113, 1);
font-size: 20px;
line-height: 24px;
}
.special__select {
max-width: 450px;
}
}
&__section { &__section {
margin-top: 25px; margin-top: 25px;
display: flex; display: flex;
@ -124,7 +99,6 @@
font-size: 15px; font-size: 15px;
line-height: 18px; line-height: 18px;
outline: none; outline: none;
width: 100%;
} }
} }
@ -190,23 +164,13 @@
&__buttons { &__buttons {
display: flex; display: flex;
margin-top: 50px;
button { button {
max-width: 150px; max-width: 150px;
width: 100%; width: 100%;
height: 40px; height: 40px;
} }
p {
font-weight: 300;
font-size: 12px;
line-height: 18px;
color: rgba(0, 0, 0, 1);
margin-left: 50px;
max-width: 360px;
display: flex;
align-items: center;
}
} }
&__cancel { &__cancel {
@ -357,7 +321,7 @@
background: #ffffff; background: #ffffff;
border-radius: 12px; border-radius: 12px;
width: 100%; width: 100%;
padding: 74px 48px 67px 62px; padding: 74px 48px 136px 62px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
row-gap: 61px; row-gap: 61px;