diff --git a/src/applications/content-playlists-app/content-playlists-app.module.ts b/src/applications/content-playlists-app/content-playlists-app.module.ts index 0941b13a28..bc719d006c 100644 --- a/src/applications/content-playlists-app/content-playlists-app.module.ts +++ b/src/applications/content-playlists-app/content-playlists-app.module.ts @@ -32,6 +32,7 @@ import { PlaylistsComponentsList } from './playlists/playlists-components-list'; import { PlaylistComponentsList } from './playlist/playlist-components-list'; import { PlaylistsStore } from './playlists/playlists-store/playlists-store.service'; import { PlaylistStore } from './playlist/playlist-store.service'; +import { PlaylistCanDeactivate } from './playlist/playlist-can-deactivate.service'; @NgModule({ imports: [ @@ -58,14 +59,15 @@ import { PlaylistStore } from './playlist/playlist-store.service'; RouterModule.forChild(routing) ], declarations: [ - ContentPlaylistsComponent, - PlaylistsComponentsList, - PlaylistComponentsList + ContentPlaylistsComponent, + PlaylistsComponentsList, + PlaylistComponentsList ], exports: [], providers: [ - PlaylistsStore, - PlaylistStore + PlaylistsStore, + PlaylistStore, + PlaylistCanDeactivate ], }) export class ContentPlaylistsAppModule { diff --git a/src/applications/content-playlists-app/content-playlists-app.routes.ts b/src/applications/content-playlists-app/content-playlists-app.routes.ts index 00d058e49a..4aa40879ed 100644 --- a/src/applications/content-playlists-app/content-playlists-app.routes.ts +++ b/src/applications/content-playlists-app/content-playlists-app.routes.ts @@ -5,16 +5,17 @@ import { PlaylistComponent } from './playlist/playlist.component'; import { PlaylistMetadataComponent } from './playlist/playlist-metadata/playlist-metadata.component'; import { PlaylistContentComponent } from './playlist/playlist-content/playlist-content.component'; import { PlaylistSections } from './playlist/playlist-sections'; +import { PlaylistCanDeactivate } from './playlist/playlist-can-deactivate.service'; export const routing: Route[] = [ {path: '', redirectTo: 'list', pathMatch: 'full'}, {path: 'list', component: PlaylistsListComponent}, - {path: 'playlist/:id', component: PlaylistComponent, + {path: 'playlist/:id', canDeactivate: [PlaylistCanDeactivate], component: PlaylistComponent, data : { playlistRoute : true }, children : [ - { path: '', redirectTo: 'metadata', pathMatch: 'full' }, + { path: '', redirectTo: 'content', pathMatch: 'full' }, { path: 'metadata', component: PlaylistMetadataComponent, data : { sectionKey : PlaylistSections.Metadata } }, { path: 'content', component: PlaylistContentComponent, data : { sectionKey : PlaylistSections.Content } } ] diff --git a/src/applications/content-playlists-app/playlist/playlist-can-deactivate.service.ts b/src/applications/content-playlists-app/playlist/playlist-can-deactivate.service.ts new file mode 100644 index 0000000000..cf9f587934 --- /dev/null +++ b/src/applications/content-playlists-app/playlist/playlist-can-deactivate.service.ts @@ -0,0 +1,24 @@ +import { Injectable } from '@angular/core' +import { ActivatedRouteSnapshot, RouterStateSnapshot, CanDeactivate } from '@angular/router'; +import { PlaylistComponent } from './playlist.component'; +import { Observable } from 'rxjs/Observable'; + +@Injectable() +export class PlaylistCanDeactivate implements CanDeactivate { + constructor() {} + canDeactivate(component: PlaylistComponent, currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot, nextState?: RouterStateSnapshot):Observable { + return Observable.create((observer : any) => + { + component.canLeave().subscribe( + result => { + observer.next(result.allowed); + observer.complete(); + }, + error => { + observer.next(false); + observer.complete(); + } + ); + }); + } +} diff --git a/src/applications/content-playlists-app/playlist/playlist-metadata/playlist-metadata.component.html b/src/applications/content-playlists-app/playlist/playlist-metadata/playlist-metadata.component.html index d21e7870fc..86e0281f60 100644 --- a/src/applications/content-playlists-app/playlist/playlist-metadata/playlist-metadata.component.html +++ b/src/applications/content-playlists-app/playlist/playlist-metadata/playlist-metadata.component.html @@ -4,9 +4,10 @@
- {{'applications.content.playlistDetails.metadata.playlistName' | translate}} + {{'applications.content.playlistDetails.metadata.playlistName' | translate}}
- + +
{{'applications.content.playlistDetails.metadata.nameIsMandatory' | translate}}
diff --git a/src/applications/content-playlists-app/playlist/playlist-metadata/playlist-metadata.component.scss b/src/applications/content-playlists-app/playlist/playlist-metadata/playlist-metadata.component.scss index 9ba9f15f05..77e20ac7c2 100644 --- a/src/applications/content-playlists-app/playlist/playlist-metadata/playlist-metadata.component.scss +++ b/src/applications/content-playlists-app/playlist/playlist-metadata/playlist-metadata.component.scss @@ -46,6 +46,22 @@ align-items: center; } + .extraPadding { + padding-bottom: 21px; + } + + .hidden { + visibility: hidden; + width: 0px; + height: 0px; + } + + .invalid { + color: $kDandger; + visibility: visible; + padding-top: 5px; + } + /*********************/ /* PrimeNG overrides */ /*********************/ diff --git a/src/applications/content-playlists-app/playlist/playlist-metadata/playlist-metadata.component.ts b/src/applications/content-playlists-app/playlist/playlist-metadata/playlist-metadata.component.ts index 0e61f2115a..f85349a620 100644 --- a/src/applications/content-playlists-app/playlist/playlist-metadata/playlist-metadata.component.ts +++ b/src/applications/content-playlists-app/playlist/playlist-metadata/playlist-metadata.component.ts @@ -1,4 +1,4 @@ -import { Component, AfterViewInit, OnInit, OnDestroy } from '@angular/core'; +import { Component, AfterViewInit, OnInit, OnDestroy, ViewChild } from '@angular/core'; import { FormBuilder, Validators, FormGroup } from '@angular/forms'; import { PlaylistStore } from '../playlist-store.service'; import { PlaylistSections } from '../playlist-sections'; @@ -16,6 +16,7 @@ export class PlaylistMetadataComponent implements AfterViewInit, OnInit, OnDestr metadataForm : FormGroup; _tagsProvider = new Subject(); private _searchTagsSubscription : ISubscription; + @ViewChild('metadataNameInput') private metadataNameInput; constructor( private _formBuilder : FormBuilder, @@ -40,6 +41,7 @@ export class PlaylistMetadataComponent implements AfterViewInit, OnInit, OnDestr description: response.playlist.description, tags: response.playlist.tags ? response.playlist.tags.split(', ') : null }); + this._playlistStore.updateSectionState(PlaylistSections.Metadata, {isDirty : false}); } else { // TODO [kmc] missing implementation } @@ -100,7 +102,9 @@ export class PlaylistMetadataComponent implements AfterViewInit, OnInit, OnDestr this._searchTagsSubscription && this._searchTagsSubscription.unsubscribe(); } - ngAfterViewInit() {} + ngAfterViewInit() { + this.metadataNameInput.nativeElement.focus(); + } } diff --git a/src/applications/content-playlists-app/playlist/playlist-store.service.ts b/src/applications/content-playlists-app/playlist/playlist-store.service.ts index f0bf49ee5f..89c3008731 100644 --- a/src/applications/content-playlists-app/playlist/playlist-store.service.ts +++ b/src/applications/content-playlists-app/playlist/playlist-store.service.ts @@ -164,7 +164,8 @@ export class PlaylistStore implements OnDestroy { } if(hasChanges) { - this._sectionsState.next(sections) + this._sectionsState.next(sections); + this._updatePageExitVerification(sections.metadata.isDirty || sections.content.isDirty); } } @@ -172,7 +173,7 @@ export class PlaylistStore implements OnDestroy { if(!this._sectionsState.getValue().metadata.isValid) { this._state.next({ isBusy: false, - error: {message: this._appLocalization.get('applications.content.playlistDetails.errors.validationError')} + error: {message: this._appLocalization.get('applications.content.playlistDetails.errors.validationError'), origin: 'save'} }); } else { let id: string = this._getPlaylistId(), @@ -210,7 +211,7 @@ export class PlaylistStore implements OnDestroy { public openPlaylist(playlistId : string) { - this._canLeaveWithoutSaving() + this.canLeaveWithoutSaving() .cancelOnDestroy(this) .subscribe( response => @@ -223,8 +224,8 @@ export class PlaylistStore implements OnDestroy { ); } - public returnToPlaylists(params : {force? : boolean} = {}) { - this._canLeaveWithoutSaving() + public returnToPlaylists() { + this.canLeaveWithoutSaving() .cancelOnDestroy(this) .monitor('playlist store: return to playlists list') .subscribe( @@ -238,8 +239,16 @@ export class PlaylistStore implements OnDestroy { ); } - private _canLeaveWithoutSaving() : Observable<{ allowed : boolean}> - { + private _updatePageExitVerification(enable : boolean) : void { + if (enable) { + this._browserService.enablePageExitVerification(); + } + else { + this._browserService.disablePageExitVerification(); + } + } + + public canLeaveWithoutSaving() : Observable<{ allowed : boolean}> { return Observable.create(observer => { if (this._sectionsState.getValue().metadata.isDirty || this._sectionsState.getValue().content.isDirty) { diff --git a/src/applications/content-playlists-app/playlist/playlist.component.html b/src/applications/content-playlists-app/playlist/playlist.component.html index 9393687016..c45fdc93a9 100644 --- a/src/applications/content-playlists-app/playlist/playlist.component.html +++ b/src/applications/content-playlists-app/playlist/playlist.component.html @@ -8,7 +8,7 @@ icon="kIconarrow_backward" (click)="_backToList()"> -
+
{{ playlistName }}