Refactor characteristics/edit

app/pods/protected/characteristics/characteristic-form/component.js

@@ -1,13 +1,60 @@
 import Ember from 'ember';
+import SetupMetaData from '../../../../mixins/setup-metadata';
+
+const { Component } = Ember;
+
+export default Component.extend(SetupMetaData, {
+  // Read-only attributes
+  characteristic: null,
+  isDirty: false,
+
+  // Actions
+  "on-save": null,
+  "on-cancel": null,
+  "on-update": null,
+
+  // Property mapping
+  propertiesList: ['characteristicName', 'characteristicTypeName', 'sortOrder'],
+  characteristicName: null,
+  characteristicTypeName: null,
+  sortOrder: null,
+
+  resetOnInit: Ember.on('init', function() {
+    this.get('propertiesList').forEach((field) => {
+      const valueInCharacteristic = this.get('characteristic').get(field);
+      this.set(field, valueInCharacteristic);
+    });
+  }),
+
+  updateField: function(property, value) {
+    this.set(property, value);
+    // Manually compare against passed in value
+    if (this.get('characteristic').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']();
     },
-  }
+
+    characteristicNameDidChange: function(value) {
+      this.updateField('characteristicName', value);
+    },
+
+    characteristicTypeNameDidChange: function(value) {
+      this.updateField('characteristicTypeName', value);
+    },
+
+    sortOrderDidChange: function(value) {
+      this.updateField('sortOrder', value);
+    },
+  },
 });

app/pods/protected/characteristics/characteristic-form/template.hbs

@@ -1,20 +1,20 @@
 <form class="grid-form" {{action 'save' on='submit'}}>
   <fieldset>
-    <legend><em>{{characteristic.characteristicName}}</em></legend>
+    <legend><em>{{characteristicName}}</em></legend>
     <div data-row-span="1">
       <div data-field-span="1">
         <label>Characteristic Name</label>
-        {{input value=characteristic.characteristicName class="characteristic-name"}}
+        {{one-way-input type="text" class="characteristic-name" value=characteristicName update=(action "characteristicNameDidChange")}}
       </div>
     </div>
     <div data-row-span="2">
       <div data-field-span="1">
         <label>Characteristic Type</label>
-        {{input value=characteristic.characteristicTypeName}}
+        {{one-way-input type="text" class="characteristic-type-name" value=characteristicTypeName update=(action "characteristicTypeNameDidChange")}}
       </div>
       <div data-field-span="1">
         <label>Sort Order</label>
-        {{input value=characteristic.sortOrder}}
+        {{one-way-input type="text" class="sort-order" value=sortOrder update=(action "sortOrderDidChange")}}
       </div>
     </div>
   </fieldset>
@@ -22,7 +22,7 @@
   <a class="button-red smaller" {{action 'cancel'}}>
     Cancel
   </a>
-  {{#if characteristic.hasDirtyAttributes}}
+  {{#if isDirty}}
     <button type="submit" class="button-green smaller save-characteristic">
       Save
     </button>