darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-07-18 13:39:57 -04:00
Code Issues Packages Projects Releases Wiki Activity

Group choices for scheduling a job by day

Browse Source 
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
This commit is contained in:
Chris Hill-Scott
2016-10-11 14:17:29 +01:00
parent 324e1f9ef4
commit a78d9d5048
5 changed files with 134 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

187
app/assets/javascripts/radioSelect.js
View File

@@ -2,89 +2,142 @@
"use strict";
var render = ($options, $button) => (
filterOptionVisibility($options) && setButtonState($options, $button)
);
let states = {
'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
.removeClass('js-visible')
.filter(
(index, element) => (index === 0 || $(element).has(':checked').length)
)
.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'
let focusSelected = function() {
setTimeout(
() => $('[type=radio]:checked').parent('label').blur().trigger('focus').addClass('selected'),
10
);
// 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);
$component.append(
$button = $('<input type="button" value="Later" class="tertiary-button" />')
);
$button.on('click', () =>
$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 render = (state, data) => $component.html(states[state].render(data));
let choices = $('label', $component).toArray().map(function(element) {
let $element = $(element);
return {
'id': $element.attr('for'),
'label': $.trim($element.text()),
'value': $element.find('input').attr('value')
};
});
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);
refocus($(this));
// stop click being triggered by keyboard events
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);
};
};

29
app/assets/stylesheets/components/radio-select.scss
View File

@@ -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;
}
}
}
}

1
app/main/forms.py
View File

@@ -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?',

2
app/templates/components/radios.html
View File

@@ -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 }}">

7
tests/app/main/test_choose_time_form.py
View File

@@ -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'
]