Use select entities component

Author: jweisman

cloudapp/src/app/app.module.ts

@@ -4,6 +4,7 @@ import { BrowserModule, Title } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MaterialModule, getTranslateModule, AlertModule } from '@exlibris/exl-cloudapp-angular-lib';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { SelectEntitiesModule } from 'eca-select-entities';
 
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
@@ -20,7 +21,6 @@ import { StoreComponent } from './store/store.component';
 import { TranslateComponent } from './translate/translate.component';
 import { ConfigurationComponent } from './configuration/configuration.component';
 import { MultiSelectComponent } from './multi-select/multi-select.component';
-import { SelectEntitiesComponent } from './multi-select/select-entities/select-entities.component';
 import { LightboxComponent } from './external/lightbox/lightbox.component'
 import { ErrorComponent } from './static/error.component';
 import { ConfirmationDialog, StyleComponent } from './style/style.component';
@@ -41,7 +41,6 @@ import { ConfirmationDialog, StyleComponent } from './style/style.component';
       TranslateComponent,
       ConfigurationComponent,
       MultiSelectComponent,
-      SelectEntitiesComponent,
       LightboxComponent,
       ErrorComponent,
       StyleComponent,
@@ -57,6 +56,7 @@ import { ConfirmationDialog, StyleComponent } from './style/style.component';
       ReactiveFormsModule,
       getTranslateModule(),
       AlertModule,
+      SelectEntitiesModule,
    ],
    providers: [
       Title

cloudapp/src/app/multi-select/multi-select.component.html

@@ -1,12 +1,12 @@
 <app-topmenu></app-topmenu>
-<p>A total of <strong>{{ ids.size }}</strong> items have been selected.</p>
-<div *ngIf="entities.length>0 else noEntities">
+<p>A total of <strong>{{ selectedEntities.size }}</strong> items have been selected.</p>
+<div *ngIf="(entities$ | async).length>0 else noEntities">
   <p>Select the desired items:</p>
-  <app-select-entities #selectEntities 
+  <eca-select-entities #selectEntities 
     (entitySelected)="onEntitySelected($event)"
-    [entityList]="entities"
-    [selectedEntities]="ids">
-  </app-select-entities>
+    [entityList]="entities$ | async"
+    [isEntitySelected]="isEntitySelected">
+  </eca-select-entities>
 </div>
 <ng-template #noEntities>
   Please navigate to a list.

cloudapp/src/app/multi-select/multi-select.component.ts

@@ -1,17 +1,14 @@
 import { Component, OnInit } from '@angular/core';
 import { AppService } from '../app.service';
-import { Entity, CloudAppEventsService } from '@exlibris/exl-cloudapp-angular-lib';
-import { Subscription } from 'rxjs';
+import { CloudAppEventsService, Entity } from '@exlibris/exl-cloudapp-angular-lib';
 
 @Component({
   selector: 'app-multi-select',
   templateUrl: './multi-select.component.html',
   styleUrls: ['./multi-select.component.scss']
 })
 export class MultiSelectComponent implements OnInit {
-  private pageLoad$: Subscription;
-  ids = new Set<string>();
-  entities: Entity[];
+  public entities$ = this.eventsService.entities$;
 
   constructor(
     private appService: AppService,
@@ -20,18 +17,17 @@ export class MultiSelectComponent implements OnInit {
 
   ngOnInit() {
     this.appService.setTitle('Multi-select');
-    this.pageLoad$ = this.eventsService.onPageLoad( pageInfo => {
-      this.entities = (pageInfo.entities||[]);
-    });
   }
 
   ngOnDestroy(): void {
-    this.pageLoad$.unsubscribe();
   }
 
-  onEntitySelected(event) {
-    if (event.checked) this.ids.add(event.mmsId);
-    else this.ids.delete(event.mmsId);
+  selectedEntities = new Set<string>();
+  isEntitySelected = (entity: Entity) => this.selectedEntities.has(entity.id);
+
+  onEntitySelected(event: {entity: Entity, checked: boolean}) {
+    if (event.checked) this.selectedEntities.add(event.entity.id);
+    else this.selectedEntities.delete(event.entity.id);
   }
 
 

cloudapp/src/app/multi-select/select-entities/select-entities.component.html

@@ -1,9 +1,9 @@
 {
    "id": "exlibrisgroup/cloudapp-tutorials",
    "title": "Cloud App Tutorials",
-   "description": "For more information on these tutorials, see https://developers.exlibrisgroup.com/cloudapps/tutorials/.",
    "subtitle": "Accompanying code for the Cloud App tutorials in the Developer Network",
    "author": "Ex Libris",
+   "description": "For more information on these tutorials, see https://developers.exlibrisgroup.com/cloudapps/tutorials/.",
    "contentSecurity": {
       "connectSrc": [
          "https://catalog.hathitrust.org/",