Pagination improvement temp

src/DataTable/CategoryLookUp.js

@@ -7389,6 +7389,6 @@ var lookup = {
   ENVO_00003895: "Manufactured product/paper product",
 };
 
-export function ontLookup(val) {
+export function onLookup(val) {
   return lookup[val] === undefined ? val : lookup[val];
 }

src/DataTable/Pagination.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+
+export default function Pagination({
+  table,
+  currentPage,
+  pageCount,
+  enteredPageNumber,
+  setEnteredPageNumber,
+  handleKeyDown,
+}) {
+  return (
+    <div className="pagination">
+      <button
+        data-cy="previous-page"
+        className="paginBtn"
+        variant="outline"
+        size="sm"
+        onClick={() => table.previousPage()}
+        disabled={!table.getCanPreviousPage()}
+      >
+        Previous
+      </button>
+      <div className="paginationPageCount">
+        {currentPage < 2 ? null : (
+          <button className="pageBtn" onClick={() => table.firstPage()}>
+            1
+          </button>
+        )}
+        {currentPage < 3 ? null : <p>...</p>}
+        {currentPage > 0 ? (
+          <div
+            className="pageBtn"
+            onClick={() => table.setPageIndex(currentPage - 1)}
+          >
+            {currentPage}
+          </div>
+        ) : null}
+        <div className="pageCurrent">{currentPage + 1}</div>
+        {currentPage + 2 > pageCount ? null : (
+          <>
+            <div
+              className="pageBtn"
+              onClick={() => table.setPageIndex(currentPage + 1)}
+            >
+              {currentPage + 2}
+            </div>
+            {pageCount - currentPage < 4 ? null : <p>...</p>}
+          </>
+        )}
+        {pageCount - currentPage < 3 ? null : (
+          <button className="pageBtn" onClick={() => table.lastPage()}>
+            {pageCount}
+          </button>
+        )}
+      </div>
+      <input
+        value={enteredPageNumber}
+        onChange={(e) => setEnteredPageNumber(e.target.value)}
+        onKeyDown={handleKeyDown}
+        className="pageNumberImput"
+        type="text"
+        placeholder="Page Number"
+      />
+
+      <button
+        data-cy="next-page"
+        className="paginBtn"
+        variant="outline"
+        size="sm"
+        onClick={() => table.nextPage()}
+        disabled={!table.getCanNextPage()}
+      >
+        Next
+      </button>
+    </div>
+  );
+}

src/DataTable/TemplateTable.css

@@ -0,0 +1,70 @@
+.paginationPageCount {
+  /* width: 120px; */
+  display: flex;
+  gap: 12px;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.pagination {
+  margin-top: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+.paginBtn {
+  padding: 0.5rem 1rem;
+  border: none;
+  background: #def4ff;
+  color: #282828;
+  white-space: nowrap;
+  border-radius: 6px;
+  user-select: none;
+}
+
+.paginBtn:hover {
+  background-color: #bfeaff;
+}
+
+.paginBtn:disabled {
+  background-color: #f5f5f5;
+}
+
+.pageBtn {
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 8px;
+  border-radius: 50%;
+  cursor: pointer;
+  user-select: none;
+}
+
+.pageCurrent {
+  background-color: #def4ff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 8px;
+  border-radius: 50%;
+  user-select: none;
+}
+
+.pageBtn:hover {
+  background-color: #f0faff;
+}
+
+.pageNumberImput {
+  width: 82px;
+  font-size: 13px;
+  border-bottom: 1px solid #909090;
+  font-weight: 300;
+  padding: 0 6px;
+}

src/DataTable/TemplateTable.tsx

@@ -10,9 +10,13 @@ import {
 
 import { useEffect, useState } from "react";
 
+import Pagination from "./Pagination";
+
+import "./TemplateTable.css";
+
 import { RowsIcon } from "lucide-react";
 import { useSetIsShosen } from "../store/store";
-import { ontLookup } from "./CategoryLookUp";
+import { onLookup } from "./CategoryLookUp";
 import SortingIcon from "@/IconsComponents/SortingIcon";
 
 const columns = [
@@ -46,7 +50,7 @@ const columns = [
   {
     accessorKey: "PROTOCOL_CATEGORY_CODE",
     header: "Category",
-    cell: (props) => ontLookup(props.getValue()),
+    cell: (props) => onLookup(props.getValue()),
   },
   {
     accessorKey: "timestamp",
@@ -64,6 +68,7 @@ export default function TemplateTable({ data }) {
 
   const [sorting, setSorting] = useState([{ id: "timestamp", desc: true }]);
   const [filtering, setFiltering] = useState("");
+  const [enteredPageNumber, setEnteredPageNumber] = useState("");
 
   const table = useReactTable({
     data,
@@ -94,6 +99,12 @@ export default function TemplateTable({ data }) {
   const pageCount = table.getPageCount();
   const currentPage = table.getState().pagination.pageIndex;
 
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter" && enteredPageNumber - 1 < pageCount) {
+      table.setPageIndex(enteredPageNumber - 1);
+    }
+  };
+
   const setIdShosen = useSetIsShosen();
   useEffect(() => {
     setIdShosen(data && rowSelection ? data[rowSelection]?.uuid : null);
@@ -237,41 +248,15 @@ export default function TemplateTable({ data }) {
           </tbody>
         </table>
       </div>
-      {pageCount > 2 ? (
-        <div className="pagination">
-          <button
-            data-cy="previous-page"
-            className="paginBtn"
-            variant="outline"
-            size="sm"
-            onClick={() => table.previousPage()}
-            disabled={!table.getCanPreviousPage()}
-          >
-            Previous
-          </button>
-          <div className="paginationPageCount">
-            <p>
-              page{" "}
-              <span data-cy="current-page-number" className="pageCurrent">
-                {currentPage + 1}
-              </span>{" "}
-              of{" "}
-              <span data-cy="all-page-number" className="pageCurrent">
-                {pageCount}
-              </span>
-            </p>
-          </div>
-          <button
-            data-cy="next-page"
-            className="paginBtn"
-            variant="outline"
-            size="sm"
-            onClick={() => table.nextPage()}
-            disabled={!table.getCanNextPage()}
-          >
-            Next
-          </button>
-        </div>
+      {pageCount > 1 ? (
+        <Pagination
+          table={table}
+          pageCount={pageCount}
+          currentPage={currentPage}
+          enteredPageNumber={enteredPageNumber}
+          setEnteredPageNumber={setEnteredPageNumber}
+          handleKeyDown={handleKeyDown}
+        />
       ) : null}
       <hr style={{ border: "1px solid #e4e4e4", marginTop: "1rem" }} />
     </div>

src/StartScreenComp/StartScreenComp.css

@@ -134,23 +134,6 @@ th {
   border: none;
 }
 
-.pagination {
-  margin-top: 2rem;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 12px;
-}
-
-.paginBtn {
-  padding: 0.5rem 1rem;
-  border: none;
-  background: #def4ff;
-  color: #282828;
-  white-space: nowrap;
-  border-radius: 6px;
-}
-
 /* tr:nth-child(even) {
   background-color: #f6f6f6;
 } */

src/StartScreenComp/StartScreenComp.tsx

@@ -4,6 +4,8 @@ import { Navigate } from "react-router-dom";
 import MakeCopyDialog from "../DialogComp/MakeCopyDialog";
 import Notification from "../DialogComp/Notification";
 
+import { onLookup } from "../DataTable/CategoryLookUp";
+
 import LogoBar from "../MenuBar/LogoBar";
 import Button from "../ui/Button";
 import config from "../utils/config";
@@ -53,9 +55,16 @@ export default function StartScreenComp({}) {
     cachePolicy: "no-cache",
   });
 
+  const mappedCategoryData =
+    data &&
+    data.template.map((item) => ({
+      ...item,
+      PROTOCOL_CATEGORY_CODE: onLookup(item["PROTOCOL_CATEGORY_CODE"]),
+    }));
+
   const templateData = [];
   data &&
-    data.template.map((item) => {
+    mappedCategoryData.map((item) => {
       if (mode == "Finalized" && item.template_status == "FINALIZED") {
         return templateData.push(item);
       }