bitbake: toastergui: make "Apply" button state depend on filter range
If a range filter action had an empty from/to field, the range filter could still be applied. This was confusing, as an invalid filter range caused all records to display, even though a filter appeared to have been applied (by the highlighted state of the filter button). Change the state of the "Apply" button, disabling it if the radio button for a range filter action is selected but the range is incomplete (from or to field is empty). When a non-range filter is selected, the "Apply" button always enable the "Apply" button. [YOCTO #8738] (Bitbake rev: 168184b28165d7aa354b9092b5986f91c58d550d) Signed-off-by: Elliot Smith <elliot.smith@intel.com> Signed-off-by: Ed Bartosh <ed.bartosh@linux.intel.com> Signed-off-by: Richard Purdie <richard.purdie@linuxfoundation.org>
This commit is contained in:
parent
6c2d88fda5
commit
4103e0cb74
|
@ -397,6 +397,8 @@ function tableInit(ctx){
|
|||
* filterActionData: (object)
|
||||
* filterActionData.count: (number) The number of items this filter will
|
||||
* show when selected
|
||||
*
|
||||
* NB this triggers a filtervalue event each time its radio button is checked
|
||||
*/
|
||||
function createActionRadio(filterName, filterActionData) {
|
||||
var hasNoRecords = (Number(filterActionData.count) == 0);
|
||||
|
@ -420,7 +422,17 @@ function tableInit(ctx){
|
|||
'</label>' +
|
||||
'</div>';
|
||||
|
||||
return $(actionStr);
|
||||
var action = $(actionStr);
|
||||
|
||||
// fire the filtervalue event from this action when the radio button
|
||||
// is active so that the apply button can be enabled
|
||||
action.find('[type="radio"]').change(function () {
|
||||
if ($(this).is(':checked')) {
|
||||
action.trigger('filtervalue', 'on');
|
||||
}
|
||||
});
|
||||
|
||||
return action;
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -437,6 +449,8 @@ function tableInit(ctx){
|
|||
* datetime format
|
||||
* filterActionData.min: (string) minimum date for the pickers, ISO 8601
|
||||
* datetime
|
||||
*
|
||||
* NB this triggers a filtervalue event each time its radio button is checked
|
||||
*/
|
||||
function createActionDateRange(filterName, filterValue, filterActionData) {
|
||||
var action = $('<div class="radio">' +
|
||||
|
@ -492,9 +506,26 @@ function tableInit(ctx){
|
|||
inputTo.val(selectedTo);
|
||||
|
||||
// set filter_value based on date pickers when
|
||||
// one of their values changes
|
||||
// one of their values changes; if either from or to are unset,
|
||||
// the new value is null;
|
||||
// this triggers a 'filter_value-change' event on the action's element,
|
||||
// which is used to determine the disabled/enabled state of the "Apply"
|
||||
// button
|
||||
var changeHandler = function () {
|
||||
value.val(inputFrom.val() + ',' + inputTo.val());
|
||||
var fromValue = inputFrom.val();
|
||||
var toValue = inputTo.val();
|
||||
|
||||
var newValue = undefined;
|
||||
if (fromValue !== '' && toValue !== '') {
|
||||
newValue = fromValue + ',' + toValue;
|
||||
}
|
||||
|
||||
value.val(newValue);
|
||||
|
||||
// if this action is selected, fire an event for the new range
|
||||
if (radio.is(':checked')) {
|
||||
action.trigger('filtervalue', newValue);
|
||||
}
|
||||
};
|
||||
|
||||
inputFrom.change(changeHandler);
|
||||
|
@ -503,6 +534,10 @@ function tableInit(ctx){
|
|||
// check the associated radio button on clicking a date picker
|
||||
var checkRadio = function () {
|
||||
radio.prop('checked', 'checked');
|
||||
|
||||
// checking the radio button this way doesn't cause the "change"
|
||||
// event to fire, so we manually call the changeHandler
|
||||
changeHandler();
|
||||
};
|
||||
|
||||
inputFrom.focus(checkRadio);
|
||||
|
@ -518,23 +553,9 @@ function tableInit(ctx){
|
|||
inputFrom.datepicker('option', 'maxDate', inputTo.val());
|
||||
});
|
||||
|
||||
// if the radio button is checked and one or both of the datepickers are
|
||||
// empty, populate them with today's date
|
||||
radio.change(function () {
|
||||
var now = new Date();
|
||||
|
||||
if (inputFrom.val() === '') {
|
||||
inputFrom.datepicker('setDate', now);
|
||||
}
|
||||
|
||||
if (inputTo.val() === '') {
|
||||
inputTo.datepicker('setDate', now);
|
||||
}
|
||||
|
||||
// setting the date like this doesn't fire the changeHandler to
|
||||
// update the filter_value, so do that manually instead
|
||||
changeHandler()
|
||||
});
|
||||
// checking the radio input causes the "Apply" button disabled state to
|
||||
// change, depending on which from/to dates are supplied
|
||||
radio.change(changeHandler);
|
||||
|
||||
return action;
|
||||
}
|
||||
|
@ -589,6 +610,16 @@ function tableInit(ctx){
|
|||
queryset on the table
|
||||
*/
|
||||
var filterActionRadios = $('#filter-actions-' + ctx.tableName);
|
||||
var filterApplyBtn = $('[data-role="filter-apply"]');
|
||||
|
||||
var setApplyButtonState = function (e, filterActionValue) {
|
||||
if (filterActionValue !== undefined) {
|
||||
filterApplyBtn.removeAttr('disabled');
|
||||
}
|
||||
else {
|
||||
filterApplyBtn.attr('disabled', 'disabled');
|
||||
}
|
||||
};
|
||||
|
||||
$('#filter-modal-title-' + ctx.tableName).text(filterData.title);
|
||||
|
||||
|
@ -624,10 +655,14 @@ function tableInit(ctx){
|
|||
if ((tableParams.filter &&
|
||||
tableParams.filter === radioInput.val()) ||
|
||||
filterActionData.action_name == 'all') {
|
||||
radioInput.attr("checked", "checked");
|
||||
radioInput.prop("checked", "checked");
|
||||
}
|
||||
|
||||
filterActionRadios.append(action);
|
||||
|
||||
// if the action's filter_value changes but is falsy, disable
|
||||
// the "Apply" button
|
||||
action.on('filtervalue', setApplyButtonState);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -10,7 +10,9 @@
|
|||
<span id="filter-actions-{{table_name}}"></span>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-primary" type="submit">Apply</button>
|
||||
<button class="btn btn-primary" type="submit" data-role="filter-apply">
|
||||
Apply
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue