Personal Details

index.js

var reactive = require('reactive'),
    Observable = require('observable'),
    Emitter = require('emitter'),
    Form = require('form');

function PersonalDetailsForm(el, data) {
  this.el = el;
  this.tmpl = this.el.querySelector('.js-template');

  // create a model for this view and dump the JSON from the backend into it
  this.model = new Observable();
  this.model.set(JSON.parse(data.innerHTML));
  this.bindings = reactive(this.el, this.model, this);

  // create a reactive 'form' instance
  this.form = new Form({
    el: this.tmpl,
    model: this.model
  });

  // cache the selected customer ('logged in')
  this.selectedCustomerId = this.model.attributes.SelectedCustomerId;

  // load a customer
  this.loadCustomer();

  // set if postal address fields are visible
  this.togglePostalAddress();

  // event listeners
  this.model.on('change:CustomerSelect', this.loadCustomer.bind(this));
  this.form.model.on('change:PostalAddressIsStreetAddress', this.togglePostalAddress.bind(this));
}

Emitter(PersonalDetailsForm.prototype);

/**
 * find and return a customer by 'customer number'
 * @param  {String} num [value passed in]
 * @return {Object} A customer object
 */
PersonalDetailsForm.prototype.find = function(num){
  var i,
    customers = this.model.attributes.Customers;

  for(i = 0; i < customers.length; i++){
    if (customers[i].CustomerNumber === num){
      return customers[i];
    }
  }
};

/**
 * Set the customer on the form.model.
 * Intially we set 'selectedCustomerId', then we base it on the 'CustomerSelect' selection
 * @param  {string} id [value from select box]
 */
PersonalDetailsForm.prototype.loadCustomer = function(id){
  this.customer = (id) ? this.find(id) : this.find(this.selectedCustomerId);
  this.form.model.set(this.customer);

  // format DOB
  this.form.model.set('DateOfBirth', moment(this.customer.DateOfBirth).format('DD/MM/YYYY'));

  // LAME: set nested customer object details directly onto the model
  for (var key in this.customer){
    if (this.customer[key] instanceof Object){
      for (var prop in this.customer[key]){
        this.form.model.set(key + prop, this.customer[key][prop]);
      }
    }
  }
};

/**
 * Set 'ShowPostalAddress' based on checkbox selection or (initially) customer model
 * @param  {boolean} val
 */
PersonalDetailsForm.prototype.togglePostalAddress = function(val){
  var value = ( val != null ) ? val : this.customer.PostalAddressIsStreetAddress;
  this.form.model.set('ShowPostalAddress', value);
};

module.exports = PersonalDetailsForm;

response.json

{
   "Customers":[
      {
         "ClientNumber":null,
         "CustomerNumber":"21857276",
         "Title":"Mr",
         "FirstName":"Ali",
         "Surname":"Rad",
         "FullName":"Mr Ali Rad",
         "DateOfBirth":"1982-05-13T00:00:00+10:00",
         "StreetAddress":{
            "Line1":"11 Minnett Close",
            "Line2":"",
            "Suburb":"GORDON",
            "State":"ACT",
            "Postcode":"2906"
         },
         "PostalAddress":null,
         "EmailAddress":"",
         "HomePhone":"02 4991 2111",
         "WorkPhone":"02 4991 2333",
         "MobilePhone":"0423 221 006",
         "PostalAddressIsStreetAddress":true
      },
      {
         "ClientNumber":null,
         "CustomerNumber":"22995512",
         "Title":"Mrs",
         "FirstName":"Chadia",
         "Surname":"Rad",
         "FullName":"Mrs Chadia Rad",
         "DateOfBirth":"1989-10-07T00:00:00+10:00",
         "StreetAddress":{
            "Line1":"11 Minnett Close",
            "Line2":"",
            "Suburb":"GORDON",
            "State":"ACT",
            "Postcode":"2906"
         },
         "PostalAddress":{
            "Line1":"123 Fake Street",
            "Line2":"",
            "Suburb":"NEWCASTLE",
            "State":"NSW",
            "Postcode":"2300"
         },
         "EmailAddress":"test@nib.com.au",
         "HomePhone":"02 6212 3456",
         "WorkPhone":"",
         "MobilePhone":"",
         "PostalAddressIsStreetAddress":false
      },
      {
         "ClientNumber":null,
         "CustomerNumber":"28013730",
         "Title":"Miss",
         "FirstName":"Farah",
         "Surname":"Rad",
         "FullName":"Miss Farah Rad",
         "DateOfBirth":"2011-04-16T00:00:00+10:00",
         "StreetAddress":{
            "Line1":"11 Minnett Close",
            "Line2":"",
            "Suburb":"GORDON",
            "State":"ACT",
            "Postcode":"2906"
         },
         "PostalAddress":null,
         "EmailAddress":"",
         "HomePhone":"02 4991 2111",
         "WorkPhone":"02 4991 2333",
         "MobilePhone":"",
         "PostalAddressIsStreetAddress":true
      }
   ],
   "SelectedCustomerId":"21857276",
   "SelectedCustomer":{
      "ClientNumber":null,
      "CustomerNumber":"21857276",
      "Title":"Mr",
      "FirstName":"Ali",
      "Surname":"Rad",
      "FullName":"Mr Ali Rad",
      "DateOfBirth":"1982-05-13T00:00:00+10:00",
      "StreetAddress":{
         "Line1":"11 Minnett Close",
         "Line2":"",
         "Suburb":"GORDON",
         "State":"ACT",
         "Postcode":"2906"
      },
      "PostalAddress":null,
      "EmailAddress":"",
      "HomePhone":"02 4991 2111",
      "WorkPhone":"02 4991 2333",
      "MobilePhone":"0423 221 006",
      "PostalAddressIsStreetAddress":true
   },
   "CustomerDropDown":[
      {
         "Selected":false,
         "Text":"Mr Ali Rad",
         "Value":"21857276"
      },
      {
         "Selected":false,
         "Text":"Mrs Chadia Rad",
         "Value":"22995512"
      },
      {
         "Selected":false,
         "Text":"Miss Farah Rad",
         "Value":"28013730"
      }
   ]
}