table employees

src/pages/PartnerСategories/PartnerСategories.jsx

@@ -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 { CompactTable } from "@table-library/react-table-library/compact";
 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";
@@ -14,6 +15,8 @@ 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";
@@ -28,9 +31,7 @@ import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
 // 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";
-import rightArrow from "assets/icons/arrows/arrowRight.svg";
 
 export const PartnerCategories = () => {
   // const dispatch = useDispatch();
@@ -40,28 +41,41 @@ export const PartnerCategories = () => {
 
   const [loader, setLoader] = useState(false);
   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 = [
-    { 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
+    {
-        className="table__link"
+      label: "ФИО",
-        to={`/profile/employees/report/${item.user_id}`}
+      renderCell: (item) => item?.employee.fio,
-      >
+      sort: { sortKey: "NAME" }
-        Подробный отчет
+    },
-        <div>
+    {
-          <img src={rightArrow} alt="arrow" />
+      label: "Резюме",
-        </div>
+      renderCell: (item) => (
-      </Link> },
+        <Link
+          className="table__link"
+          to={`/profile/employees/report/${item.user_id}`}
+        >
+          Подробный отчет
+          <div>
+            <img src={rightArrow} alt="arrow" />
+          </div>
+        </Link>
+      )
+    }
   ];
 
   let data = { nodes };
@@ -69,12 +83,13 @@ export const PartnerCategories = () => {
   const sort = useSort(
     data,
     {
-      onChange: onSortChange,
+      onChange: onSortChange
     },
     {
       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) => {
     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) {
@@ -216,11 +237,21 @@ export const PartnerCategories = () => {
           <div className="partner-categories__items">
             {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>
-                <CompactTable columns={COLUMNS} data={data} theme={theme} sort={sort} />
+                <CompactTable
+                  columns={COLUMNS}
+                  data={data}
+                  theme={theme}
+                  sort={sort}
+                />
               </>
             ) : (
               <div className="partner-categories__empty">