Keep filters option when switching repos

src/app/issues-viewer/card-view/card-view.component.ts

@@ -6,6 +6,7 @@ import { GithubUser } from '../../core/models/github-user.model';
 import { Issue } from '../../core/models/issue.model';
 import { IssueService } from '../../core/services/issue.service';
 import { FilterableComponent, FilterableSource } from '../../shared/issue-tables/filterableTypes';
+import { FiltersStore } from '../../shared/issue-tables/FiltersStore';
 import { IssuesDataTable } from '../../shared/issue-tables/IssuesDataTable';
 
 @Component({
@@ -35,6 +36,8 @@ export class CardViewComponent implements OnInit, AfterViewInit, OnDestroy, Filt
 
   ngOnInit() {
     this.issues = new IssuesDataTable(this.issueService, this.sort, this.paginator, this.headers, this.assignee, this.filters);
+    this.issues.dropdownFilter = FiltersStore.getInitialDropdownFilter();
+    this.issues.filter = FiltersStore.getInitialSearchFilter();
   }
 
   ngAfterViewInit(): void {

src/app/shared/filter-bar/filter-bar.component.html

@@ -1,7 +1,7 @@
 <mat-grid-list cols="7" rowHeight="80px">
   <mat-grid-tile colspan="3">
     <mat-form-field class="search-bar">
-      <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Search" />
+      <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Search" value="{{ this.initialSearchFilter }}" />
     </mat-form-field>
   </mat-grid-tile>
 
@@ -24,7 +24,13 @@
           <mat-option value="pullrequest">Pull Request</mat-option>
         </mat-select>
       </mat-form-field>
-      <mat-form-field appearance="standard" matSort [matSortDisableClear]="true">
+      <mat-form-field
+        appearance="standard"
+        matSort
+        [matSortActive]="this.dropdownFilter.sort"
+        [matSortDirection]="this.dropdownFilter.sortDirection"
+        [matSortDisableClear]="true"
+      >
         <mat-label>Sort</mat-label>
         <mat-select [(value)]="this.dropdownFilter.sort" (selectionChange)="applyDropdownFilter()">
           <mat-option value="id">

src/app/shared/filter-bar/filter-bar.component.ts

@@ -1,12 +1,13 @@
 import { AfterViewInit, Component, Input, OnDestroy, OnInit, QueryList, ViewChild } from '@angular/core';
 import { MatSelect } from '@angular/material/select';
-import { MatSort } from '@angular/material/sort';
+import { MatSort, Sort } from '@angular/material/sort';
 import { BehaviorSubject, Subscription } from 'rxjs';
 import { LoggingService } from '../../core/services/logging.service';
 import { MilestoneService } from '../../core/services/milestone.service';
 import { PhaseService } from '../../core/services/phase.service';
-import { DEFAULT_DROPDOWN_FILTER, DropdownFilter } from '../issue-tables/dropdownfilter';
+import { DropdownFilter } from '../issue-tables/dropdownfilter';
 import { FilterableComponent } from '../issue-tables/filterableTypes';
+import { FiltersStore } from '../issue-tables/FiltersStore';
 import { LabelFilterBarComponent } from './label-filter-bar/label-filter-bar.component';
 
 /**
@@ -24,19 +25,25 @@ export class FilterBarComponent implements OnInit, AfterViewInit, OnDestroy {
   repoChangeSubscription: Subscription;
 
   /** Selected dropdown filter value */
-  dropdownFilter: DropdownFilter = DEFAULT_DROPDOWN_FILTER;
+  dropdownFilter: DropdownFilter = FiltersStore.getInitialDropdownFilter();
+
+  /** The initial search filter value, not updated when search filter is changed */
+  initialSearchFilter: string = FiltersStore.getInitialSearchFilter();
 
   /** Selected label filters, instance passed into LabelChipBar to populate */
-  labelFilter$ = new BehaviorSubject<string[]>([]);
+  labelFilter$ = new BehaviorSubject<string[]>(FiltersStore.getInitialDropdownFilter().labels);
   labelFilterSubscription: Subscription;
 
   /** Selected label to hide */
-  hiddenLabels$ = new BehaviorSubject<Set<string>>(new Set());
+  hiddenLabels$ = new BehaviorSubject<Set<string>>(FiltersStore.getInitialDropdownFilter().hiddenLabels);
   hiddenLabelSubscription: Subscription;
 
   /** Milestone subscription */
   milestoneSubscription: Subscription;
 
+  /** Sort change subscription */
+  sortChangeSubscription: Subscription;
+
   /** One MatSort controls all IssueDataTables */
   @ViewChild(MatSort, { static: true }) matSort: MatSort;
 
@@ -63,20 +70,28 @@ export class FilterBarComponent implements OnInit, AfterViewInit, OnDestroy {
       this.dropdownFilter.hiddenLabels = labels;
       this.applyDropdownFilter();
     });
+
+    this.sortChangeSubscription = this.matSort.sortChange.subscribe((sort: Sort) => {
+      // No need to apply sort property as dropdownFilter.sort is already 2 way bound to the mat-select value
+      this.dropdownFilter.sortDirection = sort.direction;
+      FiltersStore.updateDropdownFilter(this.dropdownFilter);
+    });
   }
 
   ngOnDestroy(): void {
     this.labelFilterSubscription?.unsubscribe();
     this.hiddenLabelSubscription?.unsubscribe();
     this.milestoneSubscription.unsubscribe();
     this.repoChangeSubscription.unsubscribe();
+    this.sortChangeSubscription.unsubscribe();
   }
 
   /**
    * Signals to IssuesDataTable that a change has occurred in filter.
    * @param filterValue
    */
   applyFilter(filterValue: string) {
+    FiltersStore.updateSearchFilter(filterValue);
     this.views$?.value?.forEach((v) => (v.retrieveFilterable().filter = filterValue));
   }
 
@@ -102,7 +117,10 @@ export class FilterBarComponent implements OnInit, AfterViewInit, OnDestroy {
    * Signals to IssuesDataTable that a change has occurred in dropdown filter.
    */
   applyDropdownFilter() {
-    this.views$?.value?.forEach((v) => (v.retrieveFilterable().dropdownFilter = this.dropdownFilter));
+    FiltersStore.updateDropdownFilter(this.dropdownFilter);
+    this.views$?.value?.forEach((v) => {
+      v.retrieveFilterable().dropdownFilter = this.dropdownFilter;
+    });
   }
 
   /**
@@ -116,10 +134,12 @@ export class FilterBarComponent implements OnInit, AfterViewInit, OnDestroy {
    * Fetch and initialize all information from repository to populate Issue Dashboard.
    */
   private initialize() {
-    // Fetch milestones and update dropdown filter
+    // Fetch milestones
     this.milestoneSubscription = this.milestoneService.fetchMilestones().subscribe(
       (response) => {
         this.logger.debug('IssuesViewerComponent: Fetched milestones from Github');
+        // Clear previous milestones
+        this.dropdownFilter.milestones = [];
         this.milestoneService.milestones.forEach((milestone) => this.dropdownFilter.milestones.push(milestone.number));
       },
       (err) => {},

src/app/shared/filter-bar/label-filter-bar/label-filter-bar.component.ts

@@ -4,6 +4,7 @@ import { BehaviorSubject, Observable, Subscription } from 'rxjs';
 import { SimpleLabel } from '../../../core/models/label.model';
 import { LabelService } from '../../../core/services/label.service';
 import { LoggingService } from '../../../core/services/logging.service';
+import { FiltersStore } from '../../issue-tables/FiltersStore';
 
 @Component({
   selector: 'app-label-filter-bar',
@@ -43,6 +44,28 @@ export class LabelFilterBarComponent implements OnInit, AfterViewInit, OnDestroy
     this.labelSubscription?.unsubscribe();
   }
 
+  /** Use initial labels from the FiltersStore to populate hidden and selected labels */
+  useInitialLabels(): void {
+    const { labels: initialSelectedLabels, hiddenLabels: initialHiddenLabels } = FiltersStore.getInitialDropdownFilter();
+    const allLabelsSet = new Set(this.allLabels.map((simpleLabel) => simpleLabel.formattedName));
+
+    // Update hidden labels with initial labels from FiltersStore
+    initialHiddenLabels.forEach((hiddenLabel) => {
+      if (allLabelsSet.has(hiddenLabel)) {
+        this.hiddenLabelNames.add(hiddenLabel);
+      }
+    });
+    this.hiddenLabels.next(this.hiddenLabelNames);
+
+    // Update selected labels with initial labels from FiltersStore
+    initialSelectedLabels.forEach((selectedLabel) => {
+      if (allLabelsSet.has(selectedLabel)) {
+        this.selectedLabelNames.push(selectedLabel);
+      }
+    });
+    this.updateSelection();
+  }
+
   hide(label: string): void {
     if (this.hiddenLabelNames.has(label)) {
       return;
@@ -80,6 +103,8 @@ export class LabelFilterBarComponent implements OnInit, AfterViewInit, OnDestroy
     this.labelSubscription = this.labelService.fetchLabels().subscribe(
       (response) => {
         this.logger.debug('LabelFilterBarComponent: Fetched labels from Github');
+        // Set timeout is used to prevent ExpressionChangedAfterItHasBeenChecked Error
+        setTimeout(() => this.useInitialLabels());
       },
       (err) => {},
       () => {

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

@@ -0,0 +1,35 @@
+import { DEFAULT_DROPDOWN_FILTER, DropdownFilter } from './dropdownfilter';
+
+const STORED_FILTER_PROPERTIES = ['status', 'type', 'sort', 'sortDirection', 'labels', 'hiddenLabels'];
+
+/** This static class stores the filters applied for the purpose of saving filters across repo changes */
+export class FiltersStore {
+  /** This copy of the dropdown filter is constantly updated when a change in the drop down filter occurs */
+  private static _currentDropdownFilter: DropdownFilter = { ...DEFAULT_DROPDOWN_FILTER };
+
+  /** This copy of the search filter is constantly updated when a change in search filter occurs*/
+  private static _currentSearchFilter = '';
+
+  static updateDropdownFilter(dropdownFilter: DropdownFilter) {
+    for (const property of STORED_FILTER_PROPERTIES) {
+      this._currentDropdownFilter[property] = dropdownFilter[property];
+    }
+  }
+
+  static getInitialDropdownFilter(): DropdownFilter {
+    return this._currentDropdownFilter;
+  }
+
+  static updateSearchFilter(searchFilter: string) {
+    this._currentSearchFilter = searchFilter.slice();
+  }
+
+  static getInitialSearchFilter(): string {
+    return this._currentSearchFilter.slice();
+  }
+
+  static clearStoredFilters() {
+    this._currentDropdownFilter = { ...DEFAULT_DROPDOWN_FILTER };
+    this._currentSearchFilter = '';
+  }
+}

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

@@ -61,7 +61,6 @@ export class IssuesDataTable extends DataSource<Issue> implements FilterableSour
     const displayDataChanges = [this.issueService.issues$, page, sortChange, this.filterChange, this.dropdownFilterChange].filter(
       (x) => x !== undefined
     );
-
     this.issueService.startPollIssues();
     this.issueSubscription = merge(...displayDataChanges)
       .pipe(

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

@@ -1,9 +1,11 @@
+import { SortDirection } from '@angular/material/sort';
 import { Issue } from '../../core/models/issue.model';
 
 export type DropdownFilter = {
   status: string;
   type: string;
   sort: string;
+  sortDirection: SortDirection;
   labels: string[];
   milestones: string[];
   hiddenLabels?: Set<string>;
@@ -13,12 +15,14 @@ export const DEFAULT_DROPDOWN_FILTER = <DropdownFilter>{
   status: 'all',
   type: 'all',
   sort: 'id',
+  sortDirection: 'desc',
   labels: [],
-  milestones: []
+  milestones: [],
+  hiddenLabels: new Set()
 };
 
 /**
- * This module serves to improve separation of concerns in IssuesDataTable.ts and IssueList.ts module by containing the logic for
+ * This function serves to improve separation of concerns in IssuesDataTable.ts and IssueList.ts module by containing the logic for
  * applying dropdownFilter to the issues data table in this module.
  * This module exports a single function applyDropDownFilter which is called by IssueList.
  * This functions returns a function to check if a issue matches a dropdownfilter

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

@@ -8,7 +8,6 @@ export function getSortedData(sort: MatSort, data: Issue[]): Issue[] {
   }
 
   const direction: number = sort.direction === 'asc' ? 1 : -1;
-
   return data.sort((a, b) => {
     switch (sort.active) {
       case 'assignees':

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

@@ -19,6 +19,7 @@ import { PhaseDescription, PhaseService } from '../../core/services/phase.servic
 import { RepoSessionStorageService } from '../../core/services/repo-session-storage.service';
 import { RepoUrlCacheService } from '../../core/services/repo-url-cache.service';
 import { UserService } from '../../core/services/user.service';
+import { FiltersStore } from '../issue-tables/FiltersStore';
 
 const ISSUE_TRACKER_URL = 'https://github.com/CATcher-org/WATcher/issues';
 
@@ -242,11 +243,20 @@ export class HeaderComponent implements OnInit {
   openChangeRepoDialog() {
     const dialogRef = this.dialogService.openChangeRepoDialog(this.currentRepo);
 
+    /**
+     * dialogRef closes with [repoName, keepFilters] if confirmed, else with false
+     * keepFilters signals whether filters should be kept across repo changes
+     */
     dialogRef.afterClosed().subscribe((res) => {
       if (!res) {
         return;
       }
-      const newRepo = Repo.of(res);
+      const newRepo = Repo.of(res[0]);
+      const keepFilters = res[1];
+
+      if (!keepFilters) {
+        FiltersStore.clearStoredFilters();
+      }
 
       if (this.phaseService.isRepoSet()) {
         this.changeRepositoryIfValid(newRepo, newRepo.toString());

src/app/shared/repo-change-form/repo-change-form.component.css

@@ -13,3 +13,8 @@
 .mat-dialog-actions {
   justify-content: flex-end;
 }
+
+header {
+  display: flex;
+  justify-content: space-between;
+}

src/app/shared/repo-change-form/repo-change-form.component.html

@@ -1,4 +1,7 @@
-<h1 mat-dialog-title class="change-repo-form-title">{{ data.repoName ? 'Change repository' : 'Select repository' }}</h1>
+<header>
+  <h1 mat-dialog-title class="change-repo-form-title">{{ data.repoName ? 'Change repository' : 'Select repository' }}</h1>
+  <mat-checkbox *ngIf="data.repoName" [(ngModel)]="this.keepFilters">Keep Filters</mat-checkbox>
+</header>
 <div mat-dialog-content>
   <form (ngSubmit)="onYesClick()">
     <mat-form-field appearance="fill">

src/app/shared/repo-change-form/repo-change-form.component.ts

@@ -11,6 +11,8 @@ import { RepoUrlCacheService } from '../../core/services/repo-url-cache.service'
 })
 export class RepoChangeFormComponent implements OnInit {
   public repoName: String;
+  /** Whether or not filters should be kept when the repo changes */
+  public keepFilters = false;
   filteredSuggestions: Observable<string[]>;
   repoChangeForm = new FormControl();
 
@@ -30,8 +32,9 @@ export class RepoChangeFormComponent implements OnInit {
     this.filteredSuggestions = this.repoUrlCacheService.getFilteredSuggestions(this.repoChangeForm);
   }
 
+  /** Closes dialogRef with an array of [repoName: String, keepFilters: boolean] */
   onYesClick(): void {
-    this.dialogRef.close(this.repoName);
+    this.dialogRef.close([this.repoName, this.keepFilters]);
   }
 
   onNoClick(): void {