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.None, text: null },
-    {value: FileType.Sheet, text: 'Text'},
+    { value: FileType.Sheet, text: 'Text' },
-    {value: FileType.Chords, text: 'Text + Akkorde'},
+    { value: FileType.Chords, text: 'Text + Akkorde' },
-    {value: FileType.MuseScore, text: 'MuseScore'},
+    { 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();
   }

WEB/src/app/data/edit-song.service.ts

@@ -1,8 +1,10 @@
+import { FileType } from './../models/files-types.model.ts';
 import { SongsService } from 'src/app/data/songs.service';
 import { Injectable } from '@angular/core';
 import { FormGroup, FormControl, Validators } from '@angular/forms';
 import { switchMap } from 'rxjs/operators';
 import { Song } from '../models/song.model';
+import { Subscription } from 'rxjs';
 
 @Injectable({
   providedIn: 'root'
@@ -43,7 +45,7 @@ export class EditSongService {
     return form;
   }
 
-  public initFileEditForm(fileId: number): FormGroup {
+  public initFileEditForm(songId: number, fileId: number): {form: FormGroup, changeSubscription: Subscription } {
     const file = this.songsService.selectedSong.value.Files.filter(
       _ => _.ID === fileId
     )[0];
@@ -57,7 +59,12 @@ export class EditSongService {
       })
     });
 
-    return form;
+    const changeSubscription = form.valueChanges.pipe(
+      switchMap(_ => this.songsService.updateFile$(songId, fileId, _.Name, _.FileType)),
+      switchMap(() => this.songsService.selectSong(songId))
+    ).subscribe();
+
+    return {form : form, changeSubscription: changeSubscription};
   }
 
   private attachSync(form: FormGroup, song: Song) {
@@ -65,7 +72,8 @@ export class EditSongService {
     controls.forEach(control => {
       form.controls[control].valueChanges
         .pipe(
-          switchMap(value => this.songsService.patch$(song.ID, control, value))
+          switchMap(value => this.songsService.patch$(song.ID, control, value)),
+          switchMap(() => this.songsService.selectSong(song.ID))
         )
         .subscribe();
     });

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

@@ -1,3 +1,5 @@
+import { HttpClient } from '@angular/common/http';
+import { FileType } from './../models/files-types.model.ts';
 import { Injectable } from '@angular/core';
 import { ODataService } from 'odata-v4-ng';
 import { OdataService } from './odata.service';
@@ -5,6 +7,7 @@ import { Song } from '../models/song.model';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { tap, switchMap } from 'rxjs/operators';
 import { State } from './state';
+import { base } from './urls';
 
 @Injectable({
   providedIn: 'root'
@@ -15,7 +18,7 @@ export class SongsService extends OdataService {
   public songs: BehaviorSubject<Song[]> = new BehaviorSubject<Song[]>([]);
   public selectedSong: BehaviorSubject<Song> = new BehaviorSubject<Song>(null);
 
-  constructor(odataService: ODataService) {
+  constructor(odataService: ODataService, private httpClient: HttpClient) {
     super(odataService, 'songs');
   }
 
@@ -27,17 +30,19 @@ export class SongsService extends OdataService {
     return list;
   }
 
-  public loadSongListAndGoTo$(id: number): Observable<Song[]> {
+  public loadSongListAndGoTo$(id: number): Observable<Song> {
     const properties = ['ID', 'Name', 'Number', 'SongType', 'Key', 'Tempo'];
-    const list = this.list$<Song>(properties).pipe(tap(_ => {
+    const list = this.list$<Song>(properties).pipe(
-      this.songs.next(_);
+      tap(_ => {
-      this.selectSong(id);
+        this.songs.next(_);
-    }));
+      }),
+      switchMap(() => this.selectSong(id))
+    );
 
     return list;
   }
 
-  public selectSong(id: number): void {
+  public selectSong(id: number): Observable<Song> {
     this.state = State.read;
     const filter = this.songs.value.filter(_ => _.ID === id);
     const song = filter.length === 1 ? filter[0] : null;
@@ -45,12 +50,14 @@ export class SongsService extends OdataService {
       return;
     }
 
-    this.get$<Song>(id, ['Text', 'Comments'], ['Files']).subscribe(_ => {
+    const get = this.get$<Song>(id, ['Text', 'Comments'], ['Files']).pipe(tap(_ => {
       song.Text = _.Text;
       song.Comments = _.Comments;
       song.Files = _.Files;
       this.selectedSong.next(song);
-    });
+    }));
+
+    return get;
   }
 
   public resetSelectedSong() {
@@ -72,11 +79,31 @@ export class SongsService extends OdataService {
     return patch;
   }
 
-  public saveNewSong$(values: any): Observable<Song[]> {
+  public saveNewSong$(values: any): Observable<Song> {
     const newSong = super
       .post$<Song>(values)
       .pipe(switchMap(_ => this.loadSongListAndGoTo$(_.ID)));
 
-      return newSong;
+    return newSong;
+  }
+
+  public updateFile$(
+    songId: number,
+    fileId: number,
+    name: string,
+    fileType: FileType
+  ): Observable<any> {
+    const url =
+      base +
+      '/api/songs/' +
+      songId +
+      '/files/' +
+      fileId +
+      '/edit?Name=' +
+      name +
+      '&FileType=' +
+      fileType;
+    const get = this.httpClient.get(url);
+    return get;
   }
 }