UX: rework date time input range (#9524)

UX: rework date time input range (#9524)

diff --git a/app/assets/javascripts/admin/components/admin-report.js b/app/assets/javascripts/admin/components/admin-report.js
index 178bef9..97db7c9 100644
--- a/app/assets/javascripts/admin/components/admin-report.js
+++ b/app/assets/javascripts/admin/components/admin-report.js
@@ -1,7 +1,7 @@
 import discourseComputed from "discourse-common/utils/decorators";
 import { makeArray } from "discourse-common/lib/helpers";
-import { alias, or, and, reads, equal, notEmpty } from "@ember/object/computed";
-import EmberObject from "@ember/object";
+import { alias, or, and, equal, notEmpty } from "@ember/object/computed";
+import EmberObject, { computed, action } from "@ember/object";
 import { next } from "@ember/runloop";
 import Component from "@ember/component";
 import ReportLoader from "discourse/lib/reports-loader";
@@ -9,6 +9,7 @@ import { exportEntity } from "discourse/lib/export-csv";
 import { outputExportResult } from "discourse/lib/export-result";
 import Report, { SCHEMA_VERSION } from "admin/models/report";
 import ENV from "discourse-common/config/environment";
+import { isPresent } from "@ember/utils";
 
 const TABLE_OPTIONS = {
   perPage: 8,
@@ -69,8 +70,21 @@ export default Component.extend({
     this._reports = [];
   },
 
-  startDate: reads("filters.startDate"),
-  endDate: reads("filters.endDate"),
+  startDate: computed("filters.startDate", function() {
+    if (this.filters && isPresent(this.filters.startDate)) {
+      return moment(this.filters.startDate, "YYYY-MM-DD");
+    } else {
+      return moment();
+    }
+  }),
+
+  endDate: computed("filters.endDate", function() {
+    if (this.filters && isPresent(this.filters.endDate)) {
+      return moment(this.filters.endDate, "YYYY-MM-DD");
+    } else {
+      return moment();
+    }
+  }),
 
   didReceiveAttrs() {
     this._super(...arguments);
@@ -126,39 +140,18 @@ export default Component.extend({
     return `admin-report-${currentMode.replace(/_/g, "-")}`;
   },
 
-  @discourseComputed("startDate")
-  normalizedStartDate(startDate) {
-    return startDate && typeof startDate.isValid === "function"
-      ? moment
-          .utc(startDate.toISOString())
-          .locale("en")
-          .format("YYYYMMDD")
-      : moment(startDate)
-          .locale("en")
-          .format("YYYYMMDD");
-  },
-
-  @discourseComputed("endDate")
-  normalizedEndDate(endDate) {
-    return endDate && typeof endDate.isValid === "function"
-      ? moment
-          .utc(endDate.toISOString())
-          .locale("en")
-          .format("YYYYMMDD")
-      : moment(endDate)
-          .locale("en")
-          .format("YYYYMMDD");
-  },
-
   @discourseComputed(
     "dataSourceName",
-    "normalizedStartDate",
-    "normalizedEndDate",
+    "startDate",
+    "endDate",
     "filters.customFilters"
   )
   reportKey(dataSourceName, startDate, endDate, customFilters) {
     if (!dataSourceName || !startDate || !endDate) return null;
 
+    startDate = startDate.toISOString(true).split("T")[0];
+    endDate = endDate.toISOString(true).split("T")[0];
+
     let reportKey = "reports:";
     reportKey += [
       dataSourceName,
@@ -179,74 +172,61 @@ export default Component.extend({
     return reportKey;
   },
 
-  actions: {
-    onChangeEndDate(date) {
-      const startDate = moment(this.startDate);
-      const newEndDate = moment(date).endOf("day");
-
-      if (newEndDate.isSameOrAfter(startDate)) {
-        this.set("endDate", newEndDate.format("YYYY-MM-DD"));
-      } else {
-        this.set("endDate", startDate.endOf("day").format("YYYY-MM-DD"));
-      }
-
-      this.send("refreshReport");
-    },
+  @action
+  onChangeDateRange(range) {
+    this.send("refreshReport", {
+      startDate: range.from,
+      endDate: range.to
+    });
+  },
 
-    onChangeStartDate(date) {
-      const endDate = moment(this.endDate);
-      const newStartDate = moment(date).startOf("day");
+  @action
+  applyFilter(id, value) {
+    let customFilters = this.get("filters.customFilters") || {};
 
-      if (newStartDate.isSameOrBefore(endDate)) {
-        this.set("startDate", newStartDate.format("YYYY-MM-DD"));
-      } else {
-        this.set("startDate", endDate.startOf("day").format("YYYY-MM-DD"));
-      }
+    if (typeof value === "undefined") {
+      delete customFilters[id];
+    } else {
+      customFilters[id] = value;
+    }
 
-      this.send("refreshReport");
-    },
+    this.send("refreshReport", {
+      filters: customFilters
+    });
+  },
 
-    applyFilter(id, value) {
-      let customFilters = this.get("filters.customFilters") || {};
+  @action
+  refreshReport(options = {}) {
+    this.attrs.onRefresh({
+      type: this.get("model.type"),
+      startDate:
+        typeof options.startDate === "undefined"
+          ? this.startDate
+          : options.startDate,
+      endDate:
+        typeof options.endDate === "undefined" ? this.endDate : options.endDate,
+      filters:
+        typeof options.filters === "undefined"
+          ? this.get("filters.customFilters")
+          : options.filters
+    });
+  },
 
-      if (typeof value === "undefined") {
-        delete customFilters[id];
-      } else {
-        customFilters[id] = value;
-      }
+  @action
+  exportCsv() {
+    const customFilters = this.get("filters.customFilters") || {};
+    exportEntity("report", {
+      name: this.get("model.type"),
+      start_date: this.startDate.toISOString(true).split("T")[0],
+      end_date: this.endDate.toISOString(true).split("T")[0],
+      category_id: customFilters.category,
+      group_id: customFilters.group
+    }).then(outputExportResult);
+  },
 
-      this.attrs.onRefresh({
-        type: this.get("model.type"),
-        startDate: this.startDate,
-        endDate: this.endDate,
-        filters: customFilters
-      });
-    },
-
-    refreshReport() {
-      this.attrs.onRefresh({
-        type: this.get("model.type"),
-        startDate: this.startDate,
-        endDate: this.endDate,
-        filters: this.get("filters.customFilters")
-      });
-    },
-
-    exportCsv() {
-      const customFilters = this.get("filters.customFilters") || {};
-
-      exportEntity("report", {
-        name: this.get("model.type"),
-        start_date: this.startDate,
-        end_date: this.endDate,
-        category_id: customFilters.category,
-        group_id: customFilters.group
-      }).then(outputExportResult);
-    },
-
-    changeMode(mode) {
-      this.set("currentMode", mode);
-    }
+  @action
+  changeMode(mode) {
+    this.set("currentMode", mode);
   },
 
   _computeReport() {
@@ -276,10 +256,8 @@ export default Component.extend({
     if (!this.startDate || !this.endDate) {
       report = sort(filteredReports)[0];
     } else {
-      const reportKey = this.reportKey;
-
       report = sort(
-        filteredReports.filter(r => r.report_key.includes(reportKey))
+        filteredReports.filter(r => r.report_key.includes(this.reportKey))
       )[0];
 
       if (!report) return;
@@ -339,15 +317,15 @@ export default Component.extend({
     let payload = { data: { cache: true, facets } };
 
     if (this.startDate) {
-      payload.data.start_date = moment
-        .utc(this.startDate, "YYYY-MM-DD")
-        .toISOString();
+      payload.data.start_date = moment(this.startDate)
+        .toISOString(true)
+        .split("T")[0];
     }
 
     if (this.endDate) {
-      payload.data.end_date = moment
-        .utc(this.endDate, "YYYY-MM-DD")
-        .toISOString();
+      payload.data.end_date = moment(this.endDate)
+        .toISOString(true)
+        .split("T")[0];
     }
 
     if (this.get("reportOptions.table.limit")) {
diff --git a/app/assets/javascripts/admin/routes/admin-reports-show.js b/app/assets/javascripts/admin/routes/admin-reports-show.js
index 1fa8bc7..3a8a543 100644
--- a/app/assets/javascripts/admin/routes/admin-reports-show.js
+++ b/app/assets/javascripts/admin/routes/admin-reports-show.js

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

GitHub sha: 3bbd8b12

This commit appears in #9524 which was merged by jjaffeux.