Pārlūkot izejas kodu

[assist] Limit the initially shown database entries

Initially it will show the first 500 entries, taking any active query into account. The limit can be extended with 500 entries at a time but will reset to 500 when the page is reloaded.
Johan Ahlen 10 gadi atpakaļ
vecāks
revīzija
b50c7f6f30

+ 20 - 1
desktop/core/src/desktop/static/desktop/js/assist/assistDbEntry.js

@@ -74,7 +74,26 @@
       return self.entries().length > 0;
     });
 
-    self.filteredEntries = ko.computed(function () {
+    self.entryLimit = ko.observable(500);
+    self.increasingLimit = ko.observable(false);
+
+    self.increaseLimit = function () {
+      self.increasingLimit(true);
+      window.setTimeout(function () {
+        self.entryLimit(self.entryLimit() + 500);
+        self.increasingLimit(false);
+      }, 100);
+    };
+
+    self.hasMoreEntries = ko.pureComputed(function () {
+      return self.limitedFilteredEntries().length < self.filteredEntries().length;
+    });
+
+    self.limitedFilteredEntries = ko.pureComputed(function () {
+      return self.filteredEntries().slice(0, self.entryLimit());
+    });
+
+    self.filteredEntries = ko.pureComputed(function () {
       if (self.filter == null || (self.filter.showTables && self.filter.showTables() && self.filter.showViews() && self.filter.query().length === 0)) {
         return self.entries();
       }

+ 18 - 1
desktop/core/src/desktop/templates/assist.mako

@@ -219,6 +219,12 @@ from desktop.views import _ko
       display: table-cell;
     }
 
+    .assist-show-more {
+      padding-left: 2px;
+      padding-bottom: 5px;
+      font-style: italic;
+    }
+
     .no-entries {
       font-style: italic;
     }
@@ -276,7 +282,7 @@ from desktop.views import _ko
       <li class="assist-entry no-entries">${_('No results found')}</li>
     </ul>
     <!-- /ko -->
-    <ul data-bind="foreach: filteredEntries, css: { 'assist-tables': definition.isDatabase }">
+    <ul data-bind="foreach: limitedFilteredEntries, css: { 'assist-tables': definition.isDatabase }">
       <!-- ko template: { if: definition.isTable, name: 'assist-table-entry' } --><!-- /ko -->
       <!-- ko ifnot: definition.isTable -->
       <li data-bind="visibleOnHover: { override: statsVisible, selector: definition.isView ? '.table-actions' : '.column-actions' }, css: { 'assist-table': definition.isView, 'assist-column': definition.isColumn }">
@@ -292,6 +298,17 @@ from desktop.views import _ko
       </li>
       <!-- /ko -->
     </ul>
+    <!-- ko if: hasMoreEntries -->
+    <ul class="assist-tables">
+      <li>
+        <div class="assist-show-more" data-bind="visible: ! increasingLimit()" style="display: none;">
+          ${_('Showing')} <span data-bind="text: limitedFilteredEntries().length"></span> ${_('of')} <span data-bind="text: filteredEntries().length"></span> -
+          <a href="javascript:void(0);" data-bind="click: increaseLimit">${_('Show more')}...</a>
+        </div>
+        <div class="center" data-bind="visible: increasingLimit" style="display:none;"><i class="fa fa-spinner fa-spin assist-spinner"></i></div>
+      </li>
+    </ul>
+    <!-- /ko -->
     <!-- ko template: { if: ! hasEntries() && ! loading() && (definition.isTable || definition.isView), name: 'assist-no-table-entries' } --><!-- /ko -->
     <!-- ko template: { if: ! hasEntries() && ! loading() && definition.isDatabase, name: 'assist-no-database-entries' } --><!-- /ko -->
   </script>