[Kimchi-devel] [PATCH] [Kimchi] Issue #809: PCI filter does not seem to work

[sguimaraes943 at gmail.com]

From: Samuel Guimarães <sguimaraes943 at gmail.com>

This commit fixes issue #809 "PCI filter does not seem to work". Removed readonly input fields and inserted the PCI device values in the span tags. Added a minor change to  kimchi.filterPCINodes() function that requires a new library in Wok (jquery.containsNC.js) as an enhancement to allow case insensitive values to maintain consistency with other filter inputs.

Signed-off-by: Samuel Guimarães <sguimaraes943 at gmail.com>
---
 ui/js/src/kimchi.guest_edit_main.js | 49 ++++++++++++++++++++-----------------
 ui/pages/guest-edit.html.tmpl       |  8 +++---
 2 files changed, 31 insertions(+), 26 deletions(-)

diff --git a/ui/js/src/kimchi.guest_edit_main.js b/ui/js/src/kimchi.guest_edit_main.js
index 1118e89..b51f97f 100644
--- a/ui/js/src/kimchi.guest_edit_main.js
+++ b/ui/js/src/kimchi.guest_edit_main.js
@@ -428,26 +428,31 @@ kimchi.guest_edit_main = function() {
     };
 
     var filterPCINodes = function(group, text, targetName) {
-        text = text.toLowerCase();
-        targetName = targetName.toLowerCase();
-        $('.body', '#form-guest-edit-pci').children().each(function() {
-            var currentName = $('.name', this).text().toLowerCase();
-            var textFilter = currentName.indexOf(text) !== -1;
-            textFilter = textFilter || $('.product', this).text().toLowerCase().indexOf(text) !== -1;
-            textFilter = textFilter || $('.vendor', this).text().toLowerCase().indexOf(text) !== -1;
-            var display = 'none';
-            var itemGroup = $('button i', this);
-            if (textFilter) {
-                if (group === 'all') {
-                    display = '';
-                } else if (group === 'toAdd' && itemGroup.hasClass('fa-power-off')) {
-                    display = '';
-                } else if (group === 'added' && itemGroup.hasClass('fa-ban')) {
-                    display = '';
+        targetName = targetName || null;
+        text = text.trim().split(" ");
+        var rows = $('.body', '#form-guest-edit-pci').find('div');
+        if(text === ""){
+            rows.show();
+            return;
+        }
+        rows.hide();
+
+        rows.filter(function(index, value){
+            var $span = $(this);
+            var $itemGroup = $('button i', this);
+            for (var i = 0; i < text.length; ++i){
+                if ($span.is(":containsNC('" + text[i] + "')")) {
+                    if (group === 'all') {
+                        return true;
+                    } else if (group === 'toAdd' && $itemGroup.hasClass('fa-power-off')) {
+                        return true;
+                    } else if (group === 'added' && $itemGroup.hasClass('fa-ban')) {
+                        return true;
+                    }
                 }
             }
-            $(this).css('display', display);
-        });
+            return false;
+        }).show();
     };
     var setupPCIDevice = function() {
         kimchi.getAvailableHostPCIDevices(function(hostPCIs) {
@@ -457,10 +462,10 @@ kimchi.guest_edit_main = function() {
             });
         });
         $('select', '#form-guest-edit-pci').change(function() {
-            filterPCINodes($(this).val(), $('input', '#form-guest-edit-pci').val(), '');
+            filterPCINodes($(this).val(), $('input#guest-edit-pci-filter', '#form-guest-edit-pci').val(), '');
         });
         $('select', '#form-guest-edit-pci').selectpicker();
-        $('input', '#form-guest-edit-pci').on('keyup', function() {
+        $('input#guest-edit-pci-filter', '#form-guest-edit-pci').on('keyup', function() {
             filterPCINodes($('select', '#form-guest-edit-pci').val(), $(this).val(), '');
         });
     };
@@ -508,7 +513,7 @@ kimchi.guest_edit_main = function() {
                             });
                         });
                         //id is for the object that is being added back to the available PCI devices
-                        filterPCINodes($('select', '#form-guest-edit-pci').val(), $('input', '#form-guest-edit-pci').val(), id);
+                        filterPCINodes($('select', '#form-guest-edit-pci').val(), $('input#guest-edit-pci-filter', '#form-guest-edit-pci').val(), id);
                     });
                 } else {
                     kimchi.addVMPCIDevice(kimchi.selectedGuest, {
@@ -520,7 +525,7 @@ kimchi.guest_edit_main = function() {
                             }
                         });
                         //id is for the object that is being removed from the available PCI devices
-                        filterPCINodes($('select', '#form-guest-edit-pci').val(), $('input', '#form-guest-edit-pci').val(), id);
+                        filterPCINodes($('select', '#form-guest-edit-pci').val(), $('input#guest-edit-pci-filter', '#form-guest-edit-pci').val(), id);
                     });
                 }
             });
diff --git a/ui/pages/guest-edit.html.tmpl b/ui/pages/guest-edit.html.tmpl
index 06063b9..2a8cfbe 100644
--- a/ui/pages/guest-edit.html.tmpl
+++ b/ui/pages/guest-edit.html.tmpl
@@ -147,7 +147,7 @@
                                 <option value="toAdd">$_("To Add")</option>
                                 <option value="added">$_("Added")</option>
                             </select>
-                            <input type="text" class="form-control" placeholder="$_("Filter")" />
+                            <input type="text" class="form-control" id="guest-edit-pci-filter" placeholder="$_("Filter")" />
                         </div>
                     </div>
                     <div class="header">
@@ -277,9 +277,9 @@
     <span class="cell status column-pci-status">
         <i class="fa fa-power-off"></i>
     </span>
-    <span class="cell name column-pci-name"><input type="text" readonly="readonly" value="{name}" title="{name}" class="form-control" /></span>
-    <span class="cell product column-product"><input type="text" readonly="readonly" value="{product}" title="{product}" class="form-control" /></span>
-    <span class="cell vendor column-vendor"><input type="text" readonly="readonly" value="{vendor}" title="{vendor}" class="form-control" /></span>
+    <span class="cell name column-pci-name" title="{name}">{name}</span>
+    <span class="cell product column-product" title="{product}">{product}</span>
+    <span class="cell vendor column-vendor" title="{vendor}">{vendor}</span>
     <span class="cell column-actions action-area"><button class="btn btn-link"><i class="fa"></i></button></span>
 </div>
 </script>
-- 
1.9.3