From feb2f4d3b9576a961bbcc2247e86af872ef85f07 Mon Sep 17 00:00:00 2001
From: Axel Peter <axel.peter@corp.ovh.com>
Date: Tue, 12 Feb 2019 16:58:07 +0100
Subject: [PATCH 1/3] fix(oui-pagination): add input search when huge amount of
 pages

---
 packages/oui-pagination/README.md             | 19 ++++--
 .../src/pagination.controller.js              | 26 ++++++--
 packages/oui-pagination/src/pagination.html   | 60 +++++++++++++------
 3 files changed, 80 insertions(+), 25 deletions(-)

diff --git a/packages/oui-pagination/README.md b/packages/oui-pagination/README.md
index 1e37f928..e138c112 100644
--- a/packages/oui-pagination/README.md
+++ b/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>
 ```
 
diff --git a/packages/oui-pagination/src/pagination.controller.js b/packages/oui-pagination/src/pagination.controller.js
index 505f8dc7..c5c78827 100644
--- a/packages/oui-pagination/src/pagination.controller.js
+++ b/packages/oui-pagination/src/pagination.controller.js
@@ -1,3 +1,5 @@
+import range from "lodash/range";
+
 export default class {
     constructor ($attrs, ouiPaginationConfiguration) {
         "ngInject";
@@ -35,17 +37,24 @@ 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);
+        const translations = Object.assign({}, this.config.translations);
+
+        this.translations = angular.copy(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
+        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 = typeof page === "number" ?
+            Math.min(Math.max(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 () {
diff --git a/packages/oui-pagination/src/pagination.html b/packages/oui-pagination/src/pagination.html
index 225321bb..61c38146 100644
--- a/packages/oui-pagination/src/pagination.html
+++ b/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,7 +49,11 @@
                 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 }}"
@@ -55,22 +61,42 @@
                 <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)">

From 9bbe902bcfcb1eb907aa07c5f303cfd3a2d0687f Mon Sep 17 00:00:00 2001
From: Axel Peter <axel.peter@corp.ovh.com>
Date: Wed, 13 Feb 2019 10:15:13 +0100
Subject: [PATCH 2/3] style: code review

---
 packages/oui-pagination/src/pagination.controller.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/oui-pagination/src/pagination.controller.js b/packages/oui-pagination/src/pagination.controller.js
index c5c78827..73dbe262 100644
--- a/packages/oui-pagination/src/pagination.controller.js
+++ b/packages/oui-pagination/src/pagination.controller.js
@@ -42,9 +42,7 @@ export default class {
     }
 
     processTranslations () {
-        const translations = Object.assign({}, this.config.translations);
-
-        this.translations = angular.copy(translations);
+        this.translations = { ...this.config.translations };
         this.translations.ofNResults = this.translations.ofNResults
             .replace("{{totalItems}}", this.totalItems);
         this.translations.currentPageOfPageCount = this.translations.currentPageOfPageCount
@@ -52,6 +50,7 @@ export default class {
             .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}}");
@@ -86,7 +85,7 @@ export default class {
     }
 
     checkPageRange (page) {
-        const currentPage = typeof page === "number" ?
+        const currentPage = Number.isInteger(page) ?
             Math.min(Math.max(page, 1), this.pageCount) :
             this.currentPage;
 

From d7ed338b6996cd52a571461a6b13f58456d32e4b Mon Sep 17 00:00:00 2001
From: Axel Peter <axel.peter@corp.ovh.com>
Date: Wed, 13 Feb 2019 11:16:17 +0100
Subject: [PATCH 3/3] style: code review

---
 packages/oui-pagination/src/pagination.controller.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/oui-pagination/src/pagination.controller.js b/packages/oui-pagination/src/pagination.controller.js
index 73dbe262..14965ecb 100644
--- a/packages/oui-pagination/src/pagination.controller.js
+++ b/packages/oui-pagination/src/pagination.controller.js
@@ -1,3 +1,4 @@
+import clamp from "lodash/clamp";
 import range from "lodash/range";
 
 export default class {
@@ -86,7 +87,7 @@ export default class {
 
     checkPageRange (page) {
         const currentPage = Number.isInteger(page) ?
-            Math.min(Math.max(page, 1), this.pageCount) :
+            clamp(page, 1, this.pageCount) :
             this.currentPage;
 
         this.onPageChange(currentPage);