add songs live on presentation

src/app/modules/presentation/presentation.module.ts

@@ -15,6 +15,7 @@ import {MatButtonModule} from '@angular/material/button';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
 import {MatSliderModule} from '@angular/material/slider';
 import {FormsModule} from '@angular/forms';
+import {AddSongModule} from '../../widget-modules/components/add-song/add-song.module';
 
 
 @NgModule({
@@ -31,7 +32,8 @@ import {FormsModule} from '@angular/forms';
     MatButtonModule,
     FontAwesomeModule,
     MatSliderModule,
-    FormsModule
+    FormsModule,
+    AddSongModule
   ]
 })
 export class PresentationModule {

src/app/modules/presentation/remote/remote.component.html

@@ -41,6 +41,10 @@
       >
       </mat-slider>
     </div>
+
+
+    <app-add-song *ngIf="show" [addedLive]="true" [showId]="currentShowId" [showSongs]="showSongs"
+                  [songs]="songs"></app-add-song>
   </app-card>
 
 

src/app/modules/presentation/remote/remote.component.ts

@@ -8,6 +8,7 @@ import {Song} from '../../songs/services/song';
 import {Section, TextRenderingService} from '../../songs/services/text-rendering.service';
 import {faDesktop} from '@fortawesome/free-solid-svg-icons/faDesktop';
 import {ShowService} from '../../shows/services/show.service';
+import {ShowSong} from '../../shows/services/show-song';
 
 export interface PresentationSong {
   id: string;
@@ -23,6 +24,7 @@ export interface PresentationSong {
 export class RemoteComponent {
   public shows$: Observable<Show[]>;
   public show: Show;
+  public showSongs: ShowSong[];
   public songs: Song[];
   public presentationSongs: PresentationSong[];
   public currentShowId: string;
@@ -33,7 +35,7 @@ export class RemoteComponent {
     private showService: ShowService,
     private showSongService: ShowSongService,
     private songService: SongService,
-    private textRenderingService: TextRenderingService
+    private textRenderingService: TextRenderingService,
   ) {
     this.shows$ = showService.list$(true);
     songService.list$().subscribe(_ => this.songs = _);
@@ -43,6 +45,7 @@ export class RemoteComponent {
     this.currentShowId = change.value;
     this.showService.read$(change.value).subscribe(_ => this.show = _);
     this.showSongService.list$(change.value).subscribe(_ => {
+      this.showSongs = _;
       this.presentationSongs = _
         .map(song => this.songs.filter(f => f.id == song.songId)[0])
         .map(song => ({

src/app/modules/shows/services/docx.service.ts

@@ -7,7 +7,7 @@ import {ShowSongService} from './show-song.service';
 import {Line, LineType, Section, TextRenderingService} from '../../songs/services/text-rendering.service';
 import {Song} from '../../songs/services/song';
 import {SongService} from '../../songs/services/song.service';
-import {ShowSong} from './showSong';
+import {ShowSong} from './show-song';
 import {Show} from './show';
 import {ChordMode} from '../../../widget-modules/components/song-text/song-text.component';
 import {UserService} from '../../../services/user.service';

src/app/modules/shows/services/show-song-data.service.ts

@@ -1,7 +1,7 @@
 import {Injectable} from '@angular/core';
 import {DbService} from '../../../services/db.service';
 import {Observable} from 'rxjs';
-import {ShowSong} from './showSong';
+import {ShowSong} from './show-song';
 
 @Injectable({
   providedIn: 'root'

src/app/modules/shows/services/show-song.service.ts

@@ -1,7 +1,7 @@
 import {Injectable} from '@angular/core';
 import {ShowSongDataService} from './show-song-data.service';
 import {Observable} from 'rxjs';
-import {ShowSong} from './showSong';
+import {ShowSong} from './show-song';
 import {SongDataService} from '../../songs/services/song-data.service';
 import {take} from 'rxjs/operators';
 import {UserService} from '../../../services/user.service';
@@ -18,10 +18,17 @@ export class ShowSongService {
   ) {
   }
 
-  public async new$(showId: string, songId: string, order: number): Promise<string> {
+  public async new$(showId: string, songId: string, order: number, addedLive = false): Promise<string> {
     const song = await this.songDataService.read$(songId).pipe(take(1)).toPromise();
     const user = await this.userService.user$.pipe(take(1)).toPromise();
-    const data: Partial<ShowSong> = {songId, order, key: song.key, keyOriginal: song.key, chordMode: user.chordMode};
+    const data: Partial<ShowSong> = {
+      songId,
+      order,
+      key: song.key,
+      keyOriginal: song.key,
+      chordMode: user.chordMode,
+      addedLive
+    };
     return await this.showSongDataService.add(showId, data);
   }
 

src/app/modules/shows/services/show-song.ts

@@ -6,5 +6,6 @@ export interface ShowSong {
   key: string;
   keyOriginal: string;
   order: number;
-  chordMode: ChordMode
+  chordMode: ChordMode;
+  addedLive: boolean;
 }

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

@@ -17,18 +17,9 @@
       ></app-song>
     </div>
 
-    <div *ngIf="songs && !show.published" class="add-row">
+    <app-add-song *ngIf="songs && !show.published" [showId]="showId" [showSongs]="showSongs"
-      <mat-form-field appearance="outline">
+                  [songs]="songs"></app-add-song>
-        <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>
     <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';

src/app/modules/shows/shows.module.ts

@@ -23,6 +23,7 @@ import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
 import {MenuButtonModule} from '../../widget-modules/components/menu-button/menu-button.module';
 import {SongTextModule} from '../../widget-modules/components/song-text/song-text.module';
 import {NgxMatSelectSearchModule} from 'ngx-mat-select-search';
+import {AddSongModule} from '../../widget-modules/components/add-song/add-song.module';
 
 
 @NgModule({
@@ -47,6 +48,7 @@ import {NgxMatSelectSearchModule} from 'ngx-mat-select-search';
     FormsModule,
     SongTextModule,
     NgxMatSelectSearchModule,
+    AddSongModule,
   ]
 })
 export class ShowsModule {

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 {
+}