From a1b500006959f1b45210fdacb3e4117d25ac2092 Mon Sep 17 00:00:00 2001 From: Arif Khalid <88131400+Arif-Khalid@users.noreply.github.com> Date: Mon, 19 Feb 2024 14:53:36 +0800 Subject: [PATCH] Faulty list view when back navigating (#1243) Issue table settings such as page index are not saved when table is re-mounted. This behavior inconveniences users as their settings are reset everytime they navigate to a specific issue and back. Let's lift up the table settings of each mounted table to a service which the tables pull from when mounted. --- src/app/core/models/table-settings.model.ts | 6 +++++ .../services/issue-table-settings.service.ts | 25 +++++++++++++++++++ .../issue-tables/issue-tables.component.html | 17 +++++++++++-- .../issue-tables/issue-tables.component.ts | 22 ++++++++++++++-- src/app/shared/layout/header.component.ts | 7 +++++- 5 files changed, 72 insertions(+), 5 deletions(-) create mode 100644 src/app/core/models/table-settings.model.ts create mode 100644 src/app/core/services/issue-table-settings.service.ts diff --git a/src/app/core/models/table-settings.model.ts b/src/app/core/models/table-settings.model.ts new file mode 100644 index 000000000..174ab6bc8 --- /dev/null +++ b/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; +} diff --git a/src/app/core/services/issue-table-settings.service.ts b/src/app/core/services/issue-table-settings.service.ts new file mode 100644 index 000000000..2cfdbad7b --- /dev/null +++ b/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 = {}; + } +} diff --git a/src/app/shared/issue-tables/issue-tables.component.html b/src/app/shared/issue-tables/issue-tables.component.html index 777aa52bc..1279476cf 100644 --- a/src/app/shared/issue-tables/issue-tables.component.html +++ b/src/app/shared/issue-tables/issue-tables.component.html @@ -1,4 +1,11 @@ - + ID @@ -262,4 +269,10 @@ - + diff --git a/src/app/shared/issue-tables/issue-tables.component.ts b/src/app/shared/issue-tables/issue-tables.component.ts index d428c8df2..2969dbcff 100644 --- a/src/app/shared/issue-tables/issue-tables.component.ts +++ b/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); } diff --git a/src/app/shared/layout/header.component.ts b/src/app/shared/layout/header.component.ts index 9f6588d05..9c491fe15 100644 --- a/src/app/shared/layout/header.component.ts +++ b/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); }