Added pagination to people management in admin panel

client/components/settings/peopleBody.jade

@@ -46,12 +46,12 @@ template(name="peopleRow")
         | true
       else
         | false
-    td {{ userData.createdAt }}
+    td {{ moment userData.createdAt 'LLL' }}
     td
-      if userData.active
-        | true
-      else
+      if userData.loginDisabled
         | false
+      else
+        | true
     td
       a.edit-user
         | edit
@@ -80,5 +80,10 @@ template(name="editUserPopup")
       select.select-role.js-profile-isadmin
         option(value="false") No
         option(value="true" selected="{{user.isAdmin}}") Yes
+    label
+      | {{_ 'isActive'}}
+      select.select-active.js-profile-isactive
+        option(value="false") Yes
+        option(value="true" selected="{{user.loginDisabled}}") No
 
     input.primary.wide(type="submit" value="{{_ 'save'}}")

client/components/settings/peopleBody.js

@@ -1,10 +1,46 @@
-Meteor.subscribe('people');
+const usersPerPage = 25;
 
 BlazeComponent.extendComponent({
+  mixins() {
+    return [Mixins.InfiniteScrolling];
+  },
   onCreated() {
     this.error = new ReactiveVar('');
     this.loading = new ReactiveVar(false);
     this.people = new ReactiveVar(true);
+
+    this.page = new ReactiveVar(1);
+    this.loadNextPageLocked = false;
+    this.callFirstWith(null, 'resetNextPeak');
+    this.autorun(() => {
+      const limit = this.page.get() * usersPerPage;
+
+      this.subscribe('people', limit, () => {
+        this.loadNextPageLocked = false;
+        const nextPeakBefore = this.callFirstWith(null, 'getNextPeak');
+        this.calculateNextPeak();
+        const nextPeakAfter = this.callFirstWith(null, 'getNextPeak');
+        if (nextPeakBefore === nextPeakAfter) {
+          this.callFirstWith(null, 'resetNextPeak');
+        }
+      });
+    });
+  },
+  loadNextPage() {
+    if (this.loadNextPageLocked === false) {
+      this.page.set(this.page.get() + 1);
+      this.loadNextPageLocked = true;
+    }
+  },
+  calculateNextPeak() {
+    const element = this.find('.main-body');
+    if (element) {
+      const altitude = element.scrollHeight;
+      this.callFirstWith(this, 'setNextPeak', altitude);
+    }
+  },
+  reachNextPeak() {
+    this.loadNextPage();
   },
   setError(error) {
     this.error.set(error);

client/components/settings/peopleBody.styl

@@ -1,3 +1,6 @@
+.main-body
+  overflow: scroll;
+
 table
   font-family: arial, sans-serif;
   border-collapse: collapse;

server/publications/people.js

@@ -1,3 +1,7 @@
-Meteor.publish('people', function () {
-  return Meteor.users.find({}, {fields:{}});
+Meteor.publish('people', (limit) => {
+  check(limit, Number);
+  return Users.find({}, {
+    limit,
+    sort: {createdAt: -1},
+  });
 });