table employees
This commit is contained in:
parent
a43db43f42
commit
e251711b4a
@ -1,9 +1,10 @@
|
|||||||
import React, { useEffect, useState } from "react";
|
|
||||||
import { CompactTable } from "@table-library/react-table-library/compact";
|
|
||||||
import { useTheme } from "@table-library/react-table-library/theme";
|
|
||||||
import { getTheme } from "@table-library/react-table-library/baseline";
|
import { getTheme } from "@table-library/react-table-library/baseline";
|
||||||
|
import { CompactTable } from "@table-library/react-table-library/compact";
|
||||||
import { useSort } from "@table-library/react-table-library/sort";
|
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 { Link, Navigate } from "react-router-dom";
|
||||||
|
|
||||||
import { urlForLocal } from "@utils/helper";
|
import { urlForLocal } from "@utils/helper";
|
||||||
|
|
||||||
import { apiRequest } from "@api/request";
|
import { apiRequest } from "@api/request";
|
||||||
@ -14,6 +15,8 @@ import { Navigation } from "@components/Navigation/Navigation";
|
|||||||
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
|
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
|
||||||
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
|
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
|
||||||
|
|
||||||
|
import rightArrow from "assets/icons/arrows/arrowRight.svg";
|
||||||
|
|
||||||
// import PartnerPersonCard from "@components/PartnerPersonCard/PartnerPersonCard";
|
// import PartnerPersonCard from "@components/PartnerPersonCard/PartnerPersonCard";
|
||||||
// import { useDispatch } from "react-redux";
|
// import { useDispatch } from "react-redux";
|
||||||
// import { setPartnerEmployees } from "@redux/outstaffingSlice";
|
// import { setPartnerEmployees } from "@redux/outstaffingSlice";
|
||||||
@ -28,9 +31,7 @@ import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
|
|||||||
// import SmmImg from "assets/images/partnerProfile/PersonalSMM.svg";
|
// import SmmImg from "assets/images/partnerProfile/PersonalSMM.svg";
|
||||||
// import TestImg from "assets/images/partnerProfile/PersonalTesters.svg";
|
// import TestImg from "assets/images/partnerProfile/PersonalTesters.svg";
|
||||||
// import BackEndImg from "assets/images/partnerProfile/personalBackEnd.svg";
|
// import BackEndImg from "assets/images/partnerProfile/personalBackEnd.svg";
|
||||||
|
|
||||||
import "./partnerСategories.scss";
|
import "./partnerСategories.scss";
|
||||||
import rightArrow from "assets/icons/arrows/arrowRight.svg";
|
|
||||||
|
|
||||||
export const PartnerCategories = () => {
|
export const PartnerCategories = () => {
|
||||||
// const dispatch = useDispatch();
|
// const dispatch = useDispatch();
|
||||||
@ -40,20 +41,31 @@ export const PartnerCategories = () => {
|
|||||||
|
|
||||||
const [loader, setLoader] = useState(false);
|
const [loader, setLoader] = useState(false);
|
||||||
const theme = useTheme(getTheme());
|
const theme = useTheme(getTheme());
|
||||||
const [nodes, setNodes] = useState([
|
const [nodes, setNodes] = useState([]);
|
||||||
])
|
const [initialNodes, setInitialNodes] = useState([]);
|
||||||
const [initialNodes, setInitialNodes] = useState([])
|
|
||||||
|
|
||||||
const [search, setSearch] = useState('')
|
const [search, setSearch] = useState("");
|
||||||
|
|
||||||
const COLUMNS = [
|
const COLUMNS = [
|
||||||
{ label: 'Аватар', renderCell: (item) => <img className='table__avatar' src={urlForLocal(item?.employee.avatar)} alt="avatar" /> },
|
|
||||||
{
|
{
|
||||||
label: 'ФИО',
|
label: "Аватар",
|
||||||
renderCell: (item) => item?.employee.fio,
|
renderCell: (item) => (
|
||||||
sort: { sortKey: "NAME" },
|
<img
|
||||||
|
className="table__avatar"
|
||||||
|
src={urlForLocal(item?.employee.avatar)}
|
||||||
|
alt="avatar"
|
||||||
|
/>
|
||||||
|
)
|
||||||
},
|
},
|
||||||
{ label: 'Резюме', renderCell: (item) => <Link
|
{
|
||||||
|
label: "ФИО",
|
||||||
|
renderCell: (item) => item?.employee.fio,
|
||||||
|
sort: { sortKey: "NAME" }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Резюме",
|
||||||
|
renderCell: (item) => (
|
||||||
|
<Link
|
||||||
className="table__link"
|
className="table__link"
|
||||||
to={`/profile/employees/report/${item.user_id}`}
|
to={`/profile/employees/report/${item.user_id}`}
|
||||||
>
|
>
|
||||||
@ -61,7 +73,9 @@ export const PartnerCategories = () => {
|
|||||||
<div>
|
<div>
|
||||||
<img src={rightArrow} alt="arrow" />
|
<img src={rightArrow} alt="arrow" />
|
||||||
</div>
|
</div>
|
||||||
</Link> },
|
</Link>
|
||||||
|
)
|
||||||
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
let data = { nodes };
|
let data = { nodes };
|
||||||
@ -69,12 +83,13 @@ export const PartnerCategories = () => {
|
|||||||
const sort = useSort(
|
const sort = useSort(
|
||||||
data,
|
data,
|
||||||
{
|
{
|
||||||
onChange: onSortChange,
|
onChange: onSortChange
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
sortFns: {
|
sortFns: {
|
||||||
NAME: (array) => array.sort((a, b) => a.employee.fio.localeCompare(b.employee.fio)),
|
NAME: (array) =>
|
||||||
},
|
array.sort((a, b) => a.employee.fio.localeCompare(b.employee.fio))
|
||||||
|
}
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
@ -89,7 +104,13 @@ export const PartnerCategories = () => {
|
|||||||
|
|
||||||
const handleSearch = (event) => {
|
const handleSearch = (event) => {
|
||||||
setSearch(event.target.value);
|
setSearch(event.target.value);
|
||||||
setNodes(initialNodes.filter((item) => item.employee.fio.toLowerCase().includes(event.target.value.toLowerCase())))
|
setNodes(
|
||||||
|
initialNodes.filter((item) =>
|
||||||
|
item.employee.fio
|
||||||
|
.toLowerCase()
|
||||||
|
.includes(event.target.value.toLowerCase())
|
||||||
|
)
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
function onSortChange(action, state) {
|
function onSortChange(action, state) {
|
||||||
@ -216,11 +237,21 @@ export const PartnerCategories = () => {
|
|||||||
<div className="partner-categories__items">
|
<div className="partner-categories__items">
|
||||||
{Boolean(initialNodes.length) ? (
|
{Boolean(initialNodes.length) ? (
|
||||||
<>
|
<>
|
||||||
<label className='table__search' htmlFor="search">
|
<label className="table__search" htmlFor="search">
|
||||||
Поиск по имени:
|
Поиск по имени:
|
||||||
<input id="search" type="text" value={search} onChange={handleSearch} />
|
<input
|
||||||
|
id="search"
|
||||||
|
type="text"
|
||||||
|
value={search}
|
||||||
|
onChange={handleSearch}
|
||||||
|
/>
|
||||||
</label>
|
</label>
|
||||||
<CompactTable columns={COLUMNS} data={data} theme={theme} sort={sort} />
|
<CompactTable
|
||||||
|
columns={COLUMNS}
|
||||||
|
data={data}
|
||||||
|
theme={theme}
|
||||||
|
sort={sort}
|
||||||
|
/>
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<div className="partner-categories__empty">
|
<div className="partner-categories__empty">
|
||||||
|
Loading…
Reference in New Issue
Block a user