Created a single function to handle page changes and updated the logi…

…c of the getDisplayedPageCounts function (hotwax#322)
R-Sourabh · Jan 16, 2025 · d45d33d · d45d33d
1 parent a3defdd
commit d45d33d
Showing 1 changed file with 10 additions and 24 deletions.
diff --git a/src/components/DxpPagination.vue b/src/components/DxpPagination.vue
@@ -1,25 +1,27 @@
 <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)"
   >
     {{ 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>