feat(datagrid): add pagination-mode option

Signed-off-by: Yann Lojewski <[email protected]>

Author: Yann Lojewski

packages/apps/workshop/stories/design-system/components/datagrid/datagrid-webcomponent.stories.js

@@ -7,6 +7,7 @@ import Datagrid from '@ovh-ux/ui-kit.datagrid';
 
 import { action } from '@storybook/addon-actions';
 import { forModule } from 'storybook-addon-angularjs';
+import { select } from '@storybook/addon-knobs';
 
 import readme from '@ovh-ux/ui-kit.datagrid/README.md';
 import { compileTemplate } from '../../../../src/utils';
@@ -459,4 +460,36 @@ export const RemoteData = forModule(moduleName).createElement(
   ),
 );
 
-RemoteData.storyName = 'Remote data';
+const paginationMode = {
+  label: 'Mode',
+  options: {
+    Button: 'button',
+    Select: 'select',
+    Input: 'input',
+    Arrows: 'arrows',
+  },
+};
+paginationMode.default = paginationMode.options.Arrows;
+
+
+export const PaginationMode = forModule(moduleName).createElement(
+  () => compileTemplate(
+    `
+    <oui-datagrid
+      page-size="5"
+      rows="$ctrl.data"
+      pagination-mode="${select(paginationMode.label, paginationMode.options, paginationMode.default)}">
+      <oui-datagrid-column title="'First name'" property="firstName"></oui-datagrid-column>
+      <oui-datagrid-column title="'Last name'" property="lastName"></oui-datagrid-column>
+      <oui-datagrid-column title="'Email'" property="email"></oui-datagrid-column>
+      <oui-datagrid-column title="'Phone'" property="phone"></oui-datagrid-column>
+    </oui-datagrid>`,
+    {
+      $ctrl: {
+        data: data.slice(0, 30),
+      },
+    },
+  ),
+);
+
+PaginationMode.storyName = 'Pagination Mode';

packages/components/datagrid/README.md

@@ -25,20 +25,21 @@ angular.module('myModule', ['oui.datagrid'])
 
 ## Component `oui-datagrid`
 
-| Attribute                         | Type      | Binding   | One-time binding    | Values           | Default      | Description
-| ----                              | ----      | ----      | ----                | ----             | ----         | ----
-| `id`                              | string    | @?        | no                  | n/a              | n/a          | id of the datagrid
-| `page-size`                       | number    | @?        | no                  | n/a              | `25`         | maximum number of rows to show on each pages
- `page-size-max`                    | number    | @?        | no                  | n/a              | n/a          | max page size of the page sizes list
-| `page`                            | number    | @?        | no                  | n/a               | `1`         | page to display
-| `rows`                            | array     | <?        | yes                 | n/a              | n/a          | local rows to load in the datagrid
-| `criteria`                        | array     | <?        | yes                 | n/a              | n/a          | default filter criteria to apply
-| `empty-placeholder`               | string    | @?        | yes                 | n/a              | n/a          | custom placeholder text when there is no data
-| `selectable-rows`                 | boolean   | <?        | no                  | `true`, `false`  | `false`      | allow rows to be selected. Create a sticky column a the start of the datagrid.
-| `on-criteria-change`              | function  | &         | no                  | n/a              | n/a          | triggered when criteria changed. Use `$criteria` in your callback to get the result
-| `on-page-change`                  | function  | &         | no                  | n/a              | n/a          | triggered when pagination is changed
-| `on-row-select`                   | function  | &         | no                  | n/a              | n/a          | triggered when a row is selected
-| `on-sort-change`                  | function  | &         | no                  | n/a              | n/a          | triggered when sort is triggered. Use `$sort` in your callback to get the result
+| Attribute                         | Type      | Binding   | One-time binding    | Values                                 | Default      | Description
+| ----                              | ----      | ----      | ----                | ----                                   | ----         | ----
+| `id`                              | string    | @?        | no                  | n/a                                    | n/a          | id of the datagrid
+| `page-size`                       | number    | @?        | no                  | n/a                                    | `25`         | maximum number of rows to show on each pages
+ `page-size-max`                    | number    | @?        | no                  | n/a                                    | n/a          | max page size of the page sizes list
+| `page`                            | number    | @?        | no                  | n/a                                    | `1`          | page to display
+| `rows`                            | array     | <?        | yes                 | n/a                                    | n/a          | local rows to load in the datagrid
+| `criteria`                        | array     | <?        | yes                 | n/a                                    | n/a          | default filter criteria to apply
+| `empty-placeholder`               | string    | @?        | yes                 | n/a                                    | n/a          | custom placeholder text when there is no data
+| `selectable-rows`                 | boolean   | <?        | no                  | `true`, `false`                        | `false`      | allow rows to be selected. Create a sticky column a the start of the datagrid.
+| `on-criteria-change`              | function  | &         | no                  | n/a                                    | n/a          | triggered when criteria changed. Use `$criteria` in your callback to get the result
+| `on-page-change`                  | function  | &         | no                  | n/a                                    | n/a          | triggered when pagination is changed
+| `on-row-select`                   | function  | &         | no                  | n/a                                    | n/a          | triggered when a row is selected
+| `on-sort-change`                  | function  | &         | no                  | n/a                                    | n/a          | triggered when sort is triggered. Use `$sort` in your callback to get the result
+| `pagination-mode`                 | string    | @?        | no                  | `button`, `select`, `input`, `arrows`  | `input`      | Set the pagination mode
 
 ### Custom cell templates
 

packages/components/datagrid/src/index.js

@@ -37,4 +37,5 @@ angular
   .service('ouiDatagridService', DatagridService)
   .component('ouiDatagridParameters', DatagridParameters);
 
+export { PAGINATION_MODES } from './js/datagrid.controller';
 export default moduleName;

packages/components/datagrid/src/js/datagrid.controller.js

@@ -1,4 +1,5 @@
 import { addBooleanParameter, addDefaultParameter } from '@ovh-ux/ui-kit.core/src/js/component-utils';
+import { MODES as PAGINATION_MODES } from '@ovh-ux/ui-kit.pagination';
 import find from 'lodash/find';
 import hasIn from 'lodash/hasIn';
 
@@ -11,6 +12,8 @@ const iconSortable = 'oui-icon-sort-inactive';
 const iconSortableAsc = 'oui-icon-sort-up';
 const iconSortableDesc = 'oui-icon-sort-down';
 
+export { PAGINATION_MODES };
+
 export default class DatagridController {
   constructor($attrs, $compile, $element, $transclude, $q, $scope, $window, $timeout,
     ouiDatagridPaging, ouiDatagridColumnBuilder, ouiDatagridConfiguration,
@@ -48,6 +51,7 @@ export default class DatagridController {
     this.criteria = this.criteria || [];
     this.page = parseInt(this.page, 10) || 1;
     this.offset = (this.page - 1) * this.pageSize + 1;
+    this.paginationMode = (PAGINATION_MODES.includes(this.paginationMode) && this.paginationMode) || '';
 
     addBooleanParameter(this, 'selectableRows');
     addDefaultParameter(this, 'emptyPlaceholder', this.config.translations.emptyPlaceholder);
@@ -88,6 +92,7 @@ export default class DatagridController {
         this.pageSizeMax,
         this.rowLoader,
         this.rowsLoader,
+        this.paginationMode,
       );
       this.refreshData(() => {
         this.paging.setOffset(this.offset);
@@ -103,6 +108,7 @@ export default class DatagridController {
         this.pageSizeMax,
         this.rowLoader,
         this.rows,
+        this.paginationMode,
       );
 
       if (this.rows) {
@@ -125,6 +131,17 @@ export default class DatagridController {
     if (changes.columnsParameters && !changes.columnsParameters.isFirstChange()) {
       this.buildColumns();
     }
+
+    if (changes.paginationMode && !changes.paginationMode.isFirstChange()) {
+      const { currentValue: paginationMode } = changes.paginationMode;
+
+      if (!PAGINATION_MODES.includes(paginationMode)) {
+        return;
+      }
+
+      this.paginationMode = paginationMode;
+      this.paging.paginationMode = paginationMode;
+    }
   }
 
   $doCheck() {

packages/components/datagrid/src/js/datagrid.directive.js

@@ -25,6 +25,7 @@ export default () => {
       onPageChange: '&',
       onRowSelect: '&',
       onSortChange: '&',
+      paginationMode: '@?',
     },
     compile: (elm) => {
       // Transclude can't be used here otherwise transcluded

packages/components/datagrid/src/js/datagrid.html

@@ -204,6 +204,7 @@
         page-size="$ctrl.paging.pageSize"
         page-size-max="$ctrl.paging.pageSizeMax"
         total-items="$ctrl.paging.totalCount"
-        on-change="$ctrl.onPaginationChange($event)">
+        on-change="$ctrl.onPaginationChange($event)"
+        mode="{{ $ctrl.paging.paginationMode }}">
     </oui-pagination>
 </div>

packages/components/datagrid/src/js/datagrid.spec.js

@@ -1,8 +1,12 @@
+import { last } from 'lodash';
+
 import '@ovh-ux/ui-kit.action-menu';
 
+import { PAGINATION_MODES } from './datagrid.controller';
 import columnsData from './columns.spec.data.json';
 import originalFakeData from './datagrid.spec.data.json';
 
+
 describe('ouiDatagrid', () => {
   let TestUtils;
   let $rootScope;
@@ -18,6 +22,7 @@ describe('ouiDatagrid', () => {
   const getFooterCell = (element, columnNumber) => angular.element(element[0].querySelectorAll('.oui-datagrid__footer')[columnNumber]);
   const getCell = (element, columnNumber) => angular.element(element[0].querySelectorAll('.oui-datagrid__cell')[columnNumber]);
   const getNextPagePaginationButton = (element) => angular.element(element[0].querySelector('.oui-pagination-nav__next'));
+  const getPaginationNav = (element) => angular.element(element[0].querySelector('.oui-pagination-nav'));
   const isSortableCell = (element) => element.hasClass('oui-datagrid__header_sortable');
   const isSortableAscCell = (element) => {
     const isSortable = isSortableCell(element);
@@ -1395,6 +1400,33 @@ describe('ouiDatagrid', () => {
       expect(onPageChangeSpy).toHaveBeenCalled();
     });
 
+    it('should pass through the pagination mode', () => {
+      const element = TestUtils.compileTemplate(`
+            <oui-datagrid rows="$ctrl.rows" page-size="2" pagination-mode="{{ $ctrl.paginationMode }}">
+                <oui-column property="firstName"></oui-column>
+            </oui-datagrid>
+        `, {
+        rows: fakeData.slice(0, 5),
+      });
+
+      const setMode = (mode) => {
+        TestUtils.getElementController(element).paginationMode = mode;
+        element.scope().$apply();
+      };
+      const controller = element.controller('ouiDatagrid');
+      const paginationController = getPaginationNav(element).controller('ouiPagination');
+
+      PAGINATION_MODES.forEach((paginationMode) => {
+        setMode(paginationMode);
+        expect(controller.paging.paginationMode).toBe(paginationMode);
+        expect(paginationController.mode).toBe(paginationMode);
+      });
+
+      setMode('unknown');
+      expect(controller.paging.paginationMode).toBe(last(PAGINATION_MODES));
+      expect(paginationController.mode).toBe(last(PAGINATION_MODES));
+    });
+
     it('should support action-menu as column', () => {
       const element = TestUtils.compileTemplate(`
                     <oui-datagrid rows="$ctrl.rows">

packages/components/datagrid/src/js/paging/datagrid-local-paging.js

@@ -12,6 +12,7 @@ export default class DatagridLocalPaging extends DatagridPagingAbstract {
     rowLoader,
     pagingService,
     rows,
+    paginationMode,
   ) {
     super(
       columns,
@@ -22,6 +23,7 @@ export default class DatagridLocalPaging extends DatagridPagingAbstract {
       pageSizeMax,
       rowLoader,
       pagingService,
+      paginationMode,
     );
 
     this.setRows(rows);

packages/components/datagrid/src/js/paging/datagrid-paging-abstract.js

@@ -8,6 +8,7 @@ export default class DatagridPagingAbstract {
     pageSizeMax,
     rowLoader,
     pagingService,
+    paginationMode,
   ) {
     this.columns = columns;
     this.currentSorting = currentSorting;
@@ -16,6 +17,7 @@ export default class DatagridPagingAbstract {
     this.pageSizeMax = pageSizeMax;
     this.offset = offset;
     this.rowLoader = rowLoader;
+    this.paginationMode = paginationMode;
 
     this.$q = pagingService.$q;
     this.$timeout = pagingService.$timeout;

packages/components/datagrid/src/js/paging/datagrid-paging.service.js

@@ -10,7 +10,17 @@ export default class {
     this.orderByFilter = orderByFilter;
   }
 
-  createLocal(columns, criteria, sorting, offset, pageSize, pageSizeMax, rowLoader, rows) {
+  createLocal(
+    columns,
+    criteria,
+    sorting,
+    offset,
+    pageSize,
+    pageSizeMax,
+    rowLoader,
+    rows,
+    paginationMode,
+  ) {
     return new DatagridLocalPaging(
       columns,
       criteria,
@@ -21,10 +31,21 @@ export default class {
       rowLoader,
       this,
       rows,
+      paginationMode,
     );
   }
 
-  createRemote(columns, criteria, sorting, offset, pageSize, pageSizeMax, rowLoader, rowsLoader) {
+  createRemote(
+    columns,
+    criteria,
+    sorting,
+    offset,
+    pageSize,
+    pageSizeMax,
+    rowLoader,
+    rowsLoader,
+    paginationMode,
+  ) {
     return new DatagridRemotePaging(
       columns,
       criteria,
@@ -35,6 +56,7 @@ export default class {
       rowLoader,
       this,
       rowsLoader,
+      paginationMode,
     );
   }
 }