login

src/app/modules/songs/song/edit/edit-file/edit-file.component.html

@@ -0,0 +1,22 @@
+<app-card heading="Angehängte Dateien">
+
+
+  <div *ngIf="currentUpload">
+    <div class="progress">
+      <div [ngStyle]="{ 'width': currentUpload?.progress + '%' }" class="progress-bar progress-bar-animated"></div>
+    </div>
+    Progress: {{currentUpload?.name}} | {{currentUpload?.progress}}% Complete
+  </div>
+  <div class="upload">
+    <label>
+      <input (change)="detectFiles($event)" type="file">
+    </label>
+
+    <button (click)="uploadSingle()"
+            [disabled]="!selectedFiles"
+            mat-icon-button>
+      <mat-icon>cloud_upload</mat-icon>
+    </button>
+  </div>
+</app-card>
+

src/app/modules/songs/song/edit/edit-file/edit-file.component.less

@@ -0,0 +1,5 @@
+.upload {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}

src/app/modules/songs/song/edit/edit-file/edit-file.component.spec.ts

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

src/app/modules/songs/song/edit/edit-file/edit-file.component.ts

@@ -0,0 +1,36 @@
+import {Component} from '@angular/core';
+import {Upload} from '../../../services/upload';
+import {UploadService} from '../../../services/upload.service';
+import {ActivatedRoute} from '@angular/router';
+import {map} from 'rxjs/operators';
+
+@Component({
+  selector: 'app-edit-file',
+  templateUrl: './edit-file.component.html',
+  styleUrls: ['./edit-file.component.less']
+})
+export class EditFileComponent {
+
+  public selectedFiles: FileList;
+  public currentUpload: Upload;
+  public songId: string;
+
+  constructor(private activatedRoute: ActivatedRoute, private uploadService: UploadService) {
+    this.activatedRoute.params.pipe(
+      map(param => param.songId),
+    ).subscribe(songId => {
+      this.songId = songId;
+    });
+  }
+
+  detectFiles(event) {
+    this.selectedFiles = event.target.files;
+  }
+
+  public async uploadSingle() {
+    const file = this.selectedFiles.item(0);
+    this.currentUpload = new Upload(file as any);
+    await this.uploadService.pushUpload(this.songId, this.currentUpload);
+  }
+
+}

src/app/modules/songs/song/edit/edit-file/file/file.component.html

@@ -0,0 +1 @@
+<p>file works!</p>

src/app/modules/songs/song/edit/edit-file/file/file.component.spec.ts

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

src/app/modules/songs/song/edit/edit-file/file/file.component.ts

@@ -0,0 +1,16 @@
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'app-file',
+  templateUrl: './file.component.html',
+  styleUrls: ['./file.component.less']
+})
+export class FileComponent implements OnInit {
+
+  constructor() {
+  }
+
+  ngOnInit() {
+  }
+
+}

src/app/modules/songs/song/edit/edit-song/edit-song.component.html

@@ -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>
+

src/app/modules/songs/song/edit/edit-song/edit-song.component.less

@@ -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;
+  }
+}

src/app/modules/songs/song/edit/edit-song/edit-song.component.spec.ts

@@ -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();
+  });
+});

src/app/modules/songs/song/edit/edit-song/edit-song.component.ts

@@ -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);
+  }
+
+}

src/app/modules/songs/song/edit/edit.component.html

@@ -0,0 +1,2 @@
+<app-edit-song></app-edit-song>
+<app-edit-file></app-edit-file>

src/app/modules/songs/song/edit/edit.component.spec.ts

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

src/app/modules/songs/song/edit/edit.component.ts

@@ -0,0 +1,10 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'app-edit',
+  templateUrl: './edit.component.html',
+  styleUrls: ['./edit.component.less']
+})
+export class EditComponent {
+
+}

src/app/modules/songs/song/edit/edit.module.ts

@@ -0,0 +1,44 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {EditComponent} from './edit.component';
+import {CardModule} from '../../../../widget-modules/components/card/card.module';
+import {SongTypeTranslaterModule} from '../../../../widget-modules/pipes/song-type-translater/song-type-translater.module';
+import {ReactiveFormsModule} from '@angular/forms';
+import {MatInputModule} from '@angular/material/input';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatSelectModule} from '@angular/material/select';
+import {MatButtonModule} from '@angular/material/button';
+import {ButtonRowModule} from '../../../../widget-modules/components/button-row/button-row.module';
+import {RouterModule} from '@angular/router';
+import {EditSongComponent} from './edit-song/edit-song.component';
+import {EditFileComponent} from './edit-file/edit-file.component';
+import {MatIconModule} from '@angular/material/icon';
+import {FileComponent} from './edit-file/file/file.component';
+import {LegalOwnerTranslatorModule} from '../../../../widget-modules/pipes/legal-owner-translator/legal-owner-translator.module';
+import {LegalTypeTranslatorModule} from '../../../../widget-modules/pipes/legal-type-translator/legal-type-translator.module';
+
+
+@NgModule({
+  declarations: [EditComponent, EditSongComponent, EditFileComponent, FileComponent],
+  exports: [EditComponent],
+  imports: [
+    CommonModule,
+    CardModule,
+    SongTypeTranslaterModule,
+    ReactiveFormsModule,
+    RouterModule,
+
+    MatInputModule,
+    MatButtonModule,
+    MatCheckboxModule,
+    MatSelectModule,
+    ButtonRowModule,
+
+    MatIconModule,
+    LegalOwnerTranslatorModule,
+    LegalTypeTranslatorModule,
+
+  ]
+})
+export class EditModule {
+}

src/app/modules/songs/song/edit/edit.service.spec.ts

@@ -0,0 +1,12 @@
+import {TestBed} from '@angular/core/testing';
+
+import {EditService} from './edit.service';
+
+describe('EditService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: EditService = TestBed.get(EditService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/modules/songs/song/edit/edit.service.ts

@@ -0,0 +1,34 @@
+import {Injectable} from '@angular/core';
+import {Song} from '../../models/song';
+import {FormControl, FormGroup} from '@angular/forms';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class EditService {
+
+  constructor() {
+  }
+
+  public createSongForm(song: Song): FormGroup {
+    return new FormGroup({
+      text: new FormControl(song.text),
+      title: new FormControl(song.title),
+      comment: new FormControl(song.comment),
+      key: new FormControl(song.key),
+      tempo: new FormControl(song.tempo),
+      type: new FormControl(song.type),
+
+      legalType: new FormControl(song.legalType),
+      legalLink: new FormControl(song.legalLink),
+      legalOwner: new FormControl(song.legalOwner),
+      legalOwnerId: new FormControl(song.legalOwnerId),
+      legalLicenseId: new FormControl(song.legalLicenseId),
+
+      artist: new FormControl(song.artist),
+      label: new FormControl(song.label),
+      termsOfUse: new FormControl(song.termsOfUse),
+      origin: new FormControl(song.origin),
+    });
+  }
+}