Explorar o código

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 %!s(int64=11) %!d(string=hai) anos
pai
achega
ff44e5f
Modificáronse 1 ficheiros con 28 adicións e 11 borrados
  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>
         </div>
         <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">
-            <thead>
-              <tr><th>${_('Name')}</th></tr>
-            </thead>
             <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>
             </tbody>
           </table>
@@ -747,6 +748,11 @@ ${layout.menubar(section='query')}
     min-height: 100px;
   }
 
+  .columnType {
+    text-align: right!important;
+    color: #999;
+  }
+
 </style>
 
 <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 () {
     var _db = viewModel.database();
     if (_db != null) {
@@ -908,7 +923,7 @@ $(document).ready(function () {
 
   $(document).on("click", ".column-selector", function () {
     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("tr td:nth-child(" + (_col.index() + 1) + ")").addClass("columnSelected");
     $("a[href='#results']").click();
@@ -951,11 +966,6 @@ function reinitializeTable(max) {
         minHeight: $(window).height() - 190,
         heightAfterCorrection: 0
       });
-      $(".resultTable").jHueTableExtender({
-        hintElement: "#jumpToColumnAlert",
-        fixedHeader: true,
-        firstColumnTooltip: true
-      });
       container.height($(".dataTables_wrapper").height());
       $(".dataTables_wrapper").jHueScrollUp();
     } else if ($('#resultEmpty').height() > 0) {
@@ -1401,6 +1411,13 @@ $(document).ready(function () {
       _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() {