264 lines
9.1 KiB
JavaScript
264 lines
9.1 KiB
JavaScript
import React, { useEffect, useState } from "react";
|
||
import { useDispatch, useSelector } from "react-redux";
|
||
import { Link, Navigate, useNavigate } from "react-router-dom";
|
||
|
||
import {
|
||
getPartnerRequestId,
|
||
getPartnerRequests,
|
||
setPartnerRequestId,
|
||
setPartnerRequestInfo,
|
||
} from "@redux/outstaffingSlice";
|
||
|
||
import { urlForLocal } from "@utils/helper";
|
||
|
||
import { apiRequest } from "@api/request";
|
||
|
||
import { getCorrectDate } from "@components/Calendar/calendarHelper";
|
||
import { Footer } from "@components/Common/Footer/Footer";
|
||
import { Loader } from "@components/Common/Loader/Loader";
|
||
import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
|
||
import { Navigation } from "@components/Navigation/Navigation";
|
||
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
|
||
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
|
||
|
||
import arrowSwitchDate from "assets/icons/arrows/arrowViewReport.png";
|
||
import backEndImg from "assets/images/QualificationInfo.png";
|
||
import middle from "assets/images/QualificationInfoMiddle.png";
|
||
import deleteBtn from "assets/images/deleteBtn.png";
|
||
|
||
import "./partnerBid.scss";
|
||
|
||
export const PartnerBid = () => {
|
||
if (localStorage.getItem("role_status") !== "18") {
|
||
return <Navigate to="/profile" replace />;
|
||
}
|
||
|
||
const dispatch = useDispatch();
|
||
const requestId = useSelector(getPartnerRequestId);
|
||
const partnerRequests = useSelector(getPartnerRequests);
|
||
const navigate = useNavigate();
|
||
|
||
if (!requestId) {
|
||
return <Navigate to="/profile/requests" replace />;
|
||
}
|
||
|
||
useEffect(() => {
|
||
setLoader(true);
|
||
apiRequest(`/request/get-request?request_id=${requestId}`).then((el) => {
|
||
setRequestInfo(el);
|
||
dispatch(setPartnerRequestInfo(el));
|
||
setLoader(false);
|
||
});
|
||
}, [requestId]);
|
||
|
||
const deleteRequest = () => {
|
||
apiRequest("/request/update-request", {
|
||
method: "PUT",
|
||
data: {
|
||
user_id: localStorage.getItem("id"),
|
||
request_id: requestId,
|
||
status: 0,
|
||
},
|
||
}).then(() => {
|
||
navigate("/profile/requests");
|
||
});
|
||
};
|
||
|
||
const [requestInfo, setRequestInfo] = useState({});
|
||
const [loader, setLoader] = useState(false);
|
||
const [modalDelete, setModalDelete] = useState(false);
|
||
const [levels] = useState({
|
||
1: "Junior",
|
||
2: "Middle",
|
||
3: "Middle+",
|
||
4: "Senior",
|
||
});
|
||
return (
|
||
<div className="partnerBid">
|
||
<ProfileHeader />
|
||
<Navigation />
|
||
<ModalLayout active={modalDelete} setActive={setModalDelete}>
|
||
<div className="title-project modal-title-delete">
|
||
<h4>Подтверждение удаления</h4>
|
||
<p className="title-project__decs modal-decs">
|
||
Вы решили удалить заявку. После удаления ее нельзя будет
|
||
восстановить. Продолжаем?
|
||
</p>
|
||
|
||
<div className="buttons-modal">
|
||
<button
|
||
className="buttons-modal__no"
|
||
onClick={() => setModalDelete(false)}
|
||
>
|
||
Нет
|
||
</button>
|
||
<button
|
||
className="buttons-modal__yes"
|
||
onClick={() => deleteRequest()}
|
||
>
|
||
Да
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</ModalLayout>
|
||
|
||
<div className="container">
|
||
<ProfileBreadcrumbs
|
||
links={[
|
||
{ name: "Главная", link: "/profile" },
|
||
{ name: "Запросы и открытые позиции", link: "/profile/requests" },
|
||
{ name: "Просмотр заявки - PHP разработчик", link: "/profile/bid" },
|
||
]}
|
||
/>
|
||
<h2 className="partnerBid__title">Страница заявки </h2>
|
||
{loader && <Loader />}
|
||
{!loader && (
|
||
<>
|
||
<div className="partnerBid__qualification">
|
||
<h3>{requestInfo.title}</h3>
|
||
<div className="partnerBid__qualification__buttons">
|
||
<Link to="/profile/edit-request">Редактировать</Link>
|
||
<img
|
||
src={deleteBtn}
|
||
alt="delete"
|
||
onClick={() => setModalDelete(true)}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="partnerBid__switcher">
|
||
<div
|
||
className={
|
||
partnerRequests[
|
||
partnerRequests.findIndex((el) => el.id === requestId) - 1
|
||
]?.id
|
||
? "partnerBid__switcher__prev switchDate"
|
||
: "partnerBid__switcher__prev switchDate disable"
|
||
}
|
||
onClick={() => {
|
||
dispatch(
|
||
setPartnerRequestId(
|
||
partnerRequests[
|
||
partnerRequests.findIndex((el) => el.id === requestId) -
|
||
1
|
||
].id
|
||
)
|
||
);
|
||
}}
|
||
>
|
||
<img src={arrowSwitchDate} alt="arrow" />
|
||
</div>
|
||
<p>Дата заявки : {getCorrectDate(requestInfo.created_at)} </p>
|
||
<div
|
||
className={
|
||
partnerRequests[
|
||
partnerRequests.findIndex((el) => el.id === requestId) + 1
|
||
]?.id
|
||
? "partnerBid__switcher__next switchDate"
|
||
: "partnerBid__switcher__next switchDate disable"
|
||
}
|
||
onClick={() => {
|
||
dispatch(
|
||
setPartnerRequestId(
|
||
partnerRequests[
|
||
partnerRequests.findIndex((el) => el.id === requestId) +
|
||
1
|
||
].id
|
||
)
|
||
);
|
||
}}
|
||
>
|
||
<img src={arrowSwitchDate} alt="arrow" />
|
||
</div>
|
||
</div>
|
||
</>
|
||
)}
|
||
{Boolean(Object.keys(requestInfo).length) && !loader && (
|
||
<>
|
||
<div className="table__wrapper">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>
|
||
<p>Требования к стеку разработчика</p>
|
||
</th>
|
||
<th>
|
||
<p>Квалификация</p>
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>
|
||
<p>
|
||
{requestInfo.position.name}.
|
||
{requestInfo.skills.map((skill, index) => {
|
||
return (
|
||
<span key={skill.id}>
|
||
{skill.name}
|
||
{requestInfo.skills.length > index + 1
|
||
? ","
|
||
: "."}
|
||
|
||
</span>
|
||
);
|
||
})}
|
||
</p>
|
||
</td>
|
||
<td>
|
||
<div className="qualification__info">
|
||
<div className="img__wrapper">
|
||
<img src={backEndImg} alt="backEndImg" />
|
||
</div>
|
||
<p>{requestInfo.position.name}</p>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<p>{requestInfo.descr}</p>
|
||
</td>
|
||
<td>
|
||
<div className="qualification__info">
|
||
<div className="img__wrapper">
|
||
<img src={middle} alt="middleImg" />
|
||
</div>
|
||
<p className="middle">{requestInfo.level}</p>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div className="partnerBid__suitable">
|
||
<div className="partnerBid__suitable__title">
|
||
<p>Подходящие сотрудники по запросу</p>
|
||
</div>
|
||
<div className="partnerBid__suitable__persons">
|
||
{requestInfo.result_profiles.length &&
|
||
requestInfo.result_profiles.map((person, index) => {
|
||
return (
|
||
<div key={index} className="partnerBid__suitable__person">
|
||
<img src={urlForLocal(person.photo)} alt="avatar" />
|
||
<p>
|
||
{person.fio} - {person.position_title},{" "}
|
||
{levels[person.level]}
|
||
</p>
|
||
<Link
|
||
className="partnerBid__suitable__person__more"
|
||
to={`/candidate/${person.id}`}
|
||
>
|
||
Подробнее
|
||
</Link>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
<Footer />
|
||
</div>
|
||
);
|
||
};
|