From c0f72b5091771f93a609a3db2022386be23cd1de Mon Sep 17 00:00:00 2001 From: VMBindraban Date: Tue, 24 May 2016 08:34:32 +0200 Subject: [PATCH] feat(data): add option to load data from event --- config.js | 4 ++ dist/amd/data-table.html | 4 +- dist/amd/data-table.js | 68 +++++++++++++++++++++++---------- dist/commonjs/data-table.html | 4 +- dist/commonjs/data-table.js | 68 +++++++++++++++++++++++---------- dist/es2015/data-table.html | 4 +- dist/es2015/data-table.js | 45 +++++++++++++++++----- dist/system/columns-filter.js | 2 + dist/system/data-table.html | 4 +- dist/system/data-table.js | 72 +++++++++++++++++++++++++---------- dist/system/index.js | 2 + package.json | 3 ++ src/data-table.html | 4 +- src/data-table.js | 37 +++++++++++++----- 14 files changed, 230 insertions(+), 91 deletions(-) diff --git a/config.js b/config.js index c3f8d5f..ec1db8f 100644 --- a/config.js +++ b/config.js @@ -14,6 +14,7 @@ System.config({ }, map: { + "aurelia-event-aggregator": "npm:aurelia-event-aggregator@1.0.0-beta.1.2.1", "aurelia-framework": "npm:aurelia-framework@1.0.0-beta.1.0.5", "aurelia-orm": "npm:aurelia-orm@3.0.0-rc2", "aurelia-polyfills": "npm:aurelia-polyfills@1.0.0-beta.1.1.4", @@ -75,6 +76,9 @@ System.config({ "npm:aurelia-event-aggregator@1.0.0-beta.1": { "aurelia-logging": "npm:aurelia-logging@1.0.0-beta.1.2.1" }, + "npm:aurelia-event-aggregator@1.0.0-beta.1.2.1": { + "aurelia-logging": "npm:aurelia-logging@1.0.0-beta.1.2.1" + }, "npm:aurelia-framework@1.0.0-beta.1.0.5": { "aurelia-binding": "npm:aurelia-binding@1.0.0-beta.1.3.5", "aurelia-dependency-injection": "npm:aurelia-dependency-injection@1.0.0-beta.1.2.3", diff --git a/dist/amd/data-table.html b/dist/amd/data-table.html index a712e67..d9dc174 100644 --- a/dist/amd/data-table.html +++ b/dist/amd/data-table.html @@ -24,7 +24,7 @@ - + @@ -36,7 +36,7 @@ - + diff --git a/dist/amd/data-table.js b/dist/amd/data-table.js index 3d4772b..c760e36 100644 --- a/dist/amd/data-table.js +++ b/dist/amd/data-table.js @@ -1,4 +1,4 @@ -define(['exports', 'aurelia-framework', 'aurelia-router', 'json-statham'], function (exports, _aureliaFramework, _aureliaRouter, _jsonStatham) { +define(['exports', 'aurelia-framework', 'aurelia-event-aggregator', 'aurelia-router', 'json-statham'], function (exports, _aureliaFramework, _aureliaEventAggregator, _aureliaRouter, _jsonStatham) { 'use strict'; Object.defineProperty(exports, "__esModule", { @@ -73,10 +73,10 @@ define(['exports', 'aurelia-framework', 'aurelia-router', 'json-statham'], funct 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; + var _dec, _dec2, _dec3, _class, _desc, _value, _class2, _descriptor, _descriptor2, _descriptor3, _descriptor4, _descriptor5, _descriptor6, _descriptor7, _descriptor8, _descriptor9, _descriptor10, _descriptor11; - var DataTable = exports.DataTable = (_dec = (0, _aureliaFramework.customElement)('data-table'), _dec2 = (0, _aureliaFramework.inject)(_aureliaRouter.Router, Element), _dec3 = (0, _aureliaFramework.computedFrom)('columns'), _dec(_class = _dec2(_class = (_class2 = function () { - function DataTable(Router, element) { + 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 () { + function DataTable(Router, element, eventAggregator) { _classCallCheck(this, DataTable); _initDefineProp(this, 'repository', _descriptor, this); @@ -93,11 +93,13 @@ define(['exports', 'aurelia-framework', 'aurelia-router', 'json-statham'], funct _initDefineProp(this, 'destroy', _descriptor7, this); - _initDefineProp(this, 'select', _descriptor8, this); + _initDefineProp(this, 'showActions', _descriptor8, this); - _initDefineProp(this, 'data', _descriptor9, this); + _initDefineProp(this, 'select', _descriptor9, this); - _initDefineProp(this, 'route', _descriptor10, this); + _initDefineProp(this, 'data', _descriptor10, this); + + _initDefineProp(this, 'route', _descriptor11, this); this.count = 0; this.columnsArray = []; @@ -106,18 +108,33 @@ define(['exports', 'aurelia-framework', 'aurelia-router', 'json-statham'], funct this.router = Router; this.element = element; + this.ea = eventAggregator; } DataTable.prototype.attached = function attached() { - return this.load(); + var _this = this; + + this.ea.subscribe('publishData', function (response) { + _this.data = response.data; + }); + + this.load(); }; DataTable.prototype.load = function load() { - var _this = this; + var _this2 = this; var criteria = this.buildCriteria(); + + this.ea.publish('updateCriteria', criteria); + + if (!this.repository) { + this.showActions = false; + return; + } + this.repository.find(criteria, true).then(function (result) { - _this.data = result; + _this2.data = result; }).catch(function (error) { console.error('Something went wrong.', error); }); @@ -134,12 +151,14 @@ define(['exports', 'aurelia-framework', 'aurelia-router', 'json-statham'], funct criteria['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]; } } + return criteria; }; @@ -148,32 +167,32 @@ define(['exports', 'aurelia-framework', 'aurelia-router', 'json-statham'], funct }; DataTable.prototype.doDelete = function doDelete(row) { - var _this2 = this; + var _this3 = this; if (typeof this.delete === 'function') { return this.delete(this.populate(row)); } this.populate(row).destroy().then(function (ah) { - _this2.load(); - _this2.triggerEvent('deleted', row); + _this3.load(); + _this3.triggerEvent('deleted', row); }).catch(function (error) { - _this2.triggerEvent('exception', { on: 'delete', error: error }); + _this3.triggerEvent('exception', { on: 'delete', error: error }); }); }; DataTable.prototype.doUpdate = function doUpdate(row) { - var _this3 = this; + var _this4 = this; if (typeof this.update === 'function') { return this.update(this.populate(row)); } this.populate(row).update().then(function () { - _this3.load(); - _this3.triggerEvent('updated', row); + _this4.load(); + _this4.triggerEvent('updated', row); }).catch(function (error) { - _this3.triggerEvent('exception', { on: 'update', error: error }); + _this4.triggerEvent('exception', { on: 'update', error: error }); }); }; @@ -200,7 +219,9 @@ define(['exports', 'aurelia-framework', 'aurelia-router', 'json-statham'], funct if (!(this.defaultColumn in this.searchCriteria)) { this.searchCriteria = {}; } + this.searchCriteria[this.defaultColumn] = searchInput; + this.load(); }; @@ -321,13 +342,18 @@ define(['exports', 'aurelia-framework', 'aurelia-router', 'json-statham'], funct initializer: function initializer() { return null; } - }), _descriptor8 = _applyDecoratedDescriptor(_class2.prototype, 'select', [_aureliaFramework.bindable], { + }), _descriptor8 = _applyDecoratedDescriptor(_class2.prototype, 'showActions', [_aureliaFramework.bindable], { + enumerable: true, + initializer: function initializer() { + return true; + } + }), _descriptor9 = _applyDecoratedDescriptor(_class2.prototype, 'select', [_aureliaFramework.bindable], { enumerable: true, initializer: null - }), _descriptor9 = _applyDecoratedDescriptor(_class2.prototype, 'data', [_aureliaFramework.bindable], { + }), _descriptor10 = _applyDecoratedDescriptor(_class2.prototype, 'data', [_aureliaFramework.bindable], { enumerable: true, initializer: null - }), _descriptor10 = _applyDecoratedDescriptor(_class2.prototype, 'route', [_aureliaFramework.bindable], { + }), _descriptor11 = _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); diff --git a/dist/commonjs/data-table.html b/dist/commonjs/data-table.html index a712e67..d9dc174 100644 --- a/dist/commonjs/data-table.html +++ b/dist/commonjs/data-table.html @@ -24,7 +24,7 @@ - + @@ -36,7 +36,7 @@ - + diff --git a/dist/commonjs/data-table.js b/dist/commonjs/data-table.js index d1a030f..2ff93c5 100644 --- a/dist/commonjs/data-table.js +++ b/dist/commonjs/data-table.js @@ -7,10 +7,12 @@ exports.DataTable = undefined; var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); -var _dec, _dec2, _dec3, _class, _desc, _value, _class2, _descriptor, _descriptor2, _descriptor3, _descriptor4, _descriptor5, _descriptor6, _descriptor7, _descriptor8, _descriptor9, _descriptor10; +var _dec, _dec2, _dec3, _class, _desc, _value, _class2, _descriptor, _descriptor2, _descriptor3, _descriptor4, _descriptor5, _descriptor6, _descriptor7, _descriptor8, _descriptor9, _descriptor10, _descriptor11; var _aureliaFramework = require('aurelia-framework'); +var _aureliaEventAggregator = require('aurelia-event-aggregator'); + var _aureliaRouter = require('aurelia-router'); var _jsonStatham = require('json-statham'); @@ -60,8 +62,8 @@ function _initializerWarningHelper(descriptor, context) { throw new Error('Decorating class property failed. Please ensure that transform-class-properties is enabled.'); } -var DataTable = exports.DataTable = (_dec = (0, _aureliaFramework.customElement)('data-table'), _dec2 = (0, _aureliaFramework.inject)(_aureliaRouter.Router, Element), _dec3 = (0, _aureliaFramework.computedFrom)('columns'), _dec(_class = _dec2(_class = (_class2 = function () { - function DataTable(Router, element) { +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 () { + function DataTable(Router, element, eventAggregator) { _classCallCheck(this, DataTable); _initDefineProp(this, 'repository', _descriptor, this); @@ -78,11 +80,13 @@ var DataTable = exports.DataTable = (_dec = (0, _aureliaFramework.customElement) _initDefineProp(this, 'destroy', _descriptor7, this); - _initDefineProp(this, 'select', _descriptor8, this); + _initDefineProp(this, 'showActions', _descriptor8, this); + + _initDefineProp(this, 'select', _descriptor9, this); - _initDefineProp(this, 'data', _descriptor9, this); + _initDefineProp(this, 'data', _descriptor10, this); - _initDefineProp(this, 'route', _descriptor10, this); + _initDefineProp(this, 'route', _descriptor11, this); this.count = 0; this.columnsArray = []; @@ -91,18 +95,33 @@ var DataTable = exports.DataTable = (_dec = (0, _aureliaFramework.customElement) this.router = Router; this.element = element; + this.ea = eventAggregator; } DataTable.prototype.attached = function attached() { - return this.load(); + var _this = this; + + this.ea.subscribe('publishData', function (response) { + _this.data = response.data; + }); + + this.load(); }; DataTable.prototype.load = function load() { - var _this = this; + var _this2 = this; var criteria = this.buildCriteria(); + + this.ea.publish('updateCriteria', criteria); + + if (!this.repository) { + this.showActions = false; + return; + } + this.repository.find(criteria, true).then(function (result) { - _this.data = result; + _this2.data = result; }).catch(function (error) { console.error('Something went wrong.', error); }); @@ -119,12 +138,14 @@ var DataTable = exports.DataTable = (_dec = (0, _aureliaFramework.customElement) criteria['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]; } } + return criteria; }; @@ -133,32 +154,32 @@ var DataTable = exports.DataTable = (_dec = (0, _aureliaFramework.customElement) }; DataTable.prototype.doDelete = function doDelete(row) { - var _this2 = this; + var _this3 = this; if (typeof this.delete === 'function') { return this.delete(this.populate(row)); } this.populate(row).destroy().then(function (ah) { - _this2.load(); - _this2.triggerEvent('deleted', row); + _this3.load(); + _this3.triggerEvent('deleted', row); }).catch(function (error) { - _this2.triggerEvent('exception', { on: 'delete', error: error }); + _this3.triggerEvent('exception', { on: 'delete', error: error }); }); }; DataTable.prototype.doUpdate = function doUpdate(row) { - var _this3 = this; + var _this4 = this; if (typeof this.update === 'function') { return this.update(this.populate(row)); } this.populate(row).update().then(function () { - _this3.load(); - _this3.triggerEvent('updated', row); + _this4.load(); + _this4.triggerEvent('updated', row); }).catch(function (error) { - _this3.triggerEvent('exception', { on: 'update', error: error }); + _this4.triggerEvent('exception', { on: 'update', error: error }); }); }; @@ -185,7 +206,9 @@ var DataTable = exports.DataTable = (_dec = (0, _aureliaFramework.customElement) if (!(this.defaultColumn in this.searchCriteria)) { this.searchCriteria = {}; } + this.searchCriteria[this.defaultColumn] = searchInput; + this.load(); }; @@ -306,13 +329,18 @@ var DataTable = exports.DataTable = (_dec = (0, _aureliaFramework.customElement) initializer: function initializer() { return null; } -}), _descriptor8 = _applyDecoratedDescriptor(_class2.prototype, 'select', [_aureliaFramework.bindable], { +}), _descriptor8 = _applyDecoratedDescriptor(_class2.prototype, 'showActions', [_aureliaFramework.bindable], { + enumerable: true, + initializer: function initializer() { + return true; + } +}), _descriptor9 = _applyDecoratedDescriptor(_class2.prototype, 'select', [_aureliaFramework.bindable], { enumerable: true, initializer: null -}), _descriptor9 = _applyDecoratedDescriptor(_class2.prototype, 'data', [_aureliaFramework.bindable], { +}), _descriptor10 = _applyDecoratedDescriptor(_class2.prototype, 'data', [_aureliaFramework.bindable], { enumerable: true, initializer: null -}), _descriptor10 = _applyDecoratedDescriptor(_class2.prototype, 'route', [_aureliaFramework.bindable], { +}), _descriptor11 = _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); \ No newline at end of file diff --git a/dist/es2015/data-table.html b/dist/es2015/data-table.html index a712e67..d9dc174 100644 --- a/dist/es2015/data-table.html +++ b/dist/es2015/data-table.html @@ -24,7 +24,7 @@ - + @@ -36,7 +36,7 @@ - + diff --git a/dist/es2015/data-table.js b/dist/es2015/data-table.js index 3b5399b..21d2d26 100644 --- a/dist/es2015/data-table.js +++ b/dist/es2015/data-table.js @@ -1,4 +1,4 @@ -var _dec, _dec2, _dec3, _class, _desc, _value, _class2, _descriptor, _descriptor2, _descriptor3, _descriptor4, _descriptor5, _descriptor6, _descriptor7, _descriptor8, _descriptor9, _descriptor10; +var _dec, _dec2, _dec3, _class, _desc, _value, _class2, _descriptor, _descriptor2, _descriptor3, _descriptor4, _descriptor5, _descriptor6, _descriptor7, _descriptor8, _descriptor9, _descriptor10, _descriptor11; function _initDefineProp(target, property, descriptor, context) { if (!descriptor) return; @@ -44,12 +44,13 @@ function _initializerWarningHelper(descriptor, context) { } import { bindable, inject, computedFrom, customElement } from 'aurelia-framework'; +import { EventAggregator } from 'aurelia-event-aggregator'; import { Router } from 'aurelia-router'; import { Statham } from 'json-statham'; -export let DataTable = (_dec = customElement('data-table'), _dec2 = inject(Router, Element), _dec3 = computedFrom('columns'), _dec(_class = _dec2(_class = (_class2 = class DataTable { +export let DataTable = (_dec = customElement('data-table'), _dec2 = inject(Router, Element, EventAggregator), _dec3 = computedFrom('columns'), _dec(_class = _dec2(_class = (_class2 = class DataTable { - constructor(Router, element) { + constructor(Router, element, eventAggregator) { _initDefineProp(this, 'repository', _descriptor, this); _initDefineProp(this, 'columns', _descriptor2, this); @@ -64,11 +65,13 @@ export let DataTable = (_dec = customElement('data-table'), _dec2 = inject(Route _initDefineProp(this, 'destroy', _descriptor7, this); - _initDefineProp(this, 'select', _descriptor8, this); + _initDefineProp(this, 'showActions', _descriptor8, this); - _initDefineProp(this, 'data', _descriptor9, this); + _initDefineProp(this, 'select', _descriptor9, this); - _initDefineProp(this, 'route', _descriptor10, this); + _initDefineProp(this, 'data', _descriptor10, this); + + _initDefineProp(this, 'route', _descriptor11, this); this.count = 0; this.columnsArray = []; @@ -77,14 +80,27 @@ export let DataTable = (_dec = customElement('data-table'), _dec2 = inject(Route this.router = Router; this.element = element; + this.ea = eventAggregator; } attached() { - return this.load(); + this.ea.subscribe('publishData', response => { + this.data = response.data; + }); + + this.load(); } load() { let criteria = this.buildCriteria(); + + this.ea.publish('updateCriteria', criteria); + + if (!this.repository) { + this.showActions = false; + return; + } + this.repository.find(criteria, true).then(result => { this.data = result; }).catch(error => { @@ -103,12 +119,14 @@ export let DataTable = (_dec = customElement('data-table'), _dec2 = inject(Route criteria['where'][propertyName]['contains'] = this.searchCriteria[propertyName]; } } + if (this.sortable !== null && Object.keys(this.sortingCriteria).length) { let propertyName = Object.keys(this.sortingCriteria)[0]; if (this.sortingCriteria[propertyName]) { criteria['sort'] = propertyName + ' ' + this.sortingCriteria[propertyName]; } } + return criteria; } @@ -165,7 +183,9 @@ export let DataTable = (_dec = customElement('data-table'), _dec2 = inject(Route if (!(this.defaultColumn in this.searchCriteria)) { this.searchCriteria = {}; } + this.searchCriteria[this.defaultColumn] = searchInput; + this.load(); } @@ -279,13 +299,18 @@ export let DataTable = (_dec = customElement('data-table'), _dec2 = inject(Route initializer: function () { return null; } -}), _descriptor8 = _applyDecoratedDescriptor(_class2.prototype, 'select', [bindable], { +}), _descriptor8 = _applyDecoratedDescriptor(_class2.prototype, 'showActions', [bindable], { + enumerable: true, + initializer: function () { + return true; + } +}), _descriptor9 = _applyDecoratedDescriptor(_class2.prototype, 'select', [bindable], { enumerable: true, initializer: null -}), _descriptor9 = _applyDecoratedDescriptor(_class2.prototype, 'data', [bindable], { +}), _descriptor10 = _applyDecoratedDescriptor(_class2.prototype, 'data', [bindable], { enumerable: true, initializer: null -}), _descriptor10 = _applyDecoratedDescriptor(_class2.prototype, 'route', [bindable], { +}), _descriptor11 = _applyDecoratedDescriptor(_class2.prototype, 'route', [bindable], { enumerable: true, initializer: null }), _applyDecoratedDescriptor(_class2.prototype, 'columnLabels', [_dec3], Object.getOwnPropertyDescriptor(_class2.prototype, 'columnLabels'), _class2.prototype)), _class2)) || _class) || _class); \ No newline at end of file diff --git a/dist/system/columns-filter.js b/dist/system/columns-filter.js index cb7e7cc..98d74b7 100644 --- a/dist/system/columns-filter.js +++ b/dist/system/columns-filter.js @@ -1,6 +1,8 @@ 'use strict'; System.register([], function (_export, _context) { + "use strict"; + var ColumnsFilterValueConverter; function _classCallCheck(instance, Constructor) { diff --git a/dist/system/data-table.html b/dist/system/data-table.html index a712e67..d9dc174 100644 --- a/dist/system/data-table.html +++ b/dist/system/data-table.html @@ -24,7 +24,7 @@ - + @@ -36,7 +36,7 @@ - + diff --git a/dist/system/data-table.js b/dist/system/data-table.js index 2b2ab3d..47e5a43 100644 --- a/dist/system/data-table.js +++ b/dist/system/data-table.js @@ -1,7 +1,9 @@ 'use strict'; -System.register(['aurelia-framework', 'aurelia-router', 'json-statham'], function (_export, _context) { - var bindable, inject, computedFrom, customElement, Router, Statham, _createClass, _dec, _dec2, _dec3, _class, _desc, _value, _class2, _descriptor, _descriptor2, _descriptor3, _descriptor4, _descriptor5, _descriptor6, _descriptor7, _descriptor8, _descriptor9, _descriptor10, DataTable; +System.register(['aurelia-framework', 'aurelia-event-aggregator', 'aurelia-router', 'json-statham'], function (_export, _context) { + "use strict"; + + var bindable, inject, computedFrom, customElement, EventAggregator, Router, Statham, _createClass, _dec, _dec2, _dec3, _class, _desc, _value, _class2, _descriptor, _descriptor2, _descriptor3, _descriptor4, _descriptor5, _descriptor6, _descriptor7, _descriptor8, _descriptor9, _descriptor10, _descriptor11, DataTable; function _initDefineProp(target, property, descriptor, context) { if (!descriptor) return; @@ -58,6 +60,8 @@ System.register(['aurelia-framework', 'aurelia-router', 'json-statham'], functio inject = _aureliaFramework.inject; computedFrom = _aureliaFramework.computedFrom; customElement = _aureliaFramework.customElement; + }, function (_aureliaEventAggregator) { + EventAggregator = _aureliaEventAggregator.EventAggregator; }, function (_aureliaRouter) { Router = _aureliaRouter.Router; }, function (_jsonStatham) { @@ -82,8 +86,8 @@ System.register(['aurelia-framework', 'aurelia-router', 'json-statham'], functio }; }(); - _export('DataTable', DataTable = (_dec = customElement('data-table'), _dec2 = inject(Router, Element), _dec3 = computedFrom('columns'), _dec(_class = _dec2(_class = (_class2 = function () { - function DataTable(Router, element) { + _export('DataTable', DataTable = (_dec = customElement('data-table'), _dec2 = inject(Router, Element, EventAggregator), _dec3 = computedFrom('columns'), _dec(_class = _dec2(_class = (_class2 = function () { + function DataTable(Router, element, eventAggregator) { _classCallCheck(this, DataTable); _initDefineProp(this, 'repository', _descriptor, this); @@ -100,11 +104,13 @@ System.register(['aurelia-framework', 'aurelia-router', 'json-statham'], functio _initDefineProp(this, 'destroy', _descriptor7, this); - _initDefineProp(this, 'select', _descriptor8, this); + _initDefineProp(this, 'showActions', _descriptor8, this); + + _initDefineProp(this, 'select', _descriptor9, this); - _initDefineProp(this, 'data', _descriptor9, this); + _initDefineProp(this, 'data', _descriptor10, this); - _initDefineProp(this, 'route', _descriptor10, this); + _initDefineProp(this, 'route', _descriptor11, this); this.count = 0; this.columnsArray = []; @@ -113,18 +119,33 @@ System.register(['aurelia-framework', 'aurelia-router', 'json-statham'], functio this.router = Router; this.element = element; + this.ea = eventAggregator; } DataTable.prototype.attached = function attached() { - return this.load(); + var _this = this; + + this.ea.subscribe('publishData', function (response) { + _this.data = response.data; + }); + + this.load(); }; DataTable.prototype.load = function load() { - var _this = this; + var _this2 = this; var criteria = this.buildCriteria(); + + this.ea.publish('updateCriteria', criteria); + + if (!this.repository) { + this.showActions = false; + return; + } + this.repository.find(criteria, true).then(function (result) { - _this.data = result; + _this2.data = result; }).catch(function (error) { console.error('Something went wrong.', error); }); @@ -141,12 +162,14 @@ System.register(['aurelia-framework', 'aurelia-router', 'json-statham'], functio criteria['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]; } } + return criteria; }; @@ -155,32 +178,32 @@ System.register(['aurelia-framework', 'aurelia-router', 'json-statham'], functio }; DataTable.prototype.doDelete = function doDelete(row) { - var _this2 = this; + var _this3 = this; if (typeof this.delete === 'function') { return this.delete(this.populate(row)); } this.populate(row).destroy().then(function (ah) { - _this2.load(); - _this2.triggerEvent('deleted', row); + _this3.load(); + _this3.triggerEvent('deleted', row); }).catch(function (error) { - _this2.triggerEvent('exception', { on: 'delete', error: error }); + _this3.triggerEvent('exception', { on: 'delete', error: error }); }); }; DataTable.prototype.doUpdate = function doUpdate(row) { - var _this3 = this; + var _this4 = this; if (typeof this.update === 'function') { return this.update(this.populate(row)); } this.populate(row).update().then(function () { - _this3.load(); - _this3.triggerEvent('updated', row); + _this4.load(); + _this4.triggerEvent('updated', row); }).catch(function (error) { - _this3.triggerEvent('exception', { on: 'update', error: error }); + _this4.triggerEvent('exception', { on: 'update', error: error }); }); }; @@ -207,7 +230,9 @@ System.register(['aurelia-framework', 'aurelia-router', 'json-statham'], functio if (!(this.defaultColumn in this.searchCriteria)) { this.searchCriteria = {}; } + this.searchCriteria[this.defaultColumn] = searchInput; + this.load(); }; @@ -328,13 +353,18 @@ System.register(['aurelia-framework', 'aurelia-router', 'json-statham'], functio initializer: function initializer() { return null; } - }), _descriptor8 = _applyDecoratedDescriptor(_class2.prototype, 'select', [bindable], { + }), _descriptor8 = _applyDecoratedDescriptor(_class2.prototype, 'showActions', [bindable], { + enumerable: true, + initializer: function initializer() { + return true; + } + }), _descriptor9 = _applyDecoratedDescriptor(_class2.prototype, 'select', [bindable], { enumerable: true, initializer: null - }), _descriptor9 = _applyDecoratedDescriptor(_class2.prototype, 'data', [bindable], { + }), _descriptor10 = _applyDecoratedDescriptor(_class2.prototype, 'data', [bindable], { enumerable: true, initializer: null - }), _descriptor10 = _applyDecoratedDescriptor(_class2.prototype, 'route', [bindable], { + }), _descriptor11 = _applyDecoratedDescriptor(_class2.prototype, 'route', [bindable], { enumerable: true, initializer: null }), _applyDecoratedDescriptor(_class2.prototype, 'columnLabels', [_dec3], Object.getOwnPropertyDescriptor(_class2.prototype, 'columnLabels'), _class2.prototype)), _class2)) || _class) || _class)); diff --git a/dist/system/index.js b/dist/system/index.js index 80b3f77..9484b15 100644 --- a/dist/system/index.js +++ b/dist/system/index.js @@ -1,6 +1,8 @@ 'use strict'; System.register([], function (_export, _context) { + "use strict"; + return { setters: [], execute: function () { diff --git a/package.json b/package.json index e236474..d099582 100644 --- a/package.json +++ b/package.json @@ -63,6 +63,9 @@ "directories": { "dist": "dist/amd" }, + "dependencies": { + "aurelia-event-aggregator": "^1.0.0-beta.1.2.1" + }, "devDependencies": { "aurelia-framework": "^1.0.0-beta.1.0.5", "aurelia-orm": "^3.0.0-rc2", diff --git a/src/data-table.html b/src/data-table.html index a712e67..d9dc174 100644 --- a/src/data-table.html +++ b/src/data-table.html @@ -24,7 +24,7 @@ - + @@ -36,7 +36,7 @@ - + diff --git a/src/data-table.js b/src/data-table.js index 7b1af58..92e0a1f 100644 --- a/src/data-table.js +++ b/src/data-table.js @@ -1,9 +1,10 @@ import {bindable, inject, computedFrom, customElement} from 'aurelia-framework'; +import {EventAggregator} from 'aurelia-event-aggregator'; import {Router} from 'aurelia-router'; import {Statham} from 'json-statham'; @customElement('data-table') -@inject(Router, Element) +@inject(Router, Element, EventAggregator) export class DataTable { @bindable repository; // String representing the column names @@ -19,26 +20,40 @@ export class DataTable { // Rows are removable? (Optional attribute) @bindable destroy = null; // Rows are selectable? (Optional attribute) + @bindable showActions = true; @bindable select; @bindable data; @bindable route; - count = 0; - columnsArray = []; + count = 0; + columnsArray = []; sortingCriteria = {}; - searchCriteria = {} + searchCriteria = {} - constructor(Router, element) { + constructor(Router, element, eventAggregator) { this.router = Router; this.element = element; + this.ea = eventAggregator; } attached() { - return this.load(); + this.ea.subscribe('publishData', response => { + this.data = response.data; + }); + + this.load(); } load() { let criteria = this.buildCriteria(); + + this.ea.publish('updateCriteria', criteria); + + if (!this.repository) { + this.showActions = false; + return; + } + this.repository.find(criteria, true).then(result => { this.data = result; }) @@ -53,17 +68,19 @@ export class DataTable { if (this.searchable !== null && Object.keys(this.searchCriteria).length ) { let propertyName = Object.keys(this.searchCriteria)[0]; if (this.searchCriteria[propertyName]) { - criteria['where'] = {}; - criteria['where'][propertyName] = {}; + criteria['where'] = {}; + criteria['where'][propertyName] = {}; criteria['where'][propertyName]['contains'] = this.searchCriteria[propertyName]; } } + if (this.sortable !== null && Object.keys(this.sortingCriteria).length ) { let propertyName = Object.keys(this.sortingCriteria)[0]; if (this.sortingCriteria[propertyName]) { criteria['sort'] = propertyName + ' ' + this.sortingCriteria[propertyName]; } } + return criteria; } @@ -125,7 +142,9 @@ export class DataTable { if (!(this.defaultColumn in this.searchCriteria)) { this.searchCriteria = {}; } + this.searchCriteria[this.defaultColumn] = searchInput; + this.load(); } @@ -209,4 +228,4 @@ export class DataTable { isObject (columnName) { return (columnName.indexOf('.') !== -1); } -} \ No newline at end of file +}