diff --git a/app/assets/javascripts/admin/components/admin-directory-toggle.js.es6 b/app/assets/javascripts/admin/components/admin-directory-toggle.js.es6 new file mode 100644 index 00000000000..e4d19613b53 --- /dev/null +++ b/app/assets/javascripts/admin/components/admin-directory-toggle.js.es6 @@ -0,0 +1,33 @@ +import { iconHTML } from 'discourse-common/helpers/fa-icon'; +import { bufferedRender } from 'discourse-common/lib/buffered-render'; + +export default Ember.Component.extend(bufferedRender({ + tagName: 'th', + classNames: ['sortable'], + rerenderTriggers: ['order', 'ascending'], + + buildBuffer(buffer) { + const icon = this.get('icon'); + + if (icon) { + buffer.push(iconHTML(icon)); + } + + buffer.push(I18n.t(this.get('i18nKey'))); + + if (this.get('field') === this.get('order')) { + buffer.push(iconHTML(this.get('ascending') ? 'chevron-up' : 'chevron-down')); + } + }, + + click() { + const currentOrder = this.get('order'); + const field = this.get('field'); + + if (currentOrder === field) { + this.set('ascending', this.get('ascending') ? null : true); + } else { + this.setProperties({ order: field, ascending: null }); + } + } +})); diff --git a/app/assets/javascripts/admin/controllers/admin-users-list-show.js.es6 b/app/assets/javascripts/admin/controllers/admin-users-list-show.js.es6 index 1d877dadaf5..0d8aec07711 100644 --- a/app/assets/javascripts/admin/controllers/admin-users-list-show.js.es6 +++ b/app/assets/javascripts/admin/controllers/admin-users-list-show.js.es6 @@ -1,9 +1,14 @@ import debounce from 'discourse/lib/debounce'; import { i18n } from 'discourse/lib/computed'; import AdminUser from 'admin/models/admin-user'; +import { observes } from 'ember-addons/ember-computed-decorators'; + export default Ember.Controller.extend({ query: null, + queryParams: ['order', 'ascending'], + order: 'seen', + ascending: null, showEmails: false, refreshing: false, listFilter: null, @@ -39,14 +44,15 @@ export default Ember.Controller.extend({ this._refreshUsers(); }, 250).observes('listFilter'), + + @observes('order', 'ascending') _refreshUsers: function() { - var self = this; this.set('refreshing', true); - AdminUser.findAll(this.get('query'), { filter: this.get('listFilter'), show_emails: this.get('showEmails') }).then(function (result) { - self.set('model', result); - }).finally(function() { - self.set('refreshing', false); + AdminUser.findAll(this.get('query'), { filter: this.get('listFilter'), show_emails: this.get('showEmails'), order: this.get('order'), ascending: this.get('ascending') }).then( (result) => { + this.set('model', result); + }).finally( () => { + this.set('refreshing', false); }); }, diff --git a/app/assets/javascripts/admin/templates/users-list-show.hbs b/app/assets/javascripts/admin/templates/users-list-show.hbs index f18ce56b4b7..cc0c5ce09ef 100644 --- a/app/assets/javascripts/admin/templates/users-list-show.hbs +++ b/app/assets/javascripts/admin/templates/users-list-show.hbs @@ -22,7 +22,7 @@ {{#conditional-loading-spinner condition=refreshing}} {{#if model}} - + {{#if showApproval}} {{/if}} @@ -30,54 +30,79 @@ - - - - - + {{admin-directory-toggle field="seen" i18nKey='last_seen' order=order ascending=ascending}} + {{admin-directory-toggle field="topics_viewed" i18nKey="admin.user.topics_entered" order=order ascending=ascending}} + {{admin-directory-toggle field="posts_read" i18nKey="admin.user.posts_read_count" order=order ascending=ascending}} + {{admin-directory-toggle field="read_time" i18nKey="admin.user.time_read" order=order ascending=ascending}} + {{admin-directory-toggle field="created" i18nKey="created" order=order ascending=ascending}} {{#if showApproval}} {{/if}} - - - {{#each model as |user|}} - - {{#if showApproval}} + + + {{#each model as |user|}} + + {{#if showApproval}} - {{/if}} - - - - - - - - - - - - {{#if showApproval}} - - {{/if}} - - - {{/each}} + + + + + + + + + + + {{#if showApproval}} + + {{/if}} + + + {{/each}} +
{{input type="checkbox" checked=selectAll}}{{i18n 'username'}} {{i18n 'email'}} {{i18n 'admin.users.last_emailed'}}{{i18n 'last_seen'}}{{i18n 'admin.user.topics_entered'}}{{i18n 'admin.user.posts_read_count'}}{{i18n 'admin.user.time_read'}}{{i18n 'created'}}{{i18n 'admin.users.approved'}} 
{{#if user.can_approve}} {{input type="checkbox" checked=user.selected}} {{/if}} {{avatar user imageSize="small"}}{{#link-to 'adminUser' user}}{{unbound user.username}}{{/link-to}}{{{unbound user.last_emailed_age}}}{{{unbound user.last_seen_age}}}{{number user.topics_entered}}{{number user.posts_read_count}}{{{unbound user.time_read}}}{{{unbound user.created_at_age}}} - {{#if user.approved}} - {{i18n 'yes_value'}} - {{else}} - {{i18n 'no_value'}} {{/if}} - - {{#if user.admin}}{{/if}} - {{#if user.moderator}}{{/if}} -
+ + {{avatar user imageSize="small"}} + + + {{#link-to 'adminUser' user}}{{unbound user.username}}{{/link-to}} + + {{{unbound user.last_emailed_age}}} + + {{{unbound user.last_seen_age}}} + + {{number user.topics_entered}} + + {{number user.posts_read_count}} + + {{{unbound user.time_read}}} + + {{{unbound user.created_at_age}}} + + {{#if user.approved}} + {{i18n 'yes_value'}} + {{else}} + {{i18n 'no_value'}} + {{/if}} + + {{#if user.admin}} + {{fa-icon "shield" title="admin.title" }} + {{/if}} + {{#if user.moderator}} + {{fa-icon "shield" title="admin.moderator" }} + {{/if}} +
+ {{else}}

{{i18n 'search.no_results'}}

{{/if}} diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss index 1d55d6b236b..0e3c536b04c 100644 --- a/app/assets/stylesheets/common/admin/admin_base.scss +++ b/app/assets/stylesheets/common/admin/admin_base.scss @@ -31,8 +31,10 @@ $mobile-breakpoint: 700px; width: 100%; tr {text-align: left;} td, th {padding: 8px;} - th {border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);} + th {border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%); text-align: left;} td {border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%); border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);} + th.sortable i.fa-chevron-down, + th.sortable i.fa-chevron-up {margin-left: 0.5em;} tr:hover { background-color: darken($secondary, 2.5%); } tr.selected { background-color: lighten($primary, 80%); } .filters input { margin-bottom: 0; }