file detail edit server sync

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

@@ -1,8 +1,16 @@
-import { faLongArrowAltLeft } from '@fortawesome/free-solid-svg-icons';
+import { SongsService } from './../../../data/songs.service';
 import { FileType } from './../../../models/files-types.model.ts';
 import { FormGroup } from '@angular/forms';
-import { Component, OnInit, OnDestroy, Input, Output, EventEmitter } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  OnDestroy,
+  Input,
+  Output,
+  EventEmitter
+} from '@angular/core';
 import { EditSongService } from 'src/app/data/edit-song.service';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-song-file-edit',
@@ -13,22 +21,30 @@ export class SongFileEditComponent implements OnInit, OnDestroy {
   @Input() fileId: number;
   @Output() back = new EventEmitter();
   public form: FormGroup;
+  public subscription: Subscription;
   public fileTypes = [
-    {value: FileType.None, text: null},
-    {value: FileType.Sheet, text: 'Text'},
-    {value: FileType.Chords, text: 'Text + Akkorde'},
-    {value: FileType.MuseScore, text: 'MuseScore'},
+    { value: FileType.None, text: null },
+    { value: FileType.Sheet, text: 'Text' },
+    { value: FileType.Chords, text: 'Text + Akkorde' },
+    { value: FileType.MuseScore, text: 'MuseScore' }
   ];
 
-  constructor(private editSongService: EditSongService) { }
+  constructor(
+    private editSongService: EditSongService,
+    private songService: SongsService
+  ) {}
 
   public ngOnInit(): void {
-    this.form = this.editSongService.initFileEditForm(this.fileId);
+    const form = this.editSongService.initFileEditForm(
+      this.songService.selectedSong.value.ID,
+      this.fileId
+    );
+    this.form = form.form;
+    this.subscription = form.changeSubscription;
   }
 
   public ngOnDestroy(): void {
     this.form = null;
-
+    this.subscription.unsubscribe();
   }
-
 }

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

@@ -35,7 +35,7 @@ export class SongFilesComponent {
         this.selectedSongId = _.ID;
         this.song = _;
         this.newFileUploader = this.fileuploadFactory.provideForNewFiles(_.ID);
-        this.newFileUploader.onCompleteItem = () => songService.selectSong(_.ID);
+        this.newFileUploader.onCompleteItem = () => songService.selectSong(_.ID).subscribe();
         this.newFileUploader.onProgressItem = () => change.markForCheck;
       } else {
         this.selectedSongId = 0;

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

@@ -43,12 +43,12 @@ export class TableComponent {
   }
 
   public onClick(id: number): void {
-    this.songsService.selectSong(id);
+    this.songsService.selectSong(id).subscribe();
     this.change.detectChanges();
   }
 
   public onClickNew(): void {
-    this.songsService.selectSong(null);
+    this.songsService.selectSong(null).subscribe();
     this.songsService.state = State.new;
     this.change.detectChanges();
   }