Save pageSize setting into sessionStorage (#1207)

Add attribute directive to mat-paginator

The selected items per page setting for each issue table is lost 
after navigation to a different page or on refresh.

Caching this setting is more user-friendly because users do 
not need to re-input the same page settings.

Let's save this setting to session storage using an attribute directive.

src/app/core/directives/paginator-local-storage.directive.ts

@@ -0,0 +1,34 @@
+import { Directive, Input, OnInit } from '@angular/core';
+import { MatPaginator, PageEvent } from '@angular/material/paginator';
+
+@Directive({
+  selector: '[paginatorLocalStorage]'
+})
+export class PaginatorLocalStorageDirective implements OnInit {
+  private element: MatPaginator;
+  private key: string;
+
+  @Input() paginatorLocalStorage: string;
+
+  get pageSize() {
+    const cachedPageSize = sessionStorage.getItem(this.key) || this.element.pageSize;
+    return Number(cachedPageSize);
+  }
+
+  set pageSize(num: number) {
+    const pageSizeToCache = String(num);
+    sessionStorage.setItem(this.key, pageSizeToCache);
+  }
+
+  constructor(private el: MatPaginator) {
+    this.element = el;
+  }
+
+  ngOnInit(): void {
+    this.key = this.paginatorLocalStorage + '-PageSize';
+    this.element.pageSize = this.pageSize;
+    this.element.page.subscribe((page: PageEvent) => {
+      this.pageSize = page.pageSize;
+    });
+  }
+}

src/app/phase-bug-reporting/phase-bug-reporting.component.html

@@ -29,5 +29,5 @@ <h1 class="mat-headline" style="margin: 0px">
     </mat-grid-tile>
   </mat-grid-list>
 
-  <app-issue-tables [headers]="this.displayedColumns" [actions]="this.actionButtons"></app-issue-tables>
+  <app-issue-tables table_name="tableBugReporting" [headers]="this.displayedColumns" [actions]="this.actionButtons"></app-issue-tables>
 </div>

src/app/phase-moderation/phase-moderation.component.html

@@ -23,5 +23,5 @@
     </mat-grid-tile>
   </mat-grid-list>
 
-  <app-issue-tables [headers]="this.displayedColumns" [actions]="this.actionButtons"></app-issue-tables>
+  <app-issue-tables table_name="tableModeration" [headers]="this.displayedColumns" [actions]="this.actionButtons"></app-issue-tables>
 </div>

src/app/phase-team-response/issues-faulty/issues-faulty.component.html

@@ -11,5 +11,10 @@
     </mat-grid-tile>
   </mat-grid-list>
 
-  <app-issue-tables [headers]="this.displayedColumns" [actions]="this.actionButtons" [filters]="this.filter"></app-issue-tables>
+  <app-issue-tables
+    table_name="tableTeamResponseFaulty"
+    [headers]="this.displayedColumns"
+    [actions]="this.actionButtons"
+    [filters]="this.filter"
+  ></app-issue-tables>
 </div>

src/app/phase-team-response/issues-pending/issues-pending.component.html

@@ -11,5 +11,10 @@
     </mat-grid-tile>
   </mat-grid-list>
 
-  <app-issue-tables [headers]="this.displayedColumns" [actions]="this.actionButtons" [filters]="this.filter"></app-issue-tables>
+  <app-issue-tables
+    table_name="tableTeamResponsePending"
+    [headers]="this.displayedColumns"
+    [actions]="this.actionButtons"
+    [filters]="this.filter"
+  ></app-issue-tables>
 </div>

src/app/phase-team-response/issues-responded/issues-responded.component.html

@@ -11,5 +11,10 @@
     </mat-grid-tile>
   </mat-grid-list>
 
-  <app-issue-tables [headers]="this.displayedColumns" [actions]="this.actionButtons" [filters]="this.filter"></app-issue-tables>
+  <app-issue-tables
+    table_name="tableTeamResponseResponded"
+    [headers]="this.displayedColumns"
+    [actions]="this.actionButtons"
+    [filters]="this.filter"
+  ></app-issue-tables>
 </div>

src/app/phase-tester-response/issue-accepted/issue-accepted.component.html

@@ -11,5 +11,10 @@
     </mat-grid-tile>
   </mat-grid-list>
 
-  <app-issue-tables [headers]="this.displayedColumns" [actions]="this.actionButtons" [filters]="this.filter"></app-issue-tables>
+  <app-issue-tables
+    table_name="tableTesterResponseAccepted"
+    [headers]="this.displayedColumns"
+    [actions]="this.actionButtons"
+    [filters]="this.filter"
+  ></app-issue-tables>
 </div>

src/app/phase-tester-response/issue-faulty/issue-faulty.component.html

@@ -11,5 +11,10 @@
     </mat-grid-tile>
   </mat-grid-list>
 
-  <app-issue-tables [headers]="this.displayedColumns" [actions]="this.actionButtons" [filters]="this.filter"></app-issue-tables>
+  <app-issue-tables
+    table_name="tableTesterResponseFaulty"
+    [headers]="this.displayedColumns"
+    [actions]="this.actionButtons"
+    [filters]="this.filter"
+  ></app-issue-tables>
 </div>

src/app/phase-tester-response/issue-pending/issue-pending.component.html

@@ -11,5 +11,10 @@
     </mat-grid-tile>
   </mat-grid-list>
 
-  <app-issue-tables [headers]="this.displayedColumns" [actions]="this.actionButtons" [filters]="this.filter"></app-issue-tables>
+  <app-issue-tables
+    table_name="tableTesterResponsePending"
+    [headers]="this.displayedColumns"
+    [actions]="this.actionButtons"
+    [filters]="this.filter"
+  ></app-issue-tables>
 </div>

src/app/phase-tester-response/issue-responded/issue-responded.component.html

@@ -11,5 +11,10 @@
     </mat-grid-tile>
   </mat-grid-list>
 
-  <app-issue-tables [headers]="this.displayedColumns" [actions]="this.actionButtons" [filters]="this.filter"></app-issue-tables>
+  <app-issue-tables
+    table_name="tableTesterResponseResponded"
+    [headers]="this.displayedColumns"
+    [actions]="this.actionButtons"
+    [filters]="this.filter"
+  ></app-issue-tables>
 </div>

src/app/shared/issue-tables/issue-tables.component.html

@@ -262,4 +262,4 @@
 <mat-card *ngIf="this.issues.isLoading$ | async" style="display: flex; justify-content: center; align-items: center">
   <mat-progress-spinner color="primary" mode="indeterminate" diameter="50" strokeWidth="5"></mat-progress-spinner>
 </mat-card>
-<mat-paginator [pageSize]="20" [pageSizeOptions]="[10, 20, 50]"></mat-paginator>
+<mat-paginator [paginatorLocalStorage]="this.table_name" [pageSize]="20" [pageSizeOptions]="[10, 20, 50]"></mat-paginator>

src/app/shared/issue-tables/issue-tables.component.ts

@@ -36,6 +36,7 @@ export class IssueTablesComponent implements OnInit, AfterViewInit {
   @Input() headers: string[];
   @Input() actions: ACTION_BUTTONS[];
   @Input() filters?: any = undefined;
+  @Input() table_name: string;
 
   @ViewChild(MatSort, { static: true }) sort: MatSort;
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;

src/app/shared/issue-tables/issue-tables.module.ts

@@ -1,12 +1,13 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
+import { PaginatorLocalStorageDirective } from '../../core/directives/paginator-local-storage.directive';
 import { MaterialModule } from '../material.module';
 import { IssueTablesComponent } from './issue-tables.component';
 
 @NgModule({
   exports: [IssueTablesComponent],
-  declarations: [IssueTablesComponent],
+  declarations: [IssueTablesComponent, PaginatorLocalStorageDirective],
   imports: [CommonModule, MaterialModule, RouterModule]
 })
 export class IssueTablesModule {}