Merge pull request 'partner categories table' (#30) from table-pagination into main

Reviewed-on: #30

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

@@ -49,7 +49,7 @@ export const PartnerCategories = () => {
 
   const COLUMNS = [
     {
-      label: "Аватар",
+      label: "",
       renderCell: (item) => (
         <img
           className="table__avatar"
@@ -60,7 +60,7 @@ export const PartnerCategories = () => {
     },
     {
       label: "ФИО",
-      renderCell: (item) => item?.employee.fio,
+      renderCell: (item) => <p>{item?.employee.fio}</p>,
       sort: { sortKey: "NAME" }
     },
     {
@@ -68,18 +68,21 @@ export const PartnerCategories = () => {
       renderCell: (item) => (
         <Link className="table__link" to={`/candidate/${item.user_id}`}>
           Резюме
+          <div className="img__wrapper">
+            <img src={rightArrow} alt="arrow" />
+          </div>
         </Link>
       )
     },
     {
-      label: "Отчет",
+      label: "Отчетность",
       renderCell: (item) => (
         <Link
           className="table__link"
           to={`/profile/employees/report/${item.user_id}`}
         >
           Подробный отчет
-          <div>
+          <div className="img__wrapper">
             <img src={rightArrow} alt="arrow" />
           </div>
         </Link>
@@ -105,7 +108,7 @@ export const PartnerCategories = () => {
   const pagination = usePagination(data, {
     state: {
       page: 0,
-      size: 5
+      size: 10
     }
   });
 
@@ -259,6 +262,7 @@ export const PartnerCategories = () => {
                     id="search"
                     type="text"
                     value={search}
+                    placeholder="Поиск по сотрудникам"
                     onChange={handleSearch}
                   />
                 </label>
@@ -270,26 +274,52 @@ export const PartnerCategories = () => {
                   pagination={pagination}
                 />
                 <div className="table__pagination">
-                  <span>
+                  <button
-                    Total Pages: {pagination.state.getTotalPages(data.nodes)}
+                    className={
-                  </span>
+                      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">
-                    Page:{" "}
                     {pagination.state.getPages(data.nodes).map((_, index) => (
                       <button
                         key={index}
                         type="button"
-                        style={{
+                        className={
-                          fontWeight:
+                          pagination.state.page === index
-                            pagination.state.page === index ? "bold" : "normal"
+                            ? "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>
               </>
             ) : (

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

@@ -13,10 +13,13 @@
 
   &__items {
     display: flex;
-    gap: 10px;
     flex-wrap: wrap;
     justify-content: center;
+    background: white;
+    padding: 20px 0 30px;
+    border-radius: 7px;
   }
+
   &__empty {
     font-size: 18px;
     font-weight: 500;
@@ -161,8 +164,18 @@
       display: flex;
       width: 100%;
       gap: 10px;
-      font-size: 18px;
       align-items: center;
+      padding: 0 18px 35px;
+      margin-bottom: 0;
+      font-size: 16px;
+
+      input {
+        background: #F0F2F5;
+        outline: none;
+        border-radius: 6px;
+        padding: 6px;
+        border: none;
+      }
     }
 
      &__avatar {
@@ -175,20 +188,85 @@
       color: black;
       font-size: 16px;
       align-items: center;
+
+      .img__wrapper {
+        width: 22px;
+        height: 22px;
+        border-radius: 50px;
+        background: #D9D7D7;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        img {
+          width: 14px;
+        }
+      }
     }
 
     &__pagination {
       width: 100%;
       display: flex;
-      justify-content: space-between;
+      font-size: 14px;
-      font-size: 16px;
       align-items: center;
+      padding: 39px 34px 0;
+      column-gap: 12px;
+
+      button {
+        font-size: 14px;
+        width: 32px;
+        border-radius: 5px;
+        height: 32px;
+        color: #2E3A59;
+      }
+
+      .switch {
+        border: none;
+        background: #F0F2F5;
+        font-weight: 600;
+      }
+
+      .disable {
+        opacity: 0.7;
+      }
     }
 
     &__pages {
       display: flex;
-      column-gap: 5px;
+      column-gap: 4px;
-      align-items: center;
+      color: black;
+      background: white;
+
+      .page {
+        border: 1px solid #E8ECF8;
+        background: none;
+
+        &--active {
+          border: none;
+          background: #9DA65D;
+          color: white;
+        }
+      }
+    }
+  }
+
+  table {
+    th {
+      border-top: 0;
+      border-bottom: 1px solid #EDEDED;
+      color: #1458DD;
+      font-size: 14px;
+      font-weight: 700;
+    }
+
+    td {
+      border-top: 0;
+      border-bottom: 1px solid #EDEDED;
+      color: #2E3A59;
+
+      p {
+        font-weight: 500;
+      }
     }
   }
 }