ng2-smart-table
Version:
Angular Smart Table
222 lines • 10.2 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { Grid } from './lib/grid';
import { DataSource } from './lib/data-source/data-source';
import { deepExtend } from './lib/helpers';
import { LocalDataSource } from './lib/data-source/local/local.data-source';
var Ng2SmartTableComponent = (function () {
function Ng2SmartTableComponent() {
this.settings = {};
this.rowSelect = new EventEmitter();
this.userRowSelect = new EventEmitter();
this.delete = new EventEmitter();
this.edit = new EventEmitter();
this.create = new EventEmitter();
this.deleteConfirm = new EventEmitter();
this.editConfirm = new EventEmitter();
this.createConfirm = new EventEmitter();
this.rowHover = new EventEmitter();
this.defaultSettings = {
mode: 'inline',
selectMode: 'single',
hideHeader: false,
hideSubHeader: false,
actions: {
columnTitle: 'Actions',
add: true,
edit: true,
delete: true,
position: 'left',
},
filter: {
inputClass: '',
},
edit: {
inputClass: '',
editButtonContent: 'Edit',
saveButtonContent: 'Update',
cancelButtonContent: 'Cancel',
confirmSave: false,
},
add: {
inputClass: '',
addButtonContent: 'Add New',
createButtonContent: 'Create',
cancelButtonContent: 'Cancel',
confirmCreate: false,
},
delete: {
deleteButtonContent: 'Delete',
confirmDelete: false,
},
attr: {
id: '',
class: '',
},
noDataMessage: 'No data found',
columns: {},
pager: {
display: true,
perPage: 10,
},
};
this.isAllSelected = false;
}
Ng2SmartTableComponent.prototype.ngOnChanges = function (changes) {
if (this.grid) {
if (changes['settings']) {
this.grid.setSettings(this.prepareSettings());
}
if (changes['source']) {
this.grid.setSource(this.source);
}
}
else {
this.initGrid();
}
};
Ng2SmartTableComponent.prototype.editRowSelect = function (row) {
if (this.grid.getSetting('selectMode') === 'multi') {
this.onMultipleSelectRow(row);
}
else {
this.onSelectRow(row);
}
};
Ng2SmartTableComponent.prototype.onUserSelectRow = function (row) {
if (this.grid.getSetting('selectMode') !== 'multi') {
this.grid.selectRow(row);
this.emitUserSelectRow(row);
this.emitSelectRow(row);
}
};
Ng2SmartTableComponent.prototype.onRowHover = function (row) {
this.rowHover.emit(row);
};
Ng2SmartTableComponent.prototype.multipleSelectRow = function (row) {
this.grid.multipleSelectRow(row);
this.emitUserSelectRow(row);
this.emitSelectRow(row);
};
Ng2SmartTableComponent.prototype.onSelectAllRows = function ($event) {
this.isAllSelected = !this.isAllSelected;
this.grid.selectAllRows(this.isAllSelected);
this.emitUserSelectRow(null);
this.emitSelectRow(null);
};
Ng2SmartTableComponent.prototype.onSelectRow = function (row) {
this.grid.selectRow(row);
this.emitSelectRow(row);
};
Ng2SmartTableComponent.prototype.onMultipleSelectRow = function (row) {
this.emitSelectRow(row);
};
Ng2SmartTableComponent.prototype.initGrid = function () {
var _this = this;
this.source = this.prepareSource();
this.grid = new Grid(this.source, this.prepareSettings());
this.grid.onSelectRow().subscribe(function (row) { return _this.emitSelectRow(row); });
};
Ng2SmartTableComponent.prototype.prepareSource = function () {
if (this.source instanceof DataSource) {
return this.source;
}
else if (this.source instanceof Array) {
return new LocalDataSource(this.source);
}
return new LocalDataSource();
};
Ng2SmartTableComponent.prototype.prepareSettings = function () {
return deepExtend({}, this.defaultSettings, this.settings);
};
Ng2SmartTableComponent.prototype.changePage = function ($event) {
this.resetAllSelector();
};
Ng2SmartTableComponent.prototype.sort = function ($event) {
this.resetAllSelector();
};
Ng2SmartTableComponent.prototype.filter = function ($event) {
this.resetAllSelector();
};
Ng2SmartTableComponent.prototype.resetAllSelector = function () {
this.isAllSelected = false;
};
Ng2SmartTableComponent.prototype.emitUserSelectRow = function (row) {
var selectedRows = this.grid.getSelectedRows();
this.userRowSelect.emit({
data: row ? row.getData() : null,
isSelected: row ? row.getIsSelected() : null,
source: this.source,
selected: selectedRows && selectedRows.length ? selectedRows.map(function (r) { return r.getData(); }) : [],
});
};
Ng2SmartTableComponent.prototype.emitSelectRow = function (row) {
this.rowSelect.emit({
data: row ? row.getData() : null,
isSelected: row ? row.getIsSelected() : null,
source: this.source,
});
};
return Ng2SmartTableComponent;
}());
__decorate([
Input(),
__metadata("design:type", Object)
], Ng2SmartTableComponent.prototype, "source", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], Ng2SmartTableComponent.prototype, "settings", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], Ng2SmartTableComponent.prototype, "rowSelect", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], Ng2SmartTableComponent.prototype, "userRowSelect", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], Ng2SmartTableComponent.prototype, "delete", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], Ng2SmartTableComponent.prototype, "edit", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], Ng2SmartTableComponent.prototype, "create", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], Ng2SmartTableComponent.prototype, "deleteConfirm", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], Ng2SmartTableComponent.prototype, "editConfirm", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], Ng2SmartTableComponent.prototype, "createConfirm", void 0);
__decorate([
Output(),
__metadata("design:type", EventEmitter)
], Ng2SmartTableComponent.prototype, "rowHover", void 0);
Ng2SmartTableComponent = __decorate([
Component({
selector: 'ng2-smart-table',
styles: [":host /deep/ *{box-sizing:border-box;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif}:host /deep/ button,:host /deep/ input,:host /deep/ optgroup,:host /deep/ select,:host /deep/ textarea{color:inherit;font:inherit;margin:0}:host /deep/ table{font-size:16px;line-height:1.5;color:#606c71;border-collapse:collapse;border-spacing:0;display:table;width:100%;max-width:100%;overflow:auto;word-break:normal;word-break:keep-all}:host /deep/ table tr th{font-weight:700}:host /deep/ table tr section{font-size:.75rem;font-weight:700}:host /deep/ table tr td,:host /deep/ table tr th{font-size:.875rem;margin:0;padding:.5rem 1rem;border:1px solid #e9ebec}:host /deep/ a{color:#1e6bb8;text-decoration:none}:host /deep/ a:hover{text-decoration:underline} /*# sourceMappingURL=ng2-smart-table.component.css.map */ "],
template: "<table [id]=\"grid.getSetting('attr.id')\" [ngClass]=\"grid.getSetting('attr.class')\"><thead ng2-st-thead *ngIf=\"!grid.getSetting('hideHeader') || !grid.getSetting('hideSubHeader')\" [grid]=\"grid\" [isAllSelected]=\"isAllSelected\" [source]=\"source\" [createConfirm]=\"createConfirm\" (create)=\"create.emit($event)\" (selectAllRows)=\"onSelectAllRows($event)\" (sort)=\"sort($event)\" (filter)=\"filter($event)\"></thead><tbody ng2-st-tbody [grid]=\"grid\" [source]=\"source\" [deleteConfirm]=\"deleteConfirm\" [editConfirm]=\"editConfirm\" (edit)=\"edit.emit($event)\" (delete)=\"delete.emit($event)\" (userSelectRow)=\"onUserSelectRow($event)\" (editRowSelect)=\"editRowSelect($event)\" (multipleSelectRow)=\"multipleSelectRow($event)\" (rowHover)=\"onRowHover($event)\"></tbody></table><ng2-smart-table-pager *ngIf=\"grid.getSetting('pager.display')\" [source]=\"source\" [perPage]=\"grid.getSetting('pager.perPage')\" (changePage)=\"changePage($event)\"></ng2-smart-table-pager>",
})
], Ng2SmartTableComponent);
export { Ng2SmartTableComponent };
//# sourceMappingURL=ng2-smart-table.component.js.map