Permalink
Browse files

feat(project): load data through paged

  • Loading branch information...
VMBindraban
VMBindraban committed Jun 8, 2016
1 parent a309c2c commit f20526d849fe1a19d629d26ab0128e05e30d29fd
@@ -14,38 +14,40 @@
</div>
<br/>
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<!-- Labels -->
<th click.delegate="doSort(columnLabel)" repeat.for="columnLabel of columnLabels">
<span if.bind="sortable === null || isObject(columnLabel.column)" t="${columnLabel.label}"></span>
<a if.bind="sortable !== null && !isObject(columnLabel.column)">${columnLabel.label} <i class="${sortingCriteria[columnLabel.column] ? (sortingCriteria[columnLabel.column] === 'desc' ? 'fa fa-caret-down' : 'fa fa-caret-up') : 'fa fa-sort'}"></i></a>
</th>
<paged resource.bind="repository" criteria.bind="criteria" data.bind="data" page.bind="page">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<!-- Labels -->
<th click.delegate="doSort(columnLabel)" repeat.for="columnLabel of columnLabels">
<span if.bind="sortable === null || isObject(columnLabel.column)" t="${columnLabel.label}"></span>
<a if.bind="sortable !== null && !isObject(columnLabel.column)">${columnLabel.label} <i class="${sortingCriteria[columnLabel.column] ? (sortingCriteria[columnLabel.column] === 'desc' ? 'fa fa-caret-down' : 'fa fa-caret-up') : 'fa fa-sort'}"></i></a>
</th>
<!-- Actions -->
<th if.bind="destroy != null || update != null" t="Actions" show.bind="showActions"></th>
</tr>
</thead>
<tbody>
<tr repeat.for="row of data">
<!-- Actions -->
<th if.bind="destroy != null || update != null" t="Actions"></th>
</tr>
</thead>
<tbody>
<tr repeat.for="row of data">
<!-- Columns -->
<td repeat.for="columnLabel of columnLabels">
<a click.delegate="selected(row)">${displayValue(row, columnLabel.column)}</a>
</td>
<!-- Columns -->
<td repeat.for="columnLabel of columnLabels">
<a click.delegate="selected(row)">${displayValue(row, columnLabel.column)}</a>
</td>
<!-- Actions -->
<td style="white-space: nowrap; width: 1px;" if.bind="destroy !== null || update !== null" show.bind="showActions">
<button if.bind="update !== null" class="btn btn-sm btn-white" click.delegate="doUpdate(row)">
<i class="fa fa-pencil"></i>
</button>
<!-- Actions -->
<td style="white-space: nowrap; width: 1px;" if.bind="destroy !== null || update !== null">
<button if.bind="update !== null" class="btn btn-sm btn-white" click.delegate="doUpdate(row)">
<i class="fa fa-pencil"></i>
</button>
<button if.bind="destroy !== null" class="btn btn-sm btn-danger" click.delegate="doDelete(row)">
<i class="fa fa-trash"></i>
</button>
</td>
</tr>
</tbody>
</table>
<button if.bind="destroy !== null" class="btn btn-sm btn-danger" click.delegate="doDelete(row)">
<i class="fa fa-trash"></i>
</button>
</td>
</tr>
</tbody>
</table>
</paged>
</template>
@@ -75,8 +75,8 @@ define(['exports', 'aurelia-framework', 'aurelia-view-manager', 'aurelia-router'
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, _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) {
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) {
_classCallCheck(this, DataTable);
_initDefineProp(this, 'criteria', _descriptor, this);
@@ -95,13 +95,13 @@ define(['exports', 'aurelia-framework', 'aurelia-view-manager', 'aurelia-router'
_initDefineProp(this, 'destroy', _descriptor8, this);
_initDefineProp(this, 'showActions', _descriptor9, this);
_initDefineProp(this, 'select', _descriptor9, this);
_initDefineProp(this, 'select', _descriptor10, this);
_initDefineProp(this, 'data', _descriptor10, this);
_initDefineProp(this, 'data', _descriptor11, this);
_initDefineProp(this, 'route', _descriptor11, this);
_initDefineProp(this, 'route', _descriptor12, this);
_initDefineProp(this, 'page', _descriptor12, this);
this.count = 0;
this.columnsArray = [];
@@ -112,25 +112,8 @@ define(['exports', 'aurelia-framework', 'aurelia-view-manager', 'aurelia-router'
this.element = element;
}
DataTable.prototype.attached = function attached() {
this.load();
};
DataTable.prototype.load = function load() {
var _this = this;
this.criteria = this.buildCriteria();
if (!this.repository) {
this.showActions = false;
return;
}
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() {
@@ -160,32 +143,32 @@ define(['exports', 'aurelia-framework', 'aurelia-view-manager', 'aurelia-router'
};
DataTable.prototype.doDelete = function doDelete(row) {
var _this2 = this;
var _this = 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);
_this.load();
_this.triggerEvent('deleted', row);
}).catch(function (error) {
_this2.triggerEvent('exception', { on: 'delete', error: error });
_this.triggerEvent('exception', { on: 'delete', error: error });
});
};
DataTable.prototype.doUpdate = function doUpdate(row) {
var _this3 = this;
var _this2 = this;
if (typeof this.update === 'function') {
return this.update(this.populate(row));
}
this.populate(row).update().then(function () {
_this3.load();
_this3.triggerEvent('updated', row);
_this2.load();
_this2.triggerEvent('updated', row);
}).catch(function (error) {
_this3.triggerEvent('exception', { on: 'update', error: error });
_this2.triggerEvent('exception', { on: 'update', error: error });
});
};
@@ -338,18 +321,16 @@ define(['exports', 'aurelia-framework', 'aurelia-view-manager', 'aurelia-router'
initializer: function initializer() {
return null;
}
}), _descriptor9 = _applyDecoratedDescriptor(_class2.prototype, 'showActions', [_aureliaFramework.bindable], {
}), _descriptor9 = _applyDecoratedDescriptor(_class2.prototype, 'select', [_aureliaFramework.bindable], {
enumerable: true,
initializer: function initializer() {
return true;
}
}), _descriptor10 = _applyDecoratedDescriptor(_class2.prototype, 'select', [_aureliaFramework.bindable], {
initializer: null
}), _descriptor10 = _applyDecoratedDescriptor(_class2.prototype, 'data', [_aureliaFramework.bindable], {
enumerable: true,
initializer: null
}), _descriptor11 = _applyDecoratedDescriptor(_class2.prototype, 'data', [_aureliaFramework.bindable], {
}), _descriptor11 = _applyDecoratedDescriptor(_class2.prototype, 'route', [_aureliaFramework.bindable], {
enumerable: true,
initializer: null
}), _descriptor12 = _applyDecoratedDescriptor(_class2.prototype, 'route', [_aureliaFramework.bindable], {
}), _descriptor12 = _applyDecoratedDescriptor(_class2.prototype, 'page', [_aureliaFramework.bindable], {
enumerable: true,
initializer: null
}), _applyDecoratedDescriptor(_class2.prototype, 'columnLabels', [_dec5], Object.getOwnPropertyDescriptor(_class2.prototype, 'columnLabels'), _class2.prototype)), _class2)) || _class) || _class) || _class);
@@ -14,38 +14,40 @@
</div>
<br/>
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<!-- Labels -->
<th click.delegate="doSort(columnLabel)" repeat.for="columnLabel of columnLabels">
<span if.bind="sortable === null || isObject(columnLabel.column)" t="${columnLabel.label}"></span>
<a if.bind="sortable !== null && !isObject(columnLabel.column)">${columnLabel.label} <i class="${sortingCriteria[columnLabel.column] ? (sortingCriteria[columnLabel.column] === 'desc' ? 'fa fa-caret-down' : 'fa fa-caret-up') : 'fa fa-sort'}"></i></a>
</th>
<paged resource.bind="repository" criteria.bind="criteria" data.bind="data" page.bind="page">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<!-- Labels -->
<th click.delegate="doSort(columnLabel)" repeat.for="columnLabel of columnLabels">
<span if.bind="sortable === null || isObject(columnLabel.column)" t="${columnLabel.label}"></span>
<a if.bind="sortable !== null && !isObject(columnLabel.column)">${columnLabel.label} <i class="${sortingCriteria[columnLabel.column] ? (sortingCriteria[columnLabel.column] === 'desc' ? 'fa fa-caret-down' : 'fa fa-caret-up') : 'fa fa-sort'}"></i></a>
</th>
<!-- Actions -->
<th if.bind="destroy != null || update != null" t="Actions" show.bind="showActions"></th>
</tr>
</thead>
<tbody>
<tr repeat.for="row of data">
<!-- Actions -->
<th if.bind="destroy != null || update != null" t="Actions"></th>
</tr>
</thead>
<tbody>
<tr repeat.for="row of data">
<!-- Columns -->
<td repeat.for="columnLabel of columnLabels">
<a click.delegate="selected(row)">${displayValue(row, columnLabel.column)}</a>
</td>
<!-- Columns -->
<td repeat.for="columnLabel of columnLabels">
<a click.delegate="selected(row)">${displayValue(row, columnLabel.column)}</a>
</td>
<!-- Actions -->
<td style="white-space: nowrap; width: 1px;" if.bind="destroy !== null || update !== null" show.bind="showActions">
<button if.bind="update !== null" class="btn btn-sm btn-white" click.delegate="doUpdate(row)">
<i class="fa fa-pencil"></i>
</button>
<!-- Actions -->
<td style="white-space: nowrap; width: 1px;" if.bind="destroy !== null || update !== null">
<button if.bind="update !== null" class="btn btn-sm btn-white" click.delegate="doUpdate(row)">
<i class="fa fa-pencil"></i>
</button>
<button if.bind="destroy !== null" class="btn btn-sm btn-danger" click.delegate="doDelete(row)">
<i class="fa fa-trash"></i>
</button>
</td>
</tr>
</tbody>
</table>
<button if.bind="destroy !== null" class="btn btn-sm btn-danger" click.delegate="doDelete(row)">
<i class="fa fa-trash"></i>
</button>
</td>
</tr>
</tbody>
</table>
</paged>
</template>
@@ -62,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, _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) {
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) {
_classCallCheck(this, DataTable);
_initDefineProp(this, 'criteria', _descriptor, this);
@@ -82,13 +82,13 @@ var DataTable = exports.DataTable = (_dec = (0, _aureliaFramework.customElement)
_initDefineProp(this, 'destroy', _descriptor8, this);
_initDefineProp(this, 'showActions', _descriptor9, this);
_initDefineProp(this, 'select', _descriptor9, this);
_initDefineProp(this, 'select', _descriptor10, this);
_initDefineProp(this, 'data', _descriptor10, this);
_initDefineProp(this, 'data', _descriptor11, this);
_initDefineProp(this, 'route', _descriptor11, this);
_initDefineProp(this, 'route', _descriptor12, this);
_initDefineProp(this, 'page', _descriptor12, this);
this.count = 0;
this.columnsArray = [];
@@ -99,25 +99,8 @@ var DataTable = exports.DataTable = (_dec = (0, _aureliaFramework.customElement)
this.element = element;
}
DataTable.prototype.attached = function attached() {
this.load();
};
DataTable.prototype.load = function load() {
var _this = this;
this.criteria = this.buildCriteria();
if (!this.repository) {
this.showActions = false;
return;
}
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() {
@@ -147,32 +130,32 @@ var DataTable = exports.DataTable = (_dec = (0, _aureliaFramework.customElement)
};
DataTable.prototype.doDelete = function doDelete(row) {
var _this2 = this;
var _this = 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);
_this.load();
_this.triggerEvent('deleted', row);
}).catch(function (error) {
_this2.triggerEvent('exception', { on: 'delete', error: error });
_this.triggerEvent('exception', { on: 'delete', error: error });
});
};
DataTable.prototype.doUpdate = function doUpdate(row) {
var _this3 = this;
var _this2 = this;
if (typeof this.update === 'function') {
return this.update(this.populate(row));
}
this.populate(row).update().then(function () {
_this3.load();
_this3.triggerEvent('updated', row);
_this2.load();
_this2.triggerEvent('updated', row);
}).catch(function (error) {
_this3.triggerEvent('exception', { on: 'update', error: error });
_this2.triggerEvent('exception', { on: 'update', error: error });
});
};
@@ -325,18 +308,16 @@ var DataTable = exports.DataTable = (_dec = (0, _aureliaFramework.customElement)
initializer: function initializer() {
return null;
}
}), _descriptor9 = _applyDecoratedDescriptor(_class2.prototype, 'showActions', [_aureliaFramework.bindable], {
}), _descriptor9 = _applyDecoratedDescriptor(_class2.prototype, 'select', [_aureliaFramework.bindable], {
enumerable: true,
initializer: function initializer() {
return true;
}
}), _descriptor10 = _applyDecoratedDescriptor(_class2.prototype, 'select', [_aureliaFramework.bindable], {
initializer: null
}), _descriptor10 = _applyDecoratedDescriptor(_class2.prototype, 'data', [_aureliaFramework.bindable], {
enumerable: true,
initializer: null
}), _descriptor11 = _applyDecoratedDescriptor(_class2.prototype, 'data', [_aureliaFramework.bindable], {
}), _descriptor11 = _applyDecoratedDescriptor(_class2.prototype, 'route', [_aureliaFramework.bindable], {
enumerable: true,
initializer: null
}), _descriptor12 = _applyDecoratedDescriptor(_class2.prototype, 'route', [_aureliaFramework.bindable], {
}), _descriptor12 = _applyDecoratedDescriptor(_class2.prototype, 'page', [_aureliaFramework.bindable], {
enumerable: true,
initializer: null
}), _applyDecoratedDescriptor(_class2.prototype, 'columnLabels', [_dec5], Object.getOwnPropertyDescriptor(_class2.prototype, 'columnLabels'), _class2.prototype)), _class2)) || _class) || _class) || _class);
Oops, something went wrong.

0 comments on commit f20526d

Please sign in to comment.