Merge pull request #394 from ovh-ux/develop

Develop

Author: AxelPeter

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,9 +279,6 @@ 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);
                 }

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

packages/oui-guide-menu/src/guide-menu.html

@@ -1,20 +1,7 @@
 <oui-dropdown class="oui-dropdown_guide-menu" arrow
     align="{{::$ctrl.align}}">
     <button class="oui-guide-button oui-dropdown__trigger" oui-dropdown-trigger>
-        <span class="oui-guide-button__icon">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 17.15" width="22px">
-                <polygon points="11.5 15.64 3.5 12.52 3.5 0.53 11.5 3.8 11.5 15.64" fill="none" stroke="#122844" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.06"/>
-                <polygon points="11.54 3.8 19.54 0.53 19.54 12.52 11.54 15.64 11.54 3.8" fill="none" stroke="#122844" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.06"/>
-                <line x1="13.44" y1="5.83" x2="17.58" y2="4.58" fill="none" stroke="#122844" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.22"/>
-                <line x1="13.44" y1="8.78" x2="17.58" y2="7.54" fill="none" stroke="#122844" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.22"/>
-                <line x1="13.44" y1="11.73" x2="17.58" y2="10.49" fill="none" stroke="#122844" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.22"/>
-                <path d="M3.1,4.65H1.69A1.15,1.15,0,0,0,.5,5.75v9.79c0,.61.53,1.1,2.17,1.1H11.5" fill="none" stroke="#122844" stroke-linecap="round" stroke-linejoin="round"/>
-                <path d="M10.5,16.65h9.83c1.64,0,2.17-.49,2.17-1.1V5.75a1.15,1.15,0,0,0-1.19-1.1H19.5" fill="none" stroke="#122844" stroke-linecap="round" stroke-linejoin="round"/>
-                <line x1="5.31" y1="4.58" x2="9.58" y2="6.06" fill="none" stroke="#122844" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.22"/>
-                <line x1="5.31" y1="7.54" x2="9.58" y2="9.01" fill="none" stroke="#122844" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.22"/>
-                <line x1="5.31" y1="10.49" x2="9.58" y2="11.96" fill="none" stroke="#122844" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.22"/>
-            </svg>
-        </span>
+        <span class="oui-guide-button__icon oui-icon oui-icon-guides"></span>
         <span class="oui-guide-button__text" ng-bind="::$ctrl.text"></span>
     </button>
     <oui-dropdown-content class="oui-guide-menu"

packages/oui-stepper/README.md

@@ -98,6 +98,24 @@
 </oui-stepper>
 ```
 
+### Open Steps 
+
+```html:preview
+<oui-stepper
+    current-index="$ctrl.currentStep">
+    <oui-step-form
+        header="Step1">
+        <p>Random content</p>
+    </oui-step-form>
+     <oui-step-form
+        header="Step2">
+        <oui-button variant="link" on-click="$ctrl.currentStep = 0">
+            <span>Go to Step 1</span>
+        </oui-button>
+    </oui-step-form>
+</oui-stepper>
+```
+
 ### Events on `oui-stepper`
 
 **Note**: If you want to access the forms inside `on-finish` callback, you need to use the `forms` variable as below.
@@ -154,6 +172,7 @@
 | ----              | ----      | ----      | ----              | ----              | ----      | ----
 | `name`            | string    | @?        | yes               | n/a               | n/a       | stepper name used to identify step
 | `id`              | string    | @?        | yes               | n/a               | n/a       | stepper id used to identify step
+| `current-index`   | number    | =?        | no                | n/a               | 0         | current step index 
 | `on-init`         | function  | &         | no                | n/a               | n/a       | initialization function
 | `on-finish`       | function  | &         | no                | n/a               | n/a       | submit all steps function
 

packages/oui-stepper/src/index.spec.js

@@ -230,6 +230,33 @@ describe("ouiStepper", () => {
                 expect(form2.hasClass(disabledClass)).toBe(false);
                 expect(form3.hasClass(disabledClass)).toBe(true);
             });
+
+            it("should open designated step", () => {
+                const element = TestUtils.compileTemplate(`
+                    <oui-stepper current-index="$ctrl.index">
+                        <oui-step-form name="form1"></oui-step-form>
+                        <oui-step-form name="form2"></oui-step-form>
+                        <oui-step-form name="form3"></oui-step-form>
+                    </oui-stepper>`, { index: 1 });
+
+                $timeout.flush();
+
+                const form1 = element.find("form").eq(0);
+                const form2 = element.find("form").eq(1);
+                const form3 = element.find("form").eq(2);
+
+                expect(form1.scope().$ctrl.stepper.focused).toBe(false);
+                expect(form2.scope().$ctrl.stepper.focused).toBe(true);
+                expect(form3.scope().$ctrl.stepper.focused).toBe(false);
+
+                element.scope().$ctrl.index = 2;
+
+                element.scope().$digest();
+
+                expect(form1.scope().$ctrl.stepper.focused).toBe(false);
+                expect(form2.scope().$ctrl.stepper.focused).toBe(false);
+                expect(form3.scope().$ctrl.stepper.focused).toBe(true);
+            });
         });
     });
 });

packages/oui-stepper/src/stepper.component.js

@@ -6,7 +6,8 @@ export default {
         name: "@",
         id: "@",
         onInit: "&",
-        onFinish: "&"
+        onFinish: "&",
+        currentIndex: "=?"
     },
     controller,
     template,

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

@@ -1,16 +1,19 @@
+import get from "lodash/get";
+
 export default class {
-    constructor ($attrs, $element, $timeout) {
+    constructor ($attrs, $element, $scope, $timeout) {
         "ngInject";
 
         this.$attrs = $attrs;
         this.$element = $element;
+        this.$scope = $scope;
         this.$timeout = $timeout;
     }
 
     $onInit () {
         this.forms = [];
         this.steps = [];
-        this.currentIndex = 0;
+        this.currentIndex = get(this, "currentIndex", 0);
         this.onInit();
     }
 
@@ -21,6 +24,11 @@ export default class {
                 .removeAttr("name")
                 .addClass("oui-stepper")
         );
+
+        this.$scope.$watch(
+            () => this.currentIndex,
+            (index) => this.focusStep(index)
+        );
     }
 
     addStep (step) {