Sortable table component

app/pods/characteristics/controller.js

@@ -1,5 +0,0 @@
-import SortableController from '../../controllers/sortable';
-
-export default SortableController.extend({
-  sortBy: 'characteristicName',
-});

app/pods/characteristics/route.js

@@ -4,5 +4,14 @@ import AuthenticatedRouteMixin from 'simple-auth/mixins/authenticated-route-mixi
 export default Ember.Route.extend(AuthenticatedRouteMixin, {
   model: function() {
     return this.store.findAll('characteristic');
-  }
+  },
+  setupController: function(controller, model) {
+    var tableAttrs = [
+      { name: 'Name', attr: 'characteristicName' },
+      { name: 'Type', attr: 'characteristicType' }
+    ];
+    controller.set('model', model);
+    controller.set('tableAttrs', tableAttrs);
+    controller.set('row', 'characteristic-index-row');
+  },
 });

app/pods/characteristics/template.hbs

@@ -1,19 +1,4 @@
 <h2>{{genus-name}} Characteristics</h2>
-<h3>Total characteristics: {{controller.length}}</h3>
+<h3>Total characteristics: {{model.length}}</h3>
 
-<table class="flakes-table">
+{{sortable-table content=model tableAttrs=tableAttrs row=row}}
-  <thead>
-    <tr>
-      <th {{action "setSortBy" "characteristicName"}}>Name</th>
-      <th {{action "setSortBy" "characteristicType"}}>Type</th>
-    </tr>
-  </thead>
-  <tbody>
-    {{#each characteristic in controller}}
-      <tr>
-        <td>{{characteristic.characteristicName}}</td>
-        <td>{{characteristic.characteristicType}}</td>
-      </tr>
-    {{/each}}
-  </tbody>
-</table>

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

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

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

@@ -0,0 +1,6 @@
+<td>
+  {{data.characteristicName}}
+</td>
+<td>
+  {{data.characteristicType}}
+</td>

app/pods/components/sortable-table-header/component.js

@@ -0,0 +1,13 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  tagName: 'th',
+  upArrow: '&#9650',
+  downArrow: '&#9660',
+
+  actions: {
+    sortBy: function(sortProperty, ascending) {
+      this.sendAction('action', sortProperty, ascending);
+    }
+  },
+});

app/pods/components/sortable-table-header/template.hbs

@@ -0,0 +1,3 @@
+{{title}}
+<span {{action 'sortBy' sortProperty true}}>{{{upArrow}}}</span>
+<span {{action 'sortBy' sortProperty false}}>{{{downArrow}}}</span>

app/pods/components/sortable-table/component.js

@@ -0,0 +1,13 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend(Ember.SortableMixin, {
+  tagName: 'table',
+  classNames: ['flakes-table'],
+
+  actions: {
+    sortBy: function(property, ascending) {
+      this.set('sortAscending', ascending);
+      this.set('sortProperties', [property]);
+    }
+  },
+});

app/pods/components/sortable-table/template.hbs

@@ -0,0 +1,13 @@
+<thead>
+  <tr>
+    {{#each a in tableAttrs}}
+      {{sortable-table-header title=a.name sortProperty=a.attr action="sortBy"}}
+    {{/each}}
+  </tr>
+</thead>
+
+<tbody>
+  {{#each item in arrangedContent}}
+    {{component row data=item}}
+  {{/each}}
+</tbody>

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

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

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

@@ -0,0 +1,13 @@
+<td>
+  {{#link-to 'species.show' data}}
+    {{data.speciesName}}
+  {{/link-to}}
+</td>
+<td>
+  {{#each data.strains as |strain index|}}
+    {{if index ","}}
+    {{#link-to 'strains.show' strain.id}}
+      {{strain.strainName}}
+    {{/link-to}}
+  {{/each}}
+</td>

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

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

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

@@ -0,0 +1,8 @@
+<td>
+  {{#link-to 'strains.show' data.id}}
+    {{scientific-name strain=data}}
+  {{/link-to}}
+</td>
+<td>
+  {{data.totalMeasurements}}
+</td>

app/pods/species/index/route.js

@@ -4,5 +4,14 @@ import AuthenticatedRouteMixin from 'simple-auth/mixins/authenticated-route-mixi
 export default Ember.Route.extend(AuthenticatedRouteMixin, {
   model: function() {
     return this.store.findAll('species');
-  }
+  },
+  setupController: function(controller, model) {
+    var tableAttrs = [
+      { name: 'Name', attr: 'speciesName' },
+      { name: 'Strains', attr: 'totalStrains' }
+    ];
+    controller.set('model', model);
+    controller.set('tableAttrs', tableAttrs);
+    controller.set('row', 'species-index-row');
+  },
 });

app/pods/species/index/template.hbs

@@ -8,30 +8,4 @@
   {{/link-to}}
 {{/if}}
 
-<table class="flakes-table">
+{{sortable-table content=model tableAttrs=tableAttrs row=row}}
-  <thead>
-    <tr>
-      <th {{action "setSortBy" "speciesName"}}>Name</th>
-      <th {{action "setSortBy" "totalStrains"}}>Strains</th>
-    </tr>
-  </thead>
-  <tbody>
-    {{#each species in controller}}
-      <tr>
-        <td>
-          {{#link-to 'species.show' species}}
-            {{species.speciesName}}
-          {{/link-to}}
-        </td>
-        <td>
-          {{#each species.strains as |strain index|}}
-            {{if index ","}}
-            {{#link-to 'strains.show' strain.id}}
-              {{strain.strainName}}
-            {{/link-to}}
-          {{/each}}
-        </td>
-      </tr>
-    {{/each}}
-  </tbody>
-</table>

app/pods/strains/index/route.js

@@ -4,5 +4,14 @@ import AuthenticatedRouteMixin from 'simple-auth/mixins/authenticated-route-mixi
 export default Ember.Route.extend(AuthenticatedRouteMixin, {
   model: function() {
     return this.store.findAll('strain');
-  }
+  },
+  setupController: function(controller, model) {
+    var tableAttrs = [
+      { name: 'Name', attr: 'fullName' },
+      { name: 'Total Measurements', attr: 'totalMeasurements' }
+    ];
+    controller.set('model', model);
+    controller.set('tableAttrs', tableAttrs);
+    controller.set('row', 'strain-index-row');
+  },
 });

app/pods/strains/index/template.hbs

@@ -1,5 +1,5 @@
 <h2>{{genus-name}} Strains</h2>
-<h3>Total strains: {{controller.length}}</h3>
+<h3>Total strains: {{model.length}}</h3>
 
 {{#if (can "add strain")}}
   {{! Does nothing ATM }}
@@ -8,23 +8,4 @@
   {{/link-to}}
 {{/if}}
 
-<table class="flakes-table">
+{{sortable-table content=model tableAttrs=tableAttrs row=row}}
-  <thead>
-    <tr>
-      <th {{action "setSortBy" "fullName"}}>Name</th>
-      <th {{action "setSortBy" "totalMeasurements"}}>Total Measurements</th>
-    </tr>
-  </thead>
-  <tbody>
-    {{#each strain in controller}}
-      <tr>
-        <td>
-          {{#link-to 'strains.show' strain.id}}
-            {{scientific-name strain=strain}}
-          {{/link-to}}
-        </td>
-        <td>{{strain.totalMeasurements}}</td>
-      </tr>
-    {{/each}}
-  </tbody>
-</table>

app/styles/app.css

@@ -2,7 +2,7 @@
   padding: 2em 0em 0em 0em;
 }
 
-.flakes-table thead tr {
+.flakes-table thead tr th span {
   cursor: pointer;
 }
 

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

@@ -0,0 +1,21 @@
+import {
+  moduleForComponent,
+  test
+} from 'ember-qunit';
+
+moduleForComponent('characteristic-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/sortable-table-header/component-test.js

@@ -0,0 +1,21 @@
+import {
+  moduleForComponent,
+  test
+} from 'ember-qunit';
+
+moduleForComponent('sortable-table-header', {
+  // 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/sortable-table/component-test.js

@@ -0,0 +1,21 @@
+import {
+  moduleForComponent,
+  test
+} from 'ember-qunit';
+
+moduleForComponent('sortable-table', {
+  // 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/species-index-row/component-test.js

@@ -0,0 +1,21 @@
+import {
+  moduleForComponent,
+  test
+} from 'ember-qunit';
+
+moduleForComponent('species-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/strain-index-row/component-test.js

@@ -0,0 +1,21 @@
+import {
+  moduleForComponent,
+  test
+} from 'ember-qunit';
+
+moduleForComponent('strain-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');
+});