Group choices for scheduling a job by day

The options for scheduling a job by time should be grouped by day,
because a long list of 96 options is not very usable.

On the server side, this commit generates label for the next 4 days in
a friendly format (ie today/tomorrow/Sunday/Monday)

The Javascript component for choosing a time was built in a kind of
old-school jQuery way, where it manipulated the elements on the page.
The complexity of introducing groups of options was just too much for
this pattern, because it involves storing a lot of state in the DOM.

This commit completely rewrites the JS to:

- read the initial options and groups from the HTML and store them
  in the object
- use Hogan to completely re-render the UI from a series of Mustache
  templates, each of which represents a state of the UI and takes the
  inital options and groups
- filter the choices to show when the today/tomorrow/… buttons are
  clicked

app/assets/javascripts/radioSelect.js

@@ -2,89 +2,142 @@
 
   "use strict";
 
-  var render = ($options, $button) => (
+  let states = {
-    filterOptionVisibility($options) && setButtonState($options, $button)
+    'initial': Hogan.compile(`
-  );
+      <div class="radio-select-column">
+        <label class="block-label" for="{{name}}-0">
+          <input checked="checked" id="{{name}}-0" name="{{name}}" type="radio" value=""> Now
+        </label>
+      </div>
+      <div class="radio-select-column">
+        {{#categories}}
+          <input type='button' class='button tertiary-button js-category-button' value='{{.}}' />
+        {{/categories}}
+      </div>
+    `),
+    'choose': Hogan.compile(`
+      <div class="radio-select-column">
+        <label class="block-label" for="{{name}}-0">
+          <input checked="checked" id="{{name}}-0" name="{{name}}" type="radio" value="" class="js-initial-option"> Now
+        </label>
+      </div>
+      <div class="radio-select-column">
+        {{#choices}}
+          <label class="block-label" for="{{id}}">
+            <input type="radio" value="{{value}}" id="{{id}}" name="{{name}}" class="js-option" />
+            {{label}}
+          </label>
+        {{/choices}}
+      </div>
+    `),
+    'chosen': Hogan.compile(`
+      <div class="radio-select-column">
+        <label class="block-label" for="{{name}}-0">
+          <input id="{{name}}-0" name="{{name}}" type="radio" value="" class="js-initial-option"> Now
+        </label>
+      </div>
+      <div class="radio-select-column">
+        {{#choices}}
+          <label class="block-label" for="{{id}}">
+            <input checked="checked" type="radio" value="{{value}}" id="{{id}}" name="{{name}}" />
+            {{label}}
+          </label>
+        {{/choices}}
+      </div>
+      <div class="radio-select-column">
+        <input type='button' class='button tertiary-button js-reset-button' value='Choose a different time' />
+      </div>
+    `)
+  };
 
-  var filterOptionVisibility = $options => $options
+  let focusSelected = function() {
-    .removeClass('js-visible')
+    setTimeout(
-    .filter(
+      () => $('[type=radio]:checked').parent('label').blur().trigger('focus').addClass('selected'),
-      (index, element) => (index === 0 || $(element).has(':checked').length)
+      10
-    )
-    .addClass('js-visible');
-
-  var setButtonState = ($options, $button) => $button
-    .addClass('js-visible')
-    .prop(
-      'value',
-      $options.has(':checked').find('input').attr('id') === $options.eq(0).find('input').attr('id') ?
-        'Later' : 'Choose a different time'
     );
-
+  };
-  // Workaround because GOV.UK SelectionButtons doesn’t deselect in this case
-  var deselectUnchecked = $options => $options
-    .filter(
-      (index, element) => $(element).not(':has(:checked)')
-    ).removeClass('selected');
-
-  var refocus = $element => setTimeout(
-    () => $element.blur().trigger('focus'),
-    10
-  );
-
-  var renderIfComponentLosesFocus = ($options, $button, $focused) => () =>
-    ($focused.attr('type') !== 'radio') &&
-    render($options, $button) &&
-    refocus($focused); // Make sure that window scrolls to focused element
 
   Modules.RadioSelect = function() {
 
     this.start = function(component) {
 
       let $component = $(component);
-      let $options = $('label', $component);
+      let render = (state, data) => $component.html(states[state].render(data));
-
+      let choices = $('label', $component).toArray().map(function(element) {
-      $component.append(
+        let $element = $(element);
-        $button = $('<input type="button" value="Later" class="tertiary-button" />')
+        return {
-      );
+          'id': $element.attr('for'),
-
+          'label': $.trim($element.text()),
-      $button.on('click', () =>
+          'value': $element.find('input').attr('value')
-        $options.addClass('js-visible').has(':checked').focus() &&
+        };
-        $button.removeClass('js-visible')
-      );
-
-      $component.on('keydown', 'input[type=radio]', function() {
-
-        // intercept keypresses which aren’t enter or space
-        if (event.which !== 13 && event.which !== 32) {
-          setTimeout(
-            renderIfComponentLosesFocus($options, $button, $(document.activeElement)),
-            200
-          );
-          return true;
-        }
-
-        event.preventDefault();
-
-        render($options, $button);
-        refocus($(this));
-
       });
+      let categories = $component.data('categories').split(',');
+      let name = $component.find('input').eq(0).attr('name');
 
-      $component.on('click', 'input[type=radio]', function(event) {
+      $component
+        .on('click', '.js-category-button', function(event) {
 
-        deselectUnchecked($options);
+          event.preventDefault();
+          let day = $(this).attr('value');
+          render('choose', {
+            'choices': choices.filter(
+              element => element.label.indexOf(day) > -1
+            ),
+            'name': name
+          });
+          $('.js-option').eq(0).parent('label').trigger('focus');
 
-        // stop click being triggered by keyboard events
+        })
-        if (!event.pageX) return true;
+        .on('click', '.js-option', function(event) {
 
-        render($options, $button);
+          // stop click being triggered by keyboard events
-        refocus($(this));
+          if (!event.pageX) return true;
 
+          event.preventDefault();
+          let value = $(this).attr('value');
+          render('chosen', {
+            'choices': choices.filter(
+              element => element.value == value
+            ),
+            'name': name
+          });
+          focusSelected();
+
+        })
+        .on('keydown', 'input[type=radio]', function(event) {
+
+          // intercept keypresses which aren’t enter or space
+          if (event.which !== 13 && event.which !== 32) {
+            return true;
+          }
+
+          event.preventDefault();
+          let value = $(this).attr('value');
+          render('chosen', {
+            'choices': choices.filter(
+              element => element.value == value
+            ),
+            'name': name
+          });
+          focusSelected();
+
+        })
+        .on('click', '.js-reset-button', function(event) {
+
+          event.preventDefault();
+          render('initial', {
+            'categories': categories,
+            'name': name
+          });
+          focusSelected();
+
+        });
+
+      render('initial', {
+        'categories': categories,
+        'name': name
       });
 
-      render($options, $button);
-
     };
 
   };

app/assets/stylesheets/components/radio-select.scss

@@ -6,7 +6,9 @@
     vertical-align: top;
 
     .block-label {
-      margin-right: 10px;
+      margin-right: 5px;
+      padding-right: $gutter - 10px;
+      padding-left: 54px - 10px;
     }
 
   }
@@ -15,33 +17,12 @@
     display: inline-block;
     vertical-align: top;
     width: auto;
-    padding: 20px 30px 15px 30px;
+    padding: 20px $gutter-half 15px $gutter-half;
+    margin-right: 5px;
   }
 
   .js-enabled & {
 
-
-    .block-label {
-      &:last-child {
-        margin-bottom: 10px;
-      }
-    }
-
-    .block-label,
-    .tertiary-button {
-      display: none;
-    }
-
-    .js-visible {
-
-      display: block;
-
-      &.tertiary-button {
-        display: inline-block;
-      }
-
-    }
-
   }
 
 }

app/main/forms.py

@@ -342,6 +342,7 @@ class ChooseTimeForm(Form):
                 get_furthest_possible_scheduled_time()
             )
         ]
+        self.scheduled_for.categories = get_next_days_until(get_furthest_possible_scheduled_time())
 
     scheduled_for = RadioField(
         'When should Notify send these messages?',

app/templates/components/radios.html

@@ -38,7 +38,7 @@
          </span>
        {% endif %}
      </legend>
-     <div class="radio-select" data-module="radio-select">
+     <div class="radio-select" data-module="radio-select" data-categories="{{ field.categories|join(',') }}">
        <div class="radio-select-column">
        {% for option in field %}
          <label class="block-label" for="{{ option.id }}">

tests/app/main/test_choose_time_form.py

@@ -36,3 +36,10 @@ def test_form_contains_next_24h(app_):
 @freeze_time("2016-01-01 11:09:00.061258")
 def test_form_defaults_to_now(app_):
     assert ChooseTimeForm().scheduled_for.data == ''
+
+
+@freeze_time("2016-01-01 11:09:00.061258")
+def test_form_contains_next_three_days(app_):
+    assert ChooseTimeForm().scheduled_for.categories == [
+        'Today', 'Tomorrow', 'Sunday', 'Monday'
+    ]