fix: persist portfolio filters in url

Author: b0ink

src/app/units/states/portfolios/directives/portfolios-list/portfolios-list.component.html

@@ -10,7 +10,8 @@ <h2>Mark portfolios</h2>
           matInput
           placeholder="Eg. Student ID"
           [disabled]="loading"
-          (keyup)="applyFilter($event)"
+          [value]="filterText"
+          (input)="applyFilter($event)"
         />
       </mat-form-field>
       <mat-button-toggle-group

src/app/units/states/portfolios/directives/portfolios-list/portfolios-list.component.ts

@@ -25,6 +25,20 @@ import {AlertService} from 'src/app/common/services/alert.service';
 import {GradeService} from 'src/app/common/services/grade.service';
 import {D2lTransferModal} from '../../d2l-transfer-modal/d2l-transfer.component';
 
+export interface PortfolioListFilters {
+  portfolioFilter: 'all' | 'submitted_only';
+  tutorialFilter: 'all' | 'mine';
+  gradeFilter: number | null;
+  filterText: string;
+}
+
+export const DEFAULT_PORTFOLIO_LIST_FILTERS: PortfolioListFilters = {
+  portfolioFilter: 'submitted_only',
+  tutorialFilter: 'all',
+  gradeFilter: null,
+  filterText: '',
+};
+
 @Component({
   selector: 'f-portfolios-list',
   templateUrl: './portfolios-list.component.html',
@@ -35,9 +49,12 @@ import {D2lTransferModal} from '../../d2l-transfer-modal/d2l-transfer.component'
 export class PortfoliosListComponent implements OnChanges, AfterViewInit {
   @Input() unit: Unit;
   @Input() loading = true;
+  @Input() filters: PortfolioListFilters = DEFAULT_PORTFOLIO_LIST_FILTERS;
 
   @Output()
   public studentSelected: EventEmitter<Project> = new EventEmitter();
+  @Output()
+  public filtersChange: EventEmitter<PortfolioListFilters> = new EventEmitter();
 
   displayedColumns: string[] = [];
 
@@ -49,6 +66,7 @@ export class PortfoliosListComponent implements OnChanges, AfterViewInit {
   public portfolioFilter: 'all' | 'submitted_only' = 'submitted_only';
   public tutorialFilter: 'all' | 'mine' = 'all';
   public gradeFilter: number | null = null;
+  public filterText = '';
 
   constructor(
     private taskService: TaskService,
@@ -64,12 +82,27 @@ export class PortfoliosListComponent implements OnChanges, AfterViewInit {
   ngAfterViewInit() {
     this.dataSource.paginator = this.paginator;
     this.dataSource.sort = this.sort;
+    this.applyTextFilter();
   }
 
   ngOnChanges(changes: SimpleChanges): void {
+    if (changes.filters) {
+      this.portfolioFilter = this.filters.portfolioFilter;
+      this.tutorialFilter = this.filters.tutorialFilter;
+      this.gradeFilter = this.filters.gradeFilter;
+      this.filterText = this.filters.filterText;
+    }
+
     if (!this.loading && this.unit && (changes.loading || changes.unit)) {
       this.updateDataSource();
     }
+
+    if (changes.filters) {
+      this.applyTextFilter();
+      if (!this.loading && this.unit) {
+        this.updateDataSource();
+      }
+    }
   }
 
   openProject(event: Event, project: Project) {
@@ -144,31 +177,34 @@ export class PortfoliosListComponent implements OnChanges, AfterViewInit {
 
     this.dataSource.data = students;
     this.dataSource.paginator?.firstPage();
+    this.applyTextFilter();
   }
 
   onPortfolioFilterChange(event: MatButtonToggleChange) {
     this.portfolioFilter = event.value;
     this.updateDataSource();
+    this.emitFilters();
   }
 
   onTutorialFilterChange(event: MatButtonToggleChange) {
     this.tutorialFilter = event.value;
     this.updateDataSource();
+    this.emitFilters();
   }
 
   onGradeFilterChange(event: MatButtonToggleChange) {
     this.gradeFilter = event.value;
     this.updateDataSource();
+    this.emitFilters();
   }
 
   applyFilter(event: Event) {
-    const filterValue = (event.target as HTMLInputElement).value;
-    this.dataSource.filter = filterValue.trim().toLowerCase();
-
-    if (this.dataSource.paginator) {
-      this.dataSource.paginator.firstPage();
-    }
+    this.filterText = (event.target as HTMLInputElement).value;
+    this.applyTextFilter();
+    this.emitFilters();
+  }
 
+  private applyTextFilter() {
     this.dataSource.filterPredicate = (project, filter) => {
       const text = [
         project.student.studentId,
@@ -183,6 +219,21 @@ export class PortfoliosListComponent implements OnChanges, AfterViewInit {
 
       return text.includes(filter);
     };
+
+    this.dataSource.filter = this.filterText.trim().toLowerCase();
+
+    if (this.dataSource.paginator) {
+      this.dataSource.paginator.firstPage();
+    }
+  }
+
+  private emitFilters() {
+    this.filtersChange.emit({
+      portfolioFilter: this.portfolioFilter,
+      tutorialFilter: this.tutorialFilter,
+      gradeFilter: this.gradeFilter,
+      filterText: this.filterText,
+    });
   }
 
   selectStudent(project: Project) {

src/app/units/states/portfolios/portfolios.component.html

@@ -15,8 +15,10 @@
       @switch (currentTab.routeSegment) {
         @case ('select') {
           <f-portfolios-list
+            [filters]="portfolioListFilters"
             [loading]="loadingStudents"
             [unit]="unit"
+            (filtersChange)="portfolioListFiltersChange($event)"
             (studentSelected)="studentSelected($event)"
           ></f-portfolios-list>
         }

src/app/units/states/portfolios/portfolios.component.ts

@@ -1,12 +1,16 @@
 import {ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit} from '@angular/core';
 import {MatTabChangeEvent} from '@angular/material/tabs';
-import {ActivatedRoute, Router} from '@angular/router';
+import {ActivatedRoute, ParamMap, Router} from '@angular/router';
 import {BehaviorSubject, Observable, Subscription, first, of} from 'rxjs';
 import {Project} from 'src/app/api/models/project';
 import {Unit} from 'src/app/api/models/unit';
 import {ProjectService} from 'src/app/api/services/project.service';
 import {UserService} from 'src/app/api/services/user.service';
 import {AlertService} from 'src/app/common/services/alert.service';
+import {
+  DEFAULT_PORTFOLIO_LIST_FILTERS,
+  PortfolioListFilters,
+} from './directives/portfolios-list/portfolios-list.component';
 
 type PortfolioTabKey = 'select' | 'progress' | 'student-notes' | 'portfolio' | 'assessment';
 
@@ -39,6 +43,7 @@ export class PortfoliosComponent implements OnInit, OnDestroy {
   public selectedProject$: BehaviorSubject<Project | null> = new BehaviorSubject(null);
   public loadingStudents = true;
   public currentTab: PortfolioTab = this.tabs[0];
+  public portfolioListFilters: PortfolioListFilters = {...DEFAULT_PORTFOLIO_LIST_FILTERS};
 
   private subscriptions: Subscription[] = [];
   private selectedProjectId: number | null = null;
@@ -70,6 +75,9 @@ export class PortfoliosComponent implements OnInit, OnDestroy {
             this.route.paramMap.subscribe((params) => {
               this.updateCurrentTabFromState(params.get('tab'), params.get('projectId'));
             }),
+            this.route.queryParamMap.subscribe((params) => {
+              this.updatePortfolioListFiltersFromQueryParams(params);
+            }),
           );
         },
         error: (error) => {
@@ -101,12 +109,27 @@ export class PortfoliosComponent implements OnInit, OnDestroy {
     this.navigateToProject(project.id, 'progress');
   }
 
+  public portfolioListFiltersChange(filters: PortfolioListFilters): void {
+    this.portfolioListFilters = {...filters};
+
+    if (this.currentTab.routeSegment === 'select') {
+      this.router.navigate([], {
+        relativeTo: this.route,
+        queryParams: this.portfolioListFilterQueryParams(),
+        replaceUrl: true,
+      });
+    }
+  }
+
   public onTabChange(event: MatTabChangeEvent): void {
     const nextTab = this.tabs[event.index] ?? this.tabs[0];
     this.currentTab = nextTab;
 
     if (nextTab.routeSegment === 'select' || !this.selectedProject) {
-      this.router.navigate(['/units', this.unit.id, 'students', 'portfolios'], {replaceUrl: true});
+      this.router.navigate(['/units', this.unit.id, 'students', 'portfolios'], {
+        queryParams: this.portfolioListFilterQueryParams(),
+        replaceUrl: true,
+      });
       return;
     }
 
@@ -125,6 +148,52 @@ export class PortfoliosComponent implements OnInit, OnDestroy {
     });
   }
 
+  private updatePortfolioListFiltersFromQueryParams(params: ParamMap): void {
+    const filters: PortfolioListFilters = {
+      portfolioFilter: params.get('portfolio') === 'all' ? 'all' : 'submitted_only',
+      tutorialFilter: params.get('tutorial') === 'mine' ? 'mine' : 'all',
+      gradeFilter: this.gradeFilterFromQueryParam(params.get('grade')),
+      filterText: params.get('search') ?? '',
+    };
+
+    if (!this.portfolioListFiltersEqual(filters, this.portfolioListFilters)) {
+      this.portfolioListFilters = filters;
+    }
+  }
+
+  private gradeFilterFromQueryParam(grade: string | null): number | null {
+    if (grade === null) {
+      return null;
+    }
+
+    const gradeValue = Number(grade);
+    return Number.isFinite(gradeValue) ? gradeValue : null;
+  }
+
+  private portfolioListFilterQueryParams(): Record<string, string | number | null> {
+    return {
+      portfolio:
+        this.portfolioListFilters.portfolioFilter === DEFAULT_PORTFOLIO_LIST_FILTERS.portfolioFilter
+          ? null
+          : this.portfolioListFilters.portfolioFilter,
+      tutorial:
+        this.portfolioListFilters.tutorialFilter === DEFAULT_PORTFOLIO_LIST_FILTERS.tutorialFilter
+          ? null
+          : this.portfolioListFilters.tutorialFilter,
+      grade: this.portfolioListFilters.gradeFilter,
+      search: this.portfolioListFilters.filterText.trim() || null,
+    };
+  }
+
+  private portfolioListFiltersEqual(a: PortfolioListFilters, b: PortfolioListFilters): boolean {
+    return (
+      a.portfolioFilter === b.portfolioFilter &&
+      a.tutorialFilter === b.tutorialFilter &&
+      a.gradeFilter === b.gradeFilter &&
+      a.filterText === b.filterText
+    );
+  }
+
   private updateCurrentTabFromState(
     tabParam?: string | null,
     projectIdParam?: string | null,
@@ -184,6 +253,7 @@ export class PortfoliosComponent implements OnInit, OnDestroy {
 
   private navigateToProject(projectId: number, tab: PortfolioTabKey): void {
     this.router.navigate(['/units', this.unit.id, 'students', 'portfolios', projectId, tab], {
+      queryParams: this.portfolioListFilterQueryParams(),
       replaceUrl: true,
     });
   }