Merge pull request 'page_under_construction' (#39) from page_under_construction into main
Reviewed-on: #39
This commit is contained in:
@ -6,6 +6,7 @@ import { useTheme } from "@table-library/react-table-library/theme";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Link, Navigate } from "react-router-dom";
|
||||
|
||||
import { LEVELS, SKILLS } from "@utils/constants";
|
||||
import { urlForLocal } from "@utils/helper";
|
||||
|
||||
import { apiRequest } from "@api/request";
|
||||
@ -17,6 +18,7 @@ import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadc
|
||||
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
|
||||
|
||||
import rightArrow from "assets/icons/arrows/arrowRight.svg";
|
||||
import report from "assets/icons/report.svg";
|
||||
|
||||
// import PartnerPersonCard from "@components/PartnerPersonCard/PartnerPersonCard";
|
||||
// import { useDispatch } from "react-redux";
|
||||
@ -47,6 +49,17 @@ export const PartnerCategories = () => {
|
||||
|
||||
const [search, setSearch] = useState("");
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
name: "Фронтенд",
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
name: "Бэкенд",
|
||||
value: 1
|
||||
}
|
||||
];
|
||||
|
||||
const COLUMNS = [
|
||||
{
|
||||
label: "",
|
||||
@ -59,19 +72,28 @@ export const PartnerCategories = () => {
|
||||
)
|
||||
},
|
||||
{
|
||||
label: "ФИО",
|
||||
renderCell: (item) => <p>{item?.employee.fio}</p>,
|
||||
sort: { sortKey: "NAME" }
|
||||
label: "Данные",
|
||||
renderCell: (item) => (
|
||||
<div className="table__info">
|
||||
<p>{item?.employee.fio}</p>
|
||||
<span>
|
||||
{LEVELS[item?.resume.userCard.level]} /{" "}
|
||||
{SKILLS[item?.resume.userCard.position_id]}
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
// sort: { sortKey: "NAME" }
|
||||
},
|
||||
{
|
||||
label: "Резюме",
|
||||
label: "Участвует в проекте",
|
||||
renderCell: (item) => (
|
||||
<Link className="table__link" to={`/candidate/${item.user_id}`}>
|
||||
Резюме
|
||||
<div className="img__wrapper">
|
||||
<img src={rightArrow} alt="arrow" />
|
||||
</div>
|
||||
</Link>
|
||||
<div className="table__project">
|
||||
{item.resume.userCard.at_project ? (
|
||||
<div>item.resume.userCard.at_project</div>
|
||||
) : (
|
||||
<span>Нет проектов</span>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
@ -81,12 +103,17 @@ export const PartnerCategories = () => {
|
||||
className="table__link"
|
||||
to={`/profile/employees/report/${item.user_id}`}
|
||||
>
|
||||
<img src={report} alt="report" />
|
||||
Подробный отчет
|
||||
<div className="img__wrapper">
|
||||
<img src={rightArrow} alt="arrow" />
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
},
|
||||
{
|
||||
label: <span className="table__action">Действие</span>,
|
||||
renderCell: () => <div className="table__more"></div>
|
||||
}
|
||||
];
|
||||
|
||||
@ -115,9 +142,23 @@ export const PartnerCategories = () => {
|
||||
useEffect(() => {
|
||||
setLoader(true);
|
||||
apiRequest("/project/my-employee").then((el) => {
|
||||
setLoader(false);
|
||||
setNodes(el?.managerEmployees);
|
||||
setInitialNodes(el.managerEmployees);
|
||||
const fetchResumes = async () => {
|
||||
const promises = el.managerEmployees.map(async (manager) => {
|
||||
const resume = await apiRequest(`/resume?userId=${manager.user_id}`);
|
||||
return { ...manager, resume }; // Возвращаем объект с добавленным ключом resume
|
||||
});
|
||||
|
||||
try {
|
||||
const updatedManagers = await Promise.all(promises);
|
||||
setInitialNodes(updatedManagers);
|
||||
setNodes(updatedManagers);
|
||||
setLoader(false);
|
||||
} catch (error) {
|
||||
console.error("Ошибка при получении резюме:", error);
|
||||
}
|
||||
};
|
||||
|
||||
fetchResumes();
|
||||
});
|
||||
}, []);
|
||||
|
||||
@ -266,6 +307,16 @@ export const PartnerCategories = () => {
|
||||
onChange={handleSearch}
|
||||
/>
|
||||
</label>
|
||||
<div className="table__tabs">
|
||||
<div className="table__tab">Все</div>
|
||||
{tabs.map((tab) => {
|
||||
return (
|
||||
<div className="table__tab" key={tab.value}>
|
||||
{tab.name}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<CompactTable
|
||||
columns={COLUMNS}
|
||||
data={data}
|
||||
|
||||
@ -178,10 +178,37 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__tabs {
|
||||
display: flex;
|
||||
margin: 0 auto 30px 18px;
|
||||
padding: 4px 8px;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
background: rgba(240, 242, 245, 1);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
max-width: 45px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-left: 18px;
|
||||
}
|
||||
|
||||
&__info {
|
||||
p {
|
||||
color: rgba(46, 58, 89, 1);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 17.5px;
|
||||
}
|
||||
span {
|
||||
color: rgba(155, 171, 197, 1);
|
||||
font-size: 14px;
|
||||
line-height: 17.5px;
|
||||
}
|
||||
}
|
||||
|
||||
&__link {
|
||||
display: flex;
|
||||
column-gap: 10px;
|
||||
@ -199,11 +226,56 @@
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
width: 14px;
|
||||
width: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__project {
|
||||
color: rgba(46, 58, 89, 1);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 17.5px;
|
||||
}
|
||||
|
||||
&__action {
|
||||
color: rgba(155, 171, 197, 1);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
&__more {
|
||||
position: relative;
|
||||
height: 30px;
|
||||
cursor: pointer;
|
||||
width: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
flex-direction: column;
|
||||
&:before {
|
||||
content: '';
|
||||
display: flex;
|
||||
top: 2px;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background: rgba(155, 171, 197, 1);
|
||||
border-radius: 50px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
display: flex;
|
||||
bottom: 2px;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background: rgba(155, 171, 197, 1);
|
||||
border-radius: 50px;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
&__pagination {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@ -251,6 +323,7 @@
|
||||
}
|
||||
|
||||
table {
|
||||
--data-table-library_grid-template-columns: minmax(0px, 0.5fr) minmax(0px, 1.5fr) minmax(0px, 1fr) minmax(0px, 1fr) minmax(0px, 1fr) !important;
|
||||
th {
|
||||
border-top: 0;
|
||||
border-bottom: 1px solid #EDEDED;
|
||||
|
||||
@ -3,6 +3,8 @@ import React from "react";
|
||||
import { Footer } from "@components/Common/Footer/Footer";
|
||||
import { Navigation } from "@components/Navigation/Navigation";
|
||||
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
|
||||
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
|
||||
import { EmptyBlock } from "@components/EmptyBlock/EmptyBlock";
|
||||
|
||||
import "./payouts.scss";
|
||||
|
||||
@ -11,7 +13,16 @@ export const Payouts = () => {
|
||||
<div className="payouts">
|
||||
<ProfileHeader />
|
||||
<Navigation />
|
||||
<div className="container"></div>
|
||||
<div className="container">
|
||||
<ProfileBreadcrumbs
|
||||
links={[
|
||||
{ name: "Главная", link: "/profile" },
|
||||
{ name: "Выплаты и финансы ", link: "/profile/payouts" },
|
||||
]}
|
||||
/>
|
||||
<h3 className="payouts__title">Выплаты и финансы </h3>
|
||||
<EmptyBlock />
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -9,5 +9,13 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
margin-top: 23px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-weight: 700;
|
||||
font-size: 22px;
|
||||
line-height: 32px;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user