瀏覽代碼

[metastore] Added hueach binding to the table and database list

Enrico Berti 10 年之前
父節點
當前提交
c6b2f989c6

+ 8 - 5
apps/metastore/src/metastore/static/metastore/js/metastore.ko.js

@@ -52,12 +52,15 @@
     self.tableQuery = ko.observable('').extend({rateLimit: 150});
 
     self.filteredTables = ko.computed(function () {
-      if (self.tableQuery() === '') {
-        return self.tables();
-      }
-      return $.grep(self.tables(), function (table) {
-        return table.name.toLowerCase().indexOf(self.tableQuery()) > -1
+      var returned = self.tables();
+      if (self.tableQuery() !== '') {
+        returned = $.grep(self.tables(), function (table) {
+          return table.name.toLowerCase().indexOf(self.tableQuery()) > -1
             || (table.comment() && table.comment().toLowerCase().indexOf(self.tableQuery()) > -1);
+        });
+      }
+      return returned.sort(function (a, b) {
+        return a.name.toLowerCase().localeCompare(b.name.toLowerCase());
       });
     });
 

+ 3 - 3
apps/metastore/src/metastore/templates/metastore.mako

@@ -298,7 +298,7 @@ ${ assist.assistPanel() }
       <th>${ _('Database Name') }</th>
     </tr>
     </thead>
-    <tbody data-bind="foreach: filteredDatabases">
+    <tbody data-bind="hueach: {data: filteredDatabases, itemHeight: 29, scrollable: '.right-panel', scrollableOffset: 145}">
     <tr>
       <td width="1%" style="text-align: center">
         <div class="hueCheckbox fa" data-bind="multiCheck: '#databasesTable', value: $data, hueChecked: $parent.selectedDatabases"></div>
@@ -383,7 +383,7 @@ ${ assist.assistPanel() }
           % endif
         </div>
 
-        <table id="tablesTable" class="table table-striped table-condensed sampleTable" style="margin-bottom: 10px" data-bind="visible: tables().length > 0">
+        <table id="tablesTable" class="table table-striped table-condensed sampleTable" style="margin-bottom: 10px; width: 100%" data-bind="visible: tables().length > 0">
           <thead>
           <tr>
             <th width="1%" style="text-align: center"><div class="hueCheckbox fa" data-bind="hueCheckAll: { allValues: filteredTables, selectedValues: selectedTables }"></div></th>
@@ -393,7 +393,7 @@ ${ assist.assistPanel() }
             <th>${ _('Type') }</th>
           </tr>
           </thead>
-          <tbody data-bind="foreach: filteredTables">
+          <tbody data-bind="hueach: {data: filteredTables, itemHeight: 29, scrollable: '.right-panel', scrollableOffset: 277}">
             <tr>
               <td width="1%" style="text-align: center">
                 <div class="hueCheckbox fa" data-bind="multiCheck: '#tablesTable', value: $data, hueChecked: $parent.selectedTables"></div>

+ 58 - 22
desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

@@ -2746,22 +2746,35 @@
         considerStretching = valueAccessor().considerStretching || false,
         itemHeight = valueAccessor().itemHeight || 22,
         scrollable = valueAccessor().scrollable || 'body',
+        scrollableOffset = valueAccessor().scrollableOffset || 0,
+        forceRenderSub = valueAccessor().forceRenderSub || null,
         renderTimeout = -1,
         dataHasChanged = true;
 
-      if (!$parent.hasClass('hueach')) {
-        $(element).wrap('<div class="hueach"></div>');
-        $parent = $(element).parent();
-        $(element).css({
+
+      var wrappable = $(element);
+      if ($parent.is('table')) {
+        wrappable = $parent;
+        $parent = wrappable.parent();
+      }
+
+      if (!wrappable.parent().hasClass('hueach')) {
+        wrappable.wrap('<div class="hueach"></div>');
+        $parent = wrappable.parent();
+        wrappable.css({
           position: 'absolute',
           width: '100%'
         });
       }
 
       $parent.height(valueAccessor().data().length * itemHeight);
-      if (ko.utils.domData.get(element, 'originalData') && JSON.stringify(ko.utils.domData.get(element, 'originalData')) === JSON.stringify(valueAccessor().data())) {
-        dataHasChanged = false;
+      try {
+        if (ko.utils.domData.get(element, 'originalData') && JSON.stringify(ko.utils.domData.get(element, 'originalData')) === JSON.stringify(valueAccessor().data())) {
+          dataHasChanged = false;
+        }
       }
+      catch (e) {}
+
       if (dataHasChanged) {
         ko.utils.domData.set(element, 'originalData', valueAccessor().data());
       }
@@ -2774,22 +2787,35 @@
       }
 
       var render = function () {
-        if ($parent.parents('.hueach').length === 0){
+        if ($parent.parents('.hueach').length === 0) {
           var heightCorrection = 0, fluidCorrection = 0;
-          $element.children(':visible').each(function(cnt, child){
-            if ($(child).height() >= itemHeight){
-              heightCorrection += $(child).height();
+          if (wrappable.is('table')) {
+            if ($parent.parents(scrollable).scrollTop() < scrollableOffset + itemHeight) {
+              wrappable.find('thead').css('opacity', '1');
+            }
+            else {
+              wrappable.find('thead').css('opacity', '0');
+            }
+          }
+          else {
+            wrappable.children(':visible').each(function (cnt, child) {
+              if ($(child).height() >= itemHeight) {
+                heightCorrection += $(child).height();
+              }
+            });
+            if (heightCorrection > 0) {
+              ko.utils.domData.set(element, 'heightCorrection', heightCorrection);
+            }
+            if (heightCorrection == 0 && ko.utils.domData.get(element, 'heightCorrection')) {
+              fluidCorrection = ko.utils.domData.get(element, 'heightCorrection') - 20;
             }
-          });
-          if (heightCorrection > 0){
-            ko.utils.domData.set(element, 'heightCorrection', heightCorrection);
           }
-          if (heightCorrection == 0 && ko.utils.domData.get(element, 'heightCorrection')){
-            fluidCorrection = ko.utils.domData.get(element, 'heightCorrection') - 20;
+          startItem = Math.max(0, Math.floor(Math.max(1, ($parent.parents(scrollable).scrollTop() - heightCorrection - fluidCorrection - scrollableOffset)) / itemHeight) - 10);
+          if (wrappable.is('table') && startItem % 2 == 1) {
+            startItem--;
           }
-          startItem = Math.max(0, Math.floor(Math.max(1, ($parent.parents(scrollable).scrollTop() - heightCorrection - fluidCorrection)) / itemHeight) - 5);
-          endItem = Math.min(startItem + Math.ceil($parent.parents(scrollable).height() / itemHeight) + 5, valueAccessor().data().length);
-          $element.css('top', ((startItem * itemHeight) + fluidCorrection) + 'px');
+          endItem = Math.min(startItem + Math.ceil($parent.parents(scrollable).height() / itemHeight) + 10, valueAccessor().data().length);
+          wrappable.css('top', ((startItem * itemHeight) + fluidCorrection) + 'px');
         }
         else {
           startItem = 0, endItem = valueAccessor().data().length;
@@ -2797,9 +2823,10 @@
         ko.bindingHandlers.foreach.update(element, valueAccessorBuilder, allBindings, viewModel, bindingContext);
       }
 
+      $parent.parents(scrollable).off('scroll');
       $parent.parents(scrollable).on('scroll', render);
 
-      if ($parent.parents('.hueach').length > 0){
+      if ($parent.parents('.hueach').length > 0) {
         window.setTimeout(render, 100);
       }
 
@@ -2807,15 +2834,24 @@
         huePubSub.subscribe('assist.stretchDown', function () {
           window.clearTimeout(renderTimeout);
           renderTimeout = window.setTimeout(function () {
-              ko.utils.domData.set(element, 'hasStretched', true);
+            ko.utils.domData.set(element, 'hasStretched', true);
             render();
           }, 300);
         });
       }
 
-      if (considerStretching && ko.utils.domData.get(element, 'hasStretched')) {
-        render();
+      if (forceRenderSub) {
+        huePubSub.subscribe(forceRenderSub, function () {
+          window.setTimeout(render, 300);
+        });
       }
+
+      window.clearTimeout(renderTimeout);
+      renderTimeout = window.setTimeout(function () {
+        ko.utils.domData.set(element, 'hasStretched', true);
+        render();
+      }, 300);
+
     }
   };