feat(oui-datagrid): add page change event (#389)

Emit an event instead of directly scrolling the view as it is not the component concerns

Author: marie-j

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.
 

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;

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

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);
         }
     }
 }

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">