Update parallel tutorial

Author: jweisman

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

@@ -50,11 +50,12 @@ export class SelectItem {
   checked: boolean;
   id: string;
   description: string;
+  code: string;
   name: string;
 
   constructor(item: Partial<SelectItem>, checker: (id: string) => boolean) {
     Object.assign(this, item);
-    this.name = [this.description, this.id].join(' / ');
+    this.name = (this.description || this.code) || this.id;
     this.checked = checker(item.id);
   }
 }

cloudapp/src/app/parallel/parallel.component.html

@@ -1,8 +1,26 @@
+<div class="loading-shade" *ngIf="loading">
+  <mat-progress-spinner 
+    mode="indeterminate"
+    diameter="50"
+    >
+  </mat-progress-spinner>
+</div>
+<mat-form-field>
+  <mat-label>Number of users to retrieve</mat-label>
+  <mat-select [(value)]="num">
+    <mat-option [value]="5">5</mat-option>
+    <mat-option [value]="10">10</mat-option>
+    <mat-option [value]="20">20</mat-option>
+    <mat-option [value]="30">30</mat-option>
+    <mat-option [value]="40">40</mat-option>
+    <mat-option [value]="50">50</mat-option>
+  </mat-select>
+</mat-form-field>
 <p>
-  <button mat-stroked-button type="button" color="primary" (click)="run()">Run</button>
+  <button mat-stroked-button type="button" color="primary" (click)="run()">Retrieve users</button>
 </p>
 <ul>
   <li *ngFor="let user of users">
-    <strong>{{ user.name }}</strong>: ${{ user.fees.value }}
+    <strong>{{ user.full_name }}</strong>: ${{ user.fees.value }}
   </li>
 </ul>

cloudapp/src/app/parallel/parallel.component.scss

@@ -0,0 +1,12 @@
+.loading-shade {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  background: rgba(0, 0, 0, 0.15);
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

cloudapp/src/app/parallel/parallel.component.ts

@@ -1,18 +1,18 @@
 import { Component, OnInit } from '@angular/core';
 import { CloudAppRestService, RestErrorResponse } from '@exlibris/exl-cloudapp-angular-lib';
-import { mergeMap, map, catchError } from 'rxjs/operators';
-import { from, of } from 'rxjs';
+import { mergeMap, map, catchError, switchMap } from 'rxjs/operators';
+import { from, of, forkJoin, Observable } from 'rxjs';
 import { AppService } from '../app.service';
 
-const CONCURRENT_REQUESTS = 5;
-
 @Component({
   selector: 'app-parallel',
   templateUrl: './parallel.component.html',
   styleUrls: ['./parallel.component.scss']
 })
 export class ParallelComponent implements OnInit {
-  users: Array<{name: string, fees: number}>;
+  users: any[];
+  num = 10;
+  loading = false;
 
   constructor( 
     private restService: CloudAppRestService,
@@ -25,44 +25,35 @@ export class ParallelComponent implements OnInit {
 
   run() {
     this.users = [];
-    this.getUsers().subscribe(users=>this.loadUsers(users.user));
-  }
-
-  loadUsers(users: any[]) {
-    from(users).pipe(
-      mergeMap(user => this.restService.call(`/users/${user.primary_id}?expand=fees`), 
-        CONCURRENT_REQUESTS),
-      map(user=>({name: user.full_name, fees: user.fees}))
-    )
-    .subscribe(s=>this.users.push(s));
+    this.loadUsers();
   }
 
-  loadUsersWithErrors(users: any[]) {
-    from(this.addErrors(users)).pipe(
-      mergeMap(user => this.getUser(user), 
-        CONCURRENT_REQUESTS)
+  loadUsers() {
+    this.loading = true;
+    this.restService.call(`/users?limit=${this.num}`)
+    .pipe(
+      map(users=>
+        this.addErrors(users.user)
+        .map(user=>withErrorChecking(
+          this.restService.call(`/users/${user.primary_id}?expand=fees`)
+        ))
+      ),
+      switchMap(reqs=>forkJoin(reqs)),
     )
-    .subscribe(s=> {
-      if (isRestErrorResponse(s)) {
-        console.log('Error retrieving user:', s.message);
-      } else {
-        this.users.push(s)
-      }
+    .subscribe({
+      next: (s: any[])=>{
+        s.forEach(user=>{
+          if (isRestErrorResponse(user)) {
+            console.log('Error retrieving user: ' + user.message)
+          } else {
+            this.users.push(user);
+          }
+        })
+      },
+      complete: () => this.loading=false
     });
   }
 
-  getUsers() {
-    return this.restService.call('/users?limit=50');
-  }
-
-  getUser(user) {
-    return this.restService.call(`/users/${user.primary_id}?expand=fees`)
-      .pipe(
-        map(user=>({name: user.full_name, fees: user.fees})),
-        catchError(e=>of(e))
-      )
-  }
-
   addErrors(users: any[]) {
     for (let i=0; i<Math.floor(users.length*.25); i++) {
       users.splice(getRandomInt(users.length-1), 0, { primary_id: getRandomInt(1000000) });
@@ -73,3 +64,5 @@ export class ParallelComponent implements OnInit {
 
 const getRandomInt = (max: number)  => Math.floor(Math.random() * Math.floor(max));
 const isRestErrorResponse = (object: any): object is RestErrorResponse => 'error' in object;
+const withErrorChecking = (obs: Observable<any>): Observable<any> => 
+  obs.pipe(catchError( e => of(e)));