Add parallel requests

Author: jweisman

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

@@ -4,12 +4,14 @@ import { MainComponent } from './main/main.component';
 import { NewrouteComponent } from './newroute/newroute.component';
 import { ThemingComponent } from './theming/theming.component';
 import { SettingsComponent } from './settings/settings.component';
+import { ParallelComponent } from './parallel/parallel.component';
 
 const routes: Routes = [
   { path: '', component: MainComponent },
   { path: 'newroute', component: NewrouteComponent },
   { path: 'theming', component: ThemingComponent },
   { path: 'settings', component: SettingsComponent },
+  { path: 'parallel', component: ParallelComponent },
 ];
 
 @NgModule({

cloudapp/src/app/app.module.ts

@@ -13,6 +13,7 @@ import { TopmenuComponent } from './topmenu/topmenu.component';
 import { NewrouteComponent } from './newroute/newroute.component';
 import { ThemingComponent } from './theming/theming.component';
 import { SettingsComponent } from './settings/settings.component';
+import { ParallelComponent } from './parallel/parallel.component';
 
 export function getToastrModule() {
   return ToastrModule.forRoot({
@@ -28,7 +29,8 @@ export function getToastrModule() {
       TopmenuComponent,
       NewrouteComponent,
       ThemingComponent,
-      SettingsComponent
+      SettingsComponent,
+      ParallelComponent
    ],
    imports: [
       MaterialModule,

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

@@ -5,7 +5,8 @@ <h1>
   <p>This app includes all of the code referenced in the <a href="https://developers.exlibrisgroup.com/cloudapps/tutorials" target="_blank">tutorials section of the CloudApps documentation</a>. The following menu will lead you to the component referenced in the corresponding tutorial:</p>
   <ul>
     <li><a [routerLink]="['newroute']">Adding additional routes</a></li>
-    <li><a [routerLink]="['theming']">Using Material Components & Theming</a></li>
+    <li><a [routerLink]="['theming']">Using Material components & theming</a></li>
     <li><a [routerLink]="['settings']">Using the Settings Service</a></li>
+    <li><a [routerLink]="['parallel']">Making parallel API requests</a></li>
   </ul>
 </section>

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

@@ -0,0 +1,8 @@
+<p>
+  <button mat-stroked-button type="button" color="primary" (click)="run()">Run</button>
+</p>
+<ul>
+  <li *ngFor="let user of users">
+    <strong>{{ user.name }}</strong>: ${{ user.fees.value }}
+  </li>
+</ul>

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

@@ -0,0 +1,42 @@
+import { Component, OnInit } from '@angular/core';
+import { CloudAppRestService } from '@exlibris/exl-cloudapp-angular-lib';
+import { mergeMap, map } from 'rxjs/operators';
+import { from } 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}>;
+
+  constructor( 
+    private restService: CloudAppRestService,
+    private appService: AppService
+  ) { }
+
+  ngOnInit() {
+    this.appService.setTitle('Parallel Requests');
+  }
+
+  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));
+  }
+
+  getUsers() {
+    return this.restService.call('/users?limit=50');
+  }
+}

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

@@ -27,7 +27,6 @@ export class SettingsComponent implements OnInit {
       showValue: this.fb.control(false),
       pageSize: this.fb.control(10)
     });
-    //this.settingsService.remove().subscribe(()=>this.load());
     this.load();
   }
 

cloudapp/src/app/settings/settings.component.ts

@@ -1,12 +1,20 @@
 {
-   "$schema": "./manifest.schema.json",
    "id": "cloud-app-tutorials",
    "title": "CloudApp Tutorials",
-   "description": "Tutorials for CloudApps",
+   "subtitle": "Accompanying code for the CloudApp tutorials in the Developer Network",
+   "description": "The Ex Libris Developer Network includes a number of detailed tutorials which demonstrate various capabilities of CloudApps. For more information, see https://developers.exlibrisgroup.com/cloudapps/tutorials/.",
    "author": "Josh Weisman",
    "contentSecurity": {
       "sandbox": {
          "popups": true
       }
+   },
+   "pages": {
+      "settings": "/#/settings",
+      "help": "https://github.com/ExLibrisGroup/cloudapp-tutorials"
+   },
+   "icon": {
+      "type": "font",
+      "value": "fa fa-graduation-cap"
    }
 }