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}}
{{input type="checkbox" checked=selectAll}} | {{/if}} @@ -30,54 +30,79 @@{{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'}} | + {{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}}{{i18n 'admin.users.approved'}} | {{/if}}- - - {{#each model as |user|}} - | |
---|---|---|---|---|---|---|---|---|---|---|---|
{{#if user.can_approve}} {{input type="checkbox" checked=user.selected}} {{/if}} | - {{/if}} -{{avatar user imageSize="small"}} | -{{#link-to 'adminUser' user}}{{unbound user.username}}{{/link-to}} | -{{unbound user.email}} | -{{{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 showApproval}} -- {{#if user.approved}} - {{i18n 'yes_value'}} - {{else}} - {{i18n 'no_value'}} {{/if}} - | - {{/if}} -- {{#if user.admin}}{{/if}} - {{#if user.moderator}}{{/if}} - | -+ + {{avatar user imageSize="small"}} + + | ++ {{#link-to 'adminUser' user}}{{unbound user.username}}{{/link-to}} + | ++ {{unbound user.email}} + | ++ {{{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 showApproval}} ++ {{#if user.approved}} + {{i18n 'yes_value'}} + {{else}} + {{i18n 'no_value'}} + {{/if}} + | + {{/if}} ++ {{#if user.admin}} + {{fa-icon "shield" title="admin.title" }} + {{/if}} + {{#if user.moderator}} + {{fa-icon "shield" title="admin.moderator" }} + {{/if}} + | + + {{/each}} +
{{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; }