login
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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();
|
||||
});
|
||||
});
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user