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
+  sortParams: ['characteristic.characteristicTypeName', 'characteristic.sortOrder', 'characteristic.characteristicName'],
-  measurementsTable: function() {
+  sortAsc: true,
-    let measurements = this.get('model.measurements');
+  paramsChanged: false,
-    let table = [];
+  sortedMeasurements: Ember.computed.sort('model.measurements', 'sortParams'),
-    measurements.forEach((measurement) => {
+
-      let row = {};
+  actions: {
-      row['measurement'] = measurement;
+    changeSortParam: function(col) {
-      row['strain'] = this.store.peekRecord('strain', measurement.get('strain.id'));
+      let sort = this.get('sortAsc') ? 'asc' : 'desc';
-      table.push(row);
+      let sortCol = `${col}:${sort}`;
-    });
+      this.set('sortParams', [sortCol]);
-    return table;
+      this.set('paramsChanged', true);
-  }.property(),
+      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 {{action "changeSortParam" "strain.strainName"}} class="click">Strain</th>
-      <th>Value</th>
+      <th {{action "changeSortParam" "value"}} class="click">Value</th>
-      <th>Notes</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;
 }