diff --git a/app/assets/javascripts/admin/components/admin-editable-field.js.es6 b/app/assets/javascripts/admin/components/admin-editable-field.js.es6
new file mode 100644
index 00000000000..4c23ea6913e
--- /dev/null
+++ b/app/assets/javascripts/admin/components/admin-editable-field.js.es6
@@ -0,0 +1,23 @@
+export default Ember.Component.extend({
+ tagName: "",
+
+ buffer: "",
+ editing: false,
+
+ init() {
+ this._super(...arguments);
+ this.set("editing", false);
+ },
+
+ actions: {
+ edit() {
+ this.set("buffer", this.get("value"));
+ this.toggleProperty("editing");
+ },
+
+ save() {
+ // Action has to toggle 'editing' property.
+ this.action(this.get("buffer"));
+ }
+ }
+});
diff --git a/app/assets/javascripts/admin/controllers/admin-user-index.js.es6 b/app/assets/javascripts/admin/controllers/admin-user-index.js.es6
index 0020dae6ec8..21599cc00ad 100644
--- a/app/assets/javascripts/admin/controllers/admin-user-index.js.es6
+++ b/app/assets/javascripts/admin/controllers/admin-user-index.js.es6
@@ -7,9 +7,6 @@ import computed from "ember-addons/ember-computed-decorators";
export default Ember.Controller.extend(CanCheckEmails, {
adminTools: Ember.inject.service(),
- editingUsername: false,
- editingName: false,
- editingTitle: false,
originalPrimaryGroupId: null,
customGroupIdsBuffer: null,
availableGroups: null,
@@ -244,17 +241,12 @@ export default Ember.Controller.extend(CanCheckEmails, {
this.get("adminTools").showSilenceModal(this.get("model"));
},
- toggleUsernameEdit() {
- this.set("userUsernameValue", this.get("model.username"));
- this.toggleProperty("editingUsername");
- },
-
- saveUsername() {
+ saveUsername(newUsername) {
const oldUsername = this.get("model.username");
- this.set("model.username", this.get("userUsernameValue"));
+ this.set("model.username", newUsername);
return ajax(`/users/${oldUsername.toLowerCase()}/preferences/username`, {
- data: { new_username: this.get("userUsernameValue") },
+ data: { new_username: newUsername },
type: "PUT"
})
.catch(e => {
@@ -264,19 +256,14 @@ export default Ember.Controller.extend(CanCheckEmails, {
.finally(() => this.toggleProperty("editingUsername"));
},
- toggleNameEdit() {
- this.set("userNameValue", this.get("model.name"));
- this.toggleProperty("editingName");
- },
-
- saveName() {
+ saveName(newName) {
const oldName = this.get("model.name");
- this.set("model.name", this.get("userNameValue"));
+ this.set("model.name", newName);
return ajax(
userPath(`${this.get("model.username").toLowerCase()}.json`),
{
- data: { name: this.get("userNameValue") },
+ data: { name: newName },
type: "PUT"
}
)
@@ -287,24 +274,19 @@ export default Ember.Controller.extend(CanCheckEmails, {
.finally(() => this.toggleProperty("editingName"));
},
- toggleTitleEdit() {
- this.set("userTitleValue", this.get("model.title"));
- this.toggleProperty("editingTitle");
- },
+ saveTitle(newTitle) {
+ const oldTitle = this.get("model.title");
- saveTitle() {
- const prevTitle = this.get("userTitleValue");
-
- this.set("model.title", this.get("userTitleValue"));
+ this.set("model.title", newTitle);
return ajax(
userPath(`${this.get("model.username").toLowerCase()}.json`),
{
- data: { title: this.get("userTitleValue") },
+ data: { title: newTitle },
type: "PUT"
}
)
.catch(e => {
- this.set("model.title", prevTitle);
+ this.set("model.title", oldTitle);
popupAjaxError(e);
})
.finally(() => this.toggleProperty("editingTitle"));
diff --git a/app/assets/javascripts/admin/templates/components/admin-editable-field.hbs b/app/assets/javascripts/admin/templates/components/admin-editable-field.hbs
new file mode 100644
index 00000000000..8ffa93b9faa
--- /dev/null
+++ b/app/assets/javascripts/admin/templates/components/admin-editable-field.hbs
@@ -0,0 +1,16 @@
+{{i18n name}}
+
+ {{#if editing}}
+ {{text-field value=buffer autofocus="autofocus"}}
+ {{else}}
+ {{value}}
+ {{/if}}
+
+
+ {{#if editing}}
+ {{d-button class="btn-default" action=(action "save") label="admin.user_fields.save"}}
+
{{i18n 'cancel'}}
+ {{else}}
+ {{d-button class="btn-default" action=(action "edit") icon="pencil"}}
+ {{/if}}
+
-
{{i18n 'user.username.title'}}
-
- {{#if editingUsername}}
- {{text-field value=userUsernameValue autofocus="autofocus"}}
- {{else}}
- {{model.username}}
- {{/if}}
-
-
- {{#if editingUsername}}
- {{d-button class="btn-default" action="saveUsername" label="admin.user_fields.save"}}
-
{{i18n 'cancel'}}
- {{else}}
- {{d-button class="btn-default" action="toggleUsernameEdit" icon="pencil"}}
- {{/if}}
-
+ {{admin-editable-field name='user.username.title'
+ value=model.username
+ action=(action 'saveUsername')
+ editing=editingUsername}}
-
{{i18n 'user.name.title'}}
-
- {{#if editingName}}
- {{text-field value=userNameValue autofocus="autofocus"}}
- {{else}}
- {{model.name}}
- {{/if}}
-
-
- {{#if editingName}}
- {{d-button class="btn-default" action="saveName" label="admin.user_fields.save"}}
-
{{i18n 'cancel'}}
- {{else}}
- {{d-button class="btn-default" action="toggleNameEdit" icon="pencil"}}
- {{/if}}
-
+ {{admin-editable-field name='user.name.title'
+ value=model.name
+ action=(action 'saveName')
+ editing=editingName}}
-
{{i18n 'user.title.title'}}
-
- {{#if editingTitle}}
- {{text-field value=userTitleValue autofocus="autofocus"}}
- {{else}}
- {{model.title}}
- {{/if}}
-
-
- {{#if editingTitle}}
- {{d-button class="btn-default" action="saveTitle" label="admin.user_fields.save"}}
-
{{i18n 'cancel'}}
- {{else}}
- {{d-button class="btn-default" action="toggleTitleEdit" icon="pencil"}}
- {{/if}}
-
+ {{admin-editable-field name='user.title.title'
+ value=model.title
+ action=(action 'saveTitle')
+ editing=editingTitle}}
diff --git a/test/javascripts/acceptance/admin-user-index-test.js.es6 b/test/javascripts/acceptance/admin-user-index-test.js.es6
new file mode 100644
index 00000000000..0e8ee0c6616
--- /dev/null
+++ b/test/javascripts/acceptance/admin-user-index-test.js.es6
@@ -0,0 +1,43 @@
+import { acceptance } from "helpers/qunit-helpers";
+
+acceptance("Admin - User Index", { loggedIn: true });
+
+QUnit.test("can edit username", async assert => {
+ /* global server */
+ server.put("/users/sam/preferences/username", () => [
+ 200,
+ { "Content-Type": "application/json" },
+ { id: 2, username: "new-sam" }
+ ]);
+
+ await visit("/admin/users/2/sam");
+
+ assert.equal(
+ find(".display-row.username .value")
+ .text()
+ .trim(),
+ "sam"
+ );
+
+ // Trying cancel.
+ await click(".display-row.username button");
+ await fillIn(".display-row.username .value input", "new-sam");
+ await click(".display-row.username a");
+ assert.equal(
+ find(".display-row.username .value")
+ .text()
+ .trim(),
+ "sam"
+ );
+
+ // Doing edit.
+ await click(".display-row.username button");
+ await fillIn(".display-row.username .value input", "new-sam");
+ await click(".display-row.username button");
+ assert.equal(
+ find(".display-row.username .value")
+ .text()
+ .trim(),
+ "new-sam"
+ );
+});