[DURACOM-386] fix rotation, focus and rollover

Author: Andrea Barbasso

src/app/shared/pagination/pagination.component.html

@@ -64,7 +64,7 @@
               [page]="(currentPage$|async)"
               (pageChange)="doPageChange($event)"
               [pageSize]="(pageSize$ |async)"
-              [rotate]="paginationOptions.enablePaginationInput || paginationOptions.rotate"
+              [rotate]="paginationOptions.rotate"
               [size]="isXs ? 'sm' : paginationOptions.size">
               @if (paginationOptions.enablePaginationInput) {
                 <ng-template ngbPaginationPages let-page let-pages="pages">
@@ -76,6 +76,7 @@
                                 [dsBtnDisabled]="!paginationOptions.enablePaginationInput"
                                 [ngbPopover]="paginationInputPopover"
                                 [autoClose]="'outside'"
+                                #pop="ngbPopover"
                         >
                           ...
                         </button>
@@ -89,12 +90,11 @@
                               class="form-control border-info page-input"
                               id="paginationInput"
                               [placeholder]="'pagination.page' | translate"
-                              (keyup.enter)="selectPage(input.value)"
-                              (blur)="selectPage(input.value)"
+                              (keyup.enter)="selectPage(input.value, pop)"
                               (input)="formatInput($any($event).target)"
                               aria-label="Page input"
                             />
-                            <button class="btn btn-outline-info search-button" type="button" (click)="selectPage(input.value)" tabindex="0" [attr.aria-label]="'paginator.go-to-page' | translate">
+                            <button class="btn btn-outline-info search-button" type="button" (click)="selectPage(input.value, pop)" tabindex="0" [attr.aria-label]="'paginator.go-to-page' | translate">
                               {{'pagination.go-to-page' | translate}}
                             </button>
                           </span>

src/app/shared/pagination/pagination.component.spec.ts

@@ -66,14 +66,14 @@ function expectPages(fixture: ComponentFixture<any>, pagesDef: string[]): void {
       expect(pages[i].classList.contains('disabled')).toBeTruthy();
       expect(normalizeText(pages[i].textContent)).toEqual(normalizeText(pageDef));
       if (normalizeText(pages[i].textContent) !== '...') {
-        expect(pages[i].querySelector('a').getAttribute('tabindex')).toEqual('-1');
+        expect((pages[i].querySelector('a') || pages[i].querySelector('button')).getAttribute('tabindex')).toEqual('-1');
       }
     } else {
       expect(pages[i].classList.contains('active')).toBeFalsy();
       expect(pages[i].classList.contains('disabled')).toBeFalsy();
       expect(normalizeText(pages[i].textContent)).toEqual(normalizeText(pageDef));
       if (normalizeText(pages[i].textContent) !== '...') {
-        expect(pages[i].querySelector('a').hasAttribute('tabindex')).toBeFalsy();
+        expect((pages[i].querySelector('a') || pages[i].querySelector('button')).hasAttribute('tabindex')).toBeFalsy();
       }
     }
   }
@@ -291,11 +291,15 @@ describe('Pagination component', () => {
 
     it('should call the updateRoute method on the paginationService with the correct params', fakeAsync(() => {
       testComp.collectionSize = 60;
+      testFixture.detectChanges();
 
       changePage(testFixture, 3);
       tick();
       expect(paginationService.updateRoute).toHaveBeenCalledWith('test', Object.assign({ page: 3 }), {},  false);
 
+      currentPagination.next(Object.assign(new PaginationComponentOptions(), pagination, { currentPage: 3 }));
+      testFixture.detectChanges();
+
       changePage(testFixture, 0);
       tick();
       expect(paginationService.updateRoute).toHaveBeenCalledWith('test', Object.assign({ page: 2 }), {},  false);
@@ -482,6 +486,58 @@ describe('Pagination component', () => {
       expect(input).toBeDefined();
       expect(input.nativeElement.disabled).toBeFalse();
     });
+
+    describe('selectPage', () => {
+      // collectionSize (200) / pageSize (10) => 20 pages
+      let paginationServiceStub: any;
+
+      beforeEach(() => {
+        paginationServiceStub = TestBed.inject(PaginationService);
+        spyOn(paginationServiceStub, 'updateRoute').and.callThrough();
+        spyOn(component.pageChange, 'emit');
+        spyOn(component.paginationChange, 'emit');
+      });
+
+      it('should navigate to the requested page when it is within range', () => {
+        component.selectPage('7');
+        expect(paginationServiceStub.updateRoute).toHaveBeenCalledWith('test', { page: 7 }, {}, false);
+        expect(component.pageChange.emit).toHaveBeenCalledWith(7);
+      });
+
+      it('should clamp a page number that is too high to the last page', () => {
+        component.selectPage('999');
+        expect(paginationServiceStub.updateRoute).toHaveBeenCalledWith('test', { page: 20 }, {}, false);
+        expect(component.pageChange.emit).toHaveBeenCalledWith(20);
+      });
+
+      it('should clamp a page number below 1 to the first page', () => {
+        component.selectPage('0');
+        expect(paginationServiceStub.updateRoute).toHaveBeenCalledWith('test', { page: 1 }, {}, false);
+        expect(component.pageChange.emit).toHaveBeenCalledWith(1);
+      });
+
+      it('should ignore non-numeric input', () => {
+        component.selectPage('abc');
+        expect(paginationServiceStub.updateRoute).not.toHaveBeenCalled();
+        expect(component.pageChange.emit).not.toHaveBeenCalled();
+      });
+
+      it('should emit a paginationChange event so the results are reloaded', () => {
+        component.selectPage('3');
+        expect(component.paginationChange.emit).toHaveBeenCalled();
+      });
+
+      it('should not emit a paginationChange event for invalid input', () => {
+        component.selectPage('abc');
+        expect(component.paginationChange.emit).not.toHaveBeenCalled();
+      });
+
+      it('should close the popover when one is provided', () => {
+        const popover = jasmine.createSpyObj('NgbPopover', ['close']);
+        component.selectPage('3', popover);
+        expect(popover.close).toHaveBeenCalled();
+      });
+    });
   });
 
 });

src/app/shared/pagination/pagination.component.ts

@@ -1,7 +1,6 @@
 import {
   AsyncPipe,
   NgClass,
-  NgStyle,
 } from '@angular/common';
 import {
   ChangeDetectionStrategy,
@@ -34,6 +33,7 @@ import {
 import {
   NgbDropdownModule,
   NgbPaginationModule,
+  NgbPopover,
   NgbTooltip,
 } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateModule } from '@ngx-translate/core';
@@ -75,9 +75,9 @@ interface PaginationDetails {
     EnumKeysPipe,
     NgbDropdownModule,
     NgbPaginationModule,
+    NgbPopover,
     NgbTooltip,
     NgClass,
-    NgStyle,
     RSSComponent,
     TranslateModule,
   ],
@@ -463,12 +463,32 @@ export class PaginationComponent implements OnChanges, OnDestroy, OnInit {
 
   /**
    * Select any given page.
+   *
+   * The requested page is clamped to the valid range: values below 1 navigate to the first page,
+   * values above the last page navigate to the last page. This mirrors the behaviour of the
+   * regular page buttons and prevents navigating to an out-of-range page (which would render an
+   * empty result set).
+   *
    * @param page
-   */
-  selectPage(page: string) {
-    const pageNumber = parseInt(page, 10);
-    this.pageChange.emit(pageNumber);
-    this.updatePagination(pageNumber, true);
+   *    The requested page (as entered in the pagination input).
+   * @param popover
+   *    Optional reference to the pagination input popover, which is closed once a page is selected.
+   */
+  selectPage(page: string | number, popover?: NgbPopover) {
+    const pageNumber = parseInt(`${page}`, 10);
+    if (isNaN(pageNumber)) {
+      return;
+    }
+    this.paginationService.getCurrentPagination(this.id, this.paginationOptions).pipe(take(1)).subscribe((currentPaginationOptions) => {
+      const totalPages = Math.max(1, Math.ceil(this.collectionSize / currentPaginationOptions.pageSize));
+      const boundedPage = Math.min(Math.max(pageNumber, 1), totalPages);
+      this.pageChange.emit(boundedPage);
+      this.updateParams({ page: boundedPage });
+      this.emitPaginationChange();
+    });
+    if (hasValue(popover)) {
+      popover.close();
+    }
   }
 
   /**