Cleanup Code
This commit is contained in:
@@ -1,24 +1,24 @@
|
||||
<div class="song-detail-container">
|
||||
<mat-card class="mat-elevation-z8" *ngIf="form">
|
||||
<mat-card-header>
|
||||
<div mat-card-avatar>
|
||||
<button mat-icon-button (click)="onBack()" color="warn">
|
||||
<fa-icon [icon]="faArrow"></fa-icon>
|
||||
</button>
|
||||
</div>
|
||||
<mat-card-title>Titel bearbeiten</mat-card-title>
|
||||
<mat-card-subtitle>
|
||||
Daten werden nach der Eingabe automatisch gespeichert
|
||||
</mat-card-subtitle>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<app-song-form [form]="form"></app-song-form>
|
||||
</mat-card-content>
|
||||
<!-- <mat-card-actions>
|
||||
<button mat-button (click)="onClickDownload()">Herunterladen</button>
|
||||
<button mat-button (click)="onClickEdit()">
|
||||
<fa-icon [icon]="faEdit"></fa-icon> Bearbeiten
|
||||
</button>
|
||||
</mat-card-actions> -->
|
||||
</mat-card>
|
||||
<mat-card *ngIf="form" class="mat-elevation-z8">
|
||||
<mat-card-header>
|
||||
<div mat-card-avatar>
|
||||
<button (click)="onBack()" color="warn" mat-icon-button>
|
||||
<fa-icon [icon]="faArrow"></fa-icon>
|
||||
</button>
|
||||
</div>
|
||||
<mat-card-title>Titel bearbeiten</mat-card-title>
|
||||
<mat-card-subtitle>
|
||||
Daten werden nach der Eingabe automatisch gespeichert
|
||||
</mat-card-subtitle>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<app-song-form [form]="form"></app-song-form>
|
||||
</mat-card-content>
|
||||
<!-- <mat-card-actions>
|
||||
<button mat-button (click)="onClickDownload()">Herunterladen</button>
|
||||
<button mat-button (click)="onClickEdit()">
|
||||
<fa-icon [icon]="faEdit"></fa-icon> Bearbeiten
|
||||
</button>
|
||||
</mat-card-actions> -->
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -1,38 +1,34 @@
|
||||
import { SongsService } from 'src/app/data/songs.service';
|
||||
import { FormGroup } from '@angular/forms';
|
||||
import {
|
||||
Component,
|
||||
OnInit,
|
||||
ChangeDetectionStrategy,
|
||||
ChangeDetectorRef
|
||||
} from '@angular/core';
|
||||
import { EditSongService } from 'src/app/data/edit-song.service';
|
||||
import { faLongArrowAltLeft } from '@fortawesome/free-solid-svg-icons';
|
||||
import { State } from 'src/app/data/state';
|
||||
import {SongsService} from 'src/app/data/songs.service';
|
||||
import {FormGroup} from '@angular/forms';
|
||||
import {ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit} from '@angular/core';
|
||||
import {EditSongService} from 'src/app/data/edit-song.service';
|
||||
import {faLongArrowAltLeft} from '@fortawesome/free-solid-svg-icons';
|
||||
import {State} from 'src/app/data/state';
|
||||
|
||||
@Component({
|
||||
selector: 'app-song-edit',
|
||||
templateUrl: './song-edit.component.html',
|
||||
styleUrls: ['./song-edit.component.less'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
selector: 'app-song-edit',
|
||||
templateUrl: './song-edit.component.html',
|
||||
styleUrls: ['./song-edit.component.less'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class SongEditComponent implements OnInit {
|
||||
public form: FormGroup = null;
|
||||
public faArrow = faLongArrowAltLeft;
|
||||
public form: FormGroup = null;
|
||||
public faArrow = faLongArrowAltLeft;
|
||||
|
||||
|
||||
constructor(
|
||||
private editSongService: EditSongService,
|
||||
private songsService: SongsService,
|
||||
private change: ChangeDetectorRef
|
||||
) {}
|
||||
constructor(
|
||||
private editSongService: EditSongService,
|
||||
private songsService: SongsService,
|
||||
private change: ChangeDetectorRef
|
||||
) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.form = this.editSongService.initSongEditForm(true);
|
||||
this.change.markForCheck();
|
||||
}
|
||||
ngOnInit() {
|
||||
this.form = this.editSongService.initSongEditForm(true);
|
||||
this.change.markForCheck();
|
||||
}
|
||||
|
||||
public onBack(): void {
|
||||
this.songsService.state = State.read;
|
||||
}
|
||||
public onBack(): void {
|
||||
this.songsService.state = State.read;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
<form *ngIf="form">
|
||||
<mat-form-field>
|
||||
<input
|
||||
matInput
|
||||
placeholder="Dateiname"
|
||||
[formControl]="form.controls.Name"
|
||||
/>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<mat-label>Art</mat-label>
|
||||
<mat-select [formControl]="form.controls.FileType">
|
||||
<mat-option *ngFor="let type of fileTypes" [value]="type.value">
|
||||
{{ type.text }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<input
|
||||
[formControl]="form.controls.Name"
|
||||
matInput
|
||||
placeholder="Dateiname"
|
||||
/>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<mat-label>Art</mat-label>
|
||||
<mat-select [formControl]="form.controls.FileType">
|
||||
<mat-option *ngFor="let type of fileTypes" [value]="type.value">
|
||||
{{ type.text }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</form>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
form {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
grid-column-gap: 10px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
grid-column-gap: 10px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
@@ -1,50 +1,44 @@
|
||||
import { SongsService } from './../../../data/songs.service';
|
||||
import { FileType } from './../../../models/files-types.model.ts';
|
||||
import { FormGroup } from '@angular/forms';
|
||||
import {
|
||||
Component,
|
||||
OnInit,
|
||||
OnDestroy,
|
||||
Input,
|
||||
Output,
|
||||
EventEmitter
|
||||
} from '@angular/core';
|
||||
import { EditSongService } from 'src/app/data/edit-song.service';
|
||||
import { Subscription } from 'rxjs';
|
||||
import {SongsService} from '../../../data/songs.service';
|
||||
import {FileType} from '../../../models/files-types.model.ts';
|
||||
import {FormGroup} from '@angular/forms';
|
||||
import {Component, EventEmitter, Input, OnDestroy, OnInit, Output} from '@angular/core';
|
||||
import {EditSongService} from 'src/app/data/edit-song.service';
|
||||
import {Subscription} from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'app-song-file-edit',
|
||||
templateUrl: './song-file-edit.component.html',
|
||||
styleUrls: ['./song-file-edit.component.less']
|
||||
selector: 'app-song-file-edit',
|
||||
templateUrl: './song-file-edit.component.html',
|
||||
styleUrls: ['./song-file-edit.component.less']
|
||||
})
|
||||
export class SongFileEditComponent implements OnInit, OnDestroy {
|
||||
@Input() fileId: number;
|
||||
@Output() back = new EventEmitter();
|
||||
public form: FormGroup;
|
||||
public subscription: Subscription;
|
||||
public fileTypes = [
|
||||
{ value: FileType.None, text: null },
|
||||
{ value: FileType.Sheet, text: 'Text' },
|
||||
{ value: FileType.Chords, text: 'Text + Akkorde' },
|
||||
{ value: FileType.MuseScore, text: 'MuseScore' }
|
||||
];
|
||||
@Input() fileId: number;
|
||||
@Output() back = new EventEmitter();
|
||||
public form: FormGroup;
|
||||
public subscription: Subscription;
|
||||
public fileTypes = [
|
||||
{value: FileType.None, text: null},
|
||||
{value: FileType.Sheet, text: 'Text'},
|
||||
{value: FileType.Chords, text: 'Text + Akkorde'},
|
||||
{value: FileType.MuseScore, text: 'MuseScore'}
|
||||
];
|
||||
|
||||
constructor(
|
||||
private editSongService: EditSongService,
|
||||
private songService: SongsService
|
||||
) {}
|
||||
constructor(
|
||||
private editSongService: EditSongService,
|
||||
private songService: SongsService
|
||||
) {
|
||||
}
|
||||
|
||||
public ngOnInit(): void {
|
||||
const form = this.editSongService.initFileEditForm(
|
||||
this.songService.selectedSong.value.ID,
|
||||
this.fileId
|
||||
);
|
||||
this.form = form.form;
|
||||
this.subscription = form.changeSubscription;
|
||||
}
|
||||
public ngOnInit(): void {
|
||||
const form = this.editSongService.initFileEditForm(
|
||||
this.songService.selectedSong.value.ID,
|
||||
this.fileId
|
||||
);
|
||||
this.form = form.form;
|
||||
this.subscription = form.changeSubscription;
|
||||
}
|
||||
|
||||
public ngOnDestroy(): void {
|
||||
this.form = null;
|
||||
this.subscription.unsubscribe();
|
||||
}
|
||||
public ngOnDestroy(): void {
|
||||
this.form = null;
|
||||
this.subscription.unsubscribe();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,90 +1,90 @@
|
||||
<div class="song-detail-container files" *ngIf="song">
|
||||
<mat-card class="mat-elevation-z8">
|
||||
<mat-card-content>
|
||||
<table mat-table [dataSource]="song.Files" class="mat-elevation-z8">
|
||||
<ng-container matColumnDef="name">
|
||||
<th mat-header-cell *matHeaderCellDef>
|
||||
Angehängte Dateien
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<span *ngIf="fileEditId !== element.ID">{{ element.Name }}</span>
|
||||
<app-song-file-edit
|
||||
[fileId]="element.ID"
|
||||
(back)="onClickEdit(null)"
|
||||
*ngIf="fileEditId === element.ID"
|
||||
></app-song-file-edit>
|
||||
</td>
|
||||
</ng-container>
|
||||
<div *ngIf="song" class="song-detail-container files">
|
||||
<mat-card class="mat-elevation-z8">
|
||||
<mat-card-content>
|
||||
<table [dataSource]="song.Files" class="mat-elevation-z8" mat-table>
|
||||
<ng-container matColumnDef="name">
|
||||
<th *matHeaderCellDef mat-header-cell>
|
||||
Angehängte Dateien
|
||||
</th>
|
||||
<td *matCellDef="let element" mat-cell>
|
||||
<span *ngIf="fileEditId !== element.ID">{{ element.Name }}</span>
|
||||
<app-song-file-edit
|
||||
(back)="onClickEdit(null)"
|
||||
*ngIf="fileEditId === element.ID"
|
||||
[fileId]="element.ID"
|
||||
></app-song-file-edit>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="action">
|
||||
<th mat-header-cell *matHeaderCellDef>
|
||||
<input
|
||||
type="file"
|
||||
ng2FileSelect
|
||||
[uploader]="newFileUploader"
|
||||
multiple
|
||||
style="display:none"
|
||||
#newFileUploaderRef
|
||||
/>
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="newFileUploaderRef.click()"
|
||||
matTooltip="neue Datei hochladen"
|
||||
matTooltipPosition="left"
|
||||
>
|
||||
<fa-icon [icon]="faFileUpload"></fa-icon>
|
||||
</button>
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="onClickEdit(element.ID)"
|
||||
matTooltip="Eintrag bearbeiten"
|
||||
matTooltipPosition="left"
|
||||
*ngIf="fileEditId !== element.ID"
|
||||
>
|
||||
<fa-icon [icon]="faEdit"></fa-icon>
|
||||
</button>
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="onClickDownload(element.ID, element.Name)"
|
||||
matTooltip="Datei herunterladen"
|
||||
matTooltipPosition="left"
|
||||
*ngIf="fileEditId !== element.ID"
|
||||
>
|
||||
<fa-icon [icon]="faDownload"></fa-icon>
|
||||
</button>
|
||||
<button
|
||||
mat-icon-button
|
||||
matTooltip="Zurück zur Tabelle"
|
||||
matTooltipPosition="left"
|
||||
(click)="onClickEdit(null)"
|
||||
*ngIf="fileEditId === element.ID"
|
||||
>
|
||||
<fa-icon [icon]="faArrow"></fa-icon>
|
||||
</button>
|
||||
<button
|
||||
mat-icon-button
|
||||
matTooltip="Anhang löschen"
|
||||
matTooltipPosition="left"
|
||||
(click)="onClickDelete(element.ID)"
|
||||
*ngIf="fileEditId === element.ID"
|
||||
>
|
||||
<fa-icon [icon]="faTrash"></fa-icon>
|
||||
</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="action">
|
||||
<th *matHeaderCellDef mat-header-cell>
|
||||
<input
|
||||
#newFileUploaderRef
|
||||
[uploader]="newFileUploader"
|
||||
multiple
|
||||
ng2FileSelect
|
||||
style="display:none"
|
||||
type="file"
|
||||
/>
|
||||
<button
|
||||
(click)="newFileUploaderRef.click()"
|
||||
mat-icon-button
|
||||
matTooltip="neue Datei hochladen"
|
||||
matTooltipPosition="left"
|
||||
>
|
||||
<fa-icon [icon]="faFileUpload"></fa-icon>
|
||||
</button>
|
||||
</th>
|
||||
<td *matCellDef="let element" mat-cell>
|
||||
<button
|
||||
(click)="onClickEdit(element.ID)"
|
||||
*ngIf="fileEditId !== element.ID"
|
||||
mat-icon-button
|
||||
matTooltip="Eintrag bearbeiten"
|
||||
matTooltipPosition="left"
|
||||
>
|
||||
<fa-icon [icon]="faEdit"></fa-icon>
|
||||
</button>
|
||||
<button
|
||||
(click)="onClickDownload(element.ID, element.Name)"
|
||||
*ngIf="fileEditId !== element.ID"
|
||||
mat-icon-button
|
||||
matTooltip="Datei herunterladen"
|
||||
matTooltipPosition="left"
|
||||
>
|
||||
<fa-icon [icon]="faDownload"></fa-icon>
|
||||
</button>
|
||||
<button
|
||||
(click)="onClickEdit(null)"
|
||||
*ngIf="fileEditId === element.ID"
|
||||
mat-icon-button
|
||||
matTooltip="Zurück zur Tabelle"
|
||||
matTooltipPosition="left"
|
||||
>
|
||||
<fa-icon [icon]="faArrow"></fa-icon>
|
||||
</button>
|
||||
<button
|
||||
(click)="onClickDelete(element.ID)"
|
||||
*ngIf="fileEditId === element.ID"
|
||||
mat-icon-button
|
||||
matTooltip="Anhang löschen"
|
||||
matTooltipPosition="left"
|
||||
>
|
||||
<fa-icon [icon]="faTrash"></fa-icon>
|
||||
</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<tr
|
||||
mat-header-row
|
||||
*matHeaderRowDef="columns"
|
||||
ng2FileDrop
|
||||
[uploader]="newFileUploader"
|
||||
(fileOver)="onFileOverNew($event)"
|
||||
[class.file-over]="fileOverNew"
|
||||
></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: columns"></tr>
|
||||
</table>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<tr
|
||||
(fileOver)="onFileOverNew($event)"
|
||||
*matHeaderRowDef="columns"
|
||||
[class.file-over]="fileOverNew"
|
||||
[uploader]="newFileUploader"
|
||||
mat-header-row
|
||||
ng2FileDrop
|
||||
></tr>
|
||||
<tr *matRowDef="let row; columns: columns" mat-row></tr>
|
||||
</table>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
@@ -5,11 +5,12 @@
|
||||
button {
|
||||
font-size: 24px;
|
||||
color: #aaa;
|
||||
|
||||
&:hover {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
tr.file-over {
|
||||
background: #f908;
|
||||
background: #f908;
|
||||
}
|
||||
|
||||
@@ -1,74 +1,71 @@
|
||||
import { switchMap } from 'rxjs/operators';
|
||||
import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
|
||||
import { Song } from 'src/app/models/song.model';
|
||||
import { SongsService } from 'src/app/data/songs.service';
|
||||
import { DownloadService } from 'src/app/data/download.service';
|
||||
import {
|
||||
faFileUpload,
|
||||
faDownload,
|
||||
faEdit,
|
||||
faLongArrowAltLeft,
|
||||
faTrash
|
||||
} from '@fortawesome/free-solid-svg-icons';
|
||||
import { FileuploadFactory } from 'src/app/services/fileupload.factory';
|
||||
import { FileUploader } from 'ng2-file-upload';
|
||||
import {switchMap} from 'rxjs/operators';
|
||||
import {ChangeDetectorRef, Component} from '@angular/core';
|
||||
import {Song} from 'src/app/models/song.model';
|
||||
import {SongsService} from 'src/app/data/songs.service';
|
||||
import {DownloadService} from 'src/app/data/download.service';
|
||||
import {faDownload, faEdit, faFileUpload, faLongArrowAltLeft, faTrash} from '@fortawesome/free-solid-svg-icons';
|
||||
import {FileuploadFactory} from 'src/app/services/fileupload.factory';
|
||||
import {FileUploader} from 'ng2-file-upload';
|
||||
|
||||
@Component({
|
||||
selector: 'app-song-files',
|
||||
templateUrl: './song-files.component.html',
|
||||
styleUrls: ['./song-files.component.less']
|
||||
selector: 'app-song-files',
|
||||
templateUrl: './song-files.component.html',
|
||||
styleUrls: ['./song-files.component.less']
|
||||
})
|
||||
export class SongFilesComponent {
|
||||
public song: Song;
|
||||
public selectedSongId = 0;
|
||||
public faFileUpload = faFileUpload;
|
||||
public faTrash = faTrash;
|
||||
public faArrow = faLongArrowAltLeft;
|
||||
public faDownload = faDownload;
|
||||
public faEdit = faEdit;
|
||||
public columns = ['name', 'action'];
|
||||
public newFileUploader: FileUploader;
|
||||
public fileEditId: number;
|
||||
public song: Song;
|
||||
public selectedSongId = 0;
|
||||
public faFileUpload = faFileUpload;
|
||||
public faTrash = faTrash;
|
||||
public faArrow = faLongArrowAltLeft;
|
||||
public faDownload = faDownload;
|
||||
public faEdit = faEdit;
|
||||
public columns = ['name', 'action'];
|
||||
public newFileUploader: FileUploader;
|
||||
public fileEditId: number;
|
||||
|
||||
public fileOverNew = false;
|
||||
public fileOverNew = false;
|
||||
|
||||
constructor(
|
||||
private downloadService: DownloadService,
|
||||
private fileuploadFactory: FileuploadFactory,
|
||||
private songService: SongsService,
|
||||
change: ChangeDetectorRef
|
||||
) {
|
||||
songService.selectedSong.subscribe(_ => {
|
||||
if (_) {
|
||||
this.selectedSongId = _.ID;
|
||||
this.song = _;
|
||||
this.newFileUploader = this.fileuploadFactory.provideForNewFiles(_.ID);
|
||||
this.newFileUploader.onCompleteItem = () =>
|
||||
songService.selectSong(_.ID).subscribe();
|
||||
this.newFileUploader.onProgressItem = () => change.markForCheck;
|
||||
} else {
|
||||
this.selectedSongId = 0;
|
||||
this.song = null;
|
||||
this.newFileUploader = null;
|
||||
}
|
||||
change.markForCheck();
|
||||
});
|
||||
}
|
||||
constructor(
|
||||
private downloadService: DownloadService,
|
||||
private fileuploadFactory: FileuploadFactory,
|
||||
private songService: SongsService,
|
||||
change: ChangeDetectorRef
|
||||
) {
|
||||
songService.selectedSong.subscribe(_ => {
|
||||
if (_) {
|
||||
this.selectedSongId = _.ID;
|
||||
this.song = _;
|
||||
this.newFileUploader = FileuploadFactory.provideForNewFiles(_.ID);
|
||||
this.newFileUploader.onCompleteItem = () =>
|
||||
songService.selectSong(_.ID).subscribe();
|
||||
this.newFileUploader.onProgressItem = () => change.markForCheck;
|
||||
} else {
|
||||
this.selectedSongId = 0;
|
||||
this.song = null;
|
||||
this.newFileUploader = null;
|
||||
}
|
||||
change.markForCheck();
|
||||
});
|
||||
}
|
||||
|
||||
public onClickDownload(fileId: number, filename): void {
|
||||
this.downloadService.get(this.selectedSongId, fileId, filename);
|
||||
}
|
||||
public onFileOverNew(hover: boolean): void {
|
||||
this.fileOverNew = hover;
|
||||
}
|
||||
public onClickEdit(fileId: number): void {
|
||||
this.fileEditId = fileId;
|
||||
}
|
||||
public onClickDelete(fileId: number): void {
|
||||
const songId = this.song.ID;
|
||||
this.songService
|
||||
.deleteFile$(songId, fileId)
|
||||
.pipe(switchMap(() => this.songService.selectSong(songId)))
|
||||
.subscribe();
|
||||
}
|
||||
public onClickDownload(fileId: number, filename): void {
|
||||
this.downloadService.get(this.selectedSongId, fileId, filename);
|
||||
}
|
||||
|
||||
public onFileOverNew(hover: boolean): void {
|
||||
this.fileOverNew = hover;
|
||||
}
|
||||
|
||||
public onClickEdit(fileId: number): void {
|
||||
this.fileEditId = fileId;
|
||||
}
|
||||
|
||||
public onClickDelete(fileId: number): void {
|
||||
const songId = this.song.ID;
|
||||
this.songService
|
||||
.deleteFile$(songId, fileId)
|
||||
.pipe(switchMap(() => this.songService.selectSong(songId)))
|
||||
.subscribe();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -33,4 +33,4 @@ export const keys = [
|
||||
'A#',
|
||||
'b',
|
||||
'h'
|
||||
];
|
||||
];
|
||||
|
||||
@@ -1,53 +1,53 @@
|
||||
<form>
|
||||
<mat-form-field>
|
||||
<input
|
||||
matInput
|
||||
placeholder="Titel"
|
||||
[formControl]="form.controls.Name"
|
||||
/>
|
||||
<input
|
||||
[formControl]="form.controls.Name"
|
||||
matInput
|
||||
placeholder="Titel"
|
||||
/>
|
||||
</mat-form-field>
|
||||
<div class="row">
|
||||
<mat-radio-group [formControl]="form.controls.SongType">
|
||||
<mat-radio-button value="Praise">Lobpreis</mat-radio-button>
|
||||
<mat-radio-button value="Worship">Anbetung</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
<mat-form-field>
|
||||
<input
|
||||
matInput
|
||||
placeholder="Nummer"
|
||||
[formControl]="form.controls.Number"
|
||||
/>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<mat-label>Tonart</mat-label>
|
||||
<mat-select [formControl]="form.controls.Key">
|
||||
<mat-option *ngFor="let key of keys" [value]="key">
|
||||
{{ key }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<input
|
||||
matInput
|
||||
placeholder="Tempo"
|
||||
[formControl]="form.controls.Tempo"
|
||||
/>
|
||||
</mat-form-field>
|
||||
<mat-radio-group [formControl]="form.controls.SongType">
|
||||
<mat-radio-button value="Praise">Lobpreis</mat-radio-button>
|
||||
<mat-radio-button value="Worship">Anbetung</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
<mat-form-field>
|
||||
<input
|
||||
[formControl]="form.controls.Number"
|
||||
matInput
|
||||
placeholder="Nummer"
|
||||
/>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<mat-label>Tonart</mat-label>
|
||||
<mat-select [formControl]="form.controls.Key">
|
||||
<mat-option *ngFor="let key of keys" [value]="key">
|
||||
{{ key }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<input
|
||||
[formControl]="form.controls.Tempo"
|
||||
matInput
|
||||
placeholder="Tempo"
|
||||
/>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<mat-form-field>
|
||||
<textarea
|
||||
matInput
|
||||
placeholder="Liedtext"
|
||||
[formControl]="form.controls.Text"
|
||||
[matTextareaAutosize]="true"
|
||||
[formControl]="form.controls.Text"
|
||||
[matTextareaAutosize]="true"
|
||||
matInput
|
||||
placeholder="Liedtext"
|
||||
></textarea>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<textarea
|
||||
matInput
|
||||
placeholder="Kommentare"
|
||||
[formControl]="form.controls.Comments"
|
||||
[matTextareaAutosize]="true"
|
||||
[formControl]="form.controls.Comments"
|
||||
[matTextareaAutosize]="true"
|
||||
matInput
|
||||
placeholder="Kommentare"
|
||||
></textarea>
|
||||
</mat-form-field>
|
||||
</form>
|
||||
</mat-form-field>
|
||||
</form>
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: 3fr 1fr 1fr 1fr;
|
||||
grid-column-gap: 20px;
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: 3fr 1fr 1fr 1fr;
|
||||
grid-column-gap: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
import { FormGroup } from '@angular/forms';
|
||||
import { Component, Input } from '@angular/core';
|
||||
import { keys } from './keys';
|
||||
import {FormGroup} from '@angular/forms';
|
||||
import {Component, Input} from '@angular/core';
|
||||
import {keys} from './keys';
|
||||
|
||||
@Component({
|
||||
selector: 'app-song-form',
|
||||
templateUrl: './song-form.component.html',
|
||||
styleUrls: ['./song-form.component.less']
|
||||
selector: 'app-song-form',
|
||||
templateUrl: './song-form.component.html',
|
||||
styleUrls: ['./song-form.component.less']
|
||||
})
|
||||
export class SongFormComponent {
|
||||
@Input() public form: FormGroup;
|
||||
public keys = keys;
|
||||
export class SongFormComponent {
|
||||
@Input() public form: FormGroup;
|
||||
public keys = keys;
|
||||
}
|
||||
|
||||
@@ -1,22 +1,23 @@
|
||||
<div class="song-detail-container">
|
||||
<mat-card class="mat-elevation-z8" *ngIf="form">
|
||||
<mat-card-header>
|
||||
<div mat-card-avatar>
|
||||
<button mat-icon-button (click)="onBack()" color="warn">
|
||||
<fa-icon [icon]="faArrow"></fa-icon>
|
||||
</button>
|
||||
</div>
|
||||
<mat-card-title>Neuen Titel anlegen</mat-card-title>
|
||||
<mat-card-subtitle>
|
||||
</mat-card-subtitle>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<app-song-form [form]="form"></app-song-form>
|
||||
</mat-card-content>
|
||||
<mat-card-actions>
|
||||
<button mat-button (click)="onClickAdd()">
|
||||
<fa-icon [icon]="faSave"></fa-icon> neu anlegen
|
||||
</button>
|
||||
</mat-card-actions>
|
||||
<mat-card *ngIf="form" class="mat-elevation-z8">
|
||||
<mat-card-header>
|
||||
<div mat-card-avatar>
|
||||
<button (click)="onBack()" color="warn" mat-icon-button>
|
||||
<fa-icon [icon]="faArrow"></fa-icon>
|
||||
</button>
|
||||
</div>
|
||||
<mat-card-title>Neuen Titel anlegen</mat-card-title>
|
||||
<mat-card-subtitle>
|
||||
</mat-card-subtitle>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<app-song-form [form]="form"></app-song-form>
|
||||
</mat-card-content>
|
||||
<mat-card-actions>
|
||||
<button (click)="onClickAdd()" mat-button>
|
||||
<fa-icon [icon]="faSave"></fa-icon>
|
||||
neu anlegen
|
||||
</button>
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,39 +1,40 @@
|
||||
import { EditSongService } from './../../../data/edit-song.service';
|
||||
import { FormGroup } from '@angular/forms';
|
||||
import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
|
||||
import { faLongArrowAltLeft, faSave } from '@fortawesome/free-solid-svg-icons';
|
||||
import { State } from 'src/app/data/state';
|
||||
import { SongsService } from 'src/app/data/songs.service';
|
||||
import {EditSongService} from '../../../data/edit-song.service';
|
||||
import {FormGroup} from '@angular/forms';
|
||||
import {ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit} from '@angular/core';
|
||||
import {faLongArrowAltLeft, faSave} from '@fortawesome/free-solid-svg-icons';
|
||||
import {State} from 'src/app/data/state';
|
||||
import {SongsService} from 'src/app/data/songs.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-song-new',
|
||||
templateUrl: './song-new.component.html',
|
||||
styleUrls: ['./song-new.component.less'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
selector: 'app-song-new',
|
||||
templateUrl: './song-new.component.html',
|
||||
styleUrls: ['./song-new.component.less'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class SongNewComponent implements OnInit {
|
||||
public faArrow = faLongArrowAltLeft;
|
||||
public faSave = faSave;
|
||||
public form: FormGroup;
|
||||
public faArrow = faLongArrowAltLeft;
|
||||
public faSave = faSave;
|
||||
public form: FormGroup;
|
||||
|
||||
constructor(
|
||||
private editSongService: EditSongService,
|
||||
private songsService: SongsService,
|
||||
private change: ChangeDetectorRef
|
||||
) { }
|
||||
constructor(
|
||||
private editSongService: EditSongService,
|
||||
private songsService: SongsService,
|
||||
private change: ChangeDetectorRef
|
||||
) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.form = this.editSongService.initSongEditForm(false);
|
||||
this.change.markForCheck();
|
||||
}
|
||||
ngOnInit() {
|
||||
this.form = this.editSongService.initSongEditForm(false);
|
||||
this.change.markForCheck();
|
||||
}
|
||||
|
||||
public onBack(): void {
|
||||
this.songsService.state = State.list;
|
||||
this.songsService.resetSelectedSong();
|
||||
}
|
||||
public onBack(): void {
|
||||
this.songsService.state = State.list;
|
||||
this.songsService.resetSelectedSong();
|
||||
}
|
||||
|
||||
public onClickAdd(): void {
|
||||
this.songsService.saveNewSong$(this.form.value).subscribe();
|
||||
}
|
||||
public onClickAdd(): void {
|
||||
this.songsService.saveNewSong$(this.form.value).subscribe();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,29 +1,32 @@
|
||||
<div class="song-detail-container" *ngIf="song">
|
||||
<mat-card class="mat-elevation-z8">
|
||||
<mat-card-header>
|
||||
<div mat-card-avatar>
|
||||
<button mat-icon-button (click)="onBack()" color="warn">
|
||||
<fa-icon [icon]="faArrow"></fa-icon>
|
||||
</button>
|
||||
</div>
|
||||
<mat-card-title>{{ song.Name }}</mat-card-title>
|
||||
<mat-card-subtitle>
|
||||
<mat-chip-list>
|
||||
<mat-chip *ngIf="renderSongType(song.SongType)" [style.background]="renderSongType(song.SongType).color">{{ renderSongType(song.SongType).name }}</mat-chip>
|
||||
<mat-chip *ngIf="song.Key">Tonart: {{ song.Key }}</mat-chip>
|
||||
<mat-chip *ngIf="song.Tempo">Tempo: {{ song.Tempo }}</mat-chip>
|
||||
</mat-chip-list></mat-card-subtitle
|
||||
>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<p *ngFor="let line of text">{{ line }}</p>
|
||||
<br />
|
||||
<p *ngFor="let line of comments">{{ line }}</p>
|
||||
</mat-card-content>
|
||||
<mat-card-actions>
|
||||
<button mat-button (click)="onClickEdit()">
|
||||
<fa-icon [icon]="faEdit"></fa-icon> bearbeiten
|
||||
</button>
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
<div *ngIf="song" class="song-detail-container">
|
||||
<mat-card class="mat-elevation-z8">
|
||||
<mat-card-header>
|
||||
<div mat-card-avatar>
|
||||
<button (click)="onBack()" color="warn" mat-icon-button>
|
||||
<fa-icon [icon]="faArrow"></fa-icon>
|
||||
</button>
|
||||
</div>
|
||||
<mat-card-title>{{ song.Name }}</mat-card-title>
|
||||
<mat-card-subtitle>
|
||||
<mat-chip-list>
|
||||
<mat-chip *ngIf="renderSongType(song.SongType)"
|
||||
[style.background]="renderSongType(song.SongType).color">{{ renderSongType(song.SongType).name }}</mat-chip>
|
||||
<mat-chip *ngIf="song.Key">Tonart: {{ song.Key }}</mat-chip>
|
||||
<mat-chip *ngIf="song.Tempo">Tempo: {{ song.Tempo }}</mat-chip>
|
||||
</mat-chip-list>
|
||||
</mat-card-subtitle
|
||||
>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<p *ngFor="let line of text">{{ line }}</p>
|
||||
<br/>
|
||||
<p *ngFor="let line of comments">{{ line }}</p>
|
||||
</mat-card-content>
|
||||
<mat-card-actions>
|
||||
<button (click)="onClickEdit()" mat-button>
|
||||
<fa-icon [icon]="faEdit"></fa-icon>
|
||||
bearbeiten
|
||||
</button>
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
@@ -1,62 +1,61 @@
|
||||
import { SongsService } from 'src/app/data/songs.service';
|
||||
import {
|
||||
Component,
|
||||
ChangeDetectionStrategy,
|
||||
ChangeDetectorRef
|
||||
} from '@angular/core';
|
||||
import { faLongArrowAltLeft, faEdit } from '@fortawesome/free-solid-svg-icons';
|
||||
import { Song } from 'src/app/models/song.model';
|
||||
import { DownloadService } from 'src/app/data/download.service';
|
||||
import { State } from 'src/app/data/state';
|
||||
import {SongsService} from 'src/app/data/songs.service';
|
||||
import {ChangeDetectionStrategy, ChangeDetectorRef, Component} from '@angular/core';
|
||||
import {faEdit, faLongArrowAltLeft} from '@fortawesome/free-solid-svg-icons';
|
||||
import {Song} from 'src/app/models/song.model';
|
||||
import {State} from 'src/app/data/state';
|
||||
|
||||
@Component({
|
||||
selector: 'app-song',
|
||||
templateUrl: './song.component.html',
|
||||
styleUrls: ['./song.component.less'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
selector: 'app-song',
|
||||
templateUrl: './song.component.html',
|
||||
styleUrls: ['./song.component.less'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class SongComponent {
|
||||
public song: Song;
|
||||
public faArrow = faLongArrowAltLeft;
|
||||
public faEdit = faEdit;
|
||||
public selectedSongId = 0;
|
||||
public song: Song;
|
||||
public faArrow = faLongArrowAltLeft;
|
||||
public faEdit = faEdit;
|
||||
public selectedSongId = 0;
|
||||
|
||||
constructor(
|
||||
private songService: SongsService,
|
||||
change: ChangeDetectorRef
|
||||
) {
|
||||
songService.selectedSong.subscribe(_ => {
|
||||
if (_) {
|
||||
this.selectedSongId = _.ID;
|
||||
this.song = _;
|
||||
} else {
|
||||
this.selectedSongId = 0;
|
||||
this.song = null;
|
||||
}
|
||||
change.markForCheck();
|
||||
});
|
||||
}
|
||||
public onBack(): void {
|
||||
this.songService.resetSelectedSong();
|
||||
}
|
||||
|
||||
public onClickEdit(): void {
|
||||
this.songService.state = State.edit;
|
||||
}
|
||||
|
||||
public get text(): string[] {
|
||||
return this.song && this.song.Text ? this.song.Text.split(/\r?\n/) : [];
|
||||
}
|
||||
|
||||
public get comments(): string[] {
|
||||
return this.song && this.song.Comments ? this.song.Comments.split(/\r?\n/) : [];
|
||||
}
|
||||
|
||||
public renderSongType(songType: string) {
|
||||
switch (songType) {
|
||||
case 'Praise': return {name: 'Lobpreis', color: '#99FFB8'};
|
||||
case 'Worship': return {name: 'Anbetung', color: '#C999FF'};
|
||||
default: return null;
|
||||
constructor(
|
||||
private songService: SongsService,
|
||||
change: ChangeDetectorRef
|
||||
) {
|
||||
songService.selectedSong.subscribe(_ => {
|
||||
if (_) {
|
||||
this.selectedSongId = _.ID;
|
||||
this.song = _;
|
||||
} else {
|
||||
this.selectedSongId = 0;
|
||||
this.song = null;
|
||||
}
|
||||
change.markForCheck();
|
||||
});
|
||||
}
|
||||
|
||||
public get text(): string[] {
|
||||
return this.song && this.song.Text ? this.song.Text.split(/\r?\n/) : [];
|
||||
}
|
||||
|
||||
public get comments(): string[] {
|
||||
return this.song && this.song.Comments ? this.song.Comments.split(/\r?\n/) : [];
|
||||
}
|
||||
|
||||
public onBack(): void {
|
||||
this.songService.resetSelectedSong();
|
||||
}
|
||||
|
||||
public onClickEdit(): void {
|
||||
this.songService.state = State.edit;
|
||||
}
|
||||
|
||||
public renderSongType(songType: string) {
|
||||
switch (songType) {
|
||||
case 'Praise':
|
||||
return {name: 'Lobpreis', color: '#99FFB8'};
|
||||
case 'Worship':
|
||||
return {name: 'Anbetung', color: '#C999FF'};
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<app-table></app-table>
|
||||
<app-song-edit [@blend] *ngIf="songsService.state === State.edit"></app-song-edit>
|
||||
<app-song-new [@blend] *ngIf="songsService.state === State.new"></app-song-new>
|
||||
<app-song [@blend] *ngIf="songsService.state === State.read"></app-song>
|
||||
<app-song-files [@blend] *ngIf="songsService.state === State.read"></app-song-files>
|
||||
<app-song-edit *ngIf="songsService.state === State.edit" [@blend]></app-song-edit>
|
||||
<app-song-new *ngIf="songsService.state === State.new" [@blend]></app-song-new>
|
||||
<app-song *ngIf="songsService.state === State.read" [@blend]></app-song>
|
||||
<app-song-files *ngIf="songsService.state === State.read" [@blend]></app-song-files>
|
||||
|
||||
@@ -1,17 +1,18 @@
|
||||
import { blend } from 'src/app/services/animation';
|
||||
import { Component } from '@angular/core';
|
||||
import { SongsService } from 'src/app/data/songs.service';
|
||||
import { State } from 'src/app/data/state';
|
||||
import {blend} from 'src/app/services/animation';
|
||||
import {Component} from '@angular/core';
|
||||
import {SongsService} from 'src/app/data/songs.service';
|
||||
import {State} from 'src/app/data/state';
|
||||
|
||||
@Component({
|
||||
selector: 'app-songs',
|
||||
templateUrl: './songs.component.html',
|
||||
styleUrls: ['./songs.component.less'],
|
||||
animations: [blend]
|
||||
selector: 'app-songs',
|
||||
templateUrl: './songs.component.html',
|
||||
styleUrls: ['./songs.component.less'],
|
||||
animations: [blend]
|
||||
})
|
||||
export class SongsComponent {
|
||||
public State = State;
|
||||
constructor(public songsService: SongsService) {
|
||||
songsService.loadSongList$().subscribe();
|
||||
}
|
||||
public State = State;
|
||||
|
||||
constructor(public songsService: SongsService) {
|
||||
songsService.loadSongList$().subscribe();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,75 +1,75 @@
|
||||
<div
|
||||
class="page-container mat-elevation-z8"
|
||||
[class.pinned]="songsService.state !== State.list"
|
||||
[class.pinned]="songsService.state !== State.list"
|
||||
class="page-container mat-elevation-z8"
|
||||
>
|
||||
<div class="table-container">
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="onClickNew()"
|
||||
class="button-new"
|
||||
matTooltip="neuen Titel anlegen"
|
||||
matTooltipPosition="left"
|
||||
>
|
||||
<fa-icon [icon]="faNew"></fa-icon>
|
||||
</button>
|
||||
<table
|
||||
mat-table
|
||||
[dataSource]="songsService.songs | async"
|
||||
class="mat-elevation-z8"
|
||||
>
|
||||
<ng-container matColumnDef="Number">
|
||||
<th mat-header-cell *matHeaderCellDef>#</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<mat-chip-list>
|
||||
<mat-chip>{{ element.Number }}</mat-chip>
|
||||
</mat-chip-list>
|
||||
</td>
|
||||
</ng-container>
|
||||
<div class="table-container">
|
||||
<button
|
||||
(click)="onClickNew()"
|
||||
class="button-new"
|
||||
mat-icon-button
|
||||
matTooltip="neuen Titel anlegen"
|
||||
matTooltipPosition="left"
|
||||
>
|
||||
<fa-icon [icon]="faNew"></fa-icon>
|
||||
</button>
|
||||
<table
|
||||
[dataSource]="songsService.songs | async"
|
||||
class="mat-elevation-z8"
|
||||
mat-table
|
||||
>
|
||||
<ng-container matColumnDef="Number">
|
||||
<th *matHeaderCellDef mat-header-cell>#</th>
|
||||
<td *matCellDef="let element" mat-cell>
|
||||
<mat-chip-list>
|
||||
<mat-chip>{{ element.Number }}</mat-chip>
|
||||
</mat-chip-list>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="Name">
|
||||
<th mat-header-cell *matHeaderCellDef>Titel</th>
|
||||
<td mat-cell *matCellDef="let element">{{ element.Name }}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="Name">
|
||||
<th *matHeaderCellDef mat-header-cell>Titel</th>
|
||||
<td *matCellDef="let element" mat-cell>{{ element.Name }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="Key">
|
||||
<th mat-header-cell *matHeaderCellDef></th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<mat-chip-list *ngIf="element.Key">
|
||||
<mat-chip>{{ element.Key }}</mat-chip>
|
||||
</mat-chip-list>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="Key">
|
||||
<th *matHeaderCellDef mat-header-cell></th>
|
||||
<td *matCellDef="let element" mat-cell>
|
||||
<mat-chip-list *ngIf="element.Key">
|
||||
<mat-chip>{{ element.Key }}</mat-chip>
|
||||
</mat-chip-list>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="SongType">
|
||||
<th mat-header-cell *matHeaderCellDef></th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<mat-chip-list
|
||||
*ngIf="element.SongType && element.SongType !== 'None'"
|
||||
>
|
||||
<mat-chip
|
||||
[style.background-color]="renderSongType(element.SongType).color"
|
||||
>{{ renderSongType(element.SongType).name }}</mat-chip
|
||||
>
|
||||
</mat-chip-list>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="SongType">
|
||||
<th *matHeaderCellDef mat-header-cell></th>
|
||||
<td *matCellDef="let element" mat-cell>
|
||||
<mat-chip-list
|
||||
*ngIf="element.SongType && element.SongType !== 'None'"
|
||||
>
|
||||
<mat-chip
|
||||
[style.background-color]="renderSongType(element.SongType).color"
|
||||
>{{ renderSongType(element.SongType).name }}</mat-chip
|
||||
>
|
||||
</mat-chip-list>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="Tempo">
|
||||
<th mat-header-cell *matHeaderCellDef></th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<mat-chip-list *ngIf="element.Tempo">
|
||||
<mat-chip>{{ element.Tempo }}</mat-chip>
|
||||
</mat-chip-list>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="Tempo">
|
||||
<th *matHeaderCellDef mat-header-cell></th>
|
||||
<td *matCellDef="let element" mat-cell>
|
||||
<mat-chip-list *ngIf="element.Tempo">
|
||||
<mat-chip>{{ element.Tempo }}</mat-chip>
|
||||
</mat-chip-list>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="columns; sticky: true"></tr>
|
||||
<tr
|
||||
[class.selected]="selectedSongId === row.ID"
|
||||
mat-row
|
||||
*matRowDef="let row; columns: columns"
|
||||
(click)="onClick(row.ID)"
|
||||
></tr>
|
||||
</table>
|
||||
</div>
|
||||
<tr *matHeaderRowDef="columns; sticky: true" mat-header-row></tr>
|
||||
<tr
|
||||
(click)="onClick(row.ID)"
|
||||
*matRowDef="let row; columns: columns"
|
||||
[class.selected]="selectedSongId === row.ID"
|
||||
mat-row
|
||||
></tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -17,6 +17,7 @@ table {
|
||||
font-size: 24px;
|
||||
z-index: 1000;
|
||||
color: #aaa;
|
||||
|
||||
&:hover {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
@@ -1,56 +1,56 @@
|
||||
import { SongsService } from './../../../data/songs.service';
|
||||
import {
|
||||
Component,
|
||||
ChangeDetectionStrategy,
|
||||
ChangeDetectorRef
|
||||
} from '@angular/core';
|
||||
import { State } from 'src/app/data/state';
|
||||
import { faFileMedical } from '@fortawesome/free-solid-svg-icons';
|
||||
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';
|
||||
|
||||
@Component({
|
||||
selector: 'app-table',
|
||||
templateUrl: './table.component.html',
|
||||
styleUrls: ['./table.component.less'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
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'];
|
||||
public get columns(): string[] {
|
||||
return this.songsService.state === State.list ? this.columnsFull : this.columnsPinned;
|
||||
}
|
||||
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 renderSongType(songType: string) {
|
||||
switch (songType) {
|
||||
case 'Praise': return {name: 'Lobpreis', color: '#99FFB8'};
|
||||
case 'Worship': return {name: 'Anbetung', color: '#C999FF'};
|
||||
default: return null;
|
||||
constructor(
|
||||
public songsService: SongsService,
|
||||
private change: ChangeDetectorRef
|
||||
) {
|
||||
songsService.selectedSong.subscribe(_ => {
|
||||
this.selectedSongId = _ ? _.ID : 0;
|
||||
this.change.markForCheck();
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
public onClick(id: number): void {
|
||||
this.songsService.selectSong(id).subscribe();
|
||||
this.change.detectChanges();
|
||||
}
|
||||
public get columns(): string[] {
|
||||
return this.songsService.state === State.list ? this.columnsFull : this.columnsPinned;
|
||||
}
|
||||
|
||||
public onClickNew(): void {
|
||||
this.songsService.selectSong(null).subscribe();
|
||||
this.songsService.state = State.new;
|
||||
this.change.detectChanges();
|
||||
}
|
||||
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 = State.new;
|
||||
this.change.detectChanges();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user