Refactored users/edit

app/pods/protected/users/user-form/component.js

@@ -1,15 +1,61 @@
 import Ember from 'ember';
+import SetupMetaData from '../../../../mixins/setup-metadata';
 
-export default Ember.Component.extend({
+const { Component } = Ember;
+
+export default Component.extend(SetupMetaData, {
+  // Read-only attributes
+  user: null,
+  isDirty: false,
   roles: Ember.String.w('A R W'),
 
+  // Actions
+  "on-save": null,
+  "on-cancel": null,
+  "on-update": null,
+
+  // Property mapping
+  propertiesList: ['name', 'email', 'role'],
+  name: null,
+  email: null,
+  role: null,
+
+  resetOnInit: Ember.on('init', function() {
+    this.get('propertiesList').forEach((field) => {
+      const valueInUser = this.get('user').get(field);
+      this.set(field, valueInUser);
+    });
+  }),
+
+  updateField: function(property, value) {
+    this.set(property, value);
+    // Manually compare against passed in value
+    if (this.get('user').get(property) !== value) {
+      this.set('isDirty', true);
+    } else {
+      this.set('isDirty', false);
+    }
+  },
+
   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']();
     },
-  }
+
+    nameDidChange: function(value) {
+      this.updateField('name', value);
+    },
+
+    emailDidChange: function(value) {
+      this.updateField('email', value);
+    },
+
+    roleDidChange: function(value) {
+      this.updateField('role', value);
+    },
+  },
 });

app/pods/protected/users/user-form/template.hbs

@@ -1,29 +1,29 @@
 <form class="grid-form" {{action 'save' on='submit'}}>
   <fieldset>
-    <legend><em>{{user.name}}</em></legend>
+    <legend><em>{{name}}</em></legend>
     <div data-row-span="1">
       <div data-field-span="1">
         <label>Name</label>
-        {{input value=user.name class="user-name"}}
+        {{one-way-input type="text" class="user-name" value=name update=(action "nameDidChange")}}
       </div>
     </div>
     <div data-row-span="1">
       <div data-field-span="1">
         <label>Email</label>
-        {{input value=user.email}}
+        {{one-way-input type="text" class="email" value=email update=(action "emailDidChange")}}
       </div>
     </div>
     <div data-row-span="1">
       <div data-field-span="1">
         <label>Role</label>
-        {{#if session.currentUser.isAdmin}}
-          <select onchange={{action (mut user.role) value="target.value"}}>
+        {{#if isAdmin}}
+          <select onchange={{action "roleDidChange" value="target.value"}}>
             {{#each roles as |roleChoice|}}
-              <option value={{roleChoice}} selected={{equal user.role roleChoice}}>{{roleChoice}}</option>
+              <option value={{roleChoice}} selected={{equal role roleChoice}}>{{roleChoice}}</option>
             {{/each}}
           </select>
         {{else}}
-          {{user.role}}
+          {{role}} {{!-- Not editable --}}
         {{/if}}
       </div>
     </div>
@@ -32,7 +32,7 @@
   <a class="button-red smaller" {{action 'cancel'}}>
     Cancel
   </a>
-  {{#if user.hasDirtyAttributes}}
+  {{#if isDirty}}
     <button type="submit" class="button-green smaller save-user">
       Save
     </button>