[DURACOM-386] add custom input for page number

Author: Andrea Barbasso

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

@@ -54,18 +54,53 @@
     @if (showBottomPager$ | async) {
       <div>
         @if (showPaginator) {
-          <div class="pagination justify-content-center clearfix bottom">
+          <div class="pagination justify-content-center clearfix bottom flex-wrap gapy-1">
             <ngb-pagination [attr.aria-label]="('pagination-control.page-number-bar' | translate) + paginationOptions.id"
               [boundaryLinks]="paginationOptions.boundaryLinks"
               [collectionSize]="collectionSize"
               [disabled]="paginationOptions.disabled"
               [ellipses]="paginationOptions.ellipses"
-              [maxSize]="(isXs)?5:paginationOptions.maxSize"
+              [maxSize]="(isXs)?(paginationOptions.maxSize/2):paginationOptions.maxSize"
               [page]="(currentPage$|async)"
               (pageChange)="doPageChange($event)"
               [pageSize]="(pageSize$ |async)"
-              [rotate]="paginationOptions.rotate"
+              [rotate]="enablePaginationInput || paginationOptions.rotate"
               [size]="(isXs)?'sm':paginationOptions.size">
+              @if (enablePaginationInput) {
+                <ng-template ngbPaginationPages let-page let-pages="pages">
+                  @for (p of pages; track p) {
+                    <li class="page-item" [ngClass]="{disabled: p === -1}" [attr.data-test]="'page-' + p">
+                      @if (p === -1) {
+                        <a class="page-link" disabled>...</a>
+                      } @else if (p !== -1 && p !== page) {
+                        <button class="page-link"
+                                [attr.aria-label]="'pagination-control.page-number-bar' | translate: {page: p}"
+                                (click)="selectPage(p)">{{p}}</button>
+                      } @else if (p === page) {
+                        <div class="px-1 input-group flex-nowrap h-100">
+                          <input
+                            #input
+                            type="text"
+                            inputmode="numeric"
+                            pattern="[0-9]*"
+                            class="form-control border-info page-input"
+                            id="paginationInput"
+                            [value]="page"
+                            (keyup.enter)="selectPage(input.value)"
+                            (blur)="selectPage(input.value)"
+                            (input)="formatInput($any($event).target)"
+                            aria-label="Page input"
+                            [ngStyle]="{'width': ((pages[pages.length - 1] + '').length + 3) + 'ch'}"
+                          />
+                          <button class="btn btn-outline-info search-button" type="button" (click)="selectPage(input.value)" tabindex="0" aria-label="Go to page">
+                            <i class="fas fa-search"></i>
+                          </button>
+                        </div>
+                      }
+                    </li>
+                  }
+                </ng-template>
+              }
             </ngb-pagination>
           </div>
         }

src/app/shared/pagination/pagination.component.scss

@@ -1,8 +1,29 @@
 :host {
-    .dropdown-toggle::after {
-        display: none;
-    }
-    .dropdown-item {
-        padding-left: 20px;
+  .dropdown-toggle::after {
+    display: none;
+  }
+
+  .dropdown-item {
+    padding-left: 20px;
+  }
+
+  .search-button {
+    border-left: 0;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  div.input-group {
+    @include media-breakpoint-down(xs) {
+      input {
+        padding: 0.34rem 0.5rem 0.28rem;
+        font-size: 0.875rem;
+        height: 100%;
+      }
+      button.search-button {
+        padding: 0.25rem 0.5rem;
+        font-size: 0.875rem;
+      }
     }
+  }
 }

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

@@ -38,10 +38,10 @@ import { FindListOptions } from '../../core/data/find-list-options.model';
 import { PaginationService } from '../../core/pagination/pagination.service';
 import { HostWindowService } from '../host-window.service';
 import { MockActivatedRoute } from '../mocks/active-router.mock';
-import { HostWindowServiceMock } from '../mocks/host-window-service.mock';
 import { RouterMock } from '../mocks/router.mock';
 import { TranslateLoaderMock } from '../mocks/translate-loader.mock';
 import { RSSComponent } from '../rss-feed/rss.component';
+import { HostWindowServiceStub } from '../testing/host-window-service.stub';
 import { createTestComponent } from '../testing/utils.test';
 import { EnumKeysPipe } from '../utils/enum-keys-pipe';
 import { PaginationComponent } from './pagination.component';
@@ -100,7 +100,10 @@ function changePage(fixture: ComponentFixture<any>, idx: number): void {
   const de = fixture.debugElement.query(By.css('.pagination'));
   const buttons = de.nativeElement.querySelectorAll('li');
 
-  buttons[idx].querySelector('a').click();
+  const clickableElement = buttons[idx].querySelector('a') || buttons[idx].querySelector('button');
+  if (clickableElement) {
+    clickableElement.click();
+  }
   fixture.detectChanges();
 }
 
@@ -115,7 +118,7 @@ describe('Pagination component', () => {
   let testFixture: ComponentFixture<TestComponent>;
   let de: DebugElement;
   let html;
-  let hostWindowServiceStub: HostWindowServiceMock;
+  let hostWindowServiceStub: HostWindowServiceStub;
 
   let activatedRouteStub: MockActivatedRoute;
   let routerStub: RouterMock;
@@ -128,6 +131,7 @@ describe('Pagination component', () => {
   const pagination = new PaginationComponentOptions();
   pagination.currentPage = 1;
   pagination.pageSize = 10;
+  pagination.maxSize = 10;
 
   const sort = new SortOptions('score', SortDirection.DESC);
   const findlistOptions = Object.assign(new FindListOptions(), { currentPage: 1, elementsPerPage: 10 });
@@ -139,7 +143,7 @@ describe('Pagination component', () => {
   beforeEach(waitForAsync(() => {
     activatedRouteStub = new MockActivatedRoute();
     routerStub = new RouterMock();
-    hostWindowServiceStub = new HostWindowServiceMock(_initialState.width);
+    hostWindowServiceStub = new HostWindowServiceStub(_initialState.width);
 
     currentPagination = new BehaviorSubject<PaginationComponentOptions>(pagination);
     currentSort = new BehaviorSubject<SortOptions>(sort);
@@ -199,6 +203,7 @@ describe('Pagination component', () => {
                      [paginationOptions]='paginationOptions'
                      [sortOptions]='sortOptions'
                      [collectionSize]='collectionSize'
+                     [enablePaginationInput]="false"
                      (pageChange)='pageChanged($event)'
                      (pageSizeChange)='pageSizeChanged($event)'
                       >
@@ -209,6 +214,9 @@ describe('Pagination component', () => {
       </ds-pagination>`;
       testFixture = createTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
       testComp = testFixture.componentInstance;
+      testComp.paginationOptions.maxSize = 10;
+
+      testFixture.detectChanges();
     });
 
     it('should create Pagination Component', inject([PaginationComponent], (app: PaginationComponent) => {
@@ -330,6 +338,7 @@ describe('Pagination component', () => {
                      (pageChange)='pageChanged($event)'
                      (pageSizeChange)='pageSizeChanged($event)'
                      [showPaginator]='false'
+                     [enablePaginationInput]="false"
                      [objects]='objects'
                      (prev)="goPrev()"
                      (next)="goNext()"
@@ -391,6 +400,95 @@ describe('Pagination component', () => {
     });
   });
 
+  describe('Pagination input field', () => {
+    let fixture: ComponentFixture<PaginationComponent>;
+    let component: PaginationComponent;
+
+    beforeEach(waitForAsync(() => {
+      TestBed.configureTestingModule({
+        imports: [
+          CommonModule,
+          NgbModule,
+          PaginationComponent,
+          EnumKeysPipe,
+          RouterTestingModule,
+          TranslateModule.forRoot({
+            loader: { provide: TranslateLoader, useClass: TranslateLoaderMock },
+          }),
+          StoreModule.forRoot({}, {}),
+        ],
+        providers: [
+          { provide: HostWindowService, useValue: hostWindowServiceStub },
+          { provide: PaginationService, useValue: {
+            getCurrentPagination: () => new BehaviorSubject({ currentPage: 5, pageSize: 10 }),
+            getCurrentSort: () => new BehaviorSubject({ direction: SortDirection.ASC, field: 'name' }),
+            updateRoute: () => {
+              //
+            },
+          } },
+        ],
+        schemas: [CUSTOM_ELEMENTS_SCHEMA],
+      }).compileComponents();
+    }));
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(PaginationComponent);
+      component = fixture.componentInstance;
+      component.enablePaginationInput = true;
+      component.collectionSize = 100;
+      component.paginationOptions = {
+        id: 'test',
+        currentPage: 5,
+        pageSize: 10,
+        pageSizeOptions: [10, 20, 50],
+        directionLinks: true,
+        boundaryLinks: true,
+        ellipses: true,
+        maxSize: 10,
+        rotate: false,
+        size: 'lg',
+        disabled: false,
+      };
+      fixture.detectChanges();
+    });
+
+    it('should render the input field on the active page', () => {
+      fixture.detectChanges();
+      const input = fixture.debugElement.nativeElement.querySelector('input#paginationInput');
+      expect(input).toBeTruthy();
+      expect(input.type).toBe('text');
+    });
+
+    it('should set the input width to match the number of digits of the last page plus 3 (in ch)', () => {
+      fixture.detectChanges();
+      const input = fixture.debugElement.nativeElement.querySelector('input#paginationInput');
+      // 10 pages, so 2 digits + 3 = 5ch
+      expect(input.style.width).toContain('ch');
+      expect(parseInt(input.style.width, 10)).toBeGreaterThanOrEqual(5);
+    });
+
+    it('should call selectPage when clicking the search button', () => {
+      spyOn(component, 'selectPage');
+      fixture.detectChanges();
+      const button = fixture.debugElement.nativeElement.querySelector('button.search-button');
+      const input = fixture.debugElement.nativeElement.querySelector('input#paginationInput');
+      input.value = '3';
+      button.click();
+      expect(component.selectPage).toHaveBeenCalledWith('3');
+    });
+
+    it('should call selectPage when pressing enter in the input', () => {
+      spyOn(component, 'selectPage');
+      fixture.detectChanges();
+      const input = fixture.debugElement.nativeElement.querySelector('input#paginationInput');
+      input.value = '7';
+      const event = new KeyboardEvent('keyup', { key: 'Enter' });
+      input.dispatchEvent(event);
+      fixture.detectChanges();
+      expect(component.selectPage).toHaveBeenCalledWith('7');
+    });
+  });
+
 });
 
 // declare a test component

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

@@ -1,6 +1,7 @@
 import {
   AsyncPipe,
   NgClass,
+  NgStyle,
 } from '@angular/common';
 import {
   ChangeDetectionStrategy,
@@ -77,6 +78,7 @@ interface PaginationDetails {
     NgbPaginationModule,
     NgbTooltipModule,
     NgClass,
+    NgStyle,
     RSSComponent,
     TranslateModule,
   ],
@@ -122,6 +124,11 @@ export class PaginationComponent implements OnChanges, OnDestroy, OnInit {
    */
   @Input() sortConfig: SortOptions;
 
+  /**
+   * Whether or not the pagination should show an input field to select the page number.
+   */
+  @Input() enablePaginationInput = false;
+
   /**
    * An event fired when the page is changed.
    * Event's payload equals to the newly selected page.
@@ -451,13 +458,33 @@ export class PaginationComponent implements OnChanges, OnDestroy, OnInit {
   /**
    * Update page when next or prev button is clicked
    * @param value
+   * @param isPageInsteadOfDelta
    */
-  updatePagination(value: number) {
+  updatePagination(value: number, isPageInsteadOfDelta = false) {
     this.paginationService.getCurrentPagination(this.id, this.paginationOptions).pipe(take(1)).subscribe((currentPaginationOptions) => {
-      this.updateParams({ page: (currentPaginationOptions.currentPage + value) });
+      const page = isPageInsteadOfDelta ? value : currentPaginationOptions.currentPage + value;
+      this.updateParams({ page });
     });
   }
 
+  /**
+   * Select any given page.
+   * @param page
+   */
+  selectPage(page: string) {
+    const pageNumber = parseInt(page, 10);
+    this.pageChange.emit(pageNumber);
+    this.updatePagination(pageNumber, true);
+  }
+
+  /**
+   * Format the input value to only allow numbers
+   * @param input
+   */
+  formatInput(input: HTMLInputElement) {
+    input.value = input.value.replace(/[^0-9]/g, '');
+  }
+
   /**
    * Get the sort options to use for the RSS feed. Defaults to the sort options used for this pagination component
    * so it matches the search/browse context, but also allows more flexibility if, for example a top-level community