summaryrefslogtreecommitdiffstats
path: root/bitbake/lib/toaster
diff options
context:
space:
mode:
authorElliot Smith <elliot.smith@intel.com>2016-01-15 13:01:02 +0200
committerRichard Purdie <richard.purdie@linuxfoundation.org>2016-01-15 16:30:00 +0000
commit4103e0cb748888d83a5a892b5a022d633846bce8 (patch)
tree239d96d44aebcee4614ae92609751acd9b0ebee8 /bitbake/lib/toaster
parent6c2d88fda5bb121836c57fd54e23e3a63528801d (diff)
downloadpoky-4103e0cb748888d83a5a892b5a022d633846bce8.tar.gz
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>
Diffstat (limited to 'bitbake/lib/toaster')
-rw-r--r--bitbake/lib/toaster/toastergui/static/js/table.js77
-rw-r--r--bitbake/lib/toaster/toastergui/templates/toastertable-filter.html4
2 files changed, 59 insertions, 22 deletions
diff --git a/bitbake/lib/toaster/toastergui/static/js/table.js b/bitbake/lib/toaster/toastergui/static/js/table.js
index 9384386718..87cac600a5 100644
--- a/bitbake/lib/toaster/toastergui/static/js/table.js
+++ b/bitbake/lib/toaster/toastergui/static/js/table.js
@@ -397,6 +397,8 @@ function tableInit(ctx){
397 * filterActionData: (object) 397 * filterActionData: (object)
398 * filterActionData.count: (number) The number of items this filter will 398 * filterActionData.count: (number) The number of items this filter will
399 * show when selected 399 * show when selected
400 *
401 * NB this triggers a filtervalue event each time its radio button is checked
400 */ 402 */
401 function createActionRadio(filterName, filterActionData) { 403 function createActionRadio(filterName, filterActionData) {
402 var hasNoRecords = (Number(filterActionData.count) == 0); 404 var hasNoRecords = (Number(filterActionData.count) == 0);
@@ -420,7 +422,17 @@ function tableInit(ctx){
420 '</label>' + 422 '</label>' +
421 '</div>'; 423 '</div>';
422 424
423 return $(actionStr); 425 var action = $(actionStr);
426
427 // fire the filtervalue event from this action when the radio button
428 // is active so that the apply button can be enabled
429 action.find('[type="radio"]').change(function () {
430 if ($(this).is(':checked')) {
431 action.trigger('filtervalue', 'on');
432 }
433 });
434
435 return action;
424 } 436 }
425 437
426 /** 438 /**
@@ -437,6 +449,8 @@ function tableInit(ctx){
437 * datetime format 449 * datetime format
438 * filterActionData.min: (string) minimum date for the pickers, ISO 8601 450 * filterActionData.min: (string) minimum date for the pickers, ISO 8601
439 * datetime 451 * datetime
452 *
453 * NB this triggers a filtervalue event each time its radio button is checked
440 */ 454 */
441 function createActionDateRange(filterName, filterValue, filterActionData) { 455 function createActionDateRange(filterName, filterValue, filterActionData) {
442 var action = $('<div class="radio">' + 456 var action = $('<div class="radio">' +
@@ -492,9 +506,26 @@ function tableInit(ctx){
492 inputTo.val(selectedTo); 506 inputTo.val(selectedTo);
493 507
494 // set filter_value based on date pickers when 508 // set filter_value based on date pickers when
495 // one of their values changes 509 // one of their values changes; if either from or to are unset,
510 // the new value is null;
511 // this triggers a 'filter_value-change' event on the action's element,
512 // which is used to determine the disabled/enabled state of the "Apply"
513 // button
496 var changeHandler = function () { 514 var changeHandler = function () {
497 value.val(inputFrom.val() + ',' + inputTo.val()); 515 var fromValue = inputFrom.val();
516 var toValue = inputTo.val();
517
518 var newValue = undefined;
519 if (fromValue !== '' && toValue !== '') {
520 newValue = fromValue + ',' + toValue;
521 }
522
523 value.val(newValue);
524
525 // if this action is selected, fire an event for the new range
526 if (radio.is(':checked')) {
527 action.trigger('filtervalue', newValue);
528 }
498 }; 529 };
499 530
500 inputFrom.change(changeHandler); 531 inputFrom.change(changeHandler);
@@ -503,6 +534,10 @@ function tableInit(ctx){
503 // check the associated radio button on clicking a date picker 534 // check the associated radio button on clicking a date picker
504 var checkRadio = function () { 535 var checkRadio = function () {
505 radio.prop('checked', 'checked'); 536 radio.prop('checked', 'checked');
537
538 // checking the radio button this way doesn't cause the "change"
539 // event to fire, so we manually call the changeHandler
540 changeHandler();
506 }; 541 };
507 542
508 inputFrom.focus(checkRadio); 543 inputFrom.focus(checkRadio);
@@ -518,23 +553,9 @@ function tableInit(ctx){
518 inputFrom.datepicker('option', 'maxDate', inputTo.val()); 553 inputFrom.datepicker('option', 'maxDate', inputTo.val());
519 }); 554 });
520 555
521 // if the radio button is checked and one or both of the datepickers are 556 // checking the radio input causes the "Apply" button disabled state to
522 // empty, populate them with today's date 557 // change, depending on which from/to dates are supplied
523 radio.change(function () { 558 radio.change(changeHandler);
524 var now = new Date();
525
526 if (inputFrom.val() === '') {
527 inputFrom.datepicker('setDate', now);
528 }
529
530 if (inputTo.val() === '') {
531 inputTo.datepicker('setDate', now);
532 }
533
534 // setting the date like this doesn't fire the changeHandler to
535 // update the filter_value, so do that manually instead
536 changeHandler()
537 });
538 559
539 return action; 560 return action;
540 } 561 }
@@ -589,6 +610,16 @@ function tableInit(ctx){
589 queryset on the table 610 queryset on the table
590 */ 611 */
591 var filterActionRadios = $('#filter-actions-' + ctx.tableName); 612 var filterActionRadios = $('#filter-actions-' + ctx.tableName);
613 var filterApplyBtn = $('[data-role="filter-apply"]');
614
615 var setApplyButtonState = function (e, filterActionValue) {
616 if (filterActionValue !== undefined) {
617 filterApplyBtn.removeAttr('disabled');
618 }
619 else {
620 filterApplyBtn.attr('disabled', 'disabled');
621 }
622 };
592 623
593 $('#filter-modal-title-' + ctx.tableName).text(filterData.title); 624 $('#filter-modal-title-' + ctx.tableName).text(filterData.title);
594 625
@@ -624,10 +655,14 @@ function tableInit(ctx){
624 if ((tableParams.filter && 655 if ((tableParams.filter &&
625 tableParams.filter === radioInput.val()) || 656 tableParams.filter === radioInput.val()) ||
626 filterActionData.action_name == 'all') { 657 filterActionData.action_name == 'all') {
627 radioInput.attr("checked", "checked"); 658 radioInput.prop("checked", "checked");
628 } 659 }
629 660
630 filterActionRadios.append(action); 661 filterActionRadios.append(action);
662
663 // if the action's filter_value changes but is falsy, disable
664 // the "Apply" button
665 action.on('filtervalue', setApplyButtonState);
631 } 666 }
632 } 667 }
633 668
diff --git a/bitbake/lib/toaster/toastergui/templates/toastertable-filter.html b/bitbake/lib/toaster/toastergui/templates/toastertable-filter.html
index 7c8dc49b33..4d28793bf6 100644
--- a/bitbake/lib/toaster/toastergui/templates/toastertable-filter.html
+++ b/bitbake/lib/toaster/toastergui/templates/toastertable-filter.html
@@ -10,7 +10,9 @@
10 <span id="filter-actions-{{table_name}}"></span> 10 <span id="filter-actions-{{table_name}}"></span>
11 </div> 11 </div>
12 <div class="modal-footer"> 12 <div class="modal-footer">
13 <button class="btn btn-primary" type="submit">Apply</button> 13 <button class="btn btn-primary" type="submit" data-role="filter-apply">
14 Apply
15 </button>
14 </div> 16 </div>
15 </form> 17 </form>
16</div> 18</div>