table employees

package.json

@@ -5,7 +5,9 @@
   "dependencies": {
     "@ckeditor/ckeditor5-build-classic": "^38.0.1",
     "@ckeditor/ckeditor5-react": "^6.0.0",
+    "@emotion/react": "^11.11.4",
     "@reduxjs/toolkit": "^1.6.0",
+    "@table-library/react-table-library": "^4.1.7",
     "@testing-library/jest-dom": "^5.12.0",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",

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

@@ -1,18 +1,22 @@
 import React, { useEffect, useState } from "react";
-// import { useDispatch } from "react-redux";
-// import { Link } from "react-router-dom";
+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 { useSort } from "@table-library/react-table-library/sort";
 import { Link, Navigate } from "react-router-dom";
+import { urlForLocal } from "@utils/helper";
 
 import { apiRequest } from "@api/request";
 
-// import { setPartnerEmployees } from "@redux/outstaffingSlice";
 import { Footer } from "@components/Common/Footer/Footer";
 import { Loader } from "@components/Common/Loader/Loader";
 import { Navigation } from "@components/Navigation/Navigation";
-import PartnerPersonCard from "@components/PartnerPersonCard/PartnerPersonCard";
 import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
 
+// 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";
@@ -24,7 +28,9 @@ 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();
@@ -32,17 +38,64 @@ export const PartnerCategories = () => {
     return <Navigate to="/profile" replace />;
   }
 
-  const [staff, setStaff] = useState([]);
   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) => item?.employee.fio,
+      sort: { sortKey: "NAME" },
+    },
+    { label: 'Резюме', renderCell: (item) => <Link
+        className="table__link"
+        to={`/profile/employees/report/${item.user_id}`}
+      >
+        Подробный отчет
+        <div>
+          <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)),
+      },
+    }
+  );
 
   useEffect(() => {
     setLoader(true);
     apiRequest("/project/my-employee").then((el) => {
       setLoader(false);
-      setStaff(el?.managerEmployees);
+      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 разработчики",
@@ -161,17 +214,14 @@ export const PartnerCategories = () => {
           <Loader style={"green"} height={80} width={80} />
         ) : (
           <div className="partner-categories__items">
-            {Boolean(staff) ? (
-              staff.map((card) => {
-                return (
-                  <PartnerPersonCard
-                    key={card.id}
-                    name={card.employee.fio}
-                    img={card.employee.avatar}
-                    userId={card.user_id}
-                  />
-                );
-              })
+            {Boolean(initialNodes.length) ? (
+              <>
+                <label className='table__search' htmlFor="search">
+                  Поиск по имени:
+                  <input id="search" type="text" value={search} onChange={handleSearch} />
+                </label>
+                <CompactTable columns={COLUMNS} data={data} theme={theme} sort={sort} />
+              </>
             ) : (
               <div className="partner-categories__empty">
                 У вас нет нанятого персонала, разместите вашу <br /> первую

src/pages/PartnerСategories/partnerСategories.scss

@@ -155,4 +155,26 @@
       margin-top: 0;
     }
   }
+
+  .table {
+    &__search {
+      display: flex;
+      width: 100%;
+      gap: 10px;
+      font-size: 18px;
+      align-items: center;
+    }
+
+     &__avatar {
+       max-width: 45px;
+     }
+
+    &__link {
+      display: flex;
+      column-gap: 10px;
+      color: black;
+      font-size: 16px;
+      align-items: center;
+    }
+  }
 }