From 171bc69efd0fc72727081526081cb64951d19ea7 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Mon, 19 Aug 2024 17:34:10 -0400
Subject: [PATCH] Added table pagination

---
 Client/src/Components/BasicTable/index.jsx    | 116 ++++++++++++------
 Client/src/assets/icons/left-arrow-double.svg |   3 +
 .../src/assets/icons/right-arrow-double.svg   |   3 +
 3 files changed, 83 insertions(+), 39 deletions(-)
 create mode 100644 Client/src/assets/icons/left-arrow-double.svg
 create mode 100644 Client/src/assets/icons/right-arrow-double.svg

diff --git a/Client/src/Components/BasicTable/index.jsx b/Client/src/Components/BasicTable/index.jsx
index 76f1c61c7..26caf2afc 100644
--- a/Client/src/Components/BasicTable/index.jsx
+++ b/Client/src/Components/BasicTable/index.jsx
@@ -1,3 +1,5 @@
+import PropTypes from "prop-types";
+import { useState, useEffect } from "react";
 import {
   TableContainer,
   Paper,
@@ -6,14 +8,66 @@ import {
   TableRow,
   TableCell,
   TableBody,
-  Pagination,
-  PaginationItem,
+  TablePagination,
+  Box,
+  IconButton,
 } from "@mui/material";
-import React, { useState, useEffect } from "react";
-import PropTypes from "prop-types";
+import LeftArrowDouble from "../../assets/icons/left-arrow-double.svg?react";
+import RightArrowDouble from "../../assets/icons/right-arrow-double.svg?react";
+import LeftArrow from "../../assets/icons/left-arrow.svg?react";
+import RightArrow from "../../assets/icons/right-arrow.svg?react";
 import "./index.css";
-import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
-import ArrowForwardRoundedIcon from "@mui/icons-material/ArrowForwardRounded";
+
+const TablePaginationActions = (props) => {
+  const { count, page, rowsPerPage, onPageChange } = props;
+  console.log(count);
+
+  const handleFirstPageButtonClick = (event) => {
+    onPageChange(event, 0);
+  };
+  const handleBackButtonClick = (event) => {
+    onPageChange(event, page - 1);
+  };
+  const handleNextButtonClick = (event) => {
+    onPageChange(event, page + 1);
+  };
+  const handleLastPageButtonClick = (event) => {
+    onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
+  };
+
+  return (
+    <Box sx={{ flexShrink: 0, ml: 2.5 }}>
+      <IconButton
+        onClick={handleFirstPageButtonClick}
+        disabled={page === 0}
+        aria-label="first page"
+      >
+        <LeftArrowDouble />
+      </IconButton>
+      <IconButton
+        onClick={handleBackButtonClick}
+        disabled={page === 0}
+        aria-label="previous page"
+      >
+        <LeftArrow />
+      </IconButton>
+      <IconButton
+        onClick={handleNextButtonClick}
+        disabled={page >= Math.ceil(count / rowsPerPage) - 1}
+        aria-label="next page"
+      >
+        <RightArrow />
+      </IconButton>
+      <IconButton
+        onClick={handleLastPageButtonClick}
+        disabled={page >= Math.ceil(count / rowsPerPage) - 1}
+        aria-label="last page"
+      >
+        <RightArrowDouble />
+      </IconButton>
+    </Box>
+  );
+};
 
 /**
  * BasicTable Component
@@ -68,10 +122,11 @@ import ArrowForwardRoundedIcon from "@mui/icons-material/ArrowForwardRounded";
  * <BasicTable data={data} rows={rows} paginated={true} />
  */
 
-const BasicTable = ({ data, paginated, reversed, rowsPerPage = 5 }) => {
+const BasicTable = ({ data, paginated, type, reversed, rows = 5 }) => {
   // Add headers to props validation
 
   const [page, setPage] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(rows);
 
   useEffect(() => {
     setPage(0);
@@ -81,6 +136,11 @@ const BasicTable = ({ data, paginated, reversed, rowsPerPage = 5 }) => {
     setPage(newPage);
   };
 
+  const handleChangeRowsPerPage = (event) => {
+    setRowsPerPage(parseInt(event.target.value, 10));
+    setPage(0);
+  };
+
   let displayData = [];
 
   if (data && data.rows) {
@@ -94,36 +154,6 @@ const BasicTable = ({ data, paginated, reversed, rowsPerPage = 5 }) => {
     return <div>No data</div>;
   }
 
-  let paginationComponent = <></>;
-  if (paginated === true && data.rows.length > rowsPerPage) {
-    paginationComponent = (
-      <Pagination
-        count={Math.ceil(data.rows.length / rowsPerPage)}
-        page={page + 1}
-        onChange={(event, value) => handleChangePage(event, value - 1)}
-        shape="rounded"
-        renderItem={(item) => (
-          <PaginationItem
-            slots={{
-              previous: ArrowBackRoundedIcon,
-              next: ArrowForwardRoundedIcon,
-            }}
-            {...item}
-            sx={{
-              "&:focus": {
-                outline: "none",
-              },
-              "& .MuiTouchRipple-root": {
-                pointerEvents: "none",
-                display: "none",
-              },
-            }}
-          />
-        )}
-      />
-    );
-  }
-
   return (
     <>
       <TableContainer component={Paper}>
@@ -154,8 +184,16 @@ const BasicTable = ({ data, paginated, reversed, rowsPerPage = 5 }) => {
           </TableBody>
         </Table>
       </TableContainer>
-
-      {paginationComponent}
+      <TablePagination
+        component="div"
+        count={data.rows.length}
+        page={page}
+        onPageChange={handleChangePage}
+        rowsPerPage={rowsPerPage}
+        rowsPerPageOptions={[5, 10, 15, 25]}
+        onRowsPerPageChange={handleChangeRowsPerPage}
+        ActionsComponent={TablePaginationActions}
+      />
     </>
   );
 };
diff --git a/Client/src/assets/icons/left-arrow-double.svg b/Client/src/assets/icons/left-arrow-double.svg
new file mode 100644
index 000000000..6001a3ead
--- /dev/null
+++ b/Client/src/assets/icons/left-arrow-double.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 17L13 12L18 7M11 17L6 12L11 7" stroke="#667085" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/Client/src/assets/icons/right-arrow-double.svg b/Client/src/assets/icons/right-arrow-double.svg
new file mode 100644
index 000000000..4235134d7
--- /dev/null
+++ b/Client/src/assets/icons/right-arrow-double.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 17L11 12L6 7M13 17L18 12L13 7" stroke="#667085" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>