guild_front/src/pages/PartnerСategories/PartnerСategories.jsx
2024-04-05 16:11:46 +03:00

374 lines
13 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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>
);
};