Dummy measurement edit

app/pods/protected/strains/show/measurements-table-row/component.js

@@ -0,0 +1,17 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  tagName: 'tr',
+  isEditing: false,
+
+  actions: {
+    edit: function() {
+      this.toggleProperty('isEditing');
+    },
+
+    save: function() {
+      this.toggleProperty('isEditing');
+      console.log('saved');
+    }
+  },
+});

app/pods/protected/strains/show/measurements-table-row/template.hbs

@@ -0,0 +1,37 @@
+{{#if isEditing}}
+  <td>
+    {{input value='Foo'}}
+  </td>
+  <td>
+    {{input value='Bar'}}
+  </td>
+  <td>
+    {{input value='Baz'}}
+  </td>
+  {{#if canEdit}}
+    <td>
+      <button class="button-gray smaller" {{action 'save'}}>
+        Save
+      </button>
+    </td>
+  {{/if}}
+{{else}}
+  <td>
+    {{#link-to 'protected.characteristics.show' row.characteristic.id}}
+      {{{row.characteristic.characteristicName}}}
+    {{/link-to}}
+  </td>
+  <td>
+    {{row.measurement.value}}
+  </td>
+  <td>
+    {{row.measurement.notes}}
+  </td>
+  {{#if canEdit}}
+    <td>
+      <button class="button-gray smaller" {{action 'edit'}}>
+        Edit
+      </button>
+    </td>
+  {{/if}}
+{{/if}}

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

@@ -1,27 +1,34 @@
 {{#if measurementsPresent}}
 <table class="flakes-table">
+  <colgroup>
+    {{#if canEdit}}
+      <col span="1" style="width:40%">
+      <col span="1" style="width:20%">
+      <col span="1" style="width:30%">
+      <col span="1" style="width:10%">
+    {{else}}
+      <col span="1" style="width:40%">
+      <col span="1" style="width:30%">
+      <col span="1" style="width:30%">
+    {{/if}}
+  </colgroup>
   <thead>
     <tr>
       <th>Characteristic</th>
       <th>Value</th>
       <th>Notes</th>
+      {{#if canEdit}}
+      <th>Edit</th>
+      {{/if}}
     </tr>
   </thead>
   <tbody>
     {{#each measurementsTable as |row|}}
-      <tr>
+      {{
-        <td>
+        protected/strains/show/measurements-table-row
-          {{#link-to 'protected.characteristics.show' row.characteristic.id}}
+        row=row
-            {{{row.characteristic.characteristicName}}}
+        canEdit=canEdit
-          {{/link-to}}
+      }}
-        </td>
-        <td>
-          {{row.measurement.value}}
-        </td>
-        <td>
-          {{row.measurement.notes}}
-        </td>
-      </tr>
     {{/each}}
   </tbody>
 </table>

app/pods/protected/strains/show/template.hbs

@@ -73,7 +73,11 @@
       <dl class="span-1">
         <dt>Characteristics</dt>
         <dd>
-          {{protected/strains/show/measurements-table model=model}}
+          {{
+            protected/strains/show/measurements-table
+            model=model
+            canEdit=false
+          }}
         </dd>
       </dl>
     </div>

app/pods/protected/strains/strain-form/template.hbs

@@ -49,6 +49,13 @@
       </div>
     </div>
   </fieldset>
+  <div>
+    {{
+      protected/strains/show/measurements-table
+      model=strain
+      canEdit=strain.canEdit
+    }}
+  </div>
   <br>
   <a class="button-red smaller" {{action 'cancel'}}>
     Cancel

app/styles/app.css

@@ -1,3 +1,10 @@
+input[type="text"] {
+     width: 100%;
+     box-sizing: border-box;
+     -webkit-box-sizing:border-box;
+     -moz-box-sizing: border-box;
+}
+
 .ql-editor {
   font-size: 18px;
 }