ng2-stable-nxtc
Version:
Angular Smart Table neXtCode Version
236 lines • 10 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';
let Ng2SmartTableComponent = class Ng2SmartTableComponent {
constructor() {
this.settings = {};
this.rowSelect = new EventEmitter();
this.userRowSelect = new EventEmitter();
this.delete = new EventEmitter();
this.edit = new EventEmitter();
this.create = new EventEmitter();
this.custom = 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,
custom: [],
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,
},
rowClassFunction: () => ""
};
this.isAllSelected = false;
}
ngOnChanges(changes) {
if (this.grid) {
if (changes['settings']) {
this.grid.setSettings(this.prepareSettings());
}
if (changes['source']) {
this.source = this.prepareSource();
this.grid.setSource(this.source);
}
}
else {
this.initGrid();
}
this.tableId = this.grid.getSetting('attr.id');
this.tableClass = this.grid.getSetting('attr.class');
this.isHideHeader = this.grid.getSetting('hideHeader');
this.isHideSubHeader = this.grid.getSetting('hideSubHeader');
this.isPagerDisplay = this.grid.getSetting('pager.display');
this.isPagerDisplay = this.grid.getSetting('pager.display');
this.perPageSelect = this.grid.getSetting('pager.perPageSelect');
this.rowClassFunction = this.grid.getSetting('rowClassFunction');
}
editRowSelect(row) {
if (this.grid.getSetting('selectMode') === 'multi') {
this.onMultipleSelectRow(row);
}
else {
this.onSelectRow(row);
}
}
onUserSelectRow(row) {
if (this.grid.getSetting('selectMode') !== 'multi') {
this.grid.selectRow(row);
this.emitUserSelectRow(row);
this.emitSelectRow(row);
}
}
onRowHover(row) {
this.rowHover.emit(row);
}
multipleSelectRow(row) {
this.grid.multipleSelectRow(row);
this.emitUserSelectRow(row);
this.emitSelectRow(row);
}
onSelectAllRows($event) {
this.isAllSelected = !this.isAllSelected;
this.grid.selectAllRows(this.isAllSelected);
this.emitUserSelectRow(null);
this.emitSelectRow(null);
}
onSelectRow(row) {
this.grid.selectRow(row);
this.emitSelectRow(row);
}
onMultipleSelectRow(row) {
this.emitSelectRow(row);
}
initGrid() {
this.source = this.prepareSource();
this.grid = new Grid(this.source, this.prepareSettings());
this.grid.onSelectRow().subscribe((row) => this.emitSelectRow(row));
}
prepareSource() {
if (this.source instanceof DataSource) {
return this.source;
}
else if (this.source instanceof Array) {
return new LocalDataSource(this.source);
}
return new LocalDataSource();
}
prepareSettings() {
return deepExtend({}, this.defaultSettings, this.settings);
}
changePage($event) {
this.resetAllSelector();
}
sort($event) {
this.resetAllSelector();
}
filter($event) {
this.resetAllSelector();
}
resetAllSelector() {
this.isAllSelected = false;
}
emitUserSelectRow(row) {
const 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((r) => r.getData()) : [],
});
}
emitSelectRow(row) {
this.rowSelect.emit({
data: row ? row.getData() : null,
isSelected: row ? row.getIsSelected() : null,
source: this.source,
});
}
};
__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, "custom", 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{font-size:1rem}:host /deep/ *{box-sizing:border-box}:host /deep/ button,:host /deep/ input,:host /deep/ optgroup,:host /deep/ select,:host /deep/ textarea{color:inherit;font:inherit;margin:0}:host /deep/ table{line-height:1.5em;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:.75em;font-weight:700}:host /deep/ table tr td,:host /deep/ table tr th{font-size:.875em;margin:0;padding:.5em 1em}: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]=\"tableId\" [ngClass]=\"tableClass\"><thead ng2-st-thead *ngIf=\"!isHideHeader || !isHideSubHeader\" [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\" [rowClassFunction]=\"rowClassFunction\" (edit)=\"edit.emit($event)\" (delete)=\"delete.emit($event)\" (custom)=\"custom.emit($event)\" (userSelectRow)=\"onUserSelectRow($event)\" (editRowSelect)=\"editRowSelect($event)\" (multipleSelectRow)=\"multipleSelectRow($event)\" (rowHover)=\"onRowHover($event)\"></tbody></table><ng2-smart-table-pager *ngIf=\"isPagerDisplay\" [source]=\"source\" [perPageSelect]=\"perPageSelect\" (changePage)=\"changePage($event)\"></ng2-smart-table-pager>",
})
], Ng2SmartTableComponent);
export { Ng2SmartTableComponent };
//# sourceMappingURL=ng2-smart-table.component.js.map