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

Fixed img in components

Browse Source
This commit is contained in:
MaxOvs19 2023-05-24 13:49:09 +03:00
parent 2aa2b15d2d
commit 08f7d13f01
40 changed files with 1133 additions and 1092 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
config/webpack/common.js
View File

@ -1,45 +1,44 @@
const paths = require('../paths'); const paths = require("../paths");
const webpack = require('webpack'); const webpack = require("webpack");
const CopyWebpackPlugin = require('copy-webpack-plugin'); const CopyWebpackPlugin = require("copy-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin'); const HtmlWebpackPlugin = require("html-webpack-plugin");
const Dotenv = require('dotenv-webpack');
const Dotenv = require("dotenv-webpack");
const plugins = [ const plugins = [
'@babel/plugin-proposal-class-properties', "@babel/plugin-proposal-class-properties",
'@babel/plugin-syntax-dynamic-import', "@babel/plugin-syntax-dynamic-import",
'@babel/plugin-transform-runtime' "@babel/plugin-transform-runtime",
]; ];
if (process.env.NODE_ENV === 'development') { if (process.env.NODE_ENV === "development") {
plugins.push('react-refresh/babel'); plugins.push("react-refresh/babel");
} }
const babelLoader = { const babelLoader = {
loader: 'babel-loader', loader: "babel-loader",
options: { options: {
presets: [ presets: [
// "react-app", // "react-app",
'@babel/preset-env', "@babel/preset-env",
'@babel/preset-react', "@babel/preset-react",
], ],
plugins: plugins plugins: plugins,
} },
}; };
module.exports = { module.exports = {
entry: `${paths.src}/index.js`, entry: `${paths.src}/index.js`,
output: { output: {
path: paths.build, path: paths.build,
filename: '[name].bundle.js', filename: "[name].bundle.js",
publicPath: '/', publicPath: "/",
// publicPath: 'https://itguild.info', // publicPath: 'https://itguild.info',
asyncChunks: true, asyncChunks: true,
clean: true, clean: true,
crossOriginLoading: 'anonymous', crossOriginLoading: "anonymous",
module: true, module: true,
environment: { environment: {
arrowFunction: true, arrowFunction: true,
@ -47,57 +46,56 @@ module.exports = {
const: true, const: true,
destructuring: true, destructuring: true,
dynamicImport: false, dynamicImport: false,
forOf: true forOf: true,
} },
}, },
resolve: { resolve: {
alias: { alias: {
'@': `${paths.src}/modules` "@": `${paths.src}/modules`,
}, },
extensions: ['.mjs', '.js', '.jsx', '.ts', '.tsx', '.json'] extensions: [".mjs", ".js", ".jsx", ".ts", ".tsx", ".json"],
}, },
experiments: { experiments: {
topLevelAwait: true, topLevelAwait: true,
outputModule: true outputModule: true,
}, },
module: { module: {
rules: [ rules: [
// JavaScript, React // JavaScript, React
{ {
test: /\.m?jsx?$/i, test: /\.m?jsx?$/i,
exclude: /node_modules/, exclude: /node_modules/,
use: babelLoader use: babelLoader,
}, },
// TypeScript // TypeScript
{ {
test: /.tsx?$/i, test: /.tsx?$/i,
exclude: /node_modules/, exclude: /node_modules/,
use: [babelLoader, 'ts-loader'] use: [babelLoader, "ts-loader"],
}, },
// CSS, SASS // CSS, SASS
{ {
test: /\.(c|sa|sc)ss$/i, test: /\.(c|sa|sc)ss$/i,
use: [ use: [
'style-loader', "style-loader",
{ {
loader: 'css-loader', loader: "css-loader",
options: {importLoaders: 1} options: { importLoaders: 1 },
}, },
'sass-loader' "sass-loader",
] ],
}, },
// MD // MD
{ {
test: /\.md$/i, test: /\.md$/i,
use: ['html-loader', 'markdown-loader'] use: ["html-loader", "markdown-loader"],
}, },
// static files // static files
{ {
test: /\.(jpe?g|png|gif|svg|eot|ttf|woff2|woff?)$/i, test: /\.(jpe?g|png|gif|webp|svg|eot|ttf|woff2|woff?)$/i,
type: 'asset/resource' type: "asset/resource",
} },
] ],
}, },
plugins: [ plugins: [
new webpack.ProgressPlugin(), new webpack.ProgressPlugin(),
@ -107,10 +105,10 @@ module.exports = {
{ {
from: `${paths.public}`, from: `${paths.public}`,
globOptions: { globOptions: {
ignore: ["**/index.html"] ignore: ["**/index.html"],
} },
} },
] ],
}), }),
new HtmlWebpackPlugin({ new HtmlWebpackPlugin({
@ -119,11 +117,11 @@ module.exports = {
}), }),
new webpack.ProvidePlugin({ new webpack.ProvidePlugin({
React: 'react' React: "react",
}), }),
new Dotenv({ new Dotenv({
path: '.env' path: ".env",
}) }),
] ],
}; };

0
src/components/Achievement/Achievement.js → src/components/Achievement/Achievement.jsx
View File

14
src/components/AuthBox/AuthBox.js → src/components/AuthBox/AuthBox.jsx
View File

@ -1,20 +1,18 @@
import React, { useEffect, useRef, useState } from "react"; import React, { useEffect, useRef, useState } from "react";
import { Link, useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { Loader } from "../Loader/Loader";
import { auth, selectAuth, setUserInfo } from "../../redux/outstaffingSlice"; import { auth, selectAuth, setUserInfo } from "../../redux/outstaffingSlice";
import { loading } from "../../redux/loaderSlice"; import { loading } from "../../redux/loaderSlice";
import { setRole } from "../../redux/roleSlice"; import { setRole } from "../../redux/roleSlice";
import { selectIsLoading } from "../../redux/loaderSlice"; import { selectIsLoading } from "../../redux/loaderSlice";
import ModalErrorLogin from "../../components/UI/ModalErrorLogin/ModalErrorLogin"; import ModalRegistration from "../UI/ModalRegistration/ModalRegistration";
import ModalErrorLogin from "../UI/ModalErrorLogin/ModalErrorLogin";
import { Loader } from "../Loader/Loader";
import { apiRequest } from "../../api/request"; import { apiRequest } from "../../api/request";
import ellipse from "../../images/ellipse.png"; import ellipse from "../../images/ellipse.png";
import ModalRegistration from "../UI/ModalRegistration/ModalRegistration";
import "./authBox.scss"; import "./authBox.scss";
@ -78,7 +76,7 @@ export const AuthBox = ({ title }) => {
Войти в <span>систему</span> Войти в <span>систему</span>
</h2> </h2>
<div className="auth-box__title"> <div className="auth-box__title">
<img src={ellipse} alt="" /> <img src={ellipse} alt="." />
<span>{title}</span> <span>{title}</span>
</div> </div>
<form ref={ref} className="auth-box__form"> <form ref={ref} className="auth-box__form">

2
src/components/AuthHeader/AuthHeader.js → src/components/AuthHeader/AuthHeader.jsx
View File

@ -2,7 +2,7 @@ import React from "react";
import { NavLink } from "react-router-dom"; import { NavLink } from "react-router-dom";
import { scrollToForm } from "../../helper"; import { scrollToForm } from "../../helper";
import userIcon from "../../images/userIcon.png"; import userIcon from "../../images/userIcon.svg";
import "./authHeader.scss"; import "./authHeader.scss";

2
src/components/AuthHeader/authHeader.scss
View File

@ -53,7 +53,7 @@
} }
.candidate { .candidate {
color: #1458DD; color: #1458dd;
} }
} }
} }

78
src/components/Calendar/Calendar.js
View File

@ -1,78 +0,0 @@
import React, {useEffect, useState} from 'react'
import {useSelector} from 'react-redux'
import {Link, Navigate, useNavigate} from 'react-router-dom'
import CalendarComponent from './CalendarComponent'
import {currentMonth} from './calendarHelper'
import {Footer} from '../Footer/Footer'
import {LogoutButton} from "../LogoutButton/LogoutButton";
import {selectCurrentCandidate} from '../../redux/outstaffingSlice'
import rectangle from '../../images/rectangle_secondPage.png'
import './calendar.scss'
import {urlForLocal} from "../../helper";
const Calendar = () => {
if(localStorage.getItem('role_status') !== '18') {
return <Navigate to="/profile" replace/>
}
const candidateForCalendar = useSelector(selectCurrentCandidate);
const [month, setMonth] = useState('');
const navigate = useNavigate();
useEffect(() => {
setMonth(currentMonth)
}, [month]);
const {name, skillsName, photo} = candidateForCalendar;
const abbreviatedName = name && name.substring(0, name.lastIndexOf(' '));
return (
<div className='container'>
<section className='calendar'>
<div className='row'>
<div className='calendar__header'>
<h2 className='calendar__profile'>
Добрый день, <span>Александр !</span>
</h2>
<LogoutButton />
</div>
<div className='col-12 col-xl-12 d-flex justify-content-between align-items-center flex-column flex-sm-row'>
<div className='calendar__info'>
{photo && <img className='calendar__info-img' src={urlForLocal(photo)} alt='img'/>}
<h3 className='calendar__info-name'>{abbreviatedName}</h3>
</div>
<div className='calendar__title'>
<h3 className='calendar__title-text'>{skillsName} разработчик</h3>
<img className='calendar__title-img' src={rectangle} alt='img'/>
</div>
<div>
<Link to='/report'>
<button className='calendar__btn'>Заполнить отчет за день</button>
</Link>
</div>
</div>
</div>
<div className='row'>
<div className='col-12 col-xl-12'>
<CalendarComponent onSelect={() => { navigate('/report/0') }}/>
<p className='calendar__hours'>
{month} : <span> 60 часов </span>
</p>
</div>
</div>
<Footer/>
</section>
</div>
)
};
export default Calendar

88
src/components/Calendar/Calendar.jsx Normal file
View File

@ -0,0 +1,88 @@
import React, { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import { Link, Navigate, useNavigate } from "react-router-dom";
import CalendarComponent from "./CalendarComponent";
import { currentMonth } from "./calendarHelper";
import { Footer } from "../Footer/Footer";
import { LogoutButton } from "../LogoutButton/LogoutButton";
import { urlForLocal } from "../../helper";
import { selectCurrentCandidate } from "../../redux/outstaffingSlice";
import rectangle from "../../images/rectangle_secondPage.png";
import "./calendar.scss";
const Calendar = () => {
if (localStorage.getItem("role_status") !== "18") {
return <Navigate to="/profile" replace />;
}
const candidateForCalendar = useSelector(selectCurrentCandidate);
const [month, setMonth] = useState("");
const navigate = useNavigate();
useEffect(() => {
setMonth(currentMonth);
}, [month]);
const { name, skillsName, photo } = candidateForCalendar;
const abbreviatedName = name && name.substring(0, name.lastIndexOf(" "));
return (
<div className="container">
<section className="calendar">
<div className="row">
<div className="calendar__header">
<h2 className="calendar__profile">
Добрый день, <span>Александр !</span>
</h2>
<LogoutButton />
</div>
<div className="col-12 col-xl-12 d-flex justify-content-between align-items-center flex-column flex-sm-row">
<div className="calendar__info">
{photo && (
<img
className="calendar__info-img"
src={urlForLocal(photo)}
alt="img"
/>
)}
<h3 className="calendar__info-name">{abbreviatedName}</h3>
</div>
<div className="calendar__title">
<h3 className="calendar__title-text">{skillsName} разработчик</h3>
<img className="calendar__title-img" src={rectangle} alt="img" />
</div>
<div>
<Link to="/report">
<button className="calendar__btn">
Заполнить отчет за день
</button>
</Link>
</div>
</div>
</div>
<div className="row">
<div className="col-12 col-xl-12">
<CalendarComponent
onSelect={() => {
navigate("/report/0");
}}
/>
<p className="calendar__hours">
{month} : <span> 60 часов </span>
</p>
</div>
</div>
<Footer />
</section>
</div>
);
};
export default Calendar;

92
src/components/Calendar/CalendarComponent.js
View File

@ -1,92 +0,0 @@
import React, { useState, useEffect } from 'react'
import ellipse from '../../images/ellipse.png'
import rectangle from '../../images/rectangle__calendar.png'
import calendarIcon from '../../images/calendar_icon.png'
import moment from 'moment'
import 'moment/locale/ru'
import { calendarHelper, currentMonthAndDay, } from './calendarHelper'
import './calendarComponent.scss'
const CalendarComponent = ({ onSelect }) => {
const [value, setValue] = useState(moment())
const [calendar, setCalendar] = useState([])
useEffect(() => {
setCalendar(calendarHelper(value))
}, [value])
function beforeToday(day) {
return day.isBefore(new Date(), 'day')
}
function isToday(day) {
return day.isSame(new Date(), 'day')
}
function dayStyles(day) {
if (beforeToday(day)) return `before`
if (isToday(day)) return `today`
if (day.day() === 6 || day.day() === 0) return `selected`
return ''
}
function prevMonth() {
return value.clone().subtract(1, 'month')
}
function nextMonth() {
return value.clone().add(1, 'month');
}
return (
<div className='calendar-component'>
<div className='calendar-component__header'>
<h3>Мои отчеты</h3>
<div className='calendar-component__header-box'>
<img src={ellipse} alt='' />
<span onClick={() => setValue(prevMonth())}>{prevMonth().format('MMMM')}</span>
</div>
<div className='calendar-component__header-box'>
<img src={ellipse} alt='' />
<span onClick={() => setValue(nextMonth())}>{nextMonth().format('MMMM')}</span>
</div>
</div>
<div className='calendar-component__rectangle'>
<img src={rectangle} alt='' />
</div>
<div className='calendar-component__body'>
<div>
<p>Пн</p>
<p>Вт</p>
<p>Ср</p>
<p>Чт</p>
<p>Пт</p>
<p>Сб</p>
<p>Вс</p>
</div>
<div className='calendar-component__form'>
{calendar.map((week) =>
week.map((day) => (
<button
onClick={() => { setValue(day); onSelect(day) }}
key={day}
className={dayStyles(day)}
name={day.format('dddd')}
id='btn'
>
<img className={'calendar__icon'} src={calendarIcon} alt='' />
{currentMonthAndDay(day)}
</button>
))
)}
</div>
</div>
</div>
)
}
export default CalendarComponent

101
src/components/Calendar/CalendarComponent.jsx Normal file
View File

@ -0,0 +1,101 @@
import React, { useState, useEffect } from "react";
import { calendarHelper, currentMonthAndDay } from "./calendarHelper";
import ellipse from "../../images/ellipse.png";
import rectangle from "../../images/rectangle__calendar.png";
import calendarIcon from "../../images/calendar_icon.png";
import moment from "moment";
import "moment/locale/ru";
import "./calendarComponent.scss";
const CalendarComponent = ({ onSelect }) => {
const [value, setValue] = useState(moment());
const [calendar, setCalendar] = useState([]);
useEffect(() => {
setCalendar(calendarHelper(value));
}, [value]);
function beforeToday(day) {
return day.isBefore(new Date(), "day");
}
function isToday(day) {
return day.isSame(new Date(), "day");
}
function dayStyles(day) {
if (beforeToday(day)) return `before`;
if (isToday(day)) return `today`;
if (day.day() === 6 || day.day() === 0) return `selected`;
return "";
}
function prevMonth() {
return value.clone().subtract(1, "month");
}
function nextMonth() {
return value.clone().add(1, "month");
}
return (
<div className="calendar-component">
<div className="calendar-component__header">
<h3>Мои отчеты</h3>
<div className="calendar-component__header-box">
<img src={ellipse} alt="" />
<span onClick={() => setValue(prevMonth())}>
{prevMonth().format("MMMM")}
</span>
</div>
<div className="calendar-component__header-box">
<img src={ellipse} alt="" />
<span onClick={() => setValue(nextMonth())}>
{nextMonth().format("MMMM")}
</span>
</div>
</div>
<div className="calendar-component__rectangle">
<img src={rectangle} alt="" />
</div>
<div className="calendar-component__body">
<div>
<p>Пн</p>
<p>Вт</p>
<p>Ср</p>
<p>Чт</p>
<p>Пт</p>
<p>Сб</p>
<p>Вс</p>
</div>
<div className="calendar-component__form">
{calendar.map((week) =>
week.map((day) => (
<button
onClick={() => {
setValue(day);
onSelect(day);
}}
key={day}
className={dayStyles(day)}
name={day.format("dddd")}
id="btn"
>
<img className={"calendar__icon"} src={calendarIcon} alt="" />
{currentMonthAndDay(day)}
</button>
))
)}
</div>
</div>
</div>
);
};
export default CalendarComponent;

4
src/components/Calendar/calendar.scss
View File

@ -1,6 +1,6 @@
.calendar { .calendar {
margin-bottom: 40px; margin-bottom: 40px;
font-family: 'LabGrotesque', sans-serif; font-family: "LabGrotesque", sans-serif;
&__header { &__header {
display: flex; display: flex;
@ -85,7 +85,7 @@
); );
border: none; border: none;
color: #ffffff; color: #ffffff;
font-family: 'Muller'; font-family: "Muller";
font-size: 1.6em; font-size: 1.6em;
letter-spacing: normal; letter-spacing: normal;
text-align: center; text-align: center;

101
src/components/Calendar/calendarComponent.scss
View File

@ -210,12 +210,6 @@
padding: 28px 10px 48px 10px; padding: 28px 10px 48px 10px;
&__header { &__header {
//h3 {
// position: absolute;
// top: -10%;
// left: 25%;
//}
&-box { &-box {
margin-left: 20px; margin-left: 20px;
} }
@ -233,101 +227,6 @@
} }
} }
//@media (max-width: 768px) {
// .calendar-component__form > button {
// width: 70px;
// height: 40px;
//
// img {
// display: none;
// }
// }
//}
//@media (max-width: 540.98px) {
// .calendar-component__form > button {
// width: 68px;
// height: 40px;
// }
//}
//
//@media (max-width: 520.98px) {
// .calendar-component__form > button {
// width: 66px;
// height: 40px;
// }
//}
//
//@media (max-width: 500.98px) {
// .calendar-component__form > button {
// width: 64px;
// height: 40px;
// }
//}
//
//@media (max-width: 480.98px) {
// .calendar-component__form > button {
// width: 60px;
// height: 40px;
// }
//}
//
//@media (max-width: 460.98px) {
// .calendar-component__form > button {
// width: 56px;
// height: 40px;
// }
//}
//
//@media (max-width: 440.98px) {
// .calendar-component__form > button {
// width: 52px;
// height: 40px;
// }
//}
//
//@media (max-width: 428.98px) {
// .calendar-component__form > button {
// width: 50px;
// height: 40px;
// }
//}
//
//@media (max-width: 414.98px) {
// .calendar-component__form > button {
// width: 49px;
// height: 40px;
// }
//}
//
//@media (max-width: 395.98px) {
// .calendar-component__form > button {
// width: 46px;
// height: 40px;
// }
//}
//
//@media (max-width: 350.98px) {
// .calendar-component__form > button {
// width: 44px;
// height: 40px;
// }
//}
//
//@media (max-width: 349.98px) {
// .calendar-component__form > button {
// width: 42px;
// height: 40px;
// }
//}
//
//@media (max-width: 346.98px) {
// .calendar-component__form > button {
// width: 40px;
// height: 40px;
// }
//}
.calendar__icon { .calendar__icon {
margin-right: 10px; margin-right: 10px;
margin-top: -4px; margin-top: -4px;

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

@ -7,6 +7,7 @@ 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 { Navigation } from "../Navigation/Navigation";
import { import {
currentCandidate, currentCandidate,
@ -16,17 +17,17 @@ import {
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.svg";
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 "../../images/front-end.webp";
import back from "../Outstaffing/images/back_end.png"; import back from "../../images/back-end.webp";
import design from "../Outstaffing/images/design.png"; import design from "../../images/design.webp";
import rightArrow from "../../images/arrowRight.png"; import rightArrow from "../../images/arrowRight.svg";
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") {

4
src/components/CandidateSidebar/CandidateSidebar.js → src/components/CandidateSidebar/CandidateSidebar.jsx
View File

@ -1,8 +1,8 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { Link } from "react-router-dom";
import { Achievement } from "../Achievement/Achievement";
import { Achievement } from "../Achievement/Achievement";
import ModalAspt from "../UI/ModalAspt/ModalAspt"; import ModalAspt from "../UI/ModalAspt/ModalAspt";
import { urlForLocal } from "../../helper"; import { urlForLocal } from "../../helper";
import { LEVELS, SKILLS } from "../../constants/constants"; import { LEVELS, SKILLS } from "../../constants/constants";

41
src/components/CardControl/CardControl.js
View File

@ -1,20 +1,23 @@
import React from 'react' import React from "react";
import rightArrow from "../../images/arrowRight.png" import { Link } from "react-router-dom";
import { Link } from 'react-router-dom'
import './CardControl.scss'
export const CardControl = ({title,path,description, img}) => { import rightArrow from "../../images/arrowRight.svg";
return (
<Link to={`/${path}`} className='control-card'> import "./CardControl.scss";
<div className='control-card__about'>
<img src={img} alt='itemImg' /> export const CardControl = ({ title, path, description, img }) => {
<h3>{title}</h3> return (
</div> <Link to={`/${path}`} className="control-card">
<div className='control-card__info'> <div className="control-card__about">
<p dangerouslySetInnerHTML={{ __html: description }}></p> <img src={img} alt="itemImg" />
<div className='control-card__infoLink'> <h3>{title}</h3>
<img src={rightArrow} alt='arrow' /> </div>
</div> <div className="control-card__info">
</div> <p dangerouslySetInnerHTML={{ __html: description }}></p>
</Link>) <div className="control-card__infoLink">
} <img src={rightArrow} alt="arrow" />
</div>
</div>
</Link>
);
};

43
src/components/CategoriesItem/CategoriesItem.js
View File

@ -1,25 +1,30 @@
import React from "react"; import React from "react";
import {Link} from "react-router-dom"; import { Link } from "react-router-dom";
import rightArrow from "../../images/arrowRight.png" import rightArrow from "../../images/arrowRight.svg";
import './categoriesItem.scss' import "./categoriesItem.scss";
export const CategoriesItem = ({img, title, skills, available, link}) => { export const CategoriesItem = ({ img, title, skills, available, link }) => {
return( return (
<Link to={link} className={available ? "categoriesItem" : "categoriesItem categoriesItem__disable"}> <Link
<div className='categoriesItem__title'> to={link}
<img src={img} alt='img' /> className={
<h5>{title}</h5> available ? "categoriesItem" : "categoriesItem categoriesItem__disable"
</div> }
<div className='categoriesItem__description'> >
<p>{skills}</p> <div className="categoriesItem__title">
<div className='more'> <img src={img} alt="img" />
<img src={rightArrow} alt="arrow" /> <h5>{title}</h5>
</div> </div>
</div> <div className="categoriesItem__description">
</Link> <p>{skills}</p>
) <div className="more">
<img src={rightArrow} alt="arrow" />
</div>
</div>
</Link>
);
}; };
export default CategoriesItem export default CategoriesItem;

11
src/components/FrequentlyAskedQuestionsItem/FrequentlyAskedQuestionsItem.jsx
View File

@ -1,14 +1,17 @@
import React from "react"; import React from "react";
import "./FrequentlyAskedQuestionsItem.scss";
import { FREQUENTLY_ASKED_QUESTION_ROUTE } from "../../constants/router-path";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import questionIcon from "./../../images/faq/question.svg"; import questionIcon from "./../../images/faq/question.svg";
import "./FrequentlyAskedQuestionsItem.scss";
export const FrequentlyAskedQuestionsItem = ({ rubric }) => { export const FrequentlyAskedQuestionsItem = ({ rubric }) => {
return ( return (
<div className="frequently-asked-questions-item"> <div className="frequently-asked-questions-item">
<div className="frequently-asked-questions-item__head"> <div className="frequently-asked-questions-item__head">
<div className="frequently-asked-questions-item__icon-question"><img src={questionIcon} alt="" /></div> <div className="frequently-asked-questions-item__icon-question">
<img src={questionIcon} alt="" />
</div>
<div className="frequently-asked-questions-item__title"> <div className="frequently-asked-questions-item__title">
{rubric?.title} {rubric?.title}
</div> </div>
@ -16,7 +19,7 @@ export const FrequentlyAskedQuestionsItem = ({ rubric }) => {
{rubric?.questions?.map((question) => ( {rubric?.questions?.map((question) => (
<Link <Link
key={question.id} key={question.id}
to={FREQUENTLY_ASKED_QUESTION_ROUTE + "/" + question.id} to={`/frequently-asked-question/${question.id}`}
className="frequently-asked-questions-item__body" className="frequently-asked-questions-item__body"
> >
<p>{question.title}</p> <p>{question.title}</p>

136
src/components/Outstaffing/Outstaffing.js
View File

@ -1,28 +1,30 @@
import React from 'react' import React from "react";
import {useSelector, useDispatch} from 'react-redux' import { useSelector, useDispatch } from "react-redux";
import OutstaffingBlock from '../OutstaffingBlock/OutstaffingBlock' import OutstaffingBlock from "../OutstaffingBlock/OutstaffingBlock";
import TagSelect from '../Select/TagSelect' import TagSelect from "../Select/TagSelect";
import {selectTags, getPositionId, setPositionId} from '../../redux/outstaffingSlice' import {
selectTags,
import front from './images/front_end.png' getPositionId,
import back from './images/back_end.png' setPositionId,
import design from './images/design.png' } from "../../redux/outstaffingSlice";
import './outstaffing.scss'
import front from "../../images/front-end.webp";
import back from "../../images/back-end.webp";
import design from "../../images/design.webp";
import "./outstaffing.scss";
const createSelectPositionHandler = const createSelectPositionHandler =
({positionId, setPositionId, dispatch}) => ({ positionId, setPositionId, dispatch }) =>
(id) => { (id) => {
if (id === positionId) { if (id === positionId) {
dispatch(setPositionId(null)) dispatch(setPositionId(null));
} else { } else {
dispatch(setPositionId(id)) dispatch(setPositionId(id));
} }
}; };
const Outstaffing = () => { const Outstaffing = () => {
const dispatch = useDispatch(); const dispatch = useDispatch();
@ -32,56 +34,56 @@ const Outstaffing = () => {
const onSelectPosition = createSelectPositionHandler({ const onSelectPosition = createSelectPositionHandler({
positionId, positionId,
setPositionId, setPositionId,
dispatch dispatch,
}); });
return ( return (
<> <>
<section className='outstaffing'> <section className="outstaffing">
<div className='row'> <div className="row">
<div className='col-12 col-xl-4'> <div className="col-12 col-xl-4">
<OutstaffingBlock <OutstaffingBlock
dataTags={ dataTags={
tagsArr && tagsArr &&
tagsArr.flat().filter((tag) => tag.name === 'skills_front') tagsArr.flat().filter((tag) => tag.name === "skills_front")
} }
img={front} img={front}
header='Frontend разработчики' header="Frontend разработчики"
positionId='2' positionId="2"
isSelected={positionId === '2'} isSelected={positionId === "2"}
onSelect={(id) => onSelectPosition(id)} onSelect={(id) => onSelectPosition(id)}
/> />
</div>
<div className='col-12 col-xl-4'>
<OutstaffingBlock
dataTags={
tagsArr &&
tagsArr.flat().filter((tag) => tag.name === 'skills_back')
}
img={back}
header='Backend разработчики'
positionId='1'
isSelected={positionId === '1'}
onSelect={(id) => onSelectPosition(id)}
/>
</div>
<div className='col-12 col-xl-4'>
<OutstaffingBlock
dataTags={
tagsArr &&
tagsArr.flat().filter((tag) => tag.name === 'skills_design')
}
img={design}
header='Дизайн проектов'
positionId='5'
isSelected={positionId === '5'}
onSelect={(id) => onSelectPosition(id)}
/>
</div>
</div> </div>
</section> <div className="col-12 col-xl-4">
<TagSelect/> <OutstaffingBlock
</> dataTags={
) tagsArr &&
tagsArr.flat().filter((tag) => tag.name === "skills_back")
}
img={back}
header="Backend разработчики"
positionId="1"
isSelected={positionId === "1"}
onSelect={(id) => onSelectPosition(id)}
/>
</div>
<div className="col-12 col-xl-4">
<OutstaffingBlock
dataTags={
tagsArr &&
tagsArr.flat().filter((tag) => tag.name === "skills_design")
}
img={design}
header="Дизайн проектов"
positionId="5"
isSelected={positionId === "5"}
onSelect={(id) => onSelectPosition(id)}
/>
</div>
</div>
</section>
<TagSelect />
</>
);
}; };
export default Outstaffing export default Outstaffing;

BIN
src/components/Outstaffing/images/back_end.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 15 KiB

BIN
src/components/Outstaffing/images/design.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 19 KiB

BIN
src/components/Outstaffing/images/front_end.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 14 KiB

48
src/components/features/quiz/CardAviableTest.js
View File

@ -1,34 +1,38 @@
import React from 'react' import React from "react";
import { Link } from 'react-router-dom' import { Link } from "react-router-dom";
import rightArrow from "../../../images/arrowRight.png"
import StarRating from '../../StarRating/StarRating'
import rightArrow from "../../../images/arrowRight.svg";
import StarRating from "../../StarRating/StarRating";
export const CardAvailableTest = ({ title, description, path, passedTest }) => { export const CardAvailableTest = ({ title, description, path, passedTest }) => {
return ( return (
<div className='card-available-test'> <div className="card-available-test">
<Link to={`/${path}`} className="card-available-test__container" style={{ opacity: passedTest ? 0.3 : 1, pointerEvents: passedTest ? 'none' : 'all' }}> <Link
<div className='card-available-test__top-head'> to={`/${path}`}
className="card-available-test__container"
style={{
opacity: passedTest ? 0.3 : 1,
pointerEvents: passedTest ? "none" : "all",
}}
>
<div className="card-available-test__top-head">
<StarRating /> <StarRating />
<h3 className='card-available-test__title'>{title}</h3> <h3 className="card-available-test__title">{title}</h3>
</div> </div>
<div className='card-available-test__info'> <div className="card-available-test__info">
<p dangerouslySetInnerHTML={{ __html: description }}></p> <p dangerouslySetInnerHTML={{ __html: description }}></p>
<div className='card-available-test__infoLink'> <div className="card-available-test__infoLink">
<img src={rightArrow} alt='arrow' /> <img src={rightArrow} alt="arrow" />
</div> </div>
</div> </div>
</Link> </Link>
{passedTest && <div className='card-available-test__finished'> {passedTest && (
<p> <div className="card-available-test__finished">
Получить отчет по тестированию <p>Получить отчет по тестированию</p>
</p> <Link to={"/quiz/report"}>Отчет по тесту</Link>
<Link to={'/quiz/report'}>Отчет по тесту</Link> </div>
</div>} )}
</div> </div>
) );
} };

2
src/constants/router-path.js
View File

@ -1,2 +0,0 @@
export const FREQUENTLY_ASKED_QUESTIONS_ROUTE = "/frequently-asked-questions";
export const FREQUENTLY_ASKED_QUESTION_ROUTE = "/frequently-asked-question";

BIN
src/images/arrowRight.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 240 B

9
src/images/arrowRight.svg Normal file
View File

@ -0,0 +1,9 @@
<svg width="18" height="10" viewBox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="18" y="10" width="17.8125" height="10" transform="rotate(180 18 10)" fill="url(#pattern0)"/>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_931_914" transform="matrix(0.0244088 0 0 0.0434783 -0.000381388 0)"/>
</pattern>
<image id="image0_931_914" width="41" height="23" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACkAAAAXCAMAAAChzpYZAAAAAXNSR0IB2cksfwAAAEJQTFRFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAjuH28gAAABZ0Uk5TAEK0Cvb/vgaIlxC7oNwcwg/J2f1bS4SvOREAAABWSURBVHicY2CAA0YmZgaiACMLKxs7kQpZOUYV4lPIyUUYgBUSBRiYiFTIysDMBiS5eQgDBrBSXj5ifESSUn6ilQoIDi2lQkTlDqBSYRGiFAKViuKVBgCepwfqGDtvmgAAAABJRU5ErkJggg=="/>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 902 B

BIN
src/images/back-end.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
src/images/design.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
src/images/front-end.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
src/images/gitItemImg.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.0 KiB

9
src/images/gitItemImg.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 55 KiB

BIN
src/images/userIcon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 499 B

4
src/images/userIcon.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.1111 19.9999V18.111C19.1111 17.1091 18.7131 16.1482 18.0046 15.4397C17.2962 14.7313 16.3353 14.3333 15.3333 14.3333H7.77778C6.77585 14.3333 5.81496 14.7313 5.10649 15.4397C4.39801 16.1482 4 17.1091 4 18.111V19.9999" stroke="#406128" stroke-width="1.9" stroke-linecap="square" stroke-linejoin="round"/>
<path d="M11.5551 10.5556C13.6415 10.5556 15.3329 8.86419 15.3329 6.77778C15.3329 4.69137 13.6415 3 11.5551 3C9.46871 3 7.77734 4.69137 7.77734 6.77778C7.77734 8.86419 9.46871 10.5556 11.5551 10.5556Z" stroke="#406128" stroke-width="1.9" stroke-linecap="square" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 706 B

361
src/pages/AuthForCandidate/AuthForCandidate.jsx
View File

@ -1,188 +1,207 @@
import React, {useEffect, useRef, useState} from "react"; import React, { useEffect, useRef, useState } from "react";
import {loading, selectIsLoading} from "../../redux/loaderSlice"; import { loading, selectIsLoading } from "../../redux/loaderSlice";
import {apiRequest} from "../../api/request"; import { apiRequest } from "../../api/request";
import {auth, selectAuth, setUserInfo} from "../../redux/outstaffingSlice"; import { auth, selectAuth, setUserInfo } from "../../redux/outstaffingSlice";
import {setRole} from "../../redux/roleSlice"; import { setRole } from "../../redux/roleSlice";
import {useDispatch, useSelector} from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import AuthHeader from "../../components/AuthHeader/AuthHeader"; import AuthHeader from "../../components/AuthHeader/AuthHeader";
import SideBar from "../../components/SideBar/SideBar"; import SideBar from "../../components/SideBar/SideBar";
import CategoriesItem from "../../components/CategoriesItem/CategoriesItem" import CategoriesItem from "../../components/CategoriesItem/CategoriesItem";
import StepsForCandidate from "../../components/StepsForCandidate/StepsForCandidate" import StepsForCandidate from "../../components/StepsForCandidate/StepsForCandidate";
import {Footer} from "../../components/Footer/Footer"; import { Footer } from "../../components/Footer/Footer";
import BackEndImg from "../../pages/PartnerСategories/images/personalBackEnd.png" import BackEndImg from "../../pages/PartnerСategories/images/personalBackEnd.png";
import FrontendImg from "../../pages/PartnerСategories/images/PersonalFrontend.png" import FrontendImg from "../../pages/PartnerСategories/images/PersonalFrontend.png";
import ArchitectureImg from "../../pages/PartnerСategories/images/PersonalArchitecture.png" import ArchitectureImg from "../../pages/PartnerСategories/images/PersonalArchitecture.png";
import DesignImg from "../../pages/PartnerСategories/images/PersonalDesign.png" import DesignImg from "../../pages/PartnerСategories/images/PersonalDesign.png";
import TestImg from "../../pages/PartnerСategories/images/PersonalTesters.png" import TestImg from "../../pages/PartnerСategories/images/PersonalTesters.png";
import AdminImg from "../../pages/PartnerСategories/images/PersonalAdmin.png" import AdminImg from "../../pages/PartnerСategories/images/PersonalAdmin.png";
import ManageImg from "../../pages/PartnerСategories/images/PersonalMng.png" import ManageImg from "../../pages/PartnerСategories/images/PersonalMng.png";
import CopyImg from "../../pages/PartnerСategories/images/PersonalCopy.png" import CopyImg from "../../pages/PartnerСategories/images/PersonalCopy.png";
import SmmImg from "../../pages/PartnerСategories/images/PersonalSMM.png" import SmmImg from "../../pages/PartnerСategories/images/PersonalSMM.png";
import authImg from "../../images/authCandidateFormImg.png" import authImg from "../../images/authCandidateFormImg.png";
import arrowBtn from "../../images/arrowRight.png"; import arrowBtn from "../../images/arrowRight.svg";
import './authForCandidate.scss'; import "./authForCandidate.scss";
export const AuthForCandidate = () => { export const AuthForCandidate = () => {
const isLoading = useSelector(selectIsLoading);
const ref = useRef();
const dispatch = useDispatch();
const isAuth = useSelector(selectAuth);
let navigate = useNavigate();
const getToken = localStorage.getItem("auth_token");
const isLoading = useSelector(selectIsLoading); const [personalInfoItems] = useState([
const ref = useRef(); {
const dispatch = useDispatch(); title: "Backend разработчики",
const isAuth = useSelector(selectAuth); link: "/registration-candidate",
let navigate = useNavigate(); description:
const getToken = localStorage.getItem("auth_token"); "Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript",
available: true,
img: BackEndImg,
},
{
title: "Frontend разработчики",
link: "/registration-candidate",
description:
"Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript",
available: true,
img: FrontendImg,
},
{
title: "Архитектура проектов",
link: "/registration-candidate",
description: "Потоки данных ER ERP CRM CQRS UML BPMN",
available: true,
img: ArchitectureImg,
},
{
title: "Дизайн проектов",
link: "/registration-candidate",
description:
"Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript",
available: true,
img: DesignImg,
},
{
title: "Тестирование проектов",
link: "/registration-candidate",
description: "SQL Postman TestRail Kibana Ручное тестирование",
available: false,
img: TestImg,
},
{
title: "Администрирование проектов",
link: "/registration-candidate",
description: "DevOps ELK Kubernetes Docker Bash Apache Oracle Git",
available: false,
img: AdminImg,
},
{
title: "Управление проектом",
link: "/registration-candidate",
description: "Scrum Kanban Agile Miro CustDev",
available: false,
img: ManageImg,
},
{
title: "Копирайтинг проектов",
link: "/registration-candidate",
description: "Теги Заголовок H1 Дескриптор Абзац Сценарий",
available: false,
img: CopyImg,
},
{
title: "Реклама и SMM",
link: "/registration-candidate",
description:
"Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript",
available: false,
img: SmmImg,
},
]);
const [personalInfoItems] = useState([ useEffect(() => {
{ if (isAuth || getToken) {
title: 'Backend разработчики', navigate("/profile");
link: '/registration-candidate', }
description: 'Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript', }, [getToken]);
available: true,
img: BackEndImg
},
{
title: 'Frontend разработчики',
link: '/registration-candidate',
description: 'Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript',
available: true,
img: FrontendImg
},
{
title: 'Архитектура проектов',
link: '/registration-candidate',
description: 'Потоки данных ER ERP CRM CQRS UML BPMN',
available: true,
img: ArchitectureImg
},
{
title: 'Дизайн проектов',
link: '/registration-candidate',
description: 'Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript',
available: true,
img: DesignImg
},
{
title: 'Тестирование проектов',
link: '/registration-candidate',
description: 'SQL Postman TestRail Kibana Ручное тестирование',
available: false,
img: TestImg
},
{
title: 'Администрирование проектов',
link: '/registration-candidate',
description: 'DevOps ELK Kubernetes Docker Bash Apache Oracle Git',
available: false,
img: AdminImg
},
{
title: 'Управление проектом',
link: '/registration-candidate',
description: 'Scrum Kanban Agile Miro CustDev',
available: false,
img: ManageImg
},
{
title: 'Копирайтинг проектов',
link: '/registration-candidate',
description: 'Теги Заголовок H1 Дескриптор Абзац Сценарий',
available: false,
img: CopyImg
},
{
title: 'Реклама и SMM',
link: '/registration-candidate',
description: 'Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript',
available: false,
img: SmmImg
},
]);
useEffect(() => { const submitHandler = () => {
if (isAuth || getToken) { let formData = new FormData(ref.current);
navigate("/profile"); if (!isLoading) {
dispatch(loading(true));
apiRequest("/user/login", {
method: "POST",
data: formData,
}).then((res) => {
if (!res.access_token) {
dispatch(loading(false));
} else {
localStorage.setItem("auth_token", res.access_token);
localStorage.setItem("id", res.id);
localStorage.setItem("cardId", res.card_id);
localStorage.setItem("role_status", res.status);
localStorage.setItem(
"access_token_expired_at",
res.access_token_expired_at
);
dispatch(auth(true));
dispatch(setUserInfo(res));
dispatch(loading(false));
dispatch(setRole("ROLE_PARTNER"));
} }
}, [getToken]); });
}
};
const submitHandler = () => { return (
let formData = new FormData(ref.current); <div className="auth-candidate">
if (!isLoading) { <AuthHeader />
dispatch(loading(true)); <div className="container">
apiRequest("/user/login", { <div className="auth__wrapper">
method: "POST", <div className="auth__info">
data: formData, <h3>Войти, уже есть доступ</h3>
}).then((res) => { <img src={authImg} alt="img" />
if (!res.access_token) { <p>
dispatch(loading(false)); если вы получили доступ пройдя 2 шага для входа или хотите узнать
} else { свои результаты в кабинете
localStorage.setItem("auth_token", res.access_token); </p>
localStorage.setItem("id", res.id); </div>
localStorage.setItem("cardId", res.card_id); <form ref={ref} className="auth__form">
localStorage.setItem("role_status", res.status); <label htmlFor="login">Ваш email *</label>
localStorage.setItem( <input id="login" type="text" name="username" placeholder="Email" />
"access_token_expired_at",
res.access_token_expired_at
);
dispatch(auth(true));
dispatch(setUserInfo(res));
dispatch(loading(false));
dispatch(setRole("ROLE_PARTNER"));
}
});
}
};
return( <label htmlFor="password">Ваш пароль*</label>
<div className='auth-candidate'> <input
<AuthHeader /> id="password"
<div className='container'> type="password"
<div className='auth__wrapper'> name="password"
<div className='auth__info'> placeholder="Пароль"
<h3>Войти, уже есть доступ</h3> />
<img src={authImg} alt='img' /> <button
<p>если вы получили доступ пройдя 2 шага для входа или хотите узнать свои результаты в кабинете</p> onClick={(e) => {
</div> e.preventDefault();
<form ref={ref} className='auth__form'> submitHandler();
<label htmlFor="login">Ваш email *</label> }}
<input id="login" type="text" name="username" placeholder="Email" /> >
Войти
<label htmlFor="password">Ваш пароль*</label> </button>
<input </form>
id="password"
type="password"
name="password"
placeholder="Пароль"
/>
<button
onClick={(e) => {
e.preventDefault();
submitHandler();
}}
>Войти</button>
</form>
</div>
<div className='auth-candidate__start'>
<h2 className="auth-candidate__start__title">Хочу в команду <span>Айти специалистов</span></h2>
<div className="change-mode__arrow">
<img src={arrowBtn}></img>
</div>
<p className="auth-candidate__start__description">Для нас не имеет значение Ваша локация.</p>
<div className='auth-candidate__start__categoriesWrapper'>
<StepsForCandidate step="шаг 1 - выбери специализацтию" />
{personalInfoItems.map((item, index) => {
return <CategoriesItem link={item.link} key={index} title={item.title} img={item.img} skills={item.description} available={item.available} />
})
}
</div>
</div>
</div>
<SideBar />
<Footer/>
</div> </div>
) <div className="auth-candidate__start">
<h2 className="auth-candidate__start__title">
Хочу в команду <span>Айти специалистов</span>
</h2>
<div className="change-mode__arrow">
<img src={arrowBtn} alt="#"></img>
</div>
<p className="auth-candidate__start__description">
Для нас не имеет значение Ваша локация.
</p>
<div className="auth-candidate__start__categoriesWrapper">
<StepsForCandidate step="шаг 1 - выбери специализацтию" />
{personalInfoItems.map((item, index) => {
return (
<CategoriesItem
link={item.link}
key={index}
title={item.title}
img={item.img}
skills={item.description}
available={item.available}
/>
);
})}
</div>
</div>
</div>
<SideBar />
<Footer />
</div>
);
}; };

28
src/pages/AuthForDevelopers/AuthForDevelopers.jsx
View File

@ -1,24 +1,22 @@
import React, { useEffect, useState } from "react"; import React, { useEffect } from "react";
import { AuthBox } from "../../components/AuthBox/AuthBox";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import arrow from "../../images/arrow__login_page.png";
import medium from "../../images/medium_male_big.png";
import cross from "../../images/cross.png";
import text from "../../images/Body_Text.png";
import arrowBtn from "../../images/arrowRight.png";
import vector from "../../images/Vector_Smart_Object.png";
import vectorBlack from "../../images/Vector_Smart_Object_black.png";
import { selectAuth } from "../../redux/outstaffingSlice";
import { Link, useNavigate } from "react-router-dom";
import { scrollToForm } from "../../helper";
import { Footer } from "../../components/Footer/Footer"; import { Footer } from "../../components/Footer/Footer";
import SideBar from "../../components/SideBar/SideBar"; import SideBar from "../../components/SideBar/SideBar";
import AuthHeader from "../../components/AuthHeader/AuthHeader"; import AuthHeader from "../../components/AuthHeader/AuthHeader";
import SliderWorkers from "../../components/SliderWorkers/SliderWorkers"; import SliderWorkers from "../../components/SliderWorkers/SliderWorkers";
import { AuthBox } from "../../components/AuthBox/AuthBox";
import { selectAuth } from "../../redux/outstaffingSlice";
import { Link, useNavigate } from "react-router-dom";
import { scrollToForm } from "../../helper";
import arrow from "../../images/arrow__login_page.png";
import medium from "../../images/medium_male_big.png";
import cross from "../../images/cross.png";
import text from "../../images/Body_Text.png";
import arrowBtn from "../../images/arrowRight.svg";
import vector from "../../images/Vector_Smart_Object.png";
import vectorBlack from "../../images/Vector_Smart_Object_black.png";
import "./authForDevelopers.scss"; import "./authForDevelopers.scss";

25
src/pages/AuthForPartners/AuthForPartners.js
View File

@ -1,16 +1,4 @@
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import arrow from "../../images/arrow__login_page.png";
import authImg from "../../images/auth_img.png";
import cross from "../../images/cross.png";
import text from "../../images/Body_Text.png";
import arrowBtn from "../../images/arrowRight.png";
import vector from "../../images/Vector_Smart_Object.png";
import vectorBlack from "../../images/Vector_Smart_Object_black.png";
import { useSelector } from "react-redux";
import { selectAuth } from "../../redux/outstaffingSlice";
import { Link, useNavigate } from "react-router-dom";
import { scrollToForm } from "../../helper";
import { Footer } from "../../components/Footer/Footer"; import { Footer } from "../../components/Footer/Footer";
import { AuthBox } from "../../components/AuthBox/AuthBox"; import { AuthBox } from "../../components/AuthBox/AuthBox";
@ -18,6 +6,19 @@ import SideBar from "../../components/SideBar/SideBar";
import AuthHeader from "../../components/AuthHeader/AuthHeader"; import AuthHeader from "../../components/AuthHeader/AuthHeader";
import SliderWorkers from "../../components/SliderWorkers/SliderWorkers"; import SliderWorkers from "../../components/SliderWorkers/SliderWorkers";
import { useSelector } from "react-redux";
import { selectAuth } from "../../redux/outstaffingSlice";
import { Link, useNavigate } from "react-router-dom";
import { scrollToForm } from "../../helper";
import arrow from "../../images/arrow__login_page.png";
import authImg from "../../images/auth_img.png";
import cross from "../../images/cross.png";
import text from "../../images/Body_Text.png";
import arrowBtn from "../../images/arrowRight.svg";
import vector from "../../images/Vector_Smart_Object.png";
import vectorBlack from "../../images/Vector_Smart_Object_black.png";
import "./authForPartners.scss"; import "./authForPartners.scss";
const AuthForPartners = () => { const AuthForPartners = () => {

22
src/pages/FrequentlyAskedQuestion/FrequentlyAskedQuestion.jsx
View File

@ -1,19 +1,18 @@
import { useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router"; import { useNavigate, useParams } from "react-router";
import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"; import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import SideBar from "../../components/SideBar/SideBar"; import SideBar from "../../components/SideBar/SideBar";
import AuthHeader from "../../components/AuthHeader/AuthHeader"; import AuthHeader from "../../components/AuthHeader/AuthHeader";
import { Footer } from "../../components/Footer/Footer"; import { Footer } from "../../components/Footer/Footer";
import arrowBtn from "../../images/arrowRight.png";
import arrowBtn from "../../images/arrowRight.svg";
import "./FrequentlyAskedQuestion.scss"; import "./FrequentlyAskedQuestion.scss";
import { useEffect, useState } from "react";
import {
FREQUENTLY_ASKED_QUESTIONS_ROUTE,
FREQUENTLY_ASKED_QUESTION_ROUTE,
} from "../../constants/router-path";
export const FrequentlyAskedQuestion = () => { export const FrequentlyAskedQuestion = () => {
const params = useParams(); const params = useParams();
const navigate = useNavigate() const navigate = useNavigate();
const [question, setQuestion] = useState({ const [question, setQuestion] = useState({
id: params.id, id: params.id,
title: "Это фриланс-платформа?", title: "Это фриланс-платформа?",
@ -35,16 +34,19 @@ export const FrequentlyAskedQuestion = () => {
{ name: "Главная", link: "/auth" }, { name: "Главная", link: "/auth" },
{ {
name: "FAQ (часто задаваемые вопросы)", name: "FAQ (часто задаваемые вопросы)",
link: FREQUENTLY_ASKED_QUESTIONS_ROUTE, link: "/frequently-asked-questions",
}, },
{ {
name: question.title, name: question.title,
link: FREQUENTLY_ASKED_QUESTION_ROUTE + "/" + params.id, link: `/frequently-asked-question/${params.id}`,
}, },
]} ]}
/> />
<div className="frequently-asked-question__title">{question.title}</div> <div className="frequently-asked-question__title">{question.title}</div>
<div className="frequently-asked-question__back" onClick={()=>navigate(-1)}> <div
className="frequently-asked-question__back"
onClick={() => navigate(-1)}
>
<div className="frequently-asked-question__arrow"> <div className="frequently-asked-question__arrow">
<img src={arrowBtn}></img> <img src={arrowBtn}></img>
</div> </div>

79
src/pages/FrequentlyAskedQuestions/FrequentlyAskedQuestions.jsx
View File

@ -1,78 +1,83 @@
import React from "react"; import React from "react";
import "./FrequentlyAskedQuestions.scss";
import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { Footer } from "../../components/Footer/Footer";
import { FrequentlyAskedQuestionsItem } from "../../components/FrequentlyAskedQuestionsItem/FrequentlyAskedQuestionsItem";
import AuthHeader from "../../components/AuthHeader/AuthHeader"; import AuthHeader from "../../components/AuthHeader/AuthHeader";
import SideBar from "../../components/SideBar/SideBar"; import SideBar from "../../components/SideBar/SideBar";
import arrow from "./../../images/faq/arrow.svg"; import arrow from "./../../images/faq/arrow.svg";
import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { Footer } from "../../components/Footer/Footer";
import { FREQUENTLY_ASKED_QUESTIONS_ROUTE } from "../../constants/router-path";
import { FrequentlyAskedQuestionsItem } from "../../components/FrequentlyAskedQuestionsItem/FrequentlyAskedQuestionsItem";
import "./FrequentlyAskedQuestions.scss";
export const FrequentlyAskedQuestions = () => { export const FrequentlyAskedQuestions = () => {
const rubrics = [ const rubrics = [
{ {
title: 'Общие вопросы ', title: "Общие вопросы ",
questions: [ questions: [
{ {
id: 1, id: 1,
title: 'Это фриланс-платформа?' title: "Это фриланс-платформа?",
}, },
{ {
id: 2, id: 2,
title: 'Чем вы отличаетесь от традиционного процесса выбора исполнителя?' title:
"Чем вы отличаетесь от традиционного процесса выбора исполнителя?",
}, },
{ {
id: 3, id: 3,
title: 'Это фриланс-платформа?' title: "Это фриланс-платформа?",
}, },
{ {
id: 4, id: 4,
title: 'Чем вы отличаетесь от традиционного процесса выбора исполнителя?' title:
} "Чем вы отличаетесь от традиционного процесса выбора исполнителя?",
] },
],
}, },
{ {
title: 'Поиск специалиста', title: "Поиск специалиста",
questions: [ questions: [
{ {
id: 11, id: 11,
title: 'Это фриланс-платформа?' title: "Это фриланс-платформа?",
}, },
{ {
id: 22, id: 22,
title: 'Чем вы отличаетесь от традиционного процесса выбора исполнителя?' title:
"Чем вы отличаетесь от традиционного процесса выбора исполнителя?",
}, },
{ {
id: 33, id: 33,
title: 'Это фриланс-платформа?' title: "Это фриланс-платформа?",
}, },
{ {
id: 44, id: 44,
title: 'Чем вы отличаетесь от традиционного процесса выбора исполнителя?' title:
} "Чем вы отличаетесь от традиционного процесса выбора исполнителя?",
] },
],
}, },
{ {
title: 'Бронирование специалиста', title: "Бронирование специалиста",
questions: [ questions: [
{ {
id: 11, id: 11,
title: 'Это фриланс-платформа?' title: "Это фриланс-платформа?",
} },
] ],
}, },
{ {
title: 'Работа с выбранным специалистом', title: "Работа с выбранным специалистом",
questions: [ questions: [
{ {
id: 11, id: 11,
title: 'Чем вы отличаетесь от традиционного процесса выбора исполнителя?' title:
} "Чем вы отличаетесь от традиционного процесса выбора исполнителя?",
] },
],
}, },
] ];
return ( return (
<div className="frequently-asked-questions"> <div className="frequently-asked-questions">
@ -83,7 +88,10 @@ export const FrequentlyAskedQuestions = () => {
<ProfileBreadcrumbs <ProfileBreadcrumbs
links={[ links={[
{ name: "Главная", link: "/auth" }, { name: "Главная", link: "/auth" },
{ name: "FAQ (часто задаваемые вопросы)", link: FREQUENTLY_ASKED_QUESTIONS_ROUTE }, {
name: "FAQ (часто задаваемые вопросы)",
link: "/frequently-asked-questions",
},
]} ]}
/> />
<div className="frequently-asked-questions__about"> <div className="frequently-asked-questions__about">
@ -98,13 +106,12 @@ export const FrequentlyAskedQuestions = () => {
</div> </div>
</div> </div>
<div className="frequently-asked-questions__items"> <div className="frequently-asked-questions__items">
{ {rubrics.map((rubric, index) => (
rubrics.map((rubric,index)=><FrequentlyAskedQuestionsItem rubric={rubric} key={index} />) <FrequentlyAskedQuestionsItem rubric={rubric} key={index} />
} ))}
</div> </div>
</div> </div>
<Footer /> <Footer />
</div> </div>
); );
}; };

145
src/pages/PartnerEmployees/PartnerEmployees.js
View File

@ -1,74 +1,85 @@
import React from 'react'; import React from "react";
import {Link, Navigate} from "react-router-dom"; import { Link, Navigate } from "react-router-dom";
import {useSelector} from "react-redux"; import { useSelector } from "react-redux";
import {getPartnerEmployees} from "../../redux/outstaffingSlice"; import { getPartnerEmployees } 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 imgInfo from "./emplInfo.png" import imgInfo from "./emplInfo.png";
import rightArrow from "../../images/arrowRight.png" import rightArrow from "../../images/arrowRight.svg";
import "./partnerEmployees.scss" import "./partnerEmployees.scss";
export const PartnerEmployees = () => { export const PartnerEmployees = () => {
const partnerEmployees = useSelector(getPartnerEmployees); const partnerEmployees = useSelector(getPartnerEmployees);
if(localStorage.getItem('role_status') !== '18' || !partnerEmployees.length) { if (
return <Navigate to="/profile/categories" replace/> localStorage.getItem("role_status") !== "18" ||
} !partnerEmployees.length
return( ) {
<div className="partnerEmployees"> return <Navigate to="/profile/categories" replace />;
<ProfileHeader /> }
<div className="container"> return (
<ProfileBreadcrumbs links={[ <div className="partnerEmployees">
{name: 'Главная', link: '/profile'}, <ProfileHeader />
{name: 'Данные моего персонала', link: '/profile/categories'}, <div className="container">
{name: 'Backend разработчики', link: '/profile/categories/employees'}, <ProfileBreadcrumbs
]} links={[
/> { name: "Главная", link: "/profile" },
<h2 className="partnerEmployees__title">Backend разработчики</h2> { name: "Данные моего персонала", link: "/profile/categories" },
<div className="partnerEmployees__items"> {
{partnerEmployees.map((person) => { name: "Backend разработчики",
return <div className="partnerEmployees__item" key={person.id}> link: "/profile/categories/employees",
<div className="partnerEmployees__item__name"> },
<img src={person.personAvatar} alt="avatar" /> ]}
<h4>{person.name}</h4> />
</div> <h2 className="partnerEmployees__title">Backend разработчики</h2>
<div className="partnerEmployees__item__info"> <div className="partnerEmployees__items">
<div className="partnerEmployees__item__info__qualification"> {partnerEmployees.map((person) => {
<h5>{person.qualification}</h5> return (
<span>{person.level}</span> <div className="partnerEmployees__item" key={person.id}>
<div className="info_summary"> <div className="partnerEmployees__item__name">
<img src={imgInfo} alt="img" /> <img src={person.personAvatar} alt="avatar" />
<p>Данные и резюме</p> <h4>{person.name}</h4>
<Link to='/candidate/26' className="arrow">
<img src={rightArrow} alt="arrow" />
</Link>
</div>
</div>
<div className="partnerEmployees__item__info__project">
<span className="name">Проект:</span>
<h5>{person.project}</h5>
<div className="partnerEmployees__item__info__project__details">
<div className="details__item">
<p>Открытые задачи</p>
<span className="count">{person.tasks_in_progress}</span>
</div>
<div className="details__item">
<p>Отработанных часов в <span>марте</span></p>
<span className="count">{person.month_hours}</span>
</div>
</div>
</div>
</div>
</div>
})
}
</div> </div>
</div> <div className="partnerEmployees__item__info">
<Footer/> <div className="partnerEmployees__item__info__qualification">
<h5>{person.qualification}</h5>
<span>{person.level}</span>
<div className="info_summary">
<img src={imgInfo} alt="img" />
<p>Данные и резюме</p>
<Link to="/candidate/26" className="arrow">
<img src={rightArrow} alt="arrow" />
</Link>
</div>
</div>
<div className="partnerEmployees__item__info__project">
<span className="name">Проект:</span>
<h5>{person.project}</h5>
<div className="partnerEmployees__item__info__project__details">
<div className="details__item">
<p>Открытые задачи</p>
<span className="count">
{person.tasks_in_progress}
</span>
</div>
<div className="details__item">
<p>
Отработанных часов в <span>марте</span>
</p>
<span className="count">{person.month_hours}</span>
</div>
</div>
</div>
</div>
</div>
);
})}
</div> </div>
) </div>
} <Footer />
</div>
);
};

335
src/pages/PartnerСategories/PartnerСategories.js
View File

@ -1,171 +1,186 @@
import React, {useState} from 'react'; import React, { useState } from "react";
import {Link} from "react-router-dom"; import { Link } from "react-router-dom";
import {Navigate} from "react-router-dom"; import { Navigate } from "react-router-dom";
import {useDispatch} from "react-redux"; import { useDispatch } from "react-redux";
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 {setPartnerEmployees} from "../../redux/outstaffingSlice"; import { setPartnerEmployees } from "../../redux/outstaffingSlice";
import BackEndImg from "./images/personalBackEnd.png" import BackEndImg from "./images/personalBackEnd.png";
import FrontendImg from "./images/PersonalFrontend.png" import FrontendImg from "./images/PersonalFrontend.png";
import ArchitectureImg from "./images/PersonalArchitecture.png" import ArchitectureImg from "./images/PersonalArchitecture.png";
import DesignImg from "./images/PersonalDesign.png" import DesignImg from "./images/PersonalDesign.png";
import TestImg from "./images/PersonalTesters.png" import TestImg from "./images/PersonalTesters.png";
import AdminImg from "./images/PersonalAdmin.png" import AdminImg from "./images/PersonalAdmin.png";
import ManageImg from "./images/PersonalMng.png" import ManageImg from "./images/PersonalMng.png";
import CopyImg from "./images/PersonalCopy.png" import CopyImg from "./images/PersonalCopy.png";
import SmmImg from "./images/PersonalSMM.png" import SmmImg from "./images/PersonalSMM.png";
import rightArrow from "../../images/arrowRight.png" import rightArrow from "../../images/arrowRight.svg";
import avatarImg from "../PartnerEmployees/avatarMok.png"; import avatarImg from "../PartnerEmployees/avatarMok.png";
import "./partnerСategories.scss" import "./partnerСategories.scss";
import { Navigation } from '../../components/Navigation/Navigation'; import { Navigation } from "../../components/Navigation/Navigation";
export const PartnerCategories = () => { export const PartnerCategories = () => {
const dispatch = useDispatch(); const dispatch = useDispatch();
if(localStorage.getItem('role_status') !== '18') { if (localStorage.getItem("role_status") !== "18") {
return <Navigate to="/profile" replace/> return <Navigate to="/profile" replace />;
} }
const [personalInfoItems] = useState([ const [personalInfoItems] = useState([
{ {
title: 'Backend разработчики', title: "Backend разработчики",
link: '/profile/categories/employees', link: "/profile/categories/employees",
description: 'Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript', description:
available: true, "Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript",
img: BackEndImg available: true,
}, img: BackEndImg,
{ },
title: 'Frontend разработчики', {
link: '/profile/categories/employees', title: "Frontend разработчики",
description: 'Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript', link: "/profile/categories/employees",
available: true, description:
img: FrontendImg "Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript",
}, available: true,
{ img: FrontendImg,
title: 'Архитектура проектов', },
link: '/profile/categories/employees', {
description: 'Потоки данных ER ERP CRM CQRS UML BPMN', title: "Архитектура проектов",
available: true, link: "/profile/categories/employees",
img: ArchitectureImg description: "Потоки данных ER ERP CRM CQRS UML BPMN",
}, available: true,
{ img: ArchitectureImg,
title: 'Дизайн проектов', },
link: '/profile/categories/employees', {
description: 'Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript', title: "Дизайн проектов",
available: true, link: "/profile/categories/employees",
img: DesignImg description:
}, "Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript",
{ available: true,
title: 'Тестирование проектов', img: DesignImg,
link: '/profile/add-request', },
description: 'SQL Postman TestRail Kibana Ручное тестирование', {
available: false, title: "Тестирование проектов",
img: TestImg link: "/profile/add-request",
}, description: "SQL Postman TestRail Kibana Ручное тестирование",
{ available: false,
title: 'Администрирование проектов', img: TestImg,
link: '/profile/add-request', },
description: 'DevOps ELK Kubernetes Docker Bash Apache Oracle Git', {
available: false, title: "Администрирование проектов",
img: AdminImg link: "/profile/add-request",
}, description: "DevOps ELK Kubernetes Docker Bash Apache Oracle Git",
{ available: false,
title: 'Управление проектом', img: AdminImg,
link: '/profile/add-request', },
description: 'Scrum Kanban Agile Miro CustDev', {
available: false, title: "Управление проектом",
img: ManageImg link: "/profile/add-request",
}, description: "Scrum Kanban Agile Miro CustDev",
{ available: false,
title: 'Копирайтинг проектов', img: ManageImg,
link: '/profile/add-request', },
description: 'Теги Заголовок H1 Дескриптор Абзац Сценарий', {
available: false, title: "Копирайтинг проектов",
img: CopyImg link: "/profile/add-request",
}, description: "Теги Заголовок H1 Дескриптор Абзац Сценарий",
{ available: false,
title: 'Реклама и SMM', img: CopyImg,
link: '/profile/add-request', },
description: 'Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript', {
available: false, title: "Реклама и SMM",
img: SmmImg link: "/profile/add-request",
}, description:
]) "Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript",
available: false,
img: SmmImg,
},
]);
const [mokPersons] = useState([ const [mokPersons] = useState([
{ {
personAvatar: avatarImg, personAvatar: avatarImg,
name: "Макаренко Дмитрий", name: "Макаренко Дмитрий",
qualification: "PHP Backend - разработчик", qualification: "PHP Backend - разработчик",
level: "Middle", level: "Middle",
project: "Админка НВД Консалтинг", project: "Админка НВД Консалтинг",
tasks_in_progress: 5, tasks_in_progress: 5,
month_hours: 140, month_hours: 140,
id: 1 id: 1,
}, },
{ {
personAvatar: avatarImg, personAvatar: avatarImg,
name: "Макаренко Дмитрий", name: "Макаренко Дмитрий",
qualification: "PHP Backend - разработчик", qualification: "PHP Backend - разработчик",
level: "Middle", level: "Middle",
project: "Админка НВД Консалтинг", project: "Админка НВД Консалтинг",
tasks_in_progress: 5, tasks_in_progress: 5,
month_hours: 140, month_hours: 140,
id: 2 id: 2,
}, },
{ {
personAvatar: avatarImg, personAvatar: avatarImg,
name: "Макаренко Дмитрий", name: "Макаренко Дмитрий",
qualification: "PHP Backend - разработчик", qualification: "PHP Backend - разработчик",
level: "Middle", level: "Middle",
project: "Админка НВД Консалтинг", project: "Админка НВД Консалтинг",
tasks_in_progress: 5, tasks_in_progress: 5,
month_hours: 140, month_hours: 140,
id: 3 id: 3,
}, },
]) ]);
return ( return (
<div className="partnerCategories"> <div className="partnerCategories">
<ProfileHeader /> <ProfileHeader />
<Navigation /> <Navigation />
<div className="container"> <div className="container">
<ProfileBreadcrumbs links={[ <ProfileBreadcrumbs
{name: 'Главная', link: '/profile'}, links={[
{name: 'Данные моего персонала', link: '/profile/categories'}, { name: "Главная", link: "/profile" },
]} { name: "Данные моего персонала", link: "/profile/categories" },
/> ]}
<h2 className="partnerCategories__title">Данные персонала</h2> />
<div className="partnerCategories__items"> <h2 className="partnerCategories__title">Данные персонала</h2>
{personalInfoItems.map((item, index) => { <div className="partnerCategories__items">
return <Link to={item.link} key={index} className={item.available ? "partnerCategories__item item" : "partnerCategories__item item item__disable"} {personalInfoItems.map((item, index) => {
onClick={() => { return (
dispatch(setPartnerEmployees(mokPersons)) <Link
}}> to={item.link}
<div className="item__title"> key={index}
<img src={item.img} alt={item.title} /> className={
<h4>{item.title}</h4> item.available
</div> ? "partnerCategories__item item"
<div className="item__info"> : "partnerCategories__item item item__disable"
<p>{item.description}</p> }
<div className='more'> onClick={() => {
<img src={rightArrow} alt="arrow" /> dispatch(setPartnerEmployees(mokPersons));
</div> }}
</div> >
{!item.available && <div className="item__title">
<div className="item__disableHover"> <img src={item.img} alt={item.title} />
<p>У вас нет персонала из категории</p> <h4>{item.title}</h4>
<button>Подобрать</button>
</div>
}
</Link>
})}
</div> </div>
</div> <div className="item__info">
<Footer/> <p>{item.description}</p>
<div className="more">
<img src={rightArrow} alt="arrow" />
</div>
</div>
{!item.available && (
<div className="item__disableHover">
<p>У вас нет персонала из категории</p>
<button>Подобрать</button>
</div>
)}
</Link>
);
})}
</div> </div>
) </div>
} <Footer />
</div>
);
};

132
src/pages/RegistrationForCandidate/RegistrationForCandidate.js
View File

@ -1,72 +1,78 @@
import React from 'react'; import React from "react";
import AuthHeader from "../../components/AuthHeader/AuthHeader"; import AuthHeader from "../../components/AuthHeader/AuthHeader";
import SideBar from "../../components/SideBar/SideBar"; import SideBar from "../../components/SideBar/SideBar";
import StepsForCandidate from "../../components/StepsForCandidate/StepsForCandidate" import StepsForCandidate from "../../components/StepsForCandidate/StepsForCandidate";
import {Footer} from "../../components/Footer/Footer"; import { Footer } from "../../components/Footer/Footer";
import BackEndImg from "../../pages/PartnerСategories/images/personalBackEnd.png" import BackEndImg from "../../pages/PartnerСategories/images/personalBackEnd.png";
import arrowBtn from "../../images/arrowRight.png"; import arrowBtn from "../../images/arrowRight.svg";
import './registationForCandidate.scss' import "./registationForCandidate.scss";
export const RegistrationForCandidate = () => { export const RegistrationForCandidate = () => {
return( return (
<div className='registrationCandidate'> <div className="registrationCandidate">
<AuthHeader/> <AuthHeader />
<div className='container'> <div className="container">
<div className='registrationCandidate__start'> <div className="registrationCandidate__start">
<h2 className="auth-candidate__start__title">Хочу в команду <span>Айти специалистов</span></h2> <h2 className="auth-candidate__start__title">
<div className="change-mode__arrow"> Хочу в команду <span>Айти специалистов</span>
<img src={arrowBtn}></img> </h2>
</div> <div className="change-mode__arrow">
<p className="auth-candidate__start__description">Для нас не имеет значение Ваша локация.</p> <img src={arrowBtn}></img>
<StepsForCandidate step="шаг 2 - заполните данные" /> </div>
<div className='registrationCandidate__formWrapper'> <p className="auth-candidate__start__description">
<div className='registrationCandidate__info'> Для нас не имеет значение Ваша локация.
<div className='registrationCandidate__info__category'> </p>
<img src={BackEndImg} alt='img' /> <StepsForCandidate step="шаг 2 - заполните данные" />
<p>Backend разработчики</p> <div className="registrationCandidate__formWrapper">
</div> <div className="registrationCandidate__info">
<p className='registrationCandidate__info__skills'>Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript</p> <div className="registrationCandidate__info__category">
<div className='registrationCandidate__info__arrow'> <img src={BackEndImg} alt="img" />
<img src={arrowBtn} alt='img' /> <p>Backend разработчики</p>
</div> </div>
</div> <p className="registrationCandidate__info__skills">
<form className='registrationCandidate__form'> Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript
<div className='registrationCandidate__form__input'> </p>
<label htmlFor="name">Ваше имя *</label> <div className="registrationCandidate__info__arrow">
<input id="name" type="text" placeholder="Имя" /> <img src={arrowBtn} alt="img" />
</div> </div>
<div className='registrationCandidate__form__input'>
<label htmlFor="summary">Если есть ссылка на резюме</label>
<input id="summary" type="text" placeholder="Резюме" />
</div>
<div className='registrationCandidate__form__input'>
<label htmlFor="email">Ваш email *</label>
<input id="email" type="text" placeholder="Email" />
</div>
<div className='registrationCandidate__form__input'>
<label htmlFor="tg">Ваш телеграм*</label>
<input id="tg" type="text" placeholder="Телеграм" />
</div>
<div className='registrationCandidate__form__input'>
<label htmlFor="password">Придумайте пароль*</label>
<input id="password" type="text" placeholder="Пароль" />
</div>
<div className='registrationCandidate__form__input'>
<label htmlFor="secondPassword">Повторите пароль*</label>
<input id="secondPassword" type="text" placeholder="Пароль" />
</div>
<div className='registrationCandidate__form__submit'>
<button>Отправить</button>
</div>
</form>
</div>
</div>
</div> </div>
<SideBar/> <form className="registrationCandidate__form">
<Footer/> <div className="registrationCandidate__form__input">
<label htmlFor="name">Ваше имя *</label>
<input id="name" type="text" placeholder="Имя" />
</div>
<div className="registrationCandidate__form__input">
<label htmlFor="summary">Если есть ссылка на резюме</label>
<input id="summary" type="text" placeholder="Резюме" />
</div>
<div className="registrationCandidate__form__input">
<label htmlFor="email">Ваш email *</label>
<input id="email" type="text" placeholder="Email" />
</div>
<div className="registrationCandidate__form__input">
<label htmlFor="tg">Ваш телеграм*</label>
<input id="tg" type="text" placeholder="Телеграм" />
</div>
<div className="registrationCandidate__form__input">
<label htmlFor="password">Придумайте пароль*</label>
<input id="password" type="text" placeholder="Пароль" />
</div>
<div className="registrationCandidate__form__input">
<label htmlFor="secondPassword">Повторите пароль*</label>
<input id="secondPassword" type="text" placeholder="Пароль" />
</div>
<div className="registrationCandidate__form__submit">
<button>Отправить</button>
</div>
</form>
</div>
</div> </div>
) </div>
} <SideBar />
<Footer />
</div>
);
};

206
src/pages/Summary/Summary.js
View File

@ -1,122 +1,152 @@
import React, {useEffect, useState} from 'react'; import React, { useEffect, useState } from "react";
import {useSelector} from "react-redux"; import { useSelector } from "react-redux";
import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader"; import { Navigate } from "react-router-dom";
import {getProfileInfo} from "../../redux/outstaffingSlice";
import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs" import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
import {Footer} from '../../components/Footer/Footer' import { getProfileInfo } from "../../redux/outstaffingSlice";
import { urlForLocal} from "../../helper"; import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { Footer } from "../../components/Footer/Footer";
import { urlForLocal } from "../../helper";
import { apiRequest } from "../../api/request";
import { Navigation } from "../../components/Navigation/Navigation";
import arrow from "../../images/right-arrow.png"; import arrow from "../../images/right-arrow.png";
import rightArrow from "../../images/arrowRight.png" import rightArrow from "../../images/arrowRight.svg";
import gitImgItem from "../../images/gitItemImg.png" import gitImgItem from "../../images/gitItemImg.svg";
import {apiRequest} from "../../api/request"; import "./summary.scss";
import {Navigate} from "react-router-dom";
import { Navigation } from '../../components/Navigation/Navigation';
import './summary.scss'
export const Summary = () => { export const Summary = () => {
if(localStorage.getItem('role_status') === '18') { if (localStorage.getItem("role_status") === "18") {
return <Navigate to="/profile" replace/> return <Navigate to="/profile" replace />;
} }
const profileInfo = useSelector(getProfileInfo); const profileInfo = useSelector(getProfileInfo);
const [openGit, setOpenGit] = useState(false); const [openGit, setOpenGit] = useState(false);
const [gitInfo, setGitInfo] = useState([]); const [gitInfo, setGitInfo] = useState([]);
useEffect(() => { useEffect(() => {
apiRequest(`/profile/portfolio-projects?card_id=${localStorage.getItem('cardId')}`) apiRequest(
.then(responseGit => setGitInfo(responseGit)) `/profile/portfolio-projects?card_id=${localStorage.getItem("cardId")}`
).then((responseGit) => setGitInfo(responseGit));
}, []); }, []);
return ( return (
<div className='summary'> <div className="summary">
<ProfileHeader/> <ProfileHeader />
<Navigation /> <Navigation />
<div className='container'> <div className="container">
<div className='summary__content'> <div className="summary__content">
<ProfileBreadcrumbs links={[ <ProfileBreadcrumbs
{name: 'Главная', link: '/profile'}, links={[
{name: 'Данные и резюме', link: '/profile/summary'} { name: "Главная", link: "/profile" },
]} { name: "Данные и резюме", link: "/profile/summary" },
/> ]}
<h2 className='summary__title'>Ваше резюме {openGit && <span>- Git</span>}</h2> />
{openGit && <div className='summary__back' onClick={() => setOpenGit(false)}> <h2 className="summary__title">
<img src={arrow} alt='arrow'/> Ваше резюме {openGit && <span>- Git</span>}
</h2>
{openGit && (
<div className="summary__back" onClick={() => setOpenGit(false)}>
<img src={arrow} alt="arrow" />
<p>Вернуться</p> <p>Вернуться</p>
</div>}
<div className={openGit ? 'summary__info openGit' : 'summary__info'}>
<div className='summary__person'>
<img src={urlForLocal(profileInfo.photo)} className='summary__avatar' alt='avatar'/>
<p className='summary__name'>{profileInfo.fio}, {profileInfo.specification} разработчик</p>
</div>
{!openGit &&
<button className='summary__git' onClick={() => setOpenGit(true)}>Git</button>
}
</div> </div>
)}
<div className={openGit ? "summary__info openGit" : "summary__info"}>
<div className="summary__person">
<img
src={urlForLocal(profileInfo.photo)}
className="summary__avatar"
alt="avatar"
/>
<p className="summary__name">
{profileInfo.fio}, {profileInfo.specification} разработчик
</p>
</div>
{!openGit && (
<button className="summary__git" onClick={() => setOpenGit(true)}>
Git
</button>
)}
</div> </div>
{!openGit && </div>
<div className='summary__skills skills__section'> {!openGit && (
<div className='summary__sections__head'> <div className="summary__skills skills__section">
<div className="summary__sections__head">
<h3>Основной стек</h3> <h3>Основной стек</h3>
<button>Редактировать раздел</button> <button>Редактировать раздел</button>
</div> </div>
<div className='skills__section__items'> <div className="skills__section__items">
<div className='skills__section__items__wrapper'> <div className="skills__section__items__wrapper">
{profileInfo.skillValues && profileInfo.skillValues.map((skill, index) => {profileInfo.skillValues &&
<span key={skill.id} className='skill_item'>{skill.skill.name} profileInfo.skillValues.map((skill, index) => (
{profileInfo.skillValues.length > index + 1 && ','} <span key={skill.id} className="skill_item">
{skill.skill.name}
{profileInfo.skillValues.length > index + 1 && ","}
</span> </span>
)} ))}
</div> </div>
</div> </div>
</div> </div>
} )}
{profileInfo.vc_text && !openGit && {profileInfo.vc_text && !openGit && (
<div className='summary__experience'> <div className="summary__experience">
<div className='experience__block'> <div className="experience__block">
<div className="summary__sections__head"> <div className="summary__sections__head">
<h3>Описание опыта работы</h3> <h3>Описание опыта работы</h3>
<button>Редактировать раздел</button> <button>Редактировать раздел</button>
</div>
<div className="experience__content" dangerouslySetInnerHTML={{__html:profileInfo.vc_text}}>
</div> </div>
<div
className="experience__content"
dangerouslySetInnerHTML={{ __html: profileInfo.vc_text }}
></div>
</div> </div>
</div> </div>
} )}
{openGit && {openGit && (
<div className='summary__sectionGit'> <div className="summary__sectionGit">
<div className='summary__sections__head'> <div className="summary__sections__head">
<h3>Страница портфолио кода разработчика</h3> <h3>Страница портфолио кода разработчика</h3>
<button>Редактировать раздел</button> <button>Редактировать раздел</button>
</div> </div>
<div className='summary__sectionGitItems'> <div className="summary__sectionGitItems">
{Boolean(gitInfo.length) && gitInfo.map((itemGit) => { {Boolean(gitInfo.length) &&
return <a href={itemGit.link} target="_blank" rel="noreferrer" key={itemGit.id} className='summary__sectionGitItem gitItem'> gitInfo.map((itemGit) => {
<div className='gitItem__info'> return (
<div className='gitItem__info__about'> <a
<img src={gitImgItem} alt='gitImg'/> href={itemGit.link}
<div className='gitItem__info__name'> target="_blank"
<h4>{itemGit.title}</h4> rel="noreferrer"
<p>{itemGit.description}</p> key={itemGit.id}
className="summary__sectionGitItem gitItem"
>
<div className="gitItem__info">
<div className="gitItem__info__about">
<img src={gitImgItem} alt="gitImg" />
<div className="gitItem__info__name">
<h4>{itemGit.title}</h4>
<p>{itemGit.description}</p>
</div>
</div>
<div className="gitItem__info__specification">
<span className="gitItem__lineSkill" />
<p>{itemGit.main_stack}</p>
</div>
</div> </div>
</div> <a
<div className='gitItem__info__specification'> className="gitItem__link"
<span className='gitItem__lineSkill'/> href={itemGit.link}
<p>{itemGit.main_stack}</p> target="_blank"
</div> rel="noreferrer"
</div> >
<a className='gitItem__link' href={itemGit.link} target="_blank" rel="noreferrer"> <img src={rightArrow} alt="arrowRight" />
<img src={rightArrow} alt='arrowRight'/> </a>
</a> </a>
</a> );
}) })}
}
</div> </div>
</div> </div>
} )}
</div>
<Footer/>
</div> </div>
) <Footer />
</div>
);
}; };