Crop page navigation for DX reference widget (#2145)

* Crop large page navigation for reference widget

* changelog updated

* Crop between current and last page

* Formatting only

* Production JS

* Comments only

* Rebuild production JS

* Rebuilt JS

CHANGES.rst

@@ -5,6 +5,7 @@ Changelog
 2.3.0 (unreleased)
 ------------------
 
+- #2145 Crop page navigation for DX reference widget
 - #2143 Fix Traceback when using readonly decorator for objects w/o __name__
 - #2140 Allow to enable/disable analysis categories for samples
 - #2137 Dynamic Workflow Menu

webpack/app/widgets/uidreferencewidget/components/ReferenceResults.js

@@ -188,16 +188,65 @@ class ReferenceResults extends React.Component {
    */
   build_pages() {
     let pages = [];
-    for (let page=1; page <= this.props.pages; page++) {
+
+    let total = this.props.pages;
+    let current = this.props.page;
+    let padding = this.props.padding;
+
+    let first_page = current - padding > 0 ? current - padding : 1;
+    let last_page = current + padding < total ? current + padding : total;
+
+    let crop_before = first_page === 1 ? false : true;
+    let crop_after = last_page < total ? true : false;
+
+    for (let page=first_page; page <= last_page; page++) {
       let cls = ["page-item"];
-      if (this.props.page == page) cls.push("active");
+      if (current === page) cls.push("active");
+
+      // crop before the current page
+      if (page == first_page && crop_before) {
+        // link to first page
+        pages.push(
+          <li>
+            <button className="page-link" page={1} onClick={this.on_page}>1</button>
+          </li>
+        );
+        // placeholder
+        pages.push(
+          <li>
+            <div className="page-link">...</div>
+          </li>
+        );
+        crop_before = false;
+      }
+
       pages.push(
         <li className={cls.join(" ")}>
           <button className="page-link" page={page} onClick={this.on_page}>
             {page}
           </button>
         </li>
       );
+
+      // crop after the current page
+      if (page === last_page && crop_after) {
+        // placeholder
+        pages.push(
+          <li>
+            <div className="page-link">...</div>
+          </li>
+        );
+        // link to last page
+        pages.push(
+          <li>
+            <button className="page-link" page={total} onClick={this.on_page}>
+              {total}
+            </button>
+          </li>
+        );
+        crop_after = false;
+      }
+
     }
     return pages;
   }

webpack/app/widgets/uidreferencewidget/widget.js

@@ -24,6 +24,7 @@ class UIDReferenceWidgetController extends React.Component {
       prev_url: null,  // previous page API URL (coming from `senaite.jsonapi`)
       b_start: 1,  // batch start for pagination (see `senaite.jsonapi.batch`)
       focused: 0,  // current result that has the focus
+      padding: 3,  // page padding
     }
 
     // Root input HTML element
@@ -45,11 +46,15 @@ class UIDReferenceWidgetController extends React.Component {
       "multi_valued",
       "disabled",
       "readonly",
+      "padding",
     ]
 
     // Query data keys and set state with parsed JSON value
     for (let key of data_keys) {
       let value = el.dataset[key];
+      if (value === undefined) {
+        continue;
+      }
       this.state[key] = this.parse_json(value);
     }
 
@@ -403,6 +408,7 @@ class UIDReferenceWidgetController extends React.Component {
             count={this.state.count}
             page={this.state.page}
             pages={this.state.pages}
+            padding={this.state.padding}
             next_url={this.state.next_url}
             prev_url={this.state.prev_url}
             on_select={this.select}