Pārlūkot izejas kodu

HUE-5147 [metadata] Add counts to nav search autocomplete results

Johan Ahlen 9 gadi atpakaļ
vecāks
revīzija
8f9c38fddb

+ 7 - 0
desktop/core/src/desktop/static/desktop/css/hue3.css

@@ -2986,6 +2986,13 @@ input[type='password']::-ms-reveal {
   display: none;
 }
 
+.autocomplete-count {
+  position: absolute;
+  top: 2px;
+  right: 3px;
+  color: #999;
+}
+
 .ui-helper-hidden-accessible {
   border: 0;
   clip: rect(0 0 0 0);

+ 14 - 0
desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

@@ -31,6 +31,7 @@
       var $element = $(element);
 
       options = $.extend({
+        addCount: false,
         closeOnEnter: true,
         blurOnEnter: false,
         classPrefix: 'hue-',
@@ -38,6 +39,19 @@
         minLength: 0
       }, options);
 
+      if (options.addCount) {
+        var oldSource = options.source;
+        options.source = function (request, callback) {
+          oldSource(request, function (values) {
+            callback(values);
+            var count = options.realCountCallback ? options.realCountCallback() : values.filter(function (value) { return ! value.divider }).length;
+            var $menu = $($element.data('custom-hueAutocomplete').menu.element);
+            $menu.children('.autocomplete-count').remove();
+            $('<div>').addClass('autocomplete-count').text('(' + count + ')').appendTo($menu);
+          });
+        }
+      }
+
       if (typeof $().hueAutocomplete === 'undefined') {
         $.widget('custom.hueAutocomplete', $.ui.autocomplete, {
           _renderItemData: function( ul, item ) {

+ 12 - 1
desktop/core/src/desktop/templates/assist.mako

@@ -955,6 +955,8 @@ from metadata.conf import has_navigator
         <i class="fa fa-search" data-bind="css: { 'blue': searchHasFocus() || searchActive() }"></i>
         <input id="appendedInput" placeholder="${ _('Search...') }" type="text" data-bind="autocomplete: {
             source: navAutocompleteSource,
+            addCount: true,
+            realCountCallback: navAutocompleteLatestCount,
             itemTemplate: 'nav-search-autocomp-item',
             classPrefix: 'nav-',
             showOnFocus: true,
@@ -1614,6 +1616,12 @@ from metadata.conf import has_navigator
           }
         });
 
+        var latestCount = 0;
+
+        self.navAutocompleteLatestCount = function () {
+          return latestCount;
+        };
+
         self.navAutocompleteSource = function (request, callback) {
           var facetMatch = request.term.match(/([a-z]+):\s*(\S+)?$/i);
           var isFacet = facetMatch !== null;
@@ -1642,7 +1650,7 @@ from metadata.conf import has_navigator
                   Object.keys(data.facets).forEach(function (facet) {
                     if (facetPartialRe.test(facet)) {
                       if (Object.keys(data.facets[facet]).length > 0) {
-                        values.push({ data: { label: facet + ':', icon: NAV_FACET_ICON, description: Object.keys(data.facets[facet]).join(', ') }, value: beforePartial + facet + ':'});
+                        values.push({ data: { label: facet + ':', icon: NAV_FACET_ICON, description: $.map(data.facets[facet], function (key, value) { return value + ' (' + key + ')'; }).join(', ') }, value: beforePartial + facet + ':'});
                       } else { // Potential facet from the list
                         values.push({ data: { label: facet + ':', icon: NAV_FACET_ICON, description: '' }, value: beforePartial + facet + ':'});
                       }
@@ -1657,6 +1665,9 @@ from metadata.conf import has_navigator
                 }
               }
 
+              // We need to add the facet matches as totalMatched is only for the entries
+              latestCount = data.totalMatched + values.length;
+
               if (values.length > 0) {
                 values.push({ divider: true });
               }