diff --git a/src/app/domain/projectFilterValues.ts b/src/app/domain/projectFilterValues.ts
index d08c666595e..72ed147a29d 100644
--- a/src/app/domain/projectFilterValues.ts
+++ b/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';
diff --git a/src/app/modules/library/library-filters/library-filters.component.html b/src/app/modules/library/library-filters/library-filters.component.html
index a61b3be27ec..79e797d46d4 100644
--- a/src/app/modules/library/library-filters/library-filters.component.html
+++ b/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
@@ -25,7 +25,7 @@
Filters
- @if (hasFilters()) {
+ @if (filterValues.hasFilters()) {
Clear all
}
@@ -45,7 +45,7 @@
Filters
placeholderText="Type"
[value]="filterValues.unitTypeValue"
(update)="filterUpdated($event, 'unitType')"
- [valueProp]="'id'"
+ [valueProp]="'name'"
[viewValueProp]="'name'"
[multiple]="true"
/>
@@ -117,7 +117,7 @@
Filters
placeholderText="Features"
[value]="filterValues.featureValue"
(update)="filterUpdated($event, 'feature')"
- valueProp="id"
+ valueProp="name"
viewValueProp="name"
[multiple]="true"
/>
diff --git a/src/app/modules/library/library-filters/library-filters.component.ts b/src/app/modules/library/library-filters/library-filters.component.ts
index 4d557288ef6..b481b36f855 100644
--- a/src/app/modules/library/library-filters/library-filters.component.ts
+++ b/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();
}
}
diff --git a/src/app/modules/library/library/library.component.ts b/src/app/modules/library/library/library.component.ts
index 7177901c042..84df4eb34c0 100644
--- a/src/app/modules/library/library/library.component.ts
+++ b/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();
}
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
index a2a0a1e8de1..b4f278cab07 100644
--- a/src/app/modules/library/public-library/public-library.component.spec.ts
+++ b/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' }