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' }