From 4fff9d1cb7b42df65d59255a1f0cf4dad85689fa Mon Sep 17 00:00:00 2001 From: Leo Largillet <leo.largillet@gmail.com> Date: Tue, 20 Feb 2024 10:01:32 +0100 Subject: [PATCH] fix(pagination): forbid defaultCurrentPage values below 1 or above total pages --- .../osds-pagination/osds-pagination.e2e.ts | 14 ++++++++++++++ .../components/osds-pagination/osds-pagination.tsx | 9 ++++++++- packages/components/src/pagination/src/index.html | 2 +- 3 files changed, 23 insertions(+), 2 deletions(-) diff --git a/packages/components/src/pagination/src/components/osds-pagination/osds-pagination.e2e.ts b/packages/components/src/pagination/src/components/osds-pagination/osds-pagination.e2e.ts index 6fac64760b..d873f91184 100644 --- a/packages/components/src/pagination/src/components/osds-pagination/osds-pagination.e2e.ts +++ b/packages/components/src/pagination/src/components/osds-pagination/osds-pagination.e2e.ts @@ -124,6 +124,20 @@ describe('e2e:osds-pagination', () => { const buttonList = await page.findAll('osds-pagination >>> li >>> osds-button'); expect(buttonList.length).toBe(9); }); + + it('should not allow for a defaultCurrentPage lower than 1', async() => { + await setup({ attributes: { defaultCurrentPage: -5, totalPages: 5 } }); + + const current = await el.callMethod('getCurrentPage'); + expect(current).toEqual(1); + }); + + it('should not allow for a defaultCurrentPage higher than total number of pages', async() => { + await setup({ attributes: { defaultCurrentPage: 10, totalPages: 5 } }); + + const current = await el.callMethod('getCurrentPage'); + expect(current).toEqual(5); + }); }); describe('should change page if we click', () => { diff --git a/packages/components/src/pagination/src/components/osds-pagination/osds-pagination.tsx b/packages/components/src/pagination/src/components/osds-pagination/osds-pagination.tsx index 9c17831abc..5c3e1783db 100644 --- a/packages/components/src/pagination/src/components/osds-pagination/osds-pagination.tsx +++ b/packages/components/src/pagination/src/components/osds-pagination/osds-pagination.tsx @@ -44,7 +44,6 @@ export class OsdsPagination implements OdsPaginationAttribute, OdsPaginationEven componentWillLoad(): void { this.itemPerPage = ODS_PAGINATION_PER_PAGE_OPTIONS.includes(this.defaultItemsPerPage) && this.defaultItemsPerPage || ODS_PAGINATION_PER_PAGE_MIN; - this.current = this.defaultCurrentPage || this.current; if (this.totalItems) { this.actualTotalPages = this.controller.computeActualTotalPages(this.itemPerPage); @@ -52,6 +51,14 @@ export class OsdsPagination implements OdsPaginationAttribute, OdsPaginationEven this.actualTotalPages = this.totalPages; } + if (this.defaultCurrentPage > this.actualTotalPages) { + this.current = this.actualTotalPages; + } else if (this.defaultCurrentPage < 1) { + this.current = 1; + } else { + this.current = this.defaultCurrentPage || this.current; + } + this.updatePageList(); this.isFirstLoad = false; } diff --git a/packages/components/src/pagination/src/index.html b/packages/components/src/pagination/src/index.html index c114ffcf57..dcde8abe45 100644 --- a/packages/components/src/pagination/src/index.html +++ b/packages/components/src/pagination/src/index.html @@ -99,7 +99,7 @@ <h3>Total items between 10 and 300</h3> <h3>Total items above 300</h3> <div class="row"> - <osds-pagination id="paginationAddLabel" default-current-page=10 total-items=500 default-items-per-page=50> + <osds-pagination id="paginationAddLabel" default-current-page=8 total-items=500 default-items-per-page=50> <span slot="before-total-items">of </span> <span slot="after-total-items"> results</span> </osds-pagination>