ソースを参照

HUE-1796 [dbquery] Interactive feedback when sumitting queries

Added feedback when submitting the query
Added collapse query panel to maximise the result screen estate
Fixed table extender plugin
Enrico Berti 12 年 前
コミット
d1b62c8

+ 46 - 2
apps/rdbms/src/rdbms/templates/execute.mako

@@ -56,8 +56,9 @@ ${ commonheader(_('Query'), app_name, user) | n,unicode }
     <div class="span10">
     <div id="query">
       <div class="card card-small">
-        <div style="margin-bottom: 30px">
+        <div style="margin-bottom: 10px">
           <h1 class="card-heading simple">
+            <a id="collapse-editor" href="javascript:void(0)" class="pull-right"><i class="fa fa-caret-up"></i></a>
             ${ _('Query Editor') }
             % if can_edit_name:
               :
@@ -98,7 +99,7 @@ ${ commonheader(_('Query'), app_name, user) | n,unicode }
               <textarea class="hide" tabindex="1" name="query" id="queryField"></textarea>
 
               <div class="actions">
-                <button data-bind="click: tryExecuteQuery" type="button" id="executeQuery" class="btn btn-primary" tabindex="2">${_('Execute')}</button>
+                <button data-bind="click: tryExecuteQuery" type="button" id="executeQuery" class="btn btn-primary disable-feedback" tabindex="2">${_('Execute')}</button>
                 <button data-bind="click: trySaveQuery, css: {'hide': !$root.query.id() || $root.query.id() == -1}" type="button" class="btn hide">${_('Save')}</button>
                 <button data-bind="click: trySaveAsQuery" type="button" class="btn">${_('Save as...')}</button>
                 <button data-bind="click: tryExplainQuery" type="button" id="explainQuery" class="btn">${_('Explain')}</button>
@@ -134,6 +135,17 @@ ${ commonheader(_('Query'), app_name, user) | n,unicode }
         </div>
       </div>
     </div>
+
+    <div data-bind="css: {'hide': !isExecuting()}" class="hide">
+      <div class="card card-small scrollable">
+        <div class="row-fluid">
+          <div class="span10 offset1 center" style="padding: 30px">
+            <!--[if !IE]><!--><i class="fa fa-spinner fa-spin" style="font-size: 60px; color: #DDD"></i><!--<![endif]-->
+            <!--[if IE]><img src="/static/art/spinner.gif" /><![endif]-->
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
   <div class="span2" id="navigator">
       <div class="card card-small">
@@ -531,6 +543,31 @@ ${ commonheader(_('Query'), app_name, user) | n,unicode }
       'html': true
     });
 
+    $("#collapse-editor").on("click", function () {
+      if ($("#query .card-body").is(":visible")) {
+        $("#query .card-body").slideUp(100, function () {
+          $(".dataTables_wrapper").jHueTableScroller();
+          $(".resultTable").jHueTableExtender({
+            hintElement: "#jumpToColumnAlert",
+            fixedHeader: true,
+            firstColumnTooltip: true
+          });
+        });
+        $("#collapse-editor i").removeClass("fa-caret-up").addClass("fa-caret-down");
+      }
+      else {
+        $("#query .card-body").slideDown(100, function () {
+          $(".dataTables_wrapper").jHueTableScroller();
+          $(".resultTable").jHueTableExtender({
+            hintElement: "#jumpToColumnAlert",
+            fixedHeader: true,
+            firstColumnTooltip: true
+          });
+        });
+        $("#collapse-editor i").removeClass("fa-caret-down").addClass("fa-caret-up");
+      }
+    });
+
   });
 
   function modal(el) {
@@ -725,6 +762,11 @@ ${ commonheader(_('Query'), app_name, user) | n,unicode }
     }
   }
 
+  function waitingResultsTable() {
+    $("#executeQuery").attr("data-loading-text", $("#executeQuery").text() + " ...");
+    $("#executeQuery").button("loading");
+  }
+
   function addResults(viewModel, dataTable, index, pageSize) {
     $.each(viewModel.rows.slice(index, index+pageSize), function(row_index, row) {
       var ordered_row = [];
@@ -770,8 +812,10 @@ ${ commonheader(_('Query'), app_name, user) | n,unicode }
       index += pageSize;
 
       $(".resultTable").width($(".resultTable").parent().width());
+      $("#executeQuery").button("reset");
     }
   }
+  $(document).on('start_execution.query', waitingResultsTable);
   $(document).on('execute.query', cleanResultsTable);
   $(document).on('explain.query', cleanResultsTable);
   $(document).on('executed.query', resultsTable);

+ 4 - 0
apps/rdbms/static/js/rdbms.vm.js

@@ -32,6 +32,7 @@ function RdbmsViewModel() {
   self.rows = ko.observableArray();
   self.columns = ko.observableArray();
   self.resultsEmpty = ko.observable(false);
+  self.isExecuting = ko.observable(false);
 
   self.server = ko.computed({
     'read': function() {
@@ -212,6 +213,8 @@ function RdbmsViewModel() {
   };
 
   self.executeQuery = function() {
+    $(document).trigger('start_execution.query');
+    self.isExecuting(true);
     var data = ko.mapping.toJS(self.query);
     data.database = self.database();
     data.server = self.server().name();
@@ -226,6 +229,7 @@ function RdbmsViewModel() {
           self.updateResults(data.results);
           self.query.id(data.design);
           self.resultsEmpty(data.results.rows.length === 0);
+          self.isExecuting(false);
           $(document).trigger('executed.query', data);
         } else {
           self.query.errors.push(data.message);

+ 42 - 36
desktop/core/static/js/jquery.tableextender.js

@@ -55,6 +55,7 @@
 
   Plugin.prototype.setOptions = function (options) {
     this.options = $.extend({}, defaults, options);
+    drawHeader(this);
   };
 
   Plugin.prototype.init = function () {
@@ -139,49 +140,54 @@
     }
 
     if (_this.options.fixedHeader) {
-      var clonedTable = $(_this.element).clone();
-      clonedTable.css("margin-bottom", "0").css("table-layout", "fixed");
-      clonedTable.removeClass("resultTable").find("tbody").remove();
-      $(_this.element).find("thead>tr th").each(function (i) {
-        var originalTh = $(this);
-        clonedTable.find("thead>tr th:eq(" + i + ")").width(originalTh.width()).css("background-color", "#FFFFFF");
-        clonedTable.find("thead>tr th:eq(" + i + ")").click(function () {
-          originalTh.click();
-          clonedTable.find("thead>tr th").attr("class", "sorting");
-          $(this).attr("class", originalTh.attr("class"));
-        });
-      });
-      var clonedTableContainer = $("<div>").width($(_this.element).outerWidth());
-      clonedTable.appendTo(clonedTableContainer);
-
-      var clonedTableVisibleContainer = $("<div>").width($(_this.element).parent().width()).css("overflow-x", "hidden");
-      clonedTableVisibleContainer.css("position", "fixed");
+      drawHeader(_this);
+    }
 
-      clonedTableContainer.appendTo(clonedTableVisibleContainer);
-      clonedTableVisibleContainer.prependTo($(_this.element).parent());
+  };
 
-      $(_this.element).parent().scroll(function () {
-        clonedTableVisibleContainer.scrollLeft($(this).scrollLeft());
+  function drawHeader(_this) {
+    $(".jHueTableExtenderClonedContainer").remove();
+    var clonedTable = $(_this.element).clone();
+    clonedTable.css("margin-bottom", "0").css("table-layout", "fixed");
+    clonedTable.removeClass("resultTable").find("tbody").remove();
+    $(_this.element).find("thead>tr th").each(function (i) {
+      var originalTh = $(this);
+      clonedTable.find("thead>tr th:eq(" + i + ")").width(originalTh.width()).css("background-color", "#FFFFFF");
+      clonedTable.find("thead>tr th:eq(" + i + ")").click(function () {
+        originalTh.click();
+        clonedTable.find("thead>tr th").attr("class", "sorting");
+        $(this).attr("class", originalTh.attr("class"));
       });
+    });
+    var clonedTableContainer = $("<div>").width($(_this.element).outerWidth());
+    clonedTable.appendTo(clonedTableContainer);
 
-      $(_this.element).parent().data("w", clonedTableVisibleContainer.width());
+    var clonedTableVisibleContainer = $("<div>").addClass("jHueTableExtenderClonedContainer").width($(_this.element).parent().width()).css("overflow-x", "hidden");
+    clonedTableVisibleContainer.css("position", "fixed");
 
-      window.setInterval(function () {
-        if ($(_this.element).parent().width() != $(_this.element).parent().data("w")) {
-          clonedTableVisibleContainer.width($(_this.element).parent().width());
-          $(_this.element).parent().data("w", clonedTableVisibleContainer.width());
-          $(_this.element).find("thead>tr th").each(function (i) {
-            clonedTable.find("thead>tr th:eq(" + i + ")").width($(this).width()).css("background-color", "#FFFFFF");
-          });
-        }
-      }, 250);
+    clonedTableContainer.appendTo(clonedTableVisibleContainer);
+    clonedTableVisibleContainer.prependTo($(_this.element).parent());
 
-      $(_this.element).parent().resize(function () {
-        clonedTableVisibleContainer.width($(this).width());
-      });
-    }
+    $(_this.element).parent().scroll(function () {
+      clonedTableVisibleContainer.scrollLeft($(this).scrollLeft());
+    });
 
-  };
+    $(_this.element).parent().data("w", clonedTableVisibleContainer.width());
+
+    window.setInterval(function () {
+      if ($(_this.element).parent().width() != $(_this.element).parent().data("w")) {
+        clonedTableVisibleContainer.width($(_this.element).parent().width());
+        $(_this.element).parent().data("w", clonedTableVisibleContainer.width());
+        $(_this.element).find("thead>tr th").each(function (i) {
+          clonedTable.find("thead>tr th:eq(" + i + ")").width($(this).width()).css("background-color", "#FFFFFF");
+        });
+      }
+    }, 250);
+
+    $(_this.element).parent().resize(function () {
+      clonedTableVisibleContainer.width($(this).width());
+    });
+  }
 
   function getSelection() {
     var t = '';

+ 33 - 31
desktop/core/static/js/jquery.tablescroller.js

@@ -42,6 +42,7 @@
 
   Plugin.prototype.setOptions = function (options) {
     this.options = $.extend({}, defaults, options);
+    resizeScrollingTable(this);
   };
 
   Plugin.prototype.init = function () {
@@ -51,7 +52,7 @@
 
     var disableScrollingTable = $(_this.element).find("table").eq(0).data("tablescroller-disable");
     if (disableScrollingTable == null || disableScrollingTable != true) {
-      resizeScrollingTable(_this.element);
+      resizeScrollingTable(_this);
       var _resizeTimeout = -1;
       var winWidth = $(window).width();
       var winHeight = $(window).height();
@@ -60,7 +61,7 @@
         _resizeTimeout = window.setTimeout(function(){
           // prevents endless loop in IE8
           if (winWidth != $(window).width() || winHeight != $(window).height()) {
-            resizeScrollingTable(_this.element);
+            resizeScrollingTable(_this);
             winWidth = $(window).width();
             winHeight = $(window).height();
           }
@@ -68,44 +69,45 @@
       });
     }
 
-    function resizeScrollingTable(el) {
-      $(el).css("overflow-y", "").css("height", "");
-      var heightAfter = _this.options.heightAfterCorrection;
-      $(el).nextAll(":visible").each(function () {
-        heightAfter += $(this).outerHeight(true);
-      });
+  };
+  function resizeScrollingTable(_this) {
+    var el = _this.element;
+    $(el).css("overflow-y", "").css("height", "");
+    var heightAfter = _this.options.heightAfterCorrection;
+    $(el).nextAll(":visible").each(function () {
+      heightAfter += $(this).outerHeight(true);
+    });
 
-      var heightCondition = $(el).height() > ($(window).height() - $(el).offset().top - heightAfter);
-      var enforceHeight = $(_this.element).find("table").eq(0).data("tablescroller-enforce-height");
-      if (enforceHeight !== undefined && enforceHeight == true) {
-        heightCondition = true;
-      }
+    var heightCondition = $(el).height() > ($(window).height() - $(el).offset().top - heightAfter);
+    var enforceHeight = $(_this.element).find("table").eq(0).data("tablescroller-enforce-height");
+    if (enforceHeight !== undefined && enforceHeight == true) {
+      heightCondition = true;
+    }
 
-      if (heightCondition) {
-        var specificMinHeight = $(el).find("table").eq(0).data("tablescroller-min-height");
-        var minHeightVal = _this.options.minHeight;
-        if (!isNaN(parseFloat(specificMinHeight)) && isFinite(specificMinHeight)) {
-          minHeightVal = parseFloat(specificMinHeight);
+    if (heightCondition) {
+      var specificMinHeight = $(el).find("table").eq(0).data("tablescroller-min-height");
+      var minHeightVal = _this.options.minHeight;
+      if (!isNaN(parseFloat(specificMinHeight)) && isFinite(specificMinHeight)) {
+        minHeightVal = parseFloat(specificMinHeight);
+      }
+      var disableMinHeight = $(_this.element).find("table").eq(0).data("tablescroller-min-height-disable");
+      if (disableMinHeight != null && disableMinHeight == true) {
+        if (heightCondition) {
+          $(el).css("overflow-y", "auto").height($(window).height() - $(el).offset().top - heightAfter);
         }
-        var disableMinHeight = $(_this.element).find("table").eq(0).data("tablescroller-min-height-disable");
-        if (disableMinHeight != null && disableMinHeight == true) {
-          if (heightCondition) {
-            $(el).css("overflow-y", "auto").height($(window).height() - $(el).offset().top - heightAfter);
-          }
+      }
+      else {
+        if (($(window).height() - $(el).offset().top - heightAfter) > minHeightVal){
+          $(el).css("overflow-y", "auto").height($(window).height() - $(el).offset().top - heightAfter);
         }
         else {
-          if (($(window).height() - $(el).offset().top - heightAfter) > minHeightVal){
-            $(el).css("overflow-y", "auto").height($(window).height() - $(el).offset().top - heightAfter);
-          }
-          else {
-            if ($(el).data("original-height") > minHeightVal){
-              $(el).css("overflow-y", "auto").height(minHeightVal);
-            }
+          if ($(el).data("original-height") > minHeightVal){
+            $(el).css("overflow-y", "auto").height(minHeightVal);
           }
         }
       }
     }
-  };
+  }
 
   $.fn[pluginName] = function (options) {
     return this.each(function () {