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>

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

@@ -1,32 +1,9 @@
 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 characteristic = this.get('model');
 
-      if (characteristic.get('hasDirtyAttributes')) {
+export default Controller.extend(SaveModel, {
-        characteristic.save().then((characteristic) => {
+  // Required for SaveModel mixin
-          this.transitionToRoute('protected.characteristics.show', characteristic);
+  fallbackRoute: 'protected.characteristics.show',
-        }, () => {
-          ajaxError(characteristic.get('errors'), this.get('flashMessages'));
-        });
-      } else {
-        characteristic.destroyRecord().then(() => {
-          this.transitionToRoute('protected.characteristics.show', characteristic);
-        });
-      }
-    },
-
-    cancel: function() {
-      let characteristic = this.get('model');
-
-      characteristic.get('errors').clear();
-      characteristic.rollbackAttributes();
-
-      this.transitionToRoute('protected.characteristics.show', characteristic);
-    },
-
-  },
 });

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

@@ -1,25 +1,15 @@
 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.characteristics.index',
-      if (user.get('isReader')) {
+  fallbackRouteAfter: 'protected.characteristics.show',
-        this.transitionTo('protected.characteristics.index');
-      }
-    });
-  },
 
   model: function(params) {
-    return this.store.findRecord('characteristic', params.characteristic_id, { reload: true });
+    return this.store.findRecord('characteristic', params.characteristic_id);
-  },
-
-  afterModel: function(model) {
-    if (!model.get('canEdit')) {
-      this.transitionTo('characteristics.show', model.get('id'));
-    }
   },
 
 });

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

@@ -1,6 +1,6 @@
 {{
   protected/characteristics/characteristic-form
   characteristic=model
-  save="save"
+  on-save=(action "save")
-  cancel="cancel"
+  on-cancel=(action "cancel")
 }}