Style tutorial

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

@@ -13,6 +13,7 @@ import { TranslateComponent } from './translate/translate.component';
 import { ConfigurationComponent, ConfigurationGuard } from './configuration/configuration.component';
 import { MultiSelectComponent } from './multi-select/multi-select.component';
 import { ErrorComponent } from './static/error.component';
+import { StyleComponent } from './style/style.component';
 
 const routes: Routes = [
   { path: '', component: MainComponent },
@@ -27,6 +28,7 @@ const routes: Routes = [
   { path: 'translate', component: TranslateComponent },
   { path: 'multi-select', component: MultiSelectComponent },
   { path: 'configuration', component: ConfigurationComponent, canActivate: [ConfigurationGuard] },
+  { path: 'style', component: StyleComponent },
   { path: 'error', component: ErrorComponent }
 ];
 

cloudapp/src/app/app.component.ts

@@ -1,9 +1,9 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component } from '@angular/core';
 import { AppService } from './app.service';
 
 @Component({
   selector: 'app-root',
-  template: '<router-outlet></router-outlet>'
+  template: '<cloudapp-alert></cloudapp-alert><router-outlet></router-outlet>'
 })
 export class AppComponent {
 

cloudapp/src/app/app.module.ts

@@ -2,8 +2,7 @@ import { NgModule } from '@angular/core';
 import { HttpClientModule } from '@angular/common/http';
 import { BrowserModule, Title } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { MaterialModule, getTranslateModule } from '@exlibris/exl-cloudapp-angular-lib';
-import { ToastrModule } from 'ngx-toastr';
+import { MaterialModule, getTranslateModule, AlertModule } from '@exlibris/exl-cloudapp-angular-lib';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { AppComponent } from './app.component';
@@ -24,16 +23,10 @@ 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';
-
-export function getToastrModule() {
-  return ToastrModule.forRoot({
-    positionClass: 'toast-top-right',
-    timeOut: 2000
-  });
-}
+import { ConfirmationDialog, StyleComponent } from './style/style.component';
 
 @NgModule({
-   declarations: [
+   declarations: [	
       AppComponent,
       MainComponent,
       TopmenuComponent,
@@ -50,7 +43,9 @@ export function getToastrModule() {
       MultiSelectComponent,
       SelectEntitiesComponent,
       LightboxComponent,
-      ErrorComponent
+      ErrorComponent,
+      StyleComponent,
+      ConfirmationDialog,
    ],
    imports: [
       MaterialModule,
@@ -61,13 +56,16 @@ export function getToastrModule() {
       FormsModule,
       ReactiveFormsModule,
       getTranslateModule(),
-      getToastrModule()
+      AlertModule,
    ],
    providers: [
       Title
    ],
    bootstrap: [
       AppComponent
+   ],
+   entryComponents: [
+      ConfirmationDialog
    ]
 })
 export class AppModule { }

cloudapp/src/app/bind/bind.component.ts

@@ -1,10 +1,9 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { AppService } from '../app.service';
 import { FormGroup } from '@angular/forms';
-import { CloudAppRestService, CloudAppEventsService, PageInfo, HttpMethod, FormGroupUtil } from '@exlibris/exl-cloudapp-angular-lib';
+import { CloudAppRestService, CloudAppEventsService, PageInfo, HttpMethod, FormGroupUtil, AlertService } from '@exlibris/exl-cloudapp-angular-lib';
 import { Subscription } from 'rxjs';
 import { finalize, switchMap, tap } from 'rxjs/operators';
-import { ToastrService } from 'ngx-toastr';
 
 @Component({
   selector: 'app-bind',
@@ -20,7 +19,7 @@ export class BindComponent implements OnInit, OnDestroy {
     private appService: AppService,
     private restService: CloudAppRestService,
     private eventsService: CloudAppEventsService,
-    private toastr: ToastrService
+    private alert: AlertService
   ) { }
 
   ngOnInit() {
@@ -48,11 +47,11 @@ export class BindComponent implements OnInit, OnDestroy {
       method: HttpMethod.PUT
     }).pipe(
       switchMap(res => this.eventsService.refreshPage()),
-      tap(() => this.toastr.success('Item updated')),
+      tap(() => this.alert.success('Item updated')),
       finalize(() => this.saving=false)
     )
     .subscribe({
-      error: e => this.toastr.error(e.message)
+      error: e => this.alert.error(e.message)
     });
   }
 }

cloudapp/src/app/configuration/configuration.component.ts

@@ -1,8 +1,7 @@
 import { Component, OnInit, Injectable } from '@angular/core';
 import { AppService } from '../app.service';
 import { FormBuilder, FormGroup } from '@angular/forms';
-import { CloudAppConfigService, CloudAppEventsService, CloudAppRestService, InitData } from '@exlibris/exl-cloudapp-angular-lib';
-import { ToastrService } from 'ngx-toastr';
+import { CloudAppConfigService, CloudAppEventsService, CloudAppRestService, InitData, AlertService } from '@exlibris/exl-cloudapp-angular-lib';
 import { CanActivate, Router } from '@angular/router';
 import { Observable, iif, of } from 'rxjs';
 import { map, switchMap } from 'rxjs/operators';
@@ -21,7 +20,7 @@ export class ConfigurationComponent implements OnInit {
     private appService: AppService,
     private fb: FormBuilder,
     private configService: CloudAppConfigService,
-    private toastr: ToastrService
+    private alert: AlertService
   ) { }
 
   ngOnInit() {
@@ -44,10 +43,10 @@ export class ConfigurationComponent implements OnInit {
     this.saving = true;
     this.configService.set(this.form.value).subscribe(
       () => {
-        this.toastr.success('Configuration successfully saved.');
+        this.alert.success('Configuration successfully saved.');
         this.form.markAsPristine();
       },
-      err => this.toastr.error(err.message),
+      err => this.alert.error(err.message),
       ()  => this.saving = false
     );
   }  

cloudapp/src/app/external/external.component.ts

@@ -2,10 +2,9 @@ import { Component, OnInit, ViewChild } from '@angular/core';
 import { AppService } from '../app.service';
 import { HttpClient } from '@angular/common/http';
 import { map, finalize } from 'rxjs/operators';
-import { ToastrService } from 'ngx-toastr';
 import { environment } from '../../environments/environment';
 import { LightboxComponent } from './lightbox/lightbox.component';
-import { CloudAppEventsService } from '@exlibris/exl-cloudapp-angular-lib';
+import { CloudAppEventsService, AlertService } from '@exlibris/exl-cloudapp-angular-lib';
 
 @Component({
   selector: 'app-external',
@@ -23,7 +22,7 @@ export class ExternalComponent implements OnInit {
     private appService: AppService,
     private eventsService: CloudAppEventsService,
     private http: HttpClient,
-    private toastr: ToastrService
+    private alert: AlertService
   ) { }
 
   ngOnInit() {
@@ -49,7 +48,7 @@ export class ExternalComponent implements OnInit {
       )
       .subscribe({
         next: resp => this.record = resp,
-        error: e => this.toastr.error(e.message)
+        error: e => this.alert.error(e.message)
       });
   }
 
@@ -67,7 +66,7 @@ export class ExternalComponent implements OnInit {
       finalize(() => this.running = false)
     ).subscribe({
       next: resp => this.images = resp,
-      error: e => this.toastr.error(e.message)
+      error: e => this.alert.error(e.message)
     })
   }
 

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

@@ -1,7 +1,4 @@
 <section>
-  <h1>
-    Cloud App Tutorials
-  </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 Cloud Apps 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>
@@ -15,5 +12,6 @@ <h1>
     <li><a [routerLink]="['translate']">Translating your app</a></li>
     <li><a [routerLink]="['multi-select']">Selecting multiple entities</a></li>
     <li><a [routerLink]="['configuration']">Using the Configuration Service</a></li>
+    <li><a [routerLink]="['style']">Following the Style Guide</a></li>
   </ul>
 </section>

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

@@ -1,9 +0,0 @@
-.mat-checkbox-label {
-  white-space: normal !important;
-  line-height: unset !important;
-}
-
-mat-list-item {
-  height: unset !important;
-  padding-bottom: 10px !important;
-}

cloudapp/src/app/settings/settings.component.html

@@ -9,10 +9,10 @@
 <div *ngIf="form">
   <form [formGroup]="form">
     <section class="settings-section">
-      <mat-checkbox labelPosition="before" formControlName="showValue">Show Value</mat-checkbox>
+      <mat-checkbox labelPosition="before" formControlName="showValue">Show Value:</mat-checkbox>
     </section>
     <section class="settings-section">
-      <label class="example-margin">Align:</label>
+      <label class="example-margin">Page Size:</label>
       <mat-radio-group formControlName="pageSize">
         <mat-radio-button class="settings-control" [value]="5">5</mat-radio-button>
         <mat-radio-button class="settings-control" [value]="10">10</mat-radio-button>

cloudapp/src/app/settings/settings.component.scss

@@ -7,4 +7,8 @@
 
 .settings-control {
   margin: 0 10px;
-}
+}
+
+.full-width {
+  width: 100%;
+}

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

@@ -1,8 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { AppService } from '../app.service';
 import { FormGroup } from '@angular/forms';
-import { CloudAppSettingsService, FormGroupUtil } from '@exlibris/exl-cloudapp-angular-lib';
-import { ToastrService } from 'ngx-toastr';
+import { AlertService, CloudAppSettingsService, FormGroupUtil } from '@exlibris/exl-cloudapp-angular-lib';
 import { Settings } from '../models/settings';
 
 @Component({
@@ -17,26 +16,24 @@ export class SettingsComponent implements OnInit {
   constructor(
     private appService: AppService,
     private settingsService: CloudAppSettingsService,
-    private toastr: ToastrService
+    private alert: AlertService,
   ) { }
 
   ngOnInit() {
     this.appService.setTitle('Settings');
-    this.settingsService.getAsFormGroup().subscribe( settings => {
-      this.form = Object.keys(settings.value).length==0 ?
-        FormGroupUtil.toFormGroup(new Settings()) :
-        settings;
+    this.settingsService.get().subscribe( settings => {
+      this.form = FormGroupUtil.toFormGroup(Object.assign(new Settings(), settings))
     });
   }
 
   save() {
     this.saving = true;
     this.settingsService.set(this.form.value).subscribe(
       response => {
-        this.toastr.success('Settings successfully saved.');
+        this.alert.success('Settings successfully saved.');
         this.form.markAsPristine();
       },
-      err => this.toastr.error(err.message),
+      err => this.alert.error(err.message),
       ()  => this.saving = false
     );
   }

cloudapp/src/app/style/confirmation-dialog.html

@@ -0,0 +1,8 @@
+<h2 mat-dialog-title>Clear list</h2>
+<mat-dialog-content>
+  <p>Are you sure you wish to reset the list?</p>
+</mat-dialog-content>
+<mat-dialog-actions align="end">
+  <button mat-flat-button color="secondary" mat-dialog-close>No, keep list</button>
+  <button mat-flat-button color="secondary" [mat-dialog-close]="true" cdkFocusInitial>Yes, reset list</button>
+</mat-dialog-actions>

cloudapp/src/app/style/style.component.html

@@ -0,0 +1,26 @@
+<app-topmenu>
+  <div buttons>
+    <button mat-flat-button type="button" color="primary" (click)="reset()">Reset List</button>
+  </div>  
+</app-topmenu>
+<div class="loading-shade" *ngIf="loading">
+  <mat-progress-spinner mode="indeterminate" diameter="50"></mat-progress-spinner>
+</div>
+<p>
+  In order to maintain a consistent experience across Cloud Apps, Ex Libris has developed a <a href="https://developers.exlibrisgroup.com/cloudapps/docs/style/" target="styleguide">Cloud App Style Guide</a>. In this tutorial we will show an example of <a href="https://developers.exlibrisgroup.com/cloudapps/docs/style/#layout" target="styleguide">action buttons</a>, <a href="https://developers.exlibrisgroup.com/cloudapps/docs/style/#loading" target="styleguide">loading spinner</a>, <a href="https://developers.exlibrisgroup.com/cloudapps/docs/style/#icons" target="styleguide">icons as buttons</a>, <a href="https://developers.exlibrisgroup.com/cloudapps/docs/style/#dialog" target="styleguide">confirmation messages</a>, and an <a href="https://developers.exlibrisgroup.com/cloudapps/docs/style/#emptylist" target="styleguide">empty list</a>.
+</p>
+<h2>Items</h2>
+<div *ngIf="items.length > 0; else emptyList">
+  <mat-list>
+    <mat-list-item *ngFor="let item of items; index as i">
+      {{item}}
+      <i class="uxf-icon uxf-close eca-button" (click)="remove(i)"></i>
+    </mat-list-item>
+  </mat-list>
+</div>
+<ng-template #emptyList>
+  <div id="emptyList">
+    <span class="uxf-icon uxf-list" style="font-size: 3em;"></span>
+    <div>Add items to the list.</div>
+  </div>
+</ng-template>

cloudapp/src/app/style/style.component.scss

@@ -0,0 +1,13 @@
+#emptyList {
+  max-width: 200px;
+  margin: 0 auto;
+  text-align: center;
+}
+
+.mat-form-field {
+  margin-right: 10px;
+}
+
+.mat-list {
+  max-width: 400px;
+}

cloudapp/src/app/style/style.component.ts

@@ -0,0 +1,62 @@
+import { Component, OnInit } from '@angular/core';
+import { MatDialog } from "@angular/material/dialog";
+import { AlertService } from '@exlibris/exl-cloudapp-angular-lib';
+import { EMPTY, of } from 'rxjs';
+import { delay, finalize, map, tap } from 'rxjs/operators';
+import { AppService } from '../app.service';
+
+const INIT_VALUES = ['Lorem ipsum dolor sit amet', 'Pellentesque sit amet tempor tellus', 'Vivamus quis velit eget turpis', 'Curabitur ut justo metus'];
+
+@Component({
+  selector: 'app-style',
+  templateUrl: './style.component.html',
+  styleUrls: ['./style.component.scss']
+})
+export class StyleComponent implements OnInit {
+  items = [];
+  loading = false;
+
+  constructor( 
+    public dialog: MatDialog, 
+    public alert: AlertService,
+    public appService: AppService,
+  ) { }
+
+  ngOnInit() {
+    this.appService.setTitle('Following the Style Guide');
+    this._reset().subscribe();
+  }
+
+  remove(index: number) {
+    this.items.splice(index, 1);
+  }
+
+  private _reset() {
+    this.loading = true;
+    return EMPTY.pipe(
+      delay(1000),
+      finalize(()=> {
+        this.items = [...INIT_VALUES];
+        this.loading = false;
+      }) 
+    );
+  }
+
+  reset() {
+    const dialogRef = this.dialog.open(ConfirmationDialog, { autoFocus: false });
+    dialogRef.afterClosed().subscribe(result => {
+      if (!result) return;
+      this._reset().subscribe({
+        complete: () => this.alert.success('List successfully reset.')
+      });
+    });
+  }
+}
+
+@Component({
+  selector: 'style-confirmation-dialog',
+  templateUrl: 'confirmation-dialog.html',
+})
+export class ConfirmationDialog {
+  constructor() {}
+}