Parcourir la 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 il y a 12 ans
Parent
commit
ff44e5faf4
1 fichiers modifiés avec 28 ajouts et 11 suppressions
  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() {