benjamin/wgenerator
1
0
Fork 0
Code Releases Activity

ui enhancements and song state

Browse Source
This commit is contained in:
smuddyx
2020-04-25 22:29:34 +02:00
committed by smuddy
parent 01d13ccea9
commit 4c5a8c972c
43 changed files with 297 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
src/app/modules/songs/song/edit/edit-song/edit-song.component.html
View File

@@ -1,4 +1,4 @@
<app-card *ngIf="song" [heading]="song.number + ' bearbeiten'">
<app-card *ngIf="song" [heading]="song.number + ' bearbeiten'" closeLink="../">
<form [formGroup]="form" class="form">
<mat-form-field appearance="outline">
@@ -6,7 +6,7 @@
<input formControlName="title" matInput>
</mat-form-field>
<div class="third">
<div class="fourth">
<mat-form-field appearance="outline">
<mat-label>Typ</mat-label>
<mat-select formControlName="type">
@@ -23,6 +23,12 @@
<mat-label>Tempo</mat-label>
<input formControlName="tempo" matInput>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Status</mat-label>
<mat-select formControlName="status">
<mat-option *ngFor="let status of status" [value]="status">{{status | status}}</mat-option>
</mat-select>
</mat-form-field>
</div>
<mat-form-field appearance="outline">
@@ -50,60 +56,61 @@
</mat-chip-list>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Rechtlicher Status</mat-label>
<mat-select formControlName="legalType">
<mat-option *ngFor="let key of legalType" [value]="key">{{key|legalType}}</mat-option>
</mat-select>
</mat-form-field>
<div class="half">
<mat-form-field appearance="outline">
<mat-label>Rechtlicher Status</mat-label>
<mat-select formControlName="legalType">
<mat-option *ngFor="let key of legalType" [value]="key">{{key|legalType}}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Rechteinhaber</mat-label>
<mat-select formControlName="legalOwner">
<mat-option *ngFor="let key of legalOwner" [value]="key">{{key|legalOwner}}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Rechteinhaber</mat-label>
<mat-select formControlName="legalOwner">
<mat-option *ngFor="let key of legalOwner" [value]="key">{{key|legalOwner}}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Rechteinhaber Link</mat-label>
<input formControlName="legalLink" matInput>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Rechteinhaber Link</mat-label>
<input formControlName="legalLink" matInput>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Rechteinhaber ID (z.B. CCLI Liednummer)</mat-label>
<input formControlName="legalOwnerId" matInput>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Rechteinhaber ID (z.B. CCLI Liednummer)</mat-label>
<input formControlName="legalOwnerId" matInput>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Lizenznummer</mat-label>
<input formControlName="legalLicenseId" matInput>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Lizenznummer</mat-label>
<input formControlName="legalLicenseId" matInput>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Künstler</mat-label>
<input formControlName="artist" matInput>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Künstler</mat-label>
<input formControlName="artist" matInput>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Verlag</mat-label>
<input formControlName="label" matInput>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Verlag</mat-label>
<input formControlName="label" matInput>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Nutzungsbedingungen</mat-label>
<input formControlName="termsOfUse" matInput>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Nutzungsbedingungen</mat-label>
<input formControlName="termsOfUse" matInput>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>abweichende Quelle</mat-label>
<input formControlName="origin" matInput>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>abweichende Quelle</mat-label>
<input formControlName="origin" matInput>
</mat-form-field>
</div>
</form>
<app-button-row>
<button (click)="onSave()" color="primary" mat-flat-button>Speichern</button>
<button mat-stroked-button routerLink="../">Abbrechen</button>
<button (click)="onSave()" mat-button>Speichern</button>
</app-button-row>
</app-card>

13
src/app/modules/songs/song/edit/edit-song/edit-song.component.less
View File

@@ -6,9 +6,18 @@
width: 100%;
}
.third {
.fourth {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr 1fr;
@media screen and (max-width: 860px) {
grid-template-columns: 1fr 1fr;
}
column-gap: 20px;
}
.half {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 20px;
}

8
src/app/modules/songs/song/edit/edit-song/edit-song.component.ts
View File

@@ -20,6 +20,7 @@ export class EditSongComponent implements OnInit {
public form: FormGroup;
public keys = KEYS;
public types = SongService.TYPES;
public status = SongService.STATUS;
public legalOwner = SongService.LEGAL_OWNER;
public legalType = SongService.LEGAL_TYPE;
public flags: string[] = [];
@@ -37,7 +38,7 @@ export class EditSongComponent implements OnInit {
public ngOnInit(): void {
this.activatedRoute.params.pipe(
map(param => param.songId),
switchMap(songId => this.songService.read(songId)),
switchMap(songId => this.songService.read$(songId)),
first()
).subscribe(song => {
this.song = song;
@@ -55,7 +56,7 @@ export class EditSongComponent implements OnInit {
public removeFlag(flag: string): void {
const flags = this.flags.filter(_ => _ !== flag);
this.form.controls.flags.setValue(flags.reduce((a, b) => `${a};${b}`, ''));
this.form.controls.flags.setValue(flags.join(';'));
}
public addFlag(event: MatChipInputEvent): void {
@@ -65,14 +66,13 @@ export class EditSongComponent implements OnInit {
// Add our fruit
if ((value || '').trim()) {
const flags = [...this.flags, value.trim()];
this.form.controls.flags.setValue(flags.reduce((a, b) => `${a};${b}`, ''));
this.form.controls.flags.setValue(flags.join(';'));
}
if (input) input.value = '';
}
private onFlagsChanged(flagArray: string): void {
console.log(flagArray);
if (!flagArray) {
this.flags = [];
return;

2
src/app/modules/songs/song/edit/edit.module.ts
View File

@@ -19,6 +19,7 @@ import {LegalTypeTranslatorModule} from '../../../../widget-modules/pipes/legal-
import {KeyTranslatorModule} from '../../../../widget-modules/pipes/key-translator/key-translator.module';
import {MatChipsModule} from '@angular/material/chips';
import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
import {StatusTranslaterModule} from '../../../../widget-modules/pipes/status-translater/status-translater.module';
@NgModule({
@@ -43,6 +44,7 @@ import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
KeyTranslatorModule,
MatChipsModule,
FontAwesomeModule,
StatusTranslaterModule,
]
})

1
src/app/modules/songs/song/edit/edit.service.ts
View File

@@ -19,6 +19,7 @@ export class EditService {
key: new FormControl(song.key),
tempo: new FormControl(song.tempo),
type: new FormControl(song.type),
status: new FormControl(song.status ?? 'draft'),
legalType: new FormControl(song.legalType),
legalLink: new FormControl(song.legalLink),