add catalog select

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

@@ -16,7 +16,7 @@
 RED.palette.editor = (function() {
 
     var disabled = false;
-
+    const catalogues = RED.settings.theme('palette.catalogues')||['https://catalogue.nodered.org/catalogue.json', 'http://192.168.86.130:3002/catalogue.json']
     var editorTabs;
     var filterInput;
     var searchInput;
@@ -232,6 +232,7 @@ RED.palette.editor = (function() {
 
 
     function _refreshNodeModule(module) {
+        console.log("refresh",module);
         if (!nodeEntries.hasOwnProperty(module)) {
             nodeEntries[module] = {info:RED.nodes.registry.getModule(module)};
             var index = [module];
@@ -421,7 +422,7 @@ RED.palette.editor = (function() {
             packageList.editableList('empty');
 
             $(".red-ui-palette-module-shade-status").text(RED._('palette.editor.loading'));
-            var catalogues = RED.settings.theme('palette.catalogues')||['https://catalogue.nodered.org/catalogue.json'];
+
             catalogueLoadStatus = [];
             catalogueLoadErrors = false;
             catalogueCount = catalogues.length;
@@ -431,8 +432,11 @@ RED.palette.editor = (function() {
             $("#red-ui-palette-module-install-shade").show();
             catalogueLoadStart = Date.now();
             var handled = 0;
-            catalogues.forEach(function(catalog,index) {
+            const catalogTypes = []
+            for (let index = 0; index < catalogues.length; index++) {
+                const catalog = catalogues[index];
                 $.getJSON(catalog, {_: new Date().getTime()},function(v) {
+                    catalogTypes.push(v);
                     handleCatalogResponse(null,catalog,index,v);
                     refreshNodeModuleList();
                 }).fail(function(jqxhr, textStatus, error) {
@@ -442,9 +446,19 @@ RED.palette.editor = (function() {
                     handled++;
                     if (handled === catalogueCount) {
                         searchInput.searchBox('change');
+                        console.log("adding types to typedInput", catalogTypes)
+                        const catalogSelection = $('#red-catalogue-filter-select')
+                        catalogSelection.empty()
+                        // loop through catalogTypes, and option per entry
+                        for (let index = 0; index < catalogTypes.length; index++) {
+                            const catalog = catalogTypes[index];
+                            catalogSelection.append(`<option value="${catalog.name}">${catalog.name}</option>`)
+                        }
+                        // select the 1st option
+                        catalogSelection.val(catalogSelection.find('option:first').val())
                     }
                 })
-            });
+            }
         }
     }
 
@@ -812,9 +826,9 @@ RED.palette.editor = (function() {
             content: installTab
         })
 
-        var toolBar = $('<div>',{class:"red-ui-palette-editor-toolbar"}).appendTo(installTab);
+        const toolBar = $('<div>',{class:"red-ui-palette-editor-toolbar"}).appendTo(installTab);
-
+        
-        var searchDiv = $('<div>',{class:"red-ui-palette-search"}).appendTo(installTab);
+        const searchDiv = $('<div>',{class:"red-ui-palette-search"}).appendTo(installTab);
         searchInput = $('<input type="text" data-i18n="[placeholder]palette.search"></input>')
             .appendTo(searchDiv)
             .searchBox({
@@ -836,14 +850,35 @@ RED.palette.editor = (function() {
                 }
             });
 
-        $('<span>').text(RED._("palette.editor.sort")+' ').appendTo(toolBar);
+        // create a div, left aligned, to contain the label "catalog" and a dropdown select
-        var sortGroup = $('<span class="button-group"></span>').appendTo(toolBar);
+        const catalogGroup = $('<div>',{class:""}).appendTo(toolBar);
-        var sortRelevance = $('<a href="#" class="red-ui-palette-editor-install-sort-option red-ui-sidebar-header-button-toggle selected"><i class="fa fa-sort-amount-desc"></i></a>').appendTo(sortGroup);
+        // const catalogSelection = $('<input id="red-catalogue-selection" />', { class: "node-input-header-name", type: "text", style: "width: 100%" }).appendTo(catalogGroup);
-        var sortAZ = $('<a href="#" class="red-ui-palette-editor-install-sort-option red-ui-sidebar-header-button-toggle" data-i18n="palette.editor.sortAZ"></a>').appendTo(sortGroup);
+        // append a regular select/options el to the catalogGroup
-        var sortRecent = $('<a href="#" class="red-ui-palette-editor-install-sort-option red-ui-sidebar-header-button-toggle" data-i18n="palette.editor.sortRecent"></a>').appendTo(sortGroup);
+        const catalogSelection = $('<select id="red-catalogue-filter-select">').appendTo(catalogGroup);
+        
+
+        // add a single dummy option "Loading..." to catalogSelection until the catalogues are loaded
+        catalogSelection.append($('<option>', { value: "loading", text: "Loading Catalogue List...", disabled: true, selected: true }));
+
+        // catalogSelection.typedInput({ types: [{ value: "loading", label: "Loading Catalogue List...", hasValue: false }] });
+
+        catalogSelection.on("change", function() {
+            var v = $(this).val();
+            console.log(v);
+            if (v === "all") {
+            }
+        })
+
+        const toolBarActions = $('<div>',{class:"red-ui-palette-editor-toolbar-actions"}).appendTo(toolBar);
+
+        $('<span>').text(RED._("palette.editor.sort")+' ').appendTo(toolBarActions);
+        const sortGroup = $('<span class="button-group"></span>').appendTo(toolBarActions);
+        const sortRelevance = $('<a href="#" class="red-ui-palette-editor-install-sort-option red-ui-sidebar-header-button-toggle selected"><i class="fa fa-sort-amount-desc"></i></a>').appendTo(sortGroup);
+        const sortAZ = $('<a href="#" class="red-ui-palette-editor-install-sort-option red-ui-sidebar-header-button-toggle" data-i18n="palette.editor.sortAZ"></a>').appendTo(sortGroup);
+        const sortRecent = $('<a href="#" class="red-ui-palette-editor-install-sort-option red-ui-sidebar-header-button-toggle" data-i18n="palette.editor.sortRecent"></a>').appendTo(sortGroup);
 
 
-        var sortOpts = [
+        const sortOpts = [
             {button: sortRelevance, func: sortModulesRelevance},
             {button: sortAZ, func: sortModulesAZ},
             {button: sortRecent, func: sortModulesRecent}
@@ -861,7 +896,7 @@ RED.palette.editor = (function() {
             });
         });
 
-        var refreshSpan = $('<span>').appendTo(toolBar);
+        var refreshSpan = $('<span>').appendTo(toolBarActions);
         var refreshButton = $('<a href="#" class="red-ui-sidebar-header-button"><i class="fa fa-refresh"></i></a>').appendTo(refreshSpan);
         refreshButton.on("click", function(e) {
             e.preventDefault();
@@ -871,7 +906,8 @@ RED.palette.editor = (function() {
         })
         RED.popover.tooltip(refreshButton,RED._("palette.editor.refresh"));
 
-        packageList = $('<ol>',{style:"position: absolute;top: 79px;bottom: 0;left: 0;right: 0px;"}).appendTo(installTab).editableList({
+        packageList = $('<ol>').appendTo(installTab).editableList({
+            class: "scrollable",
             addButton: false,
             scrollOnAdd: false,
             addItem: function(container,i,object) {
@@ -952,9 +988,10 @@ RED.palette.editor = (function() {
                 }
             }
         });
+        
 
         if (RED.settings.get('externalModules.palette.allowUpload', true) !== false) {
-            var uploadSpan = $('<span class="button-group">').prependTo(toolBar);
+            var uploadSpan = $('<span class="button-group">').prependTo(toolBarActions);
             var uploadButton = $('<button type="button" class="red-ui-sidebar-header-button red-ui-palette-editor-upload-button"><label><i class="fa fa-upload"></i><form id="red-ui-palette-editor-upload-form" enctype="multipart/form-data"><input name="tarball" type="file" accept=".tgz"></label></button>').appendTo(uploadSpan);
 
             var uploadInput = uploadButton.find('input[type="file"]');

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

@@ -29,6 +29,13 @@
     box-sizing:border-box;
     background: var(--red-ui-secondary-background);
 
+    .red-ui-editableList.scrollable {
+        overflow-y: auto;
+        background-color: aqua;
+        // padding: 0 10px;
+        // box-sizing: border-box;
+        // height: calc(100% - 40px);
+    }
     .red-ui-editableList-container {
         border: none;
         border-radius: 0;
@@ -72,11 +79,8 @@
 
     }
     .red-ui-palette-editor-tab {
-        position:absolute;
+        display: flex;
-        top:35px;
+        flex-direction: column;
-        left:0;
-        right:0;
-        bottom:0
     }
     .red-ui-palette-editor-toolbar {
         background: var(--red-ui-primary-background);
@@ -84,6 +88,15 @@
         padding: 8px 10px;
         border-bottom: 1px solid var(--red-ui-primary-border-color);
         text-align: right;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 3px 12px;
+        .red-ui-palette-editor-toolbar-actions {
+            flex-shrink: 0;
+            flex-grow: 1;
+        }
     }
     .red-ui-palette-module-shade-status {
         color: var(--red-ui-secondary-text-color);

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

@@ -54,7 +54,7 @@
 }
 .red-ui-palette-search {
     position: relative;
-    overflow: hidden;
+    // overflow: hidden;
     background: var(--red-ui-form-input-background);
     text-align: center;
     height: 35px;