tauro-components
Version:
É uma biblioteca Angular composta de diversos componentes úteis.
1,387 lines (1,369 loc) • 174 kB
JavaScript
import { Injectable, Pipe, Component, Inject, NgModule, Input, Output, EventEmitter, ContentChildren, ViewChild, ChangeDetectorRef, Directive, defineInjectable, inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA, MatTableDataSource, MatPaginator, MatSort, MatPaginatorIntl, DateAdapter, MAT_DATE_LOCALE, MAT_DATE_FORMATS, MatDialogModule, MatSelectModule, MatOptionModule, MatButtonModule, MatTableModule, MatPaginatorModule, MatSortModule, MatInputModule, MatTooltipModule, MatProgressBarModule, MatToolbarModule, MatCheckboxModule, MatDatepickerModule, MatIconModule } from '@angular/material';
import { HttpClient, HttpHeaders, HttpClientModule } from '@angular/common/http';
import { CurrencyPipe, CommonModule } from '@angular/common';
import { utils, writeFile } from 'xlsx';
import jsPDF from 'jspdf';
import 'jspdf-autotable';
import $ from 'jquery';
import * as moment_ from 'moment';
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';
import { animate, state, style, transition, trigger } from '@angular/animations';
import { cloneDeep } from 'lodash';
import { SelectionModel } from '@angular/cdk/collections';
import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MomentDateAdapter } from '@angular/material-moment-adapter';
import { TextMaskModule } from 'angular2-text-mask';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
class TauroComponentsService {
constructor() { }
}
TauroComponentsService.decorators = [
{ type: Injectable, args: [{
providedIn: 'root'
},] },
];
/** @nocollapse */
TauroComponentsService.ctorParameters = () => [];
/** @nocollapse */ TauroComponentsService.ngInjectableDef = defineInjectable({ factory: function TauroComponentsService_Factory() { return new TauroComponentsService(); }, token: TauroComponentsService, providedIn: "root" });
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
class TauroComponentsComponent {
constructor() { }
/**
* @return {?}
*/
ngOnInit() {
}
}
TauroComponentsComponent.decorators = [
{ type: Component, args: [{
selector: 'ta-tauro-components',
template: `
<p>
tauro-components works!
</p>
`,
styles: []
},] },
];
/** @nocollapse */
TauroComponentsComponent.ctorParameters = () => [];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
class DialogWarningComponent {
/**
* @param {?} dialogRef
* @param {?} data
*/
constructor(dialogRef, data) {
this.dialogRef = dialogRef;
this.data = data;
}
/**
* @return {?}
*/
ngOnInit() {
this.title = this.data.title ? this.data.title : 'Aviso';
this.message = this.data.message ? this.data.message : '';
}
}
DialogWarningComponent.decorators = [
{ type: Component, args: [{
selector: 'ta-dialog-warning',
template: `<h1 mat-dialog-title>{{title}}</h1>
<mat-dialog-content>
{{message}}
</mat-dialog-content>
<br>
<mat-dialog-actions>
<button color="primary" (click)="dialogRef.close()" mat-raised-button>Ok</button>
</mat-dialog-actions>`,
styles: [``]
},] },
];
/** @nocollapse */
DialogWarningComponent.ctorParameters = () => [
{ type: MatDialogRef },
{ type: undefined, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
class DialogConfirmationComponent {
/**
* @param {?} dialogRef
* @param {?} data
*/
constructor(dialogRef, data) {
this.dialogRef = dialogRef;
this.data = data;
}
/**
* @return {?}
*/
ngOnInit() {
this.title = this.data.title ? this.data.title : 'Atenção';
this.cancelMsg = this.data.cancelMsg ? this.data.cancelMsg : 'Cancelar';
this.confirmMsg = this.data.confirmMsg ? this.data.confirmMsg : 'Ok';
}
}
DialogConfirmationComponent.decorators = [
{ type: Component, args: [{
selector: 'ta-dialog-confirmation',
template: `<h1 mat-dialog-title>{{title}}</h1>
<mat-dialog-content>
{{confirmMessage}}
</mat-dialog-content>
<br>
<mat-dialog-actions>
<button (click)="dialogRef.close(false)" mat-raised-button>{{cancelMsg}}</button>
<button color="primary" (click)="dialogRef.close(true)" mat-raised-button>{{confirmMsg}}</button>
</mat-dialog-actions>`,
styles: [``]
},] },
];
/** @nocollapse */
DialogConfirmationComponent.ctorParameters = () => [
{ type: MatDialogRef },
{ type: undefined, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
class UfComponent {
constructor() {
this.changeUF = new EventEmitter();
this.foods = [];
this.UFArray = ["AC", "AL", "AM", "AP", "BA", "CE", "DF", "ES", "GO", "MA", "MG", "MS", "MT", "PA", "PB", "PE", "PI", "PR", "RJ", "RN", "RO", "RR", "RS", "SC", "SE", "SP", "TO"];
}
/**
* @return {?}
*/
ngOnInit() {
if (!this.width) {
this.width = '100%';
}
}
/**
* @param {?} event
* @return {?}
*/
sendUF(event) {
if (event) {
this.changeUF.emit(event.value);
}
else {
this.changeUF.emit('');
}
}
}
UfComponent.decorators = [
{ type: Component, args: [{
selector: 'ta-uf',
template: `<mat-form-field [style.width]="width">
<mat-select [(value)]="value" (change)="sendUF($event)" [required]="required" placeholder="Estado" [disabled]="disabled">
<mat-option *ngFor="let uf of UFArray" [value]="uf" >
{{ uf }}
</mat-option>
</mat-select>
</mat-form-field>
`,
styles: [``]
},] },
];
/** @nocollapse */
UfComponent.ctorParameters = () => [];
UfComponent.propDecorators = {
width: [{ type: Input }],
required: [{ type: Input }],
disabled: [{ type: Input }],
value: [{ type: Input }],
changeUF: [{ type: Output }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
/** @type {?} */
const moment = moment_;
class DatatableService {
/**
* @param {?} http
*/
constructor(http) {
this.http = http;
}
/**
* @param {?} obj
* @return {?}
*/
formatValues(obj) {
moment.locale('pt-BR');
for (let i = 0; i < obj.length; i++) {
Object.keys(obj[i]).forEach(function (key) {
if (key.includes('Dt')) {
obj[i][key] = moment(new Date(obj[i][key])).format('L');
}
else if (key.includes('Vl')) {
/** @type {?} */
let currencyPipe = new CurrencyPipe('pt-BR');
/** @type {?} */
let newValue = currencyPipe.transform(obj[i][key], 'BRL', 'symbol', '1.2-2');
obj[i][key] = newValue;
}
});
}
}
/**
* @param {?} s
* @return {?}
*/
s2ab(s) {
/** @type {?} */
var buf = new ArrayBuffer(s.length);
/** @type {?} */
var view = new Uint8Array(buf);
for (var i = 0; i != s.length; ++i)
view[i] = s.charCodeAt(i) & 0xFF;
return buf;
}
/**
* @param {?} text
* @return {?}
*/
clean_head(text) {
text = $.trim(text.replace(/</g, '').replace(/>/g, '').replace(/ /g, ''));
return text;
}
/**
* @param {?} text
* @return {?}
*/
clean_text(text) {
text = $.trim(text.replace(/</g, '').replace(/>/g, ''));
return text;
}
/**
* @param {?} data
* @param {?} type
* @return {?}
*/
downloadFile(data, type) {
/** @type {?} */
let blob = new Blob([this.s2ab(data)], { type: 'text/' + type });
/** @type {?} */
let url = window.URL.createObjectURL(blob);
if (navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(blob, 'Municipio_Online.' + type);
}
else {
/** @type {?} */
let a = document.createElement('a');
a.href = url;
a.download = 'Municipio_Online.' + type;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
window.URL.revokeObjectURL(url);
}
/**
* @param {?} data
* @param {?} headers
* @param {?} tableId
* @return {?}
*/
createTablePrint(data, headers, tableId) {
/** @type {?} */
let table = /** @type {?} */ (document.getElementById(tableId));
for (let l = 0; l < data.length; l++) {
/** @type {?} */
let row = table.insertRow(l + 1);
for (let c = 0; c < headers.length; c++) {
/** @type {?} */
let cell = row.insertCell(c);
/** @type {?} */
let field = headers[c].Datapropertyname;
cell.innerHTML = data[l][field] ? data[l][field] : "";
}
}
}
/**
* @param {?} o
* @param {?} tab
* @return {?}
*/
json2xml(o, tab) {
/** @type {?} */
let toXml = function (v, name, ind) {
/** @type {?} */
let xml = "";
if (v instanceof Array) {
for (let i = 0, n = v.length; i < n; i++)
xml += ind + toXml(v[i], name, ind + "\t") + "\n";
}
else if (typeof (v) == "object") {
/** @type {?} */
let hasChild = false;
xml += ind + "<" + name;
for (let m in v) {
if (m.charAt(0) == "@")
xml += " " + m.substr(1) + "=\"" + v[m].toString() + "\"";
else
hasChild = true;
}
xml += hasChild ? ">" : "/>";
if (hasChild) {
for (let m in v) {
if (m == "#text")
xml += v[m];
else if (m == "#cdata")
xml += "<![CDATA[" + v[m] + "]]>";
else if (m.charAt(0) != "@")
xml += toXml(v[m], m, ind + "\t");
}
xml += (xml.charAt(xml.length - 1) == "\n" ? ind : "") + "</" + name + ">";
}
}
else {
xml += ind + "<" + name + ">" + v.toString() + "</" + name + ">";
}
return xml;
};
/** @type {?} */
let xml = "";
for (let m in o)
xml += toXml(o[m], m, "");
return tab ? xml.replace(/\t/g, tab) : xml.replace(/\t|\n/g, "");
}
/**
* @param {?} ws
* @param {?} columns
* @return {?}
*/
renameColumnsToValueWS(ws, columns) {
/** @type {?} */
let range = utils.decode_range(ws['!ref']);
for (let C = range.s.r; C <= range.e.r; ++C) {
/** @type {?} */
let address = utils.encode_col(C) + "1";
if (!ws[address])
continue;
/** @type {?} */
let column = columns.find(d => d.Datapropertyname == ws[address].v);
if (column) {
ws[address].v = column.Text;
}
}
}
/**
* @param {?} arr
* @param {?} columns
* @return {?}
*/
renameColumnsToValue(arr, columns) {
arr.forEach(function (data) {
for (let property in data) {
if (data.hasOwnProperty(property)) {
/** @type {?} */
let column = columns.find(d => d.Datapropertyname == property);
if (column) {
data[column.Text] = data[property];
}
delete data[property];
}
}
});
}
/**
* @param {?} data
* @param {?=} headers
* @return {?}
*/
exportAsExcel(data, headers) {
this.formatValues(data);
if (headers) {
this.renameColumnsToValue(data, headers);
}
/** @type {?} */
let ws = utils.json_to_sheet(data);
/** @type {?} */
let wb = { Sheets: { 'data': ws }, SheetNames: ['data'] };
// const ws: XLSX.WorkSheet = XLSX.utils.table_to_sheet(this.table.nativeElement);//converts a DOM TABLE element to a worksheet
// const wb: XLSX.WorkBook = XLSX.utils.book_new();
// XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
/* save to file */
writeFile(wb, 'Municipio_Online.xlsx', { bookType: 'xlsx', bookSST: false, type: 'binary', cellDates: false });
}
/**
* @param {?} data
* @param {?=} headers
* @return {?}
*/
exportAsCSV(data, headers) {
this.formatValues(data);
if (headers) {
this.renameColumnsToValue(data, headers);
}
/** @type {?} */
const ws = utils.json_to_sheet(data);
/** @type {?} */
const csvOutput = utils.sheet_to_csv(ws);
this.downloadFile(csvOutput, "csv");
}
/**
* @param {?} data
* @param {?=} headers
* @return {?}
*/
exportAsXML(data, headers) {
this.formatValues(data);
if (headers) {
this.renameColumnsToValue(data, headers);
}
/** @type {?} */
const ws = utils.json_to_sheet(data);
/** @type {?} */
let json = utils.sheet_to_json(ws);
/** @type {?} */
let obj = '{"table": {"row":' + JSON.stringify(json) + '}}';
/** @type {?} */
let result = this.json2xml(JSON.parse(obj), "");
this.downloadFile(result, "xml");
}
/**
* @param {?} table
* @param {?} total
* @param {?} options
* @return {?}
*/
exportTableAsXML(table, total, options) {
/** @type {?} */
let vm = this;
/** @type {?} */
let title = [];
/** @type {?} */
let loop = 0;
/** @type {?} */
let head = 0;
/** @type {?} */
let count = 0;
/** @type {?} */
let xml = "<" + options.rootnode + ">\n";
$(table).find('tr').each(function () {
if (head == 1 && count <= total) {
$(table).find('td').each(function () {
count++;
if (loop == 0) {
xml += "<" + options.childnode + ">\n";
}
xml += "<" + title[loop] + ">" + vm.clean_text($(this).text()) + "</" + title[loop] + ">\n";
loop++;
if (loop >= title.length) {
loop = 0;
xml += "</" + options.childnode + ">\n";
}
});
}
if (title.length == 0) {
$(table).find('th').each(function () {
head = 1;
/** @type {?} */
let text = vm.clean_head($(this).text());
title.push(text);
});
if (options.expandedDetail) {
title.push(options.expandedDetail);
}
}
});
xml += "</" + options.rootnode + ">\n";
this.downloadFile(xml, "xml");
}
/**
* @param {?} data
* @param {?} headers
* @param {?=} options
* @return {?}
*/
exportAsPDF(data, headers, options) {
this.formatValues(data);
/** @type {?} */
let doc = new jsPDF({
orientation: 'landscape'
});
doc.autoTable(headers, data, options);
doc.setPage(1);
doc.text("Município Online", doc.internal.pageSize.getWidth() / 2, 15, 'center');
doc.save('Municipio_Online.pdf');
}
/**
* @param {?} data
* @param {?} headers
* @param {?} tableId
* @return {?}
*/
print(data, headers, tableId) {
this.formatValues(data);
this.createTablePrint(data, headers, tableId);
/** @type {?} */
let divToPrint = document.getElementById(tableId);
window.frames["PrintFrame"].document.write(divToPrint.outerHTML);
/** @type {?} */
const el = /** @type {?} */ (window.top.document.getElementById("PrintFrame"));
el.contentWindow.focus();
el.contentWindow.print();
}
/**
* @param {?} apiUrl
* @return {?}
*/
getDataSource(apiUrl) {
return this.http.get(apiUrl);
}
/**
* @param {?} apiUrl
* @return {?}
*/
getAttachment(apiUrl) {
return this.http.get(apiUrl, { headers: new HttpHeaders().append('Content-Type', 'application/octet-stream'), responseType: 'blob', observe: 'body' });
}
}
DatatableService.decorators = [
{ type: Injectable, args: [{
providedIn: 'root'
},] },
];
/** @nocollapse */
DatatableService.ctorParameters = () => [
{ type: HttpClient }
];
/** @nocollapse */ DatatableService.ngInjectableDef = defineInjectable({ factory: function DatatableService_Factory() { return new DatatableService(inject(HttpClient)); }, token: DatatableService, providedIn: "root" });
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
class DataColumn {
/**
* @return {?}
*/
get Text() {
return this.text;
}
/**
* @param {?} value
* @return {?}
*/
set Text(value) {
this.text = value;
}
/**
* @return {?}
*/
get Datapropertyname() {
return this.dataPropertyName;
}
/**
* @param {?} value
* @return {?}
*/
set Datapropertyname(value) {
this.dataPropertyName = value;
}
/**
* @return {?}
*/
get Expanded() {
return this.expanded;
}
/**
* @param {?} value
* @return {?}
*/
set Expanded(value) {
this.expanded = value;
}
/**
* @return {?}
*/
get EnableExpandedDetail() {
return this.enableExpandedDetail;
}
/**
* @param {?} value
* @return {?}
*/
set EnableExpandedDetail(value) {
this.enableExpandedDetail = value;
}
/**
* @return {?}
*/
get DisabledSort() {
return this.disabledSort;
}
/**
* @param {?} value
* @return {?}
*/
set DisabledSort(value) {
this.disabledSort = value;
}
/**
* @return {?}
*/
get Width() {
return this.width;
}
/**
* @param {?} value
* @return {?}
*/
set Width(value) {
this.width = value;
}
/**
* @return {?}
*/
get Align() {
return this.align;
}
/**
* @param {?} value
* @return {?}
*/
set Align(value) {
this.align = value;
}
/**
* @return {?}
*/
get Pipe() {
return this.pipe;
}
/**
* @param {?} value
* @return {?}
*/
set Pipe(value) {
this.pipe = value;
}
/**
* @return {?}
*/
get Attachment() {
return this.attachment;
}
/**
* @param {?} value
* @return {?}
*/
set Attachment(value) {
this.attachment = value;
}
/**
* @return {?}
*/
get DataPropertyNameAttachment() {
return this.dataPropertyNameAttachment;
}
/**
* @param {?} value
* @return {?}
*/
set DataPropertyNameAttachment(value) {
this.dataPropertyNameAttachment = value;
}
/**
* @return {?}
*/
get DataPropertyKeyAttachment() {
return this.dataPropertyKeyAttachment;
}
/**
* @param {?} value
* @return {?}
*/
set DataPropertyKeyAttachment(value) {
this.dataPropertyKeyAttachment = value;
}
/**
* @return {?}
*/
get DataPropertyUrlDownloadAttachment() {
return this.dataPropertyUrlDownloadAttachment;
}
/**
* @param {?} value
* @return {?}
*/
set DataPropertyUrlDownloadAttachment(value) {
this.dataPropertyUrlDownloadAttachment = value;
}
/**
* @param {?} text
* @param {?} dataPropertyName
* @param {?=} disabledSort
* @param {?=} enableExpandedDetail
* @param {?=} expanded
* @param {?=} width
* @param {?=} align
* @param {?=} pipe
* @param {?=} attachment
* @param {?=} dataPropertyNameAttachment
* @param {?=} dataPropertyKeyAttachment
* @param {?=} dataPropertyUrlDownloadAttachment
*/
constructor(text, dataPropertyName, disabledSort, enableExpandedDetail, expanded, width, align, pipe, attachment, dataPropertyNameAttachment, dataPropertyKeyAttachment, dataPropertyUrlDownloadAttachment) {
this.Text = text;
this.Datapropertyname = dataPropertyName;
this.Width = width;
this.Align = align;
this.EnableExpandedDetail = enableExpandedDetail;
this.Expanded = expanded;
this.DisabledSort = disabledSort;
this.Pipe = pipe;
this.Attachment = attachment;
this.DataPropertyNameAttachment = dataPropertyNameAttachment;
this.dataPropertyKeyAttachment = dataPropertyKeyAttachment;
this.dataPropertyUrlDownloadAttachment = dataPropertyUrlDownloadAttachment;
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
class DataColumnDirective {
}
DataColumnDirective.decorators = [
{ type: Directive, args: [{
selector: 'ta-datacolumn'
},] },
];
DataColumnDirective.propDecorators = {
headerText: [{ type: Input }],
dataPropertyName: [{ type: Input }],
disabledSort: [{ type: Input }],
width: [{ type: Input }],
align: [{ type: Input }],
pipe: [{ type: Input }]
};
class DataColumnsComponent {
/**
* @param {?} datatableService
*/
constructor(datatableService) {
this.datatableService = datatableService;
this.dtColumns = [];
}
/**
* @return {?}
*/
ngAfterContentInit() {
this.columns.forEach(dtColumn => {
/** @type {?} */
let col = new DataColumn(dtColumn.headerText, dtColumn.dataPropertyName, dtColumn.disabledSort, null, null, dtColumn.width, dtColumn.align, dtColumn.pipe);
this.dtColumns.push(col);
});
}
}
DataColumnsComponent.decorators = [
{ type: Component, args: [{
selector: 'ta-datacolumns',
template: `<ng-content></ng-content>`
},] },
];
/** @nocollapse */
DataColumnsComponent.ctorParameters = () => [
{ type: DatatableService }
];
DataColumnsComponent.propDecorators = {
columns: [{ type: ContentChildren, args: [DataColumnDirective,] }]
};
class DataColumnExpandedDirective {
constructor() { }
}
DataColumnExpandedDirective.decorators = [
{ type: Directive, args: [{
selector: 'ta-datacolumnexpanded'
},] },
];
/** @nocollapse */
DataColumnExpandedDirective.ctorParameters = () => [];
DataColumnExpandedDirective.propDecorators = {
headerText: [{ type: Input }],
dataPropertyName: [{ type: Input }],
pipe: [{ type: Input }],
width: [{ type: Input }]
};
class DataExpandedComponent {
constructor() {
this.dtColumns = [];
}
/**
* @return {?}
*/
ngAfterContentInit() {
this.columns.forEach(dtColumn => {
/** @type {?} */
let col = new DataColumn(dtColumn.headerText, dtColumn.dataPropertyName, null, null, null, dtColumn.width, null, dtColumn.pipe);
this.dtColumns.push(col);
});
}
}
DataExpandedComponent.decorators = [
{ type: Component, args: [{
selector: 'ta-dataexpanded',
template: `<ng-content></ng-content>`
},] },
];
/** @nocollapse */
DataExpandedComponent.ctorParameters = () => [];
DataExpandedComponent.propDecorators = {
headerText: [{ type: Input }],
dataPropertyName: [{ type: Input }],
expanded: [{ type: Input }],
width: [{ type: Input }],
align: [{ type: Input }],
enableExpandedDetail: [{ type: Input }],
pipe: [{ type: Input }],
lineHeight: [{ type: Input }],
attachment: [{ type: Input }],
dataPropertyNameAttachment: [{ type: Input }],
dataPropertyKeyAttachment: [{ type: Input }],
dataPropertyUrlDownloadAttachment: [{ type: Input }],
columns: [{ type: ContentChildren, args: [DataColumnExpandedDirective,] }]
};
class DatatableComponent {
/**
* @param {?} datatableService
* @param {?} cdr
*/
constructor(datatableService, cdr) {
this.datatableService = datatableService;
this.cdr = cdr;
this.selectedRows = new EventEmitter();
this.changeValues = new EventEmitter();
this.dtColumns = [];
this.dtAllColumns = [];
this.dtColumnsTableExpanded = [];
this.columnsToDisplay = [];
this.dataSource = new MatTableDataSource();
this._displayedValues = [];
this._displayedAttachments = [];
this.selection = new SelectionModel(true, []);
this.ngUnsubscribe = new Subject();
this.animationTime = 2000;
}
/**
* @param {?} value
* @return {?}
*/
set displayedAttachments(value) {
this.setDisplayedAttachments(value);
}
/**
* @param {?} value
* @return {?}
*/
set displayedValues(value) {
this.setDisplayedValues(value);
}
/**
* @param {?} value
* @return {?}
*/
set apiUrl(value) {
this._apiUrl = value;
if (this._apiUrl) {
this.getDataSource();
}
}
/**
* @return {?}
*/
ngOnInit() {
this.emptyDataMessage = this.emptyDataMessage ? this.emptyDataMessage : "Não há dados a serem exibidos";
}
/**
* @return {?}
*/
getDataSource() {
if (this._apiUrl) {
this.showProgressBar = true;
this.datatableService.getDataSource(this._apiUrl)
.pipe(takeUntil(this.ngUnsubscribe))
.subscribe(d => {
this.setDisplayedValues(d);
this.showProgressBar = false;
}, e => {
this.showProgressBar = false;
this.emptyDataMessage = "Falha ao obter os dados!";
console.log(e.message);
});
}
}
/**
* @param {?} link
* @param {?} fileName
* @return {?}
*/
downloadAttachments(link, fileName) {
if (link && link.length > 0) {
this.showProgressBar = true;
this.datatableService.getAttachment(link)
.pipe(takeUntil(this.ngUnsubscribe))
.subscribe(d => {
this.showProgressBar = false;
/** @type {?} */
let a = document.createElement("a");
a.href = URL.createObjectURL(d);
a.download = fileName;
a.click();
}, e => {
this.showProgressBar = false;
console.log(e.message);
});
}
}
/**
* @param {?} value
* @return {?}
*/
setDisplayedAttachments(value) {
for (let i = 0; i < value.length; i++) {
/** @type {?} */
let nameAttachment = value[i][this.dtColumnExpanded.DataPropertyNameAttachment];
if (nameAttachment.includes('.pdf')) {
value[i].src = 'assets/img/icon/icon_pdf.svg';
}
else if (nameAttachment.includes('.xls')) {
value[i].src = 'assets/img/icon/icon_excel.svg';
}
else if (nameAttachment.includes('.xml')) {
value[i].src = 'assets/img/icon/icon_xml.svg';
}
else if (nameAttachment.includes('.csv')) {
value[i].src = 'assets/img/icon/icon_csv.svg';
}
}
this._displayedAttachments = value;
}
/**
* @param {?} value
* @return {?}
*/
setDisplayedValues(value) {
this._displayedValues = value;
this._displayedValues.forEach(function (obj) {
obj.BtnExpand = "add_circle";
obj.Expanded = false;
});
this.changeValues.emit(value);
this.dataSource = new MatTableDataSource(this._displayedValues);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
/**
* @return {?}
*/
ngAfterViewInit() {
if (this.dtColumnsComponent && this.dtColumnsComponent.first) {
this.dtColumns = this.dtColumnsComponent.first.dtColumns;
}
this.setColumnsToDisplay();
this.rowExpanded.forEach(dtRow => {
this.dtColumnExpanded = new DataColumn(dtRow.headerText, dtRow.dataPropertyName, false, dtRow.enableExpandedDetail, dtRow.expanded, dtRow.width, dtRow.align, dtRow.pipe, dtRow.attachment, dtRow.dataPropertyNameAttachment, dtRow.dataPropertyKeyAttachment, dtRow.dataPropertyUrlDownloadAttachment);
this.dtAllColumns.push(this.dtColumnExpanded);
if (dtRow.enableExpandedDetail && !dtRow.expanded) {
/** @type {?} */
let col = new DataColumn('', 'BtnExpand', true, null, null, '5%');
this.dtColumns.unshift(col);
this.columnsToDisplay.unshift(col.Datapropertyname);
}
//Se existem colunas a serem exibidas no ExpandDetail, adiciona ao objeto que será exibido na tela
dtRow.columns.forEach(col => {
this.dtColumnsTableExpanded.push(new DataColumn(col.headerText, col.dataPropertyName, null, null, null, col.width, null, col.pipe));
});
this.lineHeight = dtRow.lineHeight;
});
this.cdr.detectChanges();
}
/**
* @param {?} elem
* @return {?}
*/
clickExpanded(elem) {
if (!elem.Expanded) {
elem.BtnExpand = 'remove_circle';
}
else {
elem.BtnExpand = 'add_circle';
}
elem.Expanded = !elem.Expanded;
}
/**
* @return {?}
*/
setColumnsToDisplay() {
if (this.showCheckbox) {
this.columnsToDisplay.push("select");
}
this.dtColumns.map(c => {
this.columnsToDisplay.push(c.Datapropertyname);
this.dtAllColumns.push(c);
});
}
/**
* @param {?} filterValue
* @return {?}
*/
applyFilter(filterValue) {
filterValue = filterValue.trim(); // Remove whitespace
filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
this.dataSource.filter = filterValue;
}
/**
* @return {?}
*/
isAllSelected() {
/** @type {?} */
const numSelected = this.selection.selected.length;
/** @type {?} */
const numRows = this.dataSource.data.length;
return numSelected === numRows;
}
/**
* @return {?}
*/
masterToggle() {
this.isAllSelected() ?
this.selection.clear() :
this.dataSource.data.forEach(row => this.selection.select(row));
this.selectedRows.emit(this.selection.selected);
}
/**
* @param {?} row
* @return {?}
*/
selectCell(row) {
this.selection.toggle(row);
this.selectedRows.emit(this.selection.selected);
}
/**
* @return {?}
*/
exportAsPDF() {
this.animatedIconPDF = true;
/** @type {?} */
let vm = this;
setTimeout(function () {
/** @type {?} */
let dado = cloneDeep(vm.dataSource.filteredData);
/** @type {?} */
let columnCollecion = [];
/** @type {?} */
let maxWidth = 270;
for (let i = 0; i < vm.dtAllColumns.length; i++) {
columnCollecion.push({ title: vm.dtAllColumns[i].Text, dataKey: vm.dtAllColumns[i].Datapropertyname });
}
/** @type {?} */
let op = {
styles: {
columnWidth: 0,
halign: 'center',
valign: 'top',
fontSize: 8,
overflow: 'linebreak'
},
columnStyles: {},
margin: { top: 20 },
};
if (vm.dtColumnExpanded) {
maxWidth -= 60;
/** @type {?} */
let expandedPropertyName = vm.dtColumnExpanded.Datapropertyname;
op.columnStyles[expandedPropertyName] = { columnWidth: 80 };
}
/** @type {?} */
let colWidth = columnCollecion.length > 0 ? (maxWidth / columnCollecion.length) : 0;
op.styles.columnWidth = colWidth;
vm.datatableService.exportAsPDF(dado, columnCollecion, op);
vm.animatedIconPDF = false;
}, vm.animationTime);
}
/**
* @return {?}
*/
exportAsExcel() {
this.animatedIconExcel = true;
/** @type {?} */
let vm = this;
setTimeout(function () {
/** @type {?} */
let dado = cloneDeep(vm.dataSource.filteredData);
vm.datatableService.exportAsExcel(dado, vm.dtAllColumns);
vm.animatedIconExcel = false;
}, vm.animationTime);
}
/**
* @return {?}
*/
exportAsCSV() {
this.animatedIconCSV = true;
/** @type {?} */
let vm = this;
setTimeout(function () {
/** @type {?} */
let dado = cloneDeep(vm.dataSource.filteredData);
vm.datatableService.exportAsCSV(dado, vm.dtAllColumns);
vm.animatedIconCSV = false;
}, vm.animationTime);
}
/**
* @return {?}
*/
exportAsXML() {
this.animatedIconXML = true;
/** @type {?} */
let vm = this;
setTimeout(function () {
/** @type {?} */
let dado = cloneDeep(vm.dataSource.filteredData);
vm.datatableService.exportAsXML(dado, vm.dtAllColumns);
vm.animatedIconXML = false;
}, vm.animationTime);
}
/**
* @return {?}
*/
print() {
this.animatedIconPrint = true;
/** @type {?} */
let vm = this;
setTimeout(function () {
vm.showTablePrint = true;
vm.cdr.detectChanges();
/** @type {?} */
let dado = cloneDeep(vm.dataSource.filteredData);
vm.datatableService.print(dado, vm.dtAllColumns, "TABLE");
vm.showTablePrint = false;
vm.animatedIconPrint = false;
}, vm.animationTime);
}
}
DatatableComponent.decorators = [
{ type: Component, args: [{
selector: 'ta-datatable',
template: `<div class="dataTable_wrapper">
<div *ngIf="_displayedValues?.length > 0" class="table-header">
<mat-form-field *ngIf="showSearch">
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Pesquisar">
<mat-icon matSuffix>search</mat-icon>
</mat-form-field>
<div *ngIf="showExportButtons" style="float: right; margin-top: 17px;">
<img [ngClass]="{'animated zoomIn infinite-animation': animatedIconPDF }" style="cursor: pointer; margin-right: 8px;" matTooltip="PDF" matTooltipPosition="above" [matTooltipDisabled]="disabledToolTipIcons" src="assets/img/icon/icon_pdf.svg" width="24" height="24" (click)="exportAsPDF()"/>
<img [ngClass]="{'animated zoomIn infinite-animation': animatedIconExcel }" style="cursor: pointer; margin-right: 8px;" matTooltip="Excel" matTooltipPosition="above" [matTooltipDisabled]="disabledToolTipIcons" src="assets/img/icon/icon_excel.svg" width="24" height="24" (click)="exportAsExcel()"/>
<img [ngClass]="{'animated zoomIn infinite-animation': animatedIconCSV }" style="cursor: pointer; margin-right: 8px;" matTooltip="CSV" matTooltipPosition="above" [matTooltipDisabled]="disabledToolTipIcons" src="assets/img/icon/icon_csv.svg" width="24" height="24" (click)="exportAsCSV()"/>
<img [ngClass]="{'animated zoomIn infinite-animation': animatedIconXML }" style="cursor: pointer; margin-right: 8px;" matTooltip="XML" matTooltipPosition="above" [matTooltipDisabled]="disabledToolTipIcons" src="assets/img/icon/icon_xml.svg" width="24" height="24" (click)="exportAsXML()"/>
<img [ngClass]="{'animated zoomIn infinite-animation': animatedIconPrint }" style="cursor: pointer;" matTooltip="Imprimir" matTooltipPosition="above" [matTooltipDisabled]="disabledToolTipIcons" src="assets/img/icon/icon_printer2.svg" width="24" height="24" (click)="print()"/>
</div>
</div>
<mat-progress-bar
*ngIf="showProgressBar"
style="height: 2px;"
class="example-margin"
color="primary"
mode="indeterminate">
</mat-progress-bar>
<table multiTemplateDataRows *ngIf="columnsToDisplay.length > 0" mat-table [dataSource]="dataSource" class="mat-elevation-z8"
matSort>
<!-- Checkbox Column -->
<ng-container matColumnDef="select">
<th mat-header-cell *matHeaderCellDef>
<mat-checkbox (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[disabled]="_displayedValues?.length == 0"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</th>
<td mat-cell *matCellDef="let row">
<mat-checkbox (click)="$event.stopPropagation()"
(change)="$event ? selectCell(row) : null"
[checked]="selection.isSelected(row)">
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="{{column.Datapropertyname}}" *ngFor="let column of dtColumns">
<th class="mat-header-centered" mat-header-cell *matHeaderCellDef mat-sort-header [disabled]="column.DisabledSort" [width]="column.Width"> {{column.Text}} </th>
<td class="mat-header-centered" mat-cell *matCellDef="let element" [ngStyle]="{'text-align': column.Align}" >
<mat-icon *ngIf="column.Datapropertyname == 'BtnExpand'" class="icon-expanded" [ngStyle]="{'color': element.Expanded ? '#f44336': '#5fa9bc'}" width="12px" style="cursor:pointer;" (click)="clickExpanded(element)">
{{element.BtnExpand}}
</mat-icon>
<div *ngIf="column.Datapropertyname != 'BtnExpand'">
{{element[column.Datapropertyname] | dynamicPipe: column.Pipe}}
</div>
</td>
</ng-container>
<ng-container matColumnDef="expandedDetail">
<td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplay.length">
<div class="expanded-detail element-detail" [@detailExpand]="(dtColumnExpanded?.EnableExpandedDetail && (element.Expanded || dtColumnExpanded?.Expanded)) ? 'expanded' : 'collapsed'">
<div class='table-responsive'>
<table>
<tbody [ngStyle]="{'line-height': lineHeight}">
<tr *ngFor="let col of dtColumnsTableExpanded">
<th [width]="col.Width">{{col.Text}}</th>
<td>{{element[col.Datapropertyname]}}</td>
</tr>
</tbody>
</table>
</div>
<div class='panel panel-info' style='margin-bottom: 0px;'>
<div class='panel-heading' style='padding: 2px 15px;'>{{dtColumnExpanded?.Text}}</div>
<div class='panel-body'>
<div *ngIf="dtColumnExpanded?.Attachment">
<div class="anexo panel-body">
<div style="display: inline-flex;" class="col-xs-12 col-m-12 col-sm-12 col-lg-1">
<a (click)="downloadAttachments(att[dtColumnExpanded?.DataPropertyUrlDownloadAttachment], att[dtColumnExpanded?.DataPropertyNameAttachment])" style="margin-right: 20px;" *ngFor="let att of _displayedAttachments" class="file">
<div style="text-align: center; cursor: pointer;" *ngIf="att.key == element[dtColumnExpanded?.DataPropertyKeyAttachment]">
<div style="text-align: center;">
<img width="32" height="32" src="{{att.src}}" />
</div>
<span class="dir-label">{{att[dtColumnExpanded?.DataPropertyNameAttachment] | removeFormat}}</span>
</div>
</a>
</div>
</div>
</div>
<div *ngIf="!dtColumnExpanded?.Attachment">
<p>{{element[dtColumnExpanded?.Datapropertyname]}}</p>
</div>
</div>
</div>
</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
<tr mat-row *matRowDef="let element; columns: columnsToDisplay;" class="element-row"></tr>
<tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="detail-row"></tr>
</table>
<mat-toolbar *ngIf="_displayedValues?.length == 0 && !showProgressBar" style="font-size: 12px; justify-content: center;">{{emptyDataMessage}}</mat-toolbar>
<mat-paginator [ngStyle]="{'display': (showPaginator && _displayedValues?.length > 0) ? 'block': 'none'}" [pageSize]="10" [pageSizeOptions]="[3, 5, 10, 20]" showFirstLastButtons></mat-paginator>
</div>
<table *ngIf="showTablePrint" style="display: block; width: 100%; border: 1pt solid #000000; border-collapse: collapse; font-size: 8pt;" cellpadding="3" id="TABLE">
<thead>
<tr>
<th style="border: 1px solid black;" *ngFor="let column of dtAllColumns">{{column.Text}}</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<iframe name="PrintFrame" id="PrintFrame" style="display: none"></iframe>`,
styles: [`table{width:100%}.expanded-detail{padding:5px}tr.detail-row{height:0}tr.element-row:not(.expanded-row):hover{background:#f5f5f5}tr.element-row:not(.expanded-row):active{background:#efefef}tr.element-row:nth-child(4n+1){background-color:#ddd}tr.element-row:hover{background-color:#d7d5d5!important}.element-row td{border-bottom-width:0}.element-detail{overflow:hidden}.table-header{min-height:55px;padding:8px 3px 0}.dataTable_wrapper{display:flex;flex-direction:column;min-width:300px}.infinite-animation{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}img:hover{transition:.25s;-webkit-transform:scale(1.2);transform:scale(1.2)}tr.mat-header-row{height:30px}th.mat-header-cell{color:#000}.mat-cell,.mat-footer-cell{font-size:11px}.mat-toolbar-row,.mat-toolbar-single-row{height:40px}.mat-toolbar{background:#f5f5f5;color:rgba(0,0,0,.87)}.icon-expanded{font-size:21px}mat-icon{vertical-align:middle}::ng-deep .mat-sort-header-container{justify-content:center}.timeline{position:relative;margin:0 0 30px;padding:0;list-style:none}.timeline:before{content:'';position:absolute;top:0;bottom:0;width:4px;background:#ddd;left:31px;margin:0;border-radius:2px}.timeline>li:after{clear:both}.timeline>li:after,.timeline>li:before{content:" ";display:table}.timeline>li{position:relative;margin-right:10px;margin-bottom:15px}.timeline>.time-label>span{font-weight:600;padding:5px;display:inline-block;background-color:#fff;border-radius:4px}.timeline>li>.fa,.timeline>li>.glyphicon,.timeline>li>.ion{width:30px;height:30px;font-size:15px;line-height:30px;position:absolute;color:#666;background:#d2d6de;border-radius:50%;text-align:center;left:18px;top:0}.timeline-inverse>li>.timeline-item{background:#f0f0f0;border:1px solid #ddd;box-shadow:none}.timeline>li>.timeline-item{box-shadow:0 1px 1px rgba(0,0,0,.1);border-radius:3px;margin-top:0;color:#444;margin-left:60px;padding:0;position:relative;background:#f0f0f0;border:1px solid #ddd;box-shadow:none}.timeline>li>.timeline-item>.time{color:#999;float:right;padding:10px;font-size:12px}.timeline-inverse>li>.timeline-item>.timeline-header{border-bottom-color:#ddd}.timeline>li>.timeline-item>.timeline-header{margin:0;color:#555;border-bottom:1px solid #f4f4f4;padding:10px;font-size:16px;line-height:1.1}.timeline>li>.timeline-item>.timeline-header>a{font-weight:600}.timeline>li>.timeline-item>.timeline-body,.timeline>li>.timeline-item>.timeline-footer{padding:10px}.timeline .file{display:inline-block;height:58px;width:180px;line-height:55px;border-radius:3px;padding-left:3px;color:#555}.timeline .file:hover{background-color:#fff;display:inline-block;height:58px;width:180px;line-height:55px;border-radius:3px;padding-left:3px;color:#e96656;box-shadow:2px 2px 2px #888}.timeline .file .text{font-size:13px}.timeline .dir-label{width:100px;text-align:center}`],
animations: [
trigger('detailExpand', [
state('collapsed', style({ height: '0px', minHeight: '0', display: 'none' })),
state('expanded', style({ height: '*' })),
transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
]),
]
},] },
];
/** @nocollapse */
DatatableComponent.ctorParameters = () => [
{ type: DatatableService },
{ type: ChangeDetectorRef }
];
DatatableComponent.propDecorators = {
showPaginator: [{ type: Input }],
showSearch: [{ type: Input }],
showExportButtons: [{ type: Input }],
showCheckbox: [{ type: Input }],
disabledToolTipIcons: [{ type: Input }],
emptyDataMessage: [{ type: Input }],
selectedRows: [{ type: Output }],
changeValues: [{ type: Output }],
sort: [{ type: ViewChild, args: [MatSort,] }],
paginator: [{ type: ViewChild, args: [MatPaginator,] }],
dtColumnsComponent: [{ type: ContentChildren, args: [DataColumnsComponent,] }],
rowExpanded: [{ type: ContentChildren, args: [DataExpandedComponent,] }],
displayedAttachments: [{ type: Input }],
displayedValues: [{ type: Input }],
apiUrl: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
/** @type {?} */
const ptRangeLabel = (page, pageSize, length) => {
if (length == 0 || pageSize == 0) {
return `0 de ${length}`;
}
length = Math.max(length, 0);
/** @type {?} */
const startIndex = page * pageSize;
/** @type {?} */
const endIndex = startIndex < length ? Math.min(startIndex + pageSize, length) : startIndex + pageSize;
return `${startIndex + 1} - ${endIndex} de ${length} registros`;
};
/**
* @return {?}
*/
function getPortuguesePaginatorIntl() {
/** @type {?} */
const paginatorIntl = new MatPaginatorIntl();
paginatorIntl.itemsPerPageLabel = "Itens por página:";
paginatorIntl.firstPageLabel = "Primeira página";
paginatorIntl.lastPageLabel = "Última página";
paginatorIntl.nextPageLabel = "Próxima página";
paginatorIntl.previousPageLabel = "Página anterior";
paginatorIntl.getRangeLabel = ptRangeLabel;
return paginatorIntl;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
/** @type {?} */
const moment$1 = moment_;
class DynamicPipe {
/**
* @param {?} value
* @param {?} modifier
* @return {?}
*/
transform(value, modifier) {
if (!modifier)
return value;
// Evaluate pipe string
return eval('this.' + modifier + '(\'' + value + '\')');
}
/**
* @param {?} value
* @return {?}
*/
date(value) {
/** @type {?} */
let response = '';
if (value && value.length > 0) {
moment$1.locale('pt-BR');
response = moment$1(value).format('L');
}
return response;
}
/**
* @param {?} value
* @return {?}