[MNT-22924] Fix slow search results loading, limit number of pages (#7609)

* [MNT-22924] Fix slow search results loading, limit number of pages

* Add unit test

* Changed some of the values
This commit is contained in:
Thomas Hunter
2022-05-11 09:53:05 +01:00
committed by GitHub
parent fd0626391c
commit e844faff79
3 changed files with 36 additions and 3 deletions

View File

@@ -41,20 +41,20 @@
data-automation-id="page-selector"
[attr.aria-label]="'CORE.PAGINATION.ARIA.CURRENT_PAGE' | translate"
[matMenuTriggerFor]="pagesMenu"
*ngIf="pages.length > 1">
*ngIf="lastPage > 1">
<mat-icon>arrow_drop_down</mat-icon>
</button>
<div *ngIf="pagination.totalItems">
<span class="adf-pagination__total-pages">
{{ 'CORE.PAGINATION.TOTAL_PAGES' | translate: { total: pages.length } }}
{{ 'CORE.PAGINATION.TOTAL_PAGES' | translate: { total: lastPage } }}
</span>
</div>
<mat-menu #pagesMenu="matMenu" class="adf-pagination__page-selector">
<button
mat-menu-item
*ngFor="let pageNumber of pages"
*ngFor="let pageNumber of limitedPages"
(click)="onChangePageNumber(pageNumber)">
{{ pageNumber }}
</button>

View File

@@ -373,4 +373,23 @@ describe('PaginationComponent', () => {
expect(component.pages).toEqual([1]);
});
});
describe('many pages', () => {
it('should all the pages be available if equal or less than 100', () => {
component.pagination = new FakePaginationInput(100, 30, 5);
expect(component.limitedPages.length).toBe(100);
expect(component.pages).toEqual(component.limitedPages);
});
it('should only some pages be available if over 100', () => {
component.pagination = new FakePaginationInput(101, 30, 5);
const expectedPages = [1, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30,
31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 101];
console.log(component.pagination.totalItems, component.pagination.skipCount);
expect(component.limitedPages).toEqual(expectedPages);
expect(component.limitedPages).not.toEqual(component.pages);
});
});
});

View File

@@ -214,6 +214,20 @@ export class PaginationComponent implements OnInit, OnDestroy, PaginationCompone
.map((_, index) => (index + 1));
}
get limitedPages(): number[] {
if (this.lastPage <= 100) {
return this.pages;
}
const twentyItems = Array.from(Array(20));
return [
1,
...twentyItems.map((_, i) => this.current - i - 1).reverse(),
this.current,
...twentyItems.map((_, i) => this.current + i + 1),
this.lastPage
].filter((value: number, index: number, array: number[]) => value > 0 && value <= this.lastPage && !array.slice(0, index).includes(value));
}
get itemRangeText(): string {
const rangeString = this.range.join('-');