Skip to content

Commit 5ab2628

Browse files
teodosiahteodosiah
committed
feat(query-builder): execute post request and set grid's data
1 parent 1720c86 commit 5ab2628

3 files changed

Lines changed: 42 additions & 167 deletions

File tree

‎src/app/interactions/query-builder/query-builder-request-sample/northwind.service.ts‎

Lines changed: 2 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { HttpClient } from '@angular/common/http';
22
import { Injectable } from '@angular/core';
3-
import { catchError, Observable } from 'rxjs';
3+
import { Observable } from 'rxjs';
44

55
const API_ENDPOINT = 'https://data-northwind.indigo.design';
66

@@ -13,32 +13,6 @@ export class NorthwindSwaggerService {
1313
) { }
1414

1515
public postQueryBuilderResult(body: Object): Observable<Object> {
16-
// const body = {
17-
// entity: 'string',
18-
// returnFields: [
19-
// 'string'
20-
// ],
21-
// operator: 'And',
22-
// filteringOperands: [
23-
// {
24-
// fieldName: 'string',
25-
// ignoreCase: true,
26-
// condition: {
27-
// name: 'string',
28-
// isUnary: true,
29-
// iconName: 'string'
30-
// },
31-
// searchVal: {},
32-
// searchTree: null,
33-
// operator: 'And',
34-
// filteringOperands: [
35-
// null
36-
// ]
37-
// }
38-
// ]
39-
// };
40-
// return this.http.post(`${API_ENDPOINT}/QueryBuilder/ExecuteQuery`, body);
41-
return this.http.post(`${API_ENDPOINT}/QueryBuilder/ExecuteQuery`, body)
42-
.pipe();
16+
return this.http.post(`${API_ENDPOINT}/QueryBuilder/ExecuteQuery`, body);
4317
}
4418
}

‎src/app/interactions/query-builder/query-builder-request-sample/query-builder-request-sample.component.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<div class="wrapper">
22
<igx-query-builder #queryBuilder
33
[entities]="entities"
4-
[expressionTree]="expressionTree">
4+
[(expressionTree)]="expressionTree"
5+
(expressionTreeChange)="onChange()">
56
</igx-query-builder>
67

78
<div class="output-area">
8-
<!-- <pre>{{ printExpressionTree(queryBuilder.expressionTree) }}</pre> -->
9-
<igx-grid [data]="data"></igx-grid>
9+
<igx-grid #grid [data]="data" [autoGenerate]="true"></igx-grid>
1010
</div>
1111
</div>

‎src/app/interactions/query-builder/query-builder-request-sample/query-builder-request-sample.component.ts‎

Lines changed: 37 additions & 136 deletions
Original file line numberDiff line numberDiff line change
@@ -1,167 +1,68 @@
1-
import { Component, OnInit } from '@angular/core';
2-
import { HttpClient } from '@angular/common/http';
3-
import { FilteringExpressionsTree, FilteringLogic, IExpressionTree, IgxBooleanFilteringOperand, IgxDateFilteringOperand, IgxNumberFilteringOperand, IgxQueryBuilderComponent, IgxStringFilteringOperand } from 'igniteui-angular';
1+
import { Component, OnInit, ViewChild } from '@angular/core';
2+
import { FilteringExpressionsTree, FilteringLogic, IExpressionTree, IgxGridComponent, IgxQueryBuilderComponent } from 'igniteui-angular';
43
import { NorthwindSwaggerService } from './northwind.service';
5-
import { takeLast } from 'rxjs';
64

75
@Component({
8-
selector: 'app-query-builder-sample-1',
9-
styleUrls: ['./query-builder-sample-1.component.scss'],
10-
templateUrl: 'query-builder-sample-1.component.html',
11-
imports: [IgxQueryBuilderComponent]
6+
selector: 'query-builder-request-sample',
7+
styleUrls: ['./query-builder-request-sample.component.scss'],
8+
templateUrl: 'query-builder-request-sample.component.html',
9+
imports: [IgxQueryBuilderComponent, IgxGridComponent]
1210
})
1311
export class QueryBuilderRequestSampleComponent implements OnInit {
12+
@ViewChild('grid', { static: true })
13+
public grid: IgxGridComponent;
14+
1415
public entities: any[];
15-
public companiesFields: any[];
16+
public customersFields: any[];
1617
public ordersFields: any[];
1718
public expressionTree: IExpressionTree;
18-
public backendUrl = `https://data-northwind-qb.indigo.design`;
19-
public queryResult: string;
19+
public data: any[] = [];
20+
21+
constructor(private northwindService: NorthwindSwaggerService) {}
2022

21-
public data: [];
22-
constructor(private northwindService: NorthwindSwaggerService, private http: HttpClient) {}
2323
public ngOnInit(): void {
24-
this.companiesFields = [
25-
{ field: "ID", dataType: "string" },
26-
{ field: "CompanyName", dataType: "string" },
27-
{ field: "ContactName", dataType: "string" },
28-
{ field: "Employees", dataType: "number" },
29-
{ field: "ContactTitle", dataType: "string" },
30-
{ field: "DateCreated", dataType: "date" },
31-
{ field: "TimeCreated", dataType: "time" },
32-
{ field: "Address", dataType: "string" },
33-
{ field: "City", dataType: "string" },
34-
{ field: "Region", dataType: "string" },
35-
{ field: "PostalCode", dataType: "string" },
36-
{ field: "Phone", dataType: "string" },
37-
{ field: "Fax", dataType: "string" },
38-
{ field: "Contract", dataType: "boolean" }
24+
this.customersFields = [
25+
{ field: "customerId", dataType: "string" },
26+
{ field: "companyName", dataType: "string" },
27+
{ field: "contactName", dataType: "string" },
28+
{ field: "contactTitle", dataType: "string" }
3929
];
4030

4131
this.ordersFields = [
42-
{ field: "CompanyID", dataType: "string" },
43-
{ field: "OrderID", dataType: "number" },
44-
{ field: "EmployeeId", dataType: "number" },
45-
{ field: "OrderDate", dataType: "date" },
46-
{ field: "RequiredDate", dataType: "date" },
47-
{ field: "ShippedDate", dataType: "date" },
48-
{ field: "ShipVia", dataType: "number" },
49-
{ field: "Freight", dataType: "number" },
50-
{ field: "ShipName", dataType: "string" },
51-
{ field: "ShipCity", dataType: "string" },
52-
{ field: "ShipPostalCode", dataType: "string" },
53-
{ field: "ShipCountry", dataType: "string" },
54-
{ field: "Region", dataType: "string" }
32+
{ field: "orderId", dataType: "number" },
33+
{ field: "customerId", dataType: "string" },
34+
{ field: "employeeId", dataType: "number" },
35+
{ field: "shipperId", dataType: "number" },
36+
{ field: "orderDate", dataType: "date" },
37+
{ field: "requiredDate", dataType: "date" },
38+
{ field: "shipVia", dataType: "number" },
39+
{ field: "freight", dataType: "number" },
40+
{ field: "shipName", dataType: "string" },
41+
{ field: "completed", dataType: "boolean" }
5542
];
5643

5744
this.entities = [
5845
{
59-
name: "Companies",
60-
fields: this.companiesFields
46+
name: "Customers",
47+
fields: this.customersFields
6148
},
6249
{
6350
name: "Orders",
6451
fields: this.ordersFields
6552
}
6653
];
67-
68-
const innerTree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Companies', ['ID']);
69-
innerTree.filteringOperands.push({
70-
fieldName: 'Employees',
71-
condition: IgxNumberFilteringOperand.instance().condition('greaterThan'),
72-
conditionName: 'greaterThan',
73-
searchVal: 100
74-
});
75-
innerTree.filteringOperands.push({
76-
fieldName: 'Contract',
77-
condition: IgxBooleanFilteringOperand.instance().condition('true'),
78-
conditionName: 'true'
79-
});
80-
81-
const subGroup = new FilteringExpressionsTree(FilteringLogic.Or, undefined, 'Orders', ['*']);
82-
subGroup.filteringOperands.push({
83-
fieldName: 'ShipCity',
84-
condition: IgxStringFilteringOperand.instance().condition('endsWith'),
85-
conditionName: IgxStringFilteringOperand.instance().condition('endsWith').name,
86-
searchVal: 'bar'
87-
});
88-
subGroup.filteringOperands.push({
89-
fieldName: 'OrderDate',
90-
condition: IgxDateFilteringOperand.instance().condition('today'),
91-
conditionName: IgxDateFilteringOperand.instance().condition('today').name
92-
});
9354

94-
const tree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Orders', ['*']);
95-
tree.filteringOperands.push({
96-
fieldName: 'CompanyID',
97-
condition: IgxStringFilteringOperand.instance().condition('inQuery'),
98-
conditionName: 'inQuery',
99-
searchTree: innerTree
100-
});
101-
tree.filteringOperands.push({
102-
fieldName: 'OrderDate',
103-
condition: IgxDateFilteringOperand.instance().condition('before'),
104-
conditionName: 'before',
105-
searchVal: new Date('2024-01-01T00:00:00.000Z')
106-
});
107-
tree.filteringOperands.push(subGroup);
108-
tree.filteringOperands.push({
109-
fieldName: 'ShippedDate',
110-
condition: IgxDateFilteringOperand.instance().condition('null'),
111-
conditionName: 'null'
112-
});
113-
55+
const tree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Orders', ['orderId', 'customerId', 'employeeId', 'shipperId', 'orderDate', 'requiredDate', 'shipVia', 'freight', 'shipName', 'completed']);
11456
this.expressionTree = tree;
11557

11658
this.onChange();
11759
}
11860

119-
public printExpressionTree(tree: IExpressionTree) {
120-
return tree ? JSON.stringify(tree, null, 2) : 'Please add an expression!';
121-
}
122-
123-
public async onChange() {
124-
const tree = JSON.stringify(this.expressionTree);
125-
// const resp = await fetch(this.backendUrl, {
126-
// method: 'POST',
127-
// mode: 'cors',
128-
// headers: {
129-
// 'Access-Control-Allow-Origin': '*',
130-
// 'Content-Type': 'application/json',
131-
// },
132-
// body: tree
133-
// })
134-
// if (resp.status == 200) {
135-
// this.queryResult = await resp.text();
136-
// }
137-
const body = {
138-
entity: 'Orders',
139-
returnFields: [
140-
'*'
141-
],
142-
operator: 'And',
143-
filteringOperands: [
144-
{
145-
fieldName: 'string',
146-
ignoreCase: true,
147-
condition: {
148-
name: 'string',
149-
isUnary: true,
150-
iconName: 'string'
151-
},
152-
searchVal: {},
153-
searchTree: null,
154-
operator: 'And',
155-
filteringOperands: [
156-
null
157-
]
158-
}
159-
]
160-
};
161-
162-
// console.log(tree);
163-
// this.northwindService.postQueryBuilderResult(this.expressionTree).subscribe(data => console.log(data));
164-
console.log(this.http.get(`${this.backendUrl}/Orders`)
165-
.pipe());
61+
public onChange() {
62+
this.grid.isLoading = true;
63+
this.northwindService.postQueryBuilderResult(this.expressionTree).subscribe(data =>{
64+
this.data = Object.values(data)[0];
65+
this.grid.isLoading = false;
66+
});
16667
}
16768
}

0 commit comments

Comments
 (0)