فهرست منبع

[assist] Fix table and database search and improve search performance of the foreachVisible binding

Johan Ahlen 9 سال پیش
والد
کامیت
93428c6
2فایلهای تغییر یافته به همراه39 افزوده شده و 7 حذف شده
  1. 18 5
      desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js
  2. 21 2
      desktop/core/src/desktop/templates/assist.mako

+ 18 - 5
desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

@@ -3131,8 +3131,25 @@
         $element.css('top', top + 'px');
       };
 
+      var afterRender = function () {
+        renderedElements = $element.children();
+        $container.data('busyRendering', false);
+        huePubSub.publish('foreach.visible.update.heights', id);
+      };
+
       var render = function () {
         if (endIndex < 0) {
+          ko.bindingHandlers.template.update(element, function () {
+            return {
+              'foreach': [],
+              'templateEngine': ko.nativeTemplateEngine.instance,
+              'afterRender': function () {
+                // This is called once for each added element (not when elements are removed)
+                clearTimeout(throttle);
+                throttle = setTimeout(afterRender, 0);
+              }
+            };
+          }, allBindings, viewModel, childBindingContext);
           return;
         }
         $container.data('busyRendering', true);
@@ -3141,11 +3158,6 @@
         $parentFVOwnerElement.data('endIndex', endIndex);
         positionList();
 
-        var afterRender = function () {
-          renderedElements = $element.children();
-          $container.data('busyRendering', false);
-          huePubSub.publish('foreach.visible.update.heights', id);
-        };
 
         // This is to ensure that our afterRender is called (the afterRender of KO below isn't called
         // when only elements are removed)
@@ -3244,6 +3256,7 @@
 
       ko.utils.domNodeDisposal.addDisposeCallback($wrapper[0], $parentFVOwnerElement.data('disposalFunction'));
 
+      setStartAndEndFromScrollTop();
       render();
     }
   };

+ 21 - 2
desktop/core/src/desktop/templates/assist.mako

@@ -247,6 +247,20 @@ from desktop.views import _ko
       white-space: nowrap;
     }
 
+    .assist-flex-table-search {
+      overflow: hidden;
+      position: relative;
+      flex: 0 0 65px;
+      white-space: nowrap;
+    }
+
+    .assist-flex-search {
+      overflow: hidden;
+      position: relative;
+      flex: 0 0 43px;
+      white-space: nowrap;
+    }
+
     .assist-flex-fill {
       position: relative;
       flex: 1 1 100%;
@@ -536,10 +550,15 @@ from desktop.views import _ko
         <!-- ko template: 'assist-db-header-actions' --><!-- /ko -->
       </div>
     </div>
-    <div class="assist-flex-header" data-bind="slideVisible: hasEntries() && isSearchVisible() && ! hasErrors()">
+    <div class="assist-flex-search" data-bind="visible: hasEntries() && isSearchVisible() && ! hasErrors()">
       <div><input id="searchInput" class="clearable" type="text" placeholder="${ _('Database name...') }" style="margin-top:3px;width:90%;" data-bind="hasFocus: editingSearch, clearable: filter.query, value: filter.query, valueUpdate: 'afterkeydown'"/></div>
     </div>
     <div class="assist-flex-fill assist-db-scrollable" data-bind="visible: ! hasErrors() && ! loading()" style="display: none;">
+      <!-- ko if: hasEntries() && ! loading() && filteredEntries().length == 0 -->
+      <ul class="assist-tables">
+        <li class="assist-entry no-entries">${_('No results found')}</li>
+      </ul>
+      <!-- /ko -->
       <ul class="assist-tables" data-bind="foreachVisible: {data: filteredEntries, minHeight: 20, container: '.assist-db-scrollable' }">
         <li class="assist-table pointer" data-bind="visibleOnHover: { selector: '.database-actions' }">
           <!-- ko template: { name: 'assist-entry-actions' } --><!-- /ko -->
@@ -562,7 +581,7 @@ from desktop.views import _ko
         <!-- ko template: 'assist-db-header-actions' --><!-- /ko -->
       </div>
     </div>
-    <div class="assist-flex-header" data-bind="slideVisible: hasEntries() && isSearchVisible() && !$parent.loading() && !$parent.hasErrors()">
+    <div class="assist-flex-table-search" data-bind="visible: hasEntries() && isSearchVisible() && !$parent.loading() && !$parent.hasErrors()">
       <div><label class="checkbox inline-block margin-left-5"><input type="checkbox" data-bind="checked: filter.showTables" />Tables</label><label class="checkbox inline-block margin-left-10"><input type="checkbox" data-bind="checked: filter.showViews" />Views</label></div>
       <div><input id="searchInput" class="clearable" type="text" placeholder="${ _('Table name...') }" style="width:90%;" data-bind="hasFocus: editingSearch, clearable: filter.query, value: filter.query, valueUpdate: 'afterkeydown'"/></div>
     </div>