浏览代码

HUE-4066 [editor] Put a toggle all columns in the result column list

Enrico Berti 9 年之前
父节点
当前提交
8af04a13ab

+ 1 - 1
desktop/core/src/desktop/static/desktop/css/hue3.css

@@ -2048,7 +2048,7 @@ input.no-margin, select.no-margin {
 }
 
 .no-margin-top {
-  margin-top: 0;
+  margin-top: 0!important;
 }
 
 .no-margin-right {

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

@@ -1064,7 +1064,7 @@ pre {
 }
 
 .meta-filter {
-  width: 140px;
+  width: 118px;
 }
 
 .meta-noresults {

+ 14 - 1
desktop/libs/notebook/src/notebook/static/notebook/js/notebook.ko.js

@@ -66,10 +66,16 @@
     });
     self.metaFilter = ko.observable('');
     self.isMetaFilterVisible = ko.observable(false);
+    self.filteredMetaChecked = ko.observable(true);
     self.filteredMeta = ko.pureComputed(function () {
       return ko.utils.arrayFilter(self.meta(), function (item, i) {
         if (typeof item.checked === 'undefined') {
-          item.checked = true;
+          item.checked = ko.observable(true);
+          item.checked.subscribe(function () {
+            self.filteredMetaChecked(ko.utils.arrayFilter(self.filteredMeta(), function (item) {
+                return !item.checked();
+              }).length == 0);
+          });
         }
         if (typeof item.originalIndex === 'undefined') {
           item.originalIndex = i;
@@ -77,6 +83,13 @@
         return item.name.toLowerCase().indexOf(self.metaFilter().toLowerCase()) > -1;
       });
     });
+
+    self.clickFilteredMetaCheck = function () {
+      self.filteredMeta().forEach(function (item) {
+        item.checked(self.filteredMetaChecked());
+      });
+    };
+
     self.hasManyColumns = ko.pureComputed(function () {
       return self.meta() && self.meta().length > 300;
     });

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

@@ -1456,18 +1456,19 @@ ${ hueIcons.symbols() }
 <script type="text/html" id="snippet-grid-settings">
   <div style="overflow:auto">
     <ul class="nav nav-list" style="border: none; background-color: #FFF">
-      <li class="nav-header" title="${_('Hide columns')}">
+      <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>
+        <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>
     </ul>
-    <input class="meta-filter" type="text" data-bind="visible: result.isMetaFilterVisible, clearable: result.metaFilter, valueUpdate:'afterkeydown'" placeholder="${ _('Filter columns...') }" />
+    <input class="meta-filter" type="text" data-bind="visible: result.isMetaFilterVisible, clearable: result.metaFilter, valueUpdate:'afterkeydown'" placeholder="${ _('Filter columns...') }" style="margin-bottom: 10px"/>
     <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">
+    <ul class="unstyled filtered-meta" data-bind="foreach: result.filteredMeta">
       <li data-bind="visible: name != ''">
-        <input type="checkbox" data-bind="event: { change: function(){ toggleColumn($element, $data.originalIndex, $parent);} }, checked: $data.checked" />
+        <input class="no-margin-top" 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>
     </ul>
@@ -2232,6 +2233,18 @@ ${ hueIcons.symbols() }
     return _dt;
   }
 
+  function toggleAllColumns(linkElement, snippet) {
+    var dt;
+    if (snippet.result.hasManyColumns()) {
+      dt = $(linkElement).parents(".snippet").find("table.resultTable:eq(0)").hueDataTable();
+    } else {
+      dt = $(linkElement).parents(".snippet").find("table.resultTable:eq(0)").dataTable();
+    }
+    $(linkElement).parents(".snippet").find('.filtered-meta li input').each(function (idx, item) {
+      dt.fnSetColumnVis(idx, linkElement.checked);
+    });
+  }
+
   function toggleColumn(linkElement, index, snippet) {
     var dt;
     if (snippet.result.hasManyColumns()) {
@@ -2239,7 +2252,7 @@ ${ hueIcons.symbols() }
     } else {
       dt = $(linkElement).parents(".snippet").find("table.resultTable:eq(0)").dataTable();
     }
-    dt.fnSetColumnVis(index, !dt.fnSettings().aoColumns[index].bVisible);
+    dt.fnSetColumnVis(index, linkElement.checked);
   }
 
   function scrollToColumn(linkElement) {