Refactor strain form and edit strain

app/pods/protected/strains/edit/controller.js

@@ -1,32 +1,10 @@
 import Ember from 'ember';
-import ajaxError from '../../../../utils/ajax-error';
+import SaveModel from '../../../../mixins/save-model';
 
-export default Ember.Controller.extend({
+const { Controller } = Ember;
-  actions: {
-    save: function() {
-      let strain = this.get('strain');
 
-      if (strain.get('hasDirtyAttributes')) {
+export default Controller.extend(SaveModel, {
-        strain.save().then((strain) => {
+  // Required for SaveModel mixin
-          this.transitionToRoute('protected.strains.show', strain);
+  fallbackRouteSave: 'protected.strains.show',
-        }, () => {
+  fallbackRouteCancel: 'protected.strains.show',
-          ajaxError(strain.get('errors'), this.get('flashMessages'));
-        });
-      } else {
-        strain.destroyRecord().then(() => {
-          this.transitionToRoute('protected.strains.show', strain);
-        });
-      }
-    },
-
-    cancel: function() {
-      let strain = this.get('strain');
-
-      strain.get('errors').clear();
-      strain.rollbackAttributes();
-
-      this.transitionToRoute('protected.strains.show', strain);
-    },
-
-  },
 });

app/pods/protected/strains/edit/route.js

@@ -1,35 +1,42 @@
 import Ember from 'ember';
+import ElevatedAccess from '../../../../mixins/elevated-access';
 
-export default Ember.Route.extend({
+const { Route } = Ember;
-  currentUser: Ember.inject.service('session-account'),
 
-  beforeModel: function(transition) {
+export default Route.extend(ElevatedAccess, {
-    this._super(transition);
+  // Required for ElevatedAccess mixin
-    this.get('currentUser.account').then((user) => {
+  fallbackRouteBefore: 'protected.strains.index',
-      if (user.get('isReader')) {
+  fallbackRouteAfter: 'protected.strains.show',
-        this.transitionTo('protected.strains.index');
-      }
-    });
-  },
 
   model: function(params) {
     return Ember.RSVP.hash({
-      strain: this.store.find('strain', params.strain_id),
+      strain: this.store.findRecord('strain', params.strain_id),
       species: this.store.findAll('species'), // Need for dropdown
     });
   },
 
+  // Overriding afterModel because of RSVP hash
   afterModel: function(models) {
-    if (!models.strain.get('canEdit')) {
+    if (!models.strain.get('isNew') && !models.strain.get('canEdit')) {
-      this.transitionTo('strains.show', models.strain.get('id'));
+      this.transitionTo(this.get('fallbackRouteAfter'), models.strain.get('id'));
     }
   },
 
+  // Setting up controller because of RSVP hash
   setupController: function(controller, models) {
-    controller.setProperties(models);
+    controller.set('model', models.strain);
-    this.get('currentUser.account').then((user) => {
+    controller.set('speciesList', models.species);
-      controller.set('metaData', user.get('metaData'));
-    });
   },
 
+  actions: {
+    // Overriding willTransition because of RSVP hash
+    willTransition: function(/*transition*/) {
+      const controller = this.get('controller');
+      const model = controller.get('model');
+
+      if (model.get('isNew')) {
+        model.destroyRecord();
+      }
+    },
+  },
 });

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

@@ -1,8 +1,8 @@
 {{
   protected/strains/strain-form
-  strain=strain
+  strain=model
-  species=species
+  speciesList=speciesList
   canAdd=metaData.canAdd
-  save="save"
+  on-save=(action "save")
-  cancel="cancel"
+  on-cancel=(action "cancel")
 }}

app/pods/protected/strains/strain-form/component.js

@@ -1,21 +1,89 @@
 import Ember from 'ember';
+import SetupMetaData from '../../../../mixins/setup-metadata';
+
+const { Component } = Ember;
+
+export default Component.extend(SetupMetaData, {
+  // Read-only attributes
+  strain: null,
+  isNew: null,
+  isDirty: false,
+  speciesList: null,
+
+  // Actions
+  "on-save": null,
+  "on-cancel": null,
+  "on-update": null,
+
+  // Property mapping
+  propertiesList: ['strainName', 'typeStrain', 'species', 'isolatedFrom', 'accessionNumbers', 'genbank', 'wholeGenomeSequence', 'notes'],
+  strainName: null,
+  typeStrain: null,
+  species: null,
+  isolatedFrom: null,
+  accessionNumbers: null,
+  genbank: null,
+  wholeGenomeSequence: null,
+  notes: null,
+
+  resetOnInit: Ember.on('init', function() {
+    this.get('propertiesList').forEach((field) => {
+      const valueInStrain = this.get('strain').get(field);
+      this.set(field, valueInStrain);
+    });
+    // Read-only attributes
+    this.set('isNew', this.get('strain.isNew'));
+  }),
+
+  updateField: function(property, value) {
+    this.set(property, value);
+    // Manually compare against passed in value
+    if (this.get('strain').get(property) !== value) {
+      this.set('isDirty', true);
+    } else {
+      this.set('isDirty', false);
+    }
+  },
 
-export default Ember.Component.extend({
   actions: {
     save: function() {
-      this.sendAction('save');
+      return this.attrs['on-save'](this.getProperties(this.get('propertiesList')));
     },
 
     cancel: function() {
-      this.sendAction('cancel');
+      return this.attrs['on-cancel']();
+    },
+
+    strainNameDidChange: function(value) {
+      this.updateField('strainName', value);
+    },
+
+    typeStrainDidChange: function() {
+      this.updateField('typeStrain', !this.get('typeStrain'));
+    },
+
+    speciesDidChange: function(value) {
+      this.updateField('species', value);
     },
 
     isolatedFromDidChange: function(value) {
-      this.set('strain.isolatedFrom', value);
+      this.updateField('isolatedFrom', value);
+    },
+
+    accessionNumbersNameDidChange: function(value) {
+      this.updateField('accessionNumbers', value);
+    },
+
+    genbankDidChange: function(value) {
+      this.updateField('genbank', value);
+    },
+
+    wholeGenomeSequenceDidChange: function(value) {
+      this.updateField('wholeGenomeSequence', value);
     },
 
     notesDidChange: function(value) {
-      this.set('strain.notes', value);
+      this.updateField('strain.notes', value);
     },
   },
 });

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

@@ -1,51 +1,51 @@
 <form class="grid-form" {{action 'save' on='submit'}}>
   <fieldset>
-    <legend><em>{{strain.strainName}}</em></legend>
+    <legend><em>{{strainName}}</em></legend>
     <div data-row-span="2">
       <div data-field-span="1">
         <label>Strain Name</label>
-        {{input value=strain.strainName class="strain-name"}}
+        {{one-way-input type="text" class="strain-name" value=strainName update=(action "strainNameDidChange")}}
       </div>
       <div data-field-span="1">
         <label>Type Strain?</label>
-        {{input type="checkbox" checked=strain.typeStrain}} {{if strain.typeStrain 'Yes' 'No'}}
+        <input type="checkbox" checked={{typeStrain}} value="{{typeStrain}}" onchange={{action "typeStrainDidChange"}}>
+        {{if typeStrain 'Yes' 'No'}}
       </div>
     </div>
     <div data-row-span="2">
       <div data-field-span="2">
         <label>Species</label>
-          {{
+        <select onchange={{action "speciesDidChange" value="target.value"}}>
-            select-2
+          {{#each speciesList as |speciesChoice|}}
-            content=species
+            <option value={{speciesChoice}} selected={{equal species speciesChoice}}>{{speciesChoice.speciesName}}</option>
-            optionLabelPath="speciesName"
+          {{/each}}
-            value=strain.species
+        </select>
-          }}
       </div>
     </div>
     <div data-row-span="2">
       <div data-field-span="2">
         <label>Isolated From</label>
-        {{text-editor value=strain.isolatedFrom update=(action "isolatedFromDidChange")}}
+        {{text-editor value=isolatedFrom update=(action "isolatedFromDidChange")}}
       </div>
     </div>
     <div data-row-span="3">
       <div data-field-span="1">
         <label>Accession Numbers</label>
-        {{input value=strain.accessionNumbers}}
+        {{one-way-input type="text" class="accession-numbers" value=accessionNumbers update=(action "accessionNumbersNameDidChange")}}
       </div>
       <div data-field-span="1">
         <label>GenBank</label>
-        {{input value=strain.genbank}}
+        {{one-way-input type="text" class="genbank" value=genbank update=(action "genbankDidChange")}}
       </div>
       <div data-field-span="1">
         <label>Whole Genome Sequence</label>
-        {{input value=strain.wholeGenomeSequence}}
+        {{one-way-input type="text" class="whole-genome-sequenc" value=wholeGenomeSequence update=(action "wholeGenomeSequenceDidChange")}}
       </div>
     </div>
     <div data-row-span="2">
       <div data-field-span="2">
         <label>Notes</label>
-        {{text-editor value=strain.notes update=(action "notesDidChange")}}
+        {{text-editor value=notes update=(action "notesDidChange")}}
       </div>
     </div>
   </fieldset>
@@ -61,7 +61,7 @@
   <a class="button-red smaller" {{action 'cancel'}}>
     Cancel
   </a>
-  {{#if strain.hasDirtyAttributes}}
+  {{#if isDirty}}
     <button type="submit" class="button-green smaller save-strain">
       Save
     </button>