package.json

@@ -5,9 +5,7 @@
   "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,25 +1,18 @@
-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";
@@ -39,84 +32,17 @@ 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);
-      setNodes(el?.managerEmployees);
+      setStaff(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 разработчики",
@@ -235,24 +161,17 @@ export const PartnerCategories = () => {
           <Loader style={"green"} height={80} width={80} />
         ) : (
           <div className="partner-categories__items">
-            {Boolean(initialNodes.length) ? (
+            {Boolean(staff) ? (
-              <>
+              staff.map((card) => {
-                <label className="table__search" htmlFor="search">
+                return (
-                  Поиск по имени:
+                  <PartnerPersonCard
-                  <input
+                    key={card.id}
-                    id="search"
+                    name={card.employee.fio}
-                    type="text"
+                    img={card.employee.avatar}
-                    value={search}
+                    userId={card.user_id}
-                    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,26 +155,4 @@
       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;
-    }
-  }
 }