59 lines
1.8 KiB
TypeScript
59 lines
1.8 KiB
TypeScript
import {SongsService} from '../../../data/songs.service';
|
|
import {ChangeDetectionStrategy, ChangeDetectorRef, Component} from '@angular/core';
|
|
import {State} from 'src/app/data/state';
|
|
import {faFileMedical} from '@fortawesome/free-solid-svg-icons';
|
|
import {Observable} from 'rxjs';
|
|
import {map} from 'rxjs/operators';
|
|
|
|
@Component({
|
|
selector: 'app-table',
|
|
templateUrl: './table.component.html',
|
|
styleUrls: ['./table.component.less'],
|
|
changeDetection: ChangeDetectionStrategy.OnPush
|
|
})
|
|
export class TableComponent {
|
|
public selectedSongId = 0;
|
|
public State = State;
|
|
public faNew = faFileMedical;
|
|
public columnsFull = ['Number', 'Name', 'Key', 'SongType', 'Tempo'];
|
|
public columnsPinned = ['Number', 'Name'];
|
|
|
|
constructor(
|
|
public songsService: SongsService,
|
|
private change: ChangeDetectorRef
|
|
) {
|
|
songsService.selectedSong.subscribe(_ => {
|
|
this.selectedSongId = _ ? _.ID : 0;
|
|
this.change.markForCheck();
|
|
}
|
|
);
|
|
}
|
|
|
|
public get columns(): Observable<string[]> {
|
|
return this.songsService.state.pipe(map(_ => _ === State.list ? this.columnsFull : this.columnsPinned));
|
|
}
|
|
|
|
public renderSongType(songType: string) {
|
|
switch (songType) {
|
|
case 'Praise':
|
|
return {name: 'Lobpreis', color: '#99FFB8'};
|
|
case 'Worship':
|
|
return {name: 'Anbetung', color: '#C999FF'};
|
|
default:
|
|
return null;
|
|
}
|
|
}
|
|
|
|
public onClick(id: number): void {
|
|
this.songsService.selectSong(id).subscribe();
|
|
this.change.detectChanges();
|
|
}
|
|
|
|
public onClickNew(): void {
|
|
this.songsService.selectSong(null).subscribe();
|
|
this.songsService.state.next(State.new);
|
|
this.change.detectChanges();
|
|
}
|
|
|
|
}
|