Configuration tutorial

To be published in the June release.

Author: jweisman

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

@@ -10,6 +10,7 @@ import { XmlComponent } from './xml/xml.component';
 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';
 
 const routes: Routes = [
   { path: '', component: MainComponent },
@@ -22,6 +23,7 @@ const routes: Routes = [
   { path: 'bind', component: BindComponent },
   { path: 'store', component: StoreComponent },
   { path: 'translate', component: TranslateComponent },
+  { path: 'configuration', component: ConfigurationComponent, canActivate: [ConfigurationGuard] },
 ];
 
 @NgModule({

cloudapp/src/app/app.module.ts

@@ -19,6 +19,7 @@ import { XmlComponent } from './xml/xml.component';
 import { BindComponent } from './bind/bind.component';
 import { StoreComponent } from './store/store.component';
 import { TranslateComponent } from './translate/translate.component';
+import { ConfigurationComponent } from './configuration/configuration.component';
 
 export function getToastrModule() {
   return ToastrModule.forRoot({
@@ -40,7 +41,8 @@ export function getToastrModule() {
       XmlComponent,
       BindComponent,
       StoreComponent,
-      TranslateComponent
+      TranslateComponent,
+      ConfigurationComponent
    ],
    imports: [
       MaterialModule,

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

@@ -1,11 +1,10 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { AppService } from '../app.service';
 import { FormGroup } from '@angular/forms';
-import { CloudAppRestService, CloudAppEventsService, PageInfo, HttpMethod } from '@exlibris/exl-cloudapp-angular-lib';
+import { CloudAppRestService, CloudAppEventsService, PageInfo, HttpMethod, FormGroupUtil } from '@exlibris/exl-cloudapp-angular-lib';
 import { Subscription } from 'rxjs';
 import { finalize, switchMap, tap } from 'rxjs/operators';
 import { ToastrService } from 'ngx-toastr';
-import { toFormGroup } from '../utils'
 
 @Component({
   selector: 'app-bind',
@@ -30,7 +29,7 @@ export class BindComponent implements OnInit, OnDestroy {
       const entities = (pageInfo.entities||[]).filter(e=>e.type=='ITEM');
       if (entities.length > 0) {
         this.restService.call(entities[0].link)
-          .subscribe(res=>this.form = toFormGroup(res));
+          .subscribe(res=>this.form = FormGroupUtil.toFormGroup(res));
       } else {
         this.form = null;
       }

cloudapp/src/app/configuration/configuration.component.html

@@ -0,0 +1,12 @@
+<form [formGroup]="form">
+  <section class="config-section">
+    <mat-form-field>
+      <input matInput placeholder="Service URL" formControlName="serviceUrl">
+    </mat-form-field>  
+  </section>
+</form>
+
+<div class="commands-container">
+  <button mat-stroked-button type="button" color="primary" (click)="save()" [disabled]="!form.dirty">Save</button>
+  <mat-spinner diameter="30" class="spinner" *ngIf="saving"></mat-spinner>
+</div>

cloudapp/src/app/configuration/configuration.component.scss

@@ -0,0 +1,11 @@
+.config-section {
+  display: flex;
+  align-content: center;
+  align-items: center;
+  margin: 10px 0;
+  width: 100%;
+}
+
+mat-form-field {
+  width: 100%;
+}

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

@@ -0,0 +1,75 @@
+import { Component, OnInit, Injectable } from '@angular/core';
+import { AppService } from '../app.service';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { CloudAppConfigService, CloudAppEventsService } from '@exlibris/exl-cloudapp-angular-lib';
+import { ToastrService } from 'ngx-toastr';
+import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-configuration',
+  templateUrl: './configuration.component.html',
+  styleUrls: ['./configuration.component.scss']
+})
+export class ConfigurationComponent implements OnInit {
+  form: FormGroup;
+  saving = false;
+  
+  constructor(
+    private appService: AppService,
+    private fb: FormBuilder,
+    private configService: CloudAppConfigService,
+    private toastr: ToastrService
+  ) { }
+
+  ngOnInit() {
+    this.appService.setTitle('Configuration');
+    this.form = this.fb.group({
+      serviceUrl: this.fb.control('')
+    });
+    this.load();
+  }
+
+  load() {
+    this.configService.getAsFormGroup().subscribe( settings => {
+      if (Object.keys(settings.value).length!=0) {
+        this.form = settings;
+      }
+    });   
+  }
+
+  save() {
+    this.saving = true;
+    this.configService.set(this.form.value).subscribe(
+      response => {
+        this.toastr.success('Settings successfully saved.');
+        this.form.markAsPristine();
+      },
+      err => this.toastr.error(err.message),
+      ()  => this.saving = false
+    );
+  }  
+
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ConfigurationGuard implements CanActivate {
+  constructor(
+    private eventsService: CloudAppEventsService,
+    private router: Router
+  ) {}
+  canActivate(
+    next: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot): Observable<boolean> {
+      return this.eventsService.getInitData().pipe(map( data => {
+        if (!data.user.isAdmin) {
+          this.router.navigate(['/']);
+          return false;
+        }
+        return true;
+      }))
+  }
+}

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

@@ -12,6 +12,7 @@ <h1>
     <li><a [routerLink]="['xml']">Working with bibliographic records in XML</a></li>
     <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]="['translate']">Translating your app</a></li>
+    <li *ngIf="isAdmin"><a [routerLink]="['configuration']">Using the Configuration Service</a></li>
   </ul>
 </section>

cloudapp/src/app/main/main.component.ts

@@ -1,17 +1,23 @@
 import { Component, OnInit } from '@angular/core';
 import { AppService } from '../app.service';
+import { CloudAppEventsService } from '@exlibris/exl-cloudapp-angular-lib';
 
 @Component({
   selector: 'app-main',
   templateUrl: './main.component.html',
   styleUrls: ['./main.component.scss']
 })
 export class MainComponent implements OnInit {
+  isAdmin = false;
 
-  constructor(private appService: AppService) { }
+  constructor(
+    private appService: AppService,
+    private eventsService: CloudAppEventsService
+  ) { }
 
   ngOnInit() { 
     this.appService.setTitle('');
+    this.eventsService.getInitData().subscribe(data=>this.isAdmin = data.user.isAdmin)
   }
 
 }

cloudapp/src/app/store/store.component.ts

@@ -2,10 +2,9 @@ import { Component, OnInit } from '@angular/core';
 import { AppService } from '../app.service';
 import { FormGroup, FormControl } from '@angular/forms';
 import { debounceTime, switchMap } from 'rxjs/operators';
-import { CloudAppStoreService } from '@exlibris/exl-cloudapp-angular-lib';
-import { toFormGroup } from '../utils';
+import { CloudAppStoreService, FormGroupUtil } from '@exlibris/exl-cloudapp-angular-lib';
 
-const FORM_NAME = 'StoreForm';
+const KEY = 'StoreForm';
 
 @Component({
   selector: 'app-store',
@@ -26,14 +25,14 @@ export class StoreComponent implements OnInit {
       content: new FormControl()
     });
 
-    this.storeService.get(FORM_NAME).subscribe( value => {
+    this.storeService.get(KEY).subscribe( value => {
       if (value) {
-        this.form = toFormGroup(value);
+        this.form = FormGroupUtil.toFormGroup(value);
       }
 
       this.form.valueChanges.pipe(
         debounceTime(500), 
-        switchMap(val=>this.storeService.set(FORM_NAME, val))
+        switchMap(val=>this.storeService.set(KEY, val))
       ).subscribe()
     })
   }