From 9575ab8457654200dc464ffc5bb8b1fdd5e7707d Mon Sep 17 00:00:00 2001
From: SamTV12345 <40429738+samtv12345@users.noreply.github.com>
Date: Thu, 14 Mar 2024 16:41:48 +0100
Subject: [PATCH] Added better looking pad scroll.

---
 admin/src/index.css         | 32 ++++++++++++++++++++++++++++++++
 admin/src/pages/PadPage.tsx | 30 ++++++++++++++++++------------
 2 files changed, 50 insertions(+), 12 deletions(-)

diff --git a/admin/src/index.css b/admin/src/index.css
index 087de1b1f..7db760d5f 100644
--- a/admin/src/index.css
+++ b/admin/src/index.css
@@ -639,3 +639,35 @@ table tbody tr.active-row {
     font-weight: bold;
     color: #009879;
 }
+
+
+.pad-pagination{
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+    margin-top: 20px;
+}
+
+.pad-pagination button {
+    display: flex;
+    padding: 10px 20px;
+    border-radius: 5px;
+    border: none;
+    color: black;
+    cursor: pointer;
+}
+
+
+.pad-pagination button:disabled {
+    background: transparent;
+    color: lightgrey;
+    cursor: not-allowed;
+}
+
+.pad-pagination span {
+    align-self: center;
+}
+
+.pad-pagination >span {
+    font-size: 20px;
+}
diff --git a/admin/src/pages/PadPage.tsx b/admin/src/pages/PadPage.tsx
index abb934df5..317e5c4f8 100644
--- a/admin/src/pages/PadPage.tsx
+++ b/admin/src/pages/PadPage.tsx
@@ -6,7 +6,7 @@ import {useDebounce} from "../utils/useDebounce.ts";
 import {determineSorting} from "../utils/sorting.ts";
 import * as Dialog from "@radix-ui/react-dialog";
 import {IconButton} from "../components/IconButton.tsx";
-import {Trash2} from "lucide-react";
+import {ArrowLeft, ArrowRight, ChevronLeft, ChevronRight, Trash2} from "lucide-react";
 import {SearchField} from "../components/SearchField.tsx";
 
 export const PadPage = ()=>{
@@ -21,16 +21,16 @@ export const PadPage = ()=>{
     const {t} = useTranslation()
     const [searchTerm, setSearchTerm] = useState<string>('')
     const pads = useStore(state=>state.pads)
+    const [currentPage, setCurrentPage] = useState<number>(0)
+    const [deleteDialog, setDeleteDialog] = useState<boolean>(false)
+    const [padToDelete, setPadToDelete] = useState<string>('')
     const pages = useMemo(()=>{
         if(!pads){
             return [0]
         }
 
-        const totalPages = Math.ceil(pads!.total / searchParams.limit)
-        return Array.from({length: totalPages}, (_, i) => i+1)
+        return Math.ceil(pads!.total / searchParams.limit)
     },[pads, searchParams.limit])
-    const [deleteDialog, setDeleteDialog] = useState<boolean>(false)
-    const [padToDelete, setPadToDelete] = useState<string>('')
 
     useDebounce(()=>{
         setSearchParams({
@@ -158,15 +158,21 @@ export const PadPage = ()=>{
             }
             </tbody>
         </table>
-        <div className="settings-button-bar">
-            {pages.map((page)=>{
-                return <button key={page} onClick={()=>{
+        <div className="settings-button-bar pad-pagination">
+            <button disabled={currentPage == 0} onClick={()=>{
+                setCurrentPage(currentPage-1)
                     setSearchParams({
                         ...searchParams,
-                        offset: (page-1)*searchParams.limit
-                    })
-                }}>{page}</button>
-            })}
+                        offset: (Number(currentPage)-1)*searchParams.limit})
+            }}><ChevronLeft/><span>Previous Page</span></button>
+            <span>{currentPage+1} out of {pages}</span>
+            <button disabled={pages == currentPage+1} onClick={()=>{
+                setCurrentPage(currentPage+1)
+                setSearchParams({
+                    ...searchParams,
+                    offset: (Number(currentPage)-1)*searchParams.limit
+                })
+            }}><span>Next Page</span><ChevronRight/></button>
         </div>
     </div>
 }