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
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,111 +1,127 @@
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 React, { useEffect, useState } from "react";
import { Link, Navigate } from "react-router-dom";
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 {Footer} from "../../components/Footer/Footer";
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 { 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 { 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 dispatch = useDispatch();
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)
})
}, [])
return (
<div className='partnerRequests'>
<ProfileHeader />
<Navigation />
<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'
onClick={() => {
dispatch(setPartnerRequestId(item.id))
dispatch(setPartnerRequests(requests))
}}>
<p className='partnerRequests__section__item__name'>
{item.position.name}
</p>
<p className='partnerRequests__section__item__count'>
Подходящие кандидаты
<span>{item.result_count}</span>
</p>
</Link>
})
}
</div>
<div className='partnerRequests__section__info'>
<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>Перейти в полный <Link to={'/profile/catalog'}>КАТАЛОГ</Link> сотрудников</p>
</div>
</div>
}
useEffect(() => {
apiRequest(
`/request/get-request-list?user_id=${localStorage.getItem(
"id"
)}&search_depth=3`
).then((el) => {
setRequests(el);
setLoader(false);
});
}, []);
return (
<div className="partnerRequests">
<ProfileHeader />
<Navigation />
<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"
onClick={() => {
dispatch(setPartnerRequestId(item.id));
dispatch(setPartnerRequests(requests));
}}
>
<p className="partnerRequests__section__item__name">
{item.position.name}
</p>
<p className="partnerRequests__section__item__count">
Подходящие кандидаты
<span>{item.result_count}</span>
</p>
</Link>
);
})}
</div>
<Footer/>
</div>
)
<div className="partnerRequests__section__info">
<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 {
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;
@ -214,127 +214,127 @@
padding: 15px 15px;
}
&__link {
display: flex;
background: #F1F1F1;
border-radius: 12px;
padding: 11px 25px 12px 30px;
align-items: center;
width: 100%;
min-width: 650px;
justify-content: space-between;
max-height: 70px;
&__link {
display: flex;
background: #f1f1f1;
border-radius: 12px;
padding: 11px 25px 12px 30px;
align-items: center;
width: 100%;
min-width: 650px;
justify-content: space-between;
max-height: 70px;
@media (max-width: 720px) {
min-width: auto;
}
@media (max-width: 720px) {
min-width: auto;
}
@media (max-width: 670px) {
max-height: inherit;
flex-direction: column;
row-gap: 8px;
width: auto;
@media (max-width: 670px) {
max-height: inherit;
flex-direction: column;
row-gap: 8px;
width: auto;
img {
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;
}
img {
margin-right: 5px;
}
}
&__instruction {
margin-left: 45px;
@media (max-width: 480px) {
padding: 10px 15px;
}
@media (max-width: 1140px) {
margin-left: 0;
p {
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-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;
}
font-size: 20px;
margin-right: 8px;
}
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;
}
&:hover {
box-shadow: 6px 5px 20px rgb(87 98 80 / 21%);
transform: scale(1.02);
text-decoration: none;
color: #ffffff;
}
}
}
&__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 {
h2 {
font-weight: 500;
@ -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;
}
}
}