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,25 @@
+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 { useDispatch } from "react-redux";
-// import { Link } from "react-router-dom";
 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 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";
@@ -32,17 +39,84 @@ 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 +235,24 @@ export const PartnerCategories = () => {
           <Loader style={"green"} height={80} width={80} />
         ) : (
           <div className="partner-categories__items">
-            {Boolean(staff) ? (
+            {Boolean(initialNodes.length) ? (
-              staff.map((card) => {
+              <>
-                return (
+                <label className="table__search" htmlFor="search">
-                  <PartnerPersonCard
+                  Поиск по имени:
-                    key={card.id}
+                  <input
-                    name={card.employee.fio}
+                    id="search"
-                    img={card.employee.avatar}
+                    type="text"
-                    userId={card.user_id}
+                    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;
+    }
+  }
 }