UX: simplify setting reminders

app/serializers/discourse_post_event/event_serializer.rb

@@ -31,7 +31,8 @@ module DiscoursePostEvent
     def reminders
       (object.reminders || '').split(',').map do |reminder|
         value, unit = reminder.split('.')
-        { value: value.to_i, unit: unit }
+        value = value.to_i
+        { value: value.to_i.abs, unit: unit, period: value > 0 ? 'before' : 'after' }
       end
     end
 

assets/javascripts/discourse/controllers/discourse-post-event-builder.js.es6

@@ -9,7 +9,7 @@ import { Promise } from "rsvp";
 
 import { buildParams, replaceRaw } from "../../lib/raw-event-helper";
 
-const DEFAULT_REMINDER = { value: 15, unit: "minutes" };
+const DEFAULT_REMINDER = { value: 15, unit: "minutes", period: "before" };
 
 export default Controller.extend(ModalFunctionality, {
   reminders: null,
@@ -19,6 +19,7 @@ export default Controller.extend(ModalFunctionality, {
     this._super(...arguments);
 
     this.set("reminderUnits", ["minutes", "hours", "days", "weeks"]);
+    this.set("reminderPeriods", ["before", "after"]);
   },
 
   modalTitle: computed("model.eventModel.isNew", {

assets/javascripts/discourse/templates/modal/discourse-post-event-builder.hbs

@@ -66,12 +66,12 @@
       {{/event-field}}
 
       {{#event-field class="reminders" label="discourse_post_event.builder_modal.reminders.label"}}
-        <p class="event-field-description">{{i18n "discourse_post_event.builder_modal.reminders.description"}}</p>
         <div class="reminders-list">
           {{#each model.eventModel.reminders as |reminder|}}
             <div class="reminder-item">
               {{input
                 class="reminder-value"
+                min=0
                 value=(readonly reminder.value)
                 placeholderKey="discourse_post_event.builder_modal.name.placeholder"
                 input=(action (mut reminder.value) value="target.value")
@@ -86,6 +86,15 @@
                 onChange=(action (mut reminder.unit))
               }}
 
+              {{combo-box
+                class="reminder-period"
+                value=reminder.period
+                nameProperty=null
+                valueProperty=null
+                content=reminderPeriods
+                onChange=(action (mut reminder.period))
+              }}
+
               {{d-button
                 class="remove-reminder"
                 icon="times"

assets/javascripts/lib/raw-event-helper.js.es6

@@ -39,7 +39,20 @@ export function buildParams(startsAt, endsAt, eventModel) {
 
   if (eventModel.reminders && eventModel.reminders.length) {
     params.reminders = eventModel.reminders
-      .map(r => `${r.value}.${r.unit}`)
+      .map(r => {
+        // we create a new intermediate object to avoid changes in the UI while
+        // we prepare the values for request
+        const reminder = Object.assign({}, r);
+
+        if (reminder.period === "after") {
+          reminder.value = `-${Math.abs(parseInt(reminder.value, 10))}`;
+        }
+        if (reminder.period === "before") {
+          reminder.value = Math.abs(parseInt(`${reminder.value}`, 10));
+        }
+
+        return `${reminder.value}.${reminder.unit}`;
+      })
       .join(",");
   }
 

assets/stylesheets/common/discourse-post-event-builder.scss

@@ -165,7 +165,17 @@
         padding: 0.25em 0;
 
         .reminder-value {
-          width: 80px;
+          width: 60px;
+          margin-right: 0.5em;
+        }
+
+        .reminder-unit {
+          width: 140;
+          margin-right: 0.5em;
+        }
+
+        .reminder-period {
+          width: 100%;
           margin-right: 0.5em;
         }
 

config/locales/client.en.yml

@@ -343,7 +343,6 @@ en:
         add_reminder: Add reminder
         reminders:
           label: Reminders
-          description: A negative value will be sent after event started to `going` users who didn't visit the event since it started.
         url:
           label: URL
           placeholder: Optional