From 06e24c665e2145d9f81ad41f7c13e6a2726795f9 Mon Sep 17 00:00:00 2001
From: Vitalii Kulyk <vitaliy.kulik2313@gmail.com>
Date: Mon, 7 Apr 2025 08:56:51 +0300
Subject: [PATCH] feat: enhance pagination input handling

---
 .../spa/src/components/ResourceListTable.vue    | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/adminforth/spa/src/components/ResourceListTable.vue b/adminforth/spa/src/components/ResourceListTable.vue
index 793205720..2217efe86 100644
--- a/adminforth/spa/src/components/ResourceListTable.vue
+++ b/adminforth/spa/src/components/ResourceListTable.vue
@@ -227,7 +227,8 @@
           contenteditable="true" 
           class="min-w-10 outline-none inline-block w-auto min-w-10 py-1.5 px-3 text-sm text-center text-gray-700 border border-gray-300 dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800 z-10"
           @keydown="onPageKeydown($event)"
-          @input="page = parseInt($event.target.innerText) || ''"
+          @input="onPageInput($event)"
+          @blur="validatePageInput()"
         >
           {{ pageInput }}
         </div>
@@ -355,6 +356,10 @@ async function onPageKeydown(event) {
     (!['Backspace', 'ArrowRight', 'ArrowLeft'].includes(event.code)
     && isNaN(String.fromCharCode(event.keyCode)))) {
     event.preventDefault();
+    if (event.code === 'Enter') {
+      validatePageInput();
+      event.target.blur();
+    }
   }
 }
 
@@ -575,6 +580,16 @@ async function startCustomAction(actionId, row) {
   }
 }
 
+function onPageInput(event) {
+  pageInput.value = event.target.innerText;
+}
+
+function validatePageInput() {
+  const newPage = parseInt(pageInput.value) || 1;
+  const validPage = Math.max(1, Math.min(newPage, totalPages.value));
+  page.value = validPage;
+  pageInput.value = validPage.toString();
+}
 
 </script>