From a9b12e517262dad26e1bd4bafa2d4e72c9c01dee Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Mon, 15 Nov 2021 23:24:57 +0000 Subject: [PATCH] Add search history to main search box --- .../editor-client/locales/en-US/editor.json | 2 + .../editor-client/src/js/ui/search.js | 67 ++++++++++++++++++- .../editor-client/src/sass/search.scss | 22 ++++++ 3 files changed, 88 insertions(+), 3 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json b/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json index 0e60d17e3..40086fe75 100755 --- a/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json +++ b/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json @@ -890,6 +890,8 @@ "addTitle": "add an item" }, "search": { + "history": "Search history", + "clear": "clear all", "empty": "No matches found", "addNode": "add a node..." }, diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/search.js b/packages/node_modules/@node-red/editor-client/src/js/ui/search.js index 02c7735a7..8b6b18927 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/search.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/search.js @@ -22,6 +22,7 @@ RED.search = (function() { var selected = -1; var visible = false; + var searchHistory = []; var index = {}; var currentResults = []; var previousActiveElement; @@ -196,6 +197,20 @@ RED.search = (function() { } } + function populateSearchHistory() { + if (searchHistory.length > 0) { + searchResults.editableList('addItem',{ + historyHeader: true + }); + searchHistory.forEach(function(entry) { + searchResults.editableList('addItem',{ + history: true, + value: entry + }); + }) + } + + } function createDialog() { dialog = $("
",{id:"red-ui-search",class:"red-ui-search"}).appendTo("#red-ui-main-container"); var searchDiv = $("
",{class:"red-ui-search-container"}).appendTo(dialog); @@ -204,7 +219,12 @@ RED.search = (function() { change: function() { searchResults.editableList('empty'); selected = -1; - currentResults = search($(this).val()); + var value = $(this).val(); + if (value === "") { + populateSearchHistory(); + return; + } + currentResults = search(value); if (currentResults.length > 0) { for (i=0;i 0) { reveal(currentResults[Math.max(0,selected)].node); } @@ -292,7 +317,32 @@ RED.search = (function() { addItem: function(container,i,object) { var node = object.node; var div; - if (object.more) { + if (object.historyHeader) { + container.parent().addClass("red-ui-search-historyHeader") + $('
',{class:"red-ui-search-empty"}).text(RED._("search.history")).appendTo(container); + $('').text(RED._("search.clear")).appendTo(container).on("click", function(evt) { + evt.preventDefault(); + searchHistory = []; + searchResults.editableList('empty'); + }); + } else if (object.history) { + container.parent().addClass("red-ui-search-history") + div = $('',{href:'#',class:"red-ui-search-result"}).appendTo(container); + div.text(object.value); + div.on("click", function(evt) { + evt.preventDefault(); + searchInput.searchBox('value',object.value) + searchInput.focus(); + }) + $('').appendTo(container).on("click", function(evt) { + evt.preventDefault(); + var index = searchHistory.indexOf(object.value); + searchHistory.splice(index,1); + searchResults.editableList('removeItem', object); + }); + + + } else if (object.more) { container.parent().addClass("red-ui-search-more") div = $('',{href:'#',class:"red-ui-search-result red-ui-search-empty"}).appendTo(container); div.text(RED._("palette.editor.more",{count:object.more.results.length-object.more.start})); @@ -347,6 +397,12 @@ RED.search = (function() { } function reveal(node) { + var searchVal = searchInput.val(); + var existingIndex = searchHistory.indexOf(searchVal); + if (existingIndex > -1) { + searchHistory.splice(existingIndex,1); + } + searchHistory.unshift(searchInput.val()); hide(); RED.view.reveal(node.id); } @@ -365,9 +421,14 @@ RED.search = (function() { if (dialog === null) { createDialog(); + } else { + searchResults.editableList('empty'); } dialog.slideDown(300); searchInput.searchBox('value',v) + if (!v || v === "") { + populateSearchHistory(); + } RED.events.emit("search:open"); visible = true; } diff --git a/packages/node_modules/@node-red/editor-client/src/sass/search.scss b/packages/node_modules/@node-red/editor-client/src/sass/search.scss index bf20aae4a..ac82d67bd 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/search.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/search.scss @@ -204,6 +204,28 @@ font-style: italic; color: $form-placeholder-color; } +.red-ui-search-history { + button { + display: none; + position: absolute; + top: 8px; + right: 7px; + } + + &:hover button { + display: inline; + } +} +.red-ui-search-historyHeader { + button { + position: absolute; + top: 10px; + right: 7px; + } +} +.red-ui-search-history-result { + +} .red-ui-search-result-action { color: $primary-text-color;