FEATURE: adds infite scroll on admin users list page (#7821)

FEATURE: adds infite scroll on admin users list page (#7821)

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 2b5a727..ee27375 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
@@ -15,32 +15,64 @@ export default Ember.Controller.extend(CanCheckEmails, {
   selectAll: false,
   searchHint: i18n("search_hint"),
 
+  init() {
+    this._super(...arguments);
+
+    this._page = 0;
+    this._results = [];
+    this._canLoadMore = true;
+  },
+
   @computed("query")
   title(query) {
     return I18n.t("admin.users.titles." + query);
   },
 
   _filterUsers: debounce(function() {
-    this._refreshUsers();
+    this.resetFilters();
   }, 250).observes("listFilter"),
 
+  resetFilters() {
+    this._page = 0;
+    this._results = [];
+    this._canLoadMore = true;
+    this._refreshUsers();
+  },
+
   _refreshUsers() {
+    if (!this._canLoadMore) {
+      return;
+    }
+
     this.set("refreshing", true);
 
     AdminUser.findAll(this.query, {
       filter: this.listFilter,
       show_emails: this.showEmails,
       order: this.order,
-      ascending: this.ascending
+      ascending: this.ascending,
+      page: this._page
     })
-      .then(result => this.set("model", result))
+      .then(result => {
+        if (!result || result.length === 0) {
+          this._canLoadMore = false;
+        }
+
+        this._results = this._results.concat(result);
+        this.set("model", this._results);
+      })
       .finally(() => this.set("refreshing", false));
   },
 
   actions: {
+    loadMore() {
+      this._page += 1;
+      this._refreshUsers();
+    },
+
     toggleEmailVisibility() {
       this.toggleProperty("showEmails");
-      this._refreshUsers();
+      this.resetFilters();
     }
   }
 });
diff --git a/app/assets/javascripts/admin/routes/admin-users-list-show.js.es6 b/app/assets/javascripts/admin/routes/admin-users-list-show.js.es6
index 0b72b80..e0c1105 100644
--- a/app/assets/javascripts/admin/routes/admin-users-list-show.js.es6
+++ b/app/assets/javascripts/admin/routes/admin-users-list-show.js.es6
@@ -21,7 +21,7 @@ export default Discourse.Route.extend({
           refreshing: false
         });
 
-        controller._refreshUsers();
+        controller.resetFilters();
       }
     }
   }
diff --git a/app/assets/javascripts/admin/templates/users-list-show.hbs b/app/assets/javascripts/admin/templates/users-list-show.hbs
index af4ebc3..36cc552 100644
--- a/app/assets/javascripts/admin/templates/users-list-show.hbs
+++ b/app/assets/javascripts/admin/templates/users-list-show.hbs
@@ -13,7 +13,7 @@
 
 </div>
 
-{{#conditional-loading-spinner condition=refreshing}}
+{{#load-more selector=".users-list tr" action=(action "loadMore")}}
   {{#if model}}
     <table class='table users-list grid'>
       <thead>
@@ -90,8 +90,9 @@
         {{/each}}
       </tbody>
     </table>
+    {{conditional-loading-spinner condition=refreshing}}
 
   {{else}}
     <p>{{i18n 'search.no_results'}}</p>
   {{/if}}
-{{/conditional-loading-spinner}}
+{{/load-more}}

GitHub sha: 11ae5c78

1 Like