Settings tutorial

Author: jweisman

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

@@ -3,11 +3,13 @@ import { Routes, RouterModule } from '@angular/router';
 import { MainComponent } from './main/main.component';
 import { NewrouteComponent } from './newroute/newroute.component';
 import { ThemingComponent } from './theming/theming.component';
+import { SettingsComponent } from './settings/settings.component';
 
 const routes: Routes = [
   { path: '', component: MainComponent },
   { path: 'newroute', component: NewrouteComponent },
   { path: 'theming', component: ThemingComponent },
+  { path: 'settings', component: SettingsComponent },
 ];
 
 @NgModule({

cloudapp/src/app/app.module.ts

@@ -4,13 +4,15 @@ 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 { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
 import { MainComponent } from './main/main.component';
 import { TopmenuComponent } from './topmenu/topmenu.component';
 import { NewrouteComponent } from './newroute/newroute.component';
 import { ThemingComponent } from './theming/theming.component';
+import { SettingsComponent } from './settings/settings.component';
 
 export function getToastrModule() {
   return ToastrModule.forRoot({
@@ -25,14 +27,17 @@ export function getToastrModule() {
       MainComponent,
       TopmenuComponent,
       NewrouteComponent,
-      ThemingComponent,      
+      ThemingComponent,
+      SettingsComponent
    ],
    imports: [
       MaterialModule,
       BrowserModule,
       BrowserAnimationsModule,
       AppRoutingModule,
       HttpClientModule,
+      FormsModule,
+      ReactiveFormsModule,
       getTranslateModule(),
       getToastrModule()
    ],

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

@@ -6,5 +6,6 @@ <h1>
   <ul>
     <li><a [routerLink]="['newroute']">Adding additional routes</a></li>
     <li><a [routerLink]="['theming']">Using Material Components & Theming</a></li>
+    <li><a [routerLink]="['settings']">Using the Settings Service</a></li>
   </ul>
 </section>

cloudapp/src/app/models/settings.ts

@@ -0,0 +1,4 @@
+export interface Settings {
+  showValue: boolean,
+  pageSize: number
+}

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

@@ -0,0 +1,20 @@
+<form [formGroup]="form">
+  <section class="settings-section">
+    <mat-checkbox labelPosition="before" formControlName="showValue">Show Value</mat-checkbox>
+  </section>
+  <section class="settings-section">
+  <label class="example-margin">Align:</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>
+    <mat-radio-button class="settings-control" [value]="20">20</mat-radio-button>
+  </mat-radio-group>
+</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>
+
+<pre *ngIf="form.get('showValue').value">{{ form.value | json }}</pre>

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

@@ -0,0 +1,23 @@
+.commands-container {
+  margin: 20px 0;
+  width: fit-content;
+}
+
+.spinner {
+  float: right;
+}
+
+.commands-container button {
+  margin-right: 10px;
+}
+
+.settings-section {
+  display: flex;
+  align-content: center;
+  align-items: center;
+  margin: 10px 0;
+}
+
+.settings-control {
+  margin: 0 10px;
+}

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

@@ -0,0 +1,54 @@
+import { Component, OnInit } from '@angular/core';
+import { AppService } from '../app.service';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { CloudAppSettingsService } from '@exlibris/exl-cloudapp-angular-lib';
+import { ToastrService } from 'ngx-toastr';
+import { Settings } from '../models/settings';
+
+@Component({
+  selector: 'app-settings',
+  templateUrl: './settings.component.html',
+  styleUrls: ['./settings.component.scss']
+})
+export class SettingsComponent implements OnInit {
+  form: FormGroup;
+  saving = false;
+
+  constructor(
+    private appService: AppService,
+    private fb: FormBuilder,
+    private settingsService: CloudAppSettingsService,
+    private toastr: ToastrService
+  ) { }
+
+  ngOnInit() {
+    this.appService.setTitle('Settings');
+    this.form = this.fb.group({
+      showValue: this.fb.control(false),
+      pageSize: this.fb.control(10)
+    });
+    //this.settingsService.remove().subscribe(()=>this.load());
+    this.load();
+  }
+
+  load() {
+    this.settingsService.getAsFormGroup().subscribe( settings => {
+      if (Object.keys(settings.value).length!=0) {
+        this.form = settings;
+      }
+    });   
+  }
+
+  save() {
+    this.saving = true;
+    this.settingsService.set(this.form.value).subscribe(
+      response => {
+        this.toastr.success('Settings successfully saved.');
+        this.form.markAsPristine();
+      },
+      err => this.toastr.error(err.message),
+      ()  => this.saving = false
+    );
+  }
+
+}