Skip to content
Permalink
Browse files

feat(project): add loading indicator

  • Loading branch information...
VMBindraban authored and doktordirk committed Nov 4, 2016
1 parent f61c3d2 commit 4e53d741a95783e99b21236bb7dc9ed5bd2ff418
Showing with 31 additions and 15 deletions.
  1. +8 −3 src/bootstrap/datatable.html
  2. +23 −12 src/datatable.js
@@ -44,19 +44,24 @@
</th>

<!-- Actions -->
<th if.bind="destroy != null || edit != null || actions.length > 0" t="Actions">Actions</th>
<th if.bind="showActions()" t="Actions">Actions</th>
</tr>
</thead>
<tbody>
<tr repeat.for="row of data">

<tr if.bind="loadingIndicator && loading">
<td colspan="${columnLabels.length + (showActions() ? 1 : 0)}" innerhtml.bind="loadingIndicator"></td>
</tr>

<tr repeat.for="row of data" if.bind="!loading">

<!-- Columns -->
<td repeat.for="columnLabel of columnLabels">
<a click.delegate="selected(row)" innerhtml.bind="displayValue(row, columnLabel.column) | convertManager: columnLabel.converter"></a>
</td>

<!-- Actions -->
<td style="white-space: nowrap; width: 1px;" if.bind="destroy !== null || edit !== null || actions.length > 0">
<td style="white-space: nowrap; width: 1px;" if.bind="showActions()">
<button if.bind="edit !== null" class="btn btn-sm btn-white" click.delegate="doEdit(row)">
<i class="fa fa-pencil"></i>
</button>
@@ -16,24 +16,27 @@ export class DataTable {
@bindable({defaultBindingMode: bindingMode.twoWay})
where = {};

@bindable limit = 30;
@bindable columns = '';
@bindable searchColumn = 'name';
@bindable actions = [];
@bindable searchable = null; // Show the search field? (Optional attribute).
@bindable sortable = null; // Columns can be sorted? (Optional attribute).
@bindable edit = null; // Rows are editable? (Optional attribute).
@bindable destroy = null; // Rows are removable? (Optional attribute).
@bindable page = 1; // Current page.
@bindable populate = false; // Which columns to populate. True for all, string for specific.
@bindable select; // User provided callback, called upon clicking on a row.
@bindable limit = 30;
@bindable columns = '';
@bindable searchColumn = 'name';
@bindable actions = [];
@bindable searchable = null; // Show the search field? (Optional attribute).
@bindable sortable = null; // Columns can be sorted? (Optional attribute).
@bindable edit = null; // Rows are editable? (Optional attribute).
@bindable destroy = null; // Rows are removable? (Optional attribute).
@bindable page = 1; // Current page.
@bindable loadingIndicator = '<center>Loading...</center>';
@bindable populate = false; // Which columns to populate. True for all, string for specific.
@bindable select; // User provided callback, called upon clicking on a row.
@bindable repository;
@bindable resource;
@bindable data;
@bindable route;
@bindable pages;
@bindable footer;

loading = false;

constructor(router, element, entityManager) {
this.router = router;
this.element = element;
@@ -73,6 +76,8 @@ export class DataTable {
}

load() {
this.loading = true;

this.criteria.skip = (this.page * this.limit) - this.limit;
this.criteria.limit = this.limit;

@@ -84,9 +89,11 @@ export class DataTable {

this.repository.find(this.criteria, true)
.then(result => {
this.data = result;
this.loading = false;
this.data = result;
})
.catch(error => {
this.loading = false;
this.triggerEvent('exception', {on: 'load', error: error});
});
}
@@ -136,6 +143,10 @@ export class DataTable {
return false;
}

showActions() {
return this.destroy !== null || this.edit !== null || this.actions.length > 0;
}

doSort(columnLabel) {
let column = columnLabel.column;

0 comments on commit 4e53d74

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