[bitbake-devel] [PATCH 19/23] toaster: table.js fix filter visual indicator and interaction

[Alex DAMIAN]

From: Michael Wood <michael.g.wood at intel.com>

- Fix the id of the filter modal dialog.
- Fix the visual indicator toggle button
- Add check to see if the number of items to filter on is !=0 if it is
  then don't allow applying this filter.

Signed-off-by: Michael Wood <michael.g.wood at intel.com>
---
 lib/toaster/toastergui/static/js/table.js | 59 +++++++++++++++++++++++--------
 1 file changed, 44 insertions(+), 15 deletions(-)

diff --git a/lib/toaster/toastergui/static/js/table.js b/lib/toaster/toastergui/static/js/table.js
index 1072c75..d06a3f5 100644
--- a/lib/toaster/toastergui/static/js/table.js
+++ b/lib/toaster/toastergui/static/js/table.js
@@ -261,23 +261,14 @@ function tableInit(ctx){
         var filterBtn = $('<a href="#" role="button" class="pull-right btn btn-mini" data-toggle="modal"><i class="icon-filter filtered"></i></a>');
 
         filterBtn.data('filter-name', col.filter_name);
+        filterBtn.prop('id', col.filter_name);
         filterBtn.click(filterOpenClicked);
 
         /* If we're currently being filtered setup the visial indicator */
         if (tableParams.filter &&
             tableParams.filter.match('^'+col.filter_name)) {
 
-            filterBtn.addClass("btn-primary");
-
-            filterBtn.tooltip({
-                html: true,
-                title: '<button class="btn btn-small btn-primary" onClick=\'$("#clear-filter-btn").click();\'>Clear filter</button>',
-                placement: 'bottom',
-                delay: {
-                  hide: 1500,
-                  show: 400,
-                },
-            });
+            filterBtnActive(filterBtn, true);
         }
         header.append(filterBtn);
       }
@@ -310,6 +301,26 @@ function tableInit(ctx){
     tableChromeDone = true;
   }
 
+  /* Toggles the active state of the filter button */
+  function filterBtnActive(filterBtn, active){
+    if (active) {
+      filterBtn.addClass("btn-primary");
+
+      filterBtn.tooltip({
+          html: true,
+          title: '<button class="btn btn-small btn-primary" onClick=\'$("#clear-filter-btn-'+ ctx.tableName +'").click();\'>Clear filter</button>',
+          placement: 'bottom',
+          delay: {
+            hide: 1500,
+            show: 400,
+          },
+      });
+    } else {
+      filterBtn.removeClass("btn-primary");
+      filterBtn.tooltip('destroy');
+    }
+  }
+
   /* Display or hide table columns based on the cookie preference or defaults */
   function loadColumnsPreference(){
     var cookie_data = $.cookie("cols");
@@ -427,6 +438,10 @@ function tableInit(ctx){
 
             var radioInput = action.children("input");
 
+            if (Number(filterAction.count) == 0){
+              radioInput.attr("disabled", "disabled");
+            }
+
             action.children(".filter-title").text(actionTitle);
 
             radioInput.val(filterName + ':' + filterAction.name);
@@ -475,7 +490,13 @@ function tableInit(ctx){
 
     tableParams.page = 1;
     tableParams.search = searchTerm;
-    tableParams.filter = null;
+
+    /* If a filter was active we remove it */
+    if (tableParams.filter) {
+      var filterBtn = $("#" + tableParams.filter.split(":")[0]);
+      filterBtnActive(filterBtn, false);
+      tableParams.filter = null;
+    }
 
     loadData(tableParams);
 
@@ -504,6 +525,9 @@ function tableInit(ctx){
   });
 
   $("#clear-filter-btn-"+ctx.tableName).click(function(){
+    var filterBtn = $("#" + tableParams.filter.split(":")[0]);
+    filterBtnActive(filterBtn, false);
+
     tableParams.filter = null;
     loadData(tableParams);
   });
@@ -513,13 +537,18 @@ function tableInit(ctx){
 
     tableParams.filter = $(this).find("input[type='radio']:checked").val();
 
+    var filterBtn = $("#" + tableParams.filter.split(":")[0]);
+
     /* All === remove filter */
-    if (tableParams.filter.match(":all$"))
+    if (tableParams.filter.match(":all$")) {
       tableParams.filter = null;
+      filterBtnActive(filterBtn, false);
+    } else {
+      filterBtnActive(filterBtn, true);
+    }
 
     loadData(tableParams);
 
-
-    $('#filter-modal').modal('hide');
+    $(this).parent().modal('hide');
   });
 }
-- 
1.9.1