From 1ad5cd5547ea1e2498900ff9b96bb1758d99205c Mon Sep 17 00:00:00 2001
From: Julian Lobbes <julian.lobbes@protonmail.com>
Date: Mon, 22 May 2023 11:40:38 +0200
Subject: [PATCH] feat(frontend): improve table pagination controls

---
 frontend/src/routes/users/+page.svelte | 48 +++++++++++++++++++++++---
 1 file changed, 43 insertions(+), 5 deletions(-)

diff --git a/frontend/src/routes/users/+page.svelte b/frontend/src/routes/users/+page.svelte
index 6f7cba4..1ac5394 100644
--- a/frontend/src/routes/users/+page.svelte
+++ b/frontend/src/routes/users/+page.svelte
@@ -22,13 +22,41 @@
 
   let currentPage: number;
   let lastPage: number;
-  $: if (totalItemCount) {
-    lastPage = Math.ceil(totalItemCount / currentItemsPerPage) - 1;
-  } else {
-    lastPage = 0;
+  $: lastPage = totalItemCount === null ? 0 : Math.floor(totalItemCount / currentItemsPerPage);
+  $: currentItemsOffset = currentPage * currentItemsPerPage;
+
+  // The <select> field value is not bound directly to 'currentItemsPerPage', because we need to know
+  // its previous value to stay on the right page.
+  let selectedItemsPerPage: number;
+  async function handleItemsPerPageChange() {
+    currentPage = Math.floor(currentItemsOffset / selectedItemsPerPage);
+    currentItemsPerPage = selectedItemsPerPage;
+    await updateTable();
   }
 
-  $: currentItemsOffset = currentPage * currentItemsPerPage;
+  function handleCurrentPageInputFocussed(this: HTMLInputElement) {
+    this.select();
+  }
+
+  $: selectedCurrentPage = typeof currentPage === 'number' ? currentPage + 1 : 1;
+  async function handleCurrentPageInputChanged() {
+    if (selectedCurrentPage === currentPage + 1) {
+      return;
+    } else if (selectedCurrentPage < 1) {
+      // TODO show error message
+      console.warn(`Selected page number ${selectedCurrentPage} is smaller than 1.`);
+      selectedCurrentPage = currentPage + 1;
+      return;
+    } else if (selectedCurrentPage > lastPage + 1) {
+      // TODO show error message
+      console.warn(`Selected page number ${selectedCurrentPage} is greater than ${lastPage + 1}.`);
+      selectedCurrentPage = currentPage + 1;
+      return;
+    }
+
+    currentPage = selectedCurrentPage - 1;
+    await updateTable();
+  }
 
   $: gotoPrevPageDisabled = currentState !== 'finished' || currentPage === 0 || lastPage === 0;
   async function handleGotoPrevPage() {
@@ -181,6 +209,11 @@
     <path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clip-rule="evenodd" />
   </svg>
 </button>
+<input
+  type=number bind:value={selectedCurrentPage} min=0 max={lastPage} disabled={lastPage === 0}
+  on:change={handleCurrentPageInputChanged} on:focus={handleCurrentPageInputFocussed}
+>
+<span>of {lastPage + 1}</span>
 <button on:click={handleGotoNextPage} disabled={gotoNextPageDisabled}>
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
     <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
@@ -192,3 +225,8 @@
     <path fill-rule="evenodd" d="M4.21 14.77a.75.75 0 01.02-1.06L8.168 10 4.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
   </svg>
 </button>
+<select bind:value={selectedItemsPerPage} on:change={handleItemsPerPageChange}>
+  {#each itemsPerPageOptions as option}
+    <option selected={option === currentItemsPerPage} value={option}>{option}</option>
+  {/each}
+</select>