npm update

WEB/src/app/components/songs/song-edit/song-edit.component.ts

@@ -29,6 +29,6 @@ export class SongEditComponent implements OnInit {
     }
 
     public onBack(): void {
-        this.songsService.state = State.read;
+        this.songsService.state.next(State.read);
     }
 }

WEB/src/app/components/songs/song-new/song-new.component.ts

@@ -29,7 +29,7 @@ export class SongNewComponent implements OnInit {
     }
 
     public onBack(): void {
-        this.songsService.state = State.list;
+        this.songsService.state.next(State.list);
         this.songsService.resetSelectedSong();
     }
 

WEB/src/app/components/songs/song/song.component.ts

@@ -45,7 +45,7 @@ export class SongComponent {
     }
 
     public onClickEdit(): void {
-        this.songService.state = State.edit;
+        this.songService.state.next(State.edit);
     }
 
     public renderSongType(songType: string) {

WEB/src/app/components/songs/songs.component.html

@@ -1,5 +1,9 @@
-<app-table></app-table>
-<app-song-edit *ngIf="songsService.state === State.edit" [@blend]></app-song-edit>
-<app-song-new *ngIf="songsService.state === State.new" [@blend]></app-song-new>
-<app-song *ngIf="songsService.state === State.read" [@blend]></app-song>
-<app-song-files *ngIf="songsService.state === State.read" [@blend]></app-song-files>
+<div class="songs-container">
+    <app-table></app-table>
+    <div class="song-container">
+        <app-song-edit *ngIf="(songsService.state | async)  === State.edit"></app-song-edit>
+        <app-song-new *ngIf="(songsService.state | async) === State.new"></app-song-new>
+        <app-song *ngIf="(songsService.state | async) === State.read"></app-song>
+        <app-song-files *ngIf="(songsService.state | async) === State.read"></app-song-files>
+    </div>
+</div>

WEB/src/app/components/songs/songs.component.less

@@ -0,0 +1,8 @@
+.songs-container, .song-container {
+  display: flex;
+}
+
+.song-container {
+  padding: 10px;
+  flex-flow: column;
+}

WEB/src/app/components/songs/table/table.component.html

@@ -1,5 +1,5 @@
 <div
-        [class.pinned]="songsService.state !== State.list"
+        [class.pinned]="(songsService.state | async) !== State.list"
         class="page-container mat-elevation-z8"
 >
     <div class="table-container">
@@ -63,10 +63,10 @@
                 </td>
             </ng-container>
 
-            <tr *matHeaderRowDef="columns; sticky: true" mat-header-row></tr>
+            <tr *matHeaderRowDef="columns | async; sticky: true" mat-header-row></tr>
             <tr
                     (click)="onClick(row.ID)"
-                    *matRowDef="let row; columns: columns"
+                    *matRowDef="let row; columns: columns | async"
                     [class.selected]="selectedSongId === row.ID"
                     mat-row
             ></tr>

WEB/src/app/components/songs/table/table.component.less

@@ -1,13 +1,12 @@
 table {
-  width: 100%;
   border-radius: 8px;
   background: #fffe;
-
 }
 
 .table-container {
-  height: 100%;
+  //height: 100%;
   overflow: auto;
+  position: relative;
 }
 
 .button-new {

WEB/src/app/components/songs/table/table.component.ts

@@ -2,6 +2,8 @@ import {SongsService} from '../../../data/songs.service';
 import {ChangeDetectionStrategy, ChangeDetectorRef, Component} from '@angular/core';
 import {State} from 'src/app/data/state';
 import {faFileMedical} from '@fortawesome/free-solid-svg-icons';
+import {Observable} from 'rxjs';
+import {map} from 'rxjs/operators';
 
 @Component({
     selector: 'app-table',
@@ -27,8 +29,8 @@ export class TableComponent {
         );
     }
 
-    public get columns(): string[] {
-        return this.songsService.state === State.list ? this.columnsFull : this.columnsPinned;
+    public get columns(): Observable<string[]> {
+        return this.songsService.state.pipe(map(_ => _ === State.list ? this.columnsFull : this.columnsPinned));
     }
 
     public renderSongType(songType: string) {
@@ -49,7 +51,7 @@ export class TableComponent {
 
     public onClickNew(): void {
         this.songsService.selectSong(null).subscribe();
-        this.songsService.state = State.new;
+        this.songsService.state.next(State.new);
         this.change.detectChanges();
     }
 

WEB/src/app/data/songs.service.ts

@@ -13,7 +13,7 @@ import {base} from './urls';
     providedIn: 'root'
 })
 export class SongsService extends OdataService {
-    public state = State.list;
+    public state = new BehaviorSubject<State>(State.list);
 
     public songs: BehaviorSubject<Song[]> = new BehaviorSubject<Song[]>([]);
     public selectedSong: BehaviorSubject<Song> = new BehaviorSubject<Song>(null);
@@ -43,7 +43,7 @@ export class SongsService extends OdataService {
     }
 
     public selectSong(id: number): Observable<Song> {
-        this.state = State.read;
+        this.state.next(State.read);
         const filter = this.songs.value.filter(_ => _.ID === id);
         const song = filter.length === 1 ? filter[0] : null;
         if (!song) {
@@ -61,7 +61,7 @@ export class SongsService extends OdataService {
     }
 
     public resetSelectedSong() {
-        this.state = State.list;
+        this.state.next(State.list);
         this.selectedSong.next(null);
     }