refactor(Unit Library): Share FilterValues in LibraryService

src/app/curriculum/curriculum.component.spec.ts

@@ -1,14 +1,12 @@
-import { BehaviorSubject, of } from 'rxjs';
+import { of } from 'rxjs';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ConfigService } from '../services/config.service';
 import { CurriculumComponent } from './curriculum.component';
 import { LibraryFiltersComponent } from '../modules/library/library-filters/library-filters.component';
 import { LibraryService } from '../services/library.service';
 import { MockComponents, MockProvider, MockProviders } from 'ng-mocks';
 import { PersonalLibraryComponent } from '../modules/library/personal-library/personal-library.component';
-import { ProjectFilterValues } from '../domain/projectFilterValues';
 import { PublicLibraryComponent } from '../modules/library/public-library/public-library.component';
-import { User } from '../domain/user';
 import { UserService } from '../services/user.service';
 
 describe('CurriculumComponent', () => {
@@ -24,7 +22,7 @@ describe('CurriculumComponent', () => {
       providers: [
         MockProviders(ConfigService, UserService),
         MockProvider(LibraryService, {
-          projectFilterValuesSource$: of({} as ProjectFilterValues),
+          filterValuesUpdated$: of(),
           communityLibraryProjectsSource$: of([]),
           numberOfPublicProjectsVisible$: of(3),
           numberOfPersonalProjectsVisible$: of(2)

src/app/curriculum/curriculum.component.ts

@@ -38,6 +38,7 @@ export class CurriculumComponent {
 
   ngOnInit(): void {
     this.showMyUnits = this.userService.isTeacher();
+    this.libraryService.initFilterValues();
     this.getLibraryProjects();
     this.subscribeNumUnitsVisible();
   }

src/app/modules/library/community-library/community-library.component.spec.ts

@@ -3,19 +3,19 @@ import { CommunityLibraryComponent } from './community-library.component';
 import { fakeAsyncResponse } from '../../../student/student-run-list/student-run-list.component.spec';
 import { LibraryService } from '../../../services/library.service';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { MatDialog, MatDialogModule } from '@angular/material/dialog';
-import { BehaviorSubject } from 'rxjs';
+import { MatDialogModule } from '@angular/material/dialog';
+import { BehaviorSubject, of } from 'rxjs';
 import { OverlayModule } from '@angular/cdk/overlay';
+import { ProjectFilterValues } from '../../../domain/projectFilterValues';
 
 export class MockLibraryService {
   implementationModelOptions = [];
   communityLibraryProjectsSource$ = fakeAsyncResponse([]);
-  projectFilterValuesSource$ = fakeAsyncResponse({
-    searchValue: '',
-    disciplineValue: [],
-    standardValue: []
-  });
+  filterValuesUpdated$ = of();
   numberOfPublicProjectsVisible = new BehaviorSubject<number>(0);
+  getFilterValues() {
+    return new ProjectFilterValues();
+  }
 }
 
 describe('CommunityLibraryComponent', () => {

src/app/modules/library/home-page-project-library/home-page-project-library.component.ts

@@ -1,13 +1,16 @@
 import { Component } from '@angular/core';
 import { LibraryService } from '../../../services/library.service';
+import { ProjectFilterValues } from '../../../domain/projectFilterValues';
 
 @Component({
-    selector: 'app-home-page-project-library',
-    styleUrls: ['./home-page-project-library.component.scss', '../library/library.component.scss'],
-    templateUrl: './home-page-project-library.component.html',
-    standalone: false
+  selector: 'app-home-page-project-library',
+  styleUrls: ['./home-page-project-library.component.scss', '../library/library.component.scss'],
+  templateUrl: './home-page-project-library.component.html',
+  standalone: false
 })
 export class HomePageProjectLibraryComponent {
+  protected filterValues: ProjectFilterValues = new ProjectFilterValues();
+
   constructor(private libraryService: LibraryService) {
     libraryService.getOfficialLibraryProjects();
   }

src/app/modules/library/library-filters/library-filters.component.spec.ts

@@ -22,7 +22,7 @@ describe('LibraryFiltersComponent', () => {
           communityLibraryProjectsSource$: of([] as LibraryProject[]),
           sharedLibraryProjectsSource$: of([] as LibraryProject[]),
           personalLibraryProjectsSource$: of([] as LibraryProject[]),
-          projectFilterValuesSource$: of({} as ProjectFilterValues),
+          filterValuesUpdated$: of(),
           getFilterValues: () => new ProjectFilterValues()
         })
       ]
@@ -45,14 +45,14 @@ describe('LibraryFiltersComponent', () => {
     expect(component['disciplineOptions'].length).toBe(2);
   });
 
-  it('should call LibraryService.setFilterValues when the search value changes', waitForAsync(() => {
-    const libraryServiceFilterValuesSpy = spyOn(TestBed.get(LibraryService), 'setFilterValues');
+  it('should call LibraryService.filterValuesUpdated when the search value changes', waitForAsync(() => {
+    const libraryServiceFilterValuesSpy = spyOn(TestBed.get(LibraryService), 'filterValuesUpdated');
     component['searchUpdated']('photo');
     expect(libraryServiceFilterValuesSpy).toHaveBeenCalled();
   }));
 
-  it('should call LibraryService.setFilterValues when a filter value changes', waitForAsync(() => {
-    const libraryServiceFilterValuesSpy = spyOn(TestBed.get(LibraryService), 'setFilterValues');
+  it('should call LibraryService.filterValuesUpdated when a filter value changes', waitForAsync(() => {
+    const libraryServiceFilterValuesSpy = spyOn(TestBed.get(LibraryService), 'filterValuesUpdated');
     component['filterUpdated'](['Earth Sciences', 'Physical Sciences'], 'discipline');
     expect(libraryServiceFilterValuesSpy).toHaveBeenCalled();
   }));

src/app/modules/library/library-filters/library-filters.component.ts

@@ -33,7 +33,7 @@ export class LibraryFiltersComponent {
   private communityProjects: LibraryProject[] = [];
   protected disciplineOptions: Discipline[] = [];
   protected featureOptions: Feature[] = [];
-  protected filterValues: ProjectFilterValues = new ProjectFilterValues();
+  protected filterValues: ProjectFilterValues;
   protected gradeLevelOptions: GradeLevel[] = [];
   @Input() showAdvancedFilteringOptions: boolean = true;
   @Input() isSplitScreen: boolean = false;
@@ -52,6 +52,7 @@ export class LibraryFiltersComponent {
     private libraryService: LibraryService,
     private utilService: UtilService
   ) {
+    this.filterValues = this.libraryService.getFilterValues();
     libraryService.officialLibraryProjectsSource$.subscribe((projects: LibraryProject[]) => {
       this.libraryProjects = projects;
       this.populateFilterOptions();
@@ -170,7 +171,7 @@ export class LibraryFiltersComponent {
   }
 
   private emitFilterValues(): void {
-    this.libraryService.setFilterValues(this.filterValues);
+    this.libraryService.filterValuesUpdated();
   }
 
   protected clearFilterValues(): void {

src/app/modules/library/library/library.component.ts

@@ -1,4 +1,4 @@
-import { OnInit, QueryList, ViewChildren, Directive } from '@angular/core';
+import { OnInit, QueryList, ViewChildren, Directive, Input } from '@angular/core';
 import { ProjectFilterValues } from '../../../domain/projectFilterValues';
 import { LibraryService } from '../../../services/library.service';
 import { LibraryProject } from '../libraryProject';
@@ -9,7 +9,7 @@ import { MatDialog } from '@angular/material/dialog';
 @Directive()
 export abstract class LibraryComponent implements OnInit {
   protected filteredProjects: LibraryProject[] = [];
-  protected filterValues: ProjectFilterValues = new ProjectFilterValues();
+  protected filterValues: ProjectFilterValues;
   protected highIndex: number = 0;
   protected lowIndex: number = 0;
   protected pageSizeOptions: number[] = [12, 24, 48, 96];
@@ -26,10 +26,9 @@ export abstract class LibraryComponent implements OnInit {
   ) {}
 
   ngOnInit(): void {
+    this.filterValues = this.libraryService.getFilterValues();
     this.subscriptions.add(
-      this.libraryService.projectFilterValuesSource$.subscribe((projectFilterValues) =>
-        this.filterUpdated(projectFilterValues)
-      )
+      this.libraryService.filterValuesUpdated$.subscribe(() => this.filterUpdated())
     );
   }
 
@@ -63,10 +62,7 @@ export abstract class LibraryComponent implements OnInit {
     return this.lowIndex <= index && index < this.highIndex;
   }
 
-  protected filterUpdated(filterValues: ProjectFilterValues = null): void {
-    if (filterValues) {
-      this.filterValues = filterValues;
-    }
+  protected filterUpdated(): void {
     this.filteredProjects = this.projects
       .map((project) => {
         project.visible = this.filterValues.matches(project);

src/app/modules/library/official-library/official-library.component.spec.ts

@@ -4,21 +4,21 @@ import { fakeAsyncResponse } from '../../../student/student-run-list/student-run
 import { LibraryService } from '../../../services/library.service';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { LibraryGroup } from '../libraryGroup';
-import { MatDialog, MatDialogModule } from '@angular/material/dialog';
-import { BehaviorSubject } from 'rxjs';
+import { MatDialogModule } from '@angular/material/dialog';
+import { BehaviorSubject, of } from 'rxjs';
 import { OverlayModule } from '@angular/cdk/overlay';
+import { ProjectFilterValues } from '../../../domain/projectFilterValues';
 
 export class MockLibraryService {
   libraryGroupsSource$ = fakeAsyncResponse({});
   officialLibraryProjectsSource$ = fakeAsyncResponse([]);
-  projectFilterValuesSource$ = fakeAsyncResponse({
-    searchValue: '',
-    disciplineValue: [],
-    standardValue: []
-  });
+  filterValuesUpdated$ = of();
   implementationModelOptions: LibraryGroup[] = [];
   numberOfPublicProjectsVisible = new BehaviorSubject<number>(0);
   getOfficialLibraryProjects() {}
+  getFilterValues() {
+    return new ProjectFilterValues();
+  }
 }
 
 describe('OfficialLibraryComponent', () => {

src/app/modules/library/personal-library/personal-library.component.spec.ts

@@ -1,30 +1,18 @@
 import { ArchiveProjectResponse } from '../../../domain/archiveProjectResponse';
-import { ArchiveProjectsButtonComponent } from '../../../teacher/archive-projects-button/archive-projects-button.component';
 import { ArchiveProjectService } from '../../../services/archive-project.service';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { fakeAsyncResponse } from '../../../student/student-run-list/student-run-list.component.spec';
-import { FormsModule } from '@angular/forms';
 import { HttpClient, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { LibraryProject } from '../libraryProject';
-import { LibraryProjectComponent } from '../library-project/library-project.component';
 import { LibraryService } from '../../../services/library.service';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatDialogModule } from '@angular/material/dialog';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatOptionModule } from '@angular/material/core';
-import { MatPaginatorModule } from '@angular/material/paginator';
-import { MatSelectModule } from '@angular/material/select';
-import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { of } from 'rxjs';
-import { OverlayModule } from '@angular/cdk/overlay';
 import { PersonalLibraryComponent } from './personal-library.component';
 import { PersonalLibraryHarness } from './personal-library.harness';
-import { ProjectFilterValues } from '../../../domain/projectFilterValues';
 import { ProjectTagService } from '../../../../assets/wise5/services/projectTagService';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
-import { SelectAllItemsCheckboxComponent } from '../select-all-items-checkbox/select-all-items-checkbox.component';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { ProjectFilterValues } from '../../../domain/projectFilterValues';
 
 const archivedTag = { id: 1, text: 'archived', color: null };
 let archiveProjectService: ArchiveProjectService;
@@ -41,22 +29,7 @@ const projectId5 = 5;
 describe('PersonalLibraryComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [
-        ArchiveProjectsButtonComponent,
-        BrowserAnimationsModule,
-        FormsModule,
-        LibraryProjectComponent,
-        MatCheckboxModule,
-        MatDialogModule,
-        MatFormFieldModule,
-        MatOptionModule,
-        MatPaginatorModule,
-        MatSelectModule,
-        MatSnackBarModule,
-        OverlayModule,
-        PersonalLibraryComponent,
-        SelectAllItemsCheckboxComponent
-      ],
+      imports: [BrowserAnimationsModule, PersonalLibraryComponent],
       providers: [
         ArchiveProjectService,
         LibraryService,
@@ -70,6 +43,9 @@ describe('PersonalLibraryComponent', () => {
   beforeEach(async () => {
     fixture = TestBed.createComponent(PersonalLibraryComponent);
     component = fixture.componentInstance;
+    spyOn(TestBed.inject(LibraryService), 'getFilterValues').and.returnValue(
+      new ProjectFilterValues()
+    );
     setUpFiveProjects();
     archiveProjectService = TestBed.inject(ArchiveProjectService);
     http = TestBed.inject(HttpClient);
@@ -264,17 +240,7 @@ function projectsAreSelected_performSearch_allProjectsAreUnselected() {
       it('unselects all projects', async () => {
         await (await harness.getSelectAllCheckbox()).check();
         expect(await harness.getSelectedProjectIds()).toEqual([projectId5, projectId4, projectId3]);
-        component.filterUpdated(
-          Object.assign(new ProjectFilterValues(), {
-            disciplineValue: [],
-            featureValue: [],
-            gradeLevelValue: [],
-            publicUnitTypeValue: [],
-            searchValue: 'world',
-            standardValue: [],
-            unitTypeValue: []
-          })
-        );
+        component.filterUpdated();
         expect(await harness.getSelectedProjectIds()).toEqual([]);
       });
     });

src/app/modules/library/personal-library/personal-library.component.ts

@@ -16,7 +16,6 @@ import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
 import { MatRadioModule } from '@angular/material/radio';
 import { MatSelectModule } from '@angular/material/select';
 import { Project } from '../../../domain/project';
-import { ProjectFilterValues } from '../../../domain/projectFilterValues';
 import { ProjectSelectionEvent } from '../../../domain/projectSelectionEvent';
 import { SelectAllItemsCheckboxComponent } from '../select-all-items-checkbox/select-all-items-checkbox.component';
 import { SelectTagsComponent } from '../../../teacher/select-tags/select-tags.component';
@@ -129,8 +128,8 @@ export class PersonalLibraryComponent extends LibraryComponent {
     return PersonalLibraryDetailsComponent;
   }
 
-  public filterUpdated(filterValues: ProjectFilterValues = null): void {
-    super.filterUpdated(filterValues);
+  public filterUpdated(): void {
+    super.filterUpdated();
     this.filteredProjects = this.filteredProjects.filter(
       (project) => project.hasTagWithText('archived') == this.showArchivedView
     );

src/app/modules/library/public-library/public-library.component.html

@@ -1,9 +1,6 @@
 <div class="content-block library-teacher__paginate">
   <div class="flex flex-col items-center lg:justify-between lg:flex-row gap-1">
-    <public-unit-type-selector
-      [filterValues]="filterValues"
-      (publicUnitTypeUpdatedEvent)="filterUpdated($event)"
-    />
+    <public-unit-type-selector (publicUnitTypeUpdatedEvent)="filterUpdated()" />
     <mat-paginator
       class="self-end"
       [hidePageSize]="true"

src/app/modules/library/public-library/public-library.component.spec.ts

@@ -15,15 +15,16 @@ describe('PublicLibraryComponent', () => {
       imports: [PublicLibraryComponent],
       providers: [
         MockProvider(LibraryService, {
-          projectFilterValuesSource$: of(new ProjectFilterValues()),
+          filterValuesUpdated$: of(),
           communityLibraryProjectsSource$: of([
             { id: 1, name: 'P1' },
             { id: 2, name: 'P2' }
           ] as LibraryProject[]),
           officialLibraryProjectsSource$: of([
             { id: 1, name: 'P1' },
             { id: 3, name: 'P3' }
-          ] as LibraryProject[])
+          ] as LibraryProject[]),
+          getFilterValues: () => new ProjectFilterValues()
         })
       ]
     }).compileComponents();

src/app/modules/library/public-library/public-library.component.ts

@@ -6,7 +6,6 @@ import { LibraryProject } from '../libraryProject';
 import { LibraryProjectComponent } from '../library-project/library-project.component';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatPaginatorModule } from '@angular/material/paginator';
-import { ProjectFilterValues } from '../../../domain/projectFilterValues';
 import { PublicUnitTypeSelectorComponent } from '../public-unit-type-selector/public-unit-type-selector.component';
 
 @Component({
@@ -70,14 +69,6 @@ export class PublicLibraryComponent extends LibraryComponent {
     }, []);
   }
 
-  protected filterUpdated(filterValues: ProjectFilterValues = null): void {
-    if (filterValues) {
-      // this check is required the very first time when filterValues is null
-      filterValues.publicUnitTypeValue = this.filterValues.publicUnitTypeValue;
-    }
-    super.filterUpdated(filterValues);
-  }
-
   protected getNumVisiblePersonalOrPublicProjects(): BehaviorSubject<number> {
     return this.libraryService.numberOfPublicProjectsVisible;
   }