Species edit refactor (wip)

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);
@@ -22,8 +25,13 @@ export default DS.RESTAdapter.extend({
         });
       }
       return new DS.InvalidError(errors);
+    } else if (jqXHR && jqXHR.status === 500) {
+      var response = Ember.$.parseJSON(jqXHR.responseText);
+      if (response.error !== undefined) {
+        return new DS.InvalidError(response.error);
+      }
     } else {
       return error;
     }
-  }
+  },
 });

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,18 @@
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+  actions: {
+    save: function() {
+      let species = this.get('species');
+      if (species.get('isDirty')) {
+        species.save().then((species) => {
+          this.transitionToRoute('species.show', species.get('id'));
+        }, (err) => {
+          this.get('flashMessages').error(err.message);
+        });
+      } else {
+        this.transitionToRoute('species.show', species.get('id'));
+      }
+    },
+  }
+});

app/pods/species/edit/route.js

@@ -0,0 +1,14 @@
+import Ember from 'ember';
+import AuthenticatedRouteMixin from 'simple-auth/mixins/authenticated-route-mixin';
+
+export default Ember.Route.extend(AuthenticatedRouteMixin, {
+  model: function(params) {
+    return Ember.RSVP.hash({
+      species: this.store.find('species', params.species_id),
+    });
+  },
+
+  setupController: function(controller, model) {
+    controller.setProperties(model);
+  },
+});

app/pods/species/edit/template.hbs

@@ -0,0 +1,37 @@
+<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>
+<a class="button-green smaller" {{action 'save'}}>
+  Save
+</a>

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

@@ -11,17 +11,18 @@
     </tr>
   </thead>
   <tbody>
-    {{#each sortedSpecies as |row|}}
+    {{#each sortedSpecies as |species|}}
       <tr>
         <td>
           <em>
-            {{#link-to 'species.show' row}}
+            {{!-- use species.id to call show model hook --}}
-              {{row.speciesName}}
+            {{#link-to 'species.show' species.id}}
+              {{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/show/route.js

@@ -1,4 +1,14 @@
 import Ember from 'ember';
 import AuthenticatedRouteMixin from 'simple-auth/mixins/authenticated-route-mixin';
 
-export default Ember.Route.extend(AuthenticatedRouteMixin, {});
+export default Ember.Route.extend(AuthenticatedRouteMixin, {
+  model: function(params) {
+    return Ember.RSVP.hash({
+      species: this.store.find('species', params.species_id),
+    });
+  },
+
+  setupController: function(controller, model) {
+    controller.setProperties(model);
+  },
+});

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>{{species.speciesName}}</em>
-  cancel="cancel"
+      </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}}
+          </dd>
+        </dl>
+        <dl class="span-2">
+          <dt>Type Species?</dt>
+          <dd>
+            {{if species.typeSpecies 'Yes' 'No'}}
+          </dd>
+        </dl>
+      </div>
+
+      {{! ROW 2 }}
+      <div class="grid-4">
+        <dl class="span-4">
+          <dt>Etymology</dt>
+          <dd>
+            {{species.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>
+    </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');