diff --git a/static/src/app/common/user-interface/list-filter/list-filter.component.html b/static/src/app/common/user-interface/list-filter/list-filter.component.html
index 92fdbbf..3801bbe 100644
--- a/static/src/app/common/user-interface/list-filter/list-filter.component.html
+++ b/static/src/app/common/user-interface/list-filter/list-filter.component.html
@@ -5,7 +5,8 @@
diff --git a/static/src/app/common/user-interface/search-field/search-field.component.css b/static/src/app/common/user-interface/search-field/search-field.component.css
new file mode 100644
index 0000000..04be8be
--- /dev/null
+++ b/static/src/app/common/user-interface/search-field/search-field.component.css
@@ -0,0 +1,4 @@
+.list-header {
+ width: 100%;
+ padding-bottom: 20px;
+}
diff --git a/static/src/app/common/user-interface/search-field/search-field.component.html b/static/src/app/common/user-interface/search-field/search-field.component.html
new file mode 100644
index 0000000..a69b3a3
--- /dev/null
+++ b/static/src/app/common/user-interface/search-field/search-field.component.html
@@ -0,0 +1,12 @@
+
diff --git a/static/src/app/common/user-interface/search-field/search-field.component.ts b/static/src/app/common/user-interface/search-field/search-field.component.ts
new file mode 100644
index 0000000..2285d8e
--- /dev/null
+++ b/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);
+ }
+}
diff --git a/static/src/app/decorations/decoration-list/decoration-list.component.html b/static/src/app/decorations/decoration-list/decoration-list.component.html
index 2c1b0d5..ad5ef40 100644
--- a/static/src/app/decorations/decoration-list/decoration-list.component.html
+++ b/static/src/app/decorations/decoration-list/decoration-list.component.html
@@ -8,26 +8,15 @@
(openAddFrom)="openNewDecorationForm()">
-
-
-
-
-
-
+
+
+
+
diff --git a/static/src/app/decorations/decoration-list/decoration-list.component.ts b/static/src/app/decorations/decoration-list/decoration-list.component.ts
index aecedec..390b927 100644
--- a/static/src/app/decorations/decoration-list/decoration-list.component.ts
+++ b/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 location: Location) {
+ private route: ActivatedRoute) {
}
ngOnInit() {
this.decorations$ = this.decorationService.decorations$;
+ }
- const paramsStream = this.route.queryParams
- .map(params => decodeURI(params['query'] || ''))
- .do(query => this.searchTerm.setValue(query));
-
- const searchTermStream = this.searchTerm.valueChanges
- .debounceTime(400)
- .do(query => this.adjustBrowserUrl(query));
-
- Observable.merge(paramsStream, searchTermStream)
+ initObservable(observables: any) {
+ Observable.merge(observables.params as Observable, observables.searchTerm)
.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);
- }
-
}
diff --git a/static/src/app/decorations/decoration.routing.ts b/static/src/app/decorations/decoration.routing.ts
index 57f81ef..b0a2ff0 100644
--- a/static/src/app/decorations/decoration.routing.ts
+++ b/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];
diff --git a/static/src/app/style/select-list.css b/static/src/app/style/select-list.css
index 37868f3..f5628fb 100644
--- a/static/src/app/style/select-list.css
+++ b/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;
-}