From 95bb440a65c84d79d22180c044e948fae7233492 Mon Sep 17 00:00:00 2001 From: Harvey Kandola Date: Wed, 29 Nov 2017 10:31:00 +0000 Subject: [PATCH] user admin UX --- gui/app/components/customize/user-admin.js | 83 ++---- gui/app/components/customize/user-settings.js | 1 - gui/app/pods/customize/users/controller.js | 9 +- gui/app/pods/customize/users/template.hbs | 9 + gui/app/styles/view/customize.scss | 73 +---- .../components/customize/general-settings.hbs | 6 +- .../components/customize/smtp-settings.hbs | 14 +- .../components/customize/user-admin.hbs | 278 ++++++++---------- .../components/customize/user-settings.hbs | 36 +-- 9 files changed, 194 insertions(+), 315 deletions(-) diff --git a/gui/app/components/customize/user-admin.js b/gui/app/components/customize/user-admin.js index 2e3f5151..376e423c 100644 --- a/gui/app/components/customize/user-admin.js +++ b/gui/app/components/customize/user-admin.js @@ -9,9 +9,8 @@ // // https://documize.com -import { debounce } from '@ember/runloop'; - import Component from '@ember/component'; +import { schedule, debounce } from '@ember/runloop'; import AuthProvider from '../../mixins/auth'; import DropdownMixin from '../../mixins/dropdown'; @@ -24,6 +23,7 @@ export default Component.extend(AuthProvider, DropdownMixin, { filteredUsers: [], selectedUsers: [], hasSelectedUsers: false, + showDeleteDialog: false, didReceiveAttrs() { this._super(...arguments); @@ -39,11 +39,6 @@ export default Component.extend(AuthProvider, DropdownMixin, { this.set('filteredUsers', users); }, - willDestroyElement() { - this._super(...arguments); - this.destroyDropdown(); - }, - onKeywordChange: function () { debounce(this, this.filterUsers, 350); }.observes('filter'), @@ -101,76 +96,45 @@ export default Component.extend(AuthProvider, DropdownMixin, { this.attrs.onSave(user); }, - edit(id) { - let self = this; - + onShowEdit(id) { let user = this.users.findBy("id", id); let userCopy = user.getProperties('id', 'created', 'revised', 'firstname', 'lastname', 'email', 'initials', 'active', 'editor', 'admin', 'viewUsers', 'accounts'); + this.set('editUser', userCopy); this.set('password', { password: "", confirmation: "" }); - $(".edit-user-dialog").css("display", "block"); - $("input").removeClass("error"); - this.closeDropdown(); - - let dropOptions = Object.assign(this.get('dropDefaults'), { - target: $(".edit-button-" + id)[0], - content: $(".edit-user-dialog")[0], - classes: 'drop-theme-basic', - position: "bottom right", - remove: false}); - - let drop = new Drop(dropOptions); - self.set('dropdown', drop); - - drop.on('open', function () { - self.$("#edit-firstname").focus(); + $('#edit-user-modal').on('show.bs.modal', function(event) { // eslint-disable-line no-unused-vars + schedule('afterRender', () => { + $("#edit-firstname").focus(); + }); }); + + $('#edit-user-modal').modal('dispose'); + $('#edit-user-modal').modal({show: true}); }, - confirmDelete(id) { - let user = this.users.findBy("id", id); - this.set('deleteUser', user); - $(".delete-user-dialog").css("display", "block"); - - this.closeDropdown(); - - let dropOptions = Object.assign(this.get('dropDefaults'), { - target: $(".delete-button-" + id)[0], - content: $(".delete-user-dialog")[0], - classes: 'drop-theme-basic', - position: "bottom right", - remove: false}); - - let drop = new Drop(dropOptions); - this.set('dropdown', drop); - }, - - cancel() { - this.closeDropdown(); - }, - - save() { + onUpdate() { let user = this.get('editUser'); let password = this.get('password'); if (is.empty(user.firstname)) { - $("#edit-firstname").addClass("error").focus(); + $("#edit-firstname").addClass("is-invalid").focus(); return; } if (is.empty(user.lastname)) { - $("#edit-lastname").addClass("error").focus(); + $("#edit-lastname").addClass("is-invalid").focus(); return; } - if (is.empty(user.email)) { - $("#edit-email").addClass("error").focus(); + if (is.empty(user.email) || is.not.email(user.email)) { + $("#edit-email").addClass("is-invalid").focus(); return; } - this.closeDropdown(); + $('#edit-user-modal').modal('hide'); + $('#edit-user-modal').modal('dispose'); this.attrs.onSave(user); @@ -180,12 +144,19 @@ export default Component.extend(AuthProvider, DropdownMixin, { } }, - delete() { - this.closeDropdown(); + onShowDelete(id) { + this.set('deleteUser', this.users.findBy("id", id)); + this.set('showDeleteDialog', true); + }, + + onDelete() { + this.set('showDeleteDialog', false); this.set('selectedUsers', []); this.set('hasSelectedUsers', false); this.attrs.onDelete(this.get('deleteUser.id')); + + return true; }, onBulkDelete() { diff --git a/gui/app/components/customize/user-settings.js b/gui/app/components/customize/user-settings.js index 100e59dd..17d1f003 100644 --- a/gui/app/components/customize/user-settings.js +++ b/gui/app/components/customize/user-settings.js @@ -10,7 +10,6 @@ // https://documize.com import { empty, and } from '@ember/object/computed'; - import Component from '@ember/component'; import { isEmpty } from '@ember/utils'; import { get, set } from '@ember/object'; diff --git a/gui/app/pods/customize/users/controller.js b/gui/app/pods/customize/users/controller.js index 9c4560c9..ee40fa83 100644 --- a/gui/app/pods/customize/users/controller.js +++ b/gui/app/pods/customize/users/controller.js @@ -10,12 +10,10 @@ // https://documize.com import { set } from '@ember/object'; - import { inject as service } from '@ember/service'; import Controller from '@ember/controller'; -import NotifierMixin from '../../../mixins/notifier'; -export default Controller.extend(NotifierMixin, { +export default Controller.extend({ userService: service('user'), newUser: { firstname: "", lastname: "", email: "", active: true }, @@ -26,7 +24,6 @@ export default Controller.extend(NotifierMixin, { return this.get('userService') .add(this.get('newUser')) .then((user) => { - this.showNotification('Added'); this.get('model').pushObject(user); }) .catch(function (error) { @@ -38,8 +35,6 @@ export default Controller.extend(NotifierMixin, { onDelete(userId) { let self = this; this.get('userService').remove(userId).then(function () { - self.showNotification('Deleted'); - self.get('userService').getComplete().then(function (users) { self.set('model', users); }); @@ -49,7 +44,6 @@ export default Controller.extend(NotifierMixin, { onSave(user) { let self = this; this.get('userService').save(user).then(function () { - self.showNotification('Saved'); self.get('userService').getComplete().then(function (users) { self.set('model', users); @@ -59,7 +53,6 @@ export default Controller.extend(NotifierMixin, { onPassword(user, password) { this.get('userService').updatePassword(user.id, password); - this.showNotification('Password changed'); } } }); diff --git a/gui/app/pods/customize/users/template.hbs b/gui/app/pods/customize/users/template.hbs index 398170d1..f5ff22c4 100644 --- a/gui/app/pods/customize/users/template.hbs +++ b/gui/app/pods/customize/users/template.hbs @@ -1,3 +1,12 @@ +
+
+
+

Users

+

Set basic information, passwords and permissions for {{model.length}} users

+
+
+
+ {{customize/user-settings add=(action 'add')}} {{customize/user-admin users=model onDelete=(action "onDelete") onSave=(action "onSave") onPassword=(action "onPassword")}} diff --git a/gui/app/styles/view/customize.scss b/gui/app/styles/view/customize.scss index 8517b079..e933df8f 100644 --- a/gui/app/styles/view/customize.scss +++ b/gui/app/styles/view/customize.scss @@ -10,70 +10,17 @@ color: $color-gray; } - > .user-admin { - margin: 30px 0; - - > .heading { - font-size: 1.2rem; - color: $color-off-black; - font-weight: bold; - margin: 0 0 20px 0; - } - - > .basic-table { - background-color: $color-white; - border: none !important; + .user-table { + .name { font-size: 1rem; color: $color-off-black; + margin: 0 0 0 30px; + } - > thead { - > tr { - > th { - height: 40px; - font-weight: bold; - color: $color-gray; - } - - > th:first-child { - font-weight: normal; - } - - > th:last-child { - text-align: center; - } - } - } - - > tbody { - > tr { - > td { - vertical-align: middle; - text-align: center; - - > .selector { - > i { - color: $color-off-black; - } - } - - > .name { - font-size: 1rem; - color: $color-off-black; - margin: 0 0 0 30px; - } - - > .email { - font-size: 0.9rem; - color: $color-gray; - margin: 0 0 0 30px; - } - } - - > td:first-child, td:last-child { - text-align: left; - } - } - } + .email { + font-size: 0.9rem; + color: $color-gray; + margin: 0 0 0 30px; } .inactive-user @@ -95,10 +42,6 @@ } } - .edit-user-dialog, .delete-user-dialog { - display: none; - } - > .space-list { padding: 0; margin: 0; diff --git a/gui/app/templates/components/customize/general-settings.hbs b/gui/app/templates/components/customize/general-settings.hbs index d4de73f0..98764ed4 100644 --- a/gui/app/templates/components/customize/general-settings.hbs +++ b/gui/app/templates/components/customize/general-settings.hbs @@ -26,8 +26,10 @@
- - Content within "Everyone" will be made available to anonymous users +
diff --git a/gui/app/templates/components/customize/smtp-settings.hbs b/gui/app/templates/components/customize/smtp-settings.hbs index 350258c2..db813c9e 100644 --- a/gui/app/templates/components/customize/smtp-settings.hbs +++ b/gui/app/templates/components/customize/smtp-settings.hbs @@ -1,8 +1,8 @@
-

SMTP Settings

-

Used for sending email notifications

+

SMTP Server

+

For sending email notifications

@@ -10,35 +10,35 @@
- +
{{focus-input id="smtp-host" type="text" value=model.smtp.host class=(if SMTPHostEmptyError 'form-control is-invalid' 'form-control')}} e.g. my.host.com
- +
{{input id="smtp-port" type="text" value=model.smtp.port class=(if SMTPPortEmptyError 'form-control is-invalid' 'form-control')}} e.g. 587
- +
{{input id="smtp-sender" type="text" value=model.smtp.sender class=(if SMTPSenderEmptyError 'form-control is-invalid' 'form-control')}} e.g. user@some-domain.com
- +
{{input id="smtp-userid" type="text" value=model.smtp.userid class=(if SMTPUserIdEmptyError 'form-control is-invalid' 'form-control')}} e.g. Login username for SMTP server
- +
{{input id="smtp-password" type="password" value=model.smtp.password class=(if SMTPPasswordEmptyError 'form-control is-invalid' 'form-control')}} e.g. Login password for SMTP server diff --git a/gui/app/templates/components/customize/user-admin.hbs b/gui/app/templates/components/customize/user-admin.hbs index 09c3f57a..9d5bc152 100644 --- a/gui/app/templates/components/customize/user-admin.hbs +++ b/gui/app/templates/components/customize/user-admin.hbs @@ -1,171 +1,141 @@ -
-
-
-
User Management
-
Set basic information, passwords and permissions for {{users.length}} users
-
- - - +
+

Users

+
+ + + + + + + + + + + + {{#each filteredUsers key="id" as |user|}} - - - - - + + + + - - - {{#each users key="id" as |user|}} - - - - - - - - - {{/each}} - -
{{input type="text" class="form-control" placeholder="filter users" value=filter}}Add SpaceView UsersAdminActive + {{#if hasSelectedUsers}} + + {{#dropdown-dialog target="bulk-delete-users" position="bottom right" button="Delete" color="flat-red" onAction=(action 'onBulkDelete')}} +

Are you sure you want to delete selected users?

+ {{/dropdown-dialog}} + {{/if}} +
-
- {{focus-input type="text" placeholder="< type here to filter users >" value=filter}} +
+
+ {{#if user.me}} + check_box_outline_blank + {{else if user.selected}} + check_box + {{else}} + check_box_outline_blank + {{/if}}
- - 		Add SpaceView UsersAdminActive - {{#if hasSelectedUsers}} -
+
+
{{ user.fullname }}
+ +
+ +
+ {{#if user.editor}} + check_box + {{else}} + check_box_outline_blank + {{/if}} + + {{#if user.viewUsers}} + check_box + {{else}} + check_box_outline_blank + {{/if}} + + {{#if user.me}} + check_box + {{else if user.admin}} + check_box + {{else}} + check_box_outline_blank + {{/if}} + + {{#if user.me}} + check_box + {{else if user.active}} + check_box + {{else}} + check_box_outline_blank + {{/if}} + + {{#if user.me}} +
+ edit +
+ {{else}} +
+ edit +
+
+
delete
- {{#dropdown-dialog target="bulk-delete-users" position="bottom right" button="Delete" color="flat-red" onAction=(action 'onBulkDelete')}} -

Are you sure you want to delete selected users?

- {{/dropdown-dialog}} {{/if}} - +
-
- {{#if user.me}} - check_box_outline_blank - {{else if user.selected}} - check_box - {{else}} - check_box_outline_blank - {{/if}} -
-
{{ user.fullname }}
- - 		- {{#if user.editor}} - check_box - {{else}} - check_box_outline_blank - {{/if}} - - {{#if user.viewUsers}} - check_box - {{else}} - check_box_outline_blank - {{/if}} - - {{#if user.me}} - check_box - {{else if user.admin}} - check_box - {{else}} - check_box_outline_blank - {{/if}} - - {{#if user.me}} - check_box - {{else if user.active}} - check_box - {{else}} - check_box_outline_blank - {{/if}} - - {{#if user.me}} -
- edit -
- {{else}} -
- edit -
-
-
- delete -
- {{/if}} -
-
+ {{/each}} + + +
-
-
- -
-
-
- - {{input id="edit-firstname" type="text" value=editUser.firstname}} -
+