Merge branch 'main' of https://git.itguild.info/apuc/guild_front

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

@@ -1,5 +1,6 @@
 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";
@@ -101,6 +102,13 @@ export const PartnerCategories = () => {
     }
   );
 
+  const pagination = usePagination(data, {
+    state: {
+      page: 0,
+      size: 5
+    }
+  });
+
   useEffect(() => {
     setLoader(true);
     apiRequest("/project/my-employee").then((el) => {
@@ -259,7 +267,30 @@ export const PartnerCategories = () => {
                   data={data}
                   theme={theme}
                   sort={sort}
+                  pagination={pagination}
                 />
+                <div className="table__pagination">
+                  <span>
+                    Total Pages: {pagination.state.getTotalPages(data.nodes)}
+                  </span>
+
+                  <span className="table__pages">
+                    Page:{" "}
+                    {pagination.state.getPages(data.nodes).map((_, index) => (
+                      <button
+                        key={index}
+                        type="button"
+                        style={{
+                          fontWeight:
+                            pagination.state.page === index ? "bold" : "normal"
+                        }}
+                        onClick={() => pagination.fns.onSetPage(index)}
+                      >
+                        {index + 1}
+                      </button>
+                    ))}
+                  </span>
+                </div>
               </>
             ) : (
               <div className="partner-categories__empty">

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

@@ -176,5 +176,19 @@
       font-size: 16px;
       align-items: center;
     }
+
+    &__pagination {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      font-size: 16px;
+      align-items: center;
+    }
+
+    &__pages {
+      display: flex;
+      column-gap: 5px;
+      align-items: center;
+    }
   }
 }