refactor(LibraryService): Move ProjectFilterValues out of class (#2169)

hirokiterashima · web-flow · commit 442fc920d51f · 2025-05-08T15:53:18.000-07:00
diff --git a/src/app/curriculum/curriculum.component.ts b/src/app/curriculum/curriculum.component.ts
@@ -11,6 +11,7 @@ import { Subscription } from 'rxjs';
 import { UserService } from '../services/user.service';
 import { MatButtonModule } from '@angular/material/button';
 import { Router, RouterModule } from '@angular/router';
+import { ProjectFilterValues } from '../domain/projectFilterValues';
 
 @Component({
   imports: [
@@ -23,6 +24,7 @@ import { Router, RouterModule } from '@angular/router';
     PublicLibraryComponent,
     RouterModule
   ],
+  providers: [ProjectFilterValues],
   styleUrl: './curriculum.component.scss',
   templateUrl: './curriculum.component.html'
 })
@@ -41,7 +43,6 @@ export class CurriculumComponent {
 
   ngOnInit(): void {
     this.showMyUnits = this.userService.isTeacher();
-    this.libraryService.initFilterValues();
     this.getLibraryProjects();
     this.subscribeNumUnitsVisible();
   }
diff --git a/src/app/domain/projectFilterValues.ts b/src/app/domain/projectFilterValues.ts
@@ -57,11 +57,13 @@ export class ProjectFilterValues {
   }
 
   clear(): void {
-    this.standardValue = [];
     this.disciplineValue = [];
-    this.unitTypeValue = [];
-    this.gradeLevelValue = [];
     this.featureValue = [];
+    this.gradeLevelValue = [];
+    this.publicUnitTypeValue = [];
+    this.searchValue = '';
+    this.standardValue = [];
+    this.unitTypeValue = [];
   }
 
   private matchesUnitType(project: LibraryProject): boolean {
diff --git a/src/app/modules/library/home-page-project-library/home-page-project-library.component.ts b/src/app/modules/library/home-page-project-library/home-page-project-library.component.ts
@@ -3,14 +3,13 @@ import { LibraryService } from '../../../services/library.service';
 import { ProjectFilterValues } from '../../../domain/projectFilterValues';
 
 @Component({
+  providers: [ProjectFilterValues],
   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();
   }
diff --git a/src/app/modules/library/library-filters/library-filters.component.html b/src/app/modules/library/library-filters/library-filters.component.html
@@ -1,7 +1,7 @@
 <div class="library-filter">
   <div class="flex flex-row gap-1">
     <div class="flex-auto max-w-full">
-      <app-search-bar [value]="getFilterValues().searchValue" (update)="searchUpdated($event)" />
+      <app-search-bar [value]="filterValues.searchValue" (update)="searchUpdated($event)" />
     </div>
     <button
       mat-icon-button
@@ -15,7 +15,7 @@
         matBadgeDescription="Filters applied"
         matBadgeOverlap="true"
         matBadgeSize="small"
-        [matBadgeHidden]="!getFilterValues().hasFilters()"
+        [matBadgeHidden]="!filterValues.hasFilters()"
         aria-hidden="false"
         >filter_list</mat-icon
       >
@@ -25,7 +25,7 @@
 <div class="library-filters" [class.expand]="showFilters" [class.isSplitScreen]="isSplitScreen">
   <div class="notice flex justify-between">
     <h3 class="mat-subtitle-2" i18n>Filters</h3>
-    @if (getFilterValues().hasFilters()) {
+    @if (filterValues.hasFilters()) {
       <a href="#" (click)="!!clearFilterValues()" i18n>Clear all</a>
     }
   </div>
@@ -43,7 +43,7 @@ <h3 class="mat-subtitle-2" i18n>Filters</h3>
           [options]="unitTypeOptions"
           i18n-placeholderText
           placeholderText="Type"
-          [value]="getFilterValues().unitTypeValue"
+          [value]="filterValues.unitTypeValue"
           (update)="filterUpdated($event, 'unitType')"
           [valueProp]="'name'"
           [viewValueProp]="'name'"
@@ -61,7 +61,7 @@ <h3 class="mat-subtitle-2" i18n>Filters</h3>
           [options]="disciplineOptions"
           i18n-placeholderText
           placeholderText="Discipline"
-          [value]="getFilterValues().disciplineValue"
+          [value]="filterValues.disciplineValue"
           (update)="filterUpdated($event, 'discipline')"
           [valueProp]="'id'"
           [viewValueProp]="'name'"
@@ -79,7 +79,7 @@ <h3 class="mat-subtitle-2" i18n>Filters</h3>
           [options]="gradeLevelOptions"
           i18n-placeholderText
           placeholderText="Grade Level"
-          [value]="getFilterValues().gradeLevelValue"
+          [value]="filterValues.gradeLevelValue"
           (update)="filterUpdated($event, 'gradeLevel')"
           valueProp="grade"
           viewValueProp="grade"
@@ -98,7 +98,7 @@ <h3 class="mat-subtitle-2" i18n>Filters</h3>
           [possibleLabels]="possibleStandardLabels"
           i18n-placeholderText
           placeholderText="Standards Addressed"
-          [value]="getFilterValues().standardValue"
+          [value]="filterValues.standardValue"
           (update)="filterUpdated($event, 'standard')"
           [valueProp]="'id'"
           [viewValueProp]="'name'"
@@ -115,7 +115,7 @@ <h3 class="mat-subtitle-2" i18n>Filters</h3>
           [options]="featureOptions"
           i18n-placeholderText
           placeholderText="Features"
-          [value]="getFilterValues().featureValue"
+          [value]="filterValues.featureValue"
           (update)="filterUpdated($event, 'feature')"
           valueProp="name"
           viewValueProp="name"
diff --git a/src/app/modules/library/library-filters/library-filters.component.spec.ts b/src/app/modules/library/library-filters/library-filters.component.spec.ts
@@ -4,9 +4,9 @@ import { LibraryService } from '../../../services/library.service';
 import sampleLibraryProjects from '../sampleLibraryProjects';
 import { SimpleChange } from '@angular/core';
 import { LibraryProject } from '../libraryProject';
-import { ProjectFilterValues } from '../../../domain/projectFilterValues';
 import { MockProvider } from 'ng-mocks';
 import { of } from 'rxjs';
+import { ProjectFilterValues } from '../../../domain/projectFilterValues';
 
 describe('LibraryFiltersComponent', () => {
   let component: LibraryFiltersComponent;
@@ -22,9 +22,9 @@ describe('LibraryFiltersComponent', () => {
           communityLibraryProjectsSource$: of([] as LibraryProject[]),
           sharedLibraryProjectsSource$: of([] as LibraryProject[]),
           personalLibraryProjectsSource$: of([] as LibraryProject[]),
-          filterValuesUpdated$: of(),
-          filterValues: new ProjectFilterValues()
-        })
+          filterValuesUpdated$: of()
+        }),
+        ProjectFilterValues
       ]
     });
     projects = sampleLibraryProjects;
diff --git a/src/app/modules/library/library-filters/library-filters.component.ts b/src/app/modules/library/library-filters/library-filters.component.ts
@@ -48,6 +48,7 @@ export class LibraryFiltersComponent {
   ];
 
   constructor(
+    protected filterValues: ProjectFilterValues,
     private libraryService: LibraryService,
     private utilService: UtilService
   ) {
@@ -143,41 +144,37 @@ export class LibraryFiltersComponent {
   }
 
   protected searchUpdated(value: string): void {
-    this.getFilterValues().searchValue = value.toLocaleLowerCase();
+    this.filterValues.searchValue = value.toLocaleLowerCase();
     this.emitFilterValues();
   }
 
   protected filterUpdated(value: any[], context: string = ''): void {
     switch (context) {
       case 'discipline':
-        this.getFilterValues().disciplineValue = value;
+        this.filterValues.disciplineValue = value;
         break;
       case 'gradeLevel':
-        this.getFilterValues().gradeLevelValue = value;
+        this.filterValues.gradeLevelValue = value;
         break;
       case 'standard':
-        this.getFilterValues().standardValue = value;
+        this.filterValues.standardValue = value;
         break;
       case 'feature':
-        this.getFilterValues().featureValue = value;
+        this.filterValues.featureValue = value;
         break;
       case 'unitType':
-        this.getFilterValues().unitTypeValue = value;
+        this.filterValues.unitTypeValue = value;
         break;
     }
     this.emitFilterValues();
   }
 
-  protected getFilterValues(): ProjectFilterValues {
-    return this.libraryService.filterValues;
-  }
-
   private emitFilterValues(): void {
     this.libraryService.filterValuesUpdated();
   }
 
   protected clearFilterValues(): void {
-    this.getFilterValues().clear();
+    this.filterValues.clear();
     this.emitFilterValues();
   }
 }
diff --git a/src/app/modules/library/library/library.component.ts b/src/app/modules/library/library/library.component.ts
@@ -18,7 +18,10 @@ export abstract class LibraryComponent implements OnInit {
   protected showFilters: boolean = false;
   protected subscriptions: Subscription = new Subscription();
 
-  constructor(protected libraryService: LibraryService) {}
+  constructor(
+    protected filterValues: ProjectFilterValues,
+    protected libraryService: LibraryService
+  ) {}
 
   ngOnInit(): void {
     this.subscriptions.add(
@@ -27,7 +30,7 @@ export abstract class LibraryComponent implements OnInit {
   }
 
   ngOnDestroy(): void {
-    this.getFilterValues().clear();
+    this.filterValues.clear();
     this.subscriptions.unsubscribe();
   }
 
@@ -59,7 +62,7 @@ export abstract class LibraryComponent implements OnInit {
   protected filterUpdated(): void {
     this.filteredProjects = this.projects
       .map((project) => {
-        project.visible = this.getFilterValues().matches(project);
+        project.visible = this.filterValues.matches(project);
         return project;
       })
       .filter((project) => project.visible)
@@ -82,8 +85,4 @@ export abstract class LibraryComponent implements OnInit {
   protected countVisibleProjects(projects: LibraryProject[]): number {
     return projects.filter((project) => project.visible).length;
   }
-
-  private getFilterValues(): ProjectFilterValues {
-    return this.libraryService.filterValues;
-  }
 }
diff --git a/src/app/modules/library/official-library/official-library.component.spec.ts b/src/app/modules/library/official-library/official-library.component.spec.ts
@@ -15,7 +15,6 @@ export class MockLibraryService {
   implementationModelOptions: LibraryGroup[] = [];
   numberOfPublicProjectsVisible = new BehaviorSubject<number>(0);
   getOfficialLibraryProjects() {}
-  filterValues = new ProjectFilterValues();
 }
 
 describe('OfficialLibraryComponent', () => {
@@ -25,7 +24,7 @@ describe('OfficialLibraryComponent', () => {
     TestBed.configureTestingModule({
       imports: [OverlayModule],
       declarations: [OfficialLibraryComponent],
-      providers: [{ provide: LibraryService, useClass: MockLibraryService }],
+      providers: [{ provide: LibraryService, useClass: MockLibraryService }, ProjectFilterValues],
       schemas: [NO_ERRORS_SCHEMA]
     }).compileComponents();
   }));
diff --git a/src/app/modules/library/official-library/official-library.component.ts b/src/app/modules/library/official-library/official-library.component.ts
@@ -2,7 +2,6 @@ import { BehaviorSubject } from 'rxjs';
 import { Component, Input, ViewEncapsulation } from '@angular/core';
 import { LibraryGroup } from '../libraryGroup';
 import { LibraryProject } from '../libraryProject';
-import { LibraryService } from '../../../services/library.service';
 import { LibraryComponent } from '../library/library.component';
 
 @Component({
@@ -19,10 +18,6 @@ export class OfficialLibraryComponent extends LibraryComponent {
   libraryGroups: LibraryGroup[] = [];
   expandedGroups: object = {};
 
-  constructor(protected libraryService: LibraryService) {
-    super(libraryService);
-  }
-
   ngOnInit() {
     super.ngOnInit();
     this.subscriptions.add(
diff --git a/src/app/modules/library/personal-library/personal-library.component.spec.ts b/src/app/modules/library/personal-library/personal-library.component.spec.ts
@@ -10,6 +10,7 @@ import { of } from 'rxjs';
 import { PersonalLibraryComponent } from './personal-library.component';
 import { PersonalLibraryHarness } from './personal-library.harness';
 import { ProjectTagService } from '../../../../assets/wise5/services/projectTagService';
+import { ProjectFilterValues } from '../../../domain/projectFilterValues';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 
@@ -32,6 +33,7 @@ describe('PersonalLibraryComponent', () => {
       providers: [
         ArchiveProjectService,
         LibraryService,
+        ProjectFilterValues,
         ProjectTagService,
         provideHttpClient(withInterceptorsFromDi()),
         provideHttpClientTesting()
diff --git a/src/app/modules/library/personal-library/personal-library.component.ts b/src/app/modules/library/personal-library/personal-library.component.ts
@@ -18,6 +18,7 @@ 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';
 import { Tag } from '../../../domain/tag';
+import { ProjectFilterValues } from '../../../domain/projectFilterValues';
 
 @Component({
   imports: [
@@ -57,9 +58,10 @@ export class PersonalLibraryComponent extends LibraryComponent {
 
   constructor(
     private archiveProjectService: ArchiveProjectService,
+    protected filterValues: ProjectFilterValues,
     protected libraryService: LibraryService
   ) {
-    super(libraryService);
+    super(filterValues, libraryService);
   }
 
   ngOnInit(): void {
diff --git a/src/app/modules/library/public-library/public-library.component.spec.ts b/src/app/modules/library/public-library/public-library.component.spec.ts
@@ -3,8 +3,8 @@ import { PublicLibraryComponent } from './public-library.component';
 import { MockProvider } from 'ng-mocks';
 import { LibraryService } from '../../../services/library.service';
 import { of } from 'rxjs';
-import { ProjectFilterValues } from '../../../domain/projectFilterValues';
 import { LibraryProject } from '../libraryProject';
+import { ProjectFilterValues } from '../../../domain/projectFilterValues';
 
 describe('PublicLibraryComponent', () => {
   let component: PublicLibraryComponent;
@@ -23,9 +23,9 @@ describe('PublicLibraryComponent', () => {
           officialLibraryProjectsSource$: of([
             { id: 1, name: 'P1' },
             { id: 3, name: 'P3' }
-          ] as LibraryProject[]),
-          filterValues: new ProjectFilterValues()
-        })
+          ] as LibraryProject[])
+        }),
+        ProjectFilterValues
       ]
     }).compileComponents();
 
diff --git a/src/app/modules/library/public-unit-type-selector/public-unit-type-selector.component.spec.ts b/src/app/modules/library/public-unit-type-selector/public-unit-type-selector.component.spec.ts
@@ -5,8 +5,6 @@ import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { ProjectFilterValues } from '../../../domain/projectFilterValues';
 import { MatCheckboxHarness } from '@angular/material/checkbox/testing';
 import { MatDialog } from '@angular/material/dialog';
-import { LibraryService } from '../../../services/library.service';
-import { MockProvider } from 'ng-mocks';
 
 describe('PublicUnitTypeSelectorComponent', () => {
   let component: PublicUnitTypeSelectorComponent;
@@ -17,11 +15,7 @@ describe('PublicUnitTypeSelectorComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [PublicUnitTypeSelectorComponent],
-      providers: [
-        MockProvider(LibraryService, {
-          filterValues: new ProjectFilterValues()
-        })
-      ]
+      providers: [ProjectFilterValues]
     }).compileComponents();
 
     fixture = TestBed.createComponent(PublicUnitTypeSelectorComponent);
@@ -40,7 +34,7 @@ describe('PublicUnitTypeSelectorComponent', () => {
   it('should update filterValues and emit event when checkbox is clicked', async () => {
     const spy = spyOn(component.publicUnitTypeUpdatedEvent, 'emit');
     await checkbox1.check();
-    expect(TestBed.inject(LibraryService).filterValues.publicUnitTypeValue).toEqual(['wiseTested']);
+    expect(TestBed.inject(ProjectFilterValues).publicUnitTypeValue).toEqual(['wiseTested']);
     expect(spy).toHaveBeenCalled();
   });
 
diff --git a/src/app/modules/library/public-unit-type-selector/public-unit-type-selector.component.ts b/src/app/modules/library/public-unit-type-selector/public-unit-type-selector.component.ts
diff --git a/src/app/services/library.service.ts b/src/app/services/library.service.ts
diff --git a/src/messages.xlf b/src/messages.xlf
