Merge branch 'component-abuse'

* component-abuse:
  cleaning up measurements table
  select2
  Clean up meas search a bit
  fix speciesname in fullname
  Remove strain-name component
  genus-name component readonly
  Try computed properties
  Remove mesa-index-row component
  Remove scientific-name component
  Remove console log stmt

app/models/strain.js

@@ -1,5 +1,4 @@
 import DS from 'ember-data';
-import Ember from 'ember';
 
 export default DS.Model.extend({
   measurements: DS.hasMany('measurements', { async: true }),
@@ -17,7 +16,14 @@ export default DS.Model.extend({
   updatedBy: DS.attr('number'),
   deletedBy: DS.attr('number'),
   totalMeasurements: DS.attr('number'),
-  fullName: Ember.computed('species.speciesName', 'strainName', function() {
+  strainNameMU: function() {
-    return this.get('species.speciesName') + ' (strain ' + this.get('strainName') + ')';
+    let type = this.get('typeStrain') ? '<sup>T</sup>' : '';
-  })
+    return `${this.get('strainName')}${type}`;
+  }.property('strainName', 'typeStrain').readOnly(),
+  fullName: function() {
+    return `${this.get('species.speciesName')} (strain ${this.get('strainName')})`;
+  }.property('species', 'strainName').readOnly(),
+  fullNameMU: function() {
+    return `<em>${this.get('species.speciesName')}</em> ${this.get('strainNameMU')}`;
+  }.property('species', 'strainNameMU').readOnly(),
 });

app/pods/components/genus-name/component.js

@@ -4,5 +4,5 @@ export default Ember.Component.extend({
   tagName: 'em',
   genus: function() {
     return this.get('globals.genus').capitalize();
-  }.property(),
+  }.property().readOnly(),
 });

app/pods/components/measurement-index-row/component.js

@@ -1,5 +0,0 @@
-import Ember from 'ember';
-
-export default Ember.Component.extend({
-  tagName: 'tr',
-});

app/pods/components/measurement-index-row/template.hbs

@@ -1,9 +0,0 @@
-<td>
-  {{scientific-name strain=data.strain}}
-</td>
-<td>
-  {{data.characteristic.characteristicName}}
-</td>
-<td>
-  {{{data.value}}}
-</td>

app/pods/components/measurement-search-table/component.js

@@ -1,32 +0,0 @@
-import Ember from 'ember';
-
-export default Ember.Component.extend({
-  isLoading: false,
-  actions: {
-    search: function() {
-      this.set('isLoading', true);
-      let strain = this.get('selectedStrain');
-      let characteristic = this.get('selectedCharacteristic');
-      if ((strain === 'all') && (characteristic === 'all')) {
-        this.store.findAll('measurement').then((measurements)=>{
-          this.set('measurements', measurements);
-        });
-        this.set('isLoading', false);
-        console.log(this.get('isLoading'));
-        return false;
-      }
-      let search = {};
-      if (strain !== 'all') {
-        search['strain'] = strain;
-      }
-      if (characteristic !== 'all') {
-        search['characteristic'] = characteristic;
-      }
-      this.store.find('measurement', search).then((measurements)=>{
-        this.set('measurements', measurements);
-      });
-      this.set('isLoading', false);
-      return false;
-    }
-  },
-});

app/pods/components/measurement-search-table/template.hbs

@@ -1,29 +0,0 @@
-<div class="grid-12 gutter-50">
-  <div class="span-12">
-    {{search-button isLoading=isLoading action='search'}}
-  </div>
-</div>
-<div class="grid-12 gutter-50">
-  <div class="span-12">
-    <h3>Total matching measurements: {{measurements.length}}</h3>
-  </div>
-</div>
-
-{{#if isLoading}}
-  {{loading-panel}}
-{{else}}
-  <table class="flakes-table">
-    <thead>
-      <tr>
-        <th>Strain</th>
-        <th>Characteristic</th>
-        <th>Value</th>
-      </tr>
-    </thead>
-    <tbody>
-      {{#each measurements as |measurement|}}
-        {{measurement-index-row data=measurement}}
-      {{/each}}
-    </tbody>
-  </table>
-{{/if}}

app/pods/components/scientific-name/component.js

@@ -1,6 +0,0 @@
-import Ember from 'ember';
-
-export default Ember.Component.extend({
-  tagName: 'span',
-  strain: null, // passed in
-});

app/pods/components/scientific-name/template.hbs

@@ -1 +0,0 @@
-<em>{{strain.species.speciesName}}</em> (strain {{strain-name strain=strain}})

app/pods/components/species-details/template.hbs

@@ -18,7 +18,7 @@
           {{#each species.strains as |strain index|}}
             {{if index ","}}
             {{#link-to 'strains.show' strain.id}}
-              {{strain-name strain=strain}}
+              {{{strain.strainNameMU}}}
             {{/link-to}}
           {{/each}}
           {{#unless species.isNew}}

app/pods/components/species-index-row/template.hbs

@@ -9,7 +9,7 @@
   {{#each data.strains as |strain index|}}
     {{if index ","}}
     {{#link-to 'strains.show' strain.id}}
-      {{strain-name strain=strain}}
+      {{{strain.strainNameMU}}}
     {{/link-to}}
   {{/each}}
 </td>

app/pods/components/strain-index-row/template.hbs

@@ -1,6 +1,6 @@
 <td>
   {{#link-to 'strains.show' data.id classBinding="data.typeStrain:type-strain"}}
-    {{scientific-name strain=data}}
+    {{{data.fullNameMU}}}
   {{/link-to}}
 </td>
 <td>

app/pods/components/strain-name/component.js

@@ -1,5 +0,0 @@
-import Ember from 'ember';
-
-export default Ember.Component.extend({
-  tagName: 'span',
-});

app/pods/components/strain-name/template.hbs

@@ -1 +0,0 @@
-{{strain.strainName}}{{{if strain.typeStrain '<sup>T</sup>'}}}

app/pods/measurements/controller.js

@@ -0,0 +1,15 @@
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+  actions: {
+    search: function() {
+      let search = {
+        strain: this.get('selectedStrains'),
+        characteristic: this.get('selectedCharacteristics'),
+      };
+      this.store.find('measurement', search).then((measurements)=>{
+        this.set('measurements', measurements);
+      });
+    }
+  },
+});

app/pods/measurements/route.js

@@ -4,46 +4,28 @@ import AuthenticatedRouteMixin from 'simple-auth/mixins/authenticated-route-mixi
 export default Ember.Route.extend(AuthenticatedRouteMixin, {
   model: function() {
     return Ember.RSVP.hash({
-      species: this.store.findAll('species'),
+      species: this.store.findAll('species'), // need this bc async
       strains: this.store.findAll('strain'),
       characteristics: this.store.findAll('characteristic'),
     });
   },
   setupController: function(controller, models) {
-    var tableAttrs = [
-      { name: 'Strain', attr: 'strain.strainName' },
-      { name: 'Characteristic', attr: 'characteristic.characteristicName' },
-      { name: 'Value', attr: 'computedValue'}
-    ];
-    controller.set('tableAttrs', tableAttrs);
-    controller.set('row', 'measurement-index-row');
-    controller.set('measurements', []);
-
     // Set up search parameters
-    models.strains = models.strains.sortBy('fullName');
+    let selects = [
-    let strains = models.strains.map((strain)=>{
+      { model: 'strains', id: 'id', text: 'fullName' },
-      return Ember.Object.create({
+      { model: 'characteristics', id: 'id', text: 'characteristicName' },
-        val: strain.get('id'),
+    ];
-        lab: strain.get('fullName'),
-      });
-    });
-    strains.unshiftObjects(Ember.Object.create({
-      val: 'all',
-      lab: 'All Strains',
-    }));
-    controller.set('strains', strains);
 
-    models.characteristics = models.characteristics.sortBy('characteristicName');
+    selects.forEach((item, index, enumerable) => {
-    let characteristics = models.characteristics.map((characteristic)=>{
+      models[item.model] = models[item.model].sortBy(item.text);
-      return Ember.Object.create({
+      let temp = models[item.model].map((data) => {
-        val: characteristic.get('id'),
+        return Ember.Object.create({
-        lab: characteristic.get('characteristicName'),
+          id: data.get(item.id),
+          text: data.get(item.text),
+        });
       });
+      controller.set(item.model, temp);
     });
-    characteristics.unshiftObjects(Ember.Object.create({
+
-      val: 'all',
-      lab: 'All Characteristics',
-    }));
-    controller.set('characteristics', characteristics);
   },
 });

app/pods/measurements/template.hbs

@@ -1,31 +1,61 @@
 <h2>{{genus-name}} Measurements</h2>
-<div class="grid-12 gutter-50">
+<div class="grid-1 gutter-50">
-  <div class="span-4">
+  <div class="span-1">
-    Strains
+    <fieldset>
-  </div>
+      <form>
-  <div class="span-8">
+        <ul>
-    {{
+          <li>
-      view "select"
+            <label>Species</label>
-      content=strains
+            {{
-      optionValuePath="content.val"
+              select-2
-      optionLabelPath="content.lab"
+              multiple=true
-      value=selectedStrain
+              content=strains
-    }}
+              value=selectedStrains
-  </div>
+              optionValuePath="id"
-</div>
+              placeholder="All strains"
-<div class="grid-12 gutter-50">
+            }}
-  <div class="span-4">
+          </li>
-    Characteristics
+          <li>
-  </div>
+            <label>Characteristics</label>
-  <div class="span-8">
+            {{
-    {{
+              select-2
-      view "select"
+              multiple=true
-      content=characteristics
+              content=characteristics
-      optionValuePath="content.val"
+              value=selectedCharacteristics
-      optionLabelPath="content.lab"
+              optionValuePath="id"
-      value=selectedCharacteristic
+              placeholder="Choose a characteristic"
-    }}
+            }}
+          </li>
+          <li>
+            {{search-button isLoading=isLoading action='search'}}
+          </li>
+        </ul>
+      </form>
+    </fieldset>
   </div>
 </div>
 
-{{measurement-search-table}}
+<div class="grid-12 gutter-50">
+  <div class="span-12">
+    <h3>Total matching measurements: {{measurements.length}}</h3>
+  </div>
+</div>
+
+<table class="flakes-table">
+  <thead>
+    <tr>
+      <th>Strain</th>
+      <th>Characteristic</th>
+      <th>Value</th>
+    </tr>
+  </thead>
+  <tbody>
+    {{#each measurements as |measurement|}}
+      <tr>
+        <td>{{{measurement.strain.fullNameMU}}}</td>
+        <td>{{measurement.characteristic.characteristicName}}</td>
+        <td>{{{measurement.value}}}</td>
+      </tr>
+    {{/each}}
+  </tbody>
+</table>

app/styles/app.css

@@ -2,6 +2,10 @@
   padding: 2em 0em 0em 0em;
 }
 
+.select2-container {
+  width: 100%;
+}
+
 .flakes-table thead tr th span {
   cursor: pointer;
 }

bower.json

@@ -14,6 +14,7 @@
     "qunit": "~1.17.1",
     "flakes": "~1.0.0",
     "ember-simple-auth": "~0.8.0-beta.3",
-    "moment": "~2.9.0"
+    "moment": "~2.9.0",
+    "select2": "3.5.2"
   }
 }

config/environment.js

@@ -41,7 +41,7 @@ module.exports = function(environment) {
       'font-src': "'self'",
       'connect-src': "'self' http://127.0.0.1:4200",
       'img-src': "'self'",
-      'style-src': "'self'",
+      'style-src': "'self' 'unsafe-inline'",
       'media-src': "'self'"
     }
   }

package.json

@@ -37,6 +37,7 @@
     "ember-data": "1.0.0-beta.18",
     "ember-disable-proxy-controllers": "^1.0.0",
     "ember-export-application-global": "^1.0.2",
+    "ember-select-2": "1.3.0",
     "express": "^4.12.4",
     "glob": "^4.5.3",
     "jsonwebtoken": "^5.0.0",

tests/unit/components/display-error-test.js

@@ -1,21 +0,0 @@
-import {
-  moduleForComponent,
-  test
-} from 'ember-qunit';
-
-moduleForComponent('display-error', {
-  // Specify the other units that are required for this test
-  // needs: ['component:foo', 'helper:bar']
-});
-
-test('it renders', function(assert) {
-  assert.expect(2);
-
-  // Creates the component instance
-  var component = this.subject();
-  assert.equal(component._state, 'preRender');
-
-  // Renders the component to the page
-  this.render();
-  assert.equal(component._state, 'inDOM');
-});

tests/unit/components/genus-name-test.js

@@ -1,21 +0,0 @@
-import {
-  moduleForComponent,
-  test
-} from 'ember-qunit';
-
-moduleForComponent('genus-name', {
-  // Specify the other units that are required for this test
-  // needs: ['component:foo', 'helper:bar']
-});
-
-test('it renders', function(assert) {
-  assert.expect(2);
-
-  // Creates the component instance
-  var component = this.subject();
-  assert.equal(component._state, 'preRender');
-
-  // Renders the component to the page
-  this.render();
-  assert.equal(component._state, 'inDOM');
-});

tests/unit/components/measurements/measurement-row-test.js

@@ -1,21 +0,0 @@
-import {
-  moduleForComponent,
-  test
-} from 'ember-qunit';
-
-moduleForComponent('measurements/measurement-row', {
-  // specify the other units that are required for this test
-  // needs: ['component:foo', 'helper:bar']
-});
-
-test('it renders', function(assert) {
-  assert.expect(2);
-
-  // creates the component instance
-  var component = this.subject();
-  assert.equal(component._state, 'preRender');
-
-  // renders the component to the page
-  this.render();
-  assert.equal(component._state, 'inDOM');
-});

tests/unit/components/scientific-name-test.js

@@ -1,21 +0,0 @@
-import {
-  moduleForComponent,
-  test
-} from 'ember-qunit';
-
-moduleForComponent('scientific-name', {
-  // specify the other units that are required for this test
-  // needs: ['component:foo', 'helper:bar']
-});
-
-test('it renders', function(assert) {
-  assert.expect(2);
-
-  // creates the component instance
-  var component = this.subject();
-  assert.equal(component._state, 'preRender');
-
-  // renders the component to the page
-  this.render();
-  assert.equal(component._state, 'inDOM');
-});

tests/unit/components/species/species-details-test.js

@@ -1,21 +0,0 @@
-import {
-  moduleForComponent,
-  test
-} from 'ember-qunit';
-
-moduleForComponent('species/species-details', {
-  // Specify the other units that are required for this test
-  // needs: ['component:foo', 'helper:bar']
-});
-
-test('it renders', function(assert) {
-  assert.expect(2);
-
-  // Creates the component instance
-  var component = this.subject();
-  assert.equal(component._state, 'preRender');
-
-  // Renders the component to the page
-  this.render();
-  assert.equal(component._state, 'inDOM');
-});

tests/unit/components/strains/strain-details-test.js

@@ -1,21 +0,0 @@
-import {
-  moduleForComponent,
-  test
-} from 'ember-qunit';
-
-moduleForComponent('strains/strain-details', {
-  // Specify the other units that are required for this test
-  // needs: ['component:foo', 'helper:bar']
-});
-
-test('it renders', function(assert) {
-  assert.expect(2);
-
-  // Creates the component instance
-  var component = this.subject();
-  assert.equal(component._state, 'preRender');
-
-  // Renders the component to the page
-  this.render();
-  assert.equal(component._state, 'inDOM');
-});

tests/unit/pods/components/measurement-index-row/component-test.js

@@ -1,18 +0,0 @@
-import { moduleForComponent, test } from 'ember-qunit';
-
-moduleForComponent('measurement-index-row', 'Unit | Component | measurement index row', {
-  // Specify the other units that are required for this test
-  // needs: ['component:foo', 'helper:bar']
-});
-
-test('it renders', function(assert) {
-  assert.expect(2);
-
-  // Creates the component instance
-  var component = this.subject();
-  assert.equal(component._state, 'preRender');
-
-  // Renders the component to the page
-  this.render();
-  assert.equal(component._state, 'inDOM');
-});

tests/unit/pods/components/measurement-search-table/component-test.js

@@ -1,19 +0,0 @@
-import { moduleForComponent, test } from 'ember-qunit';
-
-moduleForComponent('measurement-search-table', 'Unit | Component | measurement search table', {
-  // Specify the other units that are required for this test
-  // needs: ['component:foo', 'helper:bar'],
-  unit: true
-});
-
-test('it renders', function(assert) {
-  assert.expect(2);
-
-  // Creates the component instance
-  var component = this.subject();
-  assert.equal(component._state, 'preRender');
-
-  // Renders the component to the page
-  this.render();
-  assert.equal(component._state, 'inDOM');
-});

tests/unit/pods/components/strain-name/component-test.js

@@ -1,19 +0,0 @@
-import { moduleForComponent, test } from 'ember-qunit';
-
-moduleForComponent('strain-name', 'Unit | Component | strain name', {
-  // Specify the other units that are required for this test
-  // needs: ['component:foo', 'helper:bar'],
-  unit: true
-});
-
-test('it renders', function(assert) {
-  assert.expect(2);
-
-  // Creates the component instance
-  var component = this.subject();
-  assert.equal(component._state, 'preRender');
-
-  // Renders the component to the page
-  this.render();
-  assert.equal(component._state, 'inDOM');
-});

tests/unit/pods/measurements/controller-test.js

@@ -0,0 +1,12 @@
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('controller:measurements', {
+  // Specify the other units that are required for this test.
+  // needs: ['controller:foo']
+});
+
+// Replace this with your real tests.
+test('it exists', function(assert) {
+  var controller = this.subject();
+  assert.ok(controller);
+});