transform keys and text service

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

@@ -2,17 +2,23 @@ import {Injectable} from '@angular/core';
 import {ShowSongDataService} from './show-song-data.service';
 import {Observable} from 'rxjs';
 import {ShowSong} from './showSong';
+import {SongDataService} from '../../songs/services/song-data.service';
+import {take} from 'rxjs/operators';
 
 @Injectable({
   providedIn: 'root'
 })
 export class ShowSongService {
 
-  constructor(private showSongDataService: ShowSongDataService) {
+  constructor(
+    private showSongDataService: ShowSongDataService,
+    private songDataService: SongDataService
+  ) {
   }
 
   public async new$(showId: string, songId: string, order: number): Promise<string> {
-    const data = {songId, order};
+    const song = await this.songDataService.read$(songId).pipe(take(1)).toPromise();
+    const data = {songId, order, key: song.key, keyOriginal: song.key};
     return await this.showSongDataService.add(showId, data);
   }
 

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

@@ -1,5 +1,7 @@
 export interface ShowSong {
   id: string;
   songId: string;
+  key: string;
+  keyOriginal: string;
   order: number;
 }

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

@@ -5,7 +5,7 @@
     <div *ngIf="showSongs" class="song-list">
       <app-song *ngFor="let song of showSongs"
                 [showId]="showId"
-                [showSongId]="song.id"
+                [showSong]="song"
                 [showSongs]="showSongs"
                 [song]="getSong(songs, song.songId)"
       ></app-song>

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

@@ -1,10 +1,14 @@
-<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 *ngIf="_song" class="song">
+  <app-menu-button (click)="reorder(true)" [icon]="faUp" class="btnUp"></app-menu-button>
+  <app-menu-button (click)="reorder(false)" [icon]="faDown" class="btnDown"></app-menu-button>
+  <span class="title">{{_song.title}}</span>
+  <span class="keys">
+    <span *ngIf="showSong.keyOriginal!==showSong.key">{{showSong.keyOriginal}}&nbsp;→&nbsp;</span>
+    <mat-form-field *ngIf="keys" appearance="standard">
+        <mat-select [formControl]="keyFormControl">
+          <mat-option *ngFor="let key of keys" [value]="key">{{key}}</mat-option>
+        </mat-select>
+      </mat-form-field>
+  </span>
+  <app-menu-button (click)="onDelete()" [icon]="faDelete" class="btnDelete"></app-menu-button>
 </div>

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

@@ -1,13 +1,49 @@
 .song {
   border-bottom: 1px solid #ccc;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+  display: grid;
+  grid-template-columns: 20px 20px auto 70px 25px;
+  @media screen and (max-width: 860px) {
+    grid-template-columns: 40px 40px auto 70px 45px;
+  }
+  grid-template-areas: "up down title keys delete";
+
+  & > * {
+    display: flex;
+    align-items: center;
+  }
+
+  overflow: hidden;
+}
+
+mat-form-field {
+  width: 40px;
+  margin: -24px 0 -20px 0;
+}
+
+.btnUp {
+  grid-area: up;
+}
+
+.btnDown {
+  grid-area: down;
+}
+
+.title {
+  grid-area: title;
+}
+
+.keys {
+  grid-area: keys;
+  justify-content: flex-end;
+}
+
+.btnDelete {
+  grid-area: delete;
+  justify-content: flex-end;
 }
 
 .menu {
   display: flex;
-
 }
 
 button {

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

@@ -1,32 +1,51 @@
-import {Component, Input} from '@angular/core';
+import {Component, Input, OnInit} 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';
+import {getScale} from '../../../songs/services/key.helper';
+import {FormControl} from '@angular/forms';
 
 @Component({
   selector: 'app-song',
   templateUrl: './song.component.html',
   styleUrls: ['./song.component.less']
 })
-export class SongComponent {
-  @Input() public song: Song;
+export class SongComponent implements OnInit {
+  @Input() public showSong: ShowSong;
+
   @Input() public showId: string;
-  @Input() public showSongId: string;
+  public keys: string[];
   @Input() public showSongs: ShowSong[];
   public faDelete = faTrash;
   public faUp = faCaretUp;
   public faDown = faCaretDown;
+  public keyFormControl: FormControl;
+
+  public _song: Song;
+
+  @Input()
+  public set song(song: Song) {
+    this._song = song;
+    this.keys = !!song ? getScale(song.key) : [];
+  };
 
   constructor(
     private showSongService: ShowSongService,
   ) {
   }
 
+  public ngOnInit(): void {
+    this.keyFormControl = new FormControl(this.showSong.key);
+    this.keyFormControl.valueChanges.subscribe(async value => {
+      await this.showSongService.update$(this.showId, this.showSong.id, {key: value});
+    })
+  }
+
   public async onDelete(): Promise<void> {
-    await this.showSongService.delete$(this.showId, this.showSongId);
+    await this.showSongService.delete$(this.showId, this.showSong.id);
   }