Fixed catalog pages and added modal
This commit is contained in:
MaxOvs19
parent
03bba43f67
commit
8553adcf08
@ -1,33 +1,36 @@
|
||||
import React, {useEffect, useState} from 'react'
|
||||
import {useParams, Link, useNavigate, Navigate} from 'react-router-dom'
|
||||
import {useSelector, useDispatch} from 'react-redux'
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useParams, Link, useNavigate, Navigate } from "react-router-dom";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
|
||||
import SkillSection from '../SkillSection/SkillSection'
|
||||
import Sidebar from '../CandidateSidebar/CandidateSidebar'
|
||||
import SkillSection from "../SkillSection/SkillSection";
|
||||
import Sidebar from "../CandidateSidebar/CandidateSidebar";
|
||||
import { ProfileHeader } from "../ProfileHeader/ProfileHeader";
|
||||
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 { createMarkup } from "../../helper";
|
||||
|
||||
import gitImgItem from "../../images/gitItemImg.png"
|
||||
import rectangle from '../../images/rectangle_secondPage.png'
|
||||
import front from '../Outstaffing/images/front_end.png'
|
||||
import back from '../Outstaffing/images/back_end.png'
|
||||
import design from '../Outstaffing/images/design.png'
|
||||
import rightArrow from "../../images/arrowRight.png"
|
||||
import gitImgItem from "../../images/gitItemImg.png";
|
||||
import rectangle from "../../images/rectangle_secondPage.png";
|
||||
import front from "../Outstaffing/images/front_end.png";
|
||||
import back from "../Outstaffing/images/back_end.png";
|
||||
import design from "../Outstaffing/images/design.png";
|
||||
import rightArrow from "../../images/arrowRight.png";
|
||||
|
||||
import {LEVELS, SKILLS} from '../../constants/constants'
|
||||
|
||||
import './candidate.scss'
|
||||
import { LEVELS, SKILLS } from "../../constants/constants";
|
||||
|
||||
import "./candidate.scss";
|
||||
import { Navigation } from "../Navigation/Navigation";
|
||||
|
||||
const Candidate = () => {
|
||||
if(localStorage.getItem('role_status') !== '18') {
|
||||
return <Navigate to="/profile" replace/>
|
||||
if (localStorage.getItem("role_status") !== "18") {
|
||||
return <Navigate to="/profile" replace />;
|
||||
}
|
||||
const { id: candidateId } = useParams();
|
||||
|
||||
@ -39,121 +42,134 @@ const Candidate = () => {
|
||||
|
||||
const [activeSnippet, setActiveSnippet] = useState(true);
|
||||
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
window.scrollTo(0, 0)
|
||||
window.scrollTo(0, 0);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
apiRequest(`/profile/${candidateId}`, {
|
||||
params: Number(candidateId),
|
||||
}).then((el) => dispatch(currentCandidate(el)))
|
||||
}).then((el) => dispatch(currentCandidate(el)));
|
||||
}, [dispatch, candidateId]);
|
||||
|
||||
const { position_id, skillValues, vc_text: text } = currentCandidateObj;
|
||||
|
||||
const setStyles = () => {
|
||||
const styles = {
|
||||
classes: '',
|
||||
header: '',
|
||||
img: ''
|
||||
classes: "",
|
||||
header: "",
|
||||
img: "",
|
||||
};
|
||||
|
||||
switch (Number(position_id)) {
|
||||
case 1: {
|
||||
styles.classes = 'back';
|
||||
styles.header = 'Backend';
|
||||
styles.classes = "back";
|
||||
styles.header = "Backend";
|
||||
styles.img = back;
|
||||
|
||||
break
|
||||
break;
|
||||
}
|
||||
case 2: {
|
||||
styles.classes = 'des';
|
||||
styles.header = 'Frontend';
|
||||
styles.classes = "des";
|
||||
styles.header = "Frontend";
|
||||
styles.img = front;
|
||||
break
|
||||
break;
|
||||
}
|
||||
case 3: {
|
||||
styles.classes = 'front';
|
||||
styles.header = 'Design';
|
||||
styles.classes = "front";
|
||||
styles.header = "Design";
|
||||
styles.img = design;
|
||||
break
|
||||
break;
|
||||
}
|
||||
default:
|
||||
break
|
||||
break;
|
||||
}
|
||||
|
||||
return styles
|
||||
return styles;
|
||||
};
|
||||
|
||||
const { header, img, classes } = setStyles();
|
||||
|
||||
return (
|
||||
<div className='candidate__wrapper'>
|
||||
<div className="candidate__wrapper">
|
||||
<ProfileHeader />
|
||||
<div className='container candidate'>
|
||||
<ProfileBreadcrumbs links={[
|
||||
{name: 'Главная', link: '/profile'},
|
||||
{name: 'Каталог свободных специалистов', link: '/profile/catalog'},
|
||||
{name: `${currentCandidateObj.specification} ${SKILLS[currentCandidateObj.position_id]}, ${LEVELS[currentCandidateObj.level]}`, link: `/candidate/${currentCandidateObj.id}`}
|
||||
<Navigation />
|
||||
<div className="container candidate">
|
||||
<ProfileBreadcrumbs
|
||||
links={[
|
||||
{ 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='col-12 candidate__header'>
|
||||
|
||||
<div className='candidate__header__left'>
|
||||
<h3>{currentCandidateObj.specification} {SKILLS[currentCandidateObj.position_id]} {LEVELS[currentCandidateObj.level]}</h3>
|
||||
<div className='candidate__arrow' onClick={() => navigate('/profile/catalog')}>
|
||||
<div className='candidate__arrow-img'>
|
||||
<img src={rightArrow} alt=''/>
|
||||
<div className="row">
|
||||
<div className="col-12 candidate__header">
|
||||
<div className="candidate__header__left">
|
||||
<h3>
|
||||
{currentCandidateObj.specification} {" "}
|
||||
{SKILLS[currentCandidateObj.position_id]} {" "}
|
||||
{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'>
|
||||
<div className="candidate__arrow-sp">
|
||||
<span>Вернуться к списку</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='candidate__icon'>
|
||||
<div className="candidate__icon">
|
||||
<h3>{header}</h3>
|
||||
<img className={classes} src={img} alt=''/>
|
||||
</div>
|
||||
|
||||
<img className={classes} src={img} alt="" />
|
||||
</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>
|
||||
<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'
|
||||
className="candidate__text"
|
||||
dangerouslySetInnerHTML={createMarkup(text)}
|
||||
></div>
|
||||
) : (
|
||||
<p className='candidate__text-secondary'>
|
||||
<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">
|
||||
@ -161,51 +177,51 @@ const Candidate = () => {
|
||||
<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'>
|
||||
<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 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'>
|
||||
<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 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'>
|
||||
<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 className="item-works__body__head__arrow">
|
||||
<img src={rightArrow} alt="arrow" />
|
||||
</div>
|
||||
</div>
|
||||
<span>JavaScript </span>
|
||||
@ -214,15 +230,13 @@ const Candidate = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
export default Candidate
|
||||
export default Candidate;
|
||||
|
||||
@ -29,7 +29,7 @@
|
||||
}
|
||||
|
||||
&__info {
|
||||
padding-bottom: 40px;
|
||||
padding: 15px 0 40px 0;
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
|
||||
@ -1,29 +1,35 @@
|
||||
import React, {useEffect, useState} from 'react';
|
||||
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 { 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 { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
|
||||
import { Footer } from "../../components/Footer/Footer";
|
||||
import { Navigation } from '../../components/Navigation/Navigation';
|
||||
import {Loader} from "../../components/Loader/Loader"
|
||||
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 {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();
|
||||
@ -32,88 +38,151 @@ export const PartnerBid = () => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
if (!requestId) {
|
||||
return <Navigate to="/profile/requests" replace/>
|
||||
return <Navigate to="/profile/requests" replace />;
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
setLoader(true)
|
||||
setLoader(true);
|
||||
apiRequest(`/request/get-request?request_id=${requestId}`).then((el) => {
|
||||
setRequestInfo(el)
|
||||
dispatch(setPartnerRequestInfo(el))
|
||||
setLoader(false)
|
||||
})
|
||||
setRequestInfo(el);
|
||||
dispatch(setPartnerRequestInfo(el));
|
||||
setLoader(false);
|
||||
});
|
||||
}, [requestId]);
|
||||
|
||||
const deleteRequest = () => {
|
||||
apiRequest('/request/update-request', {
|
||||
method: 'PUT',
|
||||
apiRequest("/request/update-request", {
|
||||
method: "PUT",
|
||||
data: {
|
||||
user_id: localStorage.getItem('id'),
|
||||
user_id: localStorage.getItem("id"),
|
||||
request_id: requestId,
|
||||
status: 0,
|
||||
}
|
||||
},
|
||||
}).then((res) => {
|
||||
navigate('/profile/requests');
|
||||
})
|
||||
navigate("/profile/requests");
|
||||
});
|
||||
};
|
||||
|
||||
const [requestInfo, setRequestInfo] = useState({})
|
||||
const [loader, setLoader] = useState(false)
|
||||
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'>
|
||||
<div className="partnerBid">
|
||||
<ProfileHeader />
|
||||
<Navigation />
|
||||
<div className='container'>
|
||||
<ProfileBreadcrumbs links={[
|
||||
{name: 'Главная', link: '/profile'},
|
||||
{name: 'Запросы и открытые позиции', link: '/profile/requests'},
|
||||
{name: 'Просмотр заявки - PHP разработчик', link: '/profile/bid'}
|
||||
<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>
|
||||
<h2 className="partnerBid__title">Страница заявки </h2>
|
||||
{loader && <Loader />}
|
||||
{!loader &&
|
||||
{!loader && (
|
||||
<>
|
||||
<div className='partnerBid__qualification'>
|
||||
<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 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'}
|
||||
<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))
|
||||
dispatch(
|
||||
setPartnerRequestId(
|
||||
partnerRequests[
|
||||
partnerRequests.findIndex((el) => el.id === requestId) -
|
||||
1
|
||||
].id
|
||||
)
|
||||
);
|
||||
}}
|
||||
>
|
||||
<img src={arrowSwitchDate} alt='arrow'/>
|
||||
<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'}
|
||||
<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))
|
||||
dispatch(
|
||||
setPartnerRequestId(
|
||||
partnerRequests[
|
||||
partnerRequests.findIndex((el) => el.id === requestId) +
|
||||
1
|
||||
].id
|
||||
)
|
||||
);
|
||||
}}
|
||||
>
|
||||
<img src={arrowSwitchDate} alt='arrow'/>
|
||||
<img src={arrowSwitchDate} alt="arrow" />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
{Boolean(Object.keys(requestInfo).length) && !loader &&
|
||||
)}
|
||||
{Boolean(Object.keys(requestInfo).length) && !loader && (
|
||||
<>
|
||||
<div className='table__wrapper'>
|
||||
<div className="table__wrapper">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th><p>Требования к стеку разработчика</p></th>
|
||||
<th><p>Квалификация</p></th>
|
||||
<th>
|
||||
<p>Требования к стеку разработчика</p>
|
||||
</th>
|
||||
<th>
|
||||
<p>Квалификация</p>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@ -122,17 +191,22 @@ export const PartnerBid = () => {
|
||||
<p>
|
||||
{requestInfo.position.name}.
|
||||
{requestInfo.skills.map((skill, index) => {
|
||||
return <span key={skill.id}>{skill.name}
|
||||
{requestInfo.skills.length > index + 1 ? ',' : '.'}
|
||||
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 className="qualification__info">
|
||||
<div className="img__wrapper">
|
||||
<img src={backEndImg} alt="backEndImg" />
|
||||
</div>
|
||||
<p>{requestInfo.position.name}</p>
|
||||
</div>
|
||||
@ -140,43 +214,49 @@ export const PartnerBid = () => {
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p>
|
||||
{requestInfo.descr}
|
||||
</p>
|
||||
<p>{requestInfo.descr}</p>
|
||||
</td>
|
||||
<td>
|
||||
<div className='qualification__info'>
|
||||
<div className='img__wrapper'>
|
||||
<img src={middle} alt='middleImg' />
|
||||
<div className="qualification__info">
|
||||
<div className="img__wrapper">
|
||||
<img src={middle} alt="middleImg" />
|
||||
</div>
|
||||
<p className='middle'>{requestInfo.level}</p>
|
||||
<p className="middle">{requestInfo.level}</p>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div className='partnerBid__suitable'>
|
||||
<div className='partnerBid__suitable__title'>
|
||||
<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}`}>
|
||||
<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;
|
||||
}
|
||||
|
||||
@ -1,91 +1,101 @@
|
||||
import React, {useEffect, useState} from 'react';
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Link, Navigate } from "react-router-dom";
|
||||
import {useDispatch} from 'react-redux'
|
||||
import {setPartnerRequestId, setPartnerRequests} from '../../redux/outstaffingSlice'
|
||||
import { useDispatch } from "react-redux";
|
||||
import {
|
||||
setPartnerRequestId,
|
||||
setPartnerRequests,
|
||||
} from "../../redux/outstaffingSlice";
|
||||
|
||||
import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
|
||||
import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"
|
||||
import {SliderWorkers} from "../../components/SliderWorkers/SliderWorkers"
|
||||
import {Loader} from "../../components/Loader/Loader"
|
||||
import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
|
||||
import { SliderWorkers } from "../../components/SliderWorkers/SliderWorkers";
|
||||
import { Loader } from "../../components/Loader/Loader";
|
||||
import { Footer } from "../../components/Footer/Footer";
|
||||
|
||||
import { apiRequest } from "../../api/request";
|
||||
|
||||
import cursorImg from "../../images/cursorImg.png"
|
||||
import cursorImg from "../../images/cursorImg.png";
|
||||
|
||||
import './partnerRequests.scss'
|
||||
import { Navigation } from '../../components/Navigation/Navigation';
|
||||
import "./partnerRequests.scss";
|
||||
import { Navigation } from "../../components/Navigation/Navigation";
|
||||
|
||||
export const PartnerRequests = () => {
|
||||
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 [requests, setRequests] = useState([])
|
||||
const [loader, setLoader] = useState(true)
|
||||
const [requests, setRequests] = useState([]);
|
||||
const [loader, setLoader] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
apiRequest(`/request/get-request-list?user_id=${localStorage.getItem('id')}&search_depth=3`).then((el) => {
|
||||
setRequests(el)
|
||||
setLoader(false)
|
||||
})
|
||||
}, [])
|
||||
apiRequest(
|
||||
`/request/get-request-list?user_id=${localStorage.getItem(
|
||||
"id"
|
||||
)}&search_depth=3`
|
||||
).then((el) => {
|
||||
setRequests(el);
|
||||
setLoader(false);
|
||||
});
|
||||
}, []);
|
||||
return (
|
||||
<div className='partnerRequests'>
|
||||
<div className="partnerRequests">
|
||||
<ProfileHeader />
|
||||
<Navigation />
|
||||
<div className='container'>
|
||||
<ProfileBreadcrumbs links={[
|
||||
{name: 'Главная', link: '/profile'},
|
||||
{name: 'Запросы и открытые позиции', link: '/profile/requests'}
|
||||
<div className="container">
|
||||
<ProfileBreadcrumbs
|
||||
links={[
|
||||
{ name: "Главная", link: "/profile" },
|
||||
{ name: "Запросы и открытые позиции", link: "/profile/requests" },
|
||||
]}
|
||||
/>
|
||||
<h2 className='partnerRequests__title'>Запросы</h2>
|
||||
{loader &&
|
||||
<Loader />
|
||||
}
|
||||
{Boolean(requests.length) && !loader &&
|
||||
<div className='partnerRequests__section'>
|
||||
<div className='partnerRequests__section__items'>
|
||||
{
|
||||
requests.map((item, index) => {
|
||||
return <Link key={index} to={'/profile/bid'} className='partnerRequests__section__item'
|
||||
<h2 className="partnerRequests__title">Запросы</h2>
|
||||
{loader && <Loader />}
|
||||
{Boolean(requests.length) && !loader && (
|
||||
<div className="partnerRequests__section">
|
||||
<div className="partnerRequests__section__items">
|
||||
{requests.map((item, index) => {
|
||||
return (
|
||||
<Link
|
||||
key={index}
|
||||
to={"/profile/bid"}
|
||||
className="partnerRequests__section__item"
|
||||
onClick={() => {
|
||||
dispatch(setPartnerRequestId(item.id))
|
||||
dispatch(setPartnerRequests(requests))
|
||||
}}>
|
||||
<p className='partnerRequests__section__item__name'>
|
||||
dispatch(setPartnerRequestId(item.id));
|
||||
dispatch(setPartnerRequests(requests));
|
||||
}}
|
||||
>
|
||||
<p className="partnerRequests__section__item__name">
|
||||
{item.position.name}
|
||||
</p>
|
||||
<p className='partnerRequests__section__item__count'>
|
||||
<p className="partnerRequests__section__item__count">
|
||||
Подходящие кандидаты
|
||||
<span>{item.result_count}</span>
|
||||
</p>
|
||||
</Link>
|
||||
})
|
||||
}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className='partnerRequests__section__info'>
|
||||
<div className="partnerRequests__section__info">
|
||||
<h3>Инструкция: подачи заявки</h3>
|
||||
<p>
|
||||
Оператор компании заводит заявку и указывает необходимые параметры —
|
||||
количество сотрудников, стек, уровень специалиста
|
||||
Оператор компании заводит заявку и указывает необходимые
|
||||
параметры — количество сотрудников, стек, уровень специалиста
|
||||
</p>
|
||||
<Link to={'/profile/add-request'}>
|
||||
<Link to={"/profile/add-request"}>
|
||||
<span>+</span>
|
||||
Создать запрос
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
{!Boolean(requests.length) && !loader &&
|
||||
)}
|
||||
{!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'}>
|
||||
<Link to={"/profile/add-request"}>
|
||||
<span>+</span>
|
||||
Создать запрос
|
||||
</Link>
|
||||
@ -93,19 +103,25 @@ export const PartnerRequests = () => {
|
||||
<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>
|
||||
<SliderWorkers
|
||||
title={"Свободные разработчики"}
|
||||
titleInfo={"в нашей базе"}
|
||||
/>
|
||||
<p className="catalogLink">
|
||||
Перейти в полный <Link to={"/profile/catalog"}>КАТАЛОГ</Link>{" "}
|
||||
сотрудников
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
.partnerRequests {
|
||||
background: #F1F1F1;
|
||||
background: #f1f1f1;
|
||||
height: 100%;
|
||||
min-height: 100vh;
|
||||
font-family: 'LabGrotesque', sans-serif;
|
||||
font-family: "LabGrotesque", sans-serif;
|
||||
|
||||
.container {
|
||||
max-width: 1160px;
|
||||
@ -22,7 +22,7 @@
|
||||
|
||||
&__section {
|
||||
margin-top: 25px;
|
||||
background: #FFFFFF;
|
||||
background: #ffffff;
|
||||
border-radius: 12px;
|
||||
padding: 33px 45px 40px;
|
||||
display: flex;
|
||||
@ -58,7 +58,7 @@
|
||||
display: flex;
|
||||
width: 48%;
|
||||
flex-direction: column;
|
||||
background: #F1F1F1;
|
||||
background: #f1f1f1;
|
||||
border-radius: 12px;
|
||||
padding: 20px 27px 15px 25px;
|
||||
transition: 0.3s all ease;
|
||||
@ -70,11 +70,11 @@
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '...';
|
||||
content: "...";
|
||||
position: absolute;
|
||||
right: 27px;
|
||||
bottom: 17%;
|
||||
color: #6F6F6F;
|
||||
color: #6f6f6f;
|
||||
font-size: 23px;
|
||||
}
|
||||
|
||||
@ -93,7 +93,7 @@
|
||||
}
|
||||
|
||||
&__count {
|
||||
color: #6F6F6F;
|
||||
color: #6f6f6f;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
line-height: 24px;
|
||||
@ -101,11 +101,11 @@
|
||||
margin-bottom: 0;
|
||||
|
||||
span {
|
||||
color: #6F6F6F;
|
||||
color: #6f6f6f;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
background: #DDDDDD;
|
||||
background: #dddddd;
|
||||
border-radius: 4px;
|
||||
width: 21px;
|
||||
height: 24px;
|
||||
@ -136,7 +136,7 @@
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #52B709;
|
||||
color: #52b709;
|
||||
font-weight: 700;
|
||||
font-size: 17px;
|
||||
line-height: 24px;
|
||||
@ -162,7 +162,7 @@
|
||||
}
|
||||
|
||||
a {
|
||||
background: #52B709;
|
||||
background: #52b709;
|
||||
max-width: 188px;
|
||||
border-radius: 44px;
|
||||
height: 52px;
|
||||
@ -170,7 +170,7 @@
|
||||
font-weight: 400;
|
||||
font-size: 15px;
|
||||
line-height: 32px;
|
||||
color: #FFFFFF;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@ -187,7 +187,7 @@
|
||||
box-shadow: 6px 5px 20px rgb(87 98 80 / 21%);
|
||||
transform: scale(1.02);
|
||||
text-decoration: none;
|
||||
color: #FFFFFF;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -198,7 +198,7 @@
|
||||
flex-direction: column;
|
||||
|
||||
&__create {
|
||||
background: #FFFFFF;
|
||||
background: #ffffff;
|
||||
border-radius: 12px;
|
||||
padding: 29px 33px 23px 36px;
|
||||
display: flex;
|
||||
@ -216,7 +216,7 @@
|
||||
|
||||
&__link {
|
||||
display: flex;
|
||||
background: #F1F1F1;
|
||||
background: #f1f1f1;
|
||||
border-radius: 12px;
|
||||
padding: 11px 25px 12px 30px;
|
||||
align-items: center;
|
||||
@ -261,7 +261,7 @@
|
||||
}
|
||||
|
||||
a {
|
||||
background: #52B709;
|
||||
background: #52b709;
|
||||
max-width: 174px;
|
||||
border-radius: 44px;
|
||||
width: 100%;
|
||||
@ -270,7 +270,7 @@
|
||||
font-weight: 400;
|
||||
font-size: 15px;
|
||||
line-height: 32px;
|
||||
color: #FFFFFF;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@ -287,7 +287,7 @@
|
||||
box-shadow: 6px 5px 20px rgb(87 98 80 / 21%);
|
||||
transform: scale(1.02);
|
||||
text-decoration: none;
|
||||
color: #FFFFFF;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -299,7 +299,7 @@
|
||||
margin-left: 0;
|
||||
}
|
||||
h3 {
|
||||
color: #52B709;
|
||||
color: #52b709;
|
||||
font-weight: 700;
|
||||
font-size: 15px;
|
||||
line-height: 15px;
|
||||
@ -342,7 +342,7 @@
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
p {
|
||||
.catalogLink {
|
||||
margin-top: 70px;
|
||||
width: 100%;
|
||||
font-weight: 700;
|
||||
@ -352,7 +352,7 @@
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
color: #0C7636;
|
||||
color: #0c7636;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user