Implemented: Dxp pagination component(#322)

src/components/DxpPagination.vue

@@ -0,0 +1,90 @@
+<template>
+  <ion-button size="small" fill="clear" color="medium" @click="goToFirstPage" :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-icon slot="icon-only" :icon="chevronBackOutline" />
+  </ion-button>
+
+  <ion-button
+    v-for="pageCount in getDisplayedPageCounts()"
+    :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-icon slot="icon-only" :icon="chevronForwardOutline" />
+  </ion-button>
+  <ion-button size="small" fill="clear" color="medium" @click="goToLastPage" :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(['updatePageCount']);
+
+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 getDisplayedPageCounts() {
+  const pages = [];
+  const startPage = Math.max(1, currentPage.value - 1);
+  const endPage = Math.min(totalPages.value, startPage + 2);
+
+  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(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);
+}
+</script>
+
+<style scoped>
+.selected-page {
+  font-size: 15px;
+}
+</style>

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,