opt-cc/static/src/app/ranks/rank-list/rank-list.component.ts

81 lines
2.3 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 {Rank} from "../../models/model-interfaces";
import {RankService} from "../../services/rank-service/rank.service";
@Component({
selector: 'rank-list',
templateUrl: './rank-list.component.html',
styleUrls: ['./rank-list.component.css', '../../style/select-list.css']
})
export class RankListComponent implements OnInit {
selectedRankId: string | number = null;
ranks$: Observable<Rank[]>;
searchTerm = new FormControl();
fractionRadioSelect: string;
constructor(private rankService: RankService,
private router: Router,
private route: ActivatedRoute,
private location: Location) {
}
ngOnInit() {
this.ranks$ = this.rankService.ranks$;
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.rankService.findRanks(query, this.fractionRadioSelect))
.subscribe();
}
openNewRankForm() {
this.selectedRankId = null;
this.router.navigate([{outlets: {'right': ['new']}}], {relativeTo: this.route});
}
selectRank(rankId: string | number) {
this.selectedRankId = rankId;
this.router.navigate([{outlets: {'right': ['edit', rankId]}}], {relativeTo: this.route});
}
filterRanksByFraction(query = '', fractionFilter) {
this.ranks$ = this.rankService.findRanks(query, fractionFilter);
}
deleteRank(rank) {
const fraction = rank.fraction === 'OPFOR' ? 'CSAT' : 'NATO';
if (confirm('Soll der Rang ' + rank.name + ' (' + fraction + ') wirklich gelöscht werden?')) {
this.rankService.deleteRank(rank)
.subscribe((res) => {
})
}
}
adjustBrowserUrl(queryString = '') {
const absoluteUrl = this.location.path().split('?')[0];
const queryPart = queryString !== '' ? `query=${queryString}` : '';
this.location.replaceState(absoluteUrl, queryPart);
}
}