From 8553adcf0852a060cb2bae54b5f37886cbc662d3 Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Wed, 26 Apr 2023 21:29:50 +0300 Subject: [PATCH 1/3] Fixed catalog pages and added modal --- src/components/Candidate/Candidate.js | 350 ++++++++------- .../CandidateSidebar/candidateSidebar.scss | 2 +- src/pages/PartnerBid/PartnerBid.js | 410 +++++++++++------- src/pages/PartnerBid/partnerBid.scss | 71 ++- src/pages/PartnerRequests/PartnerRequests.js | 218 +++++----- .../PartnerRequests/partnerRequests.scss | 244 +++++------ 6 files changed, 720 insertions(+), 575 deletions(-) diff --git a/src/components/Candidate/Candidate.js b/src/components/Candidate/Candidate.js index 56f5f2c1..d22dfc28 100644 --- a/src/components/Candidate/Candidate.js +++ b/src/components/Candidate/Candidate.js @@ -1,35 +1,38 @@ -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 {ProfileHeader} from "../ProfileHeader/ProfileHeader"; -import {ProfileBreadcrumbs} from "../ProfileBreadcrumbs/ProfileBreadcrumbs"; -import {Footer} from '../Footer/Footer' +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 {currentCandidate, selectCurrentCandidate,} from '../../redux/outstaffingSlice' +import { + currentCandidate, + selectCurrentCandidate, +} from "../../redux/outstaffingSlice"; -import {apiRequest} from "../../api/request"; -import {createMarkup} from "../../helper"; +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 + if (localStorage.getItem("role_status") !== "18") { + return ; } - const {id: candidateId} = useParams(); + const { id: candidateId } = useParams(); const navigate = useNavigate(); @@ -39,190 +42,201 @@ 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 { 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(); + const { header, img, classes } = setStyles(); return ( -
- -
- + + +
+ + /> -
-
+
+
+
+

+ {currentCandidateObj.specification}  {" "} + {SKILLS[currentCandidateObj.position_id]}  {" "} + {LEVELS[currentCandidateObj.level]} +

+
navigate("/profile/catalog")} + > +
+ +
+
+ Вернуться к списку +
+
+
-
-

{currentCandidateObj.specification}   {SKILLS[currentCandidateObj.position_id]}   {LEVELS[currentCandidateObj.level]}

-
navigate('/profile/catalog')}> -
- -
-
- Вернуться к списку +
+

{header}

+ +
+
+
+
+
+
+ +
+ {activeSnippet ? ( +
+
+ +

# Описание опыта

+ {text ? ( +
+ ) : ( +

+ {currentCandidateObj.vc_text + ? currentCandidateObj.vc_text + : "Описание отсутствует..."} +

+ )} + + +
+
+ ) : ( +
+
+
+
+

Страница портфолио кода разработчика

+
+
+ +
+
+ img +
+
cybershop-api
+

Реактивная социальная сеть

+
+
+
+ arrow +
+
+ JavaScript + +
+
+ +
+
+ img +
+
cybershop-api
+

Реактивная социальная сеть

+
+
+
+ arrow +
+
+ JavaScript + +
+
+ +
+
+ img +
+
cybershop-api
+

Реактивная социальная сеть

+
+
+
+ arrow +
+
+ JavaScript + +
- -
-

{header}

- -
- -
+ )}
-
-
-
- -
- { - activeSnippet ? - ( -
-
- -

# Описание опыта

- {text ? ( -
- ) : ( -

- {currentCandidateObj.vc_text - ? currentCandidateObj.vc_text - : 'Описание отсутствует...'} -

- )} - - - -
-
- ) : - ( -
-
-
-
-

Страница портфолио кода разработчика

-
-
- -
-
- img -
-
cybershop-api
-

Реактивная социальная сеть

-
-
-
- arrow -
-
- JavaScript - -
-
- -
-
- img -
-
cybershop-api
-

Реактивная социальная сеть

-
-
-
- arrow -
-
- JavaScript - -
-
- -
-
- img -
-
cybershop-api
-

Реактивная социальная сеть

-
-
-
- arrow -
-
- JavaScript - -
-
-
-
- ) - } - -
-
-
+
- ) +
+ ); }; -export default Candidate +export default Candidate; diff --git a/src/components/CandidateSidebar/candidateSidebar.scss b/src/components/CandidateSidebar/candidateSidebar.scss index dcbc44ac..05e4763f 100644 --- a/src/components/CandidateSidebar/candidateSidebar.scss +++ b/src/components/CandidateSidebar/candidateSidebar.scss @@ -29,7 +29,7 @@ } &__info { - padding-bottom: 40px; + padding: 15px 0 40px 0; text-align: center; margin-top: 10px; width: 100%; diff --git a/src/pages/PartnerBid/PartnerBid.js b/src/pages/PartnerBid/PartnerBid.js index 0dd3d7e9..b2fe77c3 100644 --- a/src/pages/PartnerBid/PartnerBid.js +++ b/src/pages/PartnerBid/PartnerBid.js @@ -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 - } + if (localStorage.getItem("role_status") !== "18") { + return ; + } - 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 - } + if (!requestId) { + return ; + } - 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 ( -
- - -
- -

Страница заявки

- {loader && } - {!loader && - <> -
-

{requestInfo.title}

-
- Редактировать - delete deleteRequest()}/> -
-
-
-
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)) - }} - > - arrow -
-

Дата заявки : {getCorrectDate(requestInfo.created_at)}

-
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)) - }} - > - arrow -
-
- - } - {Boolean(Object.keys(requestInfo).length) && !loader && - <> -
- - - - - - - - - - - - - - - - - -

Требования к стеку разработчика

Квалификация

-

- {requestInfo.position.name}.   - {requestInfo.skills.map((skill, index) => { - return {skill.name} - {requestInfo.skills.length > index + 1 ? ',' : '.'} -   - - })} -

- 		-
-
- backEndImg -
-

{requestInfo.position.name}

-
-
-

- {requestInfo.descr} -

- 		-
-
- middleImg -
-

{requestInfo.level}

-
-
-
-
-
-

Подходящие сотрудники по запросу

-
-
- {requestInfo.result_profiles.length && requestInfo.result_profiles.map((person, index) => { - return
- avatar -

{person.fio} - {person.position_title}, {levels[person.level]}

- - Подробнее - -
- }) - } -
-
- - } -
-