diff --git a/WEB/src/app/components/songs/song-file-edit/song-file-edit.component.ts b/WEB/src/app/components/songs/song-file-edit/song-file-edit.component.ts index 9cc4110..66c1418 100644 --- a/WEB/src/app/components/songs/song-file-edit/song-file-edit.component.ts +++ b/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(); } - } diff --git a/WEB/src/app/components/songs/song-files/song-files.component.ts b/WEB/src/app/components/songs/song-files/song-files.component.ts index 9077b3d..11cc450 100644 --- a/WEB/src/app/components/songs/song-files/song-files.component.ts +++ b/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; diff --git a/WEB/src/app/components/songs/table/table.component.ts b/WEB/src/app/components/songs/table/table.component.ts index 70e8570..2782b6b 100644 --- a/WEB/src/app/components/songs/table/table.component.ts +++ b/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(); } diff --git a/WEB/src/app/data/edit-song.service.ts b/WEB/src/app/data/edit-song.service.ts index ad14073..7916d98 100644 --- a/WEB/src/app/data/edit-song.service.ts +++ b/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(); }); diff --git a/WEB/src/app/data/songs.service.ts b/WEB/src/app/data/songs.service.ts index d63a8d8..019afbd 100644 --- a/WEB/src/app/data/songs.service.ts +++ b/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 = new BehaviorSubject([]); public selectedSong: BehaviorSubject = new BehaviorSubject(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 { + public loadSongListAndGoTo$(id: number): Observable { const properties = ['ID', 'Name', 'Number', 'SongType', 'Key', 'Tempo']; - const list = this.list$(properties).pipe(tap(_ => { - this.songs.next(_); - this.selectSong(id); - })); + const list = this.list$(properties).pipe( + tap(_ => { + this.songs.next(_); + }), + switchMap(() => this.selectSong(id)) + ); return list; } - public selectSong(id: number): void { + public selectSong(id: number): Observable { 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$(id, ['Text', 'Comments'], ['Files']).subscribe(_ => { + const get = this.get$(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 { + public saveNewSong$(values: any): Observable { const newSong = super .post$(values) .pipe(switchMap(_ => this.loadSongListAndGoTo$(_.ID))); - return newSong; + return newSong; + } + + public updateFile$( + songId: number, + fileId: number, + name: string, + fileType: FileType + ): Observable { + const url = + base + + '/api/songs/' + + songId + + '/files/' + + fileId + + '/edit?Name=' + + name + + '&FileType=' + + fileType; + const get = this.httpClient.get(url); + return get; } }