Permalink
Browse files

feat(project): add support for offline mode

  • Loading branch information...
jeremyvergnas committed Jan 9, 2017
1 parent 6785065 commit c7c4fea6e1579e1cba2d5e535d390c46c9cc8410
Showing with 46 additions and 15 deletions.
  1. +7 −7 src/bootstrap/datatable.html
  2. +39 −8 src/datatable.js
@@ -3,7 +3,7 @@
<require from="../convert-manager"></require>
<!-- Search bar -->
<div if.bind="searchable !== null" class="row">
<div if.bind="searchable !== null && !offlineMode" class="row">
<div class="col-xs-2">
<select value.bind="searchColumn" class="form-control" id="columnSelect">
<option
@@ -35,10 +35,10 @@
<!-- Labels -->
<th click.delegate="doSort(columnLabel)" repeat.for="columnLabel of columnLabels">
<!-- Just show the label -->
<span if.bind="sortable === null || columnLabel.nested" t="${columnLabel.label}">${columnLabel.label}</span>
<span if.bind="sortable === null || columnLabel.nested || offlineMode" t="${columnLabel.label}">${columnLabel.label}</span>
<!-- Show label and make it sortable (click) -->
<a if.bind="sortable !== null && !columnLabel.nested">
<a if.bind="sortable !== null && !columnLabel.nested && !offlineMode">
<span t="${columnLabel.label}">${columnLabel.label}</span>
<i class="fa fa-${criteria.sort[columnLabel.column] ? (criteria.sort[columnLabel.column] === 'desc' ? 'caret-down' : 'caret-up') : 'sort'}">
</i>
@@ -67,15 +67,15 @@
<!-- Actions -->
<td style="white-space: nowrap; width: 1px;" show.bind="showActions() && hasVisibleActions">
<button if.bind="edit !== null" class="btn btn-sm btn-white" click.delegate="doEdit(row)">
<button if.bind="edit !== null" class="btn btn-sm btn-white" click.delegate="doEdit(row, $index)">
<i class="fa fa-pencil"></i>
</button>
<button if.bind="destroy !== null" class="btn btn-sm btn-danger" click.delegate="doDestroy(row)">
<button if.bind="destroy !== null" class="btn btn-sm btn-danger" click.delegate="doDestroy(row, $index)">
<i class="fa fa-trash"></i>
</button>
<button repeat.for="action of actions" if.bind="checkVisibility(action, row)" t="[title]${action.title}" title.bind="action.title || ''" disabled.bind="checkDisabled(action, row)" class="btn btn-sm btn-${action.type || 'default'}" click.trigger="doCustomAction(action, row)">
<button repeat.for="action of actions" if.bind="checkVisibility(action, row)" t="[title]${action.title}" title.bind="action.title || ''" disabled.bind="checkDisabled(action, row)" class="btn btn-sm btn-${action.type || 'default'}" click.trigger="doCustomAction(action, row, $parent.$index)">
<i if.bind="action.icon" class="fa fa-${action.icon}"></i>
<span if.bind="!action.icon && action.title" t="${action.title}">${action.title}</span>
</button>
@@ -95,7 +95,7 @@
<tfoot if.bind="footer" innerhtml.bind="footer"></tfoot>
</table>
<div show.bind="pages > 1">
<div if.bind="!offlineMode" show.bind="pages > 1">
<pager
resource.bind="repository"
criteria.bind="criteria.where"
@@ -38,6 +38,7 @@ export class DataTable {
loading = false;
hasVisibleActions = false;
offlineMode = false;
constructor(router, element, entityManager) {
this.router = router;
@@ -78,6 +79,10 @@ export class DataTable {
}
load() {
if (this.offlineMode || (!this.repository && this.data)) {
return this.offlineMode = true;
}
this.loading = true;
this.criteria.skip = (this.page * this.limit) - this.limit;
@@ -103,18 +108,32 @@ export class DataTable {
}
gatherData(criteria = {}) {
if (this.offlineMode || (!this.repository && this.data)) {
this.offlineMode = true;
return this.data;
}
return this.repository.find(criteria, true).catch(error => {
this.triggerEvent('exception', {on: 'load', error: error});
});
}
populateEntity(row) {
return this.repository.getPopulatedEntity(row);
if (!this.offlineMode) {
return this.repository.getPopulatedEntity(row);
}
}
doDestroy(row) {
doDestroy(row, index) {
if (typeof this.destroy === 'function') {
return this.destroy(row);
return this.destroy(row, index);
}
if (this.offlineMode) {
this.data.splice(index, 1);
return this.triggerEvent('destroyed', row);
}
this.populateEntity(row).destroy()
@@ -127,19 +146,19 @@ export class DataTable {
});
}
doEdit(row) {
doEdit(row, index) {
if (typeof this.edit === 'function') {
return this.edit(row);
return this.edit(row, index);
}
}
doCustomAction(action, row) {
doCustomAction(action, row, index) {
if (!action) {
return false;
}
if (typeof action.action === 'function') {
return action.action(row);
return action.action(row, index);
}
}
@@ -176,10 +195,18 @@ export class DataTable {
}
showActions() {
return this.destroy !== null || this.edit !== null || this.actions.length > 0;
let show = this.destroy !== null || this.edit !== null || this.actions.length > 0;
this.hasVisibleActions = show ? true : false;
return show;
}
doSort(columnLabel) {
if (this.offlineMode) {
return;
}
let column = columnLabel.column;
if (this.sortable === null || !this.isSortable(column)) {
@@ -204,6 +231,10 @@ export class DataTable {
}
doSearch() {
if (this.offlineMode) {
return;
}
if (!this.ready) {
return;
}

0 comments on commit c7c4fea

Please sign in to comment.