Rough in strain editing

app/controllers/strains/show.js

@@ -0,0 +1,14 @@
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+  isEditing: false,
+  actions: {
+    editStrain: function() {
+      this.get('model').get("errors").clear();
+      this.toggleProperty('isEditing');
+    },
+    saveStrain: function() {
+      this.get('model').save().then(this.toggleProperty('isEditing'));
+    }
+  }
+});

app/styles/app.css

@@ -6,6 +6,10 @@
   cursor: pointer;
 }
 
+.is-editing {
+  background-color: #FFFCE2;
+}
+
 /* BEGIN https://github.com/tobiasahlin/SpinKit */
 .spinner {
   width: 40px;

app/templates/strains/show.hbs

@@ -1,7 +1,16 @@
 <div class="grid-1">
   <div class="span-1">
-    <fieldset class="flakes-information-box">
-      <legend>Strain {{model.strainName}}</legend>
+    <fieldset {{bind-attr class=":flakes-information-box isEditing"}}>
+      <legend>
+        Strain
+          {{#if isEditing}}
+            {{input value=model.strainName}}
+          {{else}}
+            {{model.strainName}}
+          {{/if}}
+          {{display-errors a=model.errors.strainName}}
+      </legend>
+
       {{! ROW 1 }}
       <div class="grid-4">
         <dl class="span-2">
@@ -10,34 +19,72 @@
         </dl>
         <dl class="span-2">
           <dt>Type Strain?</dt>
-          <dd>{{if model.typeStrain 'Yes' 'No'}}</dd>
+          <dd>
+            {{#if isEditing}}
+              {{input type="checkbox" checked=model.typeStrain}}
+            {{/if}}
+            {{if model.typeStrain 'Yes' 'No'}}
+            {{display-errors a=model.errors.typeStrain}}
+          </dd>
         </dl>
       </div>
+
       {{! ROW 2 }}
       <div class="grid-4">
         <dl class="span-2">
           <dt>Accession Numbers</dt>
-          <dd>{{model.accessionNumbers}}</dd>
+          <dd>
+            {{#if isEditing}}
+              {{input value=model.accessionNumbers}}
+            {{else}}
+              {{model.accessionNumbers}}
+            {{/if}}
+            {{display-errors a=model.errors.accessionNumbers}}
+          </dd>
         </dl>
         <dl class="span-2">
           <dt>Genbank</dt>
-          <dd>{{model.genbank}}</dd>
+          <dd>
+            {{#if isEditing}}
+              {{input value=model.genbank}}
+            {{else}}
+              {{model.genbank}}
+            {{/if}}
+            {{display-errors a=model.errors.genbank}}
+          </dd>
         </dl>
       </div>
+
       {{! ROW 3 }}
       <div class="grid-4">
         <dl class="span-4">
           <dt>Isolated From</dt>
-          <dd>{{model.isolatedFrom}}</dd>
+          <dd>
+            {{#if isEditing}}
+              {{textarea value=model.isolatedFrom cols="70" rows="3"}}
+            {{else}}
+              {{model.isolatedFrom}}
+            {{/if}}
+            {{display-errors a=model.errors.isolatedFrom}}
+          </dd>
         </dl>
       </div>
+
       {{! ROW 4 }}
       <div class="grid-4">
         <dl class="span-4">
           <dt>Notes</dt>
-          <dd>{{model.notes}}</dd>
+          <dd>
+            {{#if isEditing}}
+              {{textarea value=model.notes cols="70" rows="3"}}
+            {{else}}
+              {{model.notes}}
+            {{/if}}
+            {{display-errors a=model.errors.notes}}
+          </dd>
         </dl>
       </div>
+
       {{! ROW 5 }}
       <div class="grid-4">
         <dl class="span-1">
@@ -54,12 +101,20 @@
         </dl>
         <dl class="span-1"></dl>
       </div>
+
+      {{! ROW 6 }}
       {{#if (can "edit strain" model)}}
-        {{! ROW 6 }}
         <div class="grid-4">
           <div class="span-1">
             {{! Does nothing ATM }}
-            <a class="button-gray smaller">Edit Strain</a>
+            <a {{bind-attr class=":smaller isEditing:button-red:button-gray"}} {{action 'editStrain'}}>
+              {{#if isEditing}}Cancel{{else}}Edit{{/if}}
+            </a>
+            {{#if isEditing}}
+              <a class="button-green smaller" {{action 'saveStrain'}}>
+                Save
+              </a>
+            {{/if}}
           </div>
         </div>
       {{/if}}

server/mocks/strains.js

@@ -100,9 +100,17 @@ module.exports = function(app) {
     var strains = STRAINS.filter(function(s) {
       return s.id == req.params.id;
     });
-    res.send({
-      'strain': strains[0]
-    });
+    if (strains.length === 0) {
+      res.status(422).send({
+        'errors':{
+          "strainName": ["error1"],
+          "typeStrain": ["error2", "error3"],
+          "isolatedFrom": ["error4"]
+        }
+      }).end();
+    } else {
+      res.status(204).end();
+    }
   });
 
   strainsRouter.delete('/:id', function(req, res) {