fix(oui-pagination): add input search when huge amount of pages (#358)

* fix(oui-pagination): add input search when huge amount of pages

* style: code review

* style: code review

Author: AxelPeter

packages/oui-pagination/README.md

@@ -4,6 +4,16 @@
 
 ## Usage
 
+### One page
+
+```html:preview
+<oui-pagination
+    current-offset="1"
+    page-size="100"
+    total-items="12">
+</oui-pagination>
+```
+
 ### A few pages
 
 ```html:preview
@@ -25,13 +35,14 @@
 </oui-pagination>
 ```
 
-### One page
+### Huge amount of pages
 
 ```html:preview
 <oui-pagination
-    current-offset="1"
-    page-size="100"
-    total-items="12">
+    current-offset="$ctrl.pagination3.offset"
+    page-size="$ctrl.pagination3.pageSize"
+    total-items="$ctrl.pagination3.totalItems"
+    on-change="$ctrl.onChange('pagination3', $event)">
 </oui-pagination>
 ```
 

packages/oui-pagination/src/pagination.controller.js

@@ -1,3 +1,6 @@
+import clamp from "lodash/clamp";
+import range from "lodash/range";
+
 export default class {
     constructor ($attrs, ouiPaginationConfiguration) {
         "ngInject";
@@ -35,17 +38,23 @@ export default class {
 
     processPaginationChange () {
         this.pageCount = this.getPageCount();
-        this.pageRange = this.getPageRange();
         this.currentPage = this.getCurrentPage();
+        this.inputPage = this.getCurrentPage(); // Update model for input
     }
 
     processTranslations () {
-        this.translations = Object.assign({}, this.config.translations);
+        this.translations = { ...this.config.translations };
         this.translations.ofNResults = this.translations.ofNResults
             .replace("{{totalItems}}", this.totalItems);
         this.translations.currentPageOfPageCount = this.translations.currentPageOfPageCount
             .replace("{{currentPage}}", this.currentPage)
             .replace("{{pageCount}}", this.pageCount);
+
+        // For huge amount of pages, we replaced "{{currentPage}}" by a number input
+        const translations = { ...this.config.translations };
+        this.translations.inputPageOfPageCount = translations.currentPageOfPageCount
+            .replace("{{pageCount}}", this.pageCount)
+            .split("{{currentPage}}");
     }
 
     getPageAriaLabel (page) {
@@ -71,9 +80,19 @@ export default class {
 
     onPageChange (page) {
         this.currentOffset = (this.pageSize * (page - 1)) + 1;
+        this.currentPage = this.getCurrentPage();
+        this.inputPage = this.getCurrentPage(); // Update model for input
         this._onChange();
     }
 
+    checkPageRange (page) {
+        const currentPage = Number.isInteger(page) ?
+            clamp(page, 1, this.pageCount) :
+            this.currentPage;
+
+        this.onPageChange(currentPage);
+    }
+
     getLastItemOffset () {
         return Math.min(this.currentOffset + this.pageSize - 1, this.totalItems);
     }
@@ -87,8 +106,7 @@ export default class {
     }
 
     getPageRange () {
-        return Array(...{ length: this.getPageCount() })
-            .map((item, index) => index + 1);
+        return range(1, this.getPageCount() + 1);
     }
 
     _onChange () {

packages/oui-pagination/src/pagination.html

@@ -27,18 +27,20 @@
 
     <div class="oui-pagination__selector"
         ng-if="$ctrl.totalItems > $ctrl.pageSize">
-        <button type="button" class="oui-button oui-button_secondary oui-button_icon-only oui-button_small-width"
-            type="button"
+        <button type="button"
+            class="oui-button oui-button_secondary oui-button_icon-only oui-button_small-width"
             ng-attr-aria-label="{{ ::$ctrl.translations.previousPage }}"
             ng-disabled="$ctrl.currentPage === 1"
             ng-click="$ctrl.onPageChange($ctrl.getCurrentPage() - 1)">
             <span class="oui-icon oui-icon-chevron-left" aria-hidden="true"></span>
         </button>
+
+        <!-- Buttons (<= 5 pages) -->
         <div class="oui-button-group"
             ng-if="$ctrl.pageCount <= 5">
             <button type="button"
                 class="oui-button oui-button_small-width"
-                ng-repeat="page in $ctrl.pageRange track by page"
+                ng-repeat="page in $ctrl.getPageRange() track by page"
                 ng-class="{
                     'oui-button_primary oui-pagination-button_selected': page === $ctrl.currentPage,
                     'oui-button_secondary': page != $ctrl.currentPage
@@ -47,30 +49,54 @@
                 ng-bind="page"
                 ng-click="$ctrl.onPageChange(page)"></button>
         </div>
-        <oui-dropdown ng-if="$ctrl.pageCount > 5">
+        <!-- /Buttons (<= 5 pages) -->
+
+        <!-- Dropdown (> 5 && <= 100 pages) -->
+        <oui-dropdown ng-if="$ctrl.pageCount > 5 && $ctrl.pageCount <= 100"
+            align="end">
             <button oui-dropdown-trigger
                 type="button"
                 ng-attr-aria-label="{{ $ctrl.translations.currentPageOfPageCount }}"
                 class="oui-button oui-button_dropdown oui-dropdown__trigger">
                 <span ng-bind="$ctrl.translations.currentPageOfPageCount"></span>
                 <span class="oui-icon oui-icon-chevron-down" aria-hidden="true"></span>
             </button>
-            <oui-dropdown-content>
-                <div role="menu" class="oui-pagination-menu">
-                    <div class="oui-pagination-menu__items-list">
-                        <button type="button"
-                            ng-repeat="page in $ctrl.pageRange track by page"
-                            class="oui-pagination-menu__item"
-                            ng-attr-aria-label="{{ ::$ctrl.getPageAriaLabel(page) }}"
-                            ng-disabled="page === $ctrl.currentPage"
-                            ng-bind="page"
-                            ng-click="$ctrl.onPageChange(page)"></button>
-                    </div>
+            <oui-dropdown-content class="oui-pagination-menu">
+                <div class="oui-pagination-menu__items-list">
+                    <button type="button"
+                        ng-repeat="page in $ctrl.getPageRange() track by page"
+                        class="oui-pagination-menu__item"
+                        ng-attr-aria-label="{{ ::$ctrl.getPageAriaLabel(page) }}"
+                        ng-disabled="page === $ctrl.currentPage"
+                        ng-bind="page"
+                        ng-click="$ctrl.onPageChange(page)"></button>
                 </div>
             </oui-dropdown-content>
         </oui-dropdown>
-        <button type="button" class="oui-button oui-button_secondary oui-button_icon-only oui-button_small-width"
-            type="button"
+        <!-- /Dropdown (> 5 && <= 100 pages) -->
+
+        <!-- Numeric (> 100 pages) -->
+        <form class="oui-pagination-numeric"
+            ng-if="$ctrl.pageCount > 100"
+            ng-submit="$ctrl.checkPageRange($ctrl.inputPage)"
+            novalidate>
+            <span aria-hidden="true"
+                ng-bind="$ctrl.translations.inputPageOfPageCount[0]">
+            </span>
+            <input class="oui-pagination-numeric__input oui-input oui-input_xs"
+                type="number"
+                min="1"
+                max="{{$ctrl.pageCount}}"
+                ng-attr-aria-label="{{ $ctrl.getPageAriaLabel($ctrl.inputPage) }}"
+                ng-model="$ctrl.inputPage">
+            <span aria-hidden="true"
+                ng-bind="$ctrl.translations.inputPageOfPageCount[1]">
+            </span>
+        </form>
+        <!-- /Input (> 100 pages) -->
+
+        <button type="button"
+            class="oui-button oui-button_secondary oui-button_icon-only oui-button_small-width"
             ng-attr-aria-label="{{ ::$ctrl.translations.nextPage }}"
             ng-disabled="$ctrl.currentPage === $ctrl.pageCount"
             ng-click="$ctrl.onPageChange($ctrl.currentPage + 1)">