From 1f589bf1aa80acf74ac17bce79fb9757a9ae0b8b Mon Sep 17 00:00:00 2001 From: R-Sourabh Date: Wed, 15 Jan 2025 18:14:00 +0530 Subject: [PATCH 1/8] Implemented: Dxp pagination component(#322) --- src/components/DxpPagination.vue | 90 ++++++++++++++++++++++++++++++++ src/components/index.ts | 1 + src/index.ts | 4 +- 3 files changed, 94 insertions(+), 1 deletion(-) create mode 100644 src/components/DxpPagination.vue diff --git a/src/components/DxpPagination.vue b/src/components/DxpPagination.vue new file mode 100644 index 0000000..5f1314f --- /dev/null +++ b/src/components/DxpPagination.vue @@ -0,0 +1,90 @@ + + + + + \ No newline at end of file diff --git a/src/components/index.ts b/src/components/index.ts index 993fe25..cff1386 100644 --- a/src/components/index.ts +++ b/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'; diff --git a/src/index.ts b/src/index.ts index c9c5753..59f1792 100644 --- a/src/index.ts +++ b/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, From cb5f2d467de5712b1ce518177692e8479a45d5f4 Mon Sep 17 00:00:00 2001 From: R-Sourabh Date: Wed, 15 Jan 2025 18:19:03 +0530 Subject: [PATCH 2/8] Update DxpPagination.vue --- src/components/DxpPagination.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/DxpPagination.vue b/src/components/DxpPagination.vue index 5f1314f..aacf863 100644 --- a/src/components/DxpPagination.vue +++ b/src/components/DxpPagination.vue @@ -85,6 +85,6 @@ function goToLastPage() { \ No newline at end of file From a3defdd4f8aeba2bc93737ae88dbde225a7b8f0b Mon Sep 17 00:00:00 2001 From: R-Sourabh Date: Wed, 15 Jan 2025 18:22:58 +0530 Subject: [PATCH 3/8] Update DxpPagination.vue --- src/components/DxpPagination.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/DxpPagination.vue b/src/components/DxpPagination.vue index aacf863..fbf459c 100644 --- a/src/components/DxpPagination.vue +++ b/src/components/DxpPagination.vue @@ -58,7 +58,7 @@ 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) { + if(pageCount < 1 || pageCount > totalPages.value) { return; } currentPage.value = pageCount; From d45d33d5175e9979bbf312229204796763ad8494 Mon Sep 17 00:00:00 2001 From: R-Sourabh Date: Thu, 16 Jan 2025 14:52:08 +0530 Subject: [PATCH 4/8] 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 @@ @@ -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); } From 9533392ae760ba2e9eac47e4186057791c5237a4 Mon Sep 17 00:00:00 2001 From: R-Sourabh Date: Thu, 16 Jan 2025 16:08:22 +0530 Subject: [PATCH 5/8] Improved: replaced 'selected-page' class from page buttons & made page count button size proeprty dynamic(#322) --- src/components/DxpPagination.vue | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/src/components/DxpPagination.vue b/src/components/DxpPagination.vue index 3622057..f2f2fc0 100644 --- a/src/components/DxpPagination.vue +++ b/src/components/DxpPagination.vue @@ -9,10 +9,9 @@ {{ pageCount }} @@ -67,10 +66,4 @@ function updateCurrentPage(pageCount: number) { function changePage(pageCount: number) { updateCurrentPage(pageCount); } - - - \ No newline at end of file + \ No newline at end of file From 9e4ee4d1cefcd514e68fb6162065bd06be8ef2ee Mon Sep 17 00:00:00 2001 From: R-Sourabh Date: Thu, 16 Jan 2025 16:24:53 +0530 Subject: [PATCH 6/8] Improved: replaced the pageCount keyword with pageIndex(#322) --- src/components/DxpPagination.vue | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/DxpPagination.vue b/src/components/DxpPagination.vue index f2f2fc0..fb6f572 100644 --- a/src/components/DxpPagination.vue +++ b/src/components/DxpPagination.vue @@ -7,14 +7,14 @@ - {{ pageCount }} + {{ pageIndex }} @@ -57,13 +57,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) { - currentPage.value = pageCount; +function updateCurrentPage(pageIndex: number) { + currentPage.value = pageIndex; const viewIndex = (currentPage.value - 1); emit('updatePageCount', viewIndex); } -function changePage(pageCount: number) { - updateCurrentPage(pageCount); +function changePage(pageIndex: number) { + updateCurrentPage(pageIndex); } \ No newline at end of file From bb3d270170c9be61e42f2db9997690ffd50bb4d9 Mon Sep 17 00:00:00 2001 From: R-Sourabh Date: Thu, 16 Jan 2025 19:15:50 +0530 Subject: [PATCH 7/8] Improved: Removed the changePage function, which was calling updateCurrentPage, and directly invoked updateCurrentPage from the template(#322) - Renamed the emitter from 'updatePageCount' to 'updatePageIndex' and the function name from 'getDisplayedPageCounts' to 'getDisplayedPageIndexes'. --- src/components/DxpPagination.vue | 25 ++++++++++++------------- 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/src/components/DxpPagination.vue b/src/components/DxpPagination.vue index fb6f572..ca61517 100644 --- a/src/components/DxpPagination.vue +++ b/src/components/DxpPagination.vue @@ -1,13 +1,13 @@ @@ -40,13 +40,13 @@ const props = defineProps({ required: true } }); -const emit = defineEmits(['updatePageCount']); +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 getDisplayedPageCounts() { +function getDisplayedPageIndexs() { const pages = []; const startPage = Math.max(1, currentPage.value - 1); const endPage = Math.min(totalPages.value, currentPage.value + 1); @@ -59,11 +59,10 @@ 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(pageIndex: number) { currentPage.value = pageIndex; - const viewIndex = (currentPage.value - 1); - emit('updatePageCount', viewIndex); -} - -function changePage(pageIndex: number) { - updateCurrentPage(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); } \ No newline at end of file From 8cb357d8503ff85026544c099acc1c35ccb41d25 Mon Sep 17 00:00:00 2001 From: R-Sourabh Date: Fri, 17 Jan 2025 15:58:04 +0530 Subject: [PATCH 8/8] Improved: Fixed the typo in the function name getDisplayedPageIndexes (#322) --- src/components/DxpPagination.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/DxpPagination.vue b/src/components/DxpPagination.vue index ca61517..6cd075b 100644 --- a/src/components/DxpPagination.vue +++ b/src/components/DxpPagination.vue @@ -7,7 +7,7 @@ Math.ceil(props.totalItems / props.itemsPerPag const currentPage = ref(1); // Function to determine which page numbers to display based on the current page -function getDisplayedPageIndexs() { +function getDisplayedPageIndexes() { const pages = []; const startPage = Math.max(1, currentPage.value - 1); const endPage = Math.min(totalPages.value, currentPage.value + 1);