Admin controls to select a date range for reports

app/assets/javascripts/admin/controllers/admin-reports.js.es6

@@ -2,17 +2,27 @@ export default Ember.ObjectController.extend({
   viewMode: 'table',
   viewingTable: Em.computed.equal('viewMode', 'table'),
   viewingBarChart: Em.computed.equal('viewMode', 'barChart'),
+  startDate: null,
+  endDate: null,
+  refreshing: false,
 
   actions: {
-    // Changes the current view mode to 'table'
+    refreshReport: function() {
+      var self = this;
+      this.set('refreshing', true);
+      Discourse.Report.find(this.get('type'), this.get('startDate'), this.get('endDate')).then(function(r) {
+        self.set('model', r);
+      }).finally(function() {
+        self.set('refreshing', false);
+      });
+    },
+
     viewAsTable: function() {
       this.set('viewMode', 'table');
     },
 
-    // Changes the current view mode to 'barChart'
     viewAsBarChart: function() {
       this.set('viewMode', 'barChart');
     }
   }
-
 });

app/assets/javascripts/admin/models/report.js

@@ -140,9 +140,12 @@ Discourse.Report = Discourse.Model.extend({
 });
 
 Discourse.Report.reopenClass({
-  find: function(type) {
+  find: function(type, startDate, endDate) {
-    var model = Discourse.Report.create({type: type});
+
-    Discourse.ajax("/admin/reports/" + type).then(function (json) {
+    return Discourse.ajax("/admin/reports/" + type, {data: {
+      start_date: startDate,
+      end_date: endDate
+    }}).then(function (json) {
       // Add a percent field to each tuple
       var maxY = 0;
       json.report.data.forEach(function (row) {
@@ -153,9 +156,9 @@ Discourse.Report.reopenClass({
           row.percentage = Math.round((row.y / maxY) * 100);
         });
       }
+      var model = Discourse.Report.create({type: type});
       model.setProperties(json.report);
-      model.set('loaded', true);
+      return model;
     });
-    return(model);
   }
 });

app/assets/javascripts/admin/routes/admin_reports_route.js

@@ -9,5 +9,13 @@
 Discourse.AdminReportsRoute = Discourse.Route.extend({
   model: function(params) {
     return Discourse.Report.find(params.type);
+  },
+
+  setupController: function(controller, model) {
+    controller.setProperties({
+      model: model,
+      startDate: moment(model.get('start_date')).format('YYYY-MM-DD'),
+      endDate: moment(model.get('end_date')).format('YYYY-MM-DD')
+    });
   }
 });

app/assets/javascripts/admin/templates/reports.hbs

@@ -1,14 +1,28 @@
-{{#if loaded}}
+<h3>{{title}}</h3>
-  <h3>{{title}}</h3>
 
-  <button class='btn'
+<div>
-          {{action "viewAsTable"}}
+  {{i18n admin.dashboard.reports.start_date}} {{input type="date" value=startDate}}
-          {{bind-attr disabled="viewingTable"}}>{{i18n admin.dashboard.reports.view_table}}</button>
+  {{i18n admin.dashboard.reports.end_date}} {{input type="date" value=endDate}}
+  <button {{action refreshReport}} class='btn btn-primary'>{{i18n admin.dashboard.reports.refresh_report}}</button>
+</div>
 
-  <button class='btn'
+<div class='view-options'>
-          {{action "viewAsBarChart"}}
+  {{#if viewingTable}}
-          {{bind-attr disabled="viewingBarChart"}}>{{i18n admin.dashboard.reports.view_chart}}</button>
+    {{i18n admin.dashboard.reports.view_table}}
+  {{else}}
+    <a href {{action "viewAsTable"}}>{{i18n admin.dashboard.reports.view_table}}</a>
+  {{/if}}
+  |
+  {{#if viewingBarChart}}
+    {{i18n admin.dashboard.reports.view_chart}}
+  {{else}}
+    <a href {{action "viewAsBarChart"}}>{{i18n admin.dashboard.reports.view_chart}}</a>
+  {{/if}}
+</div>
 
+{{#if refreshing}}
+  {{loading-spinner}}
+{{else}}
   <table class='table report'>
     <tr>
       <th>{{xaxis}}</th>
@@ -31,7 +45,4 @@
       </tr>
     {{/each}}
   </table>
-
-{{else}}
-  {{i18n loading}}
 {{/if}}

app/assets/stylesheets/common/admin/admin_base.scss

@@ -39,6 +39,9 @@ td.flaggers td {
     }
   }
 
+  .view-options {
+    float: right;
+  }
   table.report {
     margin-top: 20px;
     tr {

config/locales/client.en.yml

@@ -1508,8 +1508,11 @@ en:
           7_days_ago: "7 Days Ago"
           30_days_ago: "30 Days Ago"
           all: "All"
-          view_table: "View as Table"
+          view_table: "table"
-          view_chart: "View as Bar Chart"
+          view_chart: "bar chart"
+          refresh_report: "Refresh Report"
+          start_date: "Start Date"
+          end_date: "End Date"
 
       commits:
         latest_changes: "Latest changes: please update often!"