71 lines
2.0 KiB
TypeScript
71 lines
2.0 KiB
TypeScript
|
import {Component, OnInit} from "@angular/core";
|
||
|
import {Location} from "@angular/common";
|
||
|
|
||
|
import {FormControl} from "@angular/forms";
|
||
|
import {ActivatedRoute, Router} from "@angular/router";
|
||
|
import {Observable} from "rxjs/Observable";
|
||
|
import {Squad} from "../../models/model-interfaces";
|
||
|
import {SquadService} from "../../services/squad-service/squad.service";
|
||
|
|
||
|
@Component({
|
||
|
selector: 'squad-list',
|
||
|
templateUrl: './squad-list.component.html',
|
||
|
styleUrls: ['./squad-list.component.css']
|
||
|
})
|
||
|
export class SquadListComponent implements OnInit {
|
||
|
|
||
|
selectedSquadId: string | number = null;
|
||
|
|
||
|
squads$: Observable<Squad[]>;
|
||
|
|
||
|
searchTerm = new FormControl();
|
||
|
|
||
|
fractionRadioSelect: string;
|
||
|
|
||
|
constructor(private squadService: SquadService,
|
||
|
private router: Router,
|
||
|
private route: ActivatedRoute,
|
||
|
private location: Location) {
|
||
|
}
|
||
|
|
||
|
ngOnInit() {
|
||
|
|
||
|
this.squads$ = this.squadService.squads$;
|
||
|
|
||
|
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)
|
||
|
.distinctUntilChanged()
|
||
|
.switchMap(query => this.squadService.findSquads(query, this.fractionRadioSelect))
|
||
|
.subscribe();
|
||
|
|
||
|
}
|
||
|
|
||
|
openNewSquadForm() {
|
||
|
this.router.navigate([{outlets: {'right': ['new']}}], {relativeTo: this.route});
|
||
|
}
|
||
|
|
||
|
selectSquad(squadId: string | number) {
|
||
|
this.selectedSquadId = squadId;
|
||
|
this.router.navigate([{outlets: {'right': ['overview', squadId]}}], {relativeTo: this.route});
|
||
|
}
|
||
|
|
||
|
filterSquadsByFraction(query = '', fractionFilter) {
|
||
|
this.squads$ = this.squadService.findSquads(query, fractionFilter);
|
||
|
}
|
||
|
|
||
|
adjustBrowserUrl(queryString = '') {
|
||
|
const absoluteUrl = this.location.path().split('?')[0];
|
||
|
const queryPart = queryString !== '' ? `query=${queryString}` : '';
|
||
|
|
||
|
this.location.replaceState(absoluteUrl, queryPart);
|
||
|
}
|
||
|
|
||
|
}
|