import { Grid, Toolbar, Resize, Sort, Group, ContextMenu, Edit, Page, PdfExport, ExcelExport } from '@syncfusion/ej2-grids';
import { EmitType } from '@syncfusion/ej2-base';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { QueryBuilder } from '@syncfusion/ej2-querybuilder';
class NtaRequest{
post(url: string, data?: any): Promise<ExiosResponse>{
const promise = new Promise<ExiosResponse>((resolve, reject) => {
let xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open("POST", url);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("cache-control", "no-cache");
xhr.addEventListener("readystatechange", function () {
if (this.readyState === 4) {
if(this.status==200){
let resp: ExiosResponse = {
data : JSON.parse(this.response),
status : Number(this.status),
statusText: this.statusText,
}
resolve(resp);
}else{
let resp: ExiosResponse = {
status : Number(this.status),
statusText: this.statusText,
data: ((this.response!=null)?JSON.parse(this.response):null)
}
reject(resp);
}
};
});
xhr.addEventListener("error", function(){
let resp: ExiosResponse = {
status : Number(this.status),
statusText: this.statusText,
data:null
}
reject(resp);
});
try{
xhr.send(JSON.stringify(data));
}catch(e){
let resp: ExiosResponse = {
status : 0,
statusText: "error",
data:null
};
reject(resp);
}
});
return promise;
}
}
interface ExiosResponse {
data: any;
status: number;
statusText: string;
}
var reportId: number = 1
let axios = new NtaRequest;
class FilterData {
reportId: number
sqlRule: string
jsonRule: string
}
/*Grid
*
*
*/
Grid.Inject(Edit, Toolbar, Resize, Sort, Group, Edit, ContextMenu, Page, PdfExport, ExcelExport);
let toolbarGridClickHandler: EmitType<ClickEventArgs> = (args: ClickEventArgs) => {
if (args.item.id === 'Edit') {
var elToggled = document.getElementById("query-Buider");
if (elToggled.style.display == "block") {
elToggled.style.display = "none";
} else {
elToggled.style.display = "block";
}
};
};
let grid: Grid = new Grid({
toolbar: [{ text: 'Editar Consulta', tooltipText: 'Editar a consulta deste relatório', prefixIcon: 'e-expand', id: 'Edit' }, 'ExcelExport', 'PdfExport', 'Print', 'Search'],
toolbarClick: toolbarGridClickHandler,
editSettings: { allowEditing: false, allowAdding: false, allowDeleting: false },
allowSorting: true,
allowPaging: true,
allowPdfExport: true,
allowExcelExport: true,
allowGrouping: true,
allowMultiSorting: true,
allowFiltering: true,
contextMenuItems: ['AutoFit', 'AutoFitAll', 'SortAscending', 'SortDescending',
'Copy', 'PdfExport', 'ExcelExport', 'CsvExport', 'FirstPage', 'PrevPage',
'LastPage', 'NextPage'],
height: 265
});
let p1 = axios.post("GetData", {reportId: reportId})
let p2 = axios.post("GetGridColumns",{reportId: reportId})
Promise.all([p1,p2]).then(([resp1,resp2])=>{
grid.dataSource = resp1.data
grid.columns = resp2.data
grid.appendTo('#Grid');
})
let p3 = axios.post("GetQueryColumns",{reportId: reportId})
let p4 = axios.post("GetQueryWhere", {reportId: reportId})
Promise.all([p3,p4]).then(([resp3,resp4])=>{
qryBldrObj.columns = resp3.data;
qryBldrObj.rule= resp4.data;
console.log(resp4.data);
qryBldrObj.appendTo('#querybuilder');
})
let qryBldrObj: QueryBuilder = new QueryBuilder({
width: '100%',
displayMode: "Vertical"
});
//Botão Salver consulta
document.getElementById('saveRule').onclick = (): void => {
console.log("click!")
let strJsonRule: string = JSON.stringify(qryBldrObj.getValidRules(qryBldrObj.rule))
let strSqlRule: string = qryBldrObj.getSqlFromRules(qryBldrObj.rule)
let postData1 = new FilterData
postData1.reportId = reportId
postData1.jsonRule = strJsonRule
postData1.sqlRule = strSqlRule
console.log(postData1)
axios.post("SaveReport",postData1).then(()=>{
axios.post("GetData",{reportId: reportId}).then(resp=>{
grid.dataSource= resp.data
})
})
}
