This commit is contained in:
2020-03-02 18:47:04 +01:00
committed by smuddy
parent 5b746e0db5
commit ccd91aa81c
93 changed files with 444 additions and 89 deletions

View File

@@ -0,0 +1,95 @@
<app-card *ngIf="song" [heading]="song.number + ' bearbeiten'">
<form [formGroup]="form" class="form">
<mat-form-field appearance="outline">
<mat-label>Titel</mat-label>
<input formControlName="title" matInput>
</mat-form-field>
<div class="third">
<mat-form-field appearance="outline">
<mat-label>Typ</mat-label>
<mat-select formControlName="type">
<mat-option *ngFor="let type of types" [value]="type">{{type | songType}}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Tonart</mat-label>
<mat-select formControlName="key">
<mat-option *ngFor="let key of keys" [value]="key">{{key}}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Tempo</mat-label>
<input formControlName="tempo" matInput>
</mat-form-field>
</div>
<mat-form-field appearance="outline">
<mat-label>Songtext</mat-label>
<textarea [mat-autosize]="true" formControlName="text" matInput></textarea>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Kommentar</mat-label>
<textarea [mat-autosize]="true" formControlName="comment" matInput></textarea>
</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>
<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 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>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>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>
</form>
<app-button-row>
<button (click)="onSave()" color="primary" mat-flat-button>Speichern</button>
<button mat-stroked-button routerLink="../">Abbrechen</button>
</app-button-row>
</app-card>

View File

@@ -0,0 +1,18 @@
.form {
margin-top: 20px;
width: 100%;
> * {
width: 100%;
}
.third {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
column-gap: 20px;
}
textarea {
font-family: 'Ubuntu Mono', monospace;
}
}

View File

@@ -0,0 +1,25 @@
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {EditSongComponent} from './edit-song.component';
describe('EditSongComponent', () => {
let component: EditSongComponent;
let fixture: ComponentFixture<EditSongComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [EditSongComponent]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(EditSongComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@@ -0,0 +1,47 @@
import {Component, OnInit} from '@angular/core';
import {Song} from '../../../models/song';
import {FormGroup} from '@angular/forms';
import {ActivatedRoute, Router} from '@angular/router';
import {SongService} from '../../../services/song.service';
import {EditService} from '../edit.service';
import {first, map, switchMap} from 'rxjs/operators';
@Component({
selector: 'app-edit-song',
templateUrl: './edit-song.component.html',
styleUrls: ['./edit-song.component.less']
})
export class EditSongComponent implements OnInit {
public song: Song;
public form: FormGroup;
public keys = this.songService.KEYS;
public types = this.songService.TYPES;
public legalOwner = this.songService.LEGAL_OWNER;
public legalType = this.songService.LEGAL_TYPE;
constructor(
private activatedRoute: ActivatedRoute,
private songService: SongService,
private editService: EditService,
private router: Router
) {
}
public ngOnInit(): void {
this.activatedRoute.params.pipe(
map(param => param.songId),
switchMap(songId => this.songService.read(songId)),
first()
).subscribe(song => {
this.song = song;
this.form = this.editService.createSongForm(song);
});
}
public async onSave(): Promise<void> {
const data = this.form.value;
await this.songService.update(this.song.id, data);
await this.router.navigateByUrl('songs/' + this.song.id);
}
}