Refactor meas search -> component

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

@@ -0,0 +1,48 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  classNames: ["grid-1", "gutter-50"],
+
+  setup: function() {
+    Ember.RSVP.hash({
+      species: this.store.findAll('species'),
+      strains: this.store.findAll('strain'),
+      characteristicTypes: this.store.findAll('characteristic-type'),
+      characteristics: this.store.findAll('characteristic'),
+    }).then((models) => {
+      // Set up search parameters
+      let selects = [
+        { model: 'species', id: 'id', text: 'speciesName',
+          children: 'strains', cid: 'id', ctext: 'fullName' },
+        { model: 'characteristicTypes', id: 'id', text: 'characteristicTypeName',
+          children: 'characteristics', cid: 'id', ctext: 'characteristicName' },
+      ];
+
+      selects.forEach((item /*, index, enumerable*/) => {
+        models[item.model] = models[item.model].filter((i) => {
+          if (!Ember.isEmpty(i.get(item.children))) { return true; }
+        });
+        models[item.model] = models[item.model].sortBy(item.text);
+        let temp = models[item.model].map((data) => {
+          let temp_children = [];
+          data.get(item.children).forEach((child) => {
+            temp_children.push({id: child.get(item.cid), text: child.get(item.ctext)});
+          });
+          return {
+            text: data.get(item.text),
+            children: temp_children,
+          };
+        });
+        this.set(item.model, temp);
+      });
+    });
+  }.on('init'),
+
+  actions: {
+    search: function() {
+      let strains = this.get('selectedStrains'),
+          characteristics = this.get('selectedCharacteristics');
+      this.sendAction('search', strains, characteristics);
+    },
+  },
+});

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

@@ -0,0 +1,33 @@
+<div class="span-1">
+  <fieldset>
+    <form>
+      <ul>
+        <li>
+          <label>Strains</label>
+          {{
+            select-2
+            multiple=true
+            content=species
+            value=selectedStrains
+            optionValuePath="id"
+            placeholder="All strains"
+          }}
+        </li>
+        <li>
+          <label>Characteristics</label>
+          {{
+            select-2
+            multiple=true
+            content=characteristicTypes
+            value=selectedCharacteristics
+            optionValuePath="id"
+            placeholder="All characteristics"
+          }}
+        </li>
+        <li>
+          {{search-button isLoading=isLoading action='search'}}
+        </li>
+      </ul>
+    </form>
+  </fieldset>
+</div>

app/pods/measurements/controller.js

@@ -38,10 +38,10 @@ export default Ember.Controller.extend({
   }),
 
   actions: {
-    search: function() {
+    search: function(selectedStrains, selectedCharacteristics) {
       this.store.find('measurement', {
-        strain: this.get('selectedStrains'),
+        strain: selectedStrains,
-        characteristic: this.get('selectedCharacteristics'),
+        characteristic: selectedCharacteristics,
       }).then((measurements)=>{
         this.set('measurements', measurements);
       });

app/pods/measurements/route.js

@@ -3,39 +3,6 @@ import AuthenticatedRouteMixin from 'simple-auth/mixins/authenticated-route-mixi
 
 export default Ember.Route.extend(AuthenticatedRouteMixin, {
   model: function() {
-    return Ember.RSVP.hash({
+    return this.store.findAll('measurement');
-      species: this.store.findAll('species'),
-      strains: this.store.findAll('strain'),
-      characteristicTypes: this.store.findAll('characteristic-type'),
-      characteristics: this.store.findAll('characteristic'),
-    });
-  },
-  setupController: function(controller, models) {
-    // Set up search parameters
-    let selects = [
-      { model: 'species', id: 'id', text: 'speciesName',
-        children: 'strains', cid: 'id', ctext: 'fullName' },
-      { model: 'characteristicTypes', id: 'id', text: 'characteristicTypeName',
-        children: 'characteristics', cid: 'id', ctext: 'characteristicName' },
-    ];
-
-    selects.forEach((item /*, index, enumerable*/) => {
-      models[item.model] = models[item.model].filter((i) => {
-        if (!Ember.isEmpty(i.get(item.children))) { return true; }
-      });
-      models[item.model] = models[item.model].sortBy(item.text);
-      let temp = models[item.model].map((data) => {
-        let temp_children = [];
-        data.get(item.children).forEach((child) => {
-          temp_children.push({id: child.get(item.cid), text: child.get(item.ctext)});
-        });
-        return {
-          text: data.get(item.text),
-          children: temp_children,
-        };
-      });
-      controller.set(item.model, temp);
-    });
-
   },
 });

app/pods/measurements/template.hbs

@@ -1,39 +1,6 @@
 <h2>{{genus-name}} Measurements</h2>
-<div class="grid-1 gutter-50">
+
-  <div class="span-1">
+{{measurement-search-panel search='search'}}
-    <fieldset>
-      <form>
-        <ul>
-          <li>
-            <label>Strains</label>
-            {{
-              select-2
-              multiple=true
-              content=species
-              value=selectedStrains
-              optionValuePath="id"
-              placeholder="All strains"
-            }}
-          </li>
-          <li>
-            <label>Characteristics</label>
-            {{
-              select-2
-              multiple=true
-              content=characteristicTypes
-              value=selectedCharacteristics
-              optionValuePath="id"
-              placeholder="All characteristics"
-            }}
-          </li>
-          <li>
-            {{search-button isLoading=isLoading action='search'}}
-          </li>
-        </ul>
-      </form>
-    </fieldset>
-  </div>
-</div>
 
 <div class="grid-12 gutter-50">
   <div class="span-12">

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

@@ -0,0 +1,19 @@
+import { moduleForComponent, test } from 'ember-qunit';
+
+moduleForComponent('measurement-search-panel', 'Unit | Component | measurement search panel', {
+  // 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');
+});