diff --git a/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.html b/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.html index 40247215ce1..2d07b90e7f3 100644 --- a/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.html +++ b/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.html @@ -1,12 +1,18 @@ -@if (isVisible | async) { - - {{filterValue.label}} - - {{filterValue.count | dsShortNumber}} + + + {{ filterValue.label }} + @if (isChecked$ | async) { + + } + + + + {{ filterValue.count | dsShortNumber }} - -} + + diff --git a/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.spec.ts b/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.spec.ts index 68600517d79..7e51df57d19 100644 --- a/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.spec.ts +++ b/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.spec.ts @@ -153,11 +153,12 @@ describe('SearchFacetRangeOptionComponent', () => { }); describe('when isVisible emits false', () => { - it('the facet option should not be visible', () => { + it('the facet option should still be visible (active filter can be deselected)', () => { comp.isVisible = of(false); fixture.detectChanges(); const linkEl = fixture.debugElement.query(By.css('a')); - expect(linkEl).toBeNull(); + expect(linkEl).not.toBeNull(); + expect(linkEl.nativeElement.classList).toContain('selected'); }); }); }); diff --git a/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.ts b/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.ts index 5a9a9fa4ae4..bc97a6cab0c 100644 --- a/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.ts +++ b/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.ts @@ -83,6 +83,16 @@ export class SearchFacetRangeOptionComponent implements OnInit, OnDestroy { */ searchLink: string; + /** + * UI parameters when this filter is removed (deselect) + */ + removeQueryParams: Params; + + /** + * Observable que indica si esta opción de filtro está actualmente activa + */ + isChecked$: Observable; + constructor(protected searchService: SearchService, protected filterService: SearchFilterService, protected searchConfigService: SearchConfigurationService, @@ -95,6 +105,7 @@ export class SearchFacetRangeOptionComponent implements OnInit, OnDestroy { * Initializes all observable instance variables and starts listening to them */ ngOnInit(): void { + this.isChecked$ = this.isChecked(); this.searchLink = this.getSearchLink(); this.isVisible = this.isChecked().pipe(map((checked: boolean) => !checked)); this.sub = this.searchConfigService.searchOptions.subscribe(() => { @@ -132,6 +143,11 @@ export class SearchFacetRangeOptionComponent implements OnInit, OnDestroy { [this.filterConfig.paramName + RANGE_FILTER_MAX_SUFFIX]: max === new Date().getUTCFullYear() ? null : [max], [page]: 1, }; + this.removeQueryParams = { + [this.filterConfig.paramName + RANGE_FILTER_MIN_SUFFIX]: null, + [this.filterConfig.paramName + RANGE_FILTER_MAX_SUFFIX]: null, + [page]: 1, + }; } /**