add song to show

src/app/modules/shows/show/show.component.html

@@ -2,6 +2,14 @@
   <app-card
     heading="{{show.showType|showType}}, {{show.date.toDate()|date:'dd.MM.yyyy'}}">
 
-
+    <div class="add-row">
+      <mat-form-field *ngIf="(songs$|async) as songs" appearance="outline">
+        <mat-label>Lied hinzufügen...</mat-label>
+        <mat-select (selectionChange)="onAddSongSelectionChanged($event)">
+          <mat-option *ngFor="let song of songs" [value]="song.id">{{song.title}}</mat-option>
+        </mat-select>
+      </mat-form-field>
+      <button mat-button>aus Übersicht</button>
+    </div>
   </app-card>
 </div>

src/app/modules/shows/show/show.component.less

@@ -0,0 +1,7 @@
+.add-row {
+  display: flex;
+
+  .mat-form-field {
+    width: 100%;
+  }
+}

src/app/modules/shows/show/show.component.ts

@@ -1,9 +1,13 @@
 import {Component, OnInit} from '@angular/core';
-import {map, switchMap} from 'rxjs/operators';
+import {map, switchMap, tap} from 'rxjs/operators';
 import {ActivatedRoute} from '@angular/router';
 import {ShowService} from '../services/show.service';
 import {Observable} from 'rxjs';
 import {Show} from '../services/show';
+import {SongService} from '../../songs/services/song.service';
+import {Song} from '../../songs/services/song';
+import {MatSelectChange} from '@angular/material/select';
+import {ShowSongService} from '../services/show-song.service';
 
 @Component({
   selector: 'app-show',
@@ -12,18 +16,40 @@ import {Show} from '../services/show';
 })
 export class ShowComponent implements OnInit {
   public show$: Observable<Show>;
+  public songs$: Observable<Song[]>;
+  private showId: string;
 
   constructor(
     private activatedRoute: ActivatedRoute,
-    private showService: ShowService
+    private showService: ShowService,
+    private songService: SongService,
+    private showSongService: ShowSongService,
   ) {
   }
 
   ngOnInit(): void {
     this.show$ = this.activatedRoute.params.pipe(
       map(param => param.showId),
+      tap(_ => this.showId = _),
       switchMap(showId => this.showService.read$(showId))
     );
+    this.songs$ = this.songService.list$().pipe(map(_ => _
+      .filter(_ => !!_.title)
+      .filter(_ => _.title !== 'nicht gefunden')
+      .filter(_ => _.title !== 'nicht vorhanden')
+      .sort((a, b) => {
+        if (a.title < b.title) {
+          return -1;
+        }
+        if (a.title > b.title) {
+          return 1;
+        }
+        return 0;
+      })));
   }
 
+  public async onAddSongSelectionChanged(event: MatSelectChange) {
+    await this.showSongService.new$(this.showId, event.value);
+    event.source.value = null;
+  }
 }