Merge branch 'feature/add-some-examples' into develop

Author: dweber019

README.md

@@ -201,7 +201,7 @@ Typedoc is generated with command ```npm run build:docs``` into directoy ```docs
 - [X] Add typedocs
 - [ ] Add greenkeeper
 - [ ] Add electron
-- [ ] Add pipline example
-- [ ] Add utility converters https://www.npmjs.com/package/aurelia-utility-converters
-- [ ] Add validation example
-- [ ] Add configure http client example
+- [X] Add pipline example
+- [X] Add utility converters https://www.npmjs.com/package/aurelia-utility-converters
+- [X] Add validation example
+- [X] Add configure http client example

package.json

@@ -89,6 +89,7 @@
     "aurelia-templating-binding": "^1.2.0",
     "aurelia-templating-resources": "^1.2.0",
     "aurelia-templating-router": "^1.0.0",
+    "aurelia-validation": "^1.0.0-beta.1.0.1",
     "bootstrap-sass": "^3.3.7",
     "font-awesome": "^4.7.0",
     "i18next-browser-languagedetector": "^1.0.1",

src/app/app.vm.ts

@@ -1,14 +1,20 @@
 import { Lazy, inject } from 'aurelia-framework';
 import { Router, RouterConfiguration } from 'aurelia-router';
 import { I18N } from 'aurelia-i18n';
+import { HttpClient } from 'aurelia-fetch-client';
 
+import { LogManager, Logger} from './services/logger.service';
 import { AppConfigService } from './services/app-config.service';
 import { CordovaService } from './services/cordova.service';
 import { EventBusService, EventBusEvents } from './services/event-bus.service';
 import { LanguageService } from './services/language.service';
+import { ExampleStep } from './piplines/example.step';
 
-@inject(I18N, AppConfigService, Lazy.of(CordovaService), EventBusService, LanguageService)
+@inject(I18N, AppConfigService, Lazy.of(CordovaService), EventBusService, LanguageService, HttpClient)
 export class AppViewModel {
+
+  private logger: Logger;
+
   public router: Router;
 
   constructor(
@@ -17,7 +23,15 @@ export class AppViewModel {
     private cordovaServiceFn: () => CordovaService,
     private eventBusService: EventBusService,
     private languageService: LanguageService,
-  ) { }
+    private httpClient: HttpClient
+  ) {
+    this.logger = LogManager.getLogger('AppViewModel');
+    this.configureHttpClient();
+  }
+
+  public attached(): void {
+    this.configureMoment();
+  }
 
   public configureRouter(config: RouterConfiguration, router: Router): void {
     config.title = this.i18n.tr('TITLE');
@@ -52,6 +66,8 @@ export class AppViewModel {
     ]);
     config.mapUnknownRoutes({ route: '', redirect: '' });
 
+    config.addAuthorizeStep(ExampleStep);
+
     this.router = router;
   }
 
@@ -60,4 +76,17 @@ export class AppViewModel {
     moment.locale(locale);
     this.eventBusService.addSubscription(EventBusEvents.IDS.i18n.locale.changed, (a) => moment.locale(a.newValue));
   }
+
+  private configureHttpClient(): void {
+    this.httpClient.configure(config => {
+      config
+        .useStandardConfiguration()
+        .withInterceptor({
+          request: (request: Request) => {
+            this.logger.debug('Request interceptor hit: ', request.url);
+            return request;
+          }
+        });
+    });
+  }
 }

src/app/main.ts

@@ -70,6 +70,14 @@ export async function configure(aurelia: Aurelia): Promise<void> {
         }
       });
     })
+    /**
+     * Aurelia Validation plugin
+     * See: https://github.com/aurelia/validation
+     *
+     * Configure i18n for aurelia-validation error messages.
+     * See: http://aurelia.io/hub.html#/doc/article/aurelia/validation/latest/validation-basics
+     */
+    .plugin('aurelia-validation')
     // Uncomment the line below to enable animation.
     // .plugin('aurelia-animator-css');
     // if the css animator is enabled, add swap-order="after" to all router-view elements

src/app/modules/welcome/welcome.vm.html

@@ -31,5 +31,13 @@ <h3>Switch Language</h3>
     <br/><br/>
     <p>Everything is: <span t="TR_ATTR"></span></p>
     <p>Signalr example: ${ 'TR_SIGNALER' | t & signal:'locale:changed' }</p>
+
+    <h3>Converter utility</h3>
+    <p>${ jsonProperty | json }</p>
+    <p>Available converters are: filter, json, limit, md5 and sort</p>
+
+    <h3>Validation</h3>
+    <p>Validation is: ${validationValid}</p>
+    <button class="btn btn-primary" click.delegate="validateFirstName()">validate</button>
   </section>
 </template>

src/app/modules/welcome/welcome.vm.ts

@@ -1,4 +1,5 @@
 import { autoinject } from 'aurelia-framework';
+import { ValidationControllerFactory, ValidationController, validateTrigger, ValidationRules } from 'aurelia-validation';
 
 import { LogManager, Logger} from './../../services/logger.service';
 import { AppConfigService } from './../../services/app-config.service';
@@ -7,25 +8,48 @@ import { LanguageService } from './../../services/language.service';
 @autoinject
 export class Welcome {
   private logger: Logger;
+  private vController: ValidationController;
 
 	public heading: string = 'Welcome to the Aurelia Navigation App';
 	public firstName: string = 'John';
 	public lastName: string = 'Doe';
 	public previousValue: string = this.fullName;
   public currentDate: Date = new Date();
+  public jsonProperty: Object = { key1: 'value1', key2: 'value2' };
+  public validationValid: boolean = false;
 
 	constructor(
     private appConfigService: AppConfigService,
-    private languageService: LanguageService
+    private languageService: LanguageService,
+    validationControllerFactory: ValidationControllerFactory
   ) {
 		this.logger = LogManager.getLogger('Welcome VM');
 		this.logger.info('appConfig => name:', appConfigService.getName());
 		this.logger.info('appConfig => version:', appConfigService.getVersion());
 		this.logger.info('appConfig => env:', appConfigService.getEnv());
 		this.logger.info('appConfig => platform:', appConfigService.getPlatform());
 		this.logger.info('appConfig => config:', appConfigService.getConfig());
+
+    this.vController = validationControllerFactory.createForCurrentScope();
+    this.vController.validateTrigger = validateTrigger.manual;
+	}
+
+  public canDeactivate(): boolean {
+		if (this.fullName !== this.previousValue) {
+			return confirm('Are you sure you want to leave?');
+		}
+    return true;
 	}
 
+  public validateFirstName(): void {
+    this.vController
+      .validate({
+        object: this,
+        rules: ValidationRules.ensure('firstName').required().rules
+      })
+      .then(r => this.validationValid = r.valid);
+  }
+
 	//Getters can't be directly observed, so they must be dirty checked.
 	//However, if you tell Aurelia the dependencies, it no longer needs to dirty check the property.
 	//To optimize by declaring the properties that this getter is computed from, uncomment the line below
@@ -40,13 +64,6 @@ export class Welcome {
 		alert(`Welcome, ${this.fullName}!`);
 	}
 
-	public canDeactivate(): boolean {
-		if (this.fullName !== this.previousValue) {
-			return confirm('Are you sure you want to leave?');
-		}
-    return true;
-	}
-
   public switchLanguage(): void {
     const lang = this.languageService.getCurrentLang();
     if (lang === this.languageService.getSupportedLanguages()[0]) {

src/app/piplines/example.step.ts

@@ -0,0 +1,19 @@
+import { autoinject } from 'aurelia-framework';
+import { NavigationInstruction, Next } from 'aurelia-router';
+import { LogManager, Logger } from './../services/logger.service';
+
+@autoinject
+export class ExampleStep {
+
+  private logger: Logger;
+
+  constructor() {
+    this.logger = LogManager.getLogger('ExampleStep');
+    this.logger.debug('initialized');
+  }
+
+  public run(navigationInstruction: NavigationInstruction, next: Next): any {
+    this.logger.debug('Middleware hit on:', navigationInstruction.fragment);
+    return next();
+  }
+}

src/app/resources/converters/filter.converter.ts

@@ -0,0 +1,8 @@
+export class FilterValueConverter {
+  public toView(array, property, value): any[] {
+    if (!array || !property || !value) {
+      return array;
+    }
+    return array.filter((item) => item[property].toLowerCase().indexOf(value.toLowerCase()) > -1);
+  }
+}

src/app/resources/converters/index.ts

@@ -1,6 +1,11 @@
 export function configure(aurelia): void {
   aurelia
 	  .globalResources([
-      './date-format.converter'
+      './date-format.converter',
+      './filter.converter',
+      './json.converter',
+      './limit.converter',
+      './md5.converter',
+      './sort.converter',
     ]);
 };

src/app/resources/converters/json.converter.ts

@@ -0,0 +1,8 @@
+export class JsonValueConverter {
+  public toView(value): string | void {
+    if (value) {
+      return JSON.stringify(value, undefined, '\t');
+    }
+    return;
+  }
+}