uhk/agent
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

refactor: Keymap add component

Browse Source
This commit is contained in:
Farkas József
2017-02-07 20:30:20 +01:00
parent dd9ce4827f
commit 9dcdd6b3b2
2 changed files with 13 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
shared/src/components/keymap/add/keymap-add.component.html
View File

@@ -10,11 +10,11 @@
<input type="text" class="form-control" placeholder="Search ..." (input)="filterKeyboards($event.target.value)"> <input type="text" class="form-control" placeholder="Search ..." (input)="filterKeyboards($event.target.value)">
</div> </div>
<div class="keymap__search_amount"> <div class="keymap__search_amount">
{{ presets.length }} / {{ (presetsAll$ | async).length }} keymaps shown {{ (presets$ | async).length }} / {{ (presetsAll$ | async).length }} keymaps shown
</div> </div>
</div> </div>
<div class="keymap__list"> <div class="keymap__list">
<div #keyboard class="keymap__list_item" *ngFor="let keymap of presets"> <div #keyboard class="keymap__list_item" *ngFor="let keymap of presets$ | async">
<h2>{{ keymap.name }}</h2> <h2>{{ keymap.name }}</h2>
<p class="keymap__description"> <p class="keymap__description">
{{ keymap.description }} {{ keymap.description }}
@@ -30,6 +30,6 @@
</div> </div>
</div> </div>
</div> </div>
<div *ngIf="presets.length === 0"> <div *ngIf="(presets$ | async).length === 0">
Sorry, no keyboard found under this search query. Sorry, no keyboard found under this search query.
</div> </div>

25
shared/src/components/keymap/add/keymap-add.component.ts
View File

@@ -1,10 +1,10 @@
import { Component, OnDestroy } from '@angular/core'; import { Component } from '@angular/core';
import { Store } from '@ngrx/store'; import { Store } from '@ngrx/store';
import 'rxjs/add/operator/combineLatest';
import { BehaviorSubject } from 'rxjs/BehaviorSubject'; import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable'; import { Observable } from 'rxjs/Observable';
import { Subscription } from 'rxjs/Subscription'; import 'rxjs/add/operator/combineLatest';
import 'rxjs/add/operator/publishReplay';
import { Keymap } from '../../../config-serializer/config-items/Keymap'; import { Keymap } from '../../../config-serializer/config-items/Keymap';
import { AppState } from '../../../store'; import { AppState } from '../../../store';
@@ -18,26 +18,21 @@ import { KeymapActions } from '../../../store/actions';
'class': 'container-fluid' 'class': 'container-fluid'
} }
}) })
export class KeymapAddComponent implements OnDestroy { export class KeymapAddComponent {
private presets: Keymap[]; presets$: Observable<Keymap[]>;
private presetsAll$: Observable<Keymap[]>; private presetsAll$: Observable<Keymap[]>;
private filterExpression$: BehaviorSubject<string>; private filterExpression$: BehaviorSubject<string>;
private subscription: Subscription;
constructor(private store: Store<AppState>) { constructor(private store: Store<AppState>) {
this.presetsAll$ = store.select((appState: AppState) => appState.presetKeymaps); this.presetsAll$ = store.select((appState: AppState) => appState.presetKeymaps);
this.filterExpression$ = new BehaviorSubject(''); this.filterExpression$ = new BehaviorSubject('');
this.subscription = this.presetsAll$.combineLatest( this.presets$ = this.presetsAll$
this.filterExpression$, .combineLatest(this.filterExpression$, (keymaps: Keymap[], filterExpression: string) => {
(keymaps: Keymap[], filterExpression: string) => {
return keymaps.filter((keymap: Keymap) => keymap.name.toLocaleLowerCase().includes(filterExpression)); return keymaps.filter((keymap: Keymap) => keymap.name.toLocaleLowerCase().includes(filterExpression));
} })
).subscribe(keymaps => this.presets = keymaps); .publishReplay(1)
} .refCount();
ngOnDestroy() {
this.subscription.unsubscribe();
} }
filterKeyboards(filterExpression: string) { filterKeyboards(filterExpression: string) {