Эх сурвалжийг харах

HUE-3896 [editor] Add search on column list result set

Enrico Berti 9 жил өмнө
parent
commit
bbaf74f9e6

+ 13 - 1
desktop/libs/notebook/src/notebook/static/notebook/css/notebook.css

@@ -1057,4 +1057,16 @@ pre {
 .collapse-results {
 .collapse-results {
   right: 20px;
   right: 20px;
   top: 20px;
   top: 20px;
-}
+}
+
+.meta-title {
+  line-height: 22px;
+}
+
+.meta-filter {
+  width: 140px;
+}
+
+.meta-noresults {
+  font-style: italic;
+}

+ 13 - 0
desktop/libs/notebook/src/notebook/static/notebook/js/notebook.ko.js

@@ -64,6 +64,19 @@
         return item.name != ''
         return item.name != ''
       });
       });
     });
     });
+    self.metaFilter = ko.observable('');
+    self.isMetaFilterVisible = ko.observable(false);
+    self.filteredMeta = ko.pureComputed(function () {
+      return ko.utils.arrayFilter(self.meta(), function (item, i) {
+        if (typeof item.checked === 'undefined') {
+          item.checked = true;
+        }
+        if (typeof item.originalIndex === 'undefined') {
+          item.originalIndex = i;
+        }
+        return item.name.toLowerCase().indexOf(self.metaFilter().toLowerCase()) > -1;
+      });
+    });
     self.hasManyColumns = ko.pureComputed(function () {
     self.hasManyColumns = ko.pureComputed(function () {
       return self.meta() && self.meta().length > 300;
       return self.meta() && self.meta().length > 300;
     });
     });

+ 11 - 4
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -1455,12 +1455,19 @@ ${ hueIcons.symbols() }
 <script type="text/html" id="snippet-grid-settings">
 <script type="text/html" id="snippet-grid-settings">
   <div style="overflow:auto">
   <div style="overflow:auto">
     <ul class="nav nav-list" style="border: none; background-color: #FFF">
     <ul class="nav nav-list" style="border: none; background-color: #FFF">
-      <li class="nav-header pointer" data-bind="click: toggleResultSettings" title="${_('Hide columns')}">${_('columns')}</li>
+      <li class="nav-header" title="${_('Hide columns')}">
+        <span class="inactive-action pull-right" href="javascript:void(0)" data-bind="click: function(){ result.isMetaFilterVisible(!result.isMetaFilterVisible()); }, css: { 'blue' : result.isMetaFilterVisible }"><i class="pointer fa fa-search" title="${ _('Search') }"></i></span>
+        <span class="meta-title pointer" data-bind="click: toggleResultSettings">${_('columns')}</span>
+      </li>
     </ul>
     </ul>
-    <ul class="unstyled" data-bind="foreach: result.meta">
+    <input class="meta-filter" type="text" data-bind="visible: result.isMetaFilterVisible, clearable: result.metaFilter, valueUpdate:'afterkeydown'" placeholder="${ _('Filter columns...') }" />
+    <div class="margin-top-10 muted meta-noresults" data-bind="visible: result.filteredMeta().length === 0">
+      ${ _('No results found') }
+    </div>
+    <ul class="unstyled" data-bind="foreach: result.filteredMeta">
       <li data-bind="visible: name != ''">
       <li data-bind="visible: name != ''">
-        <input type="checkbox" checked="checked" data-bind="event: { change: function(){ toggleColumn($element, $index(), $parent);} }" />
-        <a class="pointer" data-bind="text: $data.name, click: function(){ scrollToColumn($element, $index()); }, attr: { title: $data.type + ' ' + '${ _('Click to scroll to data') }'}"></a>
+        <input type="checkbox" data-bind="event: { change: function(){ toggleColumn($element, $data.originalIndex, $parent);} }, checked: $data.checked" />
+        <a class="pointer" data-bind="text: $data.name, click: function(){ scrollToColumn($element, $data.originalIndex); }, attr: { title: $data.type + ' ' + '${ _('Click to scroll to data') }'}"></a>
       </li>
       </li>
     </ul>
     </ul>
   </div>
   </div>