refactor filter input field into standalone component

static/src/app/common/user-interface/list-filter/list-filter.component.html

@@ -5,7 +5,8 @@
     </mat-button-toggle>
   </mat-button-toggle-group>
   <button mat-icon-button class="add-btn">
-    <mat-icon svgIcon="{{addButton.svgIcon}}" title="addButton.tooltip"
+    <mat-icon svgIcon="{{addButton.svgIcon}}"
+              title="{{addButton.tooltip}}"
               (click)="add()"></mat-icon>
   </button>
 </div>

static/src/app/common/user-interface/search-field/search-field.component.css

@@ -0,0 +1,4 @@
+.list-header {
+  width: 100%;
+  padding-bottom: 20px;
+}

static/src/app/common/user-interface/search-field/search-field.component.html

@@ -0,0 +1,12 @@
+<div class="input-group list-header">
+    <input id="search-field"
+           type="text" #query class="form-control"
+           (keyup.enter)="emitSearch()"
+           [formControl]="searchTerm">
+    <span class="input-group-btn">
+      <button class="btn btn-default" type="button"
+            (click)="emitSearch()">
+      Suchen
+      </button>
+    </span>
+</div>

static/src/app/common/user-interface/search-field/search-field.component.ts

@@ -0,0 +1,43 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {Location} from '@angular/common';
+import {ActivatedRoute} from '@angular/router';
+
+@Component({
+  selector: 'cc-list-search',
+  templateUrl: './search-field.component.html',
+  styleUrls: ['./search-field.component.css']
+})
+export class SearchFieldComponent {
+
+  @Input() searchTerm;
+
+  @Output() executeSearch = new EventEmitter();
+
+  @Output() searchTermStream = new EventEmitter();
+
+  constructor(private route:ActivatedRoute,
+              private location: Location) {
+  }
+
+  ngOnInit() {
+    const paramsObservable = this.route.queryParams
+                             .map(params => decodeURI(params['query'] || ''))
+                             .do(query => this.searchTerm.setValue(query));
+
+    const searchTermObservable = this.searchTerm.valueChanges
+                                .debounceTime(400)
+                                .do(query => this.adjustBrowserUrl(query));
+    this.searchTermStream.emit({params: paramsObservable, searchTerm: searchTermObservable});
+  }
+
+  emitSearch() {
+    this.executeSearch.emit();
+  }
+
+  adjustBrowserUrl(queryString = '') {
+    const absoluteUrl = this.location.path().split('?')[0];
+    const queryPart = queryString !== '' ? `query=${queryString}` : '';
+
+    this.location.replaceState(absoluteUrl, queryPart);
+  }
+}

static/src/app/decorations/decoration-list/decoration-list.component.html

@@ -8,26 +8,15 @@
     (openAddFrom)="openNewDecorationForm()">
   </cc-list-filter>
 
-  <div class="input-group list-header">
+  <cc-list-search [searchTerm]="searchTerm"
-    <input id="search-tasks"
+                  (searchTermStream)="initObservable($event)"
-           type="text" #query class="form-control"
+                  (executeSearch)="filterDecorations()">
-           (keyup.enter)="filterDecorations()"
+  </cc-list-search>
-           [formControl]="searchTerm">
-    <span class="input-group-btn">
-      <button class="btn btn-default" type="button"
-              (click)="filterDecorations()">
-        Suchen
-      </button>
-    </span>
-  </div>
-
-  <div>
-    <decoration-item *ngFor="let decoration of decorations$ | async"
-                     [decoration]="decoration"
-                     (decorationDelete)="deleteDecoration(decoration)"
-                     (decorationSelected)="selectDecoration($event)"
-                     [selected]="decoration._id == selectedDecorationId">
-    </decoration-item>
-  </div>
 
+  <decoration-item *ngFor="let decoration of decorations$ | async"
+                   [decoration]="decoration"
+                   (decorationDelete)="deleteDecoration(decoration)"
+                   (decorationSelected)="selectDecoration($event)"
+                   [selected]="decoration._id == selectedDecorationId">
+  </decoration-item>
 </div>

static/src/app/decorations/decoration-list/decoration-list.component.ts

@@ -1,5 +1,4 @@
 import {Component, OnInit} from '@angular/core';
-import {Location} from '@angular/common';
 
 import {FormControl} from '@angular/forms';
 import {ActivatedRoute, Router} from '@angular/router';
@@ -29,22 +28,15 @@ export class DecorationListComponent implements OnInit {
 
   constructor(private decorationService: DecorationService,
               private router: Router,
-              private route: ActivatedRoute,
+              private route: ActivatedRoute) {
-              private location: Location) {
   }
 
   ngOnInit() {
     this.decorations$ = this.decorationService.decorations$;
+  }
 
-    const paramsStream = this.route.queryParams
+  initObservable(observables: any) {
-                             .map(params => decodeURI(params['query'] || ''))
+    Observable.merge(observables.params as Observable<string>, observables.searchTerm)
-                             .do(query => this.searchTerm.setValue(query));
-
-    const searchTermStream = this.searchTerm.valueChanges
-                                 .debounceTime(400)
-                                 .do(query => this.adjustBrowserUrl(query));
-
-    Observable.merge(paramsStream, searchTermStream)
               .distinctUntilChanged()
               .switchMap(query => this.decorationService.findDecorations(query, this.radioModel))
               .subscribe();
@@ -79,12 +71,4 @@ export class DecorationListComponent implements OnInit {
     this.radioModel = UIHelpers.toggleReleaseButton(this.radioModel, group);
     this.decorations$ = this.decorationService.findDecorations(this.searchTerm.value, this.radioModel);
   }
-
-  adjustBrowserUrl(queryString = '') {
-    const absoluteUrl = this.location.path().split('?')[0];
-    const queryPart = queryString !== '' ? `query=${queryString}` : '';
-
-    this.location.replaceState(absoluteUrl, queryPart);
-  }
-
 }

static/src/app/decorations/decoration.routing.ts

@@ -5,6 +5,7 @@ import {EditDecorationComponent} from './edit-decoration/edit-decoration.compone
 import {ModuleWithProviders} from '@angular/core';
 import {DecorationItemComponent} from './decoration-list/decoration-item.component';
 import {ListFilterComponent} from '../common/user-interface/list-filter/list-filter.component';
+import {SearchFieldComponent} from '../common/user-interface/search-field/search-field.component';
 
 export const decorationsRoutes: Routes = [{
   path: '', component: DecorationComponent,
@@ -29,5 +30,5 @@ export const decorationsRoutes: Routes = [{
 export const decorationRoutesModule: ModuleWithProviders = RouterModule.forChild(decorationsRoutes);
 
 export const decorationsRoutingComponents = [DecorationItemComponent, DecorationComponent, DecorationListComponent,
-  EditDecorationComponent, ListFilterComponent];
+  EditDecorationComponent, ListFilterComponent, SearchFieldComponent];
 

static/src/app/style/select-list.css

@@ -1,19 +1,3 @@
 .select-list {
   padding: 20px 2% 0 5%;
 }
-
-.list-header {
-  width: 100%;
-  padding-bottom: 20px;
-}
-
-.add-btn {
-  margin-right: 16px;
-  margin-top: -3px;
-  float: right;
-}
-
-:host/deep/.mat-icon {
-  height: 32px;
-  width: 32px;
-}