ELEMENTS-1747: Make nuxeo-pagination-controls efficient with 50000+ p…

…ages
nuxeo · Jul 31, 2024 · d39a23f · d39a23f
1 parent 6235da5
commit d39a23f
Showing 1 changed file with 27 additions and 2 deletions.
diff --git a/ui/nuxeo-pagination-controls.js b/ui/nuxeo-pagination-controls.js
@@ -86,6 +86,12 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 
           .total {
             margin-inline-start: 2rem;
+            font-size: 1rem;
+            width: 5rem;
+            text-align: center;
+          }
+
+          .currentPage {
             font-size: 1rem;
             width: 4rem;
             text-align: center;
@@ -114,8 +120,11 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
           >
           </paper-icon-button>
           <div class="controls">
-            <nuxeo-select options="[[_computePageOptions(numberOfPages)]]" selected="{{page}}" vertical-align>
-            </nuxeo-select>
+            <template is="dom-if" if="[[_computeLimitForOptions(numberOfPages)]]">
+              <nuxeo-select options="[[_computePageOptions(numberOfPages)]]" selected="{{page}}" vertical-align>
+              </nuxeo-select>
+            </template>
+            <span class="currentPage" hidden$="[[_computeLimitForOptions(numberOfPages)]]">[[page]]</span>
             <span class="total">/ [[numberOfPages]]</span>
           </div>
           <paper-icon-button
@@ -187,6 +196,22 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
     _computePageOptions(numberOfPages) {
       return Array.from({ length: numberOfPages }, (x, i) => i + 1);
     }
+
+    _computeLimitForOptions(numberOfPages) {
+      const maxItemsForNuxeoSelectPagination =
+        Nuxeo &&
+        Nuxeo.UI &&
+        Nuxeo.UI.config &&
+        Nuxeo.UI.config.pagination &&
+        Nuxeo.UI.config.pagination.nuxeoSelectOptions &&
+        Nuxeo.UI.config.pagination.nuxeoSelectOptions.listingMaxItems
+          ? Nuxeo.UI.config.pagination.nuxeoSelectOptions.listingMaxItems
+          : 1000;
+      if (numberOfPages > maxItemsForNuxeoSelectPagination) {
+        return false;
+      }
+      return true;
+    }
   }
 
   customElements.define(PaginationControls.is, PaginationControls);