From 91874e9f18295d9695fe1435736d74afc834ab75 Mon Sep 17 00:00:00 2001
From: Marie JONES <marie.jones@corp.ovh.com>
Date: Mon, 15 Apr 2019 17:49:32 +0200
Subject: [PATCH] fix(oui-datagrid): prevent pagination change from scrolling
 the view

Emit an event instead of directly scrolling the view as it is not the component concerns
---
 packages/oui-datagrid/README.md               | 12 ++++++++
 .../oui-datagrid/src/datagrid.controller.js   | 30 ++++++++-----------
 .../oui-datagrid/src/datagrid.directive.js    |  3 +-
 packages/oui-datagrid/src/datagrid.service.js |  2 +-
 packages/oui-datagrid/src/index.spec.js       | 18 +++++++++++
 5 files changed, 46 insertions(+), 19 deletions(-)

diff --git a/packages/oui-datagrid/README.md b/packages/oui-datagrid/README.md
index 87306a03..c01da3b5 100644
--- a/packages/oui-datagrid/README.md
+++ b/packages/oui-datagrid/README.md
@@ -281,6 +281,17 @@ Or you can use the `page-size` property. It takes precedence over value configur
 </oui-datagrid>
 ```
 
+You can also add custom behaviour on pagination changes 
+
+```html:preview
+<p>Page size : {{ $ctrl.pageSize }}</p>
+<p>Offset : {{ $ctrl.offset }}</p>
+<oui-datagrid rows="$ctrl.data" on-page-change="$ctrl.onPageChange($pagination)" page-size="5">
+  <oui-column title="'firstName'" property="firstName"></oui-column>
+  <oui-column title="$ctrl.lastNameText" property="lastName"></oui-column>
+</oui-datagrid>
+```
+
 ### Custom cell templates
 
 ```html
@@ -718,6 +729,7 @@ call `rows-loader` and then a `row-loader` call for each line.
 | `columns-parameters`              | array     | <?        | no                  | n/a              | `undefined`  | columns parameters (see below)
 | `on-columns-parameters-change`    | function  | &         | no                  | n/a              | n/a          | triggered on column parameter change when datagrid is customizable
 | `on-row-select`                   | function  | &         | no                  | n/a              | n/a          | triggered when a row is selected
+| `on-page-change`                  | function  | &         | no                  | n/a              | n/a          | triggered when pagination is changed
 
 `columns-parameters` is an array describing all basic parameters of each column.
 
diff --git a/packages/oui-datagrid/src/datagrid.controller.js b/packages/oui-datagrid/src/datagrid.controller.js
index c344bd78..295e6d17 100644
--- a/packages/oui-datagrid/src/datagrid.controller.js
+++ b/packages/oui-datagrid/src/datagrid.controller.js
@@ -246,25 +246,23 @@ export default class DatagridController {
         this.refreshData(() => {
             this.paging.setOffset(1);
             this.paging.setCriteria(criteria);
-        }, false, false);
+        }, false);
     }
 
-    onPaginationChange ($event) {
+    onPaginationChange ({ offset, pageSize }) {
         this.refreshData(() => {
-            this.paging.setOffset($event.offset);
-            this.paging.setPageSize($event.pageSize);
-        }, true, true);
-    }
-
-    scrollToTop () {
-        // Small delay otherwise rows could not be rendered
-        // yet and position would be wrong
-        this.$timeout(() => {
-            this.$element[0].scrollIntoView(true);
-        });
+            this.paging.setOffset(offset);
+            this.paging.setPageSize(pageSize);
+            this.onPageChange({
+                $pagination: {
+                    offset,
+                    pageSize
+                }
+            });
+        }, true);
     }
 
-    refreshData (callback, skipSortAndFilter, requireScrollToTop, hideLoader, forceLoadRows) {
+    refreshData (callback, skipSortAndFilter, hideLoader, forceLoadRows) {
         if (this.loading) {
             return this.$q.when();
         }
@@ -281,13 +279,11 @@ export default class DatagridController {
             .then(() => this.paging.loadData(skipSortAndFilter, forceLoadRows))
             .then(result => {
                 this.displayedRows = result.data;
-                if (requireScrollToTop) {
-                    this.scrollToTop();
-                }
                 if (this.hasActionMenu) {
                     setTimeout(() => this.checkScroll(), checkScrollOnRefreshDataDelay);
                 }
             })
+            .catch(error => console.log(error))
             .finally(() => {
                 this.loading = false;
                 this.firstLoading = false;
diff --git a/packages/oui-datagrid/src/datagrid.directive.js b/packages/oui-datagrid/src/datagrid.directive.js
index 7ad9c7b1..c4c5caf0 100644
--- a/packages/oui-datagrid/src/datagrid.directive.js
+++ b/packages/oui-datagrid/src/datagrid.directive.js
@@ -18,7 +18,8 @@ export default () => {
             rowLoader: "&?",
             emptyPlaceholder: "@?",
             onColumnsParametersChange: "&",
-            onRowSelect: "&"
+            onRowSelect: "&",
+            onPageChange: "&"
         },
         compile: elm => {
             // Transclude can't be used here otherwise transcluded
diff --git a/packages/oui-datagrid/src/datagrid.service.js b/packages/oui-datagrid/src/datagrid.service.js
index bf7e74ca..dcaec6ae 100644
--- a/packages/oui-datagrid/src/datagrid.service.js
+++ b/packages/oui-datagrid/src/datagrid.service.js
@@ -28,7 +28,7 @@ export default class DatagridService {
         const datagridController = this.datagrids[datagridId];
 
         if (datagridController) {
-            datagridController.refreshData(false, false, false, !showSpinner, true);
+            datagridController.refreshData(false, false, !showSpinner, true);
         }
     }
 }
diff --git a/packages/oui-datagrid/src/index.spec.js b/packages/oui-datagrid/src/index.spec.js
index 06b433c2..95037206 100644
--- a/packages/oui-datagrid/src/index.spec.js
+++ b/packages/oui-datagrid/src/index.spec.js
@@ -1270,6 +1270,24 @@ describe("ouiDatagrid", () => {
             expect(getCell($secondRow, 1).children().html()).toBe(fakeData[3].lastName);
         });
 
+        it("should execute callback when pagination changes", () => {
+            const onPageChangeSpy = jasmine.createSpy("onPaginationChangeSpy");
+            const element = TestUtils.compileTemplate(`
+                    <oui-datagrid rows="$ctrl.rows" page-size="2" on-page-change="$ctrl.onPageChange($pagination)">
+                        <oui-column property="firstName"></oui-column>
+                        <oui-column property="lastName"></oui-column>
+                    </oui-datagrid>
+                `, {
+                rows: fakeData.slice(0, 5),
+                onPageChange: onPageChangeSpy
+            }
+            );
+
+            getNextPagePaginationButton(element).triggerHandler("click");
+
+            expect(onPageChangeSpy).toHaveBeenCalled();
+        });
+
         it("should support action-menu as column", () => {
             const element = TestUtils.compileTemplate(`
                     <oui-datagrid rows="$ctrl.rows">