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

Fixed catalog pages and added modal

Browse Source
This commit is contained in:
MaxOvs19 2023-04-26 21:29:50 +03:00
parent 03bba43f67
commit 8553adcf08
6 changed files with 720 additions and 575 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

350
src/components/Candidate/Candidate.js
View File

@ -1,35 +1,38 @@
import React, {useEffect, useState} from 'react' import React, { useEffect, useState } from "react";
import {useParams, Link, useNavigate, Navigate} from 'react-router-dom' import { useParams, Link, useNavigate, Navigate } from "react-router-dom";
import {useSelector, useDispatch} from 'react-redux' import { useSelector, useDispatch } from "react-redux";
import SkillSection from '../SkillSection/SkillSection' import SkillSection from "../SkillSection/SkillSection";
import Sidebar from '../CandidateSidebar/CandidateSidebar' import Sidebar from "../CandidateSidebar/CandidateSidebar";
import {ProfileHeader} from "../ProfileHeader/ProfileHeader"; import { ProfileHeader } from "../ProfileHeader/ProfileHeader";
import {ProfileBreadcrumbs} from "../ProfileBreadcrumbs/ProfileBreadcrumbs"; import { ProfileBreadcrumbs } from "../ProfileBreadcrumbs/ProfileBreadcrumbs";
import {Footer} from '../Footer/Footer' import { Footer } from "../Footer/Footer";
import {currentCandidate, selectCurrentCandidate,} from '../../redux/outstaffingSlice' import {
currentCandidate,
selectCurrentCandidate,
} from "../../redux/outstaffingSlice";
import {apiRequest} from "../../api/request"; import { apiRequest } from "../../api/request";
import {createMarkup} from "../../helper"; import { createMarkup } from "../../helper";
import gitImgItem from "../../images/gitItemImg.png" import gitImgItem from "../../images/gitItemImg.png";
import rectangle from '../../images/rectangle_secondPage.png' import rectangle from "../../images/rectangle_secondPage.png";
import front from '../Outstaffing/images/front_end.png' import front from "../Outstaffing/images/front_end.png";
import back from '../Outstaffing/images/back_end.png' import back from "../Outstaffing/images/back_end.png";
import design from '../Outstaffing/images/design.png' import design from "../Outstaffing/images/design.png";
import rightArrow from "../../images/arrowRight.png" import rightArrow from "../../images/arrowRight.png";
import {LEVELS, SKILLS} from '../../constants/constants' import { LEVELS, SKILLS } from "../../constants/constants";
import './candidate.scss'
import "./candidate.scss";
import { Navigation } from "../Navigation/Navigation";
const Candidate = () => { const Candidate = () => {
if(localStorage.getItem('role_status') !== '18') { if (localStorage.getItem("role_status") !== "18") {
return <Navigate to="/profile" replace/> return <Navigate to="/profile" replace />;
} }
const {id: candidateId} = useParams(); const { id: candidateId } = useParams();
const navigate = useNavigate(); const navigate = useNavigate();
@ -39,190 +42,201 @@ const Candidate = () => {
const [activeSnippet, setActiveSnippet] = useState(true); const [activeSnippet, setActiveSnippet] = useState(true);
useEffect(() => { useEffect(() => {
window.scrollTo(0, 0) window.scrollTo(0, 0);
}, []); }, []);
useEffect(() => { useEffect(() => {
apiRequest(`/profile/${candidateId}`, { apiRequest(`/profile/${candidateId}`, {
params: Number(candidateId), params: Number(candidateId),
}).then((el) => dispatch(currentCandidate(el))) }).then((el) => dispatch(currentCandidate(el)));
}, [dispatch, candidateId]); }, [dispatch, candidateId]);
const {position_id, skillValues, vc_text: text} = currentCandidateObj; const { position_id, skillValues, vc_text: text } = currentCandidateObj;
const setStyles = () => { const setStyles = () => {
const styles = { const styles = {
classes: '', classes: "",
header: '', header: "",
img: '' img: "",
}; };
switch (Number(position_id)) { switch (Number(position_id)) {
case 1: { case 1: {
styles.classes = 'back'; styles.classes = "back";
styles.header = 'Backend'; styles.header = "Backend";
styles.img = back; styles.img = back;
break break;
} }
case 2: { case 2: {
styles.classes = 'des'; styles.classes = "des";
styles.header = 'Frontend'; styles.header = "Frontend";
styles.img = front; styles.img = front;
break break;
} }
case 3: { case 3: {
styles.classes = 'front'; styles.classes = "front";
styles.header = 'Design'; styles.header = "Design";
styles.img = design; styles.img = design;
break break;
} }
default: default:
break break;
} }
return styles return styles;
}; };
const {header, img, classes} = setStyles(); const { header, img, classes } = setStyles();
return ( return (
<div className='candidate__wrapper'> <div className="candidate__wrapper">
<ProfileHeader/> <ProfileHeader />
<div className='container candidate'> <Navigation />
<ProfileBreadcrumbs links={[ <div className="container candidate">
{name: 'Главная', link: '/profile'}, <ProfileBreadcrumbs
{name: 'Каталог свободных специалистов', link: '/profile/catalog'}, links={[
{name: `${currentCandidateObj.specification} ${SKILLS[currentCandidateObj.position_id]}, ${LEVELS[currentCandidateObj.level]}`, link: `/candidate/${currentCandidateObj.id}`} { name: "Главная", link: "/profile" },
{
name: "Каталог свободных специалистов",
link: "/profile/catalog",
},
{
name: `${currentCandidateObj.specification} ${
SKILLS[currentCandidateObj.position_id]
}, ${LEVELS[currentCandidateObj.level]}`,
link: `/candidate/${currentCandidateObj.id}`,
},
]} ]}
/> />
<div className='row'> <div className="row">
<div className='col-12 candidate__header'> <div className="col-12 candidate__header">
<div className="candidate__header__left">
<h3>
{currentCandidateObj.specification} &nbsp;{" "}
{SKILLS[currentCandidateObj.position_id]} &nbsp;{" "}
{LEVELS[currentCandidateObj.level]}
</h3>
<div
className="candidate__arrow"
onClick={() => navigate("/profile/catalog")}
>
<div className="candidate__arrow-img">
<img src={rightArrow} alt="" />
</div>
<div className="candidate__arrow-sp">
<span>Вернуться к списку</span>
</div>
</div>
</div>
<div className='candidate__header__left'> <div className="candidate__icon">
<h3>{currentCandidateObj.specification} &nbsp; {SKILLS[currentCandidateObj.position_id]} &nbsp; {LEVELS[currentCandidateObj.level]}</h3> <h3>{header}</h3>
<div className='candidate__arrow' onClick={() => navigate('/profile/catalog')}> <img className={classes} src={img} alt="" />
<div className='candidate__arrow-img'> </div>
<img src={rightArrow} alt=''/> </div>
</div> </div>
<div className='candidate__arrow-sp'> <div className="candidate__main">
<span>Вернуться к списку</span> <div className="row">
<div className="col-12 col-xl-4">
<Sidebar
candidate={currentCandidateObj}
position
activeSnippet={activeSnippet}
setActiveSnippet={setActiveSnippet}
/>
</div>
{activeSnippet ? (
<div className="col-12 col-xl-8">
<div className="candidate__main-description">
<img src={rectangle} alt="" />
<p className="candidate__hashtag"># Описание опыта</p>
{text ? (
<div
className="candidate__text"
dangerouslySetInnerHTML={createMarkup(text)}
></div>
) : (
<p className="candidate__text-secondary">
{currentCandidateObj.vc_text
? currentCandidateObj.vc_text
: "Описание отсутствует..."}
</p>
)}
<SkillSection skillsArr={skillValues} />
</div>
</div>
) : (
<div className="col-12 col-xl-8">
<div className="candidate__works works">
<div className="works__body">
<div className="works__body__info">
<p>Страница портфолио кода разработчика</p>
</div>
<div className="works__item item-works">
<Link to="/" className="item-works__body">
<div className="item-works__body__head">
<div className="item-works__body__info">
<img src={gitImgItem} alt="img" />
<div className="item-works__body__project">
<h5>cybershop-api</h5>
<p>Реактивная социальная сеть</p>
</div>
</div>
<div className="item-works__body__head__arrow">
<img src={rightArrow} alt="arrow" />
</div>
</div>
<span>JavaScript </span>
</Link>
</div>
<div className="works__item item-works">
<Link to="/" className="item-works__body">
<div className="item-works__body__head">
<div className="item-works__body__info">
<img src={gitImgItem} alt="img" />
<div className="item-works__body__project">
<h5>cybershop-api</h5>
<p>Реактивная социальная сеть</p>
</div>
</div>
<div className="item-works__body__head__arrow">
<img src={rightArrow} alt="arrow" />
</div>
</div>
<span>JavaScript </span>
</Link>
</div>
<div className="works__item item-works">
<Link to="/" className="item-works__body">
<div className="item-works__body__head">
<div className="item-works__body__info">
<img src={gitImgItem} alt="img" />
<div className="item-works__body__project">
<h5>cybershop-api</h5>
<p>Реактивная социальная сеть</p>
</div>
</div>
<div className="item-works__body__head__arrow">
<img src={rightArrow} alt="arrow" />
</div>
</div>
<span>JavaScript </span>
</Link>
</div>
</div> </div>
</div> </div>
</div> </div>
)}
<div className='candidate__icon'>
<h3>{header}</h3>
<img className={classes} src={img} alt=''/>
</div>
</div>
</div> </div>
<div className='candidate__main'>
<div className='row'>
<div className='col-12 col-xl-4'>
<Sidebar candidate={currentCandidateObj} position activeSnippet={activeSnippet}
setActiveSnippet={setActiveSnippet}/>
</div>
{
activeSnippet ?
(
<div className='col-12 col-xl-8'>
<div className='candidate__main-description'>
<img src={rectangle} alt=''/>
<p className='candidate__hashtag'># Описание опыта</p>
{text ? (
<div
className='candidate__text'
dangerouslySetInnerHTML={createMarkup(text)}
></div>
) : (
<p className='candidate__text-secondary'>
{currentCandidateObj.vc_text
? currentCandidateObj.vc_text
: 'Описание отсутствует...'}
</p>
)}
<SkillSection skillsArr={skillValues}/>
</div>
</div>
) :
(
<div className="col-12 col-xl-8">
<div className="candidate__works works">
<div className="works__body">
<div className="works__body__info">
<p>Страница портфолио кода разработчика</p>
</div>
<div className="works__item item-works">
<Link to='/' className="item-works__body">
<div className='item-works__body__head'>
<div className='item-works__body__info'>
<img src={gitImgItem} alt='img' />
<div className='item-works__body__project'>
<h5>cybershop-api</h5>
<p>Реактивная социальная сеть</p>
</div>
</div>
<div className='item-works__body__head__arrow'>
<img src={rightArrow} alt='arrow' />
</div>
</div>
<span>JavaScript </span>
</Link>
</div>
<div className="works__item item-works">
<Link to='/' className="item-works__body">
<div className='item-works__body__head'>
<div className='item-works__body__info'>
<img src={gitImgItem} alt='img' />
<div className='item-works__body__project'>
<h5>cybershop-api</h5>
<p>Реактивная социальная сеть</p>
</div>
</div>
<div className='item-works__body__head__arrow'>
<img src={rightArrow} alt='arrow' />
</div>
</div>
<span>JavaScript </span>
</Link>
</div>
<div className="works__item item-works">
<Link to='/' className="item-works__body">
<div className='item-works__body__head'>
<div className='item-works__body__info'>
<img src={gitImgItem} alt='img' />
<div className='item-works__body__project'>
<h5>cybershop-api</h5>
<p>Реактивная социальная сеть</p>
</div>
</div>
<div className='item-works__body__head__arrow'>
<img src={rightArrow} alt='arrow' />
</div>
</div>
<span>JavaScript </span>
</Link>
</div>
</div>
</div>
</div>
)
}
</div>
</div>
<Footer/>
</div> </div>
<Footer />
</div> </div>
) </div>
);
}; };
export default Candidate export default Candidate;

2
src/components/CandidateSidebar/candidateSidebar.scss
View File

@ -29,7 +29,7 @@
} }
&__info { &__info {
padding-bottom: 40px; padding: 15px 0 40px 0;
text-align: center; text-align: center;
margin-top: 10px; margin-top: 10px;
width: 100%; width: 100%;

410
src/pages/PartnerBid/PartnerBid.js
View File

@ -1,182 +1,262 @@
import React, {useEffect, useState} from 'react'; import React, { useEffect, useState } from "react";
import {Link, Navigate, useNavigate} from "react-router-dom"; import { Link, Navigate, useNavigate } from "react-router-dom";
import {useSelector, useDispatch} from 'react-redux' import { useSelector, useDispatch } from "react-redux";
import {getPartnerRequestId, getPartnerRequests, setPartnerRequestId, setPartnerRequestInfo} from '../../redux/outstaffingSlice' import {
getPartnerRequestId,
getPartnerRequests,
setPartnerRequestId,
setPartnerRequestInfo,
} from "../../redux/outstaffingSlice";
import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader"; import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs" import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import {Footer} from "../../components/Footer/Footer"; import { Footer } from "../../components/Footer/Footer";
import { Navigation } from '../../components/Navigation/Navigation'; import { Navigation } from "../../components/Navigation/Navigation";
import {Loader} from "../../components/Loader/Loader" import { Loader } from "../../components/Loader/Loader";
import ModalAdd from "../../components/UI/ModalAdd/ModalAdd";
import {apiRequest} from "../../api/request"; import { apiRequest } from "../../api/request";
import {getCorrectDate} from "../../components/Calendar/calendarHelper"; import { getCorrectDate } from "../../components/Calendar/calendarHelper";
import {urlForLocal} from '../../helper' import { urlForLocal } from "../../helper";
import arrowSwitchDate from "../../images/arrowViewReport.png"; import arrowSwitchDate from "../../images/arrowViewReport.png";
import backEndImg from "../../images/QualificationInfo.png"; import backEndImg from "../../images/QualificationInfo.png";
import middle from "../../images/QualificationInfoMiddle.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 = () => { export const PartnerBid = () => {
if(localStorage.getItem('role_status') !== '18') { if (localStorage.getItem("role_status") !== "18") {
return <Navigate to="/profile" replace/> return <Navigate to="/profile" replace />;
} }
const dispatch = useDispatch(); const dispatch = useDispatch();
const requestId = useSelector(getPartnerRequestId); const requestId = useSelector(getPartnerRequestId);
const partnerRequests = useSelector(getPartnerRequests); const partnerRequests = useSelector(getPartnerRequests);
const navigate= useNavigate(); const navigate = useNavigate();
if (!requestId) { if (!requestId) {
return <Navigate to="/profile/requests" replace/> return <Navigate to="/profile/requests" replace />;
} }
useEffect(() => { useEffect(() => {
setLoader(true) setLoader(true);
apiRequest(`/request/get-request?request_id=${requestId}`).then((el) => { apiRequest(`/request/get-request?request_id=${requestId}`).then((el) => {
setRequestInfo(el) setRequestInfo(el);
dispatch(setPartnerRequestInfo(el)) dispatch(setPartnerRequestInfo(el));
setLoader(false) setLoader(false);
}) });
}, [requestId]); }, [requestId]);
const deleteRequest = () => { const deleteRequest = () => {
apiRequest('/request/update-request', { apiRequest("/request/update-request", {
method: 'PUT', method: "PUT",
data: { data: {
user_id: localStorage.getItem('id'), user_id: localStorage.getItem("id"),
request_id: requestId, request_id: requestId,
status: 0, status: 0,
} },
}).then((res) => { }).then((res) => {
navigate('/profile/requests'); navigate("/profile/requests");
}) });
}; };
const [requestInfo, setRequestInfo] = useState({}) const [requestInfo, setRequestInfo] = useState({});
const [loader, setLoader] = useState(false) const [loader, setLoader] = useState(false);
const [levels] = useState({ const [modalDelete, setModalDelete] = useState(false);
1: "Junior", const [levels] = useState({
2: "Middle", 1: "Junior",
3: "Middle+", 2: "Middle",
4: "Senior", 3: "Middle+",
}) 4: "Senior",
return ( });
<div className='partnerBid'> return (
<ProfileHeader /> <div className="partnerBid">
<Navigation /> <ProfileHeader />
<div className='container'> <Navigation />
<ProfileBreadcrumbs links={[ <ModalAdd active={modalDelete} setActive={setModalDelete}>
{name: 'Главная', link: '/profile'}, <div className="title-project modal-title-delete">
{name: 'Запросы и открытые позиции', link: '/profile/requests'}, <h4>Подтверждение удаления</h4>
{name: 'Просмотр заявки - PHP разработчик', link: '/profile/bid'} <p className="title-project__decs modal-decs">
]} Вы решили удалить заявку. После удаления ее нельзя будет
/> восстановить. Продолжаем?
<h2 className='partnerBid__title'>Страница заявки </h2> </p>
{loader && <Loader />}
{!loader && <div className="buttons-modal">
<> <button
<div className='partnerBid__qualification'> className="buttons-modal__no"
<h3>{requestInfo.title}</h3> onClick={() => setModalDelete(false)}
<div className='partnerBid__qualification__buttons'> >
<Link to='/profile/edit-request'>Редактировать</Link> Нет
<img src={deleteBtn} alt='delete' onClick={() => deleteRequest()}/> </button>
</div> <button
</div> className="buttons-modal__yes"
<div className='partnerBid__switcher'> onClick={() => deleteRequest()}
<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)) </button>
}} </div>
>
<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}. &nbsp;
{requestInfo.skills.map((skill, index) => {
return <span key={skill.id}>{skill.name}
{requestInfo.skills.length > index + 1 ? ',' : '.'}
&nbsp;
</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> </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}. &nbsp;
{requestInfo.skills.map((skill, index) => {
return (
<span key={skill.id}>
{skill.name}
{requestInfo.skills.length > index + 1
? ","
: "."}
&nbsp;
</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>
);
}; };

71
src/pages/PartnerBid/partnerBid.scss
View File

@ -1,8 +1,8 @@
.partnerBid { .partnerBid {
background: #F1F1F1; background: #f1f1f1;
height: 100%; height: 100%;
min-height: 100vh; min-height: 100vh;
font-family: 'LabGrotesque', sans-serif; font-family: "LabGrotesque", sans-serif;
.container { .container {
max-width: 1160px; max-width: 1160px;
@ -21,7 +21,7 @@
} }
&__qualification { &__qualification {
background: #FFFFFF; background: #ffffff;
border-radius: 12px; border-radius: 12px;
padding: 20px 37px; padding: 20px 37px;
margin-top: 20px; margin-top: 20px;
@ -45,7 +45,7 @@
max-width: 168px; max-width: 168px;
width: 100%; width: 100%;
height: 48px; height: 48px;
background: #E1FCCF; background: #e1fccf;
border-radius: 44px; border-radius: 44px;
font-weight: 500; font-weight: 500;
font-size: 15px; font-size: 15px;
@ -81,7 +81,7 @@
.switchDate { .switchDate {
width: 48px; width: 48px;
height: 48px; height: 48px;
background: #8DC63F; background: #8dc63f;
border-radius: 50px; border-radius: 50px;
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -131,12 +131,10 @@
} }
thead { thead {
@media (max-width: 1205px) { @media (max-width: 1205px) {
display: grid; display: grid;
} }
tr { tr {
@media (max-width: 1205px) { @media (max-width: 1205px) {
display: grid; display: grid;
grid-template-columns: 74% calc(26% - 28px); grid-template-columns: 74% calc(26% - 28px);
@ -162,7 +160,6 @@
&:first-child { &:first-child {
padding: 32px 37px; padding: 32px 37px;
@media (max-width: 640px) { @media (max-width: 640px) {
padding: 15px; padding: 15px;
} }
@ -198,7 +195,6 @@
display: grid; display: grid;
} }
tr { tr {
@media (max-width: 1205px) { @media (max-width: 1205px) {
display: grid; display: grid;
grid-template-columns: 74% calc(26% - 28px); grid-template-columns: 74% calc(26% - 28px);
@ -264,7 +260,7 @@
.img__wrapper { .img__wrapper {
min-width: 48px; min-width: 48px;
height: 48px; height: 48px;
background: #8DC63F; background: #8dc63f;
border-radius: 50px; border-radius: 50px;
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -319,7 +315,7 @@
&__suitable { &__suitable {
&__title { &__title {
background: #E1FCCF; background: #e1fccf;
border-radius: 12px 12px 0px 0px; border-radius: 12px 12px 0px 0px;
margin-top: 48px; margin-top: 48px;
padding: 18px 37px; padding: 18px 37px;
@ -374,7 +370,7 @@
display: flex; display: flex;
padding: 21px 45px 19px; padding: 21px 45px 19px;
align-items: center; align-items: center;
background: #FFFFFF; background: #ffffff;
border-radius: 12px; border-radius: 12px;
&:hover { &:hover {
@ -399,7 +395,7 @@
&:after { &:after {
content: ""; content: "";
position: absolute; position: absolute;
background: #52B709; background: #52b709;
border-radius: 12px; border-radius: 12px;
width: 70%; width: 70%;
height: 8px; height: 8px;
@ -410,9 +406,9 @@
&__more { &__more {
padding: 9px 45px; padding: 9px 45px;
background: #52B709; background: #52b709;
border-radius: 44px; border-radius: 44px;
color: #FFFFFF; color: #ffffff;
font-weight: 500; font-weight: 500;
font-size: 16px; font-size: 16px;
line-height: 32px; line-height: 32px;
@ -427,9 +423,10 @@
&__info { &__info {
width: 24px; width: 24px;
height: 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-radius: 6px;
border: 1px solid #DDDDDD; border: 1px solid #dddddd;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
display: flex; display: flex;
@ -439,7 +436,7 @@
&:before { &:before {
content: "..."; content: "...";
color: #6F6F6F; color: #6f6f6f;
font-size: 25px; font-size: 25px;
position: relative; position: relative;
top: -6px; 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 { footer {
margin-top: 70px; margin-top: 70px;
} }

218
src/pages/PartnerRequests/PartnerRequests.js
View File

@ -1,111 +1,127 @@
import React, {useEffect, useState} from 'react'; import React, { useEffect, useState } from "react";
import {Link, Navigate} from "react-router-dom"; import { Link, Navigate } from "react-router-dom";
import {useDispatch} from 'react-redux' import { useDispatch } from "react-redux";
import {setPartnerRequestId, setPartnerRequests} from '../../redux/outstaffingSlice' import {
setPartnerRequestId,
setPartnerRequests,
} from "../../redux/outstaffingSlice";
import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader"; import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs" import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import {SliderWorkers} from "../../components/SliderWorkers/SliderWorkers" import { SliderWorkers } from "../../components/SliderWorkers/SliderWorkers";
import {Loader} from "../../components/Loader/Loader" import { Loader } from "../../components/Loader/Loader";
import {Footer} from "../../components/Footer/Footer"; import { Footer } from "../../components/Footer/Footer";
import {apiRequest} from "../../api/request"; import { apiRequest } from "../../api/request";
import cursorImg from "../../images/cursorImg.png" import cursorImg from "../../images/cursorImg.png";
import './partnerRequests.scss' import "./partnerRequests.scss";
import { Navigation } from '../../components/Navigation/Navigation'; import { Navigation } from "../../components/Navigation/Navigation";
export const PartnerRequests = () => { export const PartnerRequests = () => {
if(localStorage.getItem('role_status') !== '18') { if (localStorage.getItem("role_status") !== "18") {
return <Navigate to="/profile" replace/> return <Navigate to="/profile" replace />;
} }
const dispatch = useDispatch(); const dispatch = useDispatch();
const [requests, setRequests] = useState([]) const [requests, setRequests] = useState([]);
const [loader, setLoader] = useState(true) const [loader, setLoader] = useState(true);
useEffect(() => { useEffect(() => {
apiRequest(`/request/get-request-list?user_id=${localStorage.getItem('id')}&search_depth=3`).then((el) => { apiRequest(
setRequests(el) `/request/get-request-list?user_id=${localStorage.getItem(
setLoader(false) "id"
}) )}&search_depth=3`
}, []) ).then((el) => {
return ( setRequests(el);
<div className='partnerRequests'> setLoader(false);
<ProfileHeader /> });
<Navigation /> }, []);
<div className='container'> return (
<ProfileBreadcrumbs links={[ <div className="partnerRequests">
{name: 'Главная', link: '/profile'}, <ProfileHeader />
{name: 'Запросы и открытые позиции', link: '/profile/requests'} <Navigation />
]} <div className="container">
/> <ProfileBreadcrumbs
<h2 className='partnerRequests__title'>Запросы</h2> links={[
{loader && { name: "Главная", link: "/profile" },
<Loader /> { name: "Запросы и открытые позиции", link: "/profile/requests" },
} ]}
{Boolean(requests.length) && !loader && />
<div className='partnerRequests__section'> <h2 className="partnerRequests__title">Запросы</h2>
<div className='partnerRequests__section__items'> {loader && <Loader />}
{ {Boolean(requests.length) && !loader && (
requests.map((item, index) => { <div className="partnerRequests__section">
return <Link key={index} to={'/profile/bid'} className='partnerRequests__section__item' <div className="partnerRequests__section__items">
onClick={() => { {requests.map((item, index) => {
dispatch(setPartnerRequestId(item.id)) return (
dispatch(setPartnerRequests(requests)) <Link
}}> key={index}
<p className='partnerRequests__section__item__name'> to={"/profile/bid"}
{item.position.name} className="partnerRequests__section__item"
</p> onClick={() => {
<p className='partnerRequests__section__item__count'> dispatch(setPartnerRequestId(item.id));
Подходящие кандидаты dispatch(setPartnerRequests(requests));
<span>{item.result_count}</span> }}
</p> >
</Link> <p className="partnerRequests__section__item__name">
}) {item.position.name}
} </p>
</div> <p className="partnerRequests__section__item__count">
<div className='partnerRequests__section__info'> Подходящие кандидаты
<h3>Инструкция: подачи заявки</h3> <span>{item.result_count}</span>
<p> </p>
Оператор компании заводит заявку и указывает необходимые параметры — </Link>
количество сотрудников, стек, уровень специалиста );
</p> })}
<Link to={'/profile/add-request'}>
<span>+</span>
Создать запрос
</Link>
</div>
</div>
}
{!Boolean(requests.length) && !loader &&
<div className="partnerRequests__noItems">
<div className="partnerRequests__noItems__create">
<div className="partnerRequests__noItems__create__link">
<img src={cursorImg} alt="cursor" />
<p>У вас еще нет запросов на сотрудников</p>
<Link to={'/profile/add-request'}>
<span>+</span>
Создать запрос
</Link>
</div>
<div className="partnerRequests__noItems__create__instruction">
<h3>Инструкция: подачи заявки</h3>
<p>
Оператор компании заводит заявку и указывает необходимые параметры —
количество сотрудников, стек, уровень специалиста
</p>
</div>
</div>
<div className="partnerRequests__noItems__freeEmployees">
<SliderWorkers title={"Свободные разработчики"} titleInfo={"в нашей базе"} />
<p>Перейти в полный <Link to={'/profile/catalog'}>КАТАЛОГ</Link> сотрудников</p>
</div>
</div>
}
</div> </div>
<Footer/> <div className="partnerRequests__section__info">
</div> <h3>Инструкция: подачи заявки</h3>
) <p>
Оператор компании заводит заявку и указывает необходимые
параметры — количество сотрудников, стек, уровень специалиста
</p>
<Link to={"/profile/add-request"}>
<span>+</span>
Создать запрос
</Link>
</div>
</div>
)}
{!Boolean(requests.length) && !loader && (
<div className="partnerRequests__noItems">
<div className="partnerRequests__noItems__create">
<div className="partnerRequests__noItems__create__link">
<img src={cursorImg} alt="cursor" />
<p>У вас еще нет запросов на сотрудников</p>
<Link to={"/profile/add-request"}>
<span>+</span>
Создать запрос
</Link>
</div>
<div className="partnerRequests__noItems__create__instruction">
<h3>Инструкция: подачи заявки</h3>
<p>
Оператор компании заводит заявку и указывает необходимые
параметры — количество сотрудников, стек, уровень специалиста
</p>
</div>
</div>
<div className="partnerRequests__noItems__freeEmployees">
<SliderWorkers
title={"Свободные разработчики"}
titleInfo={"в нашей базе"}
/>
<p className="catalogLink">
Перейти в полный <Link to={"/profile/catalog"}>КАТАЛОГ</Link>{" "}
сотрудников
</p>
</div>
</div>
)}
</div>
<Footer />
</div>
);
}; };

244
src/pages/PartnerRequests/partnerRequests.scss
View File

@ -1,8 +1,8 @@
.partnerRequests { .partnerRequests {
background: #F1F1F1; background: #f1f1f1;
height: 100%; height: 100%;
min-height: 100vh; min-height: 100vh;
font-family: 'LabGrotesque', sans-serif; font-family: "LabGrotesque", sans-serif;
.container { .container {
max-width: 1160px; max-width: 1160px;
@ -22,7 +22,7 @@
&__section { &__section {
margin-top: 25px; margin-top: 25px;
background: #FFFFFF; background: #ffffff;
border-radius: 12px; border-radius: 12px;
padding: 33px 45px 40px; padding: 33px 45px 40px;
display: flex; display: flex;
@ -58,7 +58,7 @@
display: flex; display: flex;
width: 48%; width: 48%;
flex-direction: column; flex-direction: column;
background: #F1F1F1; background: #f1f1f1;
border-radius: 12px; border-radius: 12px;
padding: 20px 27px 15px 25px; padding: 20px 27px 15px 25px;
transition: 0.3s all ease; transition: 0.3s all ease;
@ -70,11 +70,11 @@
} }
&:before { &:before {
content: '...'; content: "...";
position: absolute; position: absolute;
right: 27px; right: 27px;
bottom: 17%; bottom: 17%;
color: #6F6F6F; color: #6f6f6f;
font-size: 23px; font-size: 23px;
} }
@ -93,7 +93,7 @@
} }
&__count { &__count {
color: #6F6F6F; color: #6f6f6f;
font-weight: 500; font-weight: 500;
font-size: 12px; font-size: 12px;
line-height: 24px; line-height: 24px;
@ -101,11 +101,11 @@
margin-bottom: 0; margin-bottom: 0;
span { span {
color: #6F6F6F; color: #6f6f6f;
font-weight: 500; font-weight: 500;
font-size: 14px; font-size: 14px;
line-height: 24px; line-height: 24px;
background: #DDDDDD; background: #dddddd;
border-radius: 4px; border-radius: 4px;
width: 21px; width: 21px;
height: 24px; height: 24px;
@ -136,7 +136,7 @@
} }
h3 { h3 {
color: #52B709; color: #52b709;
font-weight: 700; font-weight: 700;
font-size: 17px; font-size: 17px;
line-height: 24px; line-height: 24px;
@ -162,7 +162,7 @@
} }
a { a {
background: #52B709; background: #52b709;
max-width: 188px; max-width: 188px;
border-radius: 44px; border-radius: 44px;
height: 52px; height: 52px;
@ -170,7 +170,7 @@
font-weight: 400; font-weight: 400;
font-size: 15px; font-size: 15px;
line-height: 32px; line-height: 32px;
color: #FFFFFF; color: #ffffff;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -187,7 +187,7 @@
box-shadow: 6px 5px 20px rgb(87 98 80 / 21%); box-shadow: 6px 5px 20px rgb(87 98 80 / 21%);
transform: scale(1.02); transform: scale(1.02);
text-decoration: none; text-decoration: none;
color: #FFFFFF; color: #ffffff;
} }
} }
} }
@ -198,7 +198,7 @@
flex-direction: column; flex-direction: column;
&__create { &__create {
background: #FFFFFF; background: #ffffff;
border-radius: 12px; border-radius: 12px;
padding: 29px 33px 23px 36px; padding: 29px 33px 23px 36px;
display: flex; display: flex;
@ -214,127 +214,127 @@
padding: 15px 15px; padding: 15px 15px;
} }
&__link { &__link {
display: flex; display: flex;
background: #F1F1F1; background: #f1f1f1;
border-radius: 12px; border-radius: 12px;
padding: 11px 25px 12px 30px; padding: 11px 25px 12px 30px;
align-items: center; align-items: center;
width: 100%; width: 100%;
min-width: 650px; min-width: 650px;
justify-content: space-between; justify-content: space-between;
max-height: 70px; max-height: 70px;
@media (max-width: 720px) { @media (max-width: 720px) {
min-width: auto; min-width: auto;
} }
@media (max-width: 670px) { @media (max-width: 670px) {
max-height: inherit; max-height: inherit;
flex-direction: column; flex-direction: column;
row-gap: 8px; row-gap: 8px;
width: auto; width: auto;
img { img {
margin-right: 5px; margin-right: 5px;
}
}
@media (max-width: 480px) {
padding: 10px 15px;
}
p {
font-weight: 700;
font-size: 16px;
line-height: 32px;
color: #111112;
margin-bottom: 0;
@media (max-width: 480px) {
font-size: 14px;
}
@media (max-width: 380px) {
font-size: 12px;
}
}
a {
background: #52B709;
max-width: 174px;
border-radius: 44px;
width: 100%;
height: 46px;
border: none;
font-weight: 400;
font-size: 15px;
line-height: 32px;
color: #FFFFFF;
display: flex;
justify-content: center;
align-items: center;
transition: 0.3s all ease;
span {
color: white;
font-weight: 700;
font-size: 20px;
margin-right: 8px;
}
&:hover {
box-shadow: 6px 5px 20px rgb(87 98 80 / 21%);
transform: scale(1.02);
text-decoration: none;
color: #FFFFFF;
}
} }
} }
&__instruction { @media (max-width: 480px) {
margin-left: 45px; padding: 10px 15px;
}
@media (max-width: 1140px) { p {
margin-left: 0; font-weight: 700;
font-size: 16px;
line-height: 32px;
color: #111112;
margin-bottom: 0;
@media (max-width: 480px) {
font-size: 14px;
} }
h3 {
color: #52B709; @media (max-width: 380px) {
font-size: 12px;
}
}
a {
background: #52b709;
max-width: 174px;
border-radius: 44px;
width: 100%;
height: 46px;
border: none;
font-weight: 400;
font-size: 15px;
line-height: 32px;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
transition: 0.3s all ease;
span {
color: white;
font-weight: 700; font-weight: 700;
font-size: 15px; font-size: 20px;
line-height: 15px; margin-right: 8px;
margin-bottom: 7px;
@media (max-width: 1140px) {
text-align: center;
font-size: 22px;
margin-bottom: 15px;
}
@media (max-width: 530px) {
font-size: 16px;
}
} }
p { &:hover {
font-weight: 400; box-shadow: 6px 5px 20px rgb(87 98 80 / 21%);
font-size: 15px; transform: scale(1.02);
line-height: 24px; text-decoration: none;
color: #000000; color: #ffffff;
margin-bottom: 0;
@media (max-width: 1140px) {
text-align: center;
font-size: 16px;
}
@media (max-width: 530px) {
font-size: 14px;
}
} }
} }
} }
&__instruction {
margin-left: 45px;
@media (max-width: 1140px) {
margin-left: 0;
}
h3 {
color: #52b709;
font-weight: 700;
font-size: 15px;
line-height: 15px;
margin-bottom: 7px;
@media (max-width: 1140px) {
text-align: center;
font-size: 22px;
margin-bottom: 15px;
}
@media (max-width: 530px) {
font-size: 16px;
}
}
p {
font-weight: 400;
font-size: 15px;
line-height: 24px;
color: #000000;
margin-bottom: 0;
@media (max-width: 1140px) {
text-align: center;
font-size: 16px;
}
@media (max-width: 530px) {
font-size: 14px;
}
}
}
}
&__freeEmployees { &__freeEmployees {
h2 { h2 {
font-weight: 500; font-weight: 500;
@ -342,7 +342,7 @@
line-height: 32px; line-height: 32px;
} }
p { .catalogLink {
margin-top: 70px; margin-top: 70px;
width: 100%; width: 100%;
font-weight: 700; font-weight: 700;
@ -352,7 +352,7 @@
text-align: center; text-align: center;
a { a {
color: #0C7636; color: #0c7636;
} }
} }
} }