fix(Unit Library): redesign fixes

src/app/domain/projectFilterValues.ts

@@ -47,7 +47,7 @@ export class ProjectFilterValues {
     );
   }
 
-  private hasFilters(): boolean {
+  hasFilters(): boolean {
     return (
       this.standardValue.length +
         this.disciplineValue.length +
@@ -59,6 +59,15 @@ export class ProjectFilterValues {
     );
   }
 
+  clear(): void {
+    this.standardValue = [];
+    this.disciplineValue = [];
+    this.unitTypeValue = [];
+    this.gradeLevelValue = [];
+    this.featureValue = [];
+    this.publicUnitTypeValue = [];
+  }
+
   private matchesUnitType(project: LibraryProject): boolean {
     const unitTypeValue =
       project.metadata.unitType === 'Platform' ? 'WISE Platform' : 'Other Platform';

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

@@ -15,7 +15,7 @@
         matBadgeDescription="Filters applied"
         matBadgeOverlap="true"
         matBadgeSize="small"
-        [matBadgeHidden]="!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 (hasFilters()) {
+    @if (filterValues.hasFilters()) {
       <a href="#" (click)="!!clearFilterValues()" i18n>Clear all</a>
     }
   </div>
@@ -45,7 +45,7 @@ <h3 class="mat-subtitle-2" i18n>Filters</h3>
           placeholderText="Type"
           [value]="filterValues.unitTypeValue"
           (update)="filterUpdated($event, 'unitType')"
-          [valueProp]="'id'"
+          [valueProp]="'name'"
           [viewValueProp]="'name'"
           [multiple]="true"
         />
@@ -117,7 +117,7 @@ <h3 class="mat-subtitle-2" i18n>Filters</h3>
           placeholderText="Features"
           [value]="filterValues.featureValue"
           (update)="filterUpdated($event, 'feature')"
-          valueProp="id"
+          valueProp="name"
           viewValueProp="name"
           [multiple]="true"
         />

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

@@ -143,14 +143,6 @@ export class LibraryFiltersComponent {
     this.gradeLevelOptions.sort((a, b) => a.grade - b.grade);
   }
 
-  protected hasFilters(): boolean {
-    return (
-      this.filterValues.standardValue.length > 0 ||
-      this.filterValues.disciplineValue.length > 0 ||
-      this.filterValues.gradeLevelValue.length > 0
-    );
-  }
-
   protected searchUpdated(value: string): void {
     this.filterValues.searchValue = value.toLocaleLowerCase();
     this.emitFilterValues();
@@ -182,9 +174,7 @@ export class LibraryFiltersComponent {
   }
 
   protected clearFilterValues(): void {
-    this.filterValues.standardValue = [];
-    this.filterValues.disciplineValue = [];
-    this.filterValues.gradeLevelValue = [];
+    this.filterValues.clear();
     this.emitFilterValues();
   }
 }

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

@@ -34,6 +34,7 @@ export abstract class LibraryComponent implements OnInit {
   }
 
   ngOnDestroy(): void {
+    this.filterValues.clear();
     this.subscriptions.unsubscribe();
   }
 

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

@@ -15,7 +15,7 @@ describe('PublicLibraryComponent', () => {
       imports: [PublicLibraryComponent],
       providers: [
         MockProvider(LibraryService, {
-          projectFilterValuesSource$: of({} as ProjectFilterValues),
+          projectFilterValuesSource$: of(new ProjectFilterValues()),
           communityLibraryProjectsSource$: of([
             { id: 1, name: 'P1' },
             { id: 2, name: 'P2' }