show song - order and delete

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

@@ -2,8 +2,17 @@
   <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">
+    <div *ngIf="showSongs" class="song-list">
+      <app-song *ngFor="let song of showSongs"
+                [showId]="showId"
+                [showSongId]="song.id"
+                [showSongs]="showSongs"
+                [song]="getSong(songs, song.songId)"
+      ></app-song>
+    </div>
+
+    <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 *ngFor="let song of songs" [value]="song.id">{{song.title}}</mat-option>

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

@@ -1,5 +1,5 @@
 import {Component, OnInit} from '@angular/core';
-import {map, switchMap, tap} from 'rxjs/operators';
+import {filter, map, switchMap, tap} from 'rxjs/operators';
 import {ActivatedRoute} from '@angular/router';
 import {ShowService} from '../services/show.service';
 import {Observable} from 'rxjs';
@@ -8,6 +8,7 @@ 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';
 
 @Component({
   selector: 'app-show',
@@ -16,8 +17,9 @@ import {ShowSongService} from '../services/show-song.service';
 })
 export class ShowComponent implements OnInit {
   public show$: Observable<Show>;
-  public songs$: Observable<Song[]>;
-  private showId: string;
+  public songs: Song[];
+  public showSongs: ShowSong[];
+  public showId: string;
 
   constructor(
     private activatedRoute: ActivatedRoute,
@@ -33,23 +35,38 @@ export class ShowComponent implements OnInit {
       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;
-      })));
+    this.activatedRoute.params.pipe(
+      map(param => param.showId),
+      switchMap(showId => this.showSongService.list$(showId)),
+      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);
+    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(songs: Song[], songId: string): Song {
+    if (!songs) return null;
+    const filtered = songs.filter(_ => _.id === songId);
+    return filtered.length > 0 ? filtered[0] : null;
+  }
 }

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

@@ -0,0 +1,10 @@
+<div *ngIf="song" class="song">
+  <p>
+    <app-menu-button (click)="reorder(true)" [icon]="faUp"></app-menu-button>
+    <app-menu-button (click)="reorder(false)" [icon]="faDown"></app-menu-button>
+    {{song.title}}</p>
+  <div class="menu">
+    <app-menu-button (click)="onDelete()" [icon]="faDelete"></app-menu-button>
+
+  </div>
+</div>

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

@@ -0,0 +1,15 @@
+.song {
+  border-bottom: 1px solid #ccc;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.menu {
+  display: flex;
+
+}
+
+button {
+
+}

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

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

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

@@ -0,0 +1,60 @@
+import {Component, Input} from '@angular/core';
+import {Song} from '../../../songs/services/song';
+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';
+
+@Component({
+  selector: 'app-song',
+  templateUrl: './song.component.html',
+  styleUrls: ['./song.component.less']
+})
+export class SongComponent {
+  @Input() public song: Song;
+  @Input() public showId: string;
+  @Input() public showSongId: string;
+  @Input() public showSongs: ShowSong[];
+  public faDelete = faTrash;
+  public faUp = faCaretUp;
+  public faDown = faCaretDown;
+
+  constructor(
+    private showSongService: ShowSongService,
+  ) {
+  }
+
+  public async onDelete(): Promise<void> {
+    await this.showSongService.delete$(this.showId, this.showSongId);
+  }
+
+
+  public async reorder(up: boolean): Promise<void> {
+    if (up) await this.reorderUp(); else await this.reorderDown();
+  }
+
+  public async reorderUp(): Promise<void> {
+    const index = this.showSongs.findIndex(_ => _.songId === this.song.id);
+    if (index === 0) return;
+
+    const song = this.showSongs[index];
+    const toggleSong = this.showSongs[index - 1];
+
+    await this.showSongService.update$(this.showId, song.id, {order: toggleSong.order});
+    await this.showSongService.update$(this.showId, toggleSong.id, {order: song.order});
+  }
+
+  public async reorderDown(): Promise<void> {
+    const index = this.showSongs.findIndex(_ => _.songId === this.song.id);
+    if (index === this.showSongs.length - 1) return;
+
+    const song = this.showSongs[index];
+    const toggleSong = this.showSongs[index + 1];
+
+    await this.showSongService.update$(this.showId, song.id, {order: toggleSong.order});
+    await this.showSongService.update$(this.showId, toggleSong.id, {order: song.order});
+  }
+
+
+}