Skip to content
This repository was archived by the owner on Aug 7, 2020. It is now read-only.

feat(oui-datagrid): add datagrid customization #196

Merged
merged 1 commit into from
Jun 13, 2018
Merged

feat(oui-datagrid): add datagrid customization #196

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 78 additions & 16 deletions packages/oui-datagrid/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,6 +186,43 @@ Using this attribute, a new column property `hidden` is available.

All the properties of a column also become dynamic.

### Customizable columns

```html:preview
<oui-datagrid
id="customizableDatagrid"
rows="$ctrl.data"
page-size="5"
customizable
columns-parameters="$ctrl.datagridParameters['customizableDatagrid']"
on-columns-parameters-change="$ctrl.onColumnsParametersChange(id, columns)">

<!-- A column can be tagged with "prevent-customization". -->
<oui-column title="'First name'" property="firstName" sortable="asc" type="string" searchable filterable prevent-customization></oui-column>
<oui-column title="'Last name'" property="lastName" sortable type="string" searchable filterable></oui-column>
<oui-column title="'Mother'" property="parents.mother.lastName" sortable>
{{$row.parents.mother.lastName}}, {{$row.parents.mother.firstName}}
</oui-column>
<oui-column title="'Father'" property="parents.father.lastName" sortable>
{{$row.parents.father.lastName}}, {{$row.parents.father.firstName}}
</oui-column>
<oui-column title="'Email'" property="email" sortable type="string" searchable filterable>
<a href="mailto:{{$value}}">{{$value}}</a>
</oui-column>

<!-- To be customizable, a column without property (needed to be sortable, filterable, ...),
must have a name. -->
<oui-column name="birth" title="'Named column'">
Birth: {{$row.birth}}
</oui-column>

<!-- A column without property nor name is not customizable. -->
<oui-column title="'Not named column'">
Phone: {{$row.phone}}
</oui-column>
</oui-datagrid>
```

### Pagination

By default the page size is 25.
Expand Down Expand Up @@ -550,26 +587,51 @@ call `rows-loader` and then a `row-loader` call for each line.

### oui-datagrid

| Attribute | Type | Binding | One-time binding | Values | Default | Description |
| ---- | ---- | ---- | ---- | ---- | ---- | ---- |
| `id` | string | @? | | | | id of the datagrid |
| `page-size` | number | @? | | | 25 | maximum number of rows to show on each pages |
| `rows` | array | <? | yes | | | rows to show |
| `rows-loader` | function | &? | yes | | | gets all rows (returns a promise with all rows) |
| `row-loader` | function | &? | yes | | | gets row details (returns a promise with details) |
| Attribute | Type | Binding | One-time binding | Values | Default | Description |
| ---- | ---- | ---- | ---- | ---- | ---- | ---- |
| `id` | string | @? | | | | id of the datagrid |
| `page-size` | number | @? | | | 25 | maximum number of rows to show on each pages |
| `rows` | array | <? | yes | | | rows to show |
| `rows-loader` | function | &? | yes | | | gets all rows (returns a promise with all rows) |
| `row-loader` | function | &? | yes | | | gets row details (returns a promise with details) |
| `customizable` | boolean | <? | | | false | if the datagrid is customizable |
| `columns-parameters` | array | <? | | | undefined | columns parameters (see below) |
| `on-columns-parameters-change` | function | & | | | | triggered on column parameter change when datagrid is customizable |

`columns-parameters` is an array describing all basic parameters of each column.

```javascript
const columnsParameters = [{
name: "column1"
}, {
name: "column2",
hidden: true
}];
```

This example shows columns parameters where "column1" column has no particular parameter and "column2" column is hidden.
These parameters override properties defined in `oui-column` or `columns` attribute.

**Only `hidden` is supported for now.**

`on-columns-parameters-change` takes 2 parameters:

- `id`: the id of the table
- `columns`: the overrided parameters of each column. This value can be saved and then set in `columns-parameters`

### oui-column / `columns` attribute

| Attribute | Type | Binding | One-time binding | Values | Default | Description |
| ---- | ---- | ---- | ---- | ---- | ---- | ---- |
| `title` | string | N/A | yes | | | column title put in header |
| `property` | string | N/A | yes | | null | property path used to get value from value |
| `sortable` | string | N/A | yes | `asc`, `desc` | `asc` on `sortable=""` | makes a column sortable and gives the order |
| `type` | string | N/A | | See below | null | define a column type |
| `filterable` | N/A | N/A | | | | define a filterable column |
| `searchable` | N/A | N/A | | | | define a searchable column |
| `type-options` / `typeOptions` | object | N/A | | See below | {} | define options related to column type (see below) |
| Attribute | Type | Binding | One-time binding | Values | Default | Description |
| ---- | ---- | ---- | ---- | ---- | ---- | ---- |
| `title` | string | N/A | yes | | | column title put in header |
| `property` | string | N/A | yes | | null | property path used to get value from value |
| `sortable` | string | N/A | yes | `asc`, `desc` | `asc` on `sortable=""` | makes a column sortable and gives the order |
| `type` | string | N/A | | See below | null | define a column type |
| `filterable` | N/A | N/A | | | | define a filterable column |
| `searchable` | N/A | N/A | | | | define a searchable column |
| `type-options` / `typeOptions` | object | N/A | | See below | {} | define options related to column type (see below) |
| `hidden` | boolean | N/A | | `true` / `false` | false | if the column is hidden by default |
| `prevent-customization` / `preventCustomization` | N/A | N/A | | | | prevent a column to be customizable |

`typeOptions` is used to give options to feed criteria values. Example:

Expand Down
3 changes: 2 additions & 1 deletion packages/oui-datagrid/src/cell/cell.controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,8 @@ export default class {
}

$onChanges (changes) {
if (changes.row && !changes.row.isFirstChange()) {
if ((changes.row && !changes.row.isFirstChange()) ||
(changes.column && !changes.column.isFirstChange())) {
this._compileCell();
}
}
Expand Down
21 changes: 19 additions & 2 deletions packages/oui-datagrid/src/datagrid-column-builder.service.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,14 @@ export default class DatagridColumnBuilder {
angular.forEach(columnElements, columnElement => {
const column = {};

if (hasAttribute(columnElement, "name")) {
column.name = getAttribute(columnElement, "name");
}

if (hasAttribute(columnElement, "property")) {
const propertyValue = getAttribute(columnElement, "property");

column.name = propertyValue;
column.name = column.name || propertyValue;
column.getValue = this.$parse(propertyValue);

// A column can be sorted only if it has a "property" attribute.
Expand All @@ -57,6 +61,14 @@ export default class DatagridColumnBuilder {
column.typeOptions = this.$parse(column["type-options"])($scope);
}

if (hasAttribute(columnElement, "prevent-customization")) {
column.preventCustomization = true;
}

if (hasAttribute(columnElement, "hidden")) {
column.hidden = true;
}

if (hasAttribute(columnElement, "title")) {
const titleValue = getAttribute(columnElement, "title");

Expand Down Expand Up @@ -96,9 +108,11 @@ export default class DatagridColumnBuilder {
angular.forEach(columnsDescription, columnDescription => {
const column = {};

column.name = columnDescription.name;

const propertyValue = columnDescription.property;
if (propertyValue) {
column.name = propertyValue;
column.name = column.name || propertyValue;
column.getValue = this.$parse(propertyValue);

// A column can be sorted only if it has a "property" attribute.
Expand All @@ -122,6 +136,8 @@ export default class DatagridColumnBuilder {
column.typeOptions = this.$parse(column.typeOptions)($scope);
}

column.preventCustomization = columnDescription.preventCustomization;

column.title = columnDescription.title;

if (!column.sortProperty) {
Expand Down Expand Up @@ -153,6 +169,7 @@ export default class DatagridColumnBuilder {
template: actionColumnElement.outerHTML
};
column.compiledTemplate = this._getColumnTemplate(column);
column.alwaysVisible = true;
return column;
}

Expand Down
60 changes: 54 additions & 6 deletions packages/oui-datagrid/src/datagrid.controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { addBooleanParameter } from "@oui-angular/common/component-utils";
import { find } from "lodash";
import { hasProperty } from "./util";

import template from "./datagrid.html";
Expand All @@ -14,10 +16,12 @@ const cssSortableDesc = "oui-datagrid__header_sortable-desc";
const checkScrollOnRefreshDataDelay = 1000;

export default class DatagridController {
constructor ($compile, $element, $transclude, $q, $scope, $window, $timeout, ouiDatagridPaging,
ouiDatagridColumnBuilder, ouiDatagridConfiguration, ouiDatagridService) {
constructor ($attrs, $compile, $element, $transclude, $q, $scope, $window, $timeout,
ouiDatagridPaging, ouiDatagridColumnBuilder, ouiDatagridConfiguration,
ouiDatagridService) {
"ngInject";

this.$attrs = $attrs;
this.$compile = $compile;
this.$element = $element;
this.$transclude = $transclude;
Expand Down Expand Up @@ -71,6 +75,8 @@ export default class DatagridController {
}

$postLink () {
addBooleanParameter(this, "customizable");

this.$compile(template)(this.$scope, (clone) => {
this.$element.append(clone);
});
Expand All @@ -97,7 +103,7 @@ export default class DatagridController {
}

// Manage responsiveness
if (this.hasActionMenu) {
if (this.hasActionMenu || this.customizable) {
this.scrollablePanel = this.$element[0].querySelector(".oui-datagrid-responsive-container__overflow-container");
if (this.scrollablePanel) {
angular.element(this.$window).on("resize", this.checkScroll);
Expand All @@ -116,6 +122,10 @@ export default class DatagridController {
if (changes.columnsDescription && !changes.columnsDescription.isFirstChange()) {
this.buildColumns();
}

if (changes.columnsParameters && !changes.columnsParameters.isFirstChange()) {
this.buildColumns();
}
}

$doCheck () {
Expand Down Expand Up @@ -146,16 +156,28 @@ export default class DatagridController {
this.ouiDatagridColumnBuilder.build(this.columnElements, this.getParentScope());

if (this.actionColumnElements.length) {
builtColumns.columns.push(this.ouiDatagridColumnBuilder.buildActionColumn(this.actionColumnElements[0]));
this.actionColumn = this.ouiDatagridColumnBuilder.buildActionColumn(this.actionColumnElements[0]);
this.hasActionMenu = true;
}

if (this.extraTopElements.length) {
this.hasExtraTopContent = true;
this.extraTopCompiledTemplate = this.$compile(`<div>${this.extraTopElements[0].innerHTML}</div>`);
this.hasExtraTopContent = true;
}

this.columns = builtColumns.columns.filter(column => !column.hidden);
this.availableColumns = angular.copy(builtColumns.columns)
.map(column => { // Override default with custom columns
const customColumn = find(this.columnsParameters, {
name: column.name
});
if (customColumn) {
column.hidden = customColumn.hidden;
}
return column;
});

this.columns = this.availableColumns
.filter(column => !column.hidden);

this.columns.forEach(column => {
if (column.title) {
Expand All @@ -176,6 +198,32 @@ export default class DatagridController {
return builtColumns;
}

onColumnsChange (columns) {
this.availableColumns = angular.copy(columns);
this.columns = columns.filter(column => !column.hidden);

const columnsParameters = this.availableColumns
.filter(column => column.name)
.map(column => {
const cleanColumn = {
name: column.name
};

if (column.hidden) {
cleanColumn.hidden = true;
}

return cleanColumn;
});

if (this.id) {
this.onColumnsParametersChange({
id: this.id,
columns: columnsParameters
});
}
}

getParentScope () {
return this.$scope.$parent;
}
Expand Down
5 changes: 4 additions & 1 deletion packages/oui-datagrid/src/datagrid.directive.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,13 @@ export default () => {
scope: {
id: "@?",
columnsDescription: "<?columns",
columnsParameters: "<?",
customizable: "<?",
pageSize: "@?",
rows: "<?",
rowsLoader: "&?",
rowLoader: "&?"
rowLoader: "&?",
onColumnsParametersChange: "&"
},
compile: elm => {
// Transclude can't be used here otherwise transcluded
Expand Down
Loading