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

import { getTheme } from "@table-library/react-table-library/baseline";
import { CompactTable } from "@table-library/react-table-library/compact";
import { usePagination } from "@table-library/react-table-library/pagination";
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";

import { Footer } from "@components/Common/Footer/Footer";
import { Loader } from "@components/Common/Loader/Loader";
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";
// import rightArrow from "assets/icons/arrows/arrowRight.svg";
// import avatarImg from "assets/images/avatarMok.png";
// import AdminImg from "assets/images/partnerProfile/PersonalAdmin.svg";
// import ArchitectureImg from "assets/images/partnerProfile/PersonalArchitecture.svg";
// import CopyImg from "assets/images/partnerProfile/PersonalCopy.svg";
// import DesignImg from "assets/images/partnerProfile/PersonalDesign.svg";
// import FrontendImg from "assets/images/partnerProfile/PersonalFrontend.svg";
// import ManageImg from "assets/images/partnerProfile/PersonalMng.svg";
// 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";

export const PartnerCategories = () => {
  // const dispatch = useDispatch();
  if (localStorage.getItem("role_status") !== "18") {
    return <Navigate to="/profile" replace />;
  }

  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) => <p>{item?.employee.fio}</p>,
      sort: { sortKey: "NAME" }
    },
    {
      label: "Резюме",
      renderCell: (item) => (
        <Link className="table__link" to={`/candidate/${item.user_id}`}>
          Резюме
          <div className="img__wrapper">
            <img src={rightArrow} alt="arrow" />
          </div>
        </Link>
      )
    },
    {
      label: "Отчетность",
      renderCell: (item) => (
        <Link
          className="table__link"
          to={`/profile/employees/report/${item.user_id}`}
        >
          Подробный отчет
          <div className="img__wrapper">
            <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))
      }
    }
  );

  const pagination = usePagination(data, {
    state: {
      page: 0,
      size: 10
    }
  });

  useEffect(() => {
    setLoader(true);
    apiRequest("/project/my-employee").then((el) => {
      setLoader(false);
      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 разработчики",
  //     link: "/profile/categories/employees",
  //     description:
  //       "Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript",
  //     available: true,
  //     img: BackEndImg
  //   },
  //   {
  //     title: "Frontend разработчики",
  //     link: "/profile/categories/employees",
  //     description:
  //       "Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript",
  //     available: true,
  //     img: FrontendImg
  //   },
  //   {
  //     title: "Архитектура проектов",
  //     link: "/profile/categories/employees",
  //     description: "Потоки данных ER ERP CRM CQRS UML BPMN",
  //     available: true,
  //     img: ArchitectureImg
  //   },
  //   {
  //     title: "Дизайн проектов",
  //     link: "/profile/categories/employees",
  //     description:
  //       "Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript",
  //     available: true,
  //     img: DesignImg
  //   },
  //   {
  //     title: "Тестирование проектов",
  //     link: "/profile/add-request",
  //     description: "SQL Postman TestRail Kibana Ручное тестирование",
  //     available: false,
  //     img: TestImg
  //   },
  //   {
  //     title: "Администрирование проектов",
  //     link: "/profile/add-request",
  //     description: "DevOps ELK Kubernetes Docker Bash Apache Oracle Git",
  //     available: false,
  //     img: AdminImg
  //   },
  //   {
  //     title: "Управление проектом",
  //     link: "/profile/add-request",
  //     description: "Scrum Kanban Agile Miro CustDev",
  //     available: false,
  //     img: ManageImg
  //   },
  //   {
  //     title: "Копирайтинг проектов",
  //     link: "/profile/add-request",
  //     description: "Теги Заголовок H1 Дескриптор Абзац Сценарий",
  //     available: false,
  //     img: CopyImg
  //   },
  //   {
  //     title: "Реклама и SMM",
  //     link: "/profile/add-request",
  //     description:
  //       "Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript",
  //     available: false,
  //     img: SmmImg
  //   }
  // ]);

  // const [mokPersons] = useState([
  //   {
  //     personAvatar: avatarImg,
  //     name: "Макаренко Дмитрий",
  //     qualification: "PHP Backend - разработчик",
  //     level: "Middle",
  //     project: "Админка НВД Консалтинг",
  //     tasks_in_progress: 5,
  //     month_hours: 140,
  //     id: 1
  //   },
  //   {
  //     personAvatar: avatarImg,
  //     name: "Макаренко Дмитрий",
  //     qualification: "PHP Backend - разработчик",
  //     level: "Middle",
  //     project: "Админка НВД Консалтинг",
  //     tasks_in_progress: 5,
  //     month_hours: 140,
  //     id: 2
  //   },
  //   {
  //     personAvatar: avatarImg,
  //     name: "Макаренко Дмитрий",
  //     qualification: "PHP Backend - разработчик",
  //     level: "Middle",
  //     project: "Админка НВД Консалтинг",
  //     tasks_in_progress: 5,
  //     month_hours: 140,
  //     id: 3
  //   }
  // ]);
  return (
    <div className="partner-categories">
      <ProfileHeader />
      <Navigation />
      <div className="container">
        <ProfileBreadcrumbs
          links={[
            { name: "Главная", link: "/profile" },
            { name: "Данные моего персонала", link: "/profile/employees" }
          ]}
        />
        <h2 className="partner-categories__title">Данные персонала</h2>
        {loader ? (
          <Loader style={"green"} height={80} width={80} />
        ) : (
          <div className="partner-categories__items">
            {Boolean(initialNodes.length) ? (
              <>
                <label className="table__search" htmlFor="search">
                  Поиск по имени:
                  <input
                    id="search"
                    type="text"
                    value={search}
                    placeholder="Поиск по сотрудникам"
                    onChange={handleSearch}
                  />
                </label>
                <CompactTable
                  columns={COLUMNS}
                  data={data}
                  theme={theme}
                  sort={sort}
                  pagination={pagination}
                />
                <div className="table__pagination">
                  <button
                    className={
                      pagination.state.page === 0 ? "switch disable" : "switch"
                    }
                    type="button"
                    disabled={pagination.state.page === 0}
                    onClick={() =>
                      pagination.fns.onSetPage(pagination.state.page - 1)
                    }
                  >
                    {"<"}
                  </button>
                  <span className="table__pages">
                    {pagination.state.getPages(data.nodes).map((_, index) => (
                      <button
                        key={index}
                        type="button"
                        className={
                          pagination.state.page === index
                            ? "page page--active "
                            : "page"
                        }
                        onClick={() => pagination.fns.onSetPage(index)}
                      >
                        {index + 1}
                      </button>
                    ))}
                  </span>
                  <button
                    className={
                      pagination.state.page + 1 ===
                      pagination.state.getPages(data.nodes).length
                        ? "switch disable"
                        : "switch"
                    }
                    type="button"
                    disabled={
                      pagination.state.page + 1 ===
                      pagination.state.getPages(data.nodes).length
                    }
                    onClick={() =>
                      pagination.fns.onSetPage(pagination.state.page + 1)
                    }
                  >
                    {">"}
                  </button>
                </div>
              </>
            ) : (
              <div className="partner-categories__empty">
                У вас нет нанятого персонала, разместите вашу <br /> первую
                вакансию на вкладке{" "}
                <Link to={`/profile/requests`}>
                  <b>Мои вакансии</b>
                </Link>
              </div>
            )}
            {/*{personalInfoItems.map((item, index) => {*/}
            {/*  return (*/}
            {/*    <Link*/}
            {/*      to={item.link}*/}
            {/*      key={index}*/}
            {/*      className={*/}
            {/*        item.available*/}
            {/*          ? "partner-categories__item item"*/}
            {/*          : "partner-categories__item item item__disable"*/}
            {/*      }*/}
            {/*      onClick={() => {*/}
            {/*        dispatch(setPartnerEmployees(mokPersons));*/}
            {/*      }}*/}
            {/*    >*/}
            {/*      <div className="item__title">*/}
            {/*        <img src={item.img} alt={item.title} />*/}
            {/*        <h4>{item.title}</h4>*/}
            {/*      </div>*/}
            {/*      <div className="item__info">*/}
            {/*        <p>{item.description}</p>*/}
            {/*        <div className="more">*/}
            {/*          <img src={rightArrow} alt="arrow" />*/}
            {/*        </div>*/}
            {/*      </div>*/}
            {/*      {!item.available && (*/}
            {/*        <div className="item__disable-hover">*/}
            {/*          <p>У вас нет персонала из категории</p>*/}
            {/*          <button>Подобрать</button>*/}
            {/*        </div>*/}
            {/*      )}*/}
            {/*    </Link>*/}
            {/*  );*/}
            {/*})}*/}
          </div>
        )}
      </div>
      <Footer />
    </div>
  );
};