Merge pull request #56 from thermokarst/form-helpers

Form helpers

app/models/characteristic.js

@@ -1,14 +1,16 @@
 import DS from 'ember-data';
 
-export default DS.Model.extend({
-  characteristicName    : DS.attr('string'),
-  characteristicTypeName: DS.attr('string'),
-  strains               : DS.hasMany('strain', { async: false }),
-  measurements          : DS.hasMany('measurements', { async: false }),
-  createdAt             : DS.attr('date'),
-  updatedAt             : DS.attr('date'),
-  createdBy             : DS.attr('number'),
-  updatedBy             : DS.attr('number'),
-  sortOrder             : DS.attr('number'),
-  canEdit               : DS.attr('boolean'),
+const { Model, attr, hasMany } = DS;
+
+export default Model.extend({
+  characteristicName    : attr('string'),
+  characteristicTypeName: attr('string'),
+  strains               : hasMany('strain', { async: false }),
+  measurements          : hasMany('measurements', { async: false }),
+  createdAt             : attr('date'),
+  updatedAt             : attr('date'),
+  createdBy             : attr('number'),
+  updatedBy             : attr('number'),
+  sortOrder             : attr('number'),
+  canEdit               : attr('boolean'),
 });

app/models/measurement.js

@@ -1,15 +1,17 @@
 import DS from 'ember-data';
 
-export default DS.Model.extend({
-  strain             : DS.belongsTo('strain', { async: false }),
-  characteristic     : DS.belongsTo('characteristic', { async: false }),
-  value              : DS.attr('string'),
-  confidenceInterval : DS.attr('number'),
-  unitType           : DS.attr('string'),
-  notes              : DS.attr('string'),
-  testMethod         : DS.attr('string'),
-  createdAt          : DS.attr('date'),
-  updatedAt          : DS.attr('date'),
-  createdBy          : DS.attr('number'),
-  updatedBy          : DS.attr('number'),
+const { Model, belongsTo, attr } = DS;
+
+export default Model.extend({
+  strain             : belongsTo('strain', { async: false }),
+  characteristic     : belongsTo('characteristic', { async: false }),
+  value              : attr('string'),
+  confidenceInterval : attr('number'),
+  unitType           : attr('string'),
+  notes              : attr('string'),
+  testMethod         : attr('string'),
+  createdAt          : attr('date'),
+  updatedAt          : attr('date'),
+  createdBy          : attr('number'),
+  updatedBy          : attr('number'),
 });

app/models/species.js

@@ -2,20 +2,23 @@ import DS from 'ember-data';
 import config from '../config/environment';
 import Ember from 'ember';
 
-export default DS.Model.extend({
-  speciesName : DS.attr('string'),
-  typeSpecies : DS.attr('boolean'),
-  etymology   : DS.attr('string'),
-  genusName   : DS.attr('string', { defaultValue: config.APP.genus }),
-  strains     : DS.hasMany('strain', { async: false }),
-  totalStrains: DS.attr('number'),
-  createdAt   : DS.attr('date'),
-  updatedAt   : DS.attr('date'),
-  createdBy   : DS.attr('number'),
-  updatedBy   : DS.attr('number'),
-  sortOrder   : DS.attr('number'),
-  canEdit     : DS.attr('boolean'),
+const { Model, attr, hasMany } = DS;
 
+export default Model.extend({
+  speciesName : attr('string'),
+  typeSpecies : attr('boolean'),
+  etymology   : attr('string'),
+  genusName   : attr('string', { defaultValue: config.APP.genus }),
+  strains     : hasMany('strain', { async: false }),
+  totalStrains: attr('number'),
+  createdAt   : attr('date'),
+  updatedAt   : attr('date'),
+  createdBy   : attr('number'),
+  updatedBy   : attr('number'),
+  sortOrder   : attr('number'),
+  canEdit     : attr('boolean'),
+
+  // TODO: move this to component/helper
   speciesNameMU: function() {
     return Ember.String.htmlSafe(`<em>${this.get('speciesName')}</em>`);
   }.property('speciesName').readOnly(),

app/models/strain.js

@@ -1,34 +1,39 @@
 import DS from 'ember-data';
 import Ember from 'ember';
 
-export default DS.Model.extend({
-  measurements       : DS.hasMany('measurements', { async: false }),
-  characteristics    : DS.hasMany('characteristics', { async: false }),
-  species            : DS.belongsTo('species', { async: false }),
-  strainName         : DS.attr('string'),
-  typeStrain         : DS.attr('boolean'),
-  accessionNumbers   : DS.attr('string'),
-  genbank            : DS.attr('string'),
-  wholeGenomeSequence: DS.attr('string'),
-  isolatedFrom       : DS.attr('string'),
-  notes              : DS.attr('string'),
-  createdAt          : DS.attr('date'),
-  updatedAt          : DS.attr('date'),
-  createdBy          : DS.attr('number'),
-  updatedBy          : DS.attr('number'),
-  totalMeasurements  : DS.attr('number'),
-  sortOrder          : DS.attr('number'),
-  canEdit            : DS.attr('boolean'),
+const { Model, hasMany, belongsTo, attr } = DS;
 
+export default Model.extend({
+  measurements       : hasMany('measurements', { async: false }),
+  characteristics    : hasMany('characteristics', { async: false }),
+  species            : belongsTo('species', { async: false }),
+  strainName         : attr('string'),
+  typeStrain         : attr('boolean'),
+  accessionNumbers   : attr('string'),
+  genbank            : attr('string'),
+  wholeGenomeSequence: attr('string'),
+  isolatedFrom       : attr('string'),
+  notes              : attr('string'),
+  createdAt          : attr('date'),
+  updatedAt          : attr('date'),
+  createdBy          : attr('number'),
+  updatedBy          : attr('number'),
+  totalMeasurements  : attr('number'),
+  sortOrder          : attr('number'),
+  canEdit            : attr('boolean'),
+
+  // TODO: move this to component/helper
   strainNameMU: function() {
     let type = this.get('typeStrain') ? '<sup>T</sup>' : '';
     return Ember.String.htmlSafe(`${this.get('strainName')}${type}`);
   }.property('strainName', 'typeStrain').readOnly(),
 
+  // TODO: move this to component/helper
   fullName: Ember.computed('species', 'strainName', function() {
     return `${this.get('species.speciesName')} ${this.get('strainNameMU')}`;
   }),
 
+  // TODO: move this to component/helper
   fullNameMU: function() {
     return Ember.String.htmlSafe(`<em>${this.get('species.speciesName')}</em> ${this.get('strainNameMU')}`);
   }.property('species', 'strainNameMU').readOnly(),

app/models/user.js

@@ -1,29 +1,32 @@
 import Ember from 'ember';
 import DS from 'ember-data';
 
-export default DS.Model.extend({
-  email    : DS.attr('string'),
-  password : DS.attr('string'),
-  name     : DS.attr('string'),
-  role     : DS.attr('string'),
-  canEdit  : DS.attr('boolean'),
-  createdAt: DS.attr('date'),
-  updatedAt: DS.attr('date'),
+const { Model, attr } = DS;
+const { computed } = Ember;
 
-  isAdmin: function() {
+export default Model.extend({
+  email    : attr('string'),
+  password : attr('string'),
+  name     : attr('string'),
+  role     : attr('string'),
+  canEdit  : attr('boolean'),
+  createdAt: attr('date'),
+  updatedAt: attr('date'),
+
+  isAdmin: computed('role', function() {
     return this.get('role') === 'A';
-  }.property('role'),
+  }),
 
-  isWriter: function() {
+  isWriter: computed('role', function() {
     return this.get('role') === 'W';
-  }.property('role'),
+  }),
 
-  isReader: function() {
+  isReader: computed('role', function() {
     return this.get('role') === 'R';
-  }.property('role'),
+  }),
 
-  fullRole: function() {
-    let role = this.get('role');
+  fullRole: computed('role', function() {
+    const role = this.get('role');
     if (role === 'R') {
       return 'Read-Only';
     } else if (role === 'W') {
@@ -33,13 +36,13 @@ export default DS.Model.extend({
     } else {
       return 'Error';
     }
-  }.property('role'),
+  }),
 
-  canWrite: Ember.computed('role', function() {
+  canWrite: computed('role', function() {
     return this.get('role') !== 'R';
   }),
 
-  metaData: Ember.computed('canWrite', function() {
+  metaData: computed('canWrite', function() {
     return { 'canAdd': this.get('canWrite') };
   }),
 

app/pods/application/adapter.js

@@ -1,7 +1,9 @@
 import DS from 'ember-data';
 import DataAdapterMixin from 'ember-simple-auth/mixins/data-adapter-mixin';
 
-export default DS.RESTAdapter.extend(DataAdapterMixin, {
+const { RESTAdapter } = DS;
+
+export default RESTAdapter.extend(DataAdapterMixin, {
   authorizer: 'authorizer:application',
 
   namespace: function() {

app/pods/application/route.js

@@ -1,7 +1,9 @@
 import Ember from 'ember';
 import ApplicationRouteMixin from 'ember-simple-auth/mixins/application-route-mixin';
 
-export default Ember.Route.extend(ApplicationRouteMixin, {
+const { Route } = Ember;
+
+export default Route.extend(ApplicationRouteMixin, {
   actions: {
     invalidateSession: function() {
       this.get('session').invalidate().then(() => {
@@ -9,7 +11,5 @@ export default Ember.Route.extend(ApplicationRouteMixin, {
         return true;
       });
     },
-
   },
-
 });

app/pods/login/controller.js

@@ -1,14 +1,15 @@
 import Ember from 'ember';
 
-export default Ember.Controller.extend({
-  session: Ember.inject.service('session'),
+const { Controller, inject: { service } } = Ember;
+
+export default Controller.extend({
+  session: service(),
 
   actions: {
-    authenticate: function() {
+    authenticate: function(identification, password) {
       // Manually clean up because there might not be a transition
       this.get('flashMessages').clearMessages();
 
-      let { identification, password } = this.getProperties('identification', 'password');
       this.transitionToRoute('loading').then(() => {
         this.get('session').authenticate('authenticator:oauth2', identification, password).catch((error) => {
           this.transitionToRoute('login').then(() => {

app/pods/login/login-form/component.js

@@ -0,0 +1,27 @@
+import Ember from 'ember';
+
+const { Component } = Ember;
+
+export default Component.extend({
+  // Actions
+  "on-submit": null,
+
+  // Property mapping
+  propertiesList: ['identification', 'password'],
+  identification: null,
+  password: null,
+
+  actions: {
+    submit: function() {
+      return this.attrs['on-submit'](this.get('identification'), this.get('password'));
+    },
+
+    identificationDidChange: function(value) {
+      this.set('identification', value);
+    },
+
+    passwordDidChange: function(value) {
+      this.set('password', value);
+    },
+  },
+});

app/pods/login/login-form/template.hbs

@@ -0,0 +1,12 @@
+<form {{action "submit" on="submit"}}>
+  <h2>Log In</h2>
+    {{one-way-input type="text" class="identification" value=identification update=(action "identificationDidChange") placeholder="Email"}}
+    {{one-way-input type="password" class="password" value=password update=(action "passwordDidChange") placeholder="Password"}}
+    <button type="submit" class="button-gray log-in">
+      Log In
+    </button>
+</form>
+<br>
+<div>
+  {{link-to 'Forget your password?' 'users.requestlockouthelp'}}
+</div>

app/pods/login/route.js

@@ -1,4 +1,6 @@
 import Ember from 'ember';
 import UnauthenticatedRouteMixin from 'ember-simple-auth/mixins/unauthenticated-route-mixin';
 
-export default Ember.Route.extend(UnauthenticatedRouteMixin, {});
+const { Route } = Ember;
+
+export default Route.extend(UnauthenticatedRouteMixin, {});

app/pods/login/template.hbs

@@ -1,12 +1,6 @@
 {{#x-application invalidateSession="invalidateSession"}}
-  <form {{action "authenticate" on="submit"}}>
-    <h2>Log In</h2>
-      {{input value=identification type="text" placeholder="Email"}}
-      {{input value=password type="password" placeholder="Password"}}
-      {{input class="button-gray" type="submit" value="Log In"}}
-  </form>
-  <br>
-  <div>
-    {{link-to 'Forget your password?' 'users.requestlockouthelp'}}
-  </div>
+  {{
+    login/login-form
+    on-submit=(action "authenticate")
+  }}
 {{/x-application}}

app/pods/not-found/route.js

@@ -1,8 +1,10 @@
 import Ember from 'ember';
 
-export default Ember.Route.extend({
+const { Route } = Ember;
+
+export default Route.extend({
   redirect: function() {
-    let url = this.router.location.formatURL('/not-found');
+    const url = this.router.location.formatURL('/not-found');
 
     if (window.location.pathname !== url) {
       this.transitionTo('/not-found');

app/pods/protected/about/route.js

@@ -1,3 +1,5 @@
 import Ember from 'ember';
 
-export default Ember.Route.extend({});
+const { Route } = Ember;
+
+export default Route.extend({});

app/pods/protected/compare/controller.js

@@ -1,41 +1,22 @@
 import Ember from 'ember';
 
-export default Ember.Controller.extend({
+const { Controller } = Ember;
+
+export default Controller.extend({
+  selectedStrains: null,
+  selectedCharacteristics: null,
+
   actions: {
-    search: function() {
-      let query = {
-        strain_ids: this.get('selectedStrains'),
-        characteristic_ids: this.get('selectedCharacteristics'),
-      };
-
-      this.transitionToRoute('protected.compare.results', {queryParams: query});
+    search: function(query) {
+      this.transitionToRoute('protected.compare.results', { queryParams: query });
     },
 
-    selectAllStrains: function() {
-      let strains = this.get('strains');
-      let strain_ids = [];
-      strains.forEach((strain) => {
-        strain_ids.push(strain.id);
-      });
-      this.set('selectedStrains', strain_ids.join(","));
+    updateStrainSelection: function(selection) {
+      this.set('selectedStrains', selection);
     },
 
-    deselectAllStrains: function() {
-      this.set('selectedStrains', '');
+    updateCharacteristicSelection: function(selection) {
+      this.set('selectedCharacteristics', selection);
     },
-
-    selectAllCharacteristics: function() {
-      let chars = this.get('characteristics');
-      let char_ids = [];
-      chars.forEach((char) => {
-        char_ids.push(char.id);
-      });
-      this.set('selectedCharacteristics', char_ids.join(","));
-    },
-
-    deselectAllCharacteristics: function() {
-      this.set('selectedCharacteristics', '');
-    },
-
   }
 });

app/pods/protected/compare/results/controller.js

@@ -1,31 +1,8 @@
 import Ember from 'ember';
 
-export default Ember.Controller.extend({
+const { Controller } = Ember;
+
+export default Controller.extend({
   queryParams: ['strain_ids', 'characteristic_ids'],
 
-  csvLink: function() {
-    let token = encodeURIComponent(this.get('session.secure.token'));
-    return `${this.get('globals.apiURL')}/api/${this.get('globals.genus')}/` +
-      `compare?token=${token}&strain_ids=${this.get('strain_ids')}&` +
-      `characteristic_ids=${this.get('characteristic_ids')}&mimeType=csv`;
-  }.property('strain_ids', 'characteristic_ids').readOnly(),
-
-  strains: function() {
-    let strains = [];
-    let strain_ids = this.get('strain_ids').split(',');
-    strain_ids.forEach((id) => {
-      strains.push(this.store.peekRecord('strain', id));
-    });
-    return strains;
-  }.property('strain_ids'),
-
-  characteristics: function() {
-    let characteristics = [];
-    let characteristic_ids = this.get('characteristic_ids').split(',');
-    characteristic_ids.forEach((id) => {
-      characteristics.push(this.store.peekRecord('characteristic', id));
-    });
-    return characteristics;
-  }.property('characteristic_ids'),
-
 });

app/pods/protected/compare/results/results-table/component.js

@@ -0,0 +1,19 @@
+import Ember from 'ember';
+
+const { Component, computed, inject: { service } } = Ember;
+
+export default Component.extend({
+  session: service(),
+
+  strains: null,
+  characteristics: null,
+  strain_ids: null,
+  characteristic_ids: null,
+
+  csvLink: computed('strain_ids', 'characteristic_ids', function() {
+    const token = encodeURIComponent(this.get('session.data.authenticated.access_token'));
+    return `${this.get('globals.apiURL')}/api/${this.get('globals.genus')}/` +
+      `compare?token=${token}&strain_ids=${this.get('strain_ids')}&` +
+      `characteristic_ids=${this.get('characteristic_ids')}&mimeType=csv`;
+  }),
+});

app/pods/protected/compare/results/results-table/template.hbs

@@ -0,0 +1,25 @@
+<table class="flakes-table">
+  <thead>
+    <tr>
+      <th>Characteristic</th>
+      {{#each strains as |strain|}}
+        <th>
+          {{#link-to 'protected.strains.show' strain.id classBinding="data.typeStrain:type-strain"}}
+            {{strain.fullNameMU}}
+          {{/link-to}}
+        </th>
+      {{/each}}
+    </tr>
+  </thead>
+  <tbody>
+    {{#each characteristics as |row|}}
+      <tr>
+        {{#each row key="@index" as |col|}}
+          <td>{{col}}</td>
+        {{/each}}
+      </tr>
+    {{/each}}
+  </tbody>
+</table>
+<hr>
+<a href="{{csvLink}}" download>Download as CSV</a>

app/pods/protected/compare/results/route.js

@@ -1,8 +1,10 @@
 import Ember from 'ember';
 import ajaxRequest from '../../../../utils/ajax-request';
 
-export default Ember.Route.extend({
-  session: Ember.inject.service('session'),
+const { Route, $: { isEmptyObject }, inject: { service } } = Ember;
+
+export default Route.extend({
+  session: service(),
 
   queryParams: {
     strain_ids: {
@@ -15,8 +17,9 @@ export default Ember.Route.extend({
 
   beforeModel: function(transition) {
     this._super(transition);
-    if (Ember.$.isEmptyObject(transition.queryParams.strain_ids) ||
-        Ember.$.isEmptyObject(transition.queryParams.characteristic_ids)) {
+    const strain_ids = transition.queryParams.strain_ids;
+    const characteristic_ids = transition.queryParams.characteristic_ids;
+    if (isEmptyObject(strain_ids) || isEmptyObject(characteristic_ids)) {
       this.transitionTo('protected.compare');
     }
   },
@@ -26,12 +29,12 @@ export default Ember.Route.extend({
       this.transitionTo('protected.compare');
     }
 
-    let compare = this.controllerFor('protected.compare');
+    const compare = this.controllerFor('protected.compare');
     compare.set('selectedStrains', params.strain_ids);
     compare.set('selectedCharacteristics', params.characteristic_ids);
 
-    let url = `${this.get('globals.apiURL')}/api/${this.get('globals.genus')}/compare`;
-    let options = {
+    const url = `${this.get('globals.apiURL')}/api/${this.get('globals.genus')}/compare`;
+    const options = {
       method: 'GET',
       data: params,
     };
@@ -40,9 +43,26 @@ export default Ember.Route.extend({
 
   setupController: function(controller, model) {
     model.forEach((m, i) => {
-      let c = this.store.peekRecord('characteristic', m[0]);
+      const c = this.store.peekRecord('characteristic', m[0]);
       model[i][0] = c.get('characteristicName');
     });
+
+    const compare = this.controllerFor('protected.compare');
+
+    const strains = [];
+    const strain_ids = compare.get('selectedStrains').split(',');
+    strain_ids.forEach((id) => {
+      strains.push(this.store.peekRecord('strain', id));
+    });
+    controller.set('strains', strains);
+
+    const characteristics = [];
+    const characteristic_ids = compare.get('selectedCharacteristics').split(',');
+    characteristic_ids.forEach((id) => {
+      characteristics.push(this.store.peekRecord('characteristic', id));
+    });
+    controller.set('characteristics', characteristics);
+
     controller.set('model', model);
   },
 

app/pods/protected/compare/results/template.hbs

@@ -1,25 +1,7 @@
-<table class="flakes-table">
-  <thead>
-    <tr>
-      <th>Characteristic</th>
-      {{#each strains as |strain|}}
-        <th>
-          {{#link-to 'protected.strains.show' strain.id classBinding="data.typeStrain:type-strain"}}
-            {{strain.fullNameMU}}
-          {{/link-to}}
-        </th>
-      {{/each}}
-    </tr>
-  </thead>
-  <tbody>
-    {{#each model as |row|}}
-      <tr>
-        {{#each row key="@index" as |col|}}
-          <td>{{col}}</td>
-        {{/each}}
-      </tr>
-    {{/each}}
-  </tbody>
-</table>
-<hr>
-<a href="{{csvLink}}" download>Download as CSV</a>
+{{
+  protected/compare/results/results-table
+  strains=strains
+  characteristics=model
+  strain_ids=strain_ids
+  characteristic_ids=characteristic_ids
+}}

app/pods/protected/compare/route.js

@@ -1,6 +1,8 @@
 import Ember from 'ember';
 
-export default Ember.Route.extend({
+const { Route } = Ember;
+
+export default Route.extend({
   model: function() {
     return this.store.findAll('characteristic');
   },

app/pods/protected/compare/select-form/component.js

@@ -0,0 +1,61 @@
+import Ember from 'ember';
+
+const { Component } = Ember;
+
+export default Component.extend({
+  characteristics: null,
+  strains: null,
+
+  "on-search": null,
+  "update-strains": null,
+  "update-characteristics": null,
+
+  selectedStrains: null,
+  selectedCharacteristics: null,
+
+  updateStrains: function(selection) {
+    this.set('selectedStrains', selection);
+    this.attrs['update-strains'](this.get('selectedStrains'));
+  },
+
+  updateCharacteristics: function(selection) {
+    this.set('selectedCharacteristics', selection);
+    this.attrs['update-characteristics'](this.get('selectedCharacteristics'));
+  },
+
+  actions: {
+    search: function() {
+      const query = {
+        strain_ids: this.get('selectedStrains'),
+        characteristic_ids: this.get('selectedCharacteristics'),
+      };
+      this.attrs['on-search'](query);
+    },
+
+    selectAllStrains: function() {
+      const strains = this.get('strains');
+      const strain_ids = [];
+      strains.forEach((strain) => {
+        strain_ids.push(strain.get('id'));
+      });
+      this.updateStrains(strain_ids.join(","));
+    },
+
+    deselectAllStrains: function() {
+      this.updateStrains("");
+    },
+
+    selectAllCharacteristics: function() {
+      const chars = this.get('characteristics');
+      const char_ids = [];
+      chars.forEach((char) => {
+        char_ids.push(char.get('id'));
+      });
+      this.updateCharacteristics(char_ids.join(","));
+    },
+
+    deselectAllCharacteristics: function() {
+      this.updateCharacteristics("");
+    },
+  },
+});

app/pods/protected/compare/select-form/template.hbs

@@ -0,0 +1,53 @@
+<div class="span-1">
+  <fieldset>
+    <form {{action 'search' on='submit'}}>
+      <ul>
+        <li>
+          <label>Strains</label>
+          {{
+            select-2
+            multiple=true
+            content=strains
+            value=selectedStrains
+            optionValuePath="id"
+            optionLabelPath="fullNameMU"
+            placeholder="Select one or more strains"
+          }}
+        </li>
+        <li>
+          <button class="action button-green smaller right" {{action 'selectAllStrains'}}>
+            Select All
+          </button>
+          <button class="action button-red smaller right" {{action 'deselectAllStrains'}}>
+            Deselect All
+          </button>
+        </li>
+        <li>
+          <label>Characteristics</label>
+          {{
+            select-2
+            multiple=true
+            content=characteristics
+            value=selectedCharacteristics
+            optionValuePath="id"
+            optionLabelPath="characteristicName"
+            placeholder="Select one or more characteristics"
+          }}
+        </li>
+        <li>
+          <button class="action button-green smaller right" {{action 'selectAllCharacteristics'}}>
+            Select All
+          </button>
+          <button class="action button-red smaller right" {{action 'deselectAllCharacteristics'}}>
+            Deselect All
+          </button>
+        </li>
+        <li>
+          <button type="submit" class="action button-gray smaller right">
+            Search
+          </button>
+        </li>
+      </ul>
+    </form>
+  </fieldset>
+</div>

app/pods/protected/compare/template.hbs

@@ -1,57 +1,14 @@
 <h2>{{genus-name}} - Compare Strains</h2>
 
-<div class="span-1">
-  <fieldset>
-    <form {{action 'search' on='submit'}}>
-      <ul>
-        <li>
-          <label>Strains</label>
-          {{
-            select-2
-            multiple=true
-            content=strains
-            value=selectedStrains
-            optionValuePath="id"
-            optionLabelPath="fullNameMU"
-            placeholder="Select one or more strains"
-          }}
-        </li>
-        <li>
-          <button class="action button-green smaller right" {{action 'selectAllStrains'}}>
-            Select All
-          </button>
-          <button class="action button-red smaller right" {{action 'deselectAllStrains'}}>
-            Deselect All
-          </button>
-        </li>
-        <li>
-          <label>Characteristics</label>
-          {{
-            select-2
-            multiple=true
-            content=characteristics
-            value=selectedCharacteristics
-            optionValuePath="id"
-            optionLabelPath="characteristicName"
-            placeholder="Select one or more characteristics"
-          }}
-        </li>
-        <li>
-          <button class="action button-green smaller right" {{action 'selectAllCharacteristics'}}>
-            Select All
-          </button>
-          <button class="action button-red smaller right" {{action 'deselectAllCharacteristics'}}>
-            Deselect All
-          </button>
-        </li>
-        <li>
-          <button type="submit" class="action button-gray smaller right">
-            Search
-          </button>
-        </li>
-      </ul>
-    </form>
-  </fieldset>
-</div>
+{{
+  protected/compare/select-form
+  characteristics=characteristics
+  strains=strains
+  selectedStrains=selectedStrains
+  selectedCharacteristics=selectedCharacteristics
+  on-search=(action "search")
+  update-strains=(action "updateStrainSelection")
+  update-characteristics=(action "updateCharacteristicSelection")
+}}
 
 {{outlet}}

app/pods/protected/index/route.js

@@ -1,6 +1,8 @@
 import Ember from 'ember';
 
-export default Ember.Route.extend({
+const { Route } = Ember;
+
+export default Route.extend({
   beforeModel: function(transition) {
     this._super(transition);
     this.transitionTo('protected.compare');

app/pods/protected/index/template.hbs

@@ -1 +0,0 @@
-Welcome

app/pods/protected/route.js

@@ -1,9 +1,12 @@
 import Ember from 'ember';
 import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';
 
-export default Ember.Route.extend(AuthenticatedRouteMixin, {
+const { Route } = Ember;
+
+export default Route.extend(AuthenticatedRouteMixin, {
   actions: {
-    error: function() {
+    error: function(err) {
+      console.log(err);
       this.transitionTo('/not-found');
     },
 

app/serializers/application.js

@@ -1,19 +1,22 @@
 import DS from 'ember-data';
 import Ember from 'ember';
 
-export default DS.RESTSerializer.extend({
+const { RESTSerializer } = DS;
+const { isNone } = Ember;
+
+export default RESTSerializer.extend({
   isNewSerializerAPI: true,
 
   serializeBelongsTo: function(snapshot, json, relationship) {
-    var key = relationship.key;
-    var belongsTo = snapshot.belongsTo(key);
+    let key = relationship.key;
+    const belongsTo = snapshot.belongsTo(key);
     key = this.keyForRelationship ? this.keyForRelationship(key, "belongsTo", "serialize") : key;
-    json[key] = Ember.isNone(belongsTo) ? belongsTo : +belongsTo.record.id;
+    json[key] = isNone(belongsTo) ? belongsTo : +belongsTo.record.id;
   },
 
   serializeHasMany: function(snapshot, json, relationship) {
-    var key = relationship.key;
-    var hasMany = snapshot.hasMany(key);
+    let key = relationship.key;
+    const hasMany = snapshot.hasMany(key);
     key = this.keyForRelationship ? this.keyForRelationship(key, "hasMany", "serialize") : key;
 
     json[key] = [];