123 lines
3.7 KiB
TypeScript
123 lines
3.7 KiB
TypeScript
import {Component, OnInit} from '@angular/core';
|
|
import {Song} from '../../../services/song';
|
|
import {UntypedFormGroup} from '@angular/forms';
|
|
import {ActivatedRoute, Router, RouterStateSnapshot} from '@angular/router';
|
|
import {SongService} from '../../../services/song.service';
|
|
import {EditService} from '../edit.service';
|
|
import {first, map, switchMap} from 'rxjs/operators';
|
|
import {KEYS} from '../../../services/key.helper';
|
|
import {COMMA, ENTER} from '@angular/cdk/keycodes';
|
|
import {MatChipInputEvent} from '@angular/material/chips';
|
|
import {faExternalLinkAlt, faSave, faTimesCircle} from '@fortawesome/free-solid-svg-icons';
|
|
import {MatDialog} from '@angular/material/dialog';
|
|
import {SaveDialogComponent} from './save-dialog/save-dialog.component';
|
|
|
|
@Component({
|
|
selector: 'app-edit-song',
|
|
templateUrl: './edit-song.component.html',
|
|
styleUrls: ['./edit-song.component.less'],
|
|
})
|
|
export class EditSongComponent implements OnInit {
|
|
public song: Song | null = null;
|
|
public form: UntypedFormGroup = new UntypedFormGroup({});
|
|
public keys = KEYS;
|
|
public types = SongService.TYPES;
|
|
public status = SongService.STATUS;
|
|
public legalOwner = SongService.LEGAL_OWNER;
|
|
public legalType = SongService.LEGAL_TYPE;
|
|
public flags: string[] = [];
|
|
public readonly separatorKeysCodes: number[] = [ENTER, COMMA];
|
|
public faRemove = faTimesCircle;
|
|
public faSave = faSave;
|
|
public faLink = faExternalLinkAlt;
|
|
public songtextFocus = false;
|
|
|
|
public constructor(
|
|
private activatedRoute: ActivatedRoute,
|
|
private songService: SongService,
|
|
private editService: EditService,
|
|
private router: Router,
|
|
public dialog: MatDialog
|
|
) {}
|
|
|
|
public ngOnInit(): void {
|
|
this.activatedRoute.params
|
|
.pipe(
|
|
map(param => param as {songId: string}),
|
|
map(param => param.songId),
|
|
switchMap(songId => this.songService.read$(songId)),
|
|
first()
|
|
)
|
|
.subscribe(song => {
|
|
this.song = song;
|
|
if (!song) return;
|
|
this.form = this.editService.createSongForm(song);
|
|
this.form.controls.flags.valueChanges.subscribe(_ => this.onFlagsChanged(_ as string));
|
|
this.onFlagsChanged(this.form.controls.flags.value as string);
|
|
});
|
|
}
|
|
|
|
public async onSave(): Promise<void> {
|
|
if (!this.song) return;
|
|
const data = this.form.value as Partial<Song>;
|
|
await this.songService.update$(this.song.id, data);
|
|
this.form.markAsPristine();
|
|
await this.router.navigateByUrl('songs/' + this.song.id);
|
|
}
|
|
|
|
public removeFlag(flag: string): void {
|
|
const flags = this.flags.filter(_ => _ !== flag);
|
|
this.form.controls.flags.setValue(flags.join(';'));
|
|
}
|
|
|
|
public addFlag(event: MatChipInputEvent): void {
|
|
const input = event.input;
|
|
const value = event.value;
|
|
|
|
// Add our fruit
|
|
if ((value || '').trim()) {
|
|
const flags = [...this.flags, value.trim()];
|
|
this.form.controls.flags.setValue(flags.join(';'));
|
|
}
|
|
|
|
if (input) {
|
|
input.value = '';
|
|
}
|
|
}
|
|
|
|
public askForSave(nextState: RouterStateSnapshot): boolean {
|
|
if (!this.form.dirty) {
|
|
return true;
|
|
}
|
|
|
|
const dialogRef = this.dialog.open(SaveDialogComponent, {
|
|
width: '350px',
|
|
});
|
|
|
|
dialogRef.afterClosed().subscribe((save: boolean) => {
|
|
void this.onSaveDialogAfterClosed(save, nextState.url).then();
|
|
});
|
|
|
|
return false;
|
|
}
|
|
|
|
private onFlagsChanged(flagArray: string): void {
|
|
if (!flagArray) {
|
|
this.flags = [];
|
|
return;
|
|
}
|
|
|
|
this.flags = flagArray.split(';').filter(_ => !!_);
|
|
}
|
|
|
|
private async onSaveDialogAfterClosed(save: boolean, url: string) {
|
|
if (save && this.song) {
|
|
const data = this.form.value as Partial<Song>;
|
|
await this.songService.update$(this.song.id, data);
|
|
}
|
|
|
|
this.form.markAsPristine();
|
|
await this.router.navigateByUrl(url);
|
|
}
|
|
}
|