374 lines
13 KiB
JavaScript
374 lines
13 KiB
JavaScript
import { getTheme } from "@table-library/react-table-library/baseline";
|
||
import { CompactTable } from "@table-library/react-table-library/compact";
|
||
import { usePagination } from "@table-library/react-table-library/pagination";
|
||
import { useSort } from "@table-library/react-table-library/sort";
|
||
import { useTheme } from "@table-library/react-table-library/theme";
|
||
import React, { useEffect, useState } from "react";
|
||
import { Link, Navigate } from "react-router-dom";
|
||
|
||
import { urlForLocal } from "@utils/helper";
|
||
|
||
import { apiRequest } from "@api/request";
|
||
|
||
import { Footer } from "@components/Common/Footer/Footer";
|
||
import { Loader } from "@components/Common/Loader/Loader";
|
||
import { Navigation } from "@components/Navigation/Navigation";
|
||
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
|
||
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
|
||
|
||
import rightArrow from "assets/icons/arrows/arrowRight.svg";
|
||
|
||
// import PartnerPersonCard from "@components/PartnerPersonCard/PartnerPersonCard";
|
||
// import { useDispatch } from "react-redux";
|
||
// import { setPartnerEmployees } from "@redux/outstaffingSlice";
|
||
// import rightArrow from "assets/icons/arrows/arrowRight.svg";
|
||
// import avatarImg from "assets/images/avatarMok.png";
|
||
// import AdminImg from "assets/images/partnerProfile/PersonalAdmin.svg";
|
||
// import ArchitectureImg from "assets/images/partnerProfile/PersonalArchitecture.svg";
|
||
// import CopyImg from "assets/images/partnerProfile/PersonalCopy.svg";
|
||
// import DesignImg from "assets/images/partnerProfile/PersonalDesign.svg";
|
||
// import FrontendImg from "assets/images/partnerProfile/PersonalFrontend.svg";
|
||
// import ManageImg from "assets/images/partnerProfile/PersonalMng.svg";
|
||
// import SmmImg from "assets/images/partnerProfile/PersonalSMM.svg";
|
||
// import TestImg from "assets/images/partnerProfile/PersonalTesters.svg";
|
||
// import BackEndImg from "assets/images/partnerProfile/personalBackEnd.svg";
|
||
import "./partnerСategories.scss";
|
||
|
||
export const PartnerCategories = () => {
|
||
// const dispatch = useDispatch();
|
||
if (localStorage.getItem("role_status") !== "18") {
|
||
return <Navigate to="/profile" replace />;
|
||
}
|
||
|
||
const [loader, setLoader] = useState(false);
|
||
const theme = useTheme(getTheme());
|
||
const [nodes, setNodes] = useState([]);
|
||
const [initialNodes, setInitialNodes] = useState([]);
|
||
|
||
const [search, setSearch] = useState("");
|
||
|
||
const COLUMNS = [
|
||
{
|
||
label: "",
|
||
renderCell: (item) => (
|
||
<img
|
||
className="table__avatar"
|
||
src={urlForLocal(item?.employee.avatar)}
|
||
alt="avatar"
|
||
/>
|
||
)
|
||
},
|
||
{
|
||
label: "ФИО",
|
||
renderCell: (item) => <p>{item?.employee.fio}</p>,
|
||
sort: { sortKey: "NAME" }
|
||
},
|
||
{
|
||
label: "Резюме",
|
||
renderCell: (item) => (
|
||
<Link className="table__link" to={`/candidate/${item.user_id}`}>
|
||
Резюме
|
||
<div className="img__wrapper">
|
||
<img src={rightArrow} alt="arrow" />
|
||
</div>
|
||
</Link>
|
||
)
|
||
},
|
||
{
|
||
label: "Отчетность",
|
||
renderCell: (item) => (
|
||
<Link
|
||
className="table__link"
|
||
to={`/profile/employees/report/${item.user_id}`}
|
||
>
|
||
Подробный отчет
|
||
<div className="img__wrapper">
|
||
<img src={rightArrow} alt="arrow" />
|
||
</div>
|
||
</Link>
|
||
)
|
||
}
|
||
];
|
||
|
||
let data = { nodes };
|
||
|
||
const sort = useSort(
|
||
data,
|
||
{
|
||
onChange: onSortChange
|
||
},
|
||
{
|
||
sortFns: {
|
||
NAME: (array) =>
|
||
array.sort((a, b) => a.employee.fio.localeCompare(b.employee.fio))
|
||
}
|
||
}
|
||
);
|
||
|
||
const pagination = usePagination(data, {
|
||
state: {
|
||
page: 0,
|
||
size: 10
|
||
}
|
||
});
|
||
|
||
useEffect(() => {
|
||
setLoader(true);
|
||
apiRequest("/project/my-employee").then((el) => {
|
||
setLoader(false);
|
||
setNodes(el?.managerEmployees);
|
||
setInitialNodes(el.managerEmployees);
|
||
});
|
||
}, []);
|
||
|
||
const handleSearch = (event) => {
|
||
setSearch(event.target.value);
|
||
setNodes(
|
||
initialNodes.filter((item) =>
|
||
item.employee.fio
|
||
.toLowerCase()
|
||
.includes(event.target.value.toLowerCase())
|
||
)
|
||
);
|
||
};
|
||
|
||
function onSortChange(action, state) {
|
||
console.log(action, state);
|
||
}
|
||
|
||
// const [personalInfoItems] = useState([
|
||
// {
|
||
// title: "Backend разработчики",
|
||
// link: "/profile/categories/employees",
|
||
// description:
|
||
// "Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript",
|
||
// available: true,
|
||
// img: BackEndImg
|
||
// },
|
||
// {
|
||
// title: "Frontend разработчики",
|
||
// link: "/profile/categories/employees",
|
||
// description:
|
||
// "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",
|
||
// available: true,
|
||
// img: ArchitectureImg
|
||
// },
|
||
// {
|
||
// title: "Дизайн проектов",
|
||
// link: "/profile/categories/employees",
|
||
// description:
|
||
// "Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript",
|
||
// available: true,
|
||
// img: DesignImg
|
||
// },
|
||
// {
|
||
// title: "Тестирование проектов",
|
||
// link: "/profile/add-request",
|
||
// description: "SQL Postman TestRail Kibana Ручное тестирование",
|
||
// available: false,
|
||
// img: TestImg
|
||
// },
|
||
// {
|
||
// title: "Администрирование проектов",
|
||
// link: "/profile/add-request",
|
||
// description: "DevOps ELK Kubernetes Docker Bash Apache Oracle Git",
|
||
// available: false,
|
||
// img: AdminImg
|
||
// },
|
||
// {
|
||
// title: "Управление проектом",
|
||
// link: "/profile/add-request",
|
||
// description: "Scrum Kanban Agile Miro CustDev",
|
||
// available: false,
|
||
// img: ManageImg
|
||
// },
|
||
// {
|
||
// title: "Копирайтинг проектов",
|
||
// link: "/profile/add-request",
|
||
// description: "Теги Заголовок H1 Дескриптор Абзац Сценарий",
|
||
// available: false,
|
||
// img: CopyImg
|
||
// },
|
||
// {
|
||
// title: "Реклама и SMM",
|
||
// link: "/profile/add-request",
|
||
// description:
|
||
// "Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript",
|
||
// available: false,
|
||
// img: SmmImg
|
||
// }
|
||
// ]);
|
||
|
||
// const [mokPersons] = useState([
|
||
// {
|
||
// personAvatar: avatarImg,
|
||
// name: "Макаренко Дмитрий",
|
||
// qualification: "PHP Backend - разработчик",
|
||
// level: "Middle",
|
||
// project: "Админка НВД Консалтинг",
|
||
// tasks_in_progress: 5,
|
||
// month_hours: 140,
|
||
// id: 1
|
||
// },
|
||
// {
|
||
// personAvatar: avatarImg,
|
||
// name: "Макаренко Дмитрий",
|
||
// qualification: "PHP Backend - разработчик",
|
||
// level: "Middle",
|
||
// project: "Админка НВД Консалтинг",
|
||
// tasks_in_progress: 5,
|
||
// month_hours: 140,
|
||
// id: 2
|
||
// },
|
||
// {
|
||
// personAvatar: avatarImg,
|
||
// name: "Макаренко Дмитрий",
|
||
// qualification: "PHP Backend - разработчик",
|
||
// level: "Middle",
|
||
// project: "Админка НВД Консалтинг",
|
||
// tasks_in_progress: 5,
|
||
// month_hours: 140,
|
||
// id: 3
|
||
// }
|
||
// ]);
|
||
return (
|
||
<div className="partner-categories">
|
||
<ProfileHeader />
|
||
<Navigation />
|
||
<div className="container">
|
||
<ProfileBreadcrumbs
|
||
links={[
|
||
{ name: "Главная", link: "/profile" },
|
||
{ name: "Данные моего персонала", link: "/profile/employees" }
|
||
]}
|
||
/>
|
||
<h2 className="partner-categories__title">Данные персонала</h2>
|
||
{loader ? (
|
||
<Loader style={"green"} height={80} width={80} />
|
||
) : (
|
||
<div className="partner-categories__items">
|
||
{Boolean(initialNodes.length) ? (
|
||
<>
|
||
<label className="table__search" htmlFor="search">
|
||
Поиск по имени:
|
||
<input
|
||
id="search"
|
||
type="text"
|
||
value={search}
|
||
placeholder="Поиск по сотрудникам"
|
||
onChange={handleSearch}
|
||
/>
|
||
</label>
|
||
<CompactTable
|
||
columns={COLUMNS}
|
||
data={data}
|
||
theme={theme}
|
||
sort={sort}
|
||
pagination={pagination}
|
||
/>
|
||
<div className="table__pagination">
|
||
<button
|
||
className={
|
||
pagination.state.page === 0 ? "switch disable" : "switch"
|
||
}
|
||
type="button"
|
||
disabled={pagination.state.page === 0}
|
||
onClick={() =>
|
||
pagination.fns.onSetPage(pagination.state.page - 1)
|
||
}
|
||
>
|
||
{"<"}
|
||
</button>
|
||
<span className="table__pages">
|
||
{pagination.state.getPages(data.nodes).map((_, index) => (
|
||
<button
|
||
key={index}
|
||
type="button"
|
||
className={
|
||
pagination.state.page === index
|
||
? "page page--active "
|
||
: "page"
|
||
}
|
||
onClick={() => pagination.fns.onSetPage(index)}
|
||
>
|
||
{index + 1}
|
||
</button>
|
||
))}
|
||
</span>
|
||
<button
|
||
className={
|
||
pagination.state.page + 1 ===
|
||
pagination.state.getPages(data.nodes).length
|
||
? "switch disable"
|
||
: "switch"
|
||
}
|
||
type="button"
|
||
disabled={
|
||
pagination.state.page + 1 ===
|
||
pagination.state.getPages(data.nodes).length
|
||
}
|
||
onClick={() =>
|
||
pagination.fns.onSetPage(pagination.state.page + 1)
|
||
}
|
||
>
|
||
{">"}
|
||
</button>
|
||
</div>
|
||
</>
|
||
) : (
|
||
<div className="partner-categories__empty">
|
||
У вас нет нанятого персонала, разместите вашу <br /> первую
|
||
вакансию на вкладке{" "}
|
||
<Link to={`/profile/requests`}>
|
||
<b>Мои вакансии</b>
|
||
</Link>
|
||
</div>
|
||
)}
|
||
{/*{personalInfoItems.map((item, index) => {*/}
|
||
{/* return (*/}
|
||
{/* <Link*/}
|
||
{/* to={item.link}*/}
|
||
{/* key={index}*/}
|
||
{/* className={*/}
|
||
{/* item.available*/}
|
||
{/* ? "partner-categories__item item"*/}
|
||
{/* : "partner-categories__item item item__disable"*/}
|
||
{/* }*/}
|
||
{/* onClick={() => {*/}
|
||
{/* dispatch(setPartnerEmployees(mokPersons));*/}
|
||
{/* }}*/}
|
||
{/* >*/}
|
||
{/* <div className="item__title">*/}
|
||
{/* <img src={item.img} alt={item.title} />*/}
|
||
{/* <h4>{item.title}</h4>*/}
|
||
{/* </div>*/}
|
||
{/* <div className="item__info">*/}
|
||
{/* <p>{item.description}</p>*/}
|
||
{/* <div className="more">*/}
|
||
{/* <img src={rightArrow} alt="arrow" />*/}
|
||
{/* </div>*/}
|
||
{/* </div>*/}
|
||
{/* {!item.available && (*/}
|
||
{/* <div className="item__disable-hover">*/}
|
||
{/* <p>У вас нет персонала из категории</p>*/}
|
||
{/* <button>Подобрать</button>*/}
|
||
{/* </div>*/}
|
||
{/* )}*/}
|
||
{/* </Link>*/}
|
||
{/* );*/}
|
||
{/*})}*/}
|
||
</div>
|
||
)}
|
||
</div>
|
||
<Footer />
|
||
</div>
|
||
);
|
||
};
|