From 7a844827475fb09d6b3a19d2f2f5660f17123ce2 Mon Sep 17 00:00:00 2001
From: Elijah R <elijah@elijahr.dev>
Date: Tue, 9 Apr 2024 20:10:38 -0400
Subject: [PATCH] add pagination buttons to users

---
 src/css/style.css   |  4 ++++
 src/html/index.html | 12 ++++++++----
 src/ts/main.ts      | 17 +++++++++++++++++
 3 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/src/css/style.css b/src/css/style.css
index 64cdb30..2d70dcb 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -1,3 +1,7 @@
 #adminView, #adminLoginForm, #navbarNav {
     display: none;
+}
+
+#userPageControl {
+    display: flex;
 }
\ No newline at end of file
diff --git a/src/html/index.html b/src/html/index.html
index 3aa961c..273cf49 100644
--- a/src/html/index.html
+++ b/src/html/index.html
@@ -90,18 +90,22 @@
                         <tbody id="usersTableBody"></tbody>
                     </table>
                     <div class="row">
-                        <div class="col-3">
-                            <div class="input-group">
+                        <div class="col-3" id="userPageControl">
+                            <span class="input-group me-2">
                                 <span class="input-group-text">Page</span>
                                 <input type="number" class="form-control" id="usersPage" name="page" value="1" min="1" max="1" required/>
                                 <span class="input-group-text">of&nbsp;<span id="usersPageCount">1</span></span>
                                 <button type="submit" class="btn btn-primary">Go</button>
-                            </div>
+                            </span>
+                            <span class="input-group">
+                                <button type="button" class="btn btn-primary" id="usersPrevPage">Previous</button>
+                                <button type="button" class="btn btn-primary" id="usersNextPage">Next</button>
+                            </span>
                         </div>
                         <div class="col-7"><!-- yeah this is lazy whatever --></div>
                         <div class="col-2">
                             <div class="input-group">
-                                <input type="number" class="form-control" id="usersPerPage" name="perPage" value="10" min="1" max="100" required/>
+                                <input type="number" class="form-control" id="usersPerPage" name="perPage" value="10" min="1" required/>
                                 <span class="input-group-text">Per Page</span>
                             </div>
                         </div>
diff --git a/src/ts/main.ts b/src/ts/main.ts
index 6611626..5c48c19 100644
--- a/src/ts/main.ts
+++ b/src/ts/main.ts
@@ -25,6 +25,8 @@ const elements = {
     usersPage: document.getElementById('usersPage') as HTMLInputElement,
     usersPerPage: document.getElementById('usersPerPage') as HTMLInputElement,
     usersPageCount: document.getElementById('usersPageCount') as HTMLSpanElement,
+    usersPrevPage: document.getElementById('usersPrevPage') as HTMLButtonElement,
+    usersNextPage: document.getElementById('usersNextPage') as HTMLButtonElement,
     usersTableBody: document.getElementById('usersTableBody') as HTMLTableSectionElement,
 
     usersNavLink: document.getElementById('usersNavLink') as HTMLAnchorElement,
@@ -105,6 +107,10 @@ elements.searchUsersForm.addEventListener('submit', async e => {
     elements.usersTableBody.innerHTML = "";
     elements.usersPageCount.innerText = data.totalPageCount!.toString(10);
     elements.usersPage.max = data.totalPageCount!.toString(10);
+    if (page == data.totalPageCount) elements.usersNextPage.disabled = true;
+    else elements.usersNextPage.disabled = false;
+    if (page == 1) elements.usersPrevPage.disabled = true;
+    else elements.usersPrevPage.disabled = false;
     data.users?.forEach(user => {
         var row = elements.usersTableBody.insertRow();
         var cell = row.insertCell();
@@ -162,6 +168,16 @@ elements.searchUsersForm.addEventListener('submit', async e => {
     });
     return false;
 });
+elements.usersNextPage.addEventListener('click', async e => {
+    if (parseInt(elements.usersPage.value) >= parseInt(elements.usersPage.max)) return false;
+    elements.usersPage.value = (parseInt(elements.usersPage.value) + 1).toString(10);
+    elements.searchUsersForm.requestSubmit();
+});
+elements.usersPrevPage.addEventListener('click', async e => {
+    if (parseInt(elements.usersPage.value) <= 1) return false;
+    elements.usersPage.value = (parseInt(elements.usersPage.value) - 1).toString(10);
+    elements.searchUsersForm.requestSubmit();
+});
 
 elements.searchBotsForm.addEventListener('submit', async e => {
     e.preventDefault();
@@ -288,6 +304,7 @@ function loadLoginForm() {
 }
 
 function loadUsersView() {
+    elements.usersPage.value = "1";
     elements.searchUsersForm.requestSubmit();
     elements.usersNavLink.classList.add('active');
     elements.botsNavLink.classList.remove('active');