Add multi-select tutorial

Author: jweisman

cloudapp/src/app/app-routing.module.ts

@@ -11,6 +11,7 @@ import { BindComponent } from './bind/bind.component';
 import { StoreComponent } from './store/store.component';
 import { TranslateComponent } from './translate/translate.component';
 import { ConfigurationComponent, ConfigurationGuard } from './configuration/configuration.component';
+import { MultiSelectComponent } from './multi-select/multi-select.component';
 
 const routes: Routes = [
   { path: '', component: MainComponent },
@@ -23,6 +24,7 @@ const routes: Routes = [
   { path: 'bind', component: BindComponent },
   { path: 'store', component: StoreComponent },
   { path: 'translate', component: TranslateComponent },
+  { path: 'multi-select', component: MultiSelectComponent },
   { path: 'configuration', component: ConfigurationComponent, canActivate: [ConfigurationGuard] },
 ];
 

cloudapp/src/app/app.module.ts

@@ -20,6 +20,8 @@ import { BindComponent } from './bind/bind.component';
 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';
 
 export function getToastrModule() {
   return ToastrModule.forRoot({
@@ -42,7 +44,9 @@ export function getToastrModule() {
       BindComponent,
       StoreComponent,
       TranslateComponent,
-      ConfigurationComponent
+      ConfigurationComponent,
+      MultiSelectComponent,
+      SelectEntitiesComponent
    ],
    imports: [
       MaterialModule,

cloudapp/src/app/main/main.component.html

@@ -13,6 +13,7 @@ <h1>
     <li><a [routerLink]="['bind']">Model binding with REST objects</a></li>  
     <li><a [routerLink]="['store']">Using the Store Service</a></li>  
     <li><a [routerLink]="['translate']">Translating your app</a></li>
+    <li><a [routerLink]="['multi-select']">Selecting multiple entities</a></li>
     <li *ngIf="isAdmin"><a [routerLink]="['configuration']">Using the Configuration Service</a></li>
   </ul>
 </section>

cloudapp/src/app/models/settings.ts

@@ -1,4 +1,4 @@
-export interface Settings {
-  showValue: boolean,
-  pageSize: number
+export class Settings {
+  showValue: boolean = false;
+  pageSize: number = 10;
 }

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

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

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

@@ -0,0 +1,38 @@
+import { Component, OnInit } from '@angular/core';
+import { AppService } from '../app.service';
+import { Entity, CloudAppEventsService } from '@exlibris/exl-cloudapp-angular-lib';
+import { Subscription } from 'rxjs';
+
+@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[];
+
+  constructor(
+    private appService: AppService,
+    private eventsService: CloudAppEventsService
+  ) { }
+
+  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);
+  }
+
+
+}

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

@@ -0,0 +1,15 @@
+<mat-list>
+  <mat-list-item>
+    <mat-checkbox
+    [(ngModel)]="masterChecked"
+    [(indeterminate)]="masterIndeterminate"
+    (change)="masterChange()"
+    ><b>Check/Uncheck All</b></mat-checkbox>
+  </mat-list-item>
+  <mat-list-item *ngFor="let entity of entities">
+    <mat-checkbox [value]="entity.id"
+    [(ngModel)]="entity.checked"
+    (change)="listChange($event)"
+    >{{entity.name}}</mat-checkbox>
+  </mat-list-item> 
+</mat-list>

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

@@ -0,0 +1,59 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { MatCheckboxChange } from '@angular/material';
+import { Entity } from '@exlibris/exl-cloudapp-angular-lib';
+
+@Component({
+  selector: 'app-select-entities',
+  templateUrl: './select-entities.component.html',
+  styleUrls: ['./select-entities.component.scss']
+})
+export class SelectEntitiesComponent implements OnInit {
+  masterChecked: boolean;
+  masterIndeterminate: boolean;
+  entities: SelectItem[];
+  @Input() selectedEntities: Set<string>;
+  @Output() entitySelected = new EventEmitter();
+
+  constructor() { }
+
+  ngOnInit() {
+    this.masterChecked = false;
+  }
+
+  @Input()
+  set entityList(val: Entity[]) {
+    this.entities = val.map(i=>new SelectItem(i, id => this.selectedEntities.has(id)));
+    this.determineMasterValue();
+  }
+
+  masterChange() {
+    Object.values(this.entities).forEach(b=>{
+      b.checked = this.masterChecked;
+      this.entitySelected.emit({mmsId: b.id, checked: b.checked})
+    })
+  }
+
+  listChange(e: MatCheckboxChange){
+    this.determineMasterValue();
+    this.entitySelected.emit({mmsId: e.source.value, checked: e.checked});
+  }
+
+  determineMasterValue() {
+    const checked_count = Object.values(this.entities).filter(i=>i.checked).length;
+    this.masterChecked = checked_count == this.entities.length;
+    this.masterIndeterminate = checked_count > 0 && checked_count < this.entities.length;
+  }
+}
+
+export class SelectItem {
+  checked: boolean;
+  id: string;
+  description: string;
+  name: string;
+
+  constructor(item: Partial<SelectItem>, checker: (id: string) => boolean) {
+    Object.assign(this, item);
+    this.name = [this.description, this.id].join(' / ');
+    this.checked = checker(item.id);
+  }
+}