Merge pull request #2588 from node-red/status-filter-nodes

Add compact searchBox to status/catch/complete nodes

packages/node_modules/@node-red/editor-client/src/js/ui/common/searchBox.js

@@ -38,6 +38,11 @@
             this.element.addClass("red-ui-searchBox-input");
             this.uiContainer = this.element.wrap("<div>").parent();
             this.uiContainer.addClass("red-ui-searchBox-container");
+
+            if (this.options.style === "compact") {
+                this.uiContainer.addClass("red-ui-searchBox-compact");
+            }
+
             if (this.element.parents("form").length === 0) {
                 var form = this.element.wrap("<form>").parent();
                 form.addClass("red-ui-searchBox-form");

packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js

@@ -773,10 +773,12 @@
             }
         },
         filter: function(filterFunc,expandResults) {
+            var totalCount = 0;
             var filter = function(item) {
                 var matchCount = 0;
                 if (filterFunc && filterFunc(item)) {
                     matchCount++;
+                    totalCount++;
                 }
                 var childCount = 0;
                 if (item.children && typeof item.children !== "function") {
@@ -799,11 +801,13 @@
                     }
                 }
                 if (!filterFunc) {
+                    totalCount++;
                     return true
                 }
                 return matchCount > 0
             }
-            return this._topList.editableList('filter', filter);
+            this._topList.editableList('filter', filter);
+            return totalCount;
         },
         get: function(id) {
             return this._items[id] || null;

packages/node_modules/@node-red/editor-client/src/js/ui/tab-info-outliner.js

@@ -202,6 +202,7 @@ RED.sidebar.info.outliner = (function() {
         var toolbar = $("<div>", {class:"red-ui-sidebar-header red-ui-info-toolbar"}).appendTo(container);
 
         searchInput = $('<input type="text" data-i18n="[placeholder]menu.label.search">').appendTo(toolbar).searchBox({
+            style: "compact",
             delay: 300,
             change: function() {
                 var val = $(this).val();

packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss

@@ -504,18 +504,6 @@ div.red-ui-info-table {
         width: calc(100% - 150px);
         max-width: 250px;
         background: $palette-header-background;
-        input.red-ui-searchBox-input {
-            border: 1px solid $secondary-border-color;
-            border-radius: 3px;
-            font-size: 12px;
-            height: 26px;
-        }
-        input:focus.red-ui-searchBox-input {
-            border: 1px solid $secondary-border-color;
-        }
-        i.fa-search, i.fa-times {
-            top: 7px;
-        }
     }
 
 }

packages/node_modules/@node-red/editor-client/src/sass/ui/common/searchBox.scss

@@ -71,3 +71,18 @@
         border-radius: 4px;
     }
 }
+.red-ui-searchBox-compact {
+    input.red-ui-searchBox-input,input:focus.red-ui-searchBox-input {
+        border: 1px solid $secondary-border-color;
+        border-radius: 3px;
+        font-size: 12px;
+        height: 26px;
+    }
+    i.fa-times,i.fa-search {
+        top: 7px;
+    }
+    .red-ui-searchBox-resultCount {
+        top: 3px;
+        padding: 0 6px;
+    }
+}

packages/node_modules/@node-red/nodes/core/common/24-complete.html

@@ -2,7 +2,8 @@
     <div class="form-row node-input-target-row">
         <button id="node-input-complete-target-select" class="red-ui-button" data-i18n="common.label.selectNodes"></button>
     </div>
-    <div class="form-row node-input-target-row node-input-target-list-row" style="min-height: 100px">
+    <div class="form-row node-input-target-row node-input-target-list-row" style="position: relative; min-height: 100px">
+        <div style="position: absolute; top: -30px; right: 0;"><input type="text" id="node-input-complete-target-filter"></div>
         <div id="node-input-complete-target-container-div"></div>
     </div>
 
@@ -45,6 +46,22 @@
                 var editorRow = $("#dialog-form>div.node-input-target-list-row");
                 editorRow.css("height",height+"px");
             };
+            var search = $("#node-input-complete-target-filter").searchBox({
+                style: "compact",
+                delay: 300,
+                change: function() {
+                    var val = $(this).val().trim();
+                    if (val === "") {
+                        dirList.treeList("filter", null);
+                        search.searchBox("count","");
+                    } else {
+                        var count = dirList.treeList("filter", function(item) {
+                            return item.label.indexOf(val) > -1
+                        });
+                        search.searchBox("count",count+" / "+candidateNodes.length);
+                    }
+                }
+            });
 
             var dirList = $("#node-input-complete-target-container-div").css({width: "100%", height: "100%"})
                 .treeList({multi:true}).on("treelistitemmouseover", function(e, item) {

packages/node_modules/@node-red/nodes/core/common/25-catch.html

@@ -14,7 +14,8 @@
     <div class="form-row node-input-target-row">
         <button id="node-input-catch-target-select" class="red-ui-button" data-i18n="common.label.selectNodes"></button>
     </div>
-    <div class="form-row node-input-target-row node-input-target-list-row" style="min-height: 100px">
+    <div class="form-row node-input-target-row node-input-target-list-row" style="position: relative; min-height: 100px">
+        <div style="position: absolute; top: -30px; right: 0;"><input type="text" id="node-input-catch-target-filter"></div>
         <div id="node-input-catch-target-container-div"></div>
     </div>
 
@@ -60,7 +61,22 @@
                 var editorRow = $("#dialog-form>div.node-input-target-list-row");
                 editorRow.css("height",height+"px");
             };
-
+            var search = $("#node-input-catch-target-filter").searchBox({
+                style: "compact",
+                delay: 300,
+                change: function() {
+                    var val = $(this).val().trim();
+                    if (val === "") {
+                        dirList.treeList("filter", null);
+                        search.searchBox("count","");
+                    } else {
+                        var count = dirList.treeList("filter", function(item) {
+                            return item.label.indexOf(val) > -1
+                        });
+                        search.searchBox("count",count+" / "+candidateNodes.length);
+                    }
+                }
+            });
             var dirList = $("#node-input-catch-target-container-div").css({width: "100%", height: "100%"})
                 .treeList({multi:true}).on("treelistitemmouseover", function(e, item) {
                     item.node.highlighted = true;

packages/node_modules/@node-red/nodes/core/common/25-status.html

@@ -10,7 +10,8 @@
     <div class="form-row node-input-target-row">
         <button id="node-input-status-target-select" class="red-ui-button" data-i18n="common.label.selectNodes"></button>
     </div>
-    <div class="form-row node-input-target-row node-input-target-list-row" style="min-height: 100px">
+    <div class="form-row node-input-target-row node-input-target-list-row" style="position: relative; min-height: 100px">
+        <div style="position: absolute; top: -30px; right: 0;"><input type="text" id="node-input-status-target-filter"></div>
         <div id="node-input-status-target-container-div"></div>
     </div>
     <div class="form-row">
@@ -48,6 +49,22 @@
                 var editorRow = $("#dialog-form>div.node-input-target-list-row");
                 editorRow.css("height",height+"px");
             };
+            var search = $("#node-input-status-target-filter").searchBox({
+                style: "compact",
+                delay: 300,
+                change: function() {
+                    var val = $(this).val().trim();
+                    if (val === "") {
+                        dirList.treeList("filter", null);
+                        search.searchBox("count","");
+                    } else {
+                        var count = dirList.treeList("filter", function(item) {
+                            return item.label.indexOf(val) > -1
+                        });
+                        search.searchBox("count",count+" / "+candidateNodes.length);
+                    }
+                }
+            });
 
             var dirList = $("#node-input-status-target-container-div").css({width: "100%", height: "100%"})
                 .treeList({multi:true}).on("treelistitemmouseover", function(e, item) {

packages/node_modules/@node-red/nodes/core/common/60-link.html

@@ -4,6 +4,7 @@
         <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="common.label.name"></span></label>
         <input type="text" id="node-input-name" data-i18n="[placeholder]common.label.name">
     </div>
+    <div style="position:relative; height: 30px; text-align: right;"><div style="display:inline-block"><input type="text" id="node-input-link-target-filter"></div></div>
     <div class="form-row node-input-link-row"></div>
 </script>
 <script type="text/html" data-template-name="link out">
@@ -11,6 +12,7 @@
         <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="common.label.name"></span></label>
         <input type="text" id="node-input-name" data-i18n="[placeholder]common.label.name">
     </div>
+    <div style="position:relative; height: 30px; text-align: right;"><div style="display:inline-block"><input type="text" id="node-input-link-target-filter"></div></div>
     <div class="form-row node-input-link-row"></div>
 </script>
 
@@ -47,6 +49,24 @@
             });
         var candidateNodes = RED.nodes.filterNodes({type:targetType});
 
+        var search = $("#node-input-link-target-filter").searchBox({
+            style: "compact",
+            delay: 300,
+            change: function() {
+                var val = $(this).val().trim();
+                if (val === "") {
+                    treeList.treeList("filter", null);
+                    search.searchBox("count","");
+                } else {
+                    var count = treeList.treeList("filter", function(item) {
+                        return item.label.indexOf(val) > -1
+                    });
+                    search.searchBox("count",count+" / "+candidateNodes.length);
+                }
+            }
+        });
+
+
         var flows = [];
         var flowMap = {};