Species edit refactor

app/pods/application/adapter.js

@@ -5,10 +5,13 @@ export default DS.RESTAdapter.extend({
   namespace: function() {
     return 'api/' + this.get('globals.genus');
   }.property(),
+
   host: function() {
     return this.get('globals.apiURL');
   }.property(),
+
   coalesceFindRequests: true,
+
   ajaxError: function(jqXHR) {
     // http://stackoverflow.com/a/24027443
     var error = this._super(jqXHR);
@@ -25,5 +28,5 @@ export default DS.RESTAdapter.extend({
     } else {
       return error;
     }
-  }
+  },
 });

app/pods/components/forms/species-form/component.js

@@ -0,0 +1,12 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  actions: {
+    save: function() {
+      this.sendAction('save');
+    },
+    cancel: function() {
+      this.sendAction('cancel');
+    },
+  }
+});

app/pods/components/forms/species-form/template.hbs

@@ -0,0 +1,42 @@
+<form class="grid-form">
+  <fieldset>
+    <legend><em>{{species.speciesName}}</em></legend>
+    <div data-row-span="2">
+      <div data-field-span="1">
+        <label>Species Name</label>
+        {{input value=species.speciesName}}
+      </div>
+      <div data-field-span="1">
+        <label>Type Species?</label>
+        {{input type="checkbox" checked=species.typeSpecies}} {{if species.typeSpecies 'Yes' 'No'}}
+      </div>
+    </div>
+    <div data-row-span="2">
+      <div data-field-span="2">
+        <label>Strains</label>
+        {{#each species.strains as |strain index|}}
+          {{if index ","}}
+          {{#link-to 'strains.show' strain.id}}
+            {{{strain.strainNameMU}}}
+          {{/link-to}}
+        {{/each}}
+        {{add-button label="Add Strain" link="strains.new"}}
+      </div>
+    </div>
+    <div data-row-span="2">
+      <div data-field-span="2">
+        <label>Etymology</label>
+        {{textarea value=species.etymology cols="70" rows="5"}}
+      </div>
+    </div>
+  </fieldset>
+</form>
+<br>
+{{#if species.isDirty}}
+  <a class="button-green smaller" {{action 'save'}}>
+    Save
+  </a>
+{{/if}}
+<a class="button-red smaller" {{action 'cancel'}}>
+  Cancel
+</a>

app/pods/components/species-details/component.js

@@ -1,20 +0,0 @@
-import Ember from 'ember';
-import userCanEdit from '../../../utils/user-can-edit';
-
-export default Ember.Component.extend({
-  classNames: ['grid-1'],
-  isEditing: false,
-
-  canEdit: function() {
-    return userCanEdit(this.get('session.currentUser'), this.get('species.createdBy'));
-  }.property('session.currentUser', 'species.createdBy').readOnly(),
-
-  actions: {
-    save: function() {
-      this.sendAction('save');
-    },
-    cancel: function() {
-      this.sendAction('cancel');
-    },
-  }
-});

app/pods/components/species-details/template.hbs

@@ -1,89 +0,0 @@
-<div class="span-1">
-  <fieldset class="flakes-information-box {{if isEditing 'is-editing'}}">
-    <legend>
-      Species
-        {{#if isEditing}}
-          {{input value=species.speciesName}}
-        {{else}}
-          <em>{{species.speciesName}}</em>
-        {{/if}}
-        {{display-errors a=species.errors.speciesName}}
-    </legend>
-
-    {{! ROW 1 }}
-    <div class="grid-4">
-      <dl class="span-2">
-        <dt>Strains</dt>
-        <dd>
-          {{#each species.strains as |strain index|}}
-            {{if index ","}}
-            {{#link-to 'strains.show' strain.id}}
-              {{{strain.strainNameMU}}}
-            {{/link-to}}
-          {{/each}}
-          {{#unless species.isNew}}
-            {{add-button label="Add Strain" link="strains.new"}}
-          {{/unless}}
-        </dd>
-      </dl>
-      <dl class="span-2">
-        <dt>Type Species?</dt>
-        <dd>
-          {{#if isEditing}}
-            {{input type="checkbox" checked=species.typeSpecies}}
-          {{/if}}
-          {{if species.typeSpecies 'Yes' 'No'}}
-          {{display-errors a=species.errors.typeSpecies}}
-        </dd>
-      </dl>
-    </div>
-
-    {{! ROW 2 }}
-    <div class="grid-4">
-      <dl class="span-4">
-        <dt>Etymology</dt>
-        <dd>
-          {{#if isEditing}}
-            {{textarea value=species.etymology cols="70" rows="3"}}
-          {{else}}
-            {{species.etymology}}
-          {{/if}}
-          {{display-errors a=species.errors.etymology}}
-        </dd>
-      </dl>
-    </div>
-
-    {{! ROW 3 }}
-    <div class="grid-4">
-      <dl class="span-1">
-        <dt>Record Created</dt>
-        <dd>{{null-time species.createdAt 'LL'}}</dd>
-      </dl>
-      <dl class="span-1">
-        <dt>Record Updated</dt>
-        <dd>{{null-time species.updatedAt 'LL'}}</dd>
-      </dl>
-      <dl class="span-1">
-        <dt>Record Deleted</dt>
-        <dd>{{null-time species.deletedAt 'LL'}}</dd>
-      </dl>
-      <dl class="span-1"></dl>
-    </div>
-
-    {{! ROW 4 }}
-    {{#if canEdit}}
-      <div class="grid-4">
-        <div class="span-1">
-          <a class="smaller {{if isEditing 'button-red' 'button-gray'}}" {{action 'cancel'}}>
-            {{#if isEditing}}Cancel{{else}}Edit{{/if}}
-          </a>
-          {{#if isEditing}}
-            <a class="button-green smaller" {{action 'save'}}>
-              Save
-            </a>
-          {{/if}}
-        </div>
-      </div>
-    {{/if}}
-  </fieldset>
-</div>

app/pods/species/edit/controller.js

@@ -0,0 +1,29 @@
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+  actions: {
+    save: function() {
+      let species = this.get('model');
+
+      if (species.get('isDirty')) {
+        species.save().then((species) => {
+          this.transitionToRoute('species.show', species.get('id'));
+        }, (err) => {
+          this.get('flashMessages').error(err.responseJSON.error);
+        });
+      } else {
+        this.transitionToRoute('species.show', species.get('id'));
+      }
+    },
+
+    cancel: function() {
+      let species = this.get('model');
+
+      species.get('errors').clear();
+      species.rollback();
+
+      this.transitionToRoute('species.show', species.get('id'));
+    },
+
+  },
+});

app/pods/species/edit/route.js

@@ -0,0 +1,4 @@
+import Ember from 'ember';
+import AuthenticatedRouteMixin from 'simple-auth/mixins/authenticated-route-mixin';
+
+export default Ember.Route.extend(AuthenticatedRouteMixin, {});

app/pods/species/edit/template.hbs

@@ -0,0 +1,6 @@
+{{
+  forms/species-form
+  species=model
+  save="save"
+  cancel="cancel"
+}}

app/pods/species/index/route.js

@@ -5,10 +5,11 @@ export default Ember.Route.extend(AuthenticatedRouteMixin, {
   model: function() {
     return Ember.RSVP.hash({
       species: this.store.findAll('species'),
+      strains: this.store.findAll('strain'),
     });
   },
 
-  setupController: function(controller, model) {
+  setupController: function(controller, models) {
-    controller.setProperties(model);
+    controller.setProperties(models);
   },
 });

app/pods/species/index/template.hbs

@@ -1,5 +1,5 @@
 <h2>{{genus-name}} Species</h2>
-<h3>Total species: {{species.length}}</h3>
+<h3>Total species: {{model.length}}</h3>
 
 {{add-button label="Add Species" link="species.new"}}
 
@@ -11,17 +11,17 @@
     </tr>
   </thead>
   <tbody>
-    {{#each sortedSpecies as |row|}}
+    {{#each sortedSpecies as |species|}}
       <tr>
         <td>
           <em>
-            {{#link-to 'species.show' row}}
+            {{#link-to 'species.show' species}}
-              {{row.speciesName}}
+              {{species.speciesName}}
             {{/link-to}}
           </em>
         </td>
         <td>
-          {{#each row.strains as |strain index|}}
+          {{#each species.strains as |strain index|}}
             {{if index ","}}
             {{#link-to 'strains.show' strain.id}}
               {{{strain.strainNameMU}}}

app/pods/species/new/controller.js

@@ -1,21 +1,30 @@
 import Ember from 'ember';
 
 export default Ember.Controller.extend({
-  isEditing: true,
   actions: {
     save: function() {
-      var species = this.get('model');
+      let species = this.get('model');
+
       if (species.get('isDirty')) {
-        species.save();
+        species.save().then((species) => {
+          this.transitionToRoute('species.show', species.get('id'));
+        }, (err) => {
+          this.get('flashMessages').error(err.responseJSON.error);
+        });
+      } else {
+        this.transitionToRoute('species.index');
       }
-      this.transitionToRoute('species.index');
     },
+
     cancel: function() {
-      var species = this.get('model');
+      let species = this.get('model');
+
       if (species.get('isNew')) {
         species.deleteRecord();
       }
+
       this.transitionToRoute('species.index');
-    }
+    },
-  }
+
+  },
 });

app/pods/species/new/route.js

@@ -5,9 +5,5 @@ export default Ember.Route.extend(AuthenticatedRouteMixin, {
   model: function() {
     return this.store.createRecord('species');
   },
-  actions: {
+
-    cancelSpecies: function() {
-      this.transitionTo('species.index');
-    }
-  }
 });

app/pods/species/new/template.hbs

@@ -1,7 +1,6 @@
 {{
-  species-details
+  forms/species-form
   species=model
-  isEditing=true
   save="save"
   cancel="cancel"
 }}

app/pods/species/show/controller.js

@@ -1,22 +0,0 @@
-import Ember from 'ember';
-
-export default Ember.Controller.extend({
-  isEditing: false,
-  actions: {
-    save: function() {
-      var species = this.get('model');
-      if (species.get('isDirty')) {
-        species.save();
-      }
-      this.toggleProperty('isEditing');
-    },
-    cancel: function() {
-      if (this.get('isEditing')) {
-        var species = this.get('model');
-        species.get('errors').clear();
-        species.rollback();
-      }
-      this.toggleProperty('isEditing');
-    }
-  }
-});

app/pods/species/show/template.hbs

@@ -1,7 +1,57 @@
-{{
+<div class="grid-1">
-  species-details
+  <div class="span-1">
-  species=model
+    <fieldset class="flakes-information-box {{if isEditing 'is-editing'}}">
-  isEditing=isEditing
+      <legend>
-  save="save"
+        Species <em>{{model.speciesName}}</em>
-  cancel="cancel"
+      </legend>
-}}
+
+      {{! ROW 1 }}
+      <div class="grid-4">
+        <dl class="span-2">
+          <dt>Strains</dt>
+          <dd>
+            {{#each model.strains as |strain index|}}
+              {{if index ","}}
+              {{#link-to 'strains.show' strain.id}}
+                {{{strain.strainNameMU}}}
+              {{/link-to}}
+            {{/each}}
+          </dd>
+        </dl>
+        <dl class="span-2">
+          <dt>Type Species?</dt>
+          <dd>
+            {{if model.typeSpecies 'Yes' 'No'}}
+          </dd>
+        </dl>
+      </div>
+
+      {{! ROW 2 }}
+      <div class="grid-4">
+        <dl class="span-4">
+          <dt>Etymology</dt>
+          <dd>
+            {{model.etymology}}
+          </dd>
+        </dl>
+      </div>
+
+      {{! ROW 3 }}
+      <div class="grid-4">
+        <dl class="span-1">
+          <dt>Record Created</dt>
+          <dd>{{null-time model.createdAt 'LL'}}</dd>
+        </dl>
+        <dl class="span-1">
+          <dt>Record Updated</dt>
+          <dd>{{null-time model.updatedAt 'LL'}}</dd>
+        </dl>
+        <dl class="span-1">
+          <dt>Record Deleted</dt>
+          <dd>{{null-time model.deletedAt 'LL'}}</dd>
+        </dl>
+        <dl class="span-1"></dl>
+      </div>
+    </fieldset>
+  </div>
+</div>

app/router.js

@@ -15,6 +15,7 @@ Router.map(function() {
   this.route('species', function() {
     this.route('new');
     this.route('show', { path: ':species_id' });
+    this.route('edit', { path: ':species_id/edit' });
   });
   this.route('strains', function() {
     this.route('new');