Wrapping up form cleanup

app/pods/protected/species/species-form/component.js

@@ -5,23 +5,30 @@ const { Component, inject: { service } } = Ember;
 export default Component.extend({
   currentUser: service('session-account'),
 
+  // Read-only attributes
   species: null,
+  isNew: null,
+  isDirty: false,
+
+  // Actions
   "on-save": null,
   "on-cancel": null,
   "on-update": null,
 
+  // Property mapping
+  propertiesList: ['speciesName', 'typeSpecies', 'strains', 'etymology'],
   speciesName: null,
   typeSpecies: null,
-
-  updateField: function(property, value) {
-    this.set(property, value);
-  },
+  strains: null,
+  etymology: null,
 
   resetOnInit: Ember.on('init', function() {
-    ['speciesName', 'typeSpecies'].forEach((field) => {
+    this.get('propertiesList').forEach((field) => {
       const valueInSpecies = this.get('species').get(field);
       this.set(field, valueInSpecies);
     });
+    // Read-only attributes
+    this.set('isNew', this.get('species.isNew'));
   }),
 
   setupMetaDataOnInit: Ember.on('init', function() {
@@ -30,21 +37,35 @@ export default Component.extend({
     });
   }),
 
+  updateField: function(property, value) {
+    this.set(property, value);
+    // Manually compare against passed in value
+    if (this.get('species').get(property) !== value) {
+      this.set('isDirty', true);
+    } else {
+      this.set('isDirty', false);
+    }
+  },
+
   actions: {
     save: function() {
-      return this.attrs['on-save'](this.getProperties(['speciesName', 'typeSpecies']));
+      return this.attrs['on-save'](this.getProperties(this.get('propertiesList')));
     },
 
     cancel: function() {
       return this.attrs['on-cancel']();
     },
 
-    nameDidChange: function(value) {
+    speciesNameDidChange: function(value) {
       this.updateField('speciesName', value);
     },
 
     typeSpeciesDidChange: function() {
-      this.toggleProperty('typeSpecies');
+      this.updateField('typeSpecies', !this.get('typeSpecies'));
+    },
+
+    etymologyDidChange: function(value) {
+      this.updateField('etymology', value);
     },
   },
 });

app/pods/protected/species/species-form/template.hbs

@@ -4,7 +4,7 @@
     <div data-row-span="2">
       <div data-field-span="1">
         <label>Species Name</label>
-        {{one-way-input type="text" class="species-name" value=speciesName update=(action "nameDidChange")}}
+        {{one-way-input type="text" class="species-name" value=speciesName update=(action "speciesNameDidChange")}}
       </div>
       <div data-field-span="1">
         <label>Type Species?</label>
@@ -12,11 +12,11 @@
         {{if typeSpecies 'Yes' 'No'}}
       </div>
     </div>
-    {{#unless species.isNew}}
+    {{#unless isNew}}
     <div data-row-span="1">
       <div data-field-span="1">
         <label>Strains</label>
-        {{#each species.strains as |strain index|}}
+        {{#each strains as |strain index|}}
           {{if index ","}}
           {{#link-to 'protected.strains.show' strain.id}}
             {{{strain.strainNameMU}}}
@@ -30,7 +30,7 @@
     <div data-row-span="1">
       <div data-field-span="1">
         <label>Etymology</label>
-        {{text-editor value=species.etymology}}
+        {{text-editor value=etymology update=(action "etymologyDidChange")}}
       </div>
     </div>
   </fieldset>
@@ -38,7 +38,9 @@
   <a class="button-red smaller" {{action 'cancel'}}>
     Cancel
   </a>
-  <button type="submit" class="button-green smaller save-species">
-    Save
-  </button>
+  {{# if isDirty}}
+    <button type="submit" class="button-green smaller save-species">
+      Save
+    </button>
+  {{/if}}
 </form>