Skip to content
Permalink
Browse files

feat(view): add view-manager, update readme

  • Loading branch information...
VMBindraban
VMBindraban committed Jun 7, 2016
1 parent 04f0a32 commit 262ae5fbe96d67e0b6071fa7cb5ac0f4ef4d9b46
@@ -1,4 +1,84 @@
# Data-table
A data-table built with aurelia-orm.
A data-table built with [Spoonx/Aurelia-orm](https://github.com/SpoonX/aurelia-orm)

Still under development.
## Bindables

#### columns
String representing the column names, supports renaming columns with `as` e.g. `name as username`.

#### repository (optional)
A entity with [Spoonx/Aurelia-orm](https://github.com/SpoonX/aurelia-orm).
When no repository is given it will prevent `destroy` and `update` buttons from showing.

#### data (optional)
When not using a repository you can give an array with objects to this bindable.

## Optional attributes

##### destroy
Show delete button. Rows are removable, will trigger `deleted.delegate="myEventCallback($event)"` when clicked.

##### update
Show edit button. Rows are editable, will trigger `updated.delegate="myEventCallback($event)"` when clicked.

##### sortable
Columns can be sorted.

##### searchable
Show the search field

## Custom html
You can override the html with your own by configuring it through the [Spoonx/Aurelia-view-manager](https://github.com/spoonx/aurelia-view-manager).

## Examples:

```js
this.dbData = entityManager.getRepository('users');
```

```html
<data-table
deleted.delegate="myEventCallback($event)"
updated.delegate="myEventCallback($event)"
columns="id,name"
repository.bind="dbData"
default-column="name"
searchable
sortable
update
destroy
></data-table>
```

Pagination through [Spoonx/Aurelia-paged](https://github.com/SpoonX/aurelia-paged) and [Spoonx/Aurelia-pager](https://github.com/SpoonX/aurelia-pager).

```html
<paged resource.bind="dbData" data.bind="data" page.bind="page">
<data-table
data.bind="data"
columns="id,name"
default-column="name"
searchable
sortable
></data-table>
</paged>

<pager resource.bind="dbData" page.bind="page"></pager>
```

It is possible to add a repository but that will invoke a extra request to the back-end since the data gets retrieved by `paged`.

```html
<paged resource.bind="dbData" data.bind="data" page.bind="page">
<data-table
repository.bind="dbData"
data.bind="data"
columns="id,name"
default-column="name"
searchable
sortable
></data-table>
</paged>

<pager resource.bind="dbData" page.bind="page"></pager>
```
File renamed without changes.
@@ -1,4 +1,4 @@
define(['exports', 'aurelia-framework', 'aurelia-event-aggregator', 'aurelia-router', 'json-statham'], function (exports, _aureliaFramework, _aureliaEventAggregator, _aureliaRouter, _jsonStatham) {
define(['exports', 'aurelia-framework', 'aurelia-view-manager', 'aurelia-router', 'json-statham'], function (exports, _aureliaFramework, _aureliaViewManager, _aureliaRouter, _jsonStatham) {
'use strict';

Object.defineProperty(exports, "__esModule", {
@@ -73,33 +73,35 @@ define(['exports', 'aurelia-framework', 'aurelia-event-aggregator', 'aurelia-rou
throw new Error('Decorating class property failed. Please ensure that transform-class-properties is enabled.');
}

var _dec, _dec2, _dec3, _class, _desc, _value, _class2, _descriptor, _descriptor2, _descriptor3, _descriptor4, _descriptor5, _descriptor6, _descriptor7, _descriptor8, _descriptor9, _descriptor10, _descriptor11;
var _dec, _dec2, _dec3, _dec4, _dec5, _class, _desc, _value, _class2, _descriptor, _descriptor2, _descriptor3, _descriptor4, _descriptor5, _descriptor6, _descriptor7, _descriptor8, _descriptor9, _descriptor10, _descriptor11, _descriptor12;

var DataTable = exports.DataTable = (_dec = (0, _aureliaFramework.customElement)('data-table'), _dec2 = (0, _aureliaFramework.inject)(_aureliaRouter.Router, Element, _aureliaEventAggregator.EventAggregator), _dec3 = (0, _aureliaFramework.computedFrom)('columns'), _dec(_class = _dec2(_class = (_class2 = function () {
var DataTable = exports.DataTable = (_dec = (0, _aureliaFramework.customElement)('data-table'), _dec2 = (0, _aureliaViewManager.resolvedView)('aurelia-data-table', 'dataTable'), _dec3 = (0, _aureliaFramework.inject)(_aureliaRouter.Router, Element), _dec4 = (0, _aureliaFramework.bindable)({ defaultBindingMode: _aureliaFramework.bindingMode.twoWay }), _dec5 = (0, _aureliaFramework.computedFrom)('columns'), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = function () {
function DataTable(Router, element, eventAggregator) {
_classCallCheck(this, DataTable);

_initDefineProp(this, 'repository', _descriptor, this);
_initDefineProp(this, 'criteria', _descriptor, this);

_initDefineProp(this, 'columns', _descriptor2, this);
_initDefineProp(this, 'repository', _descriptor2, this);

_initDefineProp(this, 'defaultColumn', _descriptor3, this);
_initDefineProp(this, 'columns', _descriptor3, this);

_initDefineProp(this, 'searchable', _descriptor4, this);
_initDefineProp(this, 'defaultColumn', _descriptor4, this);

_initDefineProp(this, 'sortable', _descriptor5, this);
_initDefineProp(this, 'searchable', _descriptor5, this);

_initDefineProp(this, 'update', _descriptor6, this);
_initDefineProp(this, 'sortable', _descriptor6, this);

_initDefineProp(this, 'destroy', _descriptor7, this);
_initDefineProp(this, 'update', _descriptor7, this);

_initDefineProp(this, 'showActions', _descriptor8, this);
_initDefineProp(this, 'destroy', _descriptor8, this);

_initDefineProp(this, 'select', _descriptor9, this);
_initDefineProp(this, 'showActions', _descriptor9, this);

_initDefineProp(this, 'data', _descriptor10, this);
_initDefineProp(this, 'select', _descriptor10, this);

_initDefineProp(this, 'route', _descriptor11, this);
_initDefineProp(this, 'data', _descriptor11, this);

_initDefineProp(this, 'route', _descriptor12, this);

this.count = 0;
this.columnsArray = [];
@@ -108,91 +110,82 @@ define(['exports', 'aurelia-framework', 'aurelia-event-aggregator', 'aurelia-rou

this.router = Router;
this.element = element;
this.ea = eventAggregator;
}

DataTable.prototype.attached = function attached() {
var _this = this;

this.ea.subscribe('publishData', function (response) {
_this.data = response.data;
});

this.load();
};

DataTable.prototype.load = function load() {
var _this2 = this;

var criteria = this.buildCriteria();
var _this = this;

this.ea.publish('updateCriteria', criteria);
this.criteria = this.buildCriteria();

if (!this.repository) {
this.showActions = false;
return;
}

this.repository.find(criteria, true).then(function (result) {
_this2.data = result;
this.repository.find(this.criteria, true).then(function (result) {
_this.data = result;
}).catch(function (error) {
console.error('Something went wrong.', error);
});
};

DataTable.prototype.buildCriteria = function buildCriteria() {
var criteria = {};
var crit = {};

if (this.searchable !== null && Object.keys(this.searchCriteria).length) {
var propertyName = Object.keys(this.searchCriteria)[0];
if (this.searchCriteria[propertyName]) {
criteria['where'] = {};
criteria['where'][propertyName] = {};
criteria['where'][propertyName]['contains'] = this.searchCriteria[propertyName];
crit['where'] = {};
crit['where'][propertyName] = {};
crit['where'][propertyName]['contains'] = this.searchCriteria[propertyName];
}
}

if (this.sortable !== null && Object.keys(this.sortingCriteria).length) {
var _propertyName = Object.keys(this.sortingCriteria)[0];
if (this.sortingCriteria[_propertyName]) {
criteria['sort'] = _propertyName + ' ' + this.sortingCriteria[_propertyName];
crit['sort'] = _propertyName + ' ' + this.sortingCriteria[_propertyName];
}
}

return criteria;
return crit;
};

DataTable.prototype.populate = function populate(row) {
return this.repository.getPopulatedEntity(row);
};

DataTable.prototype.doDelete = function doDelete(row) {
var _this3 = this;
var _this2 = this;

if (typeof this.delete === 'function') {
return this.delete(this.populate(row));
}

this.populate(row).destroy().then(function (ah) {
_this3.load();
_this3.triggerEvent('deleted', row);
_this2.load();
_this2.triggerEvent('deleted', row);
}).catch(function (error) {
_this3.triggerEvent('exception', { on: 'delete', error: error });
_this2.triggerEvent('exception', { on: 'delete', error: error });
});
};

DataTable.prototype.doUpdate = function doUpdate(row) {
var _this4 = this;
var _this3 = this;

if (typeof this.update === 'function') {
return this.update(this.populate(row));
}

this.populate(row).update().then(function () {
_this4.load();
_this4.triggerEvent('updated', row);
_this3.load();
_this3.triggerEvent('updated', row);
}).catch(function (error) {
_this4.triggerEvent('exception', { on: 'update', error: error });
_this3.triggerEvent('exception', { on: 'update', error: error });
});
};

@@ -311,50 +304,53 @@ define(['exports', 'aurelia-framework', 'aurelia-event-aggregator', 'aurelia-rou
}]);

return DataTable;
}(), (_descriptor = _applyDecoratedDescriptor(_class2.prototype, 'repository', [_aureliaFramework.bindable], {
}(), (_descriptor = _applyDecoratedDescriptor(_class2.prototype, 'criteria', [_dec4], {
enumerable: true,
initializer: null
}), _descriptor2 = _applyDecoratedDescriptor(_class2.prototype, 'repository', [_aureliaFramework.bindable], {
enumerable: true,
initializer: null
}), _descriptor2 = _applyDecoratedDescriptor(_class2.prototype, 'columns', [_aureliaFramework.bindable], {
}), _descriptor3 = _applyDecoratedDescriptor(_class2.prototype, 'columns', [_aureliaFramework.bindable], {
enumerable: true,
initializer: function initializer() {
return '';
}
}), _descriptor3 = _applyDecoratedDescriptor(_class2.prototype, 'defaultColumn', [_aureliaFramework.bindable], {
}), _descriptor4 = _applyDecoratedDescriptor(_class2.prototype, 'defaultColumn', [_aureliaFramework.bindable], {
enumerable: true,
initializer: null
}), _descriptor4 = _applyDecoratedDescriptor(_class2.prototype, 'searchable', [_aureliaFramework.bindable], {
}), _descriptor5 = _applyDecoratedDescriptor(_class2.prototype, 'searchable', [_aureliaFramework.bindable], {
enumerable: true,
initializer: function initializer() {
return null;
}
}), _descriptor5 = _applyDecoratedDescriptor(_class2.prototype, 'sortable', [_aureliaFramework.bindable], {
}), _descriptor6 = _applyDecoratedDescriptor(_class2.prototype, 'sortable', [_aureliaFramework.bindable], {
enumerable: true,
initializer: function initializer() {
return null;
}
}), _descriptor6 = _applyDecoratedDescriptor(_class2.prototype, 'update', [_aureliaFramework.bindable], {
}), _descriptor7 = _applyDecoratedDescriptor(_class2.prototype, 'update', [_aureliaFramework.bindable], {
enumerable: true,
initializer: function initializer() {
return null;
}
}), _descriptor7 = _applyDecoratedDescriptor(_class2.prototype, 'destroy', [_aureliaFramework.bindable], {
}), _descriptor8 = _applyDecoratedDescriptor(_class2.prototype, 'destroy', [_aureliaFramework.bindable], {
enumerable: true,
initializer: function initializer() {
return null;
}
}), _descriptor8 = _applyDecoratedDescriptor(_class2.prototype, 'showActions', [_aureliaFramework.bindable], {
}), _descriptor9 = _applyDecoratedDescriptor(_class2.prototype, 'showActions', [_aureliaFramework.bindable], {
enumerable: true,
initializer: function initializer() {
return true;
}
}), _descriptor9 = _applyDecoratedDescriptor(_class2.prototype, 'select', [_aureliaFramework.bindable], {
}), _descriptor10 = _applyDecoratedDescriptor(_class2.prototype, 'select', [_aureliaFramework.bindable], {
enumerable: true,
initializer: null
}), _descriptor10 = _applyDecoratedDescriptor(_class2.prototype, 'data', [_aureliaFramework.bindable], {
}), _descriptor11 = _applyDecoratedDescriptor(_class2.prototype, 'data', [_aureliaFramework.bindable], {
enumerable: true,
initializer: null
}), _descriptor11 = _applyDecoratedDescriptor(_class2.prototype, 'route', [_aureliaFramework.bindable], {
}), _descriptor12 = _applyDecoratedDescriptor(_class2.prototype, 'route', [_aureliaFramework.bindable], {
enumerable: true,
initializer: null
}), _applyDecoratedDescriptor(_class2.prototype, 'columnLabels', [_dec3], Object.getOwnPropertyDescriptor(_class2.prototype, 'columnLabels'), _class2.prototype)), _class2)) || _class) || _class);
}), _applyDecoratedDescriptor(_class2.prototype, 'columnLabels', [_dec5], Object.getOwnPropertyDescriptor(_class2.prototype, 'columnLabels'), _class2.prototype)), _class2)) || _class) || _class) || _class);
});
@@ -1,11 +1,16 @@
define(['exports'], function (exports) {
define(['exports', 'aurelia-view-manager'], function (exports, _aureliaViewManager) {
'use strict';

Object.defineProperty(exports, "__esModule", {
value: true
});
exports.configure = configure;
function configure(config) {
config.globalResources('./data-table');
function configure(aurelia) {
aurelia.container.get(_aureliaViewManager.Config).configureNamespace('aurelia-data-table', {
framework: 'bootstrap',
location: './{{framework}}/{{view}}.html'
});

aurelia.globalResources('./data-table');
}
});
File renamed without changes.

0 comments on commit 262ae5f

Please sign in to comment.
You can’t perform that action at this time.