86 lines
2.8 KiB
TypeScript
86 lines
2.8 KiB
TypeScript
import {Component, Input, OnInit, ViewChild} from '@angular/core';
|
|
import {ShowSongService} from '../../services/show-song.service';
|
|
import {ShowSong} from '../../services/show-song';
|
|
import {getScale} from '../../../songs/services/key.helper';
|
|
import {UntypedFormControl} from '@angular/forms';
|
|
import {ChordMode} from '../../../../widget-modules/components/song-text/song-text.component';
|
|
import {Show} from '../../services/show';
|
|
import {faEraser, faPenToSquare, faSave, faTrash} from '@fortawesome/free-solid-svg-icons';
|
|
import {fade} from '../../../../animations';
|
|
import {MatSelect} from '@angular/material/select';
|
|
|
|
@Component({
|
|
selector: 'app-song',
|
|
templateUrl: './song.component.html',
|
|
styleUrls: ['./song.component.less'],
|
|
animations: [fade],
|
|
})
|
|
export class SongComponent implements OnInit {
|
|
@Input() public show: Show | null = null;
|
|
@Input() public showId: string | null = null;
|
|
@Input() public showText: boolean | null = null;
|
|
@Input() public index = -1;
|
|
@Input() public fullscreen = false;
|
|
|
|
@ViewChild('option') private keyOptions: MatSelect;
|
|
|
|
public keys: string[] = [];
|
|
public faDelete = faTrash;
|
|
public faEdit = faPenToSquare;
|
|
public faSave = faSave;
|
|
public faEraser = faEraser;
|
|
public keyFormControl: UntypedFormControl = new UntypedFormControl();
|
|
public iSong: ShowSong | null = null;
|
|
public edit = false;
|
|
public editSongControl = new UntypedFormControl();
|
|
|
|
public constructor(private showSongService: ShowSongService) {}
|
|
|
|
@Input()
|
|
public set showSong(song: ShowSong) {
|
|
this.iSong = song;
|
|
this.keys = song ? getScale(song.key) : [];
|
|
}
|
|
|
|
public ngOnInit(): void {
|
|
if (!this.iSong) return;
|
|
this.keyFormControl = new UntypedFormControl(this.iSong.key);
|
|
this.keyFormControl.valueChanges.subscribe((value: string) => {
|
|
if (!this.showId || !this.iSong) return;
|
|
void this.showSongService.update$(this.showId, this.iSong.id, {key: value});
|
|
});
|
|
}
|
|
|
|
public onEdit(): void {
|
|
if (this.iSong) this.editSongControl.setValue(this.iSong.text);
|
|
this.edit = true;
|
|
}
|
|
|
|
public onDiscard(): void {
|
|
this.editSongControl.setValue(null);
|
|
this.edit = false;
|
|
}
|
|
|
|
public onSave(): void {
|
|
if (this.showId && this.iSong) void this.showSongService.update$(this.showId, this.iSong.id, {text: this.editSongControl.value as string});
|
|
this.editSongControl.setValue(null);
|
|
this.edit = false;
|
|
}
|
|
|
|
public async onDelete(): Promise<void> {
|
|
if (!this.showId || !this.iSong || this.index === -1) return;
|
|
await this.showSongService.delete$(this.showId, this.iSong.id, this.index);
|
|
}
|
|
|
|
public async onChordModeChanged(value: ChordMode): Promise<void> {
|
|
if (!this.showId || !this.iSong) return;
|
|
await this.showSongService.update$(this.showId, this.iSong.id, {
|
|
chordMode: value,
|
|
});
|
|
}
|
|
|
|
public openKeySelect(): void {
|
|
this.keyOptions.open();
|
|
}
|
|
}
|