Faulty list view when back navigating

src/app/core/models/table-settings.model.ts

@@ -0,0 +1,6 @@
+export class TableSettings {
+  public sortActiveId = ''; // The ID of the column the table is sorted by
+  public sortDirection = '';
+  public pageSize = 20;
+  public pageIndex = 0;
+}

src/app/core/services/issue-table-settings.service.ts

@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import { TableSettings } from '../models/table-settings.model';
+@Injectable({
+  providedIn: 'root'
+})
+
+/**
+ * Responsible for storing and retrieving the table settings for issue tables created
+ * Map is required since there can be multiple tables within the same page
+ */
+export class IssueTableSettingsService {
+  private _tableSettingsMap: { [index: string]: TableSettings } = {};
+
+  public getTableSettings(tableName: string): TableSettings {
+    return this._tableSettingsMap[tableName] || new TableSettings();
+  }
+
+  public setTableSettings(tableName: string, tableSettings: TableSettings): void {
+    this._tableSettingsMap[tableName] = tableSettings;
+  }
+
+  public clearTableSettings(): void {
+    this._tableSettingsMap = {};
+  }
+}

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

@@ -1,4 +1,11 @@
-<mat-table [dataSource]="this.issues" matSort class="mat-elevation-z8">
+<mat-table
+  [dataSource]="this.issues"
+  matSort
+  [matSortActive]="this.tableSettings.sortActiveId"
+  [matSortDirection]="this.tableSettings.sortDirection"
+  (matSortChange)="this.sortChange($event)"
+  class="mat-elevation-z8"
+>
   <!-- ID Column -->
   <ng-container matColumnDef="id">
     <mat-header-cell *matHeaderCellDef mat-sort-header> ID </mat-header-cell>
@@ -262,4 +269,10 @@
 <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 [paginatorLocalStorage]="this.table_name" [pageSize]="20" [pageSizeOptions]="[10, 20, 50]"></mat-paginator>
+<mat-paginator
+  [paginatorLocalStorage]="this.table_name"
+  [pageSize]="this.tableSettings.pageSize"
+  [pageSizeOptions]="[10, 20, 50]"
+  [pageIndex]="this.tableSettings.pageIndex"
+  (page)="this.pageChange($event)"
+></mat-paginator>

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

@@ -1,12 +1,14 @@
 import { AfterViewInit, Component, Input, OnInit, ViewChild } from '@angular/core';
-import { MatPaginator } from '@angular/material/paginator';
+import { MatPaginator, PageEvent } from '@angular/material/paginator';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { MatSort } from '@angular/material/sort';
+import { MatSort, Sort } from '@angular/material/sort';
 import { finalize } from 'rxjs/operators';
 import { Issue, STATUS } from '../../core/models/issue.model';
+import { TableSettings } from '../../core/models/table-settings.model';
 import { DialogService } from '../../core/services/dialog.service';
 import { ErrorHandlingService } from '../../core/services/error-handling.service';
 import { GithubService } from '../../core/services/github.service';
+import { IssueTableSettingsService } from '../../core/services/issue-table-settings.service';
 import { IssueService } from '../../core/services/issue.service';
 import { LabelService } from '../../core/services/label.service';
 import { LoggingService } from '../../core/services/logging.service';
@@ -44,6 +46,8 @@ export class IssueTablesComponent implements OnInit, AfterViewInit {
   issues: IssuesDataTable;
   issuesPendingDeletion: { [id: number]: boolean };
 
+  public tableSettings: TableSettings;
+
   public readonly action_buttons = ACTION_BUTTONS;
 
   // Messages for the modal popup window upon deleting an issue
@@ -57,6 +61,7 @@ export class IssueTablesComponent implements OnInit, AfterViewInit {
     public labelService: LabelService,
     private githubService: GithubService,
     public issueService: IssueService,
+    public issueTableSettingsService: IssueTableSettingsService,
     private phaseService: PhaseService,
     private errorHandlingService: ErrorHandlingService,
     private logger: LoggingService,
@@ -67,6 +72,7 @@ export class IssueTablesComponent implements OnInit, AfterViewInit {
   ngOnInit() {
     this.issues = new IssuesDataTable(this.issueService, this.sort, this.paginator, this.headers, this.filters);
     this.issuesPendingDeletion = {};
+    this.tableSettings = this.issueTableSettingsService.getTableSettings(this.table_name);
   }
 
   ngAfterViewInit(): void {
@@ -75,6 +81,18 @@ export class IssueTablesComponent implements OnInit, AfterViewInit {
     });
   }
 
+  sortChange(newSort: Sort) {
+    this.tableSettings.sortActiveId = newSort.active;
+    this.tableSettings.sortDirection = newSort.direction;
+    this.issueTableSettingsService.setTableSettings(this.table_name, this.tableSettings);
+  }
+
+  pageChange(pageEvent: PageEvent) {
+    this.tableSettings.pageSize = pageEvent.pageSize;
+    this.tableSettings.pageIndex = pageEvent.pageIndex;
+    this.issueTableSettingsService.setTableSettings(this.table_name, this.tableSettings);
+  }
+
   isActionVisible(action: ACTION_BUTTONS): boolean {
     return this.actions.includes(action);
   }

src/app/shared/layout/header.component.ts

@@ -10,6 +10,7 @@ import { DialogService } from '../../core/services/dialog.service';
 import { ErrorHandlingService } from '../../core/services/error-handling.service';
 import { GithubService } from '../../core/services/github.service';
 import { GithubEventService } from '../../core/services/githubevent.service';
+import { IssueTableSettingsService } from '../../core/services/issue-table-settings.service';
 import { IssueService } from '../../core/services/issue.service';
 import { LoggingService } from '../../core/services/logging.service';
 import { PhaseDescription, PhaseService } from '../../core/services/phase.service';
@@ -45,7 +46,8 @@ export class HeaderComponent implements OnInit {
     private issueService: IssueService,
     private errorHandlingService: ErrorHandlingService,
     private githubService: GithubService,
-    private dialogService: DialogService
+    private dialogService: DialogService,
+    private issueTableSettingsService: IssueTableSettingsService
   ) {
     router.events
       .pipe(
@@ -81,6 +83,9 @@ export class HeaderComponent implements OnInit {
     this.issueService.reset(false);
     this.reload();
 
+    // Reset Issue Table Settings
+    this.issueTableSettingsService.clearTableSettings();
+
     // Route app to new phase.
     this.router.navigateByUrl(this.phaseService.currentPhase);
   }