UNPKG

ngx-material-dynamic-table

Version:

Componente angular dinâmico que ajuda a criar uma tabela utilizando o Angular material, de maneira fácil e rápida.

125 lines 14 kB
import { __decorate } from "tslib"; import { Component, ViewChild, EventEmitter, Output, Input, } from '@angular/core'; import { MatTableDataSource, MatTable } from '@angular/material/table'; import { MatPaginator } from '@angular/material/paginator'; import { MatSort } from '@angular/material/sort'; export const buttonsConfig = { read: { icon: 'search', name: 'read', tooltip: 'Visualizar', }, update: { icon: 'edit', name: 'edit', tooltip: 'Editar', }, delete: { icon: 'delete', name: 'delete', tooltip: 'Excluir', }, download: { icon: 'arrow_downward', name: 'download', tooltip: 'Download', }, }; let NgxMaterialDynamicTableComponent = class NgxMaterialDynamicTableComponent { constructor() { this.displayedColumns = []; this.filter = true; this.buttonAddNewItem = false; this.buttonExport = false; this.buttonsConfig = buttonsConfig; this.sendClick = new EventEmitter(); this.loading = true; this.action = false; this.displayedColumnsObject = []; } ngOnChanges() { if (this.displayedColumns) { this.addActionColumn(); } if (this.dataSource) { this.createDatasource(); } } createDatasource() { this.dados = new MatTableDataSource(this.dataSource); this.dados.paginator = this.paginator; this.dados.sort = this.sort; this.showTable(); } createColumns() { this.displayedColumnsObject = this.displayedColumns.map((col) => typeof col.column === 'number' ? col.column.toString() : col.column); this.showTable(); } showTable() { if (this.dados && this.displayedColumns && this.displayedColumnsObject) { this.loading = false; } } sendAction(action, row, index) { const content = { action, row, index }; this.sendClick.emit(content); } addActionColumn() { if (this.actions) { const columnAction = { column: 'actions', title: 'Ações' }; this.displayedColumns = [...this.displayedColumns, columnAction]; } this.createColumns(); } applyFilter(filterValue) { this.dados.filter = filterValue.trim().toLowerCase(); } }; __decorate([ Input() ], NgxMaterialDynamicTableComponent.prototype, "dataSource", void 0); __decorate([ Input() ], NgxMaterialDynamicTableComponent.prototype, "displayedColumns", void 0); __decorate([ Input() ], NgxMaterialDynamicTableComponent.prototype, "actions", void 0); __decorate([ Input() ], NgxMaterialDynamicTableComponent.prototype, "configEditRow", void 0); __decorate([ Input() ], NgxMaterialDynamicTableComponent.prototype, "filter", void 0); __decorate([ Input() ], NgxMaterialDynamicTableComponent.prototype, "buttonAddNewItem", void 0); __decorate([ Input() ], NgxMaterialDynamicTableComponent.prototype, "buttonExport", void 0); __decorate([ Input() ], NgxMaterialDynamicTableComponent.prototype, "componentName", void 0); __decorate([ Input() ], NgxMaterialDynamicTableComponent.prototype, "buttonsConfig", void 0); __decorate([ Output() ], NgxMaterialDynamicTableComponent.prototype, "sendClick", void 0); __decorate([ ViewChild(MatTable, { static: true }) ], NgxMaterialDynamicTableComponent.prototype, "table", void 0); __decorate([ ViewChild(MatPaginator, { static: true }) ], NgxMaterialDynamicTableComponent.prototype, "paginator", void 0); __decorate([ ViewChild(MatSort, { static: true }) ], NgxMaterialDynamicTableComponent.prototype, "sort", void 0); NgxMaterialDynamicTableComponent = __decorate([ Component({ selector: 'ngx-material-dynamic-table', template: "\r\n\r\n <mat-form-field class=\"pesquisa\" *ngIf=\"filter\">\r\n <span matPrefix>\r\n <i class=\"material-icons\">search</i>\r\n <input type=\"text\" matInput (keyup)=\"applyFilter($event.target.value)\" placelholder=\"Filtrar\">\r\n </span>\r\n </mat-form-field>\r\n <mat-table #table [dataSource]=\"dados\" [hidden]=\"loading || !dados || !displayedColumns || !displayedColumnsObject\">\r\n\r\n <ng-container *ngFor=\"let disCol of displayedColumns; let colIndex = index\" matColumnDef=\"{{disCol.column}}\">\r\n <th mat-header-cell *matHeaderCellDef> {{disCol.title}} </th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <span *ngIf=\"disCol.column !== 'actions'; else blockActions\">\r\n {{element[disCol.column]}}\r\n </span>\r\n <ng-template #blockActions>\r\n <div class=\"actionsList\">\r\n <span *ngFor=\"let action of actions\">\r\n <a (click)=\"sendAction(action)\" matTooltip=\"{{buttonsConfig[action.column].tooltip}}\">\r\n <i class=\"material-icons\">{{buttonsConfig[action.column].icon}}</i>\r\n </a>\r\n </span>\r\n </div>\r\n </ng-template>\r\n </td>\r\n </ng-container>\r\n\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumnsObject\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: displayedColumnsObject;\"></tr>\r\n </mat-table>\r\n <div *ngIf=\"dados && dados.filteredData && dados.filteredData.length === 0\">\r\n <p>Nenhum registro encontrado</p>\r\n </div>\r\n <mat-paginator [hidden]=\"dados === undefined\" [pageSizeOptions]=\"[5,10,20]\" showFirstLastButtons></mat-paginator>\r\n", styles: ["[hidden]{display:none}.actionsList{display:flex;align-items:center}.actionsList span+span{margin-left:10px}.mat-table{width:100%;display:table}.mat-table tr.mat-header-row{height:auto}.mat-form-field,.pesquisa{width:100%}"] }) ], NgxMaterialDynamicTableComponent); export { NgxMaterialDynamicTableComponent }; //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LW1hdGVyaWFsLWR5bmFtaWMtdGFibGUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vbmd4LW1hdGVyaWFsLWR5bmFtaWMtdGFibGUvIiwic291cmNlcyI6WyJsaWIvbmd4LW1hdGVyaWFsLWR5bmFtaWMtdGFibGUuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUNULFNBQVMsRUFDVCxZQUFZLEVBQ1osTUFBTSxFQUNOLEtBQUssR0FFTixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsa0JBQWtCLEVBQUUsUUFBUSxFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFDdkUsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBQzNELE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUNqRCxNQUFNLENBQUMsTUFBTSxhQUFhLEdBQUc7SUFDM0IsSUFBSSxFQUFFO1FBQ0osSUFBSSxFQUFFLFFBQVE7UUFDZCxJQUFJLEVBQUUsTUFBTTtRQUNaLE9BQU8sRUFBRSxZQUFZO0tBQ3RCO0lBQ0QsTUFBTSxFQUFFO1FBQ04sSUFBSSxFQUFFLE1BQU07UUFDWixJQUFJLEVBQUUsTUFBTTtRQUNaLE9BQU8sRUFBRSxRQUFRO0tBQ2xCO0lBQ0QsTUFBTSxFQUFFO1FBQ04sSUFBSSxFQUFFLFFBQVE7UUFDZCxJQUFJLEVBQUUsUUFBUTtRQUNkLE9BQU8sRUFBRSxTQUFTO0tBQ25CO0lBQ0QsUUFBUSxFQUFFO1FBQ1IsSUFBSSxFQUFFLGdCQUFnQjtRQUN0QixJQUFJLEVBQUUsVUFBVTtRQUNoQixPQUFPLEVBQUUsVUFBVTtLQUNwQjtDQUNGLENBQUM7QUFNRixJQUFhLGdDQUFnQyxHQUE3QyxNQUFhLGdDQUFnQztJQXVCM0M7UUFyQlMscUJBQWdCLEdBQUcsRUFBRSxDQUFDO1FBR3RCLFdBQU0sR0FBRyxJQUFJLENBQUM7UUFDZCxxQkFBZ0IsR0FBRyxLQUFL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RUFBRSxDQUFDOytEQUFzQjtBQUNqQjtJQUExQyxTQUFTLENBQUMsWUFBWSxFQUFFLEVBQUUsTUFBTSxFQUFFLElBQUksRUFBRSxDQUFDO21FQUF5QjtBQUM3QjtJQUFyQyxTQUFTLENBQUMsT0FBTyxFQUFFLEVBQUUsTUFBTSxFQUFFLElBQUksRUFBRSxDQUFDOzhEQUFxQjtBQWhCL0MsZ0NBQWdDO0lBTDVDLFNBQVMsQ0FBQztRQUNULFFBQVEsRUFBRSw0QkFBNEI7UUFDdEMsbXJEQUEwRDs7S0FFM0QsQ0FBQztHQUNXLGdDQUFnQyxDQW1FNUM7U0FuRVksZ0NBQWdDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcclxuICBDb21wb25lbnQsXHJcbiAgVmlld0NoaWxkLFxyXG4gIEV2ZW50RW1pdHRlcixcclxuICBPdXRwdXQsXHJcbiAgSW5wdXQsXHJcbiAgT25DaGFuZ2VzLFxyXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBNYXRUYWJsZURhdGFTb3VyY2UsIE1hdFRhYmxlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvdGFibGUnO1xyXG5pbXBvcnQgeyBNYXRQYWdpbmF0b3IgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9wYWdpbmF0b3InO1xyXG5pbXBvcnQgeyBNYXRTb3J0IH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvc29ydCc7XHJcbmV4cG9ydCBjb25zdCBidXR0b25zQ29uZmlnID0ge1xyXG4gIHJlYWQ6IHtcclxuICAgIGljb246ICdzZWFyY2gnLFxyXG4gICAgbmFtZTogJ3JlYWQnLFxyXG4gICAgdG9vbHRpcDogJ1Zpc3VhbGl6YXInLFxyXG4gIH0sXHJcbiAgdXBkYXRlOiB7XHJcbiAgICBpY29uOiAnZWRpdCcsXHJcbiAgICBuYW1lOiAnZWRpdCcsXHJcbiAgICB0b29sdGlwOiAnRWRpdGFyJyxcclxuICB9LFxyXG4gIGRlbGV0ZToge1xyXG4gICAgaWNvbjogJ2RlbGV0ZScsXHJcbiAgICBuYW1lOiAnZGVsZXRlJyxcclxuICAgIHRvb2x0aXA6ICdFeGNsdWlyJyxcclxuICB9LFxyXG4gIGRvd25sb2FkOiB7XHJcbiAgICBpY29uOiAnYXJyb3dfZG93bndhcmQnLFxyXG4gICAgbmFtZTogJ2Rvd25sb2FkJyxcclxuICAgIHRvb2x0aXA6ICdEb3dubG9hZCcsXHJcbiAgfSxcclxufTtcclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICduZ3gtbWF0ZXJpYWwtZHluYW1pYy10YWJsZScsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL25neC1tYXRlcmlhbC1keW5hbWljLXRhYmxlLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9uZ3gtbWF0ZXJpYWwtZHluYW1pYy10YWJsZS5jb21wb25lbnQuc2NzcyddLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgTmd4TWF0ZXJpYWxEeW5hbWljVGFibGVDb21wb25lbnQgaW1wbGVtZW50cyBPbkNoYW5nZXMge1xyXG4gIEBJbnB1dCgpIGRhdGFTb3VyY2U7XHJcbiAgQElucHV0KCkgZGlzcGxheWVkQ29sdW1ucyA9IFtdO1xyXG4gIEBJbnB1dCgpIGFjdGlvbnM7XHJcbiAgQElucHV0KCkgY29uZmlnRWRpdFJvdztcclxuICBASW5wdXQoKSBmaWx0ZXIgPSB0cnVlO1xyXG4gIEBJbnB1dCgpIGJ1dHRvbkFkZE5ld0l0ZW0gPSBmYWxzZTtcclxuICBASW5wdXQoKSBidXR0b25FeHBvcnQgPSBmYWxzZTtcclxuICBASW5wdXQoKSBjb21wb25lbnROYW1lO1xyXG5cclxuICBASW5wdXQoKSBidXR0b25zQ29uZmlnID0gYnV0dG9uc0NvbmZpZztcclxuXHJcbiAgQE91dHB1dCgpIHNlbmRDbGljayA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcclxuXHJcbiAgQFZpZXdDaGlsZChNYXRUYWJsZSwgeyBzdGF0aWM6IHRydWUgfSkgdGFibGU6IE1hdFRhYmxlPGFueT47XHJcbiAgQFZpZXdDaGlsZChNYXRQYWdpbmF0b3IsIHsgc3RhdGljOiB0cnVlIH0pIHBhZ2luYXRvcjogTWF0UGFnaW5hdG9yO1xyXG4gIEBWaWV3Q2hpbGQoTWF0U29ydCwgeyBzdGF0aWM6IHRydWUgfSkgc29ydDogTWF0VGFibGU8YW55PjtcclxuXHJcbiAgcHVibGljIGxvYWRpbmcgPSB0cnVlO1xyXG4gIHB1YmxpYyBhY3Rpb24gPSBmYWxzZTtcclxuICBwdWJsaWMgZGlzcGxheWVkQ29sdW1uc09iamVjdDogYW55W10gPSBbXTtcclxuICBwdWJsaWMgZGFkb3M7XHJcblxyXG4gIGNvbnN0cnVjdG9yKCkge31cclxuXHJcbiAgbmdPbkNoYW5nZXMoKTogdm9pZCB7XHJcbiAgICBpZiAodGhpcy5kaXNwbGF5ZWRDb2x1bW5zKSB7XHJcbiAgICAgIHRoaXMuYWRkQWN0aW9uQ29sdW1uKCk7XHJcbiAgICB9XHJcbiAgICBpZiAodGhpcy5kYXRhU291cmNlKSB7XHJcbiAgICAgIHRoaXMuY3JlYXRlRGF0YXNvdXJjZSgpO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgY3JlYXRlRGF0YXNvdXJjZSgpIHtcclxuICAgIHRoaXMuZGFkb3MgPSBuZXcgTWF0VGFibGVEYXRhU291cmNlPGFueT4odGhpcy5kYXRhU291cmNlKTtcclxuICAgIHRoaXMuZGFkb3MucGFnaW5hdG9yID0gdGhpcy5wYWdpbmF0b3I7XHJcbiAgICB0aGlzLmRhZG9zLnNvcnQgPSB0aGlzLnNvcnQ7XHJcbiAgICB0aGlzLnNob3dUYWJsZSgpO1xyXG4gIH1cclxuXHJcbiAgY3JlYXRlQ29sdW1ucygpIHtcclxuICAgIHRoaXMuZGlzcGxheWVkQ29sdW1uc09iamVjdCA9IHRoaXMuZGlzcGxheWVkQ29sdW1ucy5tYXAoKGNvbCkgPT5cclxuICAgICAgdHlwZW9mIGNvbC5jb2x1bW4gPT09ICdudW1iZXInID8gY29sLmNvbHVtbi50b1N0cmluZygpIDogY29sLmNvbHVtblxyXG4gICAgKTtcclxuICAgIHRoaXMuc2hvd1RhYmxlKCk7XHJcbiAgfVxyXG5cclxuICBzaG93VGFibGUoKSB7XHJcbiAgICBpZiAodGhpcy5kYWRvcyAmJiB0aGlzLmRpc3BsYXllZENvbHVtbnMgJiYgdGhpcy5kaXNwbGF5ZWRDb2x1bW5zT2JqZWN0KSB7XHJcbiAgICAgIHRoaXMubG9hZGluZyA9IGZhbHNlO1xyXG4gICAgfVxyXG4gIH1cclxuICBzZW5kQWN0aW9uKGFjdGlvbiwgcm93PywgaW5kZXg/KSB7XHJcbiAgICBjb25zdCBjb250ZW50OiBhbnkgPSB7IGFjdGlvbiwgcm93LCBpbmRleCB9O1xyXG4gICAgdGhpcy5zZW5kQ2xpY2suZW1pdChjb250ZW50KTtcclxuICB9XHJcbiAgYWRkQWN0aW9uQ29sdW1uKCkge1xyXG4gICAgaWYgKHRoaXMuYWN0aW9ucykge1xyXG4gICAgICBjb25zdCBjb2x1bW5BY3Rpb24gPSB7IGNvbHVtbjogJ2FjdGlvbnMnLCB0aXRsZTogJ0HDp8O1ZXMnIH07XHJcbiAgICAgIHRoaXMuZGlzcGxheWVkQ29sdW1ucyA9IFsuLi50aGlzLmRpc3BsYXllZENvbHVtbnMsIGNvbHVtbkFjdGlvbl07XHJcbiAgICB9XHJcbiAgICB0aGlzLmNyZWF0ZUNvbHVtbnMoKTtcclxuICB9XHJcbiAgYXBwbHlGaWx0ZXIoZmlsdGVyVmFsdWU6IHN0cmluZykge1xyXG4gICAgdGhpcy5kYWRvcy5maWx0ZXIgPSBmaWx0ZXJWYWx1ZS50cmltKCkudG9Mb3dlckNhc2UoKTtcclxuICB9XHJcbn1cclxuIl19