From 2770c2153601095d89f15228229d38756d305f86 Mon Sep 17 00:00:00 2001
From: sergesoroka <sergesoroka@gmail.com>
Date: Tue, 18 Feb 2025 11:03:48 +0200
Subject: [PATCH 1/6] Improved Pagination logic

---
 src/DataTable/TemplateTable.css         | 62 +++++++++++++++++++++++++
 src/DataTable/TemplateTable.tsx         | 41 ++++++++++++----
 src/StartScreenComp/StartScreenComp.css | 17 -------
 3 files changed, 94 insertions(+), 26 deletions(-)
 create mode 100644 src/DataTable/TemplateTable.css

diff --git a/src/DataTable/TemplateTable.css b/src/DataTable/TemplateTable.css
new file mode 100644
index 0000000..258c7b0
--- /dev/null
+++ b/src/DataTable/TemplateTable.css
@@ -0,0 +1,62 @@
+.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;
+}
diff --git a/src/DataTable/TemplateTable.tsx b/src/DataTable/TemplateTable.tsx
index 97607f0..1a0515d 100644
--- a/src/DataTable/TemplateTable.tsx
+++ b/src/DataTable/TemplateTable.tsx
@@ -10,6 +10,8 @@ import {
 
 import { useEffect, useState } from "react";
 
+import "./TemplateTable.css";
+
 import { RowsIcon } from "lucide-react";
 import { useSetIsShosen } from "../store/store";
 import { ontLookup } from "./CategoryLookUp";
@@ -250,16 +252,37 @@ export default function TemplateTable({ data }) {
             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">
+            {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}
-              </span>
-            </p>
+              </button>
+            )}
           </div>
           <button
             data-cy="next-page"
diff --git a/src/StartScreenComp/StartScreenComp.css b/src/StartScreenComp/StartScreenComp.css
index 465ff1e..d5a5742 100644
--- a/src/StartScreenComp/StartScreenComp.css
+++ b/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;
 } */

From 7e43a45e0419ad7b41321087b4efbd53239f293e Mon Sep 17 00:00:00 2001
From: sergesoroka <sergesoroka@gmail.com>
Date: Tue, 18 Feb 2025 13:42:42 +0200
Subject: [PATCH 2/6] Pagination: one can enter page number

---
 src/DataTable/TemplateTable.css |  8 ++++++++
 src/DataTable/TemplateTable.tsx | 18 ++++++++++++++++++
 2 files changed, 26 insertions(+)

diff --git a/src/DataTable/TemplateTable.css b/src/DataTable/TemplateTable.css
index 258c7b0..041e1b8 100644
--- a/src/DataTable/TemplateTable.css
+++ b/src/DataTable/TemplateTable.css
@@ -60,3 +60,11 @@
 .pageBtn:hover {
   background-color: #f0faff;
 }
+
+.pageNumberImput {
+  width: 82px;
+  font-size: 13px;
+  border-bottom: 1px solid #909090;
+  font-weight: 300;
+  padding: 0 6px;
+}
diff --git a/src/DataTable/TemplateTable.tsx b/src/DataTable/TemplateTable.tsx
index 1a0515d..9de8325 100644
--- a/src/DataTable/TemplateTable.tsx
+++ b/src/DataTable/TemplateTable.tsx
@@ -66,6 +66,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,
@@ -96,6 +97,14 @@ export default function TemplateTable({ data }) {
   const pageCount = table.getPageCount();
   const currentPage = table.getState().pagination.pageIndex;
 
+  console.log(table);
+
+  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);
@@ -284,6 +293,15 @@ export default function TemplateTable({ data }) {
               </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"

From e2ccf90fa5dfe2e66679922255440c1bfe343a70 Mon Sep 17 00:00:00 2001
From: sergesoroka <sergesoroka@gmail.com>
Date: Mon, 24 Feb 2025 11:08:35 +0200
Subject: [PATCH 3/6] Fixed: search by human readble category

---
 src/DataTable/CategoryLookUp.js         |  2 +-
 src/DataTable/TemplateTable.tsx         |  6 ++----
 src/StartScreenComp/StartScreenComp.tsx | 12 +++++++++++-
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/DataTable/CategoryLookUp.js b/src/DataTable/CategoryLookUp.js
index 5b321e1..e8a46c9 100644
--- a/src/DataTable/CategoryLookUp.js
+++ b/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];
 }
diff --git a/src/DataTable/TemplateTable.tsx b/src/DataTable/TemplateTable.tsx
index 9de8325..b6d5410 100644
--- a/src/DataTable/TemplateTable.tsx
+++ b/src/DataTable/TemplateTable.tsx
@@ -14,7 +14,7 @@ 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 = [
@@ -48,7 +48,7 @@ const columns = [
   {
     accessorKey: "PROTOCOL_CATEGORY_CODE",
     header: "Category",
-    cell: (props) => ontLookup(props.getValue()),
+    cell: (props) => onLookup(props.getValue()),
   },
   {
     accessorKey: "timestamp",
@@ -97,8 +97,6 @@ export default function TemplateTable({ data }) {
   const pageCount = table.getPageCount();
   const currentPage = table.getState().pagination.pageIndex;
 
-  console.log(table);
-
   const handleKeyDown = (event) => {
     if (event.key === "Enter" && enteredPageNumber - 1 < pageCount) {
       table.setPageIndex(enteredPageNumber - 1);
diff --git a/src/StartScreenComp/StartScreenComp.tsx b/src/StartScreenComp/StartScreenComp.tsx
index b52b90b..7508711 100644
--- a/src/StartScreenComp/StartScreenComp.tsx
+++ b/src/StartScreenComp/StartScreenComp.tsx
@@ -4,6 +4,9 @@ import { Navigate } from "react-router-dom";
 import MakeCopyDialog from "../DialogComp/MakeCopyDialog";
 import Notification from "../DialogComp/Notification";
 
+// import { onLookup } from "../../DataTable/CategotyLookUp.js";
+import { onLookup } from "../DataTable/CategoryLookUp";
+
 import LogoBar from "../MenuBar/LogoBar";
 import Button from "../ui/Button";
 import config from "../utils/config";
@@ -53,9 +56,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);
       }

From 15a300385a978a438a630c93e4af86b6ddce4261 Mon Sep 17 00:00:00 2001
From: sergesoroka <sergesoroka@gmail.com>
Date: Wed, 26 Feb 2025 12:39:18 +0200
Subject: [PATCH 4/6] Fixed: search by human readble category

---
 src/StartScreenComp/StartScreenComp.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/StartScreenComp/StartScreenComp.tsx b/src/StartScreenComp/StartScreenComp.tsx
index 7508711..5981a0b 100644
--- a/src/StartScreenComp/StartScreenComp.tsx
+++ b/src/StartScreenComp/StartScreenComp.tsx
@@ -4,7 +4,6 @@ import { Navigate } from "react-router-dom";
 import MakeCopyDialog from "../DialogComp/MakeCopyDialog";
 import Notification from "../DialogComp/Notification";
 
-// import { onLookup } from "../../DataTable/CategotyLookUp.js";
 import { onLookup } from "../DataTable/CategoryLookUp";
 
 import LogoBar from "../MenuBar/LogoBar";

From a25f396c61a92b2ffe7ed88635603e692e93b255 Mon Sep 17 00:00:00 2001
From: sergesoroka <sergesoroka@gmail.com>
Date: Thu, 27 Mar 2025 09:58:17 +0200
Subject: [PATCH 5/6] Created Pagination Component

---
 src/DataTable/Pagination.tsx    | 77 +++++++++++++++++++++++++++++++++
 src/DataTable/TemplateTable.tsx | 74 +++++--------------------------
 2 files changed, 87 insertions(+), 64 deletions(-)
 create mode 100644 src/DataTable/Pagination.tsx

diff --git a/src/DataTable/Pagination.tsx b/src/DataTable/Pagination.tsx
new file mode 100644
index 0000000..05d5a46
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/DataTable/TemplateTable.tsx b/src/DataTable/TemplateTable.tsx
index b6d5410..38bdef7 100644
--- a/src/DataTable/TemplateTable.tsx
+++ b/src/DataTable/TemplateTable.tsx
@@ -10,6 +10,8 @@ import {
 
 import { useEffect, useState } from "react";
 
+import Pagination from "./Pagination";
+
 import "./TemplateTable.css";
 
 import { RowsIcon } from "lucide-react";
@@ -247,70 +249,14 @@ export default function TemplateTable({ data }) {
         </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">
-            {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>
+        <Pagination
+          table={table}
+          pageCount={pageCount}
+          currentPage={currentPage}
+          enteredPageNumber={enteredPageNumber}
+          setEnteredPageNumber={setEnteredPageNumber}
+          handleKeyDown={handleKeyDown}
+        />
       ) : null}
       <hr style={{ border: "1px solid #e4e4e4", marginTop: "1rem" }} />
     </div>

From 8fc648b8a6962eddc1fa1c01daa251479e5478ec Mon Sep 17 00:00:00 2001
From: sergesoroka <sergesoroka@gmail.com>
Date: Fri, 13 Jun 2025 18:26:07 +0300
Subject: [PATCH 6/6] Fixed: pagination if pageCount > 1

---
 src/DataTable/TemplateTable.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/DataTable/TemplateTable.tsx b/src/DataTable/TemplateTable.tsx
index 38bdef7..2b17db2 100644
--- a/src/DataTable/TemplateTable.tsx
+++ b/src/DataTable/TemplateTable.tsx
@@ -248,7 +248,7 @@ export default function TemplateTable({ data }) {
           </tbody>
         </table>
       </div>
-      {pageCount > 2 ? (
+      {pageCount > 1 ? (
         <Pagination
           table={table}
           pageCount={pageCount}