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

partner request design

Browse Source
This commit is contained in:
Mikola 2024-05-03 19:23:15 +03:00
parent a7c58b2609
commit a763c5a69a
2 changed files with 335 additions and 247 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

542
src/pages/PartnerAddRequest/PartnerAddRequest.jsx
View File

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

40
src/pages/PartnerAddRequest/partnerAddRequest.scss
View File

@ -23,6 +23,31 @@
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;
@ -99,6 +124,7 @@
font-size: 15px; font-size: 15px;
line-height: 18px; line-height: 18px;
outline: none; outline: none;
width: 100%;
} }
} }
@ -164,13 +190,23 @@
&__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 {
@ -321,7 +357,7 @@
background: #ffffff; background: #ffffff;
border-radius: 12px; border-radius: 12px;
width: 100%; width: 100%;
padding: 74px 48px 136px 62px; padding: 74px 48px 67px 62px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
row-gap: 61px; row-gap: 61px;