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 @@
+<div class="songs-container">
     <app-table></app-table>
-<app-song-edit *ngIf="songsService.state === State.edit" [@blend]></app-song-edit>
+    <div class="song-container">
-<app-song-new *ngIf="songsService.state === State.new" [@blend]></app-song-new>
+        <app-song-edit *ngIf="(songsService.state | async)  === State.edit"></app-song-edit>
-<app-song *ngIf="songsService.state === State.read" [@blend]></app-song>
+        <app-song-new *ngIf="(songsService.state | async) === State.new"></app-song-new>
-<app-song-files *ngIf="songsService.state === State.read" [@blend]></app-song-files>
+        <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[] {
+    public get columns(): Observable<string[]> {
-        return this.songsService.state === State.list ? this.columnsFull : this.columnsPinned;
+        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);
     }
 

WEB/src/styles.less

@@ -10,15 +10,10 @@ html {
 }
 
 .page-container {
-  position: fixed;
+  padding: 20px;
-  top: 20px;
-  left: 20px;
-  bottom: 20px;
-  right: 20px;
   box-sizing: border-box;
   overflow: hidden;
   border-radius: 8px;
-  transition: all 300ms ease-in-out;
 
   .mat-table tbody {
     background: none;
@@ -26,18 +21,15 @@ html {
 
   th.mat-header-cell:first-of-type {
     border-top-left-radius: 8px;
-    transition: all 300ms ease-in-out;
   }
 
   th.mat-header-cell:last-of-type {
     border-top-right-radius: 8px;
-    transition: all 300ms ease-in-out;
   }
 
   .mat-table thead {
     border-top-right-radius: 8px;
     border-top-left-radius: 8px;
-    transition: all 300ms ease-in-out;
   }
 
   tbody {
@@ -60,26 +52,21 @@ html {
   }
 
   &.pinned {
-    top: 0;
+    padding: 0;
-    left: 0;
+    max-width: 300px;
-    bottom: 0;
+    border-radius: 0;
-    right: 70vw;
-    border-radius: 0px;
 
     th.mat-header-cell:first-of-type {
       border-top-left-radius: 0px;
-      transition: all 300ms ease-in-out;
     }
 
     th.mat-header-cell:last-of-type {
       border-top-right-radius: 0px;
-      transition: all 300ms ease-in-out;
     }
 
     .mat-table thead {
       border-top-right-radius: 0px;
       border-top-left-radius: 0px;
-      transition: all 300ms ease-in-out;
     }
   }
 }
@@ -88,7 +75,7 @@ html {
   width: 600px;
   border-radius: 8px;
   background: #fffd;
-  margin: 20px;
+  margin: 10px;
   box-sizing: border-box;
 }
 
@@ -104,7 +91,7 @@ html {
 }
 
 .song-detail-container {
-  margin-left: 30vw;
+
 
   .mat-form-field-infix {
     width: 80px;