FEATURE: Make staff action logs page support infinite loading

FEATURE: Make staff action logs page support infinite loading

diff --git a/app/assets/javascripts/admin/controllers/admin-logs-staff-action-logs.js.es6 b/app/assets/javascripts/admin/controllers/admin-logs-staff-action-logs.js.es6
index b17b5a2..c1cd77b 100644
--- a/app/assets/javascripts/admin/controllers/admin-logs-staff-action-logs.js.es6
+++ b/app/assets/javascripts/admin/controllers/admin-logs-staff-action-logs.js.es6
@@ -1,51 +1,63 @@
 import { exportEntity } from "discourse/lib/export-csv";
 import { outputExportResult } from "discourse/lib/export-result";
 import StaffActionLog from "admin/models/staff-action-log";
-import computed from "ember-addons/ember-computed-decorators";
+import {
+  default as computed,
+  on
+} from "ember-addons/ember-computed-decorators";
 
 export default Ember.Controller.extend({
   loading: false,
   filters: null,
-  filtersExists: Ember.computed.gt("filterCount", 0),
-
-  init() {
-    this._super(...arguments);
+  userHistoryActions: [],
+  model: null,
+  nextPage: 0,
+  lastPage: null,
 
-    this.userHistoryActions = [];
-  },
-
-  filterActionIdChanged: function() {
-    const filterActionId = this.filterActionId;
-    if (filterActionId) {
-      this._changeFilters({
-        action_name: filterActionId,
-        action_id: this.userHistoryActions.findBy("id", filterActionId)
-          .action_id
-      });
-    }
-  }.observes("filterActionId"),
+  filtersExists: Ember.computed.gt("filterCount", 0),
+  showTable: Ember.computed.gt("model.length", 0),
 
   @computed("filters.action_name")
   actionFilter(name) {
-    if (name) {
-      return I18n.t("admin.logs.staff_actions.actions." + name);
-    } else {
-      return null;
-    }
+    return name ? I18n.t("admin.logs.staff_actions.actions." + name) : null;
   },
 
-  showInstructions: Ember.computed.gt("model.length", 0),
+  @on("init")
+  resetFilters() {
+    this.setProperties({
+      filters: Ember.Object.create(),
+      model: [],
+      nextPage: 0,
+      lastPage: null
+    });
+    this.scheduleRefresh();
+  },
+
+  _changeFilters(props) {
+    this.filters.setProperties(props);
+    this.setProperties({
+      model: [],
+      nextPage: 0,
+      lastPage: null
+    });
+    this.scheduleRefresh();
+  },
 
   _refresh() {
+    if (this.lastPage && this.nextPage >= this.lastPage) {
+      return;
+    }
+
     this.set("loading", true);
 
-    var filters = this.filters,
-      params = {},
-      count = 0;
+    const page = this.nextPage;
+    let filters = this.filters;
+    let params = { page };
+    let count = 0;
 
     // Don't send null values
-    Object.keys(filters).forEach(function(k) {
-      var val = filters.get(k);
+    Object.keys(filters).forEach(k => {
+      let val = filters.get(k);
       if (val) {
         params[k] = val;
         count += 1;
@@ -55,42 +67,49 @@ export default Ember.Controller.extend({
 
     StaffActionLog.findAll(params)
       .then(result => {
-        this.set("model", result.staff_action_logs);
+        this.setProperties({
+          model: this.model.concat(result.staff_action_logs),
+          nextPage: page + 1
+        });
+
+        if (result.staff_action_logs.length === 0) {
+          this.set("lastPage", page);
+        }
+
         if (this.userHistoryActions.length === 0) {
-          let actionTypes = result.user_history_actions.map(action => {
-            return {
-              id: action.id,
-              action_id: action.action_id,
-              name: I18n.t("admin.logs.staff_actions.actions." + action.id),
-              name_raw: action.id
-            };
-          });
-          actionTypes = _.sortBy(actionTypes, row => row.name);
-          this.set("userHistoryActions", actionTypes);
+          this.set(
+            "userHistoryActions",
+            result.user_history_actions
+              .map(action => ({
+                id: action.id,
+                action_id: action.action_id,
+                name: I18n.t("admin.logs.staff_actions.actions." + action.id),
+                name_raw: action.id
+              }))
+              .sort((a, b) => (a.name > b.name ? 1 : -1))
+          );
         }
       })
-      .finally(() => {
-        this.set("loading", false);
-      });
+      .finally(() => this.set("loading", false));
   },
 
   scheduleRefresh() {
     Ember.run.scheduleOnce("afterRender", this, this._refresh);
   },
 
-  resetFilters: function() {
-    this.set("filters", Ember.Object.create());
-    this.scheduleRefresh();
-  }.on("init"),
-
-  _changeFilters: function(props) {
-    this.filters.setProperties(props);
-    this.scheduleRefresh();
-  },
-
   actions: {
-    clearFilter: function(key) {
-      var changed = {};
+    filterActionIdChanged(filterActionId) {
+      if (filterActionId) {
+        this._changeFilters({
+          action_name: filterActionId,
+          action_id: this.userHistoryActions.findBy("id", filterActionId)
+            .action_id
+        });
+      }
+    },
+
+    clearFilter(key) {
+      let changed = {};
 
       // Special case, clear all action related stuff
       if (key === "actionFilter") {
@@ -109,7 +128,7 @@ export default Ember.Controller.extend({
       this.resetFilters();
     },
 
-    filterByAction: function(logItem) {
+    filterByAction(logItem) {
       this._changeFilters({
         action_name: logItem.get("action_name"),
         action_id: logItem.get("action"),
@@ -117,20 +136,24 @@ export default Ember.Controller.extend({
       });
     },
 
-    filterByStaffUser: function(acting_user) {
+    filterByStaffUser(acting_user) {
       this._changeFilters({ acting_user: acting_user.username });
     },
 
-    filterByTargetUser: function(target_user) {
+    filterByTargetUser(target_user) {
       this._changeFilters({ target_user: target_user.username });
     },
 
-    filterBySubject: function(subject) {
+    filterBySubject(subject) {
       this._changeFilters({ subject: subject });
     },
 
-    exportStaffActionLogs: function() {
+    exportStaffActionLogs() {
       exportEntity("staff_action").then(outputExportResult);
+    },
+
+    loadMore() {
+      this._refresh();
     }
   }
 });
diff --git a/app/assets/javascripts/admin/templates/logs/staff-action-logs.hbs b/app/assets/javascripts/admin/templates/logs/staff-action-logs.hbs
index dc7438e..0c20259 100644
--- a/app/assets/javascripts/admin/templates/logs/staff-action-logs.hbs
+++ b/app/assets/javascripts/admin/templates/logs/staff-action-logs.hbs
@@ -30,7 +30,7 @@
     {{/if}}
   </div>
   {{else}}
-    {{i18n "admin.logs.staff_actions.filter"}} {{combo-box content=userHistoryActions value=filterActionId none="admin.logs.staff_actions.all"}}
+    {{i18n "admin.logs.staff_actions.filter"}} {{combo-box content=userHistoryActions value=filterActionId none="admin.logs.staff_actions.all" onSelect=(action "filterActionIdChanged")}}
   {{/if}}
 
   {{d-button class="btn-default" action=(action "exportStaffActionLogs") label="admin.export_csv.button_text" icon="download"}}
@@ -38,67 +38,71 @@
 <div class="clearfix"></div>
 
 {{#staff-actions}}
-  {{#conditional-loading-spinner condition=loading}}
 
-<table class='table staff-logs grid'>
+{{#load-more selector=".staff-logs tr" action=(action "loadMore")}}
+  {{#if showTable}}
+    <table class='table staff-logs grid'>
 
-  <thead>
-    <th>{{i18n 'admin.logs.staff_actions.staff_user'}}</th>
-    <th>{{i18n 'admin.logs.action'}}</th>
-    <th>{{i18n 'admin.logs.staff_actions.subject'}}</th>
-    <th>{{i18n 'admin.logs.staff_actions.when'}}</th>
-    <th>{{i18n 'admin.logs.staff_actions.details'}}</th>
-    <th>{{i18n 'admin.logs.staff_actions.context'}}</th>
-  </thead>
+      <thead>
+        <th>{{i18n 'admin.logs.staff_actions.staff_user'}}</th>
+        <th>{{i18n 'admin.logs.action'}}</th>
+        <th>{{i18n 'admin.logs.staff_actions.subject'}}</th>
+        <th>{{i18n 'admin.logs.staff_actions.when'}}</th>
+        <th>{{i18n 'admin.logs.staff_actions.details'}}</th>
+        <th>{{i18n 'admin.logs.staff_actions.context'}}</th>
+      </thead>
 
-  <tbody>
+      <tbody>

[... diff too long, it was truncated ...]

GitHub sha: e0c821eb

1 Like

DEV: Missing loading spinner for staff action logs.