Skip to content

Commit 1720c86

Browse files
gedinakovagedinakova
committed
feat(QB): Add a sample for requesting data from swagger
1 parent b1bfc23 commit 1720c86

6 files changed

Lines changed: 241 additions & 1 deletion

File tree

‎src/app/interactions/interactions-routes-data.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,5 +50,6 @@ export const interactionsRoutesData = {
5050
'icons-sample': { displayName: 'Icons sample', parentName: 'Drag and Drop' },
5151
'query-builder-sample-1': { displayName: 'Query Builder Sample 1', parentName: 'Query Builder' },
5252
'query-builder-style': { displayName: 'Query Builder Style Sample', parentName: 'Query Builder' },
53-
'query-builder-template-sample': { displayName: 'Query Builder Template Sample', parentName: 'Query Builder' }
53+
'query-builder-template-sample': { displayName: 'Query Builder Template Sample', parentName: 'Query Builder' },
54+
'query-builder-request-sample': { displayName: 'Query Builder Request Sample', parentName: 'Query Builder' }
5455
};

‎src/app/interactions/interactions.routes.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import { OverlayStylingComponent } from './overlay/overlay-styling/overlay-styli
2323
import { QueryBuilderSample1Component } from './query-builder/query-builder-sample-1/query-builder-sample-1.component';
2424
import { QueryBuilderStyleComponent } from './query-builder/query-builder-style/query-builder-style.component';
2525
import { QueryBuilderTemplateSampleComponent } from './query-builder/query-builder-template-sample/query-builder-template-sample.component';
26+
import { QueryBuilderRequestSampleComponent } from './query-builder/query-builder-request-sample/query-builder-request-sample.component';
2627
import { RippleSample2Component } from './ripple/ripple-sample-2/ripple-sample-2.component';
2728
import { RippleSample3Component } from './ripple/ripple-sample-3/ripple-sample-3.component';
2829
import { RippleSample4Component } from './ripple/ripple-sample-4/ripple-sample-4.component';
@@ -304,5 +305,10 @@ export const InteractionsRoutes: Routes = [
304305
component: QueryBuilderTemplateSampleComponent,
305306
data: interactionsRoutesData['query-builder-template-sample'],
306307
path: 'query-builder-template-sample'
308+
},
309+
{
310+
component: QueryBuilderRequestSampleComponent,
311+
data: interactionsRoutesData['query-builder-request-sample'],
312+
path: 'query-builder-request-sample'
307313
}
308314
];

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

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { HttpClient } from '@angular/common/http';
2+
import { Injectable } from '@angular/core';
3+
import { catchError, Observable } from 'rxjs';
4+
5+
const API_ENDPOINT = 'https://data-northwind.indigo.design';
6+
7+
@Injectable({
8+
providedIn: 'root'
9+
})
10+
export class NorthwindSwaggerService {
11+
constructor(
12+
private http: HttpClient
13+
) { }
14+
15+
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();
43+
}
44+
}

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<div class="wrapper">
2+
<igx-query-builder #queryBuilder
3+
[entities]="entities"
4+
[expressionTree]="expressionTree">
5+
</igx-query-builder>
6+
7+
<div class="output-area">
8+
<!-- <pre>{{ printExpressionTree(queryBuilder.expressionTree) }}</pre> -->
9+
<igx-grid [data]="data"></igx-grid>
10+
</div>
11+
</div>

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.wrapper{
2+
margin: 10px;
3+
height: 100%;
4+
overflow-y: auto;
5+
}
6+
7+
.output-area{
8+
box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.75);
9+
border-radius: 4px;
10+
margin: 0 20px 20px 20px;
11+
}

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

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
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';
4+
import { NorthwindSwaggerService } from './northwind.service';
5+
import { takeLast } from 'rxjs';
6+
7+
@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]
12+
})
13+
export class QueryBuilderRequestSampleComponent implements OnInit {
14+
public entities: any[];
15+
public companiesFields: any[];
16+
public ordersFields: any[];
17+
public expressionTree: IExpressionTree;
18+
public backendUrl = `https://data-northwind-qb.indigo.design`;
19+
public queryResult: string;
20+
21+
public data: [];
22+
constructor(private northwindService: NorthwindSwaggerService, private http: HttpClient) {}
23+
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" }
39+
];
40+
41+
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" }
55+
];
56+
57+
this.entities = [
58+
{
59+
name: "Companies",
60+
fields: this.companiesFields
61+
},
62+
{
63+
name: "Orders",
64+
fields: this.ordersFields
65+
}
66+
];
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+
});
93+
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+
114+
this.expressionTree = tree;
115+
116+
this.onChange();
117+
}
118+
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());
166+
}
167+
}

0 commit comments

Comments
 (0)