Permalink
Browse files

Cope with large teams

Ember does not cope with rendering hundreds of users, so force people to
filter their user list before even trying.

Also, `computed.min` and `computed.max` don't work with lots of data, so
replace them with a manual implementation.
  • Loading branch information...
alisdair committed Jul 6, 2015
1 parent 5f9ed41 commit 7390bc0120c24674863a5829556a0ca209294a65
Showing with 41 additions and 5 deletions.
  1. +27 −3 app/components/timezone-collection.js
  2. +3 −1 app/controllers/index.js
  3. +11 −1 app/templates/index.hbs
@@ -14,10 +14,34 @@ export default Ember.Component.extend({
users: null,
offsets: Ember.computed.mapBy('users', 'tzOffset'),
earliest: Ember.computed.min('offsets'),
latest: Ember.computed.max('offsets'),
columns: Ember.computed('users.@each', 'earliest', 'latest', function() {
earliest: Ember.computed('offsets.@each', function() {
let min = Infinity;
let offsets = this.get('offsets');
for (let i = 0; i < offsets.length; i++) {
if (offsets[i] < min) {
min = offsets[i];
}
}
return min;
}),
latest: Ember.computed('offsets.@each', function() {
let max = -Infinity;
let offsets = this.get('offsets');
for (let i = 0; i < offsets.length; i++) {
if (offsets[i] > max) {
max = offsets[i];
}
}
return max;
}),
columns: Ember.computed('earliest', 'latest', function() {
let users = this.get('users');
let start = timezoneStart(this.get('earliest'));
let stop = timezoneNext(timezoneStart(this.get('latest')));
@@ -7,6 +7,8 @@ export default Ember.Controller.extend({
users: Ember.computed.readOnly('model'),
tooManyUsers: Ember.computed.gt('filteredUsers.length', 100),
filteredUsers: Ember.computed('search', 'users.{name,realName}', function() {
let users = this.get('users');
let search = this.get('search').toLowerCase();
@@ -19,5 +21,5 @@ export default Ember.Controller.extend({
return users.filter(user => {
return matches(user.get('name')) || matches(user.get('realName'));
});
})
}).readOnly()
});
@@ -1 +1,11 @@
{{timezone-collection users=filteredUsers}}
{{#if tooManyUsers}}
<div class="text-content text-content--cta">
<h2>Whoa, too many users!</h2>
<p>Sorry, this app doesn't cope well with huge Slack teams! Found <strong>{{pluralize filteredUsers.length 'user'}}</strong>.</p>
<p>Please search for people by name to reduce the number of users.</p>
</div>
{{else}}
{{timezone-collection users=filteredUsers}}
{{/if}}

0 comments on commit 7390bc0

Please sign in to comment.