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 0000000..174ab6b --- /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 0000000..2cfdbad --- /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 777aa52..1279476 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 d428c8d..2969dbc 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 9f6588d..9c491fe 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); }