From e844faff793dd9499903ccfd450e77c86a946dd5 Mon Sep 17 00:00:00 2001
From: Thomas Hunter <thomas.hunter@alfresco.com>
Date: Wed, 11 May 2022 09:53:05 +0100
Subject: [PATCH] [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
---
 lib/core/pagination/pagination.component.html |  6 +++---
 .../pagination/pagination.component.spec.ts   | 19 +++++++++++++++++++
 lib/core/pagination/pagination.component.ts   | 14 ++++++++++++++
 3 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/lib/core/pagination/pagination.component.html b/lib/core/pagination/pagination.component.html
index c7c2470971..11e852ded2 100644
--- a/lib/core/pagination/pagination.component.html
+++ b/lib/core/pagination/pagination.component.html
@@ -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>
diff --git a/lib/core/pagination/pagination.component.spec.ts b/lib/core/pagination/pagination.component.spec.ts
index 5b2ea01343..c91ad4f5d1 100644
--- a/lib/core/pagination/pagination.component.spec.ts
+++ b/lib/core/pagination/pagination.component.spec.ts
@@ -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);
+        });
+    });
 });
diff --git a/lib/core/pagination/pagination.component.ts b/lib/core/pagination/pagination.component.ts
index dc136c3327..2c93f4a906 100644
--- a/lib/core/pagination/pagination.component.ts
+++ b/lib/core/pagination/pagination.component.ts
@@ -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('-');