mtas-tv-frontend/src/app/admin/team-editor/team-editor.component.ts
2018-09-11 16:10:47 +02:00

138 lines
3.7 KiB
TypeScript
Executable File

import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Title } from '@angular/platform-browser';
import { TeamService } from '../../shared/service/team.service';
import { Team } from '../../shared/team';
import { Member } from '../../shared/member';
import { Label } from '../../shared/label';
import {NgForm, NgModel} from '@angular/forms';
@Component({
selector: 'app-team-editor',
templateUrl: './team-editor.component.html',
styleUrls: ['./team-editor.component.css']
})
export class TeamEditorComponent implements OnInit {
@ViewChild('labelInput') labelInputElement: ElementRef;
@ViewChild('signumInput') signumInputElement: ElementRef;
public team: Team;
public label: Label = new Label();
public member: Member = new Member();
constructor(private teamService: TeamService,
private titleService: Title,
private route: ActivatedRoute,
private router: Router) {
}
ngOnInit() {
this.titleService.setTitle('Team editor : MTAStv');
this.route.data.subscribe((data: { team: Team }) => this.team = data.team ? data.team : new Team());
}
get labelColors(): Array<string> {
return [
'red',
'orange',
'yellow',
'olive',
'green',
'teal',
'blue',
'violet',
'purple',
'pink',
'brown',
'grey',
'black',
'white'
];
}
get canAddLabel(): boolean {
try {
return [this.label.name, this.label.color].every(field => field.length !== 0)
&& this.team.labels.every(label => label.name !== this.label.name);
} catch (e) {
return false;
}
}
public addLabel() {
this.team.labels = this.team.labels
.concat(Object.assign({}, this.label))
.sort((a: Label, b: Label) => a.name < b.name ? -1 : 1);
this.label = new Label();
}
public removeLabel(label: Label) {
this.team.labels = this.team.labels.filter(teamLabel => teamLabel !== label);
}
public handleLabelEnter(ev: KeyboardEvent) {
ev.preventDefault();
if (this.canAddLabel) {
this.addLabel();
this.focusLabelField();
}
}
public focusLabelField() {
this.labelInputElement.nativeElement.focus();
}
get canAddMember(): boolean {
try {
return [this.member.name, this.member.signum].every(field => field.length !== 0)
&& this.team.members.every(member => member.signum !== this.member.signum);
} catch (e) {
return false;
}
}
public addMember() {
this.team.members = this.team.members
.concat(Object.assign({}, this.member))
.sort((a: Member, b: Member) => a.signum < b.signum ? -1 : 1);
this.member = new Member();
}
public handleEnter(ev: KeyboardEvent) {
ev.preventDefault();
if (this.canAddMember) {
this.addMember();
this.focusSignumField();
}
}
public focusSignumField() {
this.signumInputElement.nativeElement.focus();
}
public removeMember(signum: String) {
if (confirm(`Remove the member with signum ${signum}?`)) {
this.team.members = this.team.members.filter(member => member.signum !== signum);
}
}
public canSave(form: NgForm): boolean {
return form.valid && [
this.team.name.trim(),
this.team.members
].every(field => field.length > 0) && this.team.filterId > 0;
}
public saveTeam(form: NgForm) {
if (this.canSave(form)) {
this.teamService.persist(this.team).subscribe(
() => this.router.navigate(['/admin/teams'])
);
}
}
public checkError(fieldModel: NgModel): boolean {
return fieldModel.invalid && (fieldModel.dirty || fieldModel.touched);
}
}