angular4-material-table
Version:
Angular 4 table based on @angular/cdk table structure, to allow row insertion, edition, validation and deletion.
188 lines (179 loc) • 7.37 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@angular/cdk/collections'), require('rxjs/BehaviorSubject'), require('rxjs/Subject'), require('lodash.clonedeep')) :
typeof define === 'function' && define.amd ? define(['exports', '@angular/common', '@angular/core', '@angular/forms', '@angular/cdk/collections', 'rxjs/BehaviorSubject', 'rxjs/Subject', 'lodash.clonedeep'], factory) :
(factory((global.ng = global.ng || {}, global.ng['angular-material-table'] = {}),global.ng.common,global.ng.core,global.ng.forms,global.ng.cdk.collections,global.Rx,global.Rx,global.index));
}(this, (function (exports,common,core,forms,collections,BehaviorSubject,Subject,cloneDeep) { 'use strict';
cloneDeep = cloneDeep && cloneDeep.hasOwnProperty('default') ? cloneDeep['default'] : cloneDeep;
var AppModule = (function () {
function AppModule() {
}
return AppModule;
}());
AppModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [],
imports: [
common.CommonModule
],
exports: []
},] },
];
/** @nocollapse */
AppModule.ctorParameters = function () { return []; };
var DefaultValidatorService = (function () {
function DefaultValidatorService() {
}
DefaultValidatorService.prototype.getRowValidator = function () {
return new forms.FormGroup({});
};
return DefaultValidatorService;
}());
DefaultValidatorService.decorators = [
{ type: core.Injectable },
];
/** @nocollapse */
DefaultValidatorService.ctorParameters = function () { return []; };
var TableElement = (function () {
function TableElement(init) {
Object.assign(this, init);
}
TableElement.prototype.delete = function () {
this.source.delete(this.id);
};
TableElement.prototype.confirmCreate = function () {
this.editing = false;
this.source.confirmCreate(this);
};
TableElement.prototype.confirmEditCreate = function () {
this.originalData = undefined;
this.editing = false;
if (this.id == -1)
this.source.confirmCreate(this);
else
this.source.confirmEdit(this);
};
TableElement.prototype.startEdit = function () {
this.originalData = cloneDeep(this.currentData);
this.editing = true;
};
TableElement.prototype.cancel = function () {
if (this.id == -1 || !this.editing)
this.delete();
else {
this.currentData = this.originalData;
this.editing = false;
}
};
return TableElement;
}());
var __extends = (undefined && undefined.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var TableDataSource = (function (_super) {
__extends(TableDataSource, _super);
function TableDataSource(data, dataType, validatorService) {
var _this = _super.call(this) || this;
_this.validatorService = validatorService;
if (!validatorService)
_this.validatorService = new DefaultValidatorService();
if (dataType) {
_this.dataConstructor = dataType;
}
else {
if (data && data.length > 0)
_this.dataKeys = Object.keys(data[0]);
else
throw new Error('You must define either a non empty array, or an associated class to build the table.');
}
_this.rowsSubject = new BehaviorSubject.BehaviorSubject(_this.getRowsFromData(data));
_this.datasourceSubject = new Subject.Subject();
_this.rowsSubject.subscribe(function (rows) { return _this.updateDatasource(rows); });
return _this;
}
TableDataSource.prototype.confirmEdit = function (row) {
if (row.validator.valid) {
var source = this.rowsSubject.getValue();
source[row.id] = row;
this.rowsSubject.next(source);
}
};
TableDataSource.prototype.confirmCreate = function (row) {
if (row.validator.valid) {
var source = this.rowsSubject.getValue();
row.id = source.length - 1;
this.rowsSubject.next(source);
}
};
TableDataSource.prototype.createNew = function () {
var source = this.rowsSubject.getValue();
if (source.length == 0 || source[source.length - 1].id > -1) {
source.push(new TableElement({
id: -1,
editing: true,
currentData: this.createNewObject(),
source: this,
validator: this.validatorService.getRowValidator(),
}));
this.rowsSubject.next(source);
}
};
TableDataSource.prototype.delete = function (id) {
var source = this.rowsSubject.getValue();
var index = id == -1
? (source.length - 1)
: id;
source.splice(index, 1);
this.rowsSubject.next(source);
};
TableDataSource.prototype.getDataFromRows = function (rows) {
return rows
.filter(function (row) { return row.id != -1; })
.map(function (row) {
return row.originalData ? row.originalData : row.currentData;
});
};
TableDataSource.prototype.updateDatasource = function (rows) {
this.datasourceSubject.next(this.getDataFromRows(rows));
};
TableDataSource.prototype.getRowsFromData = function (data) {
var _this = this;
return data.map(function (data, index) {
return new TableElement({
id: index,
editing: false,
currentData: data,
source: _this,
validator: _this.validatorService.getRowValidator(),
});
});
};
TableDataSource.prototype.createNewObject = function () {
if (this.dataConstructor)
return new this.dataConstructor();
else {
return this.dataKeys.reduce(function (obj, key) {
obj[key] = undefined;
return obj;
}, {});
}
};
/** Connect function called by the table to retrieve one stream containing the data to render. */
TableDataSource.prototype.connect = function () {
return this.rowsSubject.asObservable();
};
TableDataSource.prototype.disconnect = function () { };
return TableDataSource;
}(collections.DataSource));
exports.AppModule = AppModule;
exports.DefaultValidatorService = DefaultValidatorService;
exports.TableDataSource = TableDataSource;
exports.TableElement = TableElement;
Object.defineProperty(exports, '__esModule', { value: true });
})));