Aurelia-Materialize bridge input fields

app.html

<template>
  <require from="./au-input"></require>
  <md-colors></md-colors>
   
  <au-input label="A" value.bind="foo.a" percent.bind="foo.percent" salary.bind="foo.salary"></au-input> 
  
  <au-input label="B" value.bind="foo.b" percent.bind="foo.percent" salary.bind="foo.salary"></au-input> 
  
  <md-input md-label="Test" md-value.bind="foo.a & validate" md-validate="true"
      md-validate-success="good">
      <i md-prefix if.bind="foo.percent">%</i>
      <i md-prefix if.bind="!foo.percent">$</i>
  </md-input>
  
  
  <button md-button md-waves="color: light;" click.delegate="switch()">Switch</button>
  
  <button md-button="disabled.bind: foo.isClean()" md-waves="color: light;" click.delegate="validateModel()">Validate</button>
  
  <p>Foo.percent = ${foo.percent}</p>
  <p>Foo.numberOne = ${foo.a}</p>
  <p>Foo.numberTwo = ${foo.b}</p>
  
  <h5>${message}</h5>

  <ul style="margin-top: 15px;" show.bind="controller.errors.length">
    <li repeat.for="error of controller.errors">
      <a href="#" click.delegate="error.target.focus()">
        ${error.message}
      </a>
    </li>
  </ul>
</template>

app.js

import {inject, NewInstance} from 'aurelia-dependency-injection';
import {ValidationController, ValidationRules} from 'aurelia-validation';
import { MaterializeFormValidationRenderer } from 'aurelia-materialize-bridge';
import {Foo} from './foo.js';

@inject(NewInstance.of(ValidationController))
export class App {
  message = '';
  foo = new Foo();
  controller = null;
  clean = this.foo.isClean();

  constructor(controller) {
    this.controller = controller;
    this.controller.addRenderer(new MaterializeFormValidationRenderer());
    this.addRules(this.foo.percent);
  }
  
  addRules(percent) {
    if (percent) {
      ValidationRules
      .ensure("a").satisfies((value, obj) => {
        console.log("Validating value " + value);
        return parseInt(value) <= 5;
      }).withMessage("A must be no more than 5%")
      .ensure("b").satisfies((value, obj) => {
        console.log("Validating value " + value);
        return parseInt(value) <= 10;
      }).withMessage("B must be no more than 10%")
      .on(this.foo);
    } else {
      ValidationRules
      .ensure("a").satisfies((value, obj) => {
        console.log("Validating value " + value);
        return parseInt(value) <= 2500;
      }).withMessage("A must be no more than $2,500")
      .ensure("b").satisfies((value, obj) => {
        console.log("Validating value " + value);
        return parseInt(value) <= 5000;
      }).withMessage("B must be no more than $5,000")
      .on(this.foo);
    }
  }
  
  switch() {
    this.foo.percent = !this.foo.percent;
    this.addRules(this.foo.percent);
  }
  
  validateModel() {
    this.controller.validate().then(v => {
      if (v.valid) {
        this.message = 'All is good!';
      } else {
        this.message = 'You have errors!';
      }
    });
  }
}

au-input.html

<template>
  <md-input type="number" md-label.bind="label" md-value.bind="value & validate" md-validate="true"
      md-validate-success="good">
      <i md-prefix if.bind="percent">%</i>
      <i md-prefix if.bind="!percent">$</i>
  </md-input>
</template>

au-input.js

import {observable,bindable,bindingMode, computedFrom} from 'aurelia-framework';

export class AuInput {
  suppressValueChanged: boolean;

  @observable
  dollarValue: number;
  dollarValueChanged(newValue,oldValue){
    console.log('AuInput: dollarValueChanged: newValue = ' + newValue + ' oldValue = ' + oldValue + ' state = ' + JSON.stringify(this));  
    if(this.suppressValueChanged){
      return;
    }
    this.suppressValueChanged = true;
    this.value = this.dollarValue;
    this.suppressValueChanged = false;
  }
  
  @observable
  percentValue: number;
  percentValueChanged(newValue,oldValue){
    console.log('AuInput: percentValueChanged: newValue = ' + newValue + ' oldValue = ' + oldValue + ' state = ' + JSON.stringify(this));  
    if(this.suppressValueChanged){
      return;
    }
    this.suppressValueChanged = true;
    this.value = this.percentValue;
    this.suppressValueChanged = false;
  }

  @bindable({defaultBindingMode: bindingMode.twoWay})
  value: number;
  valueChanged(newValue, oldValue) {
    if(this.suppressValueChanged || !this.salary){
      return;
    }
    this.suppressValueChanged = true;
    console.log('AuInput: valueChanged: newValue = ' + newValue + ' oldValue = ' + oldValue + ' state = ' + JSON.stringify(this));  
    if (this.percent) {
      this.percentValue = this.value;
      this.dollarValue = this.percentValue * this.salary / 100;
    } else {
      console.log('here');  
      this.dollarValue = this.value;
      this.percentValue = this.dollarValue / this.salary * 100;
    }
    this.suppressValueChanged = false;
  }

  @bindable 
  salary: number;
  salaryChanged(){
    if(!this.value){
      return;
    }
    this.valueChanged();
  }
  
  @bindable label : string;
  prefix : string;
  suffix : string;

  @bindable 
  percent: boolean;
  percentChanged(newValue, oldValue) {
    console.log('AuInput: percentChanged: newValue = ' + newValue + ' oldValue = ' + oldValue + ' state = ' + JSON.stringify(this));
    
    if (this.percent) {
      this.suffix = "%";
      this.prefix = null;
      this.percentValueChanged();
    } else {
      this.suffix = null;
      this.prefix = "$";
      this.dollarValueChanged();
    }
  }

  
}

foo.js

export class Foo {
  percent = true;
  a = 1000;
  b = 2000;
  salary = 50000;
  
  isClean() : boolean {
    return this.percent && (this.a == 1000) && (this.b == 2000) && (this.salary == 50000);
  }
}

index.html

<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body aurelia-app="main">
    <h1>Loading...</h1>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script>
    
    <script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
    <script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-materialize-bundles/0.27.0/config2.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
      System.import('materialize/dist/css/materialize.css!');
    </script>
  </body>
</html>

main.js

/*******************************************************************************
 * The following two lines enable async/await without using babel's
 * "runtime" transformer. Uncomment the lines if you intend to use async/await.
 * 
 * More info here:  https://github.com/jdanyow/aurelia-plunker/issues/2
 */
//import regeneratorRuntime from 'babel-runtime/regenerator';
//window.regeneratorRuntime = regeneratorRuntime;
/******************************************************************************/

import 'materialize';

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-validation')
    .plugin('aurelia-materialize-bridge', bridge => bridge.useAll() );

  aurelia.start().then(a => a.setRoot());
}