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

partner employees

Browse Source
This commit is contained in:
Николай Полтщук
2023-03-23 14:00:34 +03:00
parent ab93a26abf
commit 850b0d1bb6
20 changed files with 322 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/pages/PartnerEmployees/PartnerEmployees.js Normal file
View File

@ -0,0 +1,75 @@
import React from 'react';
import {Link, Navigate} from "react-router-dom";
import {useSelector} from "react-redux";
import {getPartnerEmployees} from "../../redux/outstaffingSlice";
import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"
import {Footer} from "../../components/Footer/Footer";
import imgInfo from "./emplInfo.png"
import rightArrow from "../../images/arrowRight.png"
import "./partnerEmployees.scss"
export const PartnerEmployees = () => {
const partnerEmployees = useSelector(getPartnerEmployees);
if(localStorage.getItem('role_status') !== '18' || !partnerEmployees.length) {
console.log(partnerEmployees.length)
return <Navigate to="/profile/categories" replace/>
}
return(
<div className="partnerEmployees">
<ProfileHeader />
<div className="container">
<ProfileBreadcrumbs links={[
{name: 'Главная', link: '/profile'},
{name: 'Данные моего персонала', link: '/profile/categories'},
{name: 'Backend разработчики', link: '/profile/categories/employees'},
]}
/>
<h2 className="partnerEmployees__title">Backend разработчики</h2>
<div className="partnerEmployees__items">
{partnerEmployees.map((person) => {
return <div className="partnerEmployees__item" key={person.id}>
<div className="partnerEmployees__item__name">
<img src={person.personAvatar} alt="avatar" />
<h4>{person.name}</h4>
</div>
<div className="partnerEmployees__item__info">
<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>
<div className="arrow">
<img src={rightArrow} alt="arrow" />
</div>
</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>
<Footer/>
</div>
)
}

BIN
src/pages/PartnerEmployees/avatarMok.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
src/pages/PartnerEmployees/emplInfo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 596 B

170
src/pages/PartnerEmployees/partnerEmployees.scss Normal file
View File

@ -0,0 +1,170 @@
.partnerEmployees {
background: #F1F1F1;
height: 100%;
min-height: 100vh;
font-family: 'LabGrotesque', sans-serif;
&__title {
font-weight: 500;
font-size: 18px;
line-height: 22px;
color: #000000;
margin-bottom: 22px;
}
&__items {
display: flex;
flex-direction: column;
row-gap: 20px;
}
&__item {
background: #E1FCCF;
border-radius: 12px;
display: flex;
position: relative;
&__name {
background: #FFFFFF;
border-radius: 12px;
padding: 25px 22px 25px;
display: flex;
align-items: center;
max-width: 274px;
width: 100%;
img {
width: 77px;
height: 77px;
}
h4 {
margin-left: 13px;
margin-bottom: 0;
font-weight: 500;
font-size: 16px;
line-height: 26px;
max-width: 96px;
color: #000000;
}
}
&__info {
display: flex;
padding: 15px 50px 14px 16px;
width: 100%;
justify-content: space-between;
&__qualification {
display: flex;
flex-direction: column;
justify-content: space-between;
h5 {
font-weight: 500;
font-size: 18px;
color: #000000;
margin-bottom: 0;
}
span {
color: #6F6F6F;
font-weight: 500;
font-size: 14px;
}
.info_summary {
display: flex;
align-items: center;
p {
font-weight: 400;
font-size: 14px;
line-height: 22px;
color: #000000;
margin: 0 18px 0 10px;
}
.arrow {
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
background: #FFFFFF;
border-radius: 50px;
width: 41px;
height: 41px;
}
}
}
&__project {
.name {
font-weight: 500;
font-size: 18px;
color: #111112;
}
h5 {
margin-bottom: 0;
font-weight: 500;
font-size: 18px;
color: #111112;
}
&__details {
display: flex;
margin-top: 24px;
column-gap: 25px;
.details__item {
display: flex;
align-items: center;
p {
margin-bottom: 0;
color: #6F6F6F;
font-weight: 500;
font-size: 13px;
line-height: 24px;
span {
color: #406128;
font-weight: 700;
text-decoration: underline;
}
}
.count {
display: flex;
align-items: center;
justify-content: center;
margin-left: 8px;
padding: 0 6px;
background: #DDDDDD;
border-radius: 4px;
font-weight: 500;
font-size: 14px;
line-height: 24px;
color: #6F6F6F;
}
}
}
}
}
}
.container {
max-width: 1160px;
margin-top: 23px;
@media (max-width: 570px) {
margin-top: 0;
}
}
footer {
margin-top: 70px;
}
}