UX: experimental ranges for local dates

plugins/discourse-local-dates/assets/javascripts/discourse/components/discourse-local-dates-create-form.js.es6

@@ -1,5 +1,5 @@
 import computed from "ember-addons/ember-computed-decorators";
-import { observes } from 'ember-addons/ember-computed-decorators';
+import { observes } from "ember-addons/ember-computed-decorators";
 
 export default Ember.Component.extend({
   timeFormat: "HH:mm",
@@ -7,7 +7,9 @@ export default Ember.Component.extend({
   dateTimeFormat: "YYYY-MM-DD HH:mm",
   config: null,
   date: null,
+  toDate: null,
   time: null,
+  toTime: null,
   format: null,
   formats: null,
   recurring: null,
@@ -17,10 +19,17 @@ export default Ember.Component.extend({
     this._super();
 
     this.set("date", moment().format(this.dateFormat));
-    this.set("time", moment().format(this.timeFormat));
     this.set("format", `LLL`);
-    this.set("timezones", (this.siteSettings.discourse_local_dates_default_timezones || "").split("|").filter(f => f));
+    this.set(
-    this.set("formats", (this.siteSettings.discourse_local_dates_default_formats || "").split("|"));
+      "timezones",
+      (this.siteSettings.discourse_local_dates_default_timezones || "")
+        .split("|")
+        .filter(f => f)
+    );
+    this.set(
+      "formats",
+      (this.siteSettings.discourse_local_dates_default_formats || "").split("|")
+    );
   },
 
   didInsertElement() {
@@ -54,53 +63,129 @@ export default Ember.Component.extend({
       { name: "Every two months", id: "2.months" },
       { name: "Every three months", id: "3.months" },
       { name: "Every six months", id: "6.months" },
-      { name: "Every year", id: "1.years" },
+      { name: "Every year", id: "1.years" }
     ];
   },
 
   @computed()
   allTimezones() {
-    return _.map(moment.tz.names(), (z) => z);
+    return _.map(moment.tz.names(), z => z);
   },
 
-  @observes("date", "time", "recurring", "format", "timezones")
+  @observes(
+    "date",
+    "time",
+    "toDate",
+    "toTime",
+    "recurring",
+    "format",
+    "timezones"
+  )
   _setConfig() {
     const date = this.get("date");
+    const toDate = this.get("toDate");
     const time = this.get("time");
+    const toTime = this.get("toTime");
     const recurring = this.get("recurring");
     const format = this.get("format");
     const timezones = this.get("timezones");
-    const dateTime = moment(`${date} ${time}`, this.dateTimeFormat).utc();
 
-    this.set("config", {
+    let dateTime;
+
+    if (time) {
+      dateTime = moment(`${date} ${time}`, this.dateTimeFormat).utc();
+    } else {
+      dateTime = moment(date, this.dateFormat).utc();
+    }
+
+    let toDateTime;
+    if (toTime) {
+      toDateTime = moment(`${toDate} ${toTime}`, this.dateTimeFormat).utc();
+    } else {
+      toDateTime = moment(toDate, this.dateFormat).utc();
+    }
+
+    let config = {
       date: dateTime.format(this.dateFormat),
-      time: dateTime.format(this.timeFormat),
       dateTime,
       recurring,
       format,
-      timezones,
+      timezones
-    });
+    };
+
+    if (time) {
+      config.time = dateTime.format(this.timeFormat);
+    }
+
+    if (toDate) {
+      config.toDate = toDateTime.format(this.dateFormat);
+    }
+
+    if (toTime) {
+      config.toTime = toDateTime.format(this.timeFormat);
+    }
+
+    if (!time && !toTime && ["LLL", "LLLL", "LLLLL"].includes(format)) {
+      config.format = "LL";
+    }
+
+    if (toDate) {
+      config.toDateTime = toDateTime;
+    }
+
+    this.set("config", config);
   },
 
   getTextConfig(config) {
     let text = `[date=${config.date} `;
     if (config.recurring) text += `recurring=${config.recurring} `;
+
+    if (config.time) {
       text += `time=${config.time} `;
+    }
+
     text += `format="${config.format}" `;
     text += `timezones="${config.timezones.join("|")}"`;
     text += `]`;
+
+    if (config.toDate) {
+      text += ` ➡ `;
+      text += `[date=${config.toDate} `;
+
+      if (config.toTime) {
+        text += `time=${config.toTime} `;
+      }
+
+      text += `format="${config.format}" `;
+      text += `timezones="${config.timezones.join("|")}"`;
+      text += `]`;
+    }
+
     return text;
   },
 
-  @computed("config.dateTime")
+  @computed("config.dateTime", "config.toDateTime")
-  validDate(dateTime) {
+  validDate(dateTime, toDateTime) {
     if (!dateTime) return false;
+
+    if (toDateTime) {
+      if (!toDateTime.isValid()) {
+        return false;
+      }
+
+      if (toDateTime.diff(dateTime) < 0) {
+        return false;
+      }
+    }
+
     return dateTime.isValid();
   },
 
   @computed("advancedMode")
   toggleModeBtnLabel(advancedMode) {
-    return advancedMode ? "discourse_local_dates.create.form.simple_mode" : "discourse_local_dates.create.form.advanced_mode";
+    return advancedMode
+      ? "discourse_local_dates.create.form.simple_mode"
+      : "discourse_local_dates.create.form.advanced_mode";
   },
 
   actions: {

plugins/discourse-local-dates/assets/javascripts/discourse/templates/components/discourse-local-dates-create-form.hbs

@@ -6,12 +6,14 @@
 
   <div class="form">
     <div class="date-time-configuration">
+      <div class="range">
+        <div class="from">
           <div class="control-group date">
             <label class="control-label">
               {{i18n "discourse_local_dates.create.form.date_title"}}
             </label>
             <div class="controls">
-          {{date-picker-future class="date-input" value=date defaultDate="DD-MM-YYYY"}}
+              {{date-picker class="date-input" value=date defaultDate="DD-MM-YYYY"}}
             </div>
           </div>
 
@@ -23,6 +25,30 @@
               {{input type="time" value=time class="time-input"}}
             </div>
           </div>
+        </div>
+
+        <span class="to-indicator"><span>to</span></span>
+
+        <div class="to">
+          <div class="control-group date">
+            <label class="control-label">
+              {{i18n "discourse_local_dates.create.form.date_title"}}
+            </label>
+            <div class="controls">
+              {{date-picker class="date-input" value=toDate defaultDate="DD-MM-YYYY"}}
+            </div>
+          </div>
+
+          <div class="control-group time">
+            <label class="control-label">
+              {{i18n "discourse_local_dates.create.form.time_title"}}
+            </label>
+            <div class="controls">
+              {{input type="time" value=toTime class="time-input"}}
+            </div>
+          </div>
+        </div>
+      </div>
 
       <span class="preview">{{currentUserTimezone}}</span>
     </div>

plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss

@@ -60,6 +60,25 @@
     .date-time-configuration {
       display: flex;
       align-items: center;
+      flex-direction: row;
+
+      .range {
+        .from {
+          flex-direction: row;
+          display: flex;
+        }
+
+        .to {
+          flex-direction: row;
+          display: flex;
+        }
+
+        .to-indicator {
+          display: flex;
+          justify-content: center;
+          margin: 0.5em 0;
+        }
+      }
 
       .date {
         .date-input {
@@ -76,8 +95,6 @@
       }
 
       .time {
-        margin-right: 1em;
-
         .time-input {
           margin: 0 0.5em 0 0;
           width: 120px;
@@ -86,13 +103,20 @@
       }
 
       .preview {
+        flex: 1;
         margin-top: 16px;
+        text-align: center;
       }
 
       @include small-width {
         flex-direction: column;
         align-items: flex-start;
 
+        .range .from,
+        .range .to {
+          flex-direction: column;
+        }
+
         .date .date-input .date-picker {
           width: 200px;
         }