Browse Source

HUE-1906 [beeswax] Better UX for the goto columns on the result page

Made column tab prettier
Removed jHueTableExtender from the result table
Added column filter when more than 10 columns
Enrico Berti 11 years ago
parent
commit
ff44e5f
1 changed files with 28 additions and 11 deletions
  1. 28 11
      apps/beeswax/src/beeswax/templates/execute.mako

+ 28 - 11
apps/beeswax/src/beeswax/templates/execute.mako

@@ -305,13 +305,14 @@ ${layout.menubar(section='query')}
           <pre data-bind="text: $root.design.watch.logs().join('\n')"></pre>
           <pre data-bind="text: $root.design.watch.logs().join('\n')"></pre>
         </div>
         </div>
         <div class="tab-pane" id="columns">
         <div class="tab-pane" id="columns">
+          <div data-bind="visible: $root.design.results.columns().length > 10">
+            <input id="columnFilter" class="input-xlarge" type="text" placeholder="${_('Filter for column name or type...')}" />
+          </div>
           <table class="table table-striped table-condensed" cellpadding="0" cellspacing="0">
           <table class="table table-striped table-condensed" cellpadding="0" cellspacing="0">
-            <thead>
-              <tr><th>${_('Name')}</th></tr>
-            </thead>
             <tbody data-bind="foreach: $root.design.results.columns">
             <tbody data-bind="foreach: $root.design.results.columns">
-              <tr>
-                <td><a href="javascript:void(0)" class="column-selector" data-bind="text: $data.name + ($.trim($data.type) != '' ? ' (' + $.trim($data.type) + ')' : '')"></a></td>
+              <tr class="columnRow">
+                <td rel="columntooltip" data-placement="left" data-bind="attr: {title: 'Scroll the column \'' + $data.name + '\''}"><a href="javascript:void(0)" data-row-selector="true" class="column-selector" data-bind="text: $data.name"></a></td>
+                <td class="columnType" data-bind="text: $.trim($data.type)"></td>
               </tr>
               </tr>
             </tbody>
             </tbody>
           </table>
           </table>
@@ -747,6 +748,11 @@ ${layout.menubar(section='query')}
     min-height: 100px;
     min-height: 100px;
   }
   }
 
 
+  .columnType {
+    text-align: right!important;
+    color: #999;
+  }
+
 </style>
 </style>
 
 
 <link href="/static/ext/css/leaflet.css" rel="stylesheet">
 <link href="/static/ext/css/leaflet.css" rel="stylesheet">
@@ -786,6 +792,15 @@ $(document).ready(function () {
     });
     });
   });
   });
 
 
+  $("#columnFilter").jHueDelayedInput(function(){
+    $(".columnRow").removeClass("hide");
+    $(".columnRow").each(function () {
+      if ($(this).text().toLowerCase().indexOf($("#columnFilter").val().toLowerCase()) == -1) {
+        $(this).addClass("hide");
+      }
+    });
+  });
+
   resetNavigator = function () {
   resetNavigator = function () {
     var _db = viewModel.database();
     var _db = viewModel.database();
     if (_db != null) {
     if (_db != null) {
@@ -908,7 +923,7 @@ $(document).ready(function () {
 
 
   $(document).on("click", ".column-selector", function () {
   $(document).on("click", ".column-selector", function () {
     var _t = $(".resultTable");
     var _t = $(".resultTable");
-    var _col = _t.find("th:econtains(" + $(this).text() + ")");
+    var _col = _t.find("th:contains(" + $.trim($(this).text().split("(")[0]) + ")");
     _t.find(".columnSelected").removeClass("columnSelected");
     _t.find(".columnSelected").removeClass("columnSelected");
     _t.find("tr td:nth-child(" + (_col.index() + 1) + ")").addClass("columnSelected");
     _t.find("tr td:nth-child(" + (_col.index() + 1) + ")").addClass("columnSelected");
     $("a[href='#results']").click();
     $("a[href='#results']").click();
@@ -951,11 +966,6 @@ function reinitializeTable(max) {
         minHeight: $(window).height() - 190,
         minHeight: $(window).height() - 190,
         heightAfterCorrection: 0
         heightAfterCorrection: 0
       });
       });
-      $(".resultTable").jHueTableExtender({
-        hintElement: "#jumpToColumnAlert",
-        fixedHeader: true,
-        firstColumnTooltip: true
-      });
       container.height($(".dataTables_wrapper").height());
       container.height($(".dataTables_wrapper").height());
       $(".dataTables_wrapper").jHueScrollUp();
       $(".dataTables_wrapper").jHueScrollUp();
     } else if ($('#resultEmpty').height() > 0) {
     } else if ($('#resultEmpty').height() > 0) {
@@ -1401,6 +1411,13 @@ $(document).ready(function () {
       _logsEl.scrollTop(_logsEl[0].scrollHeight - _logsEl.height());
       _logsEl.scrollTop(_logsEl[0].scrollHeight - _logsEl.height());
     }
     }
   });
   });
+
+  viewModel.design.results.columns.subscribe(function(val){
+    $("*[rel=columntooltip]").tooltip({
+      delay: {show: 500}
+    });
+    $("a[data-row-selector='true']").jHueRowSelector();
+  });
 });
 });
 
 
 function resizeLogs() {
 function resizeLogs() {