add songs live on presentation

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

@@ -17,18 +17,9 @@
       ></app-song>
     </div>
 
-    <div *ngIf="songs && !show.published" class="add-row">
-      <mat-form-field appearance="outline">
-        <mat-label>Lied hinzufügen...</mat-label>
-        <mat-select (selectionChange)="onAddSongSelectionChanged($event)">
-          <mat-option>
-            <ngx-mat-select-search [formControl]="filteredSongsControl"></ngx-mat-select-search>
-          </mat-option>
-          <mat-option *ngFor="let song of filteredSongs()" [value]="song.id">{{song.title}}</mat-option>
-        </mat-select>
-      </mat-form-field>
+    <app-add-song *ngIf="songs && !show.published" [showId]="showId" [showSongs]="showSongs"
+                  [songs]="songs"></app-add-song>
 
-    </div>
     <app-button-row>
       <button (click)="onArchive(true)" *ngIf="!show.archived" mat-button>Archivieren</button>
       <button (click)="onArchive(false)" *ngIf="show.archived" mat-button>Wiederherstellen</button>

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

@@ -1,12 +1,3 @@
-.add-row {
-  display: flex;
-  margin-top: 10px;
-
-  .mat-form-field {
-    width: 100%;
-  }
-}
-
 .song-row:not(:last-child) {
   display: block;
   border-bottom: 1px solid #0002;

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

@@ -6,12 +6,9 @@ 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';
-import {ShowSong} from '../services/showSong';
+import {ShowSong} from '../services/show-song';
 import {DocxService} from '../services/docx.service';
-import {FormControl} from '@angular/forms';
-import {filterSong} from '../../../services/filter.helper';
 
 @Component({
   selector: 'app-show',
@@ -46,29 +43,10 @@ export class ShowComponent implements OnInit {
       filter(_ => !!_)
     ).subscribe(_ => this.showSongs = _);
     this.songService.list$().pipe(
-      map(_ => _
-        .filter(_ => !!_)
-        .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;
-        })),
       filter(_ => !!_)
     ).subscribe(_ => this.songs = _);
   }
 
-  public async onAddSongSelectionChanged(event: MatSelectChange) {
-    await this.showSongService.new$(this.showId, event.value, this.showSongs.reduce((oa, u) => Math.max(oa, u.order), 0) + 1);
-    event.source.value = null;
-  }
-
   public getSong(songId: string): Song {
     const filtered = this.songs.filter(_ => _.id === songId);
     return filtered.length > 0 ? filtered[0] : null;
@@ -91,11 +69,4 @@ export class ShowComponent implements OnInit {
   public async onDownload(): Promise<void> {
     await this.docxService.create(this.showId);
   }
-
-  public filteredSongsControl = new FormControl();
-
-  filteredSongs() {
-    const filterValue = this.filteredSongsControl.value;
-    return filterValue ? this.songs.filter(_ => filterSong(_, filterValue)) : this.songs;
-  }
 }

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

@@ -4,7 +4,7 @@ import {faTrash} from '@fortawesome/free-solid-svg-icons/faTrash';
 import {faCaretUp} from '@fortawesome/free-solid-svg-icons/faCaretUp';
 import {faCaretDown} from '@fortawesome/free-solid-svg-icons/faCaretDown';
 import {ShowSongService} from '../../services/show-song.service';
-import {ShowSong} from '../../services/showSong';
+import {ShowSong} from '../../services/show-song';
 import {getScale} from '../../../songs/services/key.helper';
 import {FormControl} from '@angular/forms';
 import {ChordMode} from '../../../../widget-modules/components/song-text/song-text.component';