Added pagination to people management in admin panel

3 files changed, 49 insertions, 5 deletions

diff --git a/client/components/settings/peopleBody.jade b/client/components/settings/peopleBody.jade
index 3ed2e4c8..34004d31 100644
--- a/client/components/settings/peopleBody.jade
+++ b/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'}}")
diff --git a/client/components/settings/peopleBody.js b/client/components/settings/peopleBody.js
index 85376ebb..d59dc38b 100644
--- a/client/components/settings/peopleBody.js
+++ b/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);
diff --git a/client/components/settings/peopleBody.styl b/client/components/settings/peopleBody.styl
index dc3210ad..2e89ea3b 100644
--- a/client/components/settings/peopleBody.styl
+++ b/client/components/settings/peopleBody.styl
@@ -1,3 +1,6 @@
+.main-body
+  overflow: scroll;
+
 table
   font-family: arial, sans-serif;
   border-collapse: collapse;