hardi
/
opt-cc
1
0
Fork 0
Code Pull Requests Releases 47 Activity

refactor filter input field into standalone component

pull/40/head
HardiReady 2018-07-08 17:59:11 +02:00
parent 0255e63c3a
commit f4a9ef7a9d
8 changed files with 77 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>

4
static/src/app/common/user-interface/search-field/search-field.component.css Normal file
View File

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

12
static/src/app/common/user-interface/search-field/search-field.component.html Normal file
View File

@ -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>

43
static/src/app/common/user-interface/search-field/search-field.component.ts Normal file
View File

@ -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);
}
}

19
static/src/app/decorations/decoration-list/decoration-list.component.html
View File

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

24
static/src/app/decorations/decoration-list/decoration-list.component.ts
View File

@ -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<string>, 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);
}
}

3
static/src/app/decorations/decoration.routing.ts
View File

@ -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];

16
static/src/app/style/select-list.css
View File

@ -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;
}