54053: intermediate commit

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}}
+      <span> ×</span>
+    </a>
+  </div>
+</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';
+
+@Component({
+  selector: 'ds-search-labels',
+  // styleUrls: ['./search-labels.component.scss'],
+  templateUrl: './search-labels.component.html',
+})
+
+export class SearchLabelsComponent {
+  protected appliedFilters: Observable<Params>;
+
+  constructor(private searchService: SearchService, private filterService: SearchFilterService) {
+    this.appliedFilters = this.filterService.getCurrentFilters();
+    console.log(this.appliedFilters.toArray());
+  }
+
+  getQueryParamsWithout(filterName: string, value: string): Observable<Params> {
+    return this.filterService.getCurrentFilters();
+    // return this.filterService.getQueryParamsWithoutByName(filterName, value);
+  }
+
+  getSearchLink() {
+    return this.searchService.getSearchLink();
+  }
+}

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

@@ -10,6 +10,7 @@
                         [currentUrl]="getSearchLink()"
                         [scopes]="(scopeListRD$ | async)?.payload?.page">
         </ds-search-form>
+          <ds-search-labels></ds-search-labels>
       <div class="row">
         <div id="search-body"
              class="row-offcanvas row-offcanvas-left"

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

@@ -21,6 +21,7 @@ import { SearchFiltersComponent } from './search-filters/search-filters.componen
 import { SearchFilterComponent } from './search-filters/search-filter/search-filter.component';
 import { SearchFacetFilterComponent } from './search-filters/search-filter/search-facet-filter/search-facet-filter.component';
 import { SearchFilterService } from './search-filters/search-filter/search-filter.service';
+import { SearchLabelsComponent } from './search-labels/search-labels.component';
 
 const effects = [
   SearchSidebarEffects
@@ -48,7 +49,8 @@ const effects = [
     CommunitySearchResultListElementComponent,
     SearchFiltersComponent,
     SearchFilterComponent,
-    SearchFacetFilterComponent
+    SearchFacetFilterComponent,
+    SearchLabelsComponent
   ],
   providers: [
     SearchService,

src/app/shared/shared.module.ts

@@ -50,6 +50,7 @@ import { DebounceDirective } from './utils/debounce.directive';
 import { ClickOutsideDirective } from './utils/click-outside.directive';
 import { EmphasizePipe } from './utils/emphasize.pipe';
 import { InputSuggestionsComponent } from './input-suggestions/input-suggestions.component';
+import { CapitalizePipe } from './utils/capitalize.pipe';
 
 const MODULES = [
   // Do NOT include UniversalModule, HttpModule, or JsonpModule here
@@ -68,7 +69,8 @@ const PIPES = [
   FileSizePipe,
   SafeUrlPipe,
   TruncatePipe,
-  EmphasizePipe
+  EmphasizePipe,
+  CapitalizePipe
 ];
 
 const COMPONENTS = [

src/app/shared/utils/capitalize.pipe.ts

+import { Pipe, PipeTransform } from '@angular/core'
+
+/**
+ * Pipe to truncate a value in Angular. (Take a substring, starting at 0)
+ * Default value: 10
+ */
+@Pipe({
+  name: 'dsCapitalize'
+})
+export class CapitalizePipe implements PipeTransform {
+  transform(value: string, args: string[]): string {
+    if (value) {
+      return value.charAt(0).toUpperCase() + value.slice(1);
+    }
+    return value;
+  }
+
+}