Add sort options to palette-editor search

editor/js/ui/common/editableList.js

@@ -86,6 +86,7 @@
             this.uiHeight = this.element.height();
 
             this.activeFilter = this.options.filter||null;
+            this.activeSort = this.options.sort||null;
 
             var minHeight = this.element.css("minHeight");
             if (minHeight !== '0px') {
@@ -181,6 +182,18 @@
             });
             return count;
         },
+        _refreshSort: function() {
+            if (this.activeSort) {
+                var items = this.element.children();
+                var that = this;
+                items.sort(function(A,B) {
+                    return that.activeSort($(A).find(".red-ui-editableList-item-content").data('data'),$(B).find(".red-ui-editableList-item-content").data('data'));
+                });
+                $.each(items,function(idx,li) {
+                    that.element.append(li);
+                })
+            }
+        },
         width: function(desiredWidth) {
             this.uiWidth = desiredWidth;
             this._resize();
@@ -194,13 +207,13 @@
             data = data || {};
             var li = $('<li>');
             var added = false;
-            if (this.options.sort) {
+            if (this.activeSort) {
                 var items = this.items();
                 var skip = false;
                 items.each(function(i,el) {
                     if (added) { return }
                     var itemData = el.data('data');
-                    if (that.options.sort(data,itemData) < 0) {
+                    if (that.activeSort(data,itemData) < 0) {
                          li.insertBefore(el.closest("li"));
                          added = true;
                     }
@@ -242,7 +255,7 @@
                         }
                     }
 
-                    if (!that.options.sort) {
+                    if (!that.activeSort) {
                         setTimeout(function() {
                             that.uiContainer.scrollTop(that.element.height());
                         },0);
@@ -271,6 +284,12 @@
             }
             return this._refreshFilter();
         },
+        sort: function(sort) {
+            if (sort !== undefined) {
+                this.activeSort = sort;
+            }
+            return this._refreshSort();
+        },
         length: function() {
             return this.element.children().length;
         }

editor/js/ui/palette-editor.js

@@ -289,6 +289,7 @@ RED.palette.editor = (function() {
             $(el).removeClass('expanded');
         });
         filterInput.searchBox('value',"");
+        searchInput.searchBox('value',"");
     }
 
     function filterChange(val) {
@@ -302,24 +303,78 @@ RED.palette.editor = (function() {
         }
     }
 
-    function initInstallTab() {
-        $("#palette-module-install-shade").show();
 
-        $.getJSON('http://catalogue.nodered.org/catalogue.json',function(v) {
-            loadedList = v.modules;
-            searchInput.searchBox('count',loadedList.length);
-            loadedList.forEach(function(m) {
+    var catalogueCount;
+    var catalogueLoadStatus = [];
+    var catalogueLoadStart;
+
+    var activeSort = sortModulesAZ;
+
+    function handleCatalogResponse(catalog,index,v) {
+        catalogueLoadStatus.push(v);
+        if (v.modules) {
+            v.modules.forEach(function(m) {
                 m.index = [m.id];
                 if (m.keywords) {
                     m.index = m.index.concat(m.keywords);
                 }
+                if (m.updated_at) {
+                    m.timestamp = new Date(m.updated_at).getTime();
+                } else {
+                    m.timestamp = 0;
+                }
                 m.index = m.index.join(",").toLowerCase();
             })
-            $("#palette-module-install-shade").hide();
-
-        })
-
+            loadedList = loadedList.concat(v.modules);
+        }
+        searchInput.searchBox('count',loadedList.length);
+        if (catalogueCount > 1) {
+            $(".palette-module-shade-status").html("Loading catalogues...<br>"+catalogueLoadStatus.length+"/"+catalogueCount);
+        }
+        if (catalogueLoadStatus.length === catalogueCount) {
+            var delta = 250-(Date.now() - catalogueLoadStart);
+            setTimeout(function() {
+                $("#palette-module-install-shade").hide();
+            },Math.max(delta,0));
+        }
     }
+
+    function initInstallTab() {
+        loadedList = [];
+        packageList.editableList('empty');
+        $(".palette-module-shade-status").html("Loading catalogues...");
+        var catalogues = RED.settings.theme('palette.catalogues')||['http://catalogue.nodered.org/catalogue.json'];
+        catalogueLoadStatus = [];
+        catalogueCount = catalogues.length;
+        if (catalogues.length > 1) {
+            $(".palette-module-shade-status").html("Loading catalogues...<br>0/"+catalogues.length);
+        }
+        $("#palette-module-install-shade").show();
+        catalogueLoadStart = Date.now();
+        catalogues.forEach(function(catalog,index) {
+            $.getJSON(catalog, {_: new Date().getTime()},function(v) {
+                handleCatalogResponse(catalog,index,v);
+            })
+        });
+    }
+
+    function refreshFilteredItems() {
+        packageList.editableList('empty');
+        filteredList.sort(activeSort);
+        for (var i=0;i<Math.min(10,filteredList.length);i++) {
+            packageList.editableList('addItem',filteredList[i]);
+        }
+        if (filteredList.length > 10) {
+            packageList.editableList('addItem',{start:10,more:filteredList.length-10})
+        }
+    }
+    function sortModulesAZ(A,B) {
+        return A.info.id.localeCompare(B.info.id);
+    }
+    function sortModulesRecent(A,B) {
+        return -1 * (A.info.timestamp-B.info.timestamp);
+    }
+
     function init() {
 
         $(".palette-editor-button").show();
@@ -329,6 +384,12 @@ RED.palette.editor = (function() {
             onchange:function(tab) {
                 $("#palette-editor .palette-editor-tab").hide();
                 tab.content.show();
+                if (filterInput) {
+                    filterInput.searchBox('value',"");
+                }
+                if (searchInput) {
+                    searchInput.searchBox('value',"");
+                }
                 if (tab.id === 'install') {
                     initInstallTab();
                     if (searchInput) {
@@ -395,10 +456,10 @@ RED.palette.editor = (function() {
             addItem: function(container,i,object) {
                 var entry = object.info;
                 var headerRow = $('<div>',{class:"palette-module-header"}).appendTo(container);
-                var titleRow = $('<div class="palette-module-meta"><i class="fa fa-cube"></i></div>').appendTo(headerRow);
-                $('<span>',{class:"palette-module-name"}).html(entry.name).appendTo(titleRow);
-                var metaRow = $('<div class="palette-module-meta"><span class="palette-module-version"><i class="fa fa-tag"></i></span></div>').appendTo(headerRow);
-                $('<span>').html(entry.version).appendTo(metaRow.find(".palette-module-version"));
+                var titleRow = $('<div class="palette-module-meta palette-module-name"><i class="fa fa-cube"></i></div>').appendTo(headerRow);
+                $('<span>').html(entry.name).appendTo(titleRow);
+                var metaRow = $('<div class="palette-module-meta palette-module-version"><i class="fa fa-tag"></i></div>').appendTo(headerRow);
+                $('<span>').html(entry.version).appendTo(metaRow);
                 var buttonRow = $('<div>',{class:"palette-module-meta"}).appendTo(headerRow);
                 var setButton = $('<a href="#" class="editor-button editor-button-small palette-module-set-button"><i class="fa fa-angle-right palette-module-node-chevron"></i> </a>').appendTo(buttonRow);
                 var setCount = $('<span>').appendTo(setButton);
@@ -492,6 +553,8 @@ RED.palette.editor = (function() {
             content: installTab
         })
 
+        var toolBar = $('<div>',{class:"palette-editor-toolbar"}).appendTo(installTab);
+
         var searchDiv = $('<div>',{class:"palette-search"}).appendTo(installTab);
         searchInput = $('<input type="text" data-i18n="[placeholder]palette.search"></input>')
             .appendTo(searchDiv)
@@ -500,17 +563,11 @@ RED.palette.editor = (function() {
                 minimumLength: 2,
                 change: function() {
                     var searchTerm = $(this).val();
-                    packageList.editableList('empty');
                     if (searchTerm.length >= 2) {
                         filteredList = loadedList.filter(function(m) {
                             return (m.index.indexOf(searchTerm) > -1);
                         }).map(function(f) { return {info:f}});
-                        for (var i=0;i<Math.min(10,filteredList.length);i++) {
-                            packageList.editableList('addItem',filteredList[i]);
-                        }
-                        if (filteredList.length > 10) {
-                            packageList.editableList('addItem',{start:10,more:filteredList.length-10})
-                        }
+                        refreshFilteredItems();
                         searchInput.searchBox('count',filteredList.length+" / "+loadedList.length);
                     } else {
                         searchInput.searchBox('count',loadedList.length);
@@ -518,14 +575,44 @@ RED.palette.editor = (function() {
                 }
             });
 
-        $('<div id="palette-module-install-shade" class="palette-module-shade hide"><img src="red/images/spin.svg" class="palette-spinner"/></div>').appendTo(installTab);
+
+        $('<span>').html('sort: ').appendTo(toolBar);
+        var sortGroup = $('<span class="button-group"></span> ').appendTo(toolBar);
+        var sortAZ = $('<a href="#" class="sidebar-header-button-toggle selected">a-z</a>').appendTo(sortGroup);
+        var sortRecent = $('<a href="#" class="sidebar-header-button-toggle">recent</a>').appendTo(sortGroup);
+
+        sortAZ.click(function(e) {
+            e.preventDefault();
+            if ($(this).hasClass("selected")) {
+                return;
+            }
+            $(this).addClass("selected");
+            sortRecent.removeClass("selected");
+            activeSort = sortModulesAZ;
+            refreshFilteredItems();
+        });
+
+        sortRecent.click(function(e) {
+            e.preventDefault();
+            if ($(this).hasClass("selected")) {
+                return;
+            }
+            $(this).addClass("selected");
+            sortAZ.removeClass("selected");
+            activeSort = sortModulesRecent;
+            refreshFilteredItems();
+        });
 
 
-        packageList = $('<ol>',{id:"palette-module-list", style:"position: absolute;top: 35px;bottom: 0;left: 0;right: 0px;"}).appendTo(installTab).editableList({
+        var refreshSpan = $('<span>').appendTo(toolBar);
+        var refreshButton = $('<a href="#" class="sidebar-header-button"><i class="fa fa-refresh"></i></a>').appendTo(refreshSpan);
+        refreshButton.click(function(e) {
+            e.preventDefault();
+            initInstallTab();
+        })
+
+        packageList = $('<ol>',{id:"palette-module-list", style:"position: absolute;top: 78px;bottom: 0;left: 0;right: 0px;"}).appendTo(installTab).editableList({
            addButton: false,
-        //    sort: function(A,B) {
-        //        return A.info.name.localeCompare(B.info.name);
-        //    },
            addItem: function(container,i,object) {
                if (object.more) {
                    container.addClass('palette-module-more');
@@ -561,7 +648,11 @@ RED.palette.editor = (function() {
                installButton.click(function(e) {
                    e.preventDefault();
                    installNodeModule(entry.id,shade,function(xhr) {
-                       console.log(xhr);
+                       if (xhr) {
+                           if (xhr.responseJSON) {
+                               RED.notify("Failed to install: "+entry.id+"<br>"+xhr.responseJSON.message+"<br>Check the log for more information","error",false,8000);
+                           }
+                       }
                    })
                })
                if (nodeEntries.hasOwnProperty(entry.id)) {
@@ -574,6 +665,7 @@ RED.palette.editor = (function() {
            }
        });
 
+       $('<div id="palette-module-install-shade" class="palette-module-shade hide"><div class="palette-module-shade-status"></div><img src="red/images/spin.svg" class="palette-spinner"/></div>').appendTo(installTab);
 
         RED.events.on('registry:node-set-enabled', function(ns) {
             refreshNodeModule(ns.module);

editor/sass/colors.scss

@@ -20,6 +20,7 @@ $form-placeholder-color: #bbbbbb;
 $form-text-color: #444;
 $form-input-focus-color:  rgba(85,150,230,0.8);
 $form-input-border-color:  #ccc;
+$form-input-border-selected-color:  #aaa;
 
 
 $node-selected-color: #ff7f0e;

editor/sass/mixins.scss

@@ -82,11 +82,13 @@
 @mixin workspace-button-toggle {
     @include workspace-button;
     color: $workspace-button-color-selected;
-    background: $workspace-button-background-active;
+    background:$workspace-button-background-active;
 
     &.selected:not(.disabled) {
         color: $workspace-button-color;
         background: $workspace-button-background;
+        border-bottom-width: 2px;
+        border-bottom-color: $form-input-border-selected-color;
     }
 }
 

editor/sass/palette-editor.scss

@@ -38,6 +38,17 @@
             padding: 0px;
             .disabled {
                 background: #f3f3f3;
+
+                .palette-module-name {
+                    font-style: italic;
+                    color: #aaa;
+                }
+                .palette-module-version {
+                    color: #aaa;
+                }
+
+
+
             }
             .red-ui-editableList-item-content {
                 padding: 12px 8px;
@@ -55,7 +66,17 @@
         right:0;
         bottom:0
     }
+    .palette-editor-toolbar {
+        background: #f3f3f3;
+        box-sizing: border-box;
+        padding: 8px 10px;
+        border-bottom: 1px solid $primary-border-color;
+        text-align: right;
 
+        .button-group {
+            margin-right: 10px;
+        }
+    }
     .palette-module-button-group {
         position: absolute;
         right: 0;
@@ -72,7 +93,15 @@
         right:0;
         background: rgba(255,255,255,0.8);
         text-align: center;
+        padding-top: 20px;
     }
+    #palette-module-install-shade {
+        padding-top: 80px;
+    }
+    .palette-module-shade-status {
+        color: #666;
+    }
+
     .palette-module-meta {
         color: #666;
         position: relative;

editor/sass/palette.scss

@@ -53,15 +53,11 @@
     overflow-y: auto;
     box-sizing:border-box;
 }
-.palette-spinner {
-    padding-top: 40px;
+#palette > .palette-spinner {
+    padding-top: 80px;
 }
-
 .palette-search {
-    position: absolute;
-    top: 0;
-    left:0;
-    right:0;
+    position: relative;
     overflow: hidden;
     background: #ffffff;
     text-align: center;