FEATURE: uses category-chooser for report filtering (#6174)

app/assets/javascripts/admin/components/admin-report.js.es6

@@ -1,3 +1,4 @@
+import Category from "discourse/models/category";
 import { exportEntity } from "discourse/lib/export-csv";
 import { outputExportResult } from "discourse/lib/export-result";
 import { ajax } from "discourse/lib/ajax";
@@ -59,11 +60,10 @@ export default Ember.Component.extend({
   showDatesOptions: Ember.computed.alias("model.dates_filtering"),
   showGroupOptions: Ember.computed.alias("model.group_filtering"),
   showExport: Ember.computed.not("model.onlyTable"),
-  hasFilteringActions: Ember.computed.or(
+  showRefresh: Ember.computed.or(
     "showCategoryOptions",
     "showDatesOptions",
-    "showGroupOptions",
+    "showGroupOptions"
-    "showExport"
   ),
 
   init() {
@@ -75,6 +75,14 @@ export default Ember.Component.extend({
   didReceiveAttrs() {
     this._super(...arguments);
 
+    const state = this.get("filteringState");
+    this.setProperties({
+      category: Category.findById(state.categoryId),
+      groupId: state.groupId,
+      startDate: state.startDate,
+      endDate: state.endDate
+    });
+
     if (this.get("report")) {
       this._renderReport(
         this.get("report"),
@@ -133,16 +141,6 @@ export default Ember.Component.extend({
     });
   },
 
-  @computed()
-  categoryOptions() {
-    const arr = [{ name: I18n.t("category.all"), value: "all" }];
-    return arr.concat(
-      Discourse.Site.currentProp("sortedCategories").map(i => {
-        return { name: i.get("name"), value: i.get("id") };
-      })
-    );
-  },
-
   @computed()
   groupOptions() {
     const arr = [
@@ -207,6 +205,15 @@ export default Ember.Component.extend({
   },
 
   actions: {
+    refreshReport() {
+      this.attrs.onRefresh({
+        categoryId: this.get("category.id"),
+        groupId: this.get("groupId"),
+        startDate: this.get("startDate"),
+        endDate: this.get("endDate")
+      });
+    },
+
     exportCsv() {
       exportEntity("report", {
         name: this.get("model.type"),

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

@@ -2,8 +2,6 @@ import computed from "ember-addons/ember-computed-decorators";
 
 export default Ember.Controller.extend({
   queryParams: ["start_date", "end_date", "category_id", "group_id"],
-  categoryId: null,
-  groupId: null,
 
   @computed("model.type")
   reportOptions(type) {
@@ -16,21 +14,24 @@ export default Ember.Controller.extend({
     return options;
   },
 
+  @computed("category_id", "group_id", "start_date", "end_date")
+  filteringState(categoryId, groupId, startDate, endDate) {
+    return {
+      categoryId,
+      groupId,
+      startDate,
+      endDate
+    };
+  },
+
   actions: {
-    onSelectStartDate(startDate) {
+    onParamsChange(params) {
-      this.set("start_date", startDate);
+      this.setProperties({
-    },
+        start_date: params.startDate,
-
+        category_id: params.categoryId,
-    onSelectCategory(categoryId) {
+        group_id: params.groupId,
-      this.set("category_id", categoryId);
+        end_date: params.endDate
-    },
+      });
-
-    onSelectGroup(groupId) {
-      this.set("group_id", groupId);
-    },
-
-    onSelectEndDate(endDate) {
-      this.set("end_date", endDate);
     }
   }
 });

app/assets/javascripts/admin/templates/components/admin-report.hbs

@@ -73,7 +73,6 @@
       {{/unless}}
 
       {{#if showFilteringUI}}
-      {{#if hasFilteringActions}}
         <div class="report-filters">
           {{#if showDatesOptions}}
             <div class="filtering-control">
@@ -84,8 +83,7 @@
               <div class="filtering-input">
                 {{date-picker-past
                   value=startDate
-                  defaultDate=startDate
+                  defaultDate=startDate}}
-                  onSelect=onSelectStartDate}}
               </div>
             </div>
 
@@ -97,8 +95,7 @@
               <div class="filtering-input">
                 {{date-picker-past
                   value=endDate
-                  defaultDate=endDate
+                  defaultDate=endDate}}
-                  onSelect=onSelectEndDate}}
               </div>
             </div>
           {{/if}}
@@ -106,13 +103,10 @@
           {{#if showCategoryOptions}}
             <div class="filtering-control">
               <div class="filtering-input">
-                {{combo-box
+                {{search-advanced-category-chooser
-                  onSelect=onSelectCategory
                   filterable=true
-                  valueAttribute="value"
+                  value=category
-                  content=categoryOptions
+                  castInteger=true}}
-                  castInteger=true
-                  value=categoryId}}
               </div>
             </div>
           {{/if}}
@@ -121,7 +115,6 @@
             <div class="filtering-control">
               <div class="filtering-input">
                 {{combo-box
-                  onSelect=onSelectGroup
                   castInteger=true
                   filterable=true
                   valueAttribute="value"
@@ -134,13 +127,28 @@
           {{#if showExport}}
             <div class="filtering-control">
               <div class="filtering-input">
-                {{d-button class="export-btn" action="exportCsv" label="admin.export_csv.button_text" icon="download"}}
+                {{d-button
+                  class="export-csv-btn"
+                  action="exportCsv"
+                  label="admin.export_csv.button_text"
+                  icon="download"}}
+              </div>
+            </div>
+          {{/if}}
+
+          {{#if showRefresh}}
+            <div class="filtering-control">
+              <div class="filtering-input">
+                {{d-button
+                  class="refresh-report-btn btn-primary"
+                  action="refreshReport"
+                  label="admin.dashboard.reports.refresh_report"
+                  icon="refresh"}}
               </div>
             </div>
           {{/if}}
         </div>
       {{/if}}
-      {{/if}}
     </div>
 
     {{#if model.relatedReport}}

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

@@ -3,14 +3,9 @@
     {{admin-report
       showAllReportsLink=true
       dataSourceName=model.type
-      categoryId=category_id
+      filteringState=filteringState
-      groupId=group_id
       reportOptions=reportOptions
-      startDate=start_date
-      endDate=end_date
       showFilteringUI=true
-      onSelectCategory=(action "onSelectCategory")
+      onRefresh=(action "onParamsChange")}}
-      onSelectStartDate=(action "onSelectStartDate")
-      onSelectEndDate=(action "onSelectEndDate")}}
   </div>
 </div>

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

@@ -108,9 +108,12 @@
 
         .date-picker-wrapper,
         .combo-box,
-        .export-btn {
+        .export-csv-btn,
+        .refresh-report-btn {
           width: 100%;
+        }
 
+        .date-picker-wrapper {
           .date-picker {
             width: 100%;
             box-sizing: border-box;