Forráskód Böngészése

HUE-5680 [editor] Update autocomplete dropdown categories based on active filter

Johan Ahlen 8 éve
szülő
commit
2d7fe5c269

+ 38 - 33
desktop/core/src/desktop/static/desktop/js/sqlAutocompleter3.js

@@ -120,18 +120,40 @@ var SqlAutocompleter3 = (function () {
     }).extend({ rateLimit: 200 });
 
     self.filter = ko.observable();
+
+    self.availableCategories = ko.observableArray([CATEGORIES.ALL]);
+
+    self.availableCategories.subscribe(function (newCategories) {
+      if (newCategories.indexOf(self.activeCategory()) === -1) {
+        self.activeCategory(CATEGORIES.ALL)
+      }
+    });
+
     self.activeCategory = ko.observable(CATEGORIES.ALL);
 
+    var updateCategories = function (suggestions) {
+      var newCategories =  {};
+      suggestions.forEach(function (suggestion) {
+        if (suggestion.popular && ! newCategories[CATEGORIES.POPULAR.label]) {
+          newCategories[CATEGORIES.POPULAR.label] = CATEGORIES.POPULAR;
+        } else if (suggestion.category === CATEGORIES.TABLE || suggestion.category === CATEGORIES.COLUMN || suggestion.category === CATEGORIES.UDF) {
+          if (!newCategories[suggestion.category.label]) {
+            newCategories[suggestion.category.label] = suggestion.category;
+          }
+        }
+      });
+      var result = [];
+      Object.keys(newCategories).forEach(function (key) {
+        result.push(newCategories[key]);
+      });
+      result.sort(function (a, b) { return a.label.localeCompare(b.label)});
+      result.unshift(CATEGORIES.ALL);
+      self.availableCategories(result);
+    };
+
     self.filtered = ko.pureComputed(function () {
       var result = self.entries();
 
-      var activeCategory = self.activeCategory();
-      if (activeCategory !== CATEGORIES.ALL) {
-        result = result.filter(function (suggestion) {
-          return activeCategory === suggestion.category || (activeCategory === CATEGORIES.POPULAR && suggestion.popular);
-        });
-      }
-
       if (self.filter()) {
         var lowerCaseFilter = self.filter().toLowerCase();
         result = result.filter(function (suggestion) {
@@ -151,6 +173,15 @@ var SqlAutocompleter3 = (function () {
         });
         huePubSub.publish('hue.ace.autocompleter.match.updated');
       }
+      updateCategories(result);
+
+      var activeCategory = self.activeCategory();
+      if (activeCategory !== CATEGORIES.ALL) {
+        result = result.filter(function (suggestion) {
+          return activeCategory === suggestion.category || (activeCategory === CATEGORIES.POPULAR && suggestion.popular);
+        });
+      }
+
       result.sort(function (a, b) {
         if (self.filter()) {
           if (typeof a.filterWeight !== 'undefined' && typeof b.filterWeight !== 'undefined' && b.filterWeight !== a.filterWeight) {
@@ -178,32 +209,6 @@ var SqlAutocompleter3 = (function () {
       });
       return result;
     }).extend({ rateLimit: 200 });
-
-    self.availableCategories = ko.pureComputed(function () {
-      var newCategories =  {};
-      self.entries().forEach(function (suggestion) {
-        if (suggestion.popular && ! newCategories[CATEGORIES.POPULAR.label]) {
-          newCategories[CATEGORIES.POPULAR.label] = CATEGORIES.POPULAR;
-        } else if (suggestion.category === CATEGORIES.TABLE || suggestion.category === CATEGORIES.COLUMN || suggestion.category === CATEGORIES.UDF) {
-          if (!newCategories[suggestion.category.label]) {
-            newCategories[suggestion.category.label] = suggestion.category;
-          }
-        }
-      });
-      var result = [];
-      Object.keys(newCategories).forEach(function (key) {
-        result.push(newCategories[key]);
-      });
-      result.sort(function (a, b) { return a.label.localeCompare(b.label)});
-      result.unshift(CATEGORIES.ALL);
-      return result;
-    }).extend({ rateLimit: 200 });
-
-    self.availableCategories.subscribe(function (newCategories) {
-      if (newCategories.indexOf(self.activeCategory()) === -1) {
-        self.activeCategory(CATEGORIES.ALL)
-      }
-    });
   }
 
   Suggestions.prototype.backTickIfNeeded = function (text) {

+ 2 - 3
desktop/libs/notebook/src/notebook/templates/hue_ace_autocompleter.mako

@@ -137,7 +137,7 @@ from desktop.views import _ko
       white-space: nowrap;
     }
 
-    .autocompleter-suggestion-value > b {
+    .autocompleter-suggestion-value b {
       text-shadow: 0 0 0.01em;
     }
 
@@ -218,7 +218,7 @@ from desktop.views import _ko
                 css: { 'selected': $index() === $parent.selectedIndex() },
                 event: { 'mouseover': function () { $parent.hoveredIndex($index()); }, 'mouseout': function () { $parent.hoveredIndex(null); } }">
               <div class="autocompleter-suggestion-value">
-                <div class="autocompleter-dot " data-bind="style: { 'background-color': category.color }"></div> <span data-bind="matchedText: { suggestion: $data, filter: $parent.suggestions.filter }"></span>
+                <div class="autocompleter-dot" data-bind="style: { 'background-color': category.color }"></div> <span data-bind="matchedText: { suggestion: $data, filter: $parent.suggestions.filter }"></span>
               </div>
               <div class="autocompleter-suggestion-meta"><!-- ko if: typeof popular !== 'undefined' && popular --><i class="fa fa-star-o popular-icon"></i> <!-- /ko --><span data-bind="text: meta"></span></div>
             </div>
@@ -416,7 +416,6 @@ from desktop.views import _ko
 
         self.focusedEntry = ko.pureComputed(function () {
           if (self.suggestions.filtered().length > 0) {
-
             return self.suggestions.filtered()[self.hoveredIndex() || self.selectedIndex()];
           }
           return null;