Fixed catalog pages and added modal
This commit is contained in:
MaxOvs19
@ -1,182 +1,262 @@
|
||||
import React, {useEffect, useState} from 'react';
|
||||
import {Link, Navigate, useNavigate} from "react-router-dom";
|
||||
import {useSelector, useDispatch} from 'react-redux'
|
||||
import {getPartnerRequestId, getPartnerRequests, setPartnerRequestId, setPartnerRequestInfo} from '../../redux/outstaffingSlice'
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Link, Navigate, useNavigate } from "react-router-dom";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
import {
|
||||
getPartnerRequestId,
|
||||
getPartnerRequests,
|
||||
setPartnerRequestId,
|
||||
setPartnerRequestInfo,
|
||||
} from "../../redux/outstaffingSlice";
|
||||
|
||||
import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
|
||||
import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"
|
||||
import {Footer} from "../../components/Footer/Footer";
|
||||
import { Navigation } from '../../components/Navigation/Navigation';
|
||||
import {Loader} from "../../components/Loader/Loader"
|
||||
import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
|
||||
import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
|
||||
import { Footer } from "../../components/Footer/Footer";
|
||||
import { Navigation } from "../../components/Navigation/Navigation";
|
||||
import { Loader } from "../../components/Loader/Loader";
|
||||
import ModalAdd from "../../components/UI/ModalAdd/ModalAdd";
|
||||
|
||||
import {apiRequest} from "../../api/request";
|
||||
import {getCorrectDate} from "../../components/Calendar/calendarHelper";
|
||||
import { apiRequest } from "../../api/request";
|
||||
import { getCorrectDate } from "../../components/Calendar/calendarHelper";
|
||||
|
||||
import {urlForLocal} from '../../helper'
|
||||
import { urlForLocal } from "../../helper";
|
||||
|
||||
import arrowSwitchDate from "../../images/arrowViewReport.png";
|
||||
import backEndImg from "../../images/QualificationInfo.png";
|
||||
import middle from "../../images/QualificationInfoMiddle.png";
|
||||
import deleteBtn from "../../images/deleteBtn.png"
|
||||
import deleteBtn from "../../images/deleteBtn.png";
|
||||
|
||||
import './partnerBid.scss'
|
||||
import "./partnerBid.scss";
|
||||
|
||||
export const PartnerBid = () => {
|
||||
if(localStorage.getItem('role_status') !== '18') {
|
||||
return <Navigate to="/profile" replace/>
|
||||
}
|
||||
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();
|
||||
const dispatch = useDispatch();
|
||||
const requestId = useSelector(getPartnerRequestId);
|
||||
const partnerRequests = useSelector(getPartnerRequests);
|
||||
const navigate = useNavigate();
|
||||
|
||||
if (!requestId) {
|
||||
return <Navigate to="/profile/requests" replace/>
|
||||
}
|
||||
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]);
|
||||
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((res) => {
|
||||
navigate('/profile/requests');
|
||||
})
|
||||
};
|
||||
const deleteRequest = () => {
|
||||
apiRequest("/request/update-request", {
|
||||
method: "PUT",
|
||||
data: {
|
||||
user_id: localStorage.getItem("id"),
|
||||
request_id: requestId,
|
||||
status: 0,
|
||||
},
|
||||
}).then((res) => {
|
||||
navigate("/profile/requests");
|
||||
});
|
||||
};
|
||||
|
||||
const [requestInfo, setRequestInfo] = useState({})
|
||||
const [loader, setLoader] = useState(false)
|
||||
const [levels] = useState({
|
||||
1: "Junior",
|
||||
2: "Middle",
|
||||
3: "Middle+",
|
||||
4: "Senior",
|
||||
})
|
||||
return (
|
||||
<div className='partnerBid'>
|
||||
<ProfileHeader />
|
||||
<Navigation />
|
||||
<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={() => deleteRequest()}/>
|
||||
</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/>
|
||||
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 />
|
||||
<ModalAdd 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>
|
||||
)
|
||||
</ModalAdd>
|
||||
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
.partnerBid {
|
||||
background: #F1F1F1;
|
||||
background: #f1f1f1;
|
||||
height: 100%;
|
||||
min-height: 100vh;
|
||||
font-family: 'LabGrotesque', sans-serif;
|
||||
font-family: "LabGrotesque", sans-serif;
|
||||
|
||||
.container {
|
||||
max-width: 1160px;
|
||||
@ -21,7 +21,7 @@
|
||||
}
|
||||
|
||||
&__qualification {
|
||||
background: #FFFFFF;
|
||||
background: #ffffff;
|
||||
border-radius: 12px;
|
||||
padding: 20px 37px;
|
||||
margin-top: 20px;
|
||||
@ -45,7 +45,7 @@
|
||||
max-width: 168px;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
background: #E1FCCF;
|
||||
background: #e1fccf;
|
||||
border-radius: 44px;
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
@ -81,7 +81,7 @@
|
||||
.switchDate {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: #8DC63F;
|
||||
background: #8dc63f;
|
||||
border-radius: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -131,12 +131,10 @@
|
||||
}
|
||||
|
||||
thead {
|
||||
|
||||
@media (max-width: 1205px) {
|
||||
display: grid;
|
||||
}
|
||||
tr {
|
||||
|
||||
@media (max-width: 1205px) {
|
||||
display: grid;
|
||||
grid-template-columns: 74% calc(26% - 28px);
|
||||
@ -162,7 +160,6 @@
|
||||
&:first-child {
|
||||
padding: 32px 37px;
|
||||
|
||||
|
||||
@media (max-width: 640px) {
|
||||
padding: 15px;
|
||||
}
|
||||
@ -198,7 +195,6 @@
|
||||
display: grid;
|
||||
}
|
||||
tr {
|
||||
|
||||
@media (max-width: 1205px) {
|
||||
display: grid;
|
||||
grid-template-columns: 74% calc(26% - 28px);
|
||||
@ -264,7 +260,7 @@
|
||||
.img__wrapper {
|
||||
min-width: 48px;
|
||||
height: 48px;
|
||||
background: #8DC63F;
|
||||
background: #8dc63f;
|
||||
border-radius: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -319,7 +315,7 @@
|
||||
|
||||
&__suitable {
|
||||
&__title {
|
||||
background: #E1FCCF;
|
||||
background: #e1fccf;
|
||||
border-radius: 12px 12px 0px 0px;
|
||||
margin-top: 48px;
|
||||
padding: 18px 37px;
|
||||
@ -374,7 +370,7 @@
|
||||
display: flex;
|
||||
padding: 21px 45px 19px;
|
||||
align-items: center;
|
||||
background: #FFFFFF;
|
||||
background: #ffffff;
|
||||
border-radius: 12px;
|
||||
|
||||
&:hover {
|
||||
@ -399,7 +395,7 @@
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
background: #52B709;
|
||||
background: #52b709;
|
||||
border-radius: 12px;
|
||||
width: 70%;
|
||||
height: 8px;
|
||||
@ -410,9 +406,9 @@
|
||||
|
||||
&__more {
|
||||
padding: 9px 45px;
|
||||
background: #52B709;
|
||||
background: #52b709;
|
||||
border-radius: 44px;
|
||||
color: #FFFFFF;
|
||||
color: #ffffff;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 32px;
|
||||
@ -427,9 +423,10 @@
|
||||
&__info {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
box-shadow: 0px 3px 2px -2px rgba(0, 0, 0, 0.06), 0px 5px 3px -2px rgba(0, 0, 0, 0.02);
|
||||
box-shadow: 0px 3px 2px -2px rgba(0, 0, 0, 0.06),
|
||||
0px 5px 3px -2px rgba(0, 0, 0, 0.02);
|
||||
border-radius: 6px;
|
||||
border: 1px solid #DDDDDD;
|
||||
border: 1px solid #dddddd;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
display: flex;
|
||||
@ -439,7 +436,7 @@
|
||||
|
||||
&:before {
|
||||
content: "...";
|
||||
color: #6F6F6F;
|
||||
color: #6f6f6f;
|
||||
font-size: 25px;
|
||||
position: relative;
|
||||
top: -6px;
|
||||
@ -502,6 +499,44 @@
|
||||
}
|
||||
}
|
||||
|
||||
.modal-decs {
|
||||
text-align: center;
|
||||
width: 78%;
|
||||
}
|
||||
|
||||
.modal-title-delete {
|
||||
align-items: center;
|
||||
h4 {
|
||||
margin: 0 auto;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.buttons-modal {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
|
||||
&__no,
|
||||
&__yes {
|
||||
width: 89px;
|
||||
height: 50px;
|
||||
border-radius: 44px;
|
||||
font-size: 14px;
|
||||
line-height: 32px;
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
&__no {
|
||||
background: #a29eb6;
|
||||
}
|
||||
|
||||
&__yes {
|
||||
background: #52b709;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 70px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user