add songs live on presentation

src/app/widget-modules/components/add-song/add-song.component.html

@@ -0,0 +1,11 @@
+<div *ngIf="songs" 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>
+</div>

src/app/widget-modules/components/add-song/add-song.component.less

@@ -0,0 +1,8 @@
+.add-row {
+  display: flex;
+  margin-top: 10px;
+
+  .mat-form-field {
+    width: 100%;
+  }
+}

src/app/widget-modules/components/add-song/add-song.component.spec.ts

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

src/app/widget-modules/components/add-song/add-song.component.ts

@@ -0,0 +1,50 @@
+import {Component, Input} from '@angular/core';
+import {FormControl} from '@angular/forms';
+import {filterSong} from '../../../services/filter.helper';
+import {MatSelectChange} from '@angular/material/select';
+import {Song} from '../../../modules/songs/services/song';
+import {ShowSong} from '../../../modules/shows/services/show-song';
+import {ShowSongService} from '../../../modules/shows/services/show-song.service';
+
+@Component({
+  selector: 'app-add-song',
+  templateUrl: './add-song.component.html',
+  styleUrls: ['./add-song.component.less']
+})
+export class AddSongComponent {
+  @Input() public songs: Song[];
+  @Input() public showSongs: ShowSong[];
+  @Input() public showId: string;
+  @Input() public addedLive = false;
+  public filteredSongsControl = new FormControl();
+
+  constructor(private showSongService: ShowSongService) {
+  }
+
+  filteredSongs() {
+    const songs = this.songs
+      .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;
+      })
+
+    const filterValue = this.filteredSongsControl.value;
+    return filterValue ? songs.filter(_ => filterSong(_, filterValue)) : songs;
+  }
+
+  public async onAddSongSelectionChanged(event: MatSelectChange) {
+    let order = this.showSongs.reduce((oa, u) => Math.max(oa, u.order), 0) + 1;
+    await this.showSongService.new$(this.showId, event.value, order, this.addedLive);
+    event.source.value = null;
+  }
+
+}

src/app/widget-modules/components/add-song/add-song.module.ts

@@ -0,0 +1,24 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {AddSongComponent} from './add-song.component';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatSelectModule} from '@angular/material/select';
+import {NgxMatSelectSearchModule} from 'ngx-mat-select-search';
+import {ReactiveFormsModule} from '@angular/forms';
+
+
+@NgModule({
+  declarations: [AddSongComponent],
+  exports: [
+    AddSongComponent
+  ],
+  imports: [
+    CommonModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    NgxMatSelectSearchModule,
+    ReactiveFormsModule
+  ]
+})
+export class AddSongModule {
+}