Browse Source

HUE-4111 [editor] Toggle to show or hide the column search field on result is always on

Enrico Berti 9 years ago
parent
commit
cfd2483

+ 5 - 3
desktop/core/src/desktop/static/desktop/js/assist/assistDbEntry.js

@@ -136,10 +136,12 @@
     });
   }
 
-  AssistDbEntry.prototype.toggleSearch = function() {
+  AssistDbEntry.prototype.toggleSearch = function () {
     var self = this;
-    self.isSearchVisible(!self.isSearchVisible());
-    self.editingSearch(self.isSearchVisible());
+    if (!self.isSearchVisible()) {
+      self.isSearchVisible(true);
+      self.editingSearch(self.isSearchVisible());
+    }
   };
 
   AssistDbEntry.prototype.triggerRefresh = function () {

+ 5 - 3
desktop/core/src/desktop/static/desktop/js/assist/assistDbSource.js

@@ -199,10 +199,12 @@
     });
   }
 
-  AssistDbSource.prototype.toggleSearch = function() {
+  AssistDbSource.prototype.toggleSearch = function () {
     var self = this;
-    self.isSearchVisible(!self.isSearchVisible());
-    self.editingSearch(self.isSearchVisible());
+    if (!self.isSearchVisible()) {
+      self.isSearchVisible(true);
+      self.editingSearch(self.isSearchVisible());
+    }
   };
 
   AssistDbSource.prototype.triggerRefresh = function () {

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

@@ -1694,6 +1694,20 @@
     }
   }
 
+  ko.bindingHandlers.blurHide = {
+    init: function (element, valueAccessor) {
+      var $el = $(element);
+      var prop = valueAccessor();
+      $el.on('blur', function () {
+        if ($.trim($el.val()) === '') {
+          if (ko.isObservable(prop)) {
+            prop(false);
+          }
+        }
+      });
+    }
+  }
+
   ko.bindingHandlers.spinedit = {
     init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
       var options = $.extend({

+ 2 - 2
desktop/core/src/desktop/templates/assist.mako

@@ -732,7 +732,7 @@ from desktop.views import _ko
       </div>
     </div>
     <div class="assist-flex-search" data-bind="visible: hasEntries() && isSearchVisible() && ! hasErrors()">
-      <div><input id="searchInput" class="clearable" type="text" placeholder="${ _('Database name...') }" style="margin-top:3px;width:90%;" data-bind="hasFocus: editingSearch, clearable: filter.query, value: filter.query, valueUpdate: 'afterkeydown'"/></div>
+      <div><input id="searchInput" class="clearable" type="text" placeholder="${ _('Database name...') }" style="margin-top:3px;width:90%;" data-bind="hasFocus: editingSearch, blurHide: isSearchVisible, clearable: filter.query, value: filter.query, valueUpdate: 'afterkeydown'"/></div>
     </div>
     <div class="assist-flex-fill assist-db-scrollable" data-bind="visible: ! hasErrors() && ! loading() && hasEntries()" style="display: none;">
       <!-- ko if: ! loading() && filteredEntries().length == 0 -->
@@ -767,7 +767,7 @@ from desktop.views import _ko
     </div>
     <div class="assist-flex-table-search" data-bind="visible: hasEntries() && isSearchVisible() && !$parent.loading() && !$parent.hasErrors()">
       <div><label class="checkbox inline-block margin-left-5"><input type="checkbox" data-bind="checked: filter.showTables" />Tables</label><label class="checkbox inline-block margin-left-10"><input type="checkbox" data-bind="checked: filter.showViews" />Views</label></div>
-      <div><input id="searchInput" class="clearable" type="text" placeholder="${ _('Table name...') }" style="width:90%;" data-bind="hasFocus: editingSearch, clearable: filter.query, value: filter.query, valueUpdate: 'afterkeydown'"/></div>
+      <div><input id="searchInput" class="clearable" type="text" placeholder="${ _('Table name...') }" style="width:90%;" data-bind="hasFocus: editingSearch, blurHide: isSearchVisible, clearable: filter.query, value: filter.query, valueUpdate: 'afterkeydown'"/></div>
     </div>
     <div class="assist-flex-fill assist-db-scrollable" data-bind="visible: ! hasErrors() && ! loading() && ! $parent.loading()" style="display: none;">
       <!-- ko template: 'assist-db-entries' --><!-- /ko -->

+ 5 - 5
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -1084,15 +1084,15 @@ ${ hueIcons.symbols() }
       <ul class="nav nav-tabs">
         <li data-bind="click: function(){ currentQueryTab('queryHistory'); }, css: {'active': currentQueryTab() == 'queryHistory'}">
           <a class="inactive-action" href="#queryHistory" data-toggle="tab">${_('Query History')}
-            <div class="inline-block inactive-action margin-left-10 pointer" title="${_('Search the query history')}" data-bind="click: function(data, e){ $parent.historyFilterVisible(!$parent.historyFilterVisible()); window.setTimeout(function(){ $(e.target).parent().siblings('input').focus(); }, 0); }"><i class="snippet-icon fa fa-search"></i></div>
-            <input class="input-small history-filter" type="text" data-bind="visible: $parent.historyFilterVisible, hasFocus: $parent.historyFilterVisible, clearable: $parent.historyFilter, valueUpdate:'afterkeydown'" placeholder="${ _('Search...') }">
+            <div class="inline-block inactive-action margin-left-10 pointer" title="${_('Search the query history')}" data-bind="click: function(data, e){ $parent.historyFilterVisible(true); window.setTimeout(function(){ $(e.target).parent().siblings('input').focus(); }, 0); }"><i class="snippet-icon fa fa-search"></i></div>
+            <input class="input-small history-filter" type="text" data-bind="visible: $parent.historyFilterVisible, blurHide: $parent.historyFilterVisible, clearable: $parent.historyFilter, valueUpdate:'afterkeydown'" placeholder="${ _('Search...') }">
             <div class="inline-block inactive-action pointer" title="${_('Clear the query history')}" data-target="#clearHistoryModal" data-toggle="modal" rel="tooltip" data-bind="visible: $parent.history().length > 0"><i class="snippet-icon fa fa-calendar-times-o"></i></div>
           </a>
         </li>
         <li data-bind="click: function(){ currentQueryTab('savedQueries'); }, css: {'active': currentQueryTab() == 'savedQueries'}">
           <a class="inactive-action" href="#savedQueries" data-toggle="tab">${_('Saved Queries')}
-            <div class="inline-block inactive-action margin-left-10 pointer" title="${_('Search the saved queries')}" data-bind="visible: !queriesHasErrors(), click: function(data, e){ queriesFilterVisible(!queriesFilterVisible()); window.setTimeout(function(){ $(e.target).parent().siblings('input').focus(); }, 0); }"><i class="snippet-icon fa fa-search"></i></div>
-            <input class="input-small history-filter" type="text" data-bind="visible: queriesFilterVisible, hasFocus: queriesFilterVisible, clearable: queriesFilter, valueUpdate:'afterkeydown'" placeholder="${ _('Search...') }">
+            <div class="inline-block inactive-action margin-left-10 pointer" title="${_('Search the saved queries')}" data-bind="visible: !queriesHasErrors(), click: function(data, e){ queriesFilterVisible(true); window.setTimeout(function(){ $(e.target).parent().siblings('input').focus(); }, 0); }"><i class="snippet-icon fa fa-search"></i></div>
+            <input class="input-small history-filter" type="text" data-bind="visible: queriesFilterVisible, blurHide: queriesFilterVisible, clearable: queriesFilter, valueUpdate:'afterkeydown'" placeholder="${ _('Search...') }">
           </a>
         </li>
         %if ENABLE_QUERY_BUILDER.get():
@@ -1508,7 +1508,7 @@ ${ hueIcons.symbols() }
   <div style="overflow:auto">
     <ul class="nav nav-list" style="border: none; background-color: #FFF">
       <li class="nav-header" title="${_('Hide columns')}" style="margin-left: -2px">
-        <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="inactive-action pull-right" href="javascript:void(0)" data-bind="click: function(){ result.isMetaFilterVisible(true); }, css: { 'blue' : result.isMetaFilterVisible }"><i class="pointer fa fa-search" title="${ _('Search') }"></i></span>
         <input class="all-meta-checked no-margin-top" type="checkbox" data-bind="enable: !result.isMetaFilterVisible() && result.filteredMeta().length > 0, event: { change: function(){ toggleAllColumns($element, $data); result.clickFilteredMetaCheck() } }, checked: result.filteredMetaChecked" />
         <span class="meta-title pointer" data-bind="click: toggleResultSettings">${_('columns')}</span>
       </li>