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.
175 lines (169 loc) • 8.27 kB
JavaScript
import { __spread, __decorate } from 'tslib';
import { EventEmitter, Input, Output, ViewChild, Component, NgModule } from '@angular/core';
import { MatTableDataSource, MatTable, MatTableModule } from '@angular/material/table';
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
import { MatSort, MatSortModule } from '@angular/material/sort';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatIconModule } from '@angular/material/icon';
import { CommonModule } from '@angular/common';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
var 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',
},
};
var NgxMaterialDynamicTableComponent = /** @class */ (function () {
function NgxMaterialDynamicTableComponent() {
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 = [];
}
NgxMaterialDynamicTableComponent.prototype.ngOnChanges = function () {
if (this.displayedColumns) {
this.addActionColumn();
}
if (this.dataSource) {
this.createDatasource();
}
};
NgxMaterialDynamicTableComponent.prototype.createDatasource = function () {
this.dados = new MatTableDataSource(this.dataSource);
this.dados.paginator = this.paginator;
this.dados.sort = this.sort;
this.showTable();
};
NgxMaterialDynamicTableComponent.prototype.createColumns = function () {
this.displayedColumnsObject = this.displayedColumns.map(function (col) {
return typeof col.column === 'number' ? col.column.toString() : col.column;
});
this.showTable();
};
NgxMaterialDynamicTableComponent.prototype.showTable = function () {
if (this.dados && this.displayedColumns && this.displayedColumnsObject) {
this.loading = false;
}
};
NgxMaterialDynamicTableComponent.prototype.sendAction = function (action, row, index) {
var content = { action: action, row: row, index: index };
this.sendClick.emit(content);
};
NgxMaterialDynamicTableComponent.prototype.addActionColumn = function () {
if (this.actions) {
var columnAction = { column: 'actions', title: 'Ações' };
this.displayedColumns = __spread(this.displayedColumns, [columnAction]);
}
this.createColumns();
};
NgxMaterialDynamicTableComponent.prototype.applyFilter = function (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);
return NgxMaterialDynamicTableComponent;
}());
var NgxMaterialDynamicTableModule = /** @class */ (function () {
function NgxMaterialDynamicTableModule() {
}
NgxMaterialDynamicTableModule = __decorate([
NgModule({
declarations: [NgxMaterialDynamicTableComponent],
imports: [
CommonModule,
MatTableModule,
MatTooltipModule,
MatIconModule,
MatPaginatorModule,
MatSortModule,
MatFormFieldModule,
MatInputModule,
],
exports: [
NgxMaterialDynamicTableComponent,
MatTableModule,
MatTooltipModule,
MatIconModule,
MatPaginatorModule,
MatSortModule,
MatFormFieldModule,
MatInputModule,
],
})
], NgxMaterialDynamicTableModule);
return NgxMaterialDynamicTableModule;
}());
/*
* Public API Surface of ngx-material-dynamic-table
*/
/**
* Generated bundle index. Do not edit.
*/
export { NgxMaterialDynamicTableComponent, NgxMaterialDynamicTableModule, buttonsConfig };
//# sourceMappingURL=ngx-material-dynamic-table.js.map