Merge remote-tracking branch 'origin/master'

kaltura · Jul 26, 2017 · 0cd17be · 0cd17be
2 parents 0e30ad2 + eb37e66
commit 0cd17be
Show file tree

Hide file tree

Showing 11 changed files with 88 additions and 25 deletions.
diff --git 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
@@ -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
@@ -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<PlaylistComponent> {
+    constructor() {}
+    canDeactivate(component: PlaylistComponent, currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot, nextState?: RouterStateSnapshot):Observable<boolean> {
+        return Observable.create((observer : any) =>
+        {
+            component.canLeave().subscribe(
+                result => {
+                    observer.next(result.allowed);
+                    observer.complete();
+                },
+                error => {
+                    observer.next(false);
+                    observer.complete();
+                }
+            );
+        });
+    }
+}
diff --git a/...cations/content-playlists-app/playlist/playlist-metadata/playlist-metadata.component.html b/...cations/content-playlists-app/playlist/playlist-metadata/playlist-metadata.component.html
@@ -4,9 +4,10 @@
 
     <form [formGroup]="metadataForm" novalidate>
       <div class="kRow kValign">
-        <span class="kLabel">{{'applications.content.playlistDetails.metadata.playlistName' | translate}}</span>
+        <span class="kLabel" [ngClass]="{'extraPadding': metadataForm.invalid}">{{'applications.content.playlistDetails.metadata.playlistName' | translate}}</span>
         <div class="kControl">
-          <input formControlName="name" type="text" pInputText/>
+          <input formControlName="name" type="text" pInputText #metadataNameInput />
+          <div [ngClass]="{'invalid': metadataForm.invalid, 'hidden': metadataForm.valid}">{{'applications.content.playlistDetails.metadata.nameIsMandatory' | translate}}</div>
         </div>
       </div>
       <div class="kRow">

diff --git a/...cations/content-playlists-app/playlist/playlist-metadata/playlist-metadata.component.scss b/...cations/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/...lications/content-playlists-app/playlist/playlist-metadata/playlist-metadata.component.ts b/...lications/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<SuggestionsProviderData>();
   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
@@ -164,15 +164,16 @@ export class PlaylistStore implements OnDestroy {
     }
 
     if(hasChanges) {
-      this._sectionsState.next(sections)
+      this._sectionsState.next(sections);
+      this._updatePageExitVerification(sections.metadata.isDirty || sections.content.isDirty);
     }
   }
 
   public savePlaylist() : void {
     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
@@ -8,7 +8,7 @@
           icon="kIconarrow_backward"
           (click)="_backToList()">
         </button>
-				<div class="kMediaTypeIcon kIconvideo"></div> <!-- TODO [kmc] should be a correct icon here -->
+				<div class="kMediaTypeIcon kIconPlaylist_Manual"></div>
 				<div class="kPlaylistTitle">{{ playlistName }}</div>
 				<button pButton class="kButtonBranded kSaveBtn" label="Save" (click)="save()" [disabled]="!isDirty"></button>
 				<button pButton class="kButtonDefault kNavigationBtn kNavigationBtnLeft"  icon="kIconarrow_backward"

diff --git a/src/applications/content-playlists-app/playlist/playlist.component.ts b/src/applications/content-playlists-app/playlist/playlist.component.ts
@@ -1,13 +1,14 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { BrowserService } from 'app-shared/kmc-shell';
-import { PlaylistStore } from './playlist-store.service';
-import { PlaylistsStore } from '../playlists/playlists-store/playlists-store.service';
 import {
   AreaBlockerMessage,
   AreaBlockerMessageButton
 } from '@kaltura-ng/kaltura-ui';
 import { AppLocalization } from '@kaltura-ng/kaltura-common';
 import { Router } from '@angular/router';
+import { Observable } from 'rxjs/Observable';
+import { PlaylistStore } from './playlist-store.service';
+import { PlaylistsStore } from '../playlists/playlists-store/playlists-store.service';
 
 @Component({
   selector: 'kPlaylist',
@@ -139,5 +140,9 @@ export class PlaylistComponent implements OnInit, OnDestroy {
     }
   }
 
+  public canLeave(): Observable<{ allowed : boolean}>{
+    return this._playlistStore.canLeaveWithoutSaving();
+  }
+
 	ngOnDestroy() {}
 }
diff --git a/src/applications/content-playlists-app/playlists/pipes/playlist-type.pipe.ts b/src/applications/content-playlists-app/playlists/pipes/playlist-type.pipe.ts
@@ -15,15 +15,15 @@ export class PlaylistTypePipe implements PipeTransform {
 		if (typeof(value) !== 'undefined' && value !== null) {
 			switch (value) {
 				case KalturaPlaylistType.dynamic:
-				  className = 'kIconsound'; /* TODO [kmc] should be the correct icons here and below */
+				  className = 'kIconPlaylist_RuleBased'; /* TODO [kmc] should be the correct icons here and below */
 					playlistType = this.appLocalization.get("applications.content.playlistType.dynamic");
 					break;
 				case KalturaPlaylistType.external:
-          className = 'kIconimage';
+          className = 'kIconPlaylist_RuleBased';
 					playlistType = this.appLocalization.get("applications.content.playlistType.external");
 					break;
 				case KalturaPlaylistType.staticList:
-          className = 'kIconvideo';
+          className = 'kIconPlaylist_Manual';
 					playlistType = this.appLocalization.get("applications.content.playlistType.staticList");
 					break;
 				default:

diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -543,7 +543,8 @@
         "metadata": {
           "playlistName": "Name",
           "description": "Description",
-          "tags": "Tags"
+          "tags": "Tags",
+          "nameIsMandatory": "You must enter a playlist name"
         },
         "errors": {
           "retry": "Retry",