diff --git a/app/assets/javascripts/admin/components/admin-user-field-item.js.es6 b/app/assets/javascripts/admin/components/admin-user-field-item.js.es6
new file mode 100644
index 00000000000..bc96a0fc74c
--- /dev/null
+++ b/app/assets/javascripts/admin/components/admin-user-field-item.js.es6
@@ -0,0 +1,68 @@
+import { bufferedProperty } from 'discourse/mixins/buffered-content';
+import UserField from 'admin/models/user-field';
+import { popupAjaxError } from 'discourse/lib/ajax-error';
+
+export default Ember.Component.extend(bufferedProperty('userField'), {
+ editing: Ember.computed.empty('userField.id'),
+ classNameBindings: [':user-field'],
+
+ _focusOnEdit: function() {
+ if (this.get('editing')) {
+ Ember.run.scheduleOnce('afterRender', this, '_focusName');
+ }
+ }.observes('editing').on('didInsertElement'),
+
+ _focusName: function() {
+ $('.user-field-name').select();
+ },
+
+ fieldName: function() {
+ return UserField.fieldTypeById(this.get('userField.field_type')).get('name');
+ }.property('userField.field_type'),
+
+ flags: function() {
+ const ret = [];
+ if (this.get('userField.editable')) {
+ ret.push(I18n.t('admin.user_fields.editable.enabled'));
+ }
+ if (this.get('userField.required')) {
+ ret.push(I18n.t('admin.user_fields.required.enabled'));
+ }
+ if (this.get('userField.show_on_profile')) {
+ ret.push(I18n.t('admin.user_fields.show_on_profile.enabled'));
+ }
+
+ return ret.join(', ');
+ }.property('userField.editable', 'userField.required', 'userField.show_on_profile'),
+
+ actions: {
+ save: function() {
+ const self = this;
+ const attrs = this.get('buffered').getProperties('name', 'description', 'field_type', 'editable', 'required', 'show_on_profile');
+
+ this.get('userField').save(attrs).then(function(res) {
+ self.set('userField.id', res.user_field.id);
+ self.set('editing', false);
+ self.commitBuffer();
+ }).catch(popupAjaxError);
+ },
+
+ edit: function() {
+ this.set('editing', true);
+ },
+
+ destroy: function() {
+ this.sendAction('destroyAction', this.get('userField'));
+ },
+
+ cancel: function() {
+ const id = this.get('userField.id');
+ if (Ember.isEmpty(id)) {
+ this.sendAction('destroyAction', this.get('userField'));
+ } else {
+ this.rollbackBuffer();
+ this.set('editing', false);
+ }
+ }
+ }
+});
diff --git a/app/assets/javascripts/admin/controllers/admin-user-field-item.js.es6 b/app/assets/javascripts/admin/controllers/admin-user-field-item.js.es6
deleted file mode 100644
index f4b9ba2a79a..00000000000
--- a/app/assets/javascripts/admin/controllers/admin-user-field-item.js.es6
+++ /dev/null
@@ -1,64 +0,0 @@
-import UserField from 'admin/models/user-field';
-import BufferedContent from 'discourse/mixins/buffered-content';
-
-export default Ember.ObjectController.extend(BufferedContent, {
- needs: ['admin-user-fields'],
- editing: Ember.computed.empty('id'),
-
- fieldName: function() {
- return UserField.fieldTypeById(this.get('field_type')).get('name');
- }.property('field_type'),
-
- flags: function() {
- var ret = [];
- if (this.get('editable')) {
- ret.push(I18n.t('admin.user_fields.editable.enabled'));
- }
- if (this.get('required')) {
- ret.push(I18n.t('admin.user_fields.required.enabled'));
- }
- if (this.get('show_on_profile')) {
- ret.push(I18n.t('admin.user_fields.show_on_profile.enabled'));
- }
-
- return ret.join(', ');
- }.property('editable', 'required', 'show_on_profile'),
-
- actions: {
- save: function() {
- var self = this;
-
- var attrs = this.get('buffered').getProperties('name', 'description', 'field_type', 'editable', 'required', 'show_on_profile');
-
- this.get('model').save(attrs).then(function(res) {
- self.set('model.id', res.user_field.id);
- self.set('editing', false);
- self.commitBuffer();
- }).catch(function(e) {
- var msg = I18n.t("generic_error");
- if (e.responseJSON && e.responseJSON.errors) {
- msg = I18n.t("generic_error_with_reason", {error: e.responseJSON.errors.join('. ')});
- }
- bootbox.alert(msg);
- });
- },
-
- edit: function() {
- this.set('editing', true);
- },
-
- destroy: function() {
- this.get('controllers.admin-user-fields').send('destroy', this.get('model'));
- },
-
- cancel: function() {
- var id = this.get('id');
- if (Ember.isEmpty(id)) {
- this.get('controllers.admin-user-fields').send('destroy', this.get('model'));
- } else {
- this.rollbackBuffer();
- this.set('editing', false);
- }
- }
- }
-});
diff --git a/app/assets/javascripts/admin/templates/components/admin-user-field-item.hbs b/app/assets/javascripts/admin/templates/components/admin-user-field-item.hbs
new file mode 100644
index 00000000000..8e1bd8c176b
--- /dev/null
+++ b/app/assets/javascripts/admin/templates/components/admin-user-field-item.hbs
@@ -0,0 +1,47 @@
+{{#if editing}}
+
+
+ {{input value=buffered.name class="user-field-name" placeholder=userFieldsName}}
+
+
+ {{input value=buffered.description class="user-field-desc" placeholder=userFieldsDescription}}
+
+
+ {{combo-box content=fieldTypes valueAttribute="id" value=buffered.field_type}}
+
+
+ {{d-button action="save" class="btn-primary" icon="check" label="admin.user_fields.save"}}
+ {{d-button action="cancel" class="btn-danger" icon="times" label="admin.user_fields.cancel"}}
+
+
+
+
+
+
+
+
+
+
+
+
+
{{userField.name}}
+
{{{userField.description}}}
+
{{fieldName}}
+
+
+ {{d-button action="edit" class="btn-default" icon="pencil" label="admin.user_fields.edit"}}
+ {{d-button action="destroy" class="btn-danger" icon="trash-o" label="admin.user_fields.delete"}}
+
+
{{flags}}
+{{/if}}
+
diff --git a/app/assets/javascripts/admin/templates/user-fields.hbs b/app/assets/javascripts/admin/templates/user-fields.hbs
index 2412dfd1ad8..7f6bab02f53 100644
--- a/app/assets/javascripts/admin/templates/user-fields.hbs
+++ b/app/assets/javascripts/admin/templates/user-fields.hbs
@@ -4,54 +4,8 @@
{{i18n 'admin.user_fields.help'}}
{{#if model}}
- {{#each f in model itemController="admin-user-field-item" itemView="admin-user-field-item"}}
- {{#if f.editing}}
-
-
- {{input value=f.buffered.name class="user-field-name" placeholder=userFieldsName}}
-
-
- {{input value=f.buffered.description class="user-field-desc" placeholder=userFieldsDescription}}
-
-
- {{combo-box content=fieldTypes valueAttribute="id" value=f.buffered.field_type}}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
{{f.name}}
-
{{{f.description}}}
-
{{f.fieldName}}
-
-
-
-
-
-
{{f.flags}}
- {{/if}}
-
+ {{#each model as |uf|}}
+ {{admin-user-field-item userField=uf fieldTypes=fieldTypes destroyAction="destroy"}}
{{/each}}
{{/if}}
diff --git a/app/assets/javascripts/admin/views/admin-user-field-item.js.es6 b/app/assets/javascripts/admin/views/admin-user-field-item.js.es6
deleted file mode 100644
index 4e96b9b0ddb..00000000000
--- a/app/assets/javascripts/admin/views/admin-user-field-item.js.es6
+++ /dev/null
@@ -1,13 +0,0 @@
-export default Ember.View.extend({
- classNameBindings: [':user-field'],
-
- _focusOnEdit: function() {
- if (this.get('controller.editing')) {
- Ember.run.scheduleOnce('afterRender', this, '_focusName');
- }
- }.observes('controller.editing').on('didInsertElement'),
-
- _focusName: function() {
- $('.user-field-name').select();
- }
-});
diff --git a/app/assets/javascripts/discourse/mixins/buffered-content.js.es6 b/app/assets/javascripts/discourse/mixins/buffered-content.js.es6
index 1f01423b2e5..fe6cb765d74 100644
--- a/app/assets/javascripts/discourse/mixins/buffered-content.js.es6
+++ b/app/assets/javascripts/discourse/mixins/buffered-content.js.es6
@@ -1,16 +1,20 @@
/* global BufferedProxy: true */
-export default Ember.Mixin.create({
- buffered: function() {
- return Em.ObjectProxy.extend(BufferedProxy).create({
- content: this.get('content')
- });
- }.property('content'),
+export function bufferedProperty(property) {
+ return Ember.Mixin.create({
+ buffered: function() {
+ return Em.ObjectProxy.extend(BufferedProxy).create({
+ content: this.get(property)
+ });
+ }.property(property),
- rollbackBuffer: function() {
- this.get('buffered').discardBufferedChanges();
- },
+ rollbackBuffer: function() {
+ this.get('buffered').discardBufferedChanges();
+ },
- commitBuffer: function() {
- this.get('buffered').applyBufferedChanges();
- }
-});
+ commitBuffer: function() {
+ this.get('buffered').applyBufferedChanges();
+ }
+ });
+}
+
+export default bufferedProperty('content');