Compare commits

...

4 Commits

Author SHA1 Message Date
Mikola
16a5a1f548 partner request design 2024-05-03 19:23:46 +03:00
Mikola
a763c5a69a partner request design 2024-05-03 19:23:15 +03:00
Mikola
a7c58b2609 tracker tasks 2024-05-03 14:26:36 +03:00
Mikola
3b8ec8e100 tracker tasks 2024-05-03 14:26:09 +03:00
13 changed files with 421 additions and 270 deletions

View File

@ -0,0 +1,3 @@
<svg width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.11629 5.8584L8.07227 0.858398H0.160323L4.11629 5.8584Z" fill="#2E3A59"/>
</svg>

After

Width:  |  Height:  |  Size: 184 B

View File

@ -299,7 +299,7 @@
}
.pass {
background-color: #f7d7c9 !important;
background-color: #ba5c33 !important;
}
.today {
@ -308,7 +308,7 @@
}
.selected {
background-color: #f9f9c3 !important;
background-color: #cbcbb4 !important;
}
.block {

View File

@ -664,11 +664,8 @@ export const ModalTiсket = ({
"EasyImage",
"Image",
"ImageCaption",
"ImageStyle",
"ImageToolbar",
"ImageUpload",
"MediaEmbed",
"BlockQuote"
"MediaEmbed"
]
}}
onChange={(event, editor) => {

View File

@ -683,11 +683,8 @@ export const TicketFullScreen = () => {
"EasyImage",
"Image",
"ImageCaption",
"ImageStyle",
"ImageToolbar",
"ImageUpload",
"MediaEmbed",
"BlockQuote"
"MediaEmbed"
]
}}
onChange={(event, editor) => {

View File

@ -624,7 +624,15 @@ export const TrackerModal = ({
"bulletedList",
"numberedList"
],
removePlugins: ["BlockQuote"],
removePlugins: [
"CKFinderUploadAdapter",
"CKFinder",
"EasyImage",
"Image",
"ImageCaption",
"ImageUpload",
"MediaEmbed"
],
placeholder: "Описание задачи"
}}
onChange={(event, editor) => {

View File

@ -34,11 +34,15 @@
display: flex;
align-items: center;
grid-column-gap: 30px;
column-gap: 30px;
column-gap: 10px;
margin-top: 20px;
cursor: pointer;
text-decoration: none;
img {
width: 23px;
}
p {
margin-bottom: 0;
font-size: 14px;

View File

@ -127,11 +127,8 @@ export const TrackerTaskComment = ({
"EasyImage",
"Image",
"ImageCaption",
"ImageStyle",
"ImageToolbar",
"ImageUpload",
"MediaEmbed",
"BlockQuote"
"MediaEmbed"
]
}}
onChange={(event, editor) => {

View File

@ -34,17 +34,20 @@ export const PartnerAddRequest = () => {
const [specializationList, setSpecializationList] = useState([]);
const [levelList, setLevelList] = useState([]);
const [countList] = useState([1, 2, 3, 4, 5]);
const [locationList] = useState(["РФ", "Беларусь"]);
const [openSkillsSelect, setOpenSkillsSelect] = useState(false);
const [openSpecializationList, setOpenSpecializationListOpen] =
useState(false);
const [openLevelList, setOpenLevelList] = useState(false);
const [openCountList, setOpenCountList] = useState(false);
const [openLocationList, setOpenLocationList] = useState(false);
const [editRequest, setEditRequest] = useState(false);
const [selectedSkills, setSelectedSkills] = useState([]);
const [selectedSpecialization, setSelectedSpecialization] = useState(
"Выберите специализацию"
);
const [selectedLevel, setSelectedLevel] = useState("Выберите уровень");
const [selectedLocation, setSelectedLocation] = useState("Выберите локацию");
const [selectedCount, setSelectedCount] = useState(
"Выберите кол-во сотрудников"
);
@ -177,6 +180,7 @@ export const PartnerAddRequest = () => {
setOpenSpecializationListOpen(false);
setOpenLevelList(false);
setOpenCountList(false);
setOpenLocationList(false);
}
};
@ -202,280 +206,329 @@ export const PartnerAddRequest = () => {
? "Страница редактирования заявки"
: "Страница добавления заявки"}
</h2>
<div className="partner-add-request__section">
<div className="partner-add-request__form">
<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__input">
<input
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 className="partner-add-request__main">
<div className="partner-add-request__section">
<div className="partner-add-request__form">
<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__input">
<input
value={inputs.title}
onChange={(e) =>
setInputs((prevValue) => ({
...prevValue,
title: e.target.value
}))
}
type="text"
placeholder="Вакансия"
/>
</div>
</div>
{openSpecializationList &&
Boolean(specializationList.length) && (
<div className="form__block__dropDown">
{specializationList.map((specialization) => {
<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 (
<p
key={specialization.id}
<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={() => {
setOpenSpecializationListOpen(false);
setSelectedSpecialization(specialization);
setSelectedSkills((prevArray) => [
...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>
);
})}
</div>
)}
</div>
<div className="form__block__section">
<h3>Введите необходимое описание</h3>
<textarea
value={inputs.description}
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>
{openCountList && (
<div className="form__block__dropDown">
{countList.map((count) => {
return (
<p
key={count}
onClick={() => {
setOpenCountList(false);
setSelectedCount(count);
}}
>
{count}
</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 className="partner-add-request__info">
<div className="partner-add-request__info__block">
<div className="partner-add-request__info__block__title">
<img src={processImg} alt="process" />
<h4>Процесс:</h4>
</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>
)}
<p>
При аутстаффе мы предоставляем вам IT-специалистов при этом
они находятся в нашем штате.
<br />
<br />
Вы сможете прособеседовать наших специалистов, посмотреть
проекты и Git.
</p>
</div>
<div className="form__block__section">
<h3>Введите необходимое описание</h3>
<textarea
value={inputs.description}
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 className="partner-add-request__info__block">
<div className="partner-add-request__info__block__title">
<img src={reportImg} alt="reportImg" />
<h4>Отчетность:</h4>
</div>
{openCountList && (
<div className="form__block__dropDown">
{countList.map((count) => {
return (
<p
key={count}
onClick={() => {
setOpenCountList(false);
setSelectedCount(count);
}}
>
{count}
</p>
);
})}
</div>
)}
<p>
Вы можете обратиться к специалисту напрямую.
<br />
<br />
Каждый день специалисты описывают выполненные работы и
затраченные на это часы.
<br />
<br />
Можем выделить руководителя проекта и тестировщиков.
</p>
</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 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>
</div>
</div>
</div>
<div className="partner-add-request__info">
<div className="partner-add-request__info__block">
<div className="partner-add-request__info__block__title">
<img src={processImg} alt="process" />
<h4>Процесс:</h4>
<div className="partner-add-request__special">
<h4>Основные требования по вакансии</h4>
<div className="form__block__section special__select">
<h3>Локация</h3>
<div
className="form__block__section__select"
onClick={() => setOpenLocationList(true)}
>
<span>{selectedLocation}</span>
<img
className={openLocationList ? "rotate" : ""}
src={arrowDown}
/>
</div>
<p>
При аутстаффе мы предоставляем вам IT-специалистов при этом они
находятся в нашем штате.
<br />
<br />
Вы сможете прособеседовать наших специалистов, посмотреть
проекты и Git.
</p>
{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="partner-add-request__info__block">
<div className="partner-add-request__info__block__title">
<img src={reportImg} alt="reportImg" />
<h4>Отчетность:</h4>
<div className="form__block__section">
<h3>Ставка</h3>
<div className="form__block__section__input special__select">
<input type="text" placeholder="Оплата" />
</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>
<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>
</div>
</div>

View File

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

View File

@ -44,9 +44,25 @@ export const PartnerCategories = () => {
const theme = useTheme(getTheme());
const [nodes, setNodes] = useState([]);
const [initialNodes, setInitialNodes] = useState([]);
const [activeTab, setActiveTab] = useState(1);
const [search, setSearch] = useState("");
const tabs = [
{
id: 1,
name: "Все"
},
{
id: 2,
name: "Фронтенд"
},
{
id: 3,
name: "Бэкенд"
}
];
const COLUMNS = [
{
label: "",
@ -256,6 +272,21 @@ export const PartnerCategories = () => {
<div className="partner-categories__items">
{Boolean(initialNodes.length) ? (
<>
<div className="table__tabs">
{tabs.map((tab) => {
return (
<button
onClick={() => setActiveTab(tab.id)}
key={tab.id}
className={`table__tab ${
tab.id === activeTab ? "table__tab--active" : ""
}`}
>
{tab.name}
</button>
);
})}
</div>
<label className="table__search" htmlFor="search">
Поиск по имени:
<input

View File

@ -204,6 +204,29 @@
}
}
&__tabs {
margin: 0 auto 36px 18px;
background: rgba(240, 242, 245, 1);
padding: 4px 8px 4px 8px;
border-radius: 6px;
display: flex;
}
&__tab {
color: rgba(46, 58, 89, 1);
font-size: 15px;
outline: none;
background: none;
border: none;
padding: 0 12px;
&--active {
background: rgba(255, 255, 255, 1);
border-radius: 5px;
font-size: 16px;
}
}
&__pagination {
width: 100%;
display: flex;

View File

@ -243,11 +243,8 @@ export const Summary = () => {
"EasyImage",
"Image",
"ImageCaption",
"ImageStyle",
"ImageToolbar",
"ImageUpload",
"MediaEmbed",
"BlockQuote"
"MediaEmbed"
]
}}
onChange={(event, editor) => {

View File

@ -64,13 +64,18 @@
&__back {
display: flex;
align-items: center;
column-gap: 30px;
column-gap: 10px;
margin-top: 20px;
cursor: pointer;
&:hover {
text-decoration: none;
}
img {
width: 23px;
}
p {
margin-bottom: 0;
font-weight: 400;