Compare, begin components

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,11 @@
 import Ember from 'ember';
 
-export default Ember.Controller.extend({
-  actions: {
-    search: function() {
-      let query = {
-        strain_ids: this.get('selectedStrains'),
-        characteristic_ids: this.get('selectedCharacteristics'),
-      };
+const { Controller } = Ember;
 
+export default Controller.extend({
+  actions: {
+    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(","));
-    },
-
-    deselectAllStrains: function() {
-      this.set('selectedStrains', '');
-    },
-
-    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/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,49 @@
+import Ember from 'ember';
+
+const { Component } = Ember;
+
+export default Component.extend({
+  characteristics: null,
+  strains: null,
+
+  "on-search": null,
+
+  selectedStrains: null,
+  selectedCharacteristics: null,
+
+  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.set('selectedStrains', strain_ids.join(","));
+    },
+
+    deselectAllStrains: function() {
+      this.set('selectedStrains', '');
+    },
+
+    selectAllCharacteristics: function() {
+      const chars = this.get('characteristics');
+      const char_ids = [];
+      chars.forEach((char) => {
+        char_ids.push(char.get('id'));
+      });
+      this.set('selectedCharacteristics', char_ids.join(","));
+    },
+
+    deselectAllCharacteristics: function() {
+      this.set('selectedCharacteristics', '');
+    },
+  },
+});

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,10 @@
 <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"
+  protected/compare/select-form
+  characteristics=characteristics
+  strains=strains
+  on-search=(action "search")
 }}
-        </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>
 
 {{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