guild_front/src/pages/PartnerAddRequest/PartnerAddRequest.js

475 lines
18 KiB
JavaScript
Raw Normal View History

2023-05-25 16:42:37 +03:00
import React, { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import { Link, Navigate, useNavigate } from "react-router-dom";
2023-05-30 10:54:47 +03:00
import { getPartnerRequestInfo } from "@redux/outstaffingSlice";
2023-04-21 01:07:09 +03:00
2023-05-31 08:36:15 +03:00
import { apiRequest } from "@api/request";
2023-05-30 10:54:47 +03:00
import { Footer } from "@components/Common/Footer/Footer";
import { Navigation } from "@components/Navigation/Navigation";
2023-05-31 08:36:15 +03:00
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
2023-05-30 10:54:47 +03:00
import arrowDown from "assets/icons/arrows/selectArrow.png";
2023-05-31 08:36:15 +03:00
import deleteIcon from "assets/icons/close.png";
2023-05-30 10:54:47 +03:00
import processImg from "assets/images/partnerProfile/partnerAddRequestFirstImg.png";
import reportImg from "assets/images/partnerProfile/partnerAddRequestSecondImg.png";
import documentsImg from "assets/images/partnerProfile/partnerAddRequestThirdInfo.png";
2023-05-25 16:42:37 +03:00
import "./partnerAddRequest.scss";
2023-03-16 15:10:53 +03:00
export const PartnerAddRequest = () => {
2023-05-25 16:42:37 +03:00
if (localStorage.getItem("role_status") !== "18") {
return <Navigate to="/profile" replace />;
}
2023-04-09 05:05:33 +03:00
2023-05-25 16:42:37 +03:00
const partnerRequestInfo = useSelector(getPartnerRequestInfo);
const currentUrl = useState(window.location.pathname);
const navigate = useNavigate();
const [skills, setSkills] = useState([]);
const [filteredSkills, setFilteredSkills] = useState([]);
const [specializationList, setSpecializationList] = useState([]);
const [levelList, setLevelList] = useState([]);
const [countList] = useState([1, 2, 3, 4, 5]);
const [openSkillsSelect, setOpenSkillsSelect] = useState(false);
const [openSpecializationList, setOpenSpecializationListOpen] =
useState(false);
const [openLevelList, setOpenLevelList] = useState(false);
const [openCountList, setOpenCountList] = useState(false);
const [editRequest, setEditRequest] = useState(false);
const [selectedSkills, setSelectedSkills] = useState([]);
const [selectedSpecialization, setSelectedSpecialization] = useState(
2023-12-05 14:15:04 +03:00
"Выберите специализацию"
2023-05-25 16:42:37 +03:00
);
const [selectedLevel, setSelectedLevel] = useState("Выберите уровень");
const [selectedCount, setSelectedCount] = useState(
2023-12-05 14:15:04 +03:00
"Выберите кол-во сотрудников"
2023-05-25 16:42:37 +03:00
);
const [inputs, setInputs] = useState({ title: "", description: "" });
2023-04-18 13:58:36 +03:00
2023-05-25 16:42:37 +03:00
if (
currentUrl[0] === "/profile/edit-request" &&
!Object.keys(partnerRequestInfo).length
) {
return <Navigate to="/profile/requests" replace />;
}
2023-04-21 01:07:09 +03:00
2023-05-25 16:42:37 +03:00
useEffect(() => {
2024-02-13 15:32:32 +03:00
initListeners();
2023-05-25 16:42:37 +03:00
apiRequest(`/profile/positions-list`).then((el) =>
2023-12-05 14:15:04 +03:00
setSpecializationList(el)
2023-05-25 16:42:37 +03:00
);
apiRequest(`/profile/level-list`).then((el) => setLevelList(el));
apiRequest(`/skills/get-skills-list`).then((el) => {
setSkills(el);
setFilteredSkills(el);
});
}, []);
2023-04-18 13:58:36 +03:00
2023-05-25 16:42:37 +03:00
useEffect(() => {
if (
currentUrl[0] === "/profile/edit-request" &&
Object.keys(partnerRequestInfo).length
) {
setInputs({
title: partnerRequestInfo.title,
2023-12-19 17:36:30 +03:00
description: partnerRequestInfo.descr
2023-05-25 16:42:37 +03:00
});
setSelectedSpecialization(partnerRequestInfo.position);
setSelectedLevel({
name: partnerRequestInfo.level,
2023-12-19 17:36:30 +03:00
id: partnerRequestInfo.knowledge_level_id
2023-05-25 16:42:37 +03:00
});
setSelectedCount(partnerRequestInfo.specialist_count);
setSelectedSkills(partnerRequestInfo.skills);
setEditRequest(true);
2023-04-18 13:58:36 +03:00
}
2023-05-25 16:42:37 +03:00
}, []);
2023-04-18 13:58:36 +03:00
2023-05-25 16:42:37 +03:00
const disableBtn = () => {
if (
!inputs.title ||
typeof selectedSpecialization === "string" ||
typeof selectedLevel === "string" ||
typeof selectedCount === "string" ||
!inputs.description ||
!selectedSkills.length
) {
return false;
2023-04-18 13:58:36 +03:00
}
2023-05-25 16:42:37 +03:00
return true;
};
2023-04-18 13:58:36 +03:00
2023-05-25 16:42:37 +03:00
const handler = () => {
if (currentUrl[0] === "/profile/edit-request") {
apiRequest("/request/update-request", {
method: "PUT",
data: {
user_id: localStorage.getItem("id"),
request_id: partnerRequestInfo.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;
2023-12-19 17:36:30 +03:00
})
}
2023-05-31 11:24:46 +03:00
}).then(() => {
2023-05-25 16:42:37 +03:00
navigate("/profile/requests");
});
} else {
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;
2023-12-19 17:36:30 +03:00
})
}
2023-05-31 11:24:46 +03:00
}).then(() => {
2023-05-25 16:42:37 +03:00
navigate("/profile/requests");
});
}
};
2023-04-09 05:05:33 +03:00
2024-02-13 15:32:32 +03:00
const initListeners = () => {
document.addEventListener("click", closeByClickingOut);
};
const closeByClickingOut = (event) => {
const path = event.path || (event.composedPath && event.composedPath());
if (
event &&
!path.find(
(div) =>
div.classList &&
(div.classList.contains("form__block__section__selects") ||
2024-02-13 15:32:48 +03:00
div.classList.contains("form__block__dropDown") ||
div.classList.contains("form__block__skills") ||
2024-02-13 15:32:32 +03:00
div.classList.contains("form__block__section__select"))
)
) {
2024-02-13 15:32:48 +03:00
setOpenSkillsSelect(false);
setOpenSpecializationListOpen(false);
setOpenLevelList(false);
setOpenCountList(false);
2024-02-13 15:32:32 +03:00
}
};
2023-05-25 16:42:37 +03:00
return (
<div className="partner-add-request">
2023-05-25 16:42:37 +03:00
<ProfileHeader />
<Navigation />
<div className="container">
<ProfileBreadcrumbs
links={[
{ name: "Главная", link: "/profile" },
{ name: "Запросы и открытые позиции", link: "/profile/requests" },
{
name: `${
editRequest ? "Редактирование заявки" : "Создание новой заявки"
}`,
2023-12-19 17:36:30 +03:00
link: "/profile/add-request"
}
2023-05-25 16:42:37 +03:00
]}
/>
<h2 className="partner-add-request__title">
2023-05-25 16:42:37 +03:00
{editRequest
? "Страница редактирования заявки"
: "Страница добавления заявки"}
</h2>
<div className="partner-add-request__section">
<div className="partner-add-request__form">
<div className="partner-add-request__form__block form__block">
2023-05-25 16:42:37 +03:00
<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,
2023-12-19 17:36:30 +03:00
title: e.target.value
2023-05-25 16:42:37 +03:00
}))
}
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">
2023-05-31 11:24:46 +03:00
{specializationList.map((specialization) => {
2023-05-25 16:42:37 +03:00
return (
<p
key={specialization.id}
onClick={() => {
setOpenSpecializationListOpen(false);
setSelectedSpecialization(specialization);
}}
>
{specialization.name}
</p>
);
})}
</div>
2023-05-25 16:42:37 +03:00
)}
</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,
2023-12-19 17:36:30 +03:00
skill
2023-05-25 16:42:37 +03:00
]);
setSelectedSkills(
selectedSkills.filter((skill, indexSkill) => {
return indexSkill !== index;
2023-12-05 14:15:04 +03:00
})
2023-05-25 16:42:37 +03:00
);
}}
/>
</div>
2023-05-25 16:42:37 +03:00
);
})}
<input
type="text"
placeholder="Выберите навыки"
onChange={(e) => {
setFilteredSkills(
skills.filter((skill) => {
return skill.name
.toLowerCase()
.includes(e.target.value.toLowerCase());
2023-12-05 14:15:04 +03:00
})
2023-05-25 16:42:37 +03:00
);
}}
/>
</div>
{openSkillsSelect && Boolean(filteredSkills.length) && (
<div className="form__block__dropDown">
{filteredSkills.map((skill, index) => {
return (
<span
key={skill.id}
onClick={() => {
setSelectedSkills((prevArray) => [
...prevArray,
2023-12-19 17:36:30 +03:00
skill
2023-05-25 16:42:37 +03:00
]);
setFilteredSkills(
filteredSkills.filter((skill, skillIndex) => {
return skillIndex !== index;
2023-12-05 14:15:04 +03:00
})
2023-05-25 16:42:37 +03:00
);
setSkills(
skills.filter((initSkill) => {
return initSkill.id !== skill.id;
2023-12-05 14:15:04 +03:00
})
2023-05-25 16:42:37 +03:00
);
setOpenSkillsSelect(false);
}}
>
{skill.name}
</span>
);
})}
</div>
)}
</div>
</div>
<div className="partner-add-request__form__block form__block">
2023-05-25 16:42:37 +03:00
<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>
2023-05-25 16:42:37 +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>
)}
</div>
<div className="form__block__section">
<h3>Введите необходимое описание</h3>
<textarea
value={inputs.description}
onChange={(e) =>
setInputs((prevValue) => ({
...prevValue,
2023-12-19 17:36:30 +03:00
description: e.target.value
2023-05-25 16:42:37 +03:00
}))
}
/>
</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__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 className="partner-add-request__info">
<div className="partner-add-request__info__block">
<div className="partner-add-request__info__block__title">
2023-05-25 16:42:37 +03:00
<img src={processImg} alt="process" />
<h4>Процесс:</h4>
</div>
<p>
2023-12-04 18:00:12 +03:00
При аутстаффе мы предоставляем вам IT-специалистов при этом они
2023-05-25 16:42:37 +03:00
находятся в нашем штате.
<br />
<br />
Вы сможете прособеседовать наших специалистов, посмотреть
проекты и Git.
</p>
</div>
<div className="partner-add-request__info__block">
<div className="partner-add-request__info__block__title">
2023-05-25 16:42:37 +03:00
<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">
2023-05-25 16:42:37 +03:00
<img src={documentsImg} alt="documentsImg" />
<h4>
Обмен <br />
документами:
</h4>
</div>
<p>
В Личном кабинете платформы получайте отчеты выполненных работ и
2024-02-09 20:59:44 +03:00
счеты на согласование и оплату
2023-05-25 16:42:37 +03:00
</p>
</div>
2023-05-25 16:42:37 +03:00
</div>
</div>
2023-05-25 16:42:37 +03:00
</div>
<Footer />
</div>
);
};