show song - order and delete

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