From ab9e2bbd7fc6cc6793a0d6e39c6252fc0d0b719b Mon Sep 17 00:00:00 2001
From: jjaffeux <j.jaffeux@gmail.com>
Date: Wed, 12 Aug 2020 13:16:54 +0200
Subject: [PATCH] UX: simplify setting reminders

---
 .../discourse_post_event/event_serializer.rb      |  3 ++-
 .../discourse-post-event-builder.js.es6           |  3 ++-
 .../modal/discourse-post-event-builder.hbs        | 11 ++++++++++-
 assets/javascripts/lib/raw-event-helper.js.es6    | 15 ++++++++++++++-
 .../common/discourse-post-event-builder.scss      | 12 +++++++++++-
 config/locales/client.en.yml                      |  1 -
 6 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/app/serializers/discourse_post_event/event_serializer.rb b/app/serializers/discourse_post_event/event_serializer.rb
index 0ccdb5dc..ebe85ce4 100644
--- a/app/serializers/discourse_post_event/event_serializer.rb
+++ b/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
 
diff --git a/assets/javascripts/discourse/controllers/discourse-post-event-builder.js.es6 b/assets/javascripts/discourse/controllers/discourse-post-event-builder.js.es6
index 16cf6de8..37006b84 100644
--- a/assets/javascripts/discourse/controllers/discourse-post-event-builder.js.es6
+++ b/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", {
diff --git a/assets/javascripts/discourse/templates/modal/discourse-post-event-builder.hbs b/assets/javascripts/discourse/templates/modal/discourse-post-event-builder.hbs
index ca0cd99e..d2bc0ff1 100644
--- a/assets/javascripts/discourse/templates/modal/discourse-post-event-builder.hbs
+++ b/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"
diff --git a/assets/javascripts/lib/raw-event-helper.js.es6 b/assets/javascripts/lib/raw-event-helper.js.es6
index ed543466..78699a57 100644
--- a/assets/javascripts/lib/raw-event-helper.js.es6
+++ b/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(",");
   }
 
diff --git a/assets/stylesheets/common/discourse-post-event-builder.scss b/assets/stylesheets/common/discourse-post-event-builder.scss
index 5be194bb..a43301fd 100644
--- a/assets/stylesheets/common/discourse-post-event-builder.scss
+++ b/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;
         }
 
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 8fb20ef7..5dc2bf0b 100644
--- a/config/locales/client.en.yml
+++ b/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