From c10734017e31198dae1bf6b5987e988f4a0bb61d Mon Sep 17 00:00:00 2001
From: Sean <110801974+LJXSean@users.noreply.github.com>
Date: Sun, 17 Sep 2023 01:33:18 +0800
Subject: [PATCH] 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.
---
 .../paginator-local-storage.directive.ts      | 34 +++++++++++++++++++
 .../phase-bug-reporting.component.html        |  2 +-
 .../phase-moderation.component.html           |  2 +-
 .../issues-faulty.component.html              |  7 +++-
 .../issues-pending.component.html             |  7 +++-
 .../issues-responded.component.html           |  7 +++-
 .../issue-accepted.component.html             |  7 +++-
 .../issue-faulty/issue-faulty.component.html  |  7 +++-
 .../issue-pending.component.html              |  7 +++-
 .../issue-responded.component.html            |  7 +++-
 .../issue-tables/issue-tables.component.html  |  2 +-
 .../issue-tables/issue-tables.component.ts    |  1 +
 .../issue-tables/issue-tables.module.ts       |  3 +-
 13 files changed, 82 insertions(+), 11 deletions(-)
 create mode 100644 src/app/core/directives/paginator-local-storage.directive.ts

diff --git a/src/app/core/directives/paginator-local-storage.directive.ts b/src/app/core/directives/paginator-local-storage.directive.ts
new file mode 100644
index 000000000..b6f51af5b
--- /dev/null
+++ b/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;
+    });
+  }
+}
diff --git a/src/app/phase-bug-reporting/phase-bug-reporting.component.html b/src/app/phase-bug-reporting/phase-bug-reporting.component.html
index ebbbcb5aa..3b1fb554a 100644
--- a/src/app/phase-bug-reporting/phase-bug-reporting.component.html
+++ b/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>
diff --git a/src/app/phase-moderation/phase-moderation.component.html b/src/app/phase-moderation/phase-moderation.component.html
index 50947f63f..f9baac739 100644
--- a/src/app/phase-moderation/phase-moderation.component.html
+++ b/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>
diff --git a/src/app/phase-team-response/issues-faulty/issues-faulty.component.html b/src/app/phase-team-response/issues-faulty/issues-faulty.component.html
index 469646a56..49dbb10a5 100644
--- a/src/app/phase-team-response/issues-faulty/issues-faulty.component.html
+++ b/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>
diff --git a/src/app/phase-team-response/issues-pending/issues-pending.component.html b/src/app/phase-team-response/issues-pending/issues-pending.component.html
index 565a53dc5..2c2b09757 100644
--- a/src/app/phase-team-response/issues-pending/issues-pending.component.html
+++ b/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>
diff --git a/src/app/phase-team-response/issues-responded/issues-responded.component.html b/src/app/phase-team-response/issues-responded/issues-responded.component.html
index 4bafff6cc..b799adc92 100644
--- a/src/app/phase-team-response/issues-responded/issues-responded.component.html
+++ b/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>
diff --git a/src/app/phase-tester-response/issue-accepted/issue-accepted.component.html b/src/app/phase-tester-response/issue-accepted/issue-accepted.component.html
index ec421c10e..6701e3b39 100644
--- a/src/app/phase-tester-response/issue-accepted/issue-accepted.component.html
+++ b/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>
diff --git a/src/app/phase-tester-response/issue-faulty/issue-faulty.component.html b/src/app/phase-tester-response/issue-faulty/issue-faulty.component.html
index 469646a56..bfc464a66 100644
--- a/src/app/phase-tester-response/issue-faulty/issue-faulty.component.html
+++ b/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>
diff --git a/src/app/phase-tester-response/issue-pending/issue-pending.component.html b/src/app/phase-tester-response/issue-pending/issue-pending.component.html
index 565a53dc5..313ba021d 100644
--- a/src/app/phase-tester-response/issue-pending/issue-pending.component.html
+++ b/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>
diff --git a/src/app/phase-tester-response/issue-responded/issue-responded.component.html b/src/app/phase-tester-response/issue-responded/issue-responded.component.html
index 6e2134915..80750d73e 100644
--- a/src/app/phase-tester-response/issue-responded/issue-responded.component.html
+++ b/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>
diff --git a/src/app/shared/issue-tables/issue-tables.component.html b/src/app/shared/issue-tables/issue-tables.component.html
index abe3e57d6..777aa52bc 100644
--- a/src/app/shared/issue-tables/issue-tables.component.html
+++ b/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>
diff --git a/src/app/shared/issue-tables/issue-tables.component.ts b/src/app/shared/issue-tables/issue-tables.component.ts
index 8e2b141f0..d428c8df2 100644
--- a/src/app/shared/issue-tables/issue-tables.component.ts
+++ b/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;
diff --git a/src/app/shared/issue-tables/issue-tables.module.ts b/src/app/shared/issue-tables/issue-tables.module.ts
index 968962e79..068ac69cc 100644
--- a/src/app/shared/issue-tables/issue-tables.module.ts
+++ b/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 {}