54053: Working active filter labels

src/app/+search-page/search-labels/search-labels.component.html

 <div>
   <div class="labels">
-    <a *ngFor="let value of (appliedFilters | async)" class="badge badge-primary mr-1"
-       [routerLink]="[getSearchLink()]"
-       [queryParams]="getQueryParamsWithout(value.filter, value.value) | async">
-      {{value | dsCapitalize}}
+    <a *ngFor="let label of (appliedFilters | async)" class="badge badge-primary mr-1"
+       [routerLink]="getSearchLink()"
+       [queryParams]="(getRemoveParams(label) | async)" queryParamsHandling="merge">
+      {{label.value}}
       <span> ×</span>
     </a>
   </div>

src/app/+search-page/search-labels/search-labels.component.ts

 import { Component } from '@angular/core';
 import { SearchService } from '../search-service/search.service';
-import { SearchFilterService } from '../search-filters/search-filter/search-filter.service';
 import { Observable } from 'rxjs/Observable';
 import { Params } from '@angular/router';
+import { FilterLabel } from '../search-service/filter-label.model';
+import { map } from 'rxjs/operators';
 
 @Component({
   selector: 'ds-search-labels',
-  // styleUrls: ['./search-labels.component.scss'],
   templateUrl: './search-labels.component.html',
 })
 
 export class SearchLabelsComponent {
-  protected appliedFilters: Observable<Params>;
+  protected appliedFilters: Observable<FilterLabel[]>;
 
-  constructor(private searchService: SearchService, private filterService: SearchFilterService) {
-    this.appliedFilters = this.filterService.getCurrentFilters();
-    console.log(this.appliedFilters.toArray());
+  constructor(private searchService: SearchService) {
+    this.appliedFilters = this.searchService.getFilterLabels();
   }
 
-  getQueryParamsWithout(filterName: string, value: string): Observable<Params> {
-    return this.filterService.getCurrentFilters();
-    // return this.filterService.getQueryParamsWithoutByName(filterName, value);
+  getRemoveParams(filterLabel: FilterLabel): Observable<Params> {
+    return this.appliedFilters.pipe(
+      map((filters) => {
+        const values = [];
+        filters.forEach((filter) => {
+          if (filter.field === filterLabel.field && filter.value !== filterLabel.value) {
+            values.push(filter.value);
+          }
+        });
+        return {
+          [filterLabel.field]: values,
+          page: 1
+        };
+      })
+    );
   }
 
   getSearchLink() {

src/app/+search-page/search-service/filter-label.model.ts

+export class FilterLabel {
+  value: string;
+  field: string;
+  constructor(value: string, field: string) {
+    this.value = value;
+    this.field = field;
+  }
+}

src/app/+search-page/search-service/search.service.ts

 import { Injectable, OnDestroy } from '@angular/core';
 import {
-  ActivatedRoute, NavigationExtras, PRIMARY_OUTLET, Router,
+  ActivatedRoute, NavigationExtras, Params, PRIMARY_OUTLET, Router,
   UrlSegmentGroup
 } from '@angular/router';
 import { Observable } from 'rxjs/Observable';
@@ -40,7 +40,8 @@ import { ListableObject } from '../../shared/object-collection/shared/listable-o
 import { FacetValueResponseParsingService } from '../../core/data/facet-value-response-parsing.service';
 import { FacetConfigResponseParsingService } from '../../core/data/facet-config-response-parsing.service';
 import { PaginatedSearchOptions } from '../paginated-search-options.model';
-import { observable } from 'rxjs/symbol/observable';
+import { FilterLabel } from './filter-label.model';
+import { combineLatest } from 'rxjs/observable/combineLatest';
 
 @Injectable()
 export class SearchService implements OnDestroy {
@@ -223,6 +224,27 @@ export class SearchService implements OnDestroy {
     return this.rdb.toRemoteDataObservable(requestEntryObs, responseCacheObs, payloadObs);
   }
 
+  getFilterLabels(): Observable<FilterLabel[]> {
+    return combineLatest(this.getConfig(), this.route.queryParams).pipe(
+      map(([rd, params]) => {
+        const filterLabels: FilterLabel[] = [];
+        rd.payload.forEach((config: SearchFilterConfig) => {
+          const param = params[config.paramName];
+          if (param !== undefined) {
+            if (param instanceof Array && param.length > 1) {
+              param.forEach((p: string) => {
+                filterLabels.push(new FilterLabel(p, config.paramName))
+              });
+            } else {
+              filterLabels.push(new FilterLabel(param, config.paramName));
+            }
+          }
+        });
+        return filterLabels.filter((n) => n !== undefined && n.value.length > 0);
+      })
+    );
+  }
+
   getViewMode(): Observable<ViewMode> {
     return this.route.queryParams.map((params) => {
       if (isNotEmpty(params.view) && hasValue(params.view)) {