Selaa lähdekoodia

HUE-6532 [assist] Add filter to the docs assist panel

Johan Ahlen 8 vuotta sitten
vanhempi
commit
0f93fc6

+ 21 - 0
desktop/core/src/desktop/static/desktop/js/document/hueFileEntry.js

@@ -90,6 +90,27 @@ var HueFileEntry = (function () {
     self.importedDocSummary = ko.observable();
     self.showTable = ko.observable();
 
+
+    // Filter is only used in the assist panel at the moment
+    self.isFilterVisible = ko.observable(false);
+    self.filter = ko.observable('').extend({ rateLimit: 400 });
+
+    self.isFilterVisible.subscribe(function (newValue) {
+      if (!newValue && self.filter()) {
+        self.filter('');
+      }
+    });
+
+    self.filteredEntries = ko.pureComputed(function () {
+      var filter = self.filter().toLowerCase();
+      if (filter) {
+        return self.entries().filter(function (entry) {
+          return entry.definition().name.toLowerCase().indexOf(filter) !== -1;
+        })
+      }
+      return self.entries();
+    });
+
     self.getSelectedDocsWithDependents = function() {
       self.selectedDocsWithDependents([]);
       var uuids = self.selectedEntries().map(function(entry) {

+ 1 - 0
desktop/core/src/desktop/static/desktop/less/hue-assist.less

@@ -492,6 +492,7 @@
 }
 
 .assist-flex-hdfs-search,
+.assist-flex-documents-search,
 .assist-flex-function-search {
   overflow: hidden;
   position: relative;

+ 6 - 3
desktop/core/src/desktop/templates/assist.mako

@@ -512,7 +512,7 @@ from notebook.conf import get_ordered_interpreters
 
   <script type="text/html" id="assist-document-header-actions">
     <div class="assist-db-header-actions">
-      <a class="inactive-action" href="javascript:void(0)"><i class="pointer fa fa-filter" title="${_('Filter')}"></i></a>
+      <a class="inactive-action" href="javascript:void(0)" data-bind="toggle: isFilterVisible, css: { 'blue': isFilterVisible }" title="Filter"><i class="pointer fa fa-filter"></i></a>
       <a class="inactive-action" href="javascript:void(0)" data-bind="click: function () { huePubSub.publish('assist.file.refresh'); }"><i class="pointer fa fa-refresh" data-bind="css: { 'fa-spin blue' : loading }" title="${_('Manual refresh')}"></i></a>
     </div>
   </script>
@@ -535,10 +535,13 @@ from notebook.conf import get_ordered_interpreters
       <!-- /ko -->
       <!-- ko template: 'assist-document-header-actions' --><!-- /ko -->
     </div>
+    <div class="assist-flex-documents-search" data-bind="visible: isFilterVisible()">
+      <div class="assist-filter"><input class="clearable" type="text" placeholder="${ _('Filter...') }" data-bind="clearable: filter, value: filter, valueUpdate: 'afterkeydown'"/></div>
+    </div>
     <div class="assist-flex-fill assist-file-scrollable">
       <div data-bind="visible: ! loading() && ! hasErrors() && entries().length > 0">
-         <ul class="assist-tables" data-bind="foreachVisible: {data: entries, minHeight: 20, container: '.assist-file-scrollable' }">
-           <li class="assist-entry assist-file-entry" style="position: relative;" data-bind="appAwareTemplateContextMenu: { template: 'document-context-items', scrollContainer: '.assist-db-scrollable' }, assistFileDroppable, visibleOnHover: { 'selector': '.assist-file-actions' }">
+         <ul class="assist-tables" data-bind="foreachVisible: {data: filteredEntries, minHeight: 24, container: '.assist-file-scrollable' }">
+           <li class="assist-entry assist-file-entry" data-bind="appAwareTemplateContextMenu: { template: 'document-context-items', scrollContainer: '.assist-file-scrollable' }, assistFileDroppable, visibleOnHover: { 'selector': '.assist-file-actions' }">
              <div class="assist-file-actions table-actions" style="opacity: 0;" >
                <a style="padding: 0 3px;" class="inactive-action" href="javascript:void(0);" data-bind="templatePopover : { contentTemplate: 'file-details-content', titleTemplate: 'file-details-title', minWidth: '350px' }">
                  <i class='fa fa-info' title="${ _('Details') }"></i>