@petkit/ngx-table-descartes
Version:
Angular descartes table component
140 lines (137 loc) • 13 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
import { Component, Input, TemplateRef, } from '@angular/core';
import { groupBy, keys, values, orderBy, isArray, } from 'lodash-es';
import { Observable, of, combineLatest, } from 'rxjs';
export class TableDescartesComponent {
constructor() {
this.data = of([]);
this.order = of(null);
this.table = [];
}
/**
* @return {?}
*/
ngOnInit() {
combineLatest([
this.data,
this.order,
]).subscribe(([data, order]) => {
if (!isArray(data)) {
return;
}
/** @type {?} */
const _order = order || (data[0] && keys(data[0]) || null);
this._order = _order;
if (!isArray(_order)) {
return;
}
/** @type {?} */
const orderData = orderBy(data, _order);
this.orderData = orderData;
/** @type {?} */
const aoaData = this.getAoA(orderData, _order);
this.aoaData = aoaData;
this.table = this.format(aoaData);
});
}
/**
* @param {?} AoO
* @param {?} order
* @return {?}
*/
getAoA(AoO, order) {
return AoO.map(row => order.map(key => row[key]).filter(key => key !== undefined));
}
/**
* @param {?} data
* @return {?}
*/
format(data) {
if (!isArray(data) || data.length === 0) {
return [];
}
if (!isArray(data[0]) || data[0].length === 0) {
return [];
}
/** @type {?} */
const groupDatas = groupBy(data, row => row[0]);
/** @type {?} */
const result = values(groupDatas).map(groupData => {
/** @type {?} */
const _data = [];
/** @type {?} */
const firstCols = [];
/** @type {?} */
let nextResult;
groupData.forEach(([col, ...row]) => {
firstCols.push(col);
_data.push(row);
});
/** @type {?} */
const firstCol = {
content: firstCols[0],
rowspan: firstCols.length,
key: this._order ? this._order[this._order.length - _data[0].length - 1] : null,
};
/** @type {?} */
const next = this.format(_data);
if (next.length) {
next[0].unshift(firstCol);
nextResult = next;
}
else {
const [, ...leaves] = firstCols;
nextResult = [[firstCol], ...leaves.map(() => [])];
}
return nextResult;
}).reduce((a, b) => a.concat(b), []);
return result;
}
}
TableDescartesComponent.decorators = [
{ type: Component, args: [{
selector: 'ngx-table-descartes',
template: `<table class="ngx-table-descartes__table">
<ng-content></ng-content>
<tbody>
<tr *ngFor="let row of table; index as i;">
<td class="ngx-table-descartes__td" *ngFor="let cell of row" [attr.rowspan]="cell.rowspan">
<ng-container *ngIf="tpl">
<ng-container *ngTemplateOutlet="tpl; context: {cell: cell, row: aoaData[i], obj: orderData[i]};"></ng-container>
</ng-container>
<ng-container *ngIf="!tpl">{{cell.content}}</ng-container>
</td>
</tr>
</tbody>
</table>
`,
styles: [`.ngx-table-descartes__table{border-collapse:collapse;width:100%;text-align:center;vertical-align:middle}.ngx-table-descartes__td{border:1px solid #bfbfbf}`]
},] },
];
/** @nocollapse */
TableDescartesComponent.ctorParameters = () => [];
TableDescartesComponent.propDecorators = {
data: [{ type: Input }],
order: [{ type: Input }],
tpl: [{ type: Input }]
};
if (false) {
/** @type {?} */
TableDescartesComponent.prototype.data;
/** @type {?} */
TableDescartesComponent.prototype.order;
/** @type {?} */
TableDescartesComponent.prototype._order;
/** @type {?} */
TableDescartesComponent.prototype.tpl;
/** @type {?} */
TableDescartesComponent.prototype.orderData;
/** @type {?} */
TableDescartesComponent.prototype.aoaData;
/** @type {?} */
TableDescartesComponent.prototype.table;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFibGUtZGVzY2FydGVzLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0BwZXRraXQvbmd4LXRhYmxlLWRlc2NhcnRlcy8iLCJzb3VyY2VzIjpbInRhYmxlLWRlc2NhcnRlcy90YWJsZS1kZXNjYXJ0ZXMuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUVULEtBQUssRUFDTCxXQUFXLEdBQ1osTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUNMLE9BQU8sRUFDUCxJQUFJLEVBQ0osTUFBTSxFQUNOLE9BQU8sRUFDUCxPQUFPLEdBQ1IsTUFBTSxXQUFXLENBQUM7QUFDbkIsT0FBTyxFQUNMLFVBQVUsRUFDVixFQUFFLEVBQ0YsYUFBYSxHQUNkLE1BQU0sTUFBTSxDQUFDO0FBeUJkLE1BQU07SUFjSjtvQkFaOEMsRUFBRSxDQUFDLEVBQUUsQ0FBQztxQkFFZixFQUFFLENBQUMsSUFBSSxDQUFDO3FCQVFYLEVBQUU7S0FHbkM7Ozs7SUFFRCxRQUFRO1FBQ04sYUFBYSxDQUFDO1lBQ1osSUFBSSxDQUFDLElBQUk7WUFDVCxJQUFJLENBQUMsS0FBSztTQUNYLENBQUMsQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDLElBQUksRUFBRSxLQUFLLENBQUMsRUFBRSxFQUFFO1lBQzdCLEVBQUUsQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsQ0FBQztnQkFDbkIsTUFBTSxDQUFDO2FBQ1I7O1lBRUQsTUFBTSxNQUFNLEdBQUcsS0FBSyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxJQUFJLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUMsSUFBSSxJQUFJLENBQUMsQ0FBQztZQUMzRCxJQUFJLENBQUMsTUFBTSxHQUFHLE1BQU0sQ0FBQztZQUNyQixFQUFFLENBQUMsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLENB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QyxRQUFRLENBQUMsRUFBRSxHQUFHLE1BQU0sQ0FBQyxHQUFHLENBQUMsR0FBRyxFQUFFLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQzthQUNwRDtZQUVELE1BQU0sQ0FBQyxVQUFVLENBQUM7U0FDbkIsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUM7UUFFckMsTUFBTSxDQUFDLE1BQU0sQ0FBQztLQUNmOzs7WUE1R0YsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxxQkFBcUI7Z0JBQy9CLFFBQVEsRUFBRTs7Ozs7Ozs7Ozs7Ozs7O0NBZVg7Z0JBQ0MsTUFBTSxFQUFFLENBQUMsNEpBQTRKLENBQUM7YUFDdks7Ozs7O21CQUVFLEtBQUs7b0JBRUwsS0FBSztrQkFHTCxLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBPbkluaXQsXG4gIElucHV0LFxuICBUZW1wbGF0ZVJlZixcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge1xuICBncm91cEJ5LFxuICBrZXlzLFxuICB2YWx1ZXMsXG4gIG9yZGVyQnksXG4gIGlzQXJyYXksXG59IGZyb20gJ2xvZGFzaC1lcyc7XG5pbXBvcnQge1xuICBPYnNlcnZhYmxlLFxuICBvZixcbiAgY29tYmluZUxhdGVzdCxcbn0gZnJvbSAncnhqcyc7XG5pbXBvcnQge1xuICBJVGFibGVEZXNjYXJ0ZXNUYWJsZSxcbn0gZnJvbSAnLi90YWJsZS1kZXNjYXJ0ZXMuaW50ZXJmYWNlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbmd4LXRhYmxlLWRlc2NhcnRlcycsXG4gIHRlbXBsYXRlOiBgPHRhYmxlIGNsYXNzPVwibmd4LXRhYmxlLWRlc2NhcnRlc19fdGFibGVcIj5cbiAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICA8dGJvZHk+XG4gICAgPHRyICpuZ0Zvcj1cImxldCByb3cgb2YgdGFibGU7IGluZGV4IGFzIGk7XCI+XG4gICAgICA8dGQgY2xhc3M9XCJuZ3gtdGFibGUtZGVzY2FydGVzX190ZFwiICpuZ0Zvcj1cImxldCBjZWxsIG9mIHJvd1wiIFthdHRyLnJvd3NwYW5dPVwiY2VsbC5yb3dzcGFuXCI+XG4gICAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJ0cGxcIj5cbiAgICAgICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwidHBsOyBjb250ZXh0OiB7Y2VsbDogY2VsbCwgcm93OiBhb2FEYXRhW2ldLCBvYmo6IG9yZGVyRGF0YVtpXX07XCI+PC9uZy1jb250YWluZXI+XG4gICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiIXRwbFwiPnt7Y2VsbC5jb250ZW50fX08L25nLWNvbnRhaW5lcj5cbiAgICAgIDwvdGQ+XG4gICAgPC90cj5cbiAgPC90Ym9keT5cbjwvdGFibGU+XG5cblxuYCxcbiAgc3R5bGVzOiBbYC5uZ3gtdGFibGUtZGVzY2FydGVzX190YWJsZXtib3JkZXItY29sbGFwc2U6Y29sbGFwc2U7d2lkdGg6MTAwJTt0ZXh0LWFsaWduOmNlbnRlcjt2ZXJ0aWNhbC1hbGlnbjptaWRkbGV9Lm5neC10YWJsZS1kZXNjYXJ0ZXNfX3Rke2JvcmRlcjoxcHggc29saWQgI2JmYmZiZn1gXVxufSlcbmV4cG9ydCBjbGFzcyBUYWJsZURlc2NhcnRlc0NvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIEBJbnB1dCgpXG4gIGRhdGE6IE9ic2VydmFibGU8e1trZXk6IHN0cmluZ106IHN0cmluZ31bXT4gPSBvZihbXSk7XG4gIEBJbnB1dCgpXG4gIG9yZGVyOiBPYnNlcnZhYmxlPHN0cmluZ1tdIHwgbnVsbD4gPSBvZihudWxsKTtcbiAgcHJpdmF0ZSBfb3JkZXI6IHN0cmluZ1tdIHwgbnVsbDtcbiAgQElucHV0KClcbiAgdHBsOiBUZW1wbGF0ZVJlZjxhbnk+O1xuXG5cbiAgb3JkZXJEYXRhOiB7W2tleTogc3RyaW5nXTogc3RyaW5nfVtdW107XG4gIGFvYURhdGE6IHN0cmluZ1tdW107XG4gIHRhYmxlOiBJVGFibGVEZXNjYXJ0ZXNUYWJsZVtdW10gPSBbXTtcblxuICBjb25zdHJ1Y3RvcigpIHtcbiAgfVxuXG4gIG5nT25Jbml0KCkge1xuICAgIGNvbWJpbmVMYXRlc3QoW1xuICAgICAgdGhpcy5kYXRhLFxuICAgICAgdGhpcy5vcmRlcixcbiAgICBdKS5zdWJzY3JpYmUoKFtkYXRhLCBvcmRlcl0pID0+IHtcbiAgICAgIGlmICghaXNBcnJheShkYXRhKSkge1xuICAgICAgICByZXR1cm47XG4gICAgICB9XG5cbiAgICAgIGNvbnN0IF9vcmRlciA9IG9yZGVyIHx8IChkYXRhWzBdICYmIGtleXMoZGF0YVswXSkgfHwgbnVsbCk7XG4gICAgICB0aGlzLl9vcmRlciA9IF9vcmRlcjtcbiAgICAgIGlmICghaXNBcnJheShfb3JkZXIpKSB7XG4gICAgICAgIHJldHVybjtcbiAgICAgIH1cblxuICAgICAgY29uc3Qgb3JkZXJEYXRhID0gb3JkZXJCeShkYXRhLCBfb3JkZXIpO1xuICAgICAgdGhpcy5vcmRlckRhdGEgPSBvcmRlckRhdGE7XG5cbiAgICAgIGNvbnN0IGFvYURhdGEgPSB0aGlzLmdldEFvQShvcmRlckRhdGEsIF9vcmRlcik7XG4gICAgICB0aGlzLmFvYURhdGEgPSBhb2FEYXRhO1xuXG4gICAgICB0aGlzLnRhYmxlID0gdGhpcy5mb3JtYXQoYW9hRGF0YSk7XG4gICAgfSk7XG5cbiAgfVxuXG4gIGdldEFvQShBb086IG9iamVjdFtdLCBvcmRlcjogYW55W10pOiBzdHJpbmdbXVtdIHtcbiAgICByZXR1cm4gQW9PLm1hcChyb3cgPT4gb3JkZXIubWFwKGtleSA9PiByb3dba2V5XSkuZmlsdGVyKGtleSA9PiBrZXkgIT09IHVuZGVmaW5lZCkpO1xuICB9XG5cbiAgZm9ybWF0KGRhdGE6IGFueVtdW10pOiBhbnlbXVtdIHtcbiAgICBpZiAoIWlzQXJyYXkoZGF0YSkgfHwgZGF0YS5sZW5ndGggPT09IDApIHtcbiAgICAgIHJldHVybiBbXTtcbiAgICB9XG5cbiAgICBpZiAoIWlzQXJyYXkoZGF0YVswXSkgfHwgZGF0YVswXS5sZW5ndGggPT09IDApIHtcbiAgICAgIHJldHVybiBbXTtcbiAgICB9XG5cbiAgICBjb25zdCBncm91cERhdGFzID0gZ3JvdXBCeShkYXRhLCByb3cgPT4gcm93WzBdKTtcblxuICAgIGNvbnN0IHJlc3VsdCA9IHZhbHVlcyhncm91cERhdGFzKS5tYXAoZ3JvdXBEYXRhID0+IHtcbiAgICAgIGNvbnN0IF9kYXRhOiBhbnlbXSA9IFtdO1xuICAgICAgY29uc3QgZmlyc3RDb2xzOiBhbnlbXSA9IFtdO1xuICAgICAgbGV0IG5leHRSZXN1bHQ7XG5cbiAgICAgIGdyb3VwRGF0YS5mb3JFYWNoKChbY29sLCAuLi5yb3ddKSA9PiB7XG4gICAgICAgIGZpcnN0Q29scy5wdXNoKGNvbCk7XG4gICAgICAgIF9kYXRhLnB1c2gocm93KTtcbiAgICAgIH0pO1xuXG4gICAgICBjb25zdCBmaXJzdENvbCA9IHtcbiAgICAgICAgY29udGVudDogZmlyc3RDb2xzWzBdLFxuICAgICAgICByb3dzcGFuOiBmaXJzdENvbHMubGVuZ3RoLFxuICAgICAgICBrZXk6IHRoaXMuX29yZGVyID8gdGhpcy5fb3JkZXJbdGhpcy5fb3JkZXIubGVuZ3RoIC0gX2RhdGFbMF0ubGVuZ3RoIC0gMV0gOiBudWxsLFxuICAgICAgfTtcblxuICAgICAgY29uc3QgbmV4dCA9IHRoaXMuZm9ybWF0KF9kYXRhKTtcblxuICAgICAgaWYgKG5leHQubGVuZ3RoKSB7XG4gICAgICAgIG5leHRbMF0udW5zaGlmdChmaXJzdENvbCk7XG4gICAgICAgIG5leHRSZXN1bHQgPSBuZXh0O1xuICAgICAgfSBlbHNlIHtcbiAgICAgICAgY29uc3QgWywgLi4ubGVhdmVzXSA9IGZpcnN0Q29scztcbiAgICAgICAgbmV4dFJlc3VsdCA9IFtbZmlyc3RDb2xdLCAuLi5sZWF2ZXMubWFwKCgpID0+IFtdKV07XG4gICAgICB9XG5cbiAgICAgIHJldHVybiBuZXh0UmVzdWx0O1xuICAgIH0pLnJlZHVjZSgoYSwgYikgPT4gYS5jb25jYXQoYiksIFtdKTtcblxuICAgIHJldHVybiByZXN1bHQ7XG4gIH1cbn1cbiJdfQ==