Sort meas table in chars

Fixes #13.

app/pods/protected/characteristics/show/measurements-table/component.js

@@ -5,17 +5,27 @@ export default Ember.Component.extend({
     return this.get('model.measurements.length') > 0;
   }.property('model.measurements'),
 
-  // TODO: this is way more complicated than it should be
-  measurementsTable: function() {
-    let measurements = this.get('model.measurements');
-    let table = [];
-    measurements.forEach((measurement) => {
-      let row = {};
-      row['measurement'] = measurement;
-      row['strain'] = this.store.peekRecord('strain', measurement.get('strain.id'));
-      table.push(row);
-    });
-    return table;
-  }.property(),
+  sortParams: ['characteristic.characteristicTypeName', 'characteristic.sortOrder', 'characteristic.characteristicName'],
+  sortAsc: true,
+  paramsChanged: false,
+  sortedMeasurements: Ember.computed.sort('model.measurements', 'sortParams'),
+
+  actions: {
+    changeSortParam: function(col) {
+      let sort = this.get('sortAsc') ? 'asc' : 'desc';
+      let sortCol = `${col}:${sort}`;
+      this.set('sortParams', [sortCol]);
+      this.set('paramsChanged', true);
+      this.toggleProperty('sortAsc');
+      return false;
+    },
+
+    resetSortParam: function() {
+      this.set('sortParams', ['characteristic.characteristicTypeName', 'characteristic.sortOrder', 'characteristic.characteristicName']);
+      this.set('paramsChanged', false);
+      this.set('sortAsc', true);
+      return false;
+    },
+  },
 
 });

app/pods/protected/characteristics/show/measurements-table/template.hbs

@@ -1,14 +1,19 @@
 {{#if measurementsPresent}}
+{{#if paramsChanged}}
+  <button class="button-gray smaller" {{action 'resetSortParam'}}>
+    Reset sort
+  </button>
+{{/if}}
 <table class="flakes-table">
   <thead>
     <tr>
-      <th>Strain</th>
-      <th>Value</th>
-      <th>Notes</th>
+      <th {{action "changeSortParam" "strain.strainName"}} class="click">Strain</th>
+      <th {{action "changeSortParam" "value"}} class="click">Value</th>
+      <th {{action "changeSortParam" "notes"}} class="click">Notes</th>
     </tr>
   </thead>
   <tbody>
-    {{#each measurementsTable as |row|}}
+    {{#each sortedMeasurements as |row|}}
       <tr>
         <td>
           {{#link-to 'protected.strains.show' row.strain.id}}
@@ -16,10 +21,10 @@
           {{/link-to}}
         </td>
         <td>
-          {{row.measurement.value}}
+          {{row.value}}
         </td>
         <td>
-          {{row.measurement.notes}}
+          {{row.notes}}
         </td>
       </tr>
     {{/each}}

app/styles/app.css

@@ -18,7 +18,7 @@ input[type="text"] {
   width: 100%;
 }
 
-.flakes-table thead tr th span {
+.click {
   cursor: pointer;
 }