Merge pull request #356 from R-Sourabh/#322-dxp-pagination

Implemented: Dxp pagination component(#322)

src/components/DxpPagination.vue

@@ -0,0 +1,68 @@
+<template>
+  <ion-button size="small" fill="clear" color="medium" @click="updateCurrentPage(1)" :disabled="currentPage === 1">
+    <ion-icon slot="icon-only" :icon="playSkipBackOutline" />
+  </ion-button>
+  <ion-button size="small" fill="clear" color="medium" @click="updateCurrentPage(currentPage - 1)" :disabled="currentPage === 1">
+    <ion-icon slot="icon-only" :icon="chevronBackOutline" />
+  </ion-button>
+
+  <ion-button
+    v-for="pageIndex in getDisplayedPageIndexes()"
+    :key="pageIndex"
+    fill="clear"
+    :size="currentPage === pageIndex ? 'default' : 'small'"
+    :color="currentPage === pageIndex ? 'dark' : 'medium'"
+    @click="updateCurrentPage(pageIndex)"
+  >
+    {{ pageIndex }}
+  </ion-button>
+
+  <ion-button size="small" fill="clear" color="medium" @click="updateCurrentPage(currentPage + 1)" :disabled="currentPage === totalPages">
+    <ion-icon slot="icon-only" :icon="chevronForwardOutline" />
+  </ion-button>
+  <ion-button size="small" fill="clear" color="medium" @click="updateCurrentPage(totalPages)" :disabled="currentPage === totalPages">
+    <ion-icon slot="icon-only" :icon="playSkipForwardOutline" />
+  </ion-button>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, defineProps, defineEmits } from 'vue';
+import { IonButton, IonIcon } from '@ionic/vue';
+import { playSkipBackOutline, chevronBackOutline, chevronForwardOutline, playSkipForwardOutline } from 'ionicons/icons';
+
+const props = defineProps({
+  itemsPerPage: {
+    type: Number,
+    required: true
+  },
+  totalItems: {
+    type: Number,
+    required: true
+  }
+});
+const emit = defineEmits(['updatePageIndex']);
+
+const totalPages = computed(() => Math.ceil(props.totalItems / props.itemsPerPage))
+const currentPage = ref(1);
+
+// Function to determine which page numbers to display based on the current page
+function getDisplayedPageIndexes() {
+  const pages = [];
+  const startPage = Math.max(1, currentPage.value - 1);
+  const endPage = Math.min(totalPages.value, currentPage.value + 1);
+  for(let i = startPage; i <= endPage; i++) {
+    pages.push(i);
+  }
+  return pages;
+}
+
+// Changes the current page to the specified page and emits an event to notify the parent component to fetch new items.
+function updateCurrentPage(pageIndex: number) {
+  currentPage.value = pageIndex;
+  // Subtracting 1 from the currentPage to calculate the viewIndex, as viewIndex starts from 0.
+  // This ensures that the first set of items is requested with viewIndex = 0 by default from the parent component.
+  // On subsequent page changes, the viewIndex emitted from here is adjusted accordingly to manage API calls efficiently.
+  const viewIndex = currentPage.value - 1;
+  emit('updatePageIndex', viewIndex);
+}
+</script>

src/components/index.ts

@@ -22,6 +22,7 @@ export { default as DxpLanguageSwitcher } from './DxpLanguageSwitcher.vue';
 export { default as DxpLogin } from './DxpLogin.vue';
 export { default as DxpMenuFooterNavigation } from './DxpMenuFooterNavigation.vue';
 export { default as DxpOmsInstanceNavigator } from './DxpOmsInstanceNavigator.vue'
+export { default as DxpPagination } from './DxpPagination.vue'
 export { default as DxpProductIdentifier } from "./DxpProductIdentifier.vue";
 export { default as DxpProductStoreSelector } from "./DxpProductStoreSelector.vue"
 export { default as DxpShopifyImg } from './DxpShopifyImg.vue';

src/index.ts

@@ -3,7 +3,7 @@ declare var process: any;
 import { createPinia } from "pinia";
 import { useProductIdentificationStore } from "./store/productIdentification";
 import { useAuthStore } from "./store/auth";
-import { DxpAppVersionInfo, DxpFacilitySwitcher, DxpGitBookSearch, DxpImage, DxpLanguageSwitcher, DxpLogin, DxpMenuFooterNavigation, DxpOmsInstanceNavigator, DxpProductIdentifier, DxpProductStoreSelector, DxpShopifyImg, DxpTimeZoneSwitcher, DxpUserProfile } from "./components";
+import { DxpAppVersionInfo, DxpFacilitySwitcher, DxpGitBookSearch, DxpImage, DxpLanguageSwitcher, DxpLogin, DxpMenuFooterNavigation, DxpOmsInstanceNavigator, DxpPagination, DxpProductIdentifier, DxpProductStoreSelector, DxpShopifyImg, DxpTimeZoneSwitcher, DxpUserProfile } from "./components";
 import { goToOms, getProductIdentificationValue } from "./utils";
 import { initialiseFirebaseApp } from "./utils/firebase"
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
@@ -76,6 +76,7 @@ export let dxpComponents = {
     app.component('DxpLogin', DxpLogin)
     app.component('DxpMenuFooterNavigation', DxpMenuFooterNavigation)
     app.component('DxpOmsInstanceNavigator', DxpOmsInstanceNavigator)
+    app.component('DxpPagination', DxpPagination)
     app.component('DxpProductIdentifier', DxpProductIdentifier)
     app.component('DxpProductStoreSelector', DxpProductStoreSelector)
     app.component('DxpShopifyImg', DxpShopifyImg)
@@ -138,6 +139,7 @@ export {
   DxpLogin,
   DxpMenuFooterNavigation,
   DxpOmsInstanceNavigator,
+  DxpPagination,
   DxpProductIdentifier,
   DxpShopifyImg,
   DxpTimeZoneSwitcher,