From d45d33d5175e9979bbf312229204796763ad8494 Mon Sep 17 00:00:00 2001
From: R-Sourabh <rsourabh002@gmail.com>
Date: Thu, 16 Jan 2025 14:52:08 +0530
Subject: [PATCH] Created a single function to handle page changes and updated
 the logic of the getDisplayedPageCounts function (#322)

---
 src/components/DxpPagination.vue | 34 ++++++++++----------------------
 1 file changed, 10 insertions(+), 24 deletions(-)

diff --git a/src/components/DxpPagination.vue b/src/components/DxpPagination.vue
index fbf459c..3622057 100644
--- a/src/components/DxpPagination.vue
+++ b/src/components/DxpPagination.vue
@@ -1,14 +1,16 @@
 <template>
-  <ion-button size="small" fill="clear" color="medium" @click="goToFirstPage" :disabled="currentPage === 1">
+  <ion-button size="small" fill="clear" color="medium" @click="changePage(1)" :disabled="currentPage === 1">
     <ion-icon slot="icon-only" :icon="playSkipBackOutline" />
   </ion-button>
-  <ion-button size="small" fill="clear" color="medium" @click="goToPreviousPage" :disabled="currentPage === 1">
+  <ion-button size="small" fill="clear" color="medium" @click="changePage(currentPage - 1)" :disabled="currentPage === 1">
     <ion-icon slot="icon-only" :icon="chevronBackOutline" />
   </ion-button>
 
   <ion-button
     v-for="pageCount in getDisplayedPageCounts()"
-    :key="pageCount" size="small" fill="clear"
+    :key="pageCount"
+    size="small" 
+    fill="clear"
     :color="currentPage === pageCount ? 'dark' : 'medium'"
     :class="{ 'selected-page': currentPage === pageCount }"
     @click="updateCurrentPage(pageCount)"
@@ -16,10 +18,10 @@
     {{ pageCount }}
   </ion-button>
 
-  <ion-button size="small" fill="clear" color="medium" @click="goToNextPage" :disabled="currentPage === totalPages">
+  <ion-button size="small" fill="clear" color="medium" @click="changePage(currentPage + 1)" :disabled="currentPage === totalPages">
     <ion-icon slot="icon-only" :icon="chevronForwardOutline" />
   </ion-button>
-  <ion-button size="small" fill="clear" color="medium" @click="goToLastPage" :disabled="currentPage === totalPages">
+  <ion-button size="small" fill="clear" color="medium" @click="changePage(totalPages)" :disabled="currentPage === totalPages">
     <ion-icon slot="icon-only" :icon="playSkipForwardOutline" />
   </ion-button>
 </template>
@@ -48,8 +50,7 @@ const currentPage = ref(1);
 function getDisplayedPageCounts() {
   const pages = [];
   const startPage = Math.max(1, currentPage.value - 1);
-  const endPage = Math.min(totalPages.value, startPage + 2);
-  
+  const endPage = Math.min(totalPages.value, currentPage.value + 1);
   for(let i = startPage; i <= endPage; i++) {
     pages.push(i);
   }
@@ -58,28 +59,13 @@ function getDisplayedPageCounts() {
 
 // Changes the current page to the specified page and emits an event to notify the parent component to fetch new items.
 function updateCurrentPage(pageCount: number) {
-  if(pageCount < 1 || pageCount > totalPages.value) {
-    return;
-  }
   currentPage.value = pageCount;
   const viewIndex = (currentPage.value - 1);
   emit('updatePageCount', viewIndex);
 }
 
-function goToFirstPage() {
-  updateCurrentPage(1);
-}
-
-function goToPreviousPage() {
-  updateCurrentPage(currentPage.value - 1);
-}
-
-function goToNextPage() {
-  updateCurrentPage(currentPage.value + 1);
-}
-
-function goToLastPage() {
-  updateCurrentPage(totalPages.value);
+function changePage(pageCount: number) {
+  updateCurrentPage(pageCount);
 }
 </script>