feat(content-playlists): bulk delete of playlists

src/applications/content-entries-app/entries/bulk-actions/bulk-actions.component.ts

@@ -164,7 +164,7 @@ export class BulkActionsComponent implements OnInit, OnDestroy {
             this._browserService.setAppStatus({isBusy: false, errorMessage: this._appLocalization.get('applications.content.bulkActions.error')});
           }
       );
-    }
+    };
 
     if (this.selectedEntries.length > environment.modules.contentEntries.bulkActionsLimit){
       this._browserService.confirm(

src/applications/content-entries-app/entries/bulk-actions/services/bulk-delete.service.ts

@@ -26,7 +26,7 @@ export class BulkDeleteService extends BulkActionBaseService<{}> {
 
       this.transmit(requests, true).subscribe(
         result => {
-          observer.next({})
+          observer.next({});
           observer.complete();
         },
         error => {

src/applications/content-entries-app/entries/entries-list.component.ts

@@ -157,7 +157,6 @@ export class EntriesListComponent implements OnInit, OnDestroy {
 			    );
 			    break;
 		    default:
-			    alert("Selected Action: " + event.action + "\nEntry ID: " + event.entryID);
 			    break;
 	    }
     }

src/applications/content-playlists-app/content-playlists-app.module.ts

@@ -30,8 +30,6 @@ import { PopupWidgetModule } from '@kaltura-ng/kaltura-ui/popup-widget';
 import { ContentPlaylistsComponent } from './content-playlists.component';
 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({
@@ -63,12 +61,11 @@ import { PlaylistCanDeactivate } from './playlist/playlist-can-deactivate.servic
       PlaylistsComponentsList,
       PlaylistComponentsList
     ],
-    exports: [],
-    providers: [
-      PlaylistsStore,
-      PlaylistStore,
-      PlaylistCanDeactivate
-	],
+    exports: [
+    ],
+    providers : [
+        PlaylistCanDeactivate
+    ]
 })
 export class ContentPlaylistsAppModule {
 }

src/applications/content-playlists-app/content-playlists-app.routes.ts

@@ -1,5 +1,6 @@
 import { Route } from '@angular/router';
 
+import { ContentPlaylistsComponent } from './content-playlists.component';
 import { PlaylistsListComponent } from './playlists/playlists-list.component';
 import { PlaylistComponent } from './playlist/playlist.component';
 import { PlaylistMetadataComponent } from './playlist/playlist-metadata/playlist-metadata.component';
@@ -8,16 +9,21 @@ 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', canDeactivate: [PlaylistCanDeactivate], component: PlaylistComponent,
-		data : {
-			playlistRoute : true
-		},
-		children : [
-			{ path: '', redirectTo: 'content', pathMatch: 'full' },
-			{ path: 'metadata', component: PlaylistMetadataComponent, data : { sectionKey : PlaylistSections.Metadata } },
-			{ path: 'content', component: PlaylistContentComponent, data : { sectionKey : PlaylistSections.Content } }
-		]
-	}
+  {
+    path: '', component: ContentPlaylistsComponent,
+    children: [
+      { path: '', redirectTo: 'list', pathMatch: 'full' },
+      { path: 'list', component: PlaylistsListComponent },
+      { path: 'playlist/:id', canDeactivate: [PlaylistCanDeactivate], component: PlaylistComponent,
+        data: {
+          playlistRoute: true
+        },
+        children: [
+          { path: '', redirectTo: 'content', pathMatch: 'full'},
+          { path: 'metadata', component: PlaylistMetadataComponent, data: { sectionKey: PlaylistSections.Metadata } },
+          { path: 'content', component: PlaylistContentComponent, data: { sectionKey: PlaylistSections.Content } }
+        ]
+      }
+    ]
+  }
 ];

src/applications/content-playlists-app/content-playlists.component.ts

@@ -1,9 +1,11 @@
 import { Component } from '@angular/core';
+import { PlaylistsStore } from './playlists/playlists-store/playlists-store.service';
 
 @Component({
     selector: 'kPlaylists',
     templateUrl: './content-playlists.component.html',
-    styleUrls: ['./content-playlists.component.scss']
+    styleUrls: ['./content-playlists.component.scss'],
+    providers: [PlaylistsStore]
 })
 export class ContentPlaylistsComponent  {}
 

src/applications/content-playlists-app/playlist/playlist-components-list.ts

@@ -3,6 +3,7 @@ import { PlaylistContentComponent } from './playlist-content/playlist-content.co
 import { PlaylistSectionsList } from "./playlist-sections-list/playlist-sections-list.component";
 import { PlaylistComponent } from './playlist.component';
 import { PlaylistDetailsComponent } from './playlist-details/playlist-details.component';
+import { PlaylistEntriesTableComponent } from './playlist-entries-table/playlist-entries-table.component';
 import { ModerationPipe } from './pipes/moderation.pipe';
 
 
@@ -12,5 +13,6 @@ export const PlaylistComponentsList = [
 	PlaylistSectionsList,
 	PlaylistComponent,
 	PlaylistDetailsComponent,
+  PlaylistEntriesTableComponent,
   ModerationPipe
 ];

src/applications/content-playlists-app/playlist/playlist-content/playlist-content.component.html

@@ -1 +1,18 @@
-<h1>{{'applications.content.playlistDetails.sections.content' | translate}}</h1>
+<k-area-blocker [showLoader]="" [message]="">
+  <div class="kContentDetails">
+    <div class="kPlaylistsTableFilters">
+      <button
+        pButton
+        type="button"
+        label="{{'applications.content.playlists.addEntry' | translate}}"
+        class="kButtonBranded kAddPlaylistBtn"></button>
+      <span
+        class="kSelectedPlaylistsNum"
+        *ngIf="(_playlistStore.entries$ | async)?.totalCount">
+				{{(_playlistStore.entries$ | async)?.totalCount}} {{'applications.content.playlists.playlists' | translate}}</span>
+    </div>
+    <kPlaylistEntriesTable
+      class="kPlaylistEntriesTable"
+      [entries]="(_playlistStore.entries$ | async)?.items"></kPlaylistEntriesTable>
+  </div>
+</k-area-blocker>

src/applications/content-playlists-app/playlist/playlist-content/playlist-content.component.scss

@@ -0,0 +1,23 @@
+@import 'app-theme/_variables.scss';
+
+.kContentDetails {
+  width: 100%;
+
+  .kPlaylistsTableFilters {
+    width: 100%;
+    height: 66px;
+    background-color: white;
+    flex: 0 0 auto;
+    align-items: center;
+    display: flex;
+
+    .kAddPlaylistBtn {
+      margin-left: 14px;
+      height: 36px;
+    }
+
+    .kSelectedPlaylistsNum{
+      padding-left: 16px;
+    }
+  }
+}

src/applications/content-playlists-app/playlist/playlist-content/playlist-content.component.ts

@@ -1,4 +1,5 @@
 import { Component, AfterViewInit, OnInit, OnDestroy } from '@angular/core';
+import { PlaylistStore } from '../playlist-store.service';
 
 @Component({
   selector: 'kPlaylistContent',
@@ -7,7 +8,7 @@ import { Component, AfterViewInit, OnInit, OnDestroy } from '@angular/core';
 })
 export class PlaylistContentComponent implements AfterViewInit, OnInit, OnDestroy {
 
-    constructor() {}
+    constructor(public _playlistStore: PlaylistStore) {}
 
     ngOnInit() {}
 

src/applications/content-playlists-app/playlist/playlist-entries-table/playlist-entries-table.component.html

@@ -0,0 +1,51 @@
+<k-area-blocker kFillHeight
+	[showLoader]=""
+	[message]="">
+	<div class="kPlaylistEntriesTable" [class.noResults]="!_entries.length">
+		<p-dataTable
+			#dataTable
+			[value]="_entries"
+			scrollable="true"
+			scrollHeight="100%"
+			dataKey="id"
+			[rowTrackBy]="rowTrackBy">
+      <p-column [style]="{'width':'44px', 'padding-left': '14px'}" selectionMode="multiple"></p-column>
+      <p-column field="thumbnailUrl" header="{{'applications.content.table.thumbnail' | translate}}" [style]="{'width':'100px'}">
+        <ng-template let-col let-entry="rowData" pTemplate="body">
+          <div class="kThumbnailHolder">
+            <img src="{{entry[col.field]}}" onError="this.onerror=null;this.style.display='none'">
+          </div>
+        </ng-template>
+      </p-column>
+      <p-column field="name" header="{{'applications.content.table.name' | translate}}" [sortable]="'custom'">
+        <ng-template let-col let-entry="rowData" pTemplate="body">
+          <span class="kTitle">{{entry[col.field]}}</span>
+        </ng-template>
+      </p-column>
+      <p-column field="mediaType" header="{{'applications.content.table.type' | translate}}" [sortable]="'custom'"
+                [style]="{'width':'80px', 'text-align': 'center'}">
+        <ng-template let-col let-entry="rowData" pTemplate="body">
+          <div [kTooltip]="entry[col.field]">{{entry[col.field]}}</div>
+        </ng-template>
+      </p-column>
+      <p-column field="createdAt" header="Created On" [sortable]="true" [style]="{'width':'140px'}">
+        <ng-template let-col let-entry="rowData" pTemplate="body">
+          <span>{{entry[col.field] | kDate}}</span>
+        </ng-template>
+      </p-column>
+
+      <p-column field="duration" header="{{'applications.content.table.duration' | translate}}" [sortable]="'custom'" [style]="{'width':'104px'}">
+        <ng-template let-col let-entry="rowData" pTemplate="body">
+          <span>{{entry[col.field]}}</span>
+        </ng-template>
+      </p-column>
+      <p-column header="" [style]="{'overflow':'visible', 'width':'80px'}">
+        <ng-template let-col let-entry="rowData" pTemplate="body">
+          <div class="kEntriesTableActions">
+            <button type="button" pButton icon="kIconmore"></button>
+          </div>
+        </ng-template>
+      </p-column>
+		</p-dataTable>
+	</div>
+</k-area-blocker>

src/applications/content-playlists-app/playlist/playlist-entries-table/playlist-entries-table.component.scss

@@ -0,0 +1,44 @@
+@import 'app-theme/_variables.scss';
+
+.kPlaylistEntriesTable {
+  background-color: white;
+  overflow-y: hidden;
+  position: absolute;
+  padding: 0px;
+
+  .kThumbnailHolder {
+    overflow: hidden;
+    position: relative;
+    width: 80px;
+    height: 46px;
+    background-color: $kGrayscale6;
+    white-space: nowrap;
+    text-align: center;
+    border-radius: 3px;
+    cursor: pointer;
+
+    img {
+      position:absolute;
+      left: -100%;
+      right: -100%;
+      top: -100%;
+      bottom: -100%;
+      margin: auto;
+      width: 80px;
+      height: auto;
+      border-radius: 3px;
+    }
+  }
+
+  .kEntriesTableActions {
+    width: 100%;
+    text-align: center;
+    button {
+      color: grey !important;
+      background-color: rgba(0, 0, 0, 0) !important;
+      border: none !important;
+      font-size: 16px !important;
+      outline: 0;
+    }
+  }
+}

src/applications/content-playlists-app/playlist/playlist-entries-table/playlist-entries-table.component.ts

@@ -0,0 +1,60 @@
+import { Component, Input, Output,	EventEmitter,	AfterViewInit, OnInit, OnDestroy,	ViewChild, ChangeDetectorRef } from '@angular/core';
+import { ISubscription } from 'rxjs/Subscription';
+import { MenuItem, DataTable, Menu } from 'primeng/primeng';
+import { AppLocalization } from '@kaltura-ng/kaltura-common';
+import { AreaBlockerMessage } from '@kaltura-ng/kaltura-ui';
+import { KalturaMediaType } from 'kaltura-typescript-client/types/KalturaMediaType';
+import { KalturaMediaEntry } from 'kaltura-typescript-client/types/KalturaMediaEntry';
+import { KalturaEntryStatus } from 'kaltura-typescript-client/types/KalturaEntryStatus';
+import { PlaylistStore } from "../playlist-store.service";
+
+@Component({
+	selector: 'kPlaylistEntriesTable',
+	templateUrl: './playlist-entries-table.component.html',
+	styleUrls: ['./playlist-entries-table.component.scss']
+})
+export class PlaylistEntriesTableComponent implements AfterViewInit, OnInit, OnDestroy {
+	public _entries: any[] = [];
+  private _deferredEntries : any[];
+  public _deferredLoading = true;
+	public rowTrackBy: Function = (index: number, item: any) => {return item.id};
+
+  @Input() set entries(data: any[]) {
+    if (!this._deferredLoading) {
+      this._entries = [];
+      this.cdRef.detectChanges();
+      this._entries = data;
+      this.cdRef.detectChanges();
+    } else {
+      this._deferredEntries = data
+    }
+  }
+
+	constructor(
+		private appLocalization: AppLocalization,
+		public playlistStore: PlaylistStore,
+		private cdRef: ChangeDetectorRef
+	) {}
+	ngOnInit() {
+    /*this.playlistStore.entries$
+      .subscribe(response => {
+
+      });*/
+	}
+
+	ngAfterViewInit() {
+    if (this._deferredLoading) {
+      // use timeout to allow the DOM to render before setting the data to the datagrid. This prevents the screen from hanging during datagrid rendering of the data.
+      setTimeout(()=> {
+        this._deferredLoading = false;
+        this._entries = this._deferredEntries;
+        this._deferredEntries = null;
+      }, 0);
+    }
+	}
+
+	ngOnDestroy() {
+
+	}
+}
+

src/applications/content-playlists-app/playlist/playlist-metadata/playlist-metadata.component.scss

@@ -1,16 +1,14 @@
 @import 'app-theme/_variables.scss';
 
 .kMetadataDetails {
-  padding: 18px 8px 0 12px;
+  padding: 26px 8px 8px 20px;
   overflow-y: auto;
   width: 100%;
 
   .kSchemaTitle {
     color: $kGrayscale1;
     font-size: 18px;
-    font-weight: 700;
-    padding-top: 30px;
-    padding-bottom: 12px;
+    font-weight: bold;
   }
 
   /deep/ {