From 8931337d2d12539ee396c43bb6b699c20e9ad124 Mon Sep 17 00:00:00 2001
From: Kristof De Langhe <kristof.delanghe@atmire.com>
Date: Wed, 4 Jul 2018 15:56:29 +0200
Subject: [PATCH] 54053: intermediate commit

---
 .../search-labels.component.html              | 10 +++++++
 .../search-labels/search-labels.component.ts  | 29 +++++++++++++++++++
 .../+search-page/search-page.component.html   |  1 +
 src/app/+search-page/search-page.module.ts    |  4 ++-
 src/app/shared/shared.module.ts               |  4 ++-
 src/app/shared/utils/capitalize.pipe.ts       | 18 ++++++++++++
 6 files changed, 64 insertions(+), 2 deletions(-)
 create mode 100644 src/app/+search-page/search-labels/search-labels.component.html
 create mode 100644 src/app/+search-page/search-labels/search-labels.component.ts
 create mode 100644 src/app/shared/utils/capitalize.pipe.ts

diff --git a/src/app/+search-page/search-labels/search-labels.component.html b/src/app/+search-page/search-labels/search-labels.component.html
new file mode 100644
index 0000000000..2a2f63aa09
--- /dev/null
+++ b/src/app/+search-page/search-labels/search-labels.component.html
@@ -0,0 +1,10 @@
+<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>
diff --git a/src/app/+search-page/search-labels/search-labels.component.ts b/src/app/+search-page/search-labels/search-labels.component.ts
new file mode 100644
index 0000000000..2692322bee
--- /dev/null
+++ b/src/app/+search-page/search-labels/search-labels.component.ts
@@ -0,0 +1,29 @@
+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();
+  }
+}
diff --git a/src/app/+search-page/search-page.component.html b/src/app/+search-page/search-page.component.html
index 1a1f379920..1ef45ede4b 100644
--- a/src/app/+search-page/search-page.component.html
+++ b/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"
diff --git a/src/app/+search-page/search-page.module.ts b/src/app/+search-page/search-page.module.ts
index 1468fe532e..8d658eb5c8 100644
--- a/src/app/+search-page/search-page.module.ts
+++ b/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,
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 2e8b40e5a5..ddab8bc43f 100644
--- a/src/app/shared/shared.module.ts
+++ b/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 = [
diff --git a/src/app/shared/utils/capitalize.pipe.ts b/src/app/shared/utils/capitalize.pipe.ts
new file mode 100644
index 0000000000..454eb5d845
--- /dev/null
+++ b/src/app/shared/utils/capitalize.pipe.ts
@@ -0,0 +1,18 @@
+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;
+  }
+
+}