From 0b682d330168f5f3e5934f998ed15e49b443eea8 Mon Sep 17 00:00:00 2001
From: Sofie Hofmann <29145005+sofie29@users.noreply.github.com>
Date: Wed, 12 May 2021 17:14:38 +0200
Subject: [PATCH] TSK-1641: Modify pagination behavior when input is out of
 range

---
 .../pagination/pagination.component.html      |  8 +--
 .../pagination/pagination.component.spec.ts   | 64 +++++++++++++++++++
 .../pagination/pagination.component.ts        | 15 ++++-
 3 files changed, 80 insertions(+), 7 deletions(-)
 create mode 100644 web/src/app/shared/components/pagination/pagination.component.spec.ts

diff --git a/web/src/app/shared/components/pagination/pagination.component.html b/web/src/app/shared/components/pagination/pagination.component.html
index 30e7f8811..451ae9c12 100644
--- a/web/src/app/shared/components/pagination/pagination.component.html
+++ b/web/src/app/shared/components/pagination/pagination.component.html
@@ -1,17 +1,17 @@
 <div class="pagination" #pagination>
-  <mat-paginator class="pagination__mat-paginator" [length]="page?.totalElements" [pageIndex]="pageSelected - 1 "
+  <mat-paginator class="pagination__mat-paginator" [length]="page?.totalElements"
     hidePageSize="true" [pageSize]="page?.size" (page)="changeToPage($event)" [showFirstLastButtons]="true" [ngClass]="
                  {'pagination__mat-paginator--expanded': expanded,
                  'pagination__mat-paginator--collapsed': !expanded }"></mat-paginator>
   <div class="pagination__go-to" *ngIf="expanded">
     <div class="pagination__go-to-label">Page:</div>
     <mat-form-field>
-      <input #inputTypeAhead matInput type="text" [matAutocomplete]="auto" [(ngModel)]="pageSelected" name="accessId"
-        (ngModelChange)="filter(pageSelected)" (focus)="filter(pageSelected)" />
+      <input id="inputTypeAhead" matInput type="text" [matAutocomplete]="auto" [(ngModel)]="pageSelected" name="accessId"
+        (ngModelChange)="filter(pageSelected)" (focus)="filter(pageSelected)" (click)="onSelectText()" />
       <mat-autocomplete #autoComplete autoActiveFirstOption (optionSelected)="goToPage($event.option.value)"
         #auto="matAutocomplete">
         <mat-option *ngFor="let pageNumber of filteredPages" [value]="pageNumber">{{ pageNumber }}</mat-option>
       </mat-autocomplete>
     </mat-form-field>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/web/src/app/shared/components/pagination/pagination.component.spec.ts b/web/src/app/shared/components/pagination/pagination.component.spec.ts
new file mode 100644
index 000000000..05e1056dd
--- /dev/null
+++ b/web/src/app/shared/components/pagination/pagination.component.spec.ts
@@ -0,0 +1,64 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { PaginationComponent } from './pagination.component';
+import { DebugElement } from '@angular/core';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { FormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+describe('PaginationComponent', () => {
+  let fixture: ComponentFixture<PaginationComponent>;
+  let debugElement: DebugElement;
+  let component: PaginationComponent;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        MatPaginatorModule,
+        MatAutocompleteModule,
+        FormsModule,
+        MatFormFieldModule,
+        MatInputModule,
+        BrowserAnimationsModule
+      ],
+      declarations: [PaginationComponent],
+      providers: []
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PaginationComponent);
+    debugElement = fixture.debugElement;
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+
+    component.page = { totalPages: 10 };
+    component.pageNumbers = [];
+    for (let i = 1; i <= component.page.totalPages; i++) {
+      component.pageNumbers.push(i);
+    }
+  }));
+
+  it('should create component', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should suggest page 3 when filter() is called with 3', () => {
+    component.filter(3);
+    expect(component.filteredPages).toEqual(['3']);
+  });
+
+  it('should suggest all pages when input of filter() is out of range', () => {
+    component.filter(11);
+    expect(component.filteredPages).toEqual(component.pageNumbers.map(String));
+    component.filter(-1);
+    expect(component.filteredPages).toEqual(component.pageNumbers.map(String));
+  });
+
+  it('should suggest all pages when input of filter() is not a number', () => {
+    component.filter('abc');
+    expect(component.filteredPages).toEqual(component.pageNumbers.map(String));
+    component.filter('');
+    expect(component.filteredPages).toEqual(component.pageNumbers.map(String));
+  });
+});
diff --git a/web/src/app/shared/components/pagination/pagination.component.ts b/web/src/app/shared/components/pagination/pagination.component.ts
index 4ebec89d5..4139f8c22 100644
--- a/web/src/app/shared/components/pagination/pagination.component.ts
+++ b/web/src/app/shared/components/pagination/pagination.component.ts
@@ -110,8 +110,17 @@ export class PaginationComponent implements OnInit, OnChanges {
     this.changePage.emit(page);
   }
 
-  filter(filterVal) {
-    const filterValue = filterVal.toString();
-    this.filteredPages = this.pageNumbers.map(String).filter((value) => value.includes(filterValue));
+  filter(filterValue) {
+    const pageNumbers = this.pageNumbers.map(String);
+    this.filteredPages = pageNumbers.filter((value) => value.includes(filterValue.toString()));
+    if (this.filteredPages.length === 0) {
+      this.filteredPages = pageNumbers;
+    }
+  }
+
+  onSelectText() {
+    const input = document.getElementById('inputTypeAhead') as HTMLInputElement;
+    input.focus();
+    input.select();
   }
 }