add song to show

firestore.rules

@@ -16,5 +16,10 @@ service cloud.firestore {
       allow read: if true;
       allow write: if true;
     }
+    match /shows/{show}/songs/{song} {
+      allow read: if true;
+      allow write: if true;
+    }
   }
 }
+

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

@@ -0,0 +1,16 @@
+import {TestBed} from '@angular/core/testing';
+
+import {ShowSongDataService} from './show-song-data.service';
+
+describe('ShowSongDataService', () => {
+  let service: ShowSongDataService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ShowSongDataService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,20 @@
+import {Injectable} from '@angular/core';
+import {DbService} from '../../../services/db.service';
+import {Observable} from 'rxjs';
+import {ShowSong} from './showSong';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ShowSongDataService {
+  private collection = 'shows';
+  private subCollection = 'songs';
+
+  constructor(private dbService: DbService) {
+  }
+
+  public list$ = (showId: string): Observable<ShowSong[]> => this.dbService.col$(`${this.collection}/${showId}/${this.subCollection}`);
+  public read$ = (showId: string, songId: string): Observable<ShowSong | undefined> => this.dbService.doc$(`${this.collection}/${showId}/${this.subCollection}/${songId}`);
+  public update = async (showId: string, songId: string, data: Partial<ShowSong>): Promise<void> => await this.dbService.doc(`${this.collection}/${showId}/${this.subCollection}/${songId}`).update(data);
+  public add = async (showId: string, data: Partial<ShowSong>): Promise<string> => (await this.dbService.col(`${this.collection}/${showId}/${this.subCollection}`).add(data)).id
+}

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

@@ -0,0 +1,16 @@
+import {TestBed} from '@angular/core/testing';
+
+import {ShowSongService} from './show-song.service';
+
+describe('ShowSongService', () => {
+  let service: ShowSongService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ShowSongService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,16 @@
+import {Injectable} from '@angular/core';
+import {ShowSongDataService} from './show-song-data.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ShowSongService {
+
+  constructor(private showSongDataService: ShowSongDataService) {
+  }
+
+  public async new$(showId: string, songId: string): Promise<string> {
+    const data = {songId};
+    return await this.showSongDataService.add(showId, data);
+  }
+}

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

@@ -10,3 +10,4 @@ export interface Show {
   public: boolean;
   reported: boolean;
 }
+

src/app/modules/shows/services/showSong.ts

@@ -0,0 +1,4 @@
+export interface ShowSong {
+  id: string;
+  songId: string;
+}

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