angular4-material-table
Version:
Angular 4 table based on @angular/cdk table structure, to allow row insertion, edition, validation and deletion.
162 lines • 6.76 kB
JavaScript
var __extends = (this && this.__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 __());
};
})();
import { DataSource } from '@angular/cdk/collections';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Subject } from 'rxjs/Subject';
import { TableElement } from './table-element';
import { DefaultValidatorService } from './default-validator.service';
var TableDataSource = /** @class */ (function (_super) {
__extends(TableDataSource, _super);
/**
* Creates a new TableDataSource instance, that can be used as datasource of `@angular/cdk` data-table.
* @param data Array containing the initial values for the TableDataSource. If not specified, then `dataType` must be specified.
* @param dataType Type of data contained by the Table. If not specified, then `data` with at least one element must be specified.
* @param validatorService Service that create instances of the FormGroup used to validate row fields.
*/
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(_this.getRowsFromData(data));
_this.datasourceSubject = new Subject();
return _this;
}
/**
* Confirm edition of the row. Save changes and disable editing.
* If validation active and row data is invalid, it doesn't confirm editing neither disable editing.
* @param row Row to be edited.
*/
TableDataSource.prototype.confirmEdit = function (row) {
if (row.validator.valid) {
var source = this.rowsSubject.getValue();
source[row.id] = row;
this.rowsSubject.next(source);
row.editing = false;
row.validator.disable();
this.updateDatasource(source);
}
};
/**
* Confirm creation of the row. Save changes and disable editing.
* If validation active and row data is invalid, it doesn't confirm creation neither disable editing.
* @param row Row to be confirmed.
*/
TableDataSource.prototype.confirmCreate = function (row) {
if (row.validator.valid) {
var source = this.rowsSubject.getValue();
row.id = source.length - 1;
this.rowsSubject.next(source);
row.editing = false;
row.validator.disable();
this.updateDatasource(source);
}
};
/**
* Start the creation of a new element, pushing an empty-data row in the table.
*/
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);
}
};
/**
* Delete the row with the index specified.
*/
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);
if (id != -1)
this.updateDatasource(source);
};
/**
* Get the data from the rows.
* @param rows Rows to extract the data.
*/
TableDataSource.prototype.getDataFromRows = function (rows) {
return rows
.filter(function (row) { return row.id != -1; })
.map(function (row) {
return row.originalData ? row.originalData : row.currentData;
});
};
/**
* Update the datasource with the data contained in the specified rows.
* @param rows Rows that contains the datasource's new data.
*/
TableDataSource.prototype.updateDatasource = function (rows) {
this.datasourceSubject.next(this.getDataFromRows(rows));
};
/**
* From an array of data, it returns rows containing the original data.
* @param data Data from which create the rows.
*/
TableDataSource.prototype.getRowsFromData = function (data) {
var _this = this;
return data.map(function (data, index) {
var validator = _this.validatorService.getRowValidator();
validator.disable();
return new TableElement({
id: index,
editing: false,
currentData: data,
source: _this,
validator: validator,
});
});
};
/**
* Create a new object with identical structure than the table source data.
* It uses the object's type contructor if available, otherwise it creates
* an object with the same keys of the first element contained in the original
* datasource (used in the constructor).
*/
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;
}(DataSource));
export { TableDataSource };
//# sourceMappingURL=table-data-source.js.map