Add search to duplicates/comparison layer filter dialog

The layer index has quite a number of layers in it these days and thus
this list is quite long to scroll through. Use the same layer filtering
method as we do on the layers page, taking care to ensure that the
"select all" and "select none" buttons only affect what you can see when
the layer list is filtered.

Signed-off-by: Paul Eggleton <paul.eggleton@linux.intel.com>

TODO

@@ -39,7 +39,6 @@ Features
 * Ability for reviewers to comment before publishing a layer?
 * Show a note at the top of the layer edit form if there's a validation error
 * Show count in duplicates page
-* Search on layer selection dialogs
 * Close buttons on site-wide messages (using cookie to keep closed ?)
 
 

templates/layerindex/classicrecipes.html

@@ -1,5 +1,6 @@
 {% extends "layerindex/classic_base.html" %}
 {% load i18n %}
+{% load static %}
 
 {% comment %}
 
@@ -94,6 +95,10 @@
                                                         <h3 id="layerDialogLabel">Select layers to include</h3>
                                                     </div>
                                                     <div class="modal-body">
+                                                        <div class="form-group has-feedback has-clear">
+                                                            <input type="text" class="form-control" id="layersearchtext" placeholder="search layers">
+                                                            <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" id="layersearchclear" style="pointer-events: auto; text-decoration: none;cursor: pointer;"></a>
+                                                        </div>
                                                         <div class="scrolling" id="id_layerdialog_list">
                                                         </div>
                                                         <div class="buttonblock">
@@ -402,6 +407,10 @@
             });
         }
     }
+    function clearLayerSearch() {
+        $("#layersearchtext").val('');
+        $(".layerstable > tbody > tr").show();
+    }
     $(document).ready(function() {
         $('#id_selectedlayers_display').prop('readonly', true)
         $('#id_excludeclasses_display').prop('readonly', true)
@@ -412,16 +421,17 @@
             firstfield.focus()
     });
     $('#id_layerdialog_select_all').click(function (e) {
-        $('.filterlayercheckbox').prop('checked', true);
+        $('.layerstable').find('tr:visible').find('.filterlayercheckbox').prop('checked', true);
     });
     $('#id_layerdialog_select_none').click(function (e) {
-        $('.filterlayercheckbox').prop('checked', false);
+        $('.layerstable').find('tr:visible').find('.filterlayercheckbox').prop('checked', false);
     });
     $('#id_layerdialog_ok').click(function (e) {
         update_selected_layer_display()
     });
     $('#id_select_layers').click(function (e) {
-        setup_layer_list()
+        clearLayerSearch();
+        setup_layer_list();
     });
     $('#id_excludeclassdialog_select_none').click(function (e) {
         $('.filterclasscheckbox').prop('checked', false);
@@ -435,6 +445,16 @@
     $('#id_reversed').click(function (e) {
         update_filters_enabled()
     });
+    $("#layersearchtext").on("input", function() {
+        var value = $(this).val().toLowerCase();
+        $(".layerstable > tbody > tr").filter(function() {
+            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
+        });
+    });
+    $("#layersearchclear").click(function(){
+        clearLayerSearch();
+        $("#layersearchtext").focus();
+    });
 {% block scripts_extra %}
 {% endblock %}
 </script>

templates/layerindex/duplicates.html

@@ -1,5 +1,6 @@
 {% extends "base_toplevel.html" %}
 {% load i18n %}
+{% load static %}
 
 {% comment %}
 
@@ -48,8 +49,12 @@
                     </div>
                     <form action="" method="get">
                         <div class="modal-body">
+                            <div class="form-group has-feedback has-clear">
+                                <input type="text" class="form-control" id="layersearchtext" placeholder="search layers">
+                                <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" id="layersearchclear" style="pointer-events: auto; text-decoration: none;cursor: pointer;"></a>
+                            </div>
                             <div class="scrolling">
-                                <table><tbody>
+                                <table class="layerstable"><tbody>
                                     {% for layerbranch in layers %}
                                         <tr>
                                             <td class="checkboxtd"><input
@@ -186,17 +191,34 @@
             firstfield.focus()
     });
     $('#id_select_all').click(function (e) {
-        $('.filterlayercheckbox').prop('checked', true);
+        $('.layerstable').find('tr:visible').find('.filterlayercheckbox').prop('checked', true);
     });
     $('#id_select_none').click(function (e) {
-        $('.filterlayercheckbox').prop('checked', false);
+        $('.layerstable').find('tr:visible').find('.filterlayercheckbox').prop('checked', false);
     });
+
+    function clearLayerSearch() {
+        $("#layersearchtext").val('');
+        $(".layerstable > tbody > tr").show();
+    }
+
     $('#id_cancel').click(function (e) {
         $('.filterlayercheckbox').prop('checked', false);
         showlayers = {{ showlayers }}
         for(i in showlayers) {
             $('#id_layer_' + showlayers[i]).prop('checked', true);
         }
+        clearLayerSearch();
+    });
+    $("#layersearchtext").on("input", function() {
+        var value = $(this).val().toLowerCase();
+        $(".layerstable > tbody > tr").filter(function() {
+            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
+        });
+    });
+    $("#layersearchclear").click(function(){
+        clearLayerSearch();
+        $("#layersearchtext").focus();
     });
 </script>
 {% endblock %}

templates/layerindex/layerchecklist.html

@@ -8,7 +8,7 @@
 {% endcomment %}
 
 {% autoescape on %}
-                                                    <table><tbody>
+                                                    <table class="layerstable"><tbody>
                                                         {% for layerbranch in layerbranches %}
                                                             <tr>
                                                                 <td class="checkboxtd">