From 1dd0910ed1711e6025f580dd78550b865069badb Mon Sep 17 00:00:00 2001 From: Matthew Dillon Date: Fri, 6 Nov 2015 11:20:28 -0700 Subject: [PATCH] Refactored users/edit --- app/helpers/equal.js | 4 +- app/mirage/config.js | 2 +- app/mixins/save-model.js | 1 + app/mixins/setup-metadata.js | 2 + .../characteristics/edit/controller.js | 2 +- app/pods/protected/users/edit/controller.js | 42 +++------------ app/pods/protected/users/edit/route.js | 10 ++-- app/pods/protected/users/edit/template.hbs | 5 +- .../users/show/user-card/component.js | 6 ++- .../users/show/user-card/template.hbs | 2 +- .../protected/users/user-form/component.js | 54 +++++++++++++++++-- .../protected/users/user-form/template.hbs | 16 +++--- app/services/session-account.js | 11 ++-- 13 files changed, 92 insertions(+), 65 deletions(-) diff --git a/app/helpers/equal.js b/app/helpers/equal.js index db3e867..a003400 100644 --- a/app/helpers/equal.js +++ b/app/helpers/equal.js @@ -1,7 +1,9 @@ import Ember from 'ember'; +const { Helper: { helper } } = Ember; + export function equalHelper(params) { return params[0] === params[1]; } -export default Ember.HTMLBars.makeBoundHelper(equalHelper); +export default helper(equalHelper); diff --git a/app/mirage/config.js b/app/mirage/config.js index c03b469..3982c0c 100644 --- a/app/mirage/config.js +++ b/app/mirage/config.js @@ -2,7 +2,7 @@ export default function() { // Don't use mirage for development (for now) this.urlPrefix = 'http://127.0.0.1:8901'; this.namespace = '/api'; - this.passthrough(); + this.passthrough('http://localhost:4200/**', 'http://127.0.0.1:8901/**'); } export function testConfig() { diff --git a/app/mixins/save-model.js b/app/mixins/save-model.js index 53efda9..8d3b233 100644 --- a/app/mixins/save-model.js +++ b/app/mixins/save-model.js @@ -16,6 +16,7 @@ export default Mixin.create({ if (model.get('hasDirtyAttributes')) { model.save().then((model) => { + this.get('flashMessages').clearMessages(); this.transitionToRoute(fallbackRoute, model); }, () => { ajaxError(model.get('errors'), this.get('flashMessages')); diff --git a/app/mixins/setup-metadata.js b/app/mixins/setup-metadata.js index 183f93f..bdfd886 100644 --- a/app/mixins/setup-metadata.js +++ b/app/mixins/setup-metadata.js @@ -5,10 +5,12 @@ const { Mixin, inject: { service }} = Ember; export default Mixin.create({ currentUser: service('session-account'), metaData: null, + isAdmin: null, setupMetaDataOnInit: Ember.on('init', function() { this.get('currentUser.account').then((user) => { this.set('metaData', user.get('metaData')); + this.set('isAdmin', user.get('isAdmin')); }); }), }); diff --git a/app/pods/protected/characteristics/edit/controller.js b/app/pods/protected/characteristics/edit/controller.js index 0b83924..aff45e1 100644 --- a/app/pods/protected/characteristics/edit/controller.js +++ b/app/pods/protected/characteristics/edit/controller.js @@ -6,5 +6,5 @@ const { Controller } = Ember; export default Controller.extend(SaveModel, { // Required for SaveModel mixin fallbackRouteSave: 'protected.characteristics.show', - fallbackRouteCancel: 'protected.characteristics.index', + fallbackRouteCancel: 'protected.characteristics.show', }); diff --git a/app/pods/protected/users/edit/controller.js b/app/pods/protected/users/edit/controller.js index 955c328..283631c 100644 --- a/app/pods/protected/users/edit/controller.js +++ b/app/pods/protected/users/edit/controller.js @@ -1,40 +1,10 @@ import Ember from 'ember'; -import ajaxError from '../../../../utils/ajax-error'; +import SaveModel from '../../../../mixins/save-model'; -export default Ember.Controller.extend({ - actions: { - save: function() { - let user = this.get('model'); +const { Controller } = Ember; - if (user.get('hasDirtyAttributes')) { - let attrs = user.changedAttributes(), roleChanged = false; - if (attrs.role) { - roleChanged = true; - } - user.save().then((user) => { - this.get('flashMessages').clearMessages(); - if (roleChanged) { - // Need to clear the store so that canEdit and canAdd - // attributes reflect the new role. - this.get('store').unloadAll(); - } - this.transitionToRoute('protected.users.show', user); - }, () => { - ajaxError(user.get('errors'), this.get('flashMessages')); - }); - } else { - this.transitionToRoute('protected.users.show', user); - } - }, - - cancel: function() { - let user = this.get('model'); - - user.get('errors').clear(); - user.rollbackAttributes(); - - this.transitionToRoute('protected.users.show', user); - }, - - }, +export default Controller.extend(SaveModel, { + // Required for SaveModel mixin + fallbackRouteSave: 'protected.users.show', + fallbackRouteCancel: 'protected.users.show', }); diff --git a/app/pods/protected/users/edit/route.js b/app/pods/protected/users/edit/route.js index b95bdb2..c91288e 100644 --- a/app/pods/protected/users/edit/route.js +++ b/app/pods/protected/users/edit/route.js @@ -1,8 +1,12 @@ import Ember from 'ember'; -export default Ember.Route.extend({ - currentUser: Ember.inject.service('session-account'), +const { Route, inject: { service } } = Ember; +export default Route.extend({ + currentUser: service('session-account'), + + // Not using ElevatedAccess Mixin because the rules for viewing user accounts + // is slightly different. beforeModel: function(transition) { this._super(transition); @@ -16,7 +20,7 @@ export default Ember.Route.extend({ }, model: function(params) { - return this.store.findRecord('user', params.user_id, { reload: true }); + return this.store.findRecord('user', params.user_id); }, }); diff --git a/app/pods/protected/users/edit/template.hbs b/app/pods/protected/users/edit/template.hbs index e53c6e8..60cbe0d 100644 --- a/app/pods/protected/users/edit/template.hbs +++ b/app/pods/protected/users/edit/template.hbs @@ -1,7 +1,6 @@ {{ protected/users/user-form user=model - currentUser=currentUser.account - save="save" - cancel="cancel" + on-save=(action "save") + on-cancel=(action "cancel") }} diff --git a/app/pods/protected/users/show/user-card/component.js b/app/pods/protected/users/show/user-card/component.js index 41dcaef..00e3164 100644 --- a/app/pods/protected/users/show/user-card/component.js +++ b/app/pods/protected/users/show/user-card/component.js @@ -5,7 +5,9 @@ const { Component, computed, inject: { service } } = Ember; export default Component.extend({ currentUser: service('session-account'), - isUser: computed('model.id', 'currentUser.account.id', function() { - return this.get('model.id') === this.get('currentUser.account.id'); + user: null, + + isUser: computed('user.id', 'currentUser.account.id', function() { + return this.get('user.id') === this.get('currentUser.account.id'); }), }); diff --git a/app/pods/protected/users/show/user-card/template.hbs b/app/pods/protected/users/show/user-card/template.hbs index 6aa0d84..5ced125 100644 --- a/app/pods/protected/users/show/user-card/template.hbs +++ b/app/pods/protected/users/show/user-card/template.hbs @@ -44,7 +44,7 @@ {{/if}}
- {{#if model.canEdit}} + {{#if user.canEdit}} {{#link-to 'protected.users.edit' user.id class="button-gray smaller"}} Edit {{/link-to}} diff --git a/app/pods/protected/users/user-form/component.js b/app/pods/protected/users/user-form/component.js index 0a706f3..28fb03a 100644 --- a/app/pods/protected/users/user-form/component.js +++ b/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); + }, + }, }); diff --git a/app/pods/protected/users/user-form/template.hbs b/app/pods/protected/users/user-form/template.hbs index e7a8b02..cb0e27f 100644 --- a/app/pods/protected/users/user-form/template.hbs +++ b/app/pods/protected/users/user-form/template.hbs @@ -1,29 +1,29 @@
- {{user.name}} + {{name}}
- {{input value=user.name class="user-name"}} + {{one-way-input type="text" class="user-name" value=name update=(action "nameDidChange")}}
- {{input value=user.email}} + {{one-way-input type="text" class="email" value=email update=(action "emailDidChange")}}
- {{#if session.currentUser.isAdmin}} - {{#each roles as |roleChoice|}} - + {{/each}} {{else}} - {{user.role}} + {{role}} {{!-- Not editable --}} {{/if}}
@@ -32,7 +32,7 @@ Cancel - {{#if user.hasDirtyAttributes}} + {{#if isDirty}} diff --git a/app/services/session-account.js b/app/services/session-account.js index 1b34554..ee09f3a 100644 --- a/app/services/session-account.js +++ b/app/services/session-account.js @@ -2,19 +2,20 @@ import Ember from 'ember'; import DS from 'ember-data'; import parseBase64 from '../utils/parse-base64'; -const { service } = Ember.inject; +const { Service, computed, isEmpty, inject: { service } } = Ember; +const { PromiseObject } = DS; -export default Ember.Service.extend({ +export default Service.extend({ session: service('session'), store: service(), - account: Ember.computed('session.data.authenticated.access_token', function() { + account: computed('session.data.authenticated.access_token', function() { const token = this.get('session.data.authenticated.access_token'); const claims = parseBase64(token); const id = claims['sub']; - if (!Ember.isEmpty(id)) { - return DS.PromiseObject.create({ + if (!isEmpty(id)) { + return PromiseObject.create({ promise: this.get('store').findRecord('user', id), }); }