feat(query-builder): fixed initial load and visible columns

Author: igdmdimitrov

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

@@ -1,5 +1,5 @@
 import { HttpClient } from '@angular/common/http';
-import { ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
 import { FilteringExpressionsTree, FilteringLogic, IExpressionTree, IgxColumnComponent, IgxGridComponent, IgxQueryBuilderComponent } from 'igniteui-angular';
 
 const API_ENDPOINT = 'https://data-northwind.indigo.design';
@@ -10,7 +10,7 @@ const API_ENDPOINT = 'https://data-northwind.indigo.design';
     templateUrl: 'query-builder-request-sample.component.html',
     imports: [IgxQueryBuilderComponent, IgxGridComponent, IgxColumnComponent]
 })
-export class QueryBuilderRequestSampleComponent implements OnInit {
+export class QueryBuilderRequestSampleComponent implements OnInit, AfterViewInit {
     @ViewChild('grid', { static: true })
     public grid: IgxGridComponent;
 
@@ -56,18 +56,21 @@ export class QueryBuilderRequestSampleComponent implements OnInit {
 
         const tree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Orders', ['orderId', 'customerId', 'employeeId', 'shipperId', 'orderDate', 'requiredDate', 'shipVia', 'freight', 'shipName', 'completed']);
         this.expressionTree = tree;
-
+    }
+    
+    public ngAfterViewInit(): void {
         this.onChange();
     }
 
+
     public onChange() {
         this.grid.isLoading = true;
         this.http.post(`${API_ENDPOINT}/QueryBuilder/ExecuteQuery`, this.expressionTree).subscribe(data =>{
             this.data = Object.values(data)[0];
             this.grid.isLoading = false;
+            this.cdr.detectChanges();
+            this.calculateColsInView();
         });
-        this.cdr.detectChanges();
-        this.calculateColsInView();
     }
 
     private calculateColsInView() {

src/app/interactions/query-builder/query-builder-sql-sample/query-builder-sql-sample.component.html

@@ -1,17 +1,17 @@
 <div class="wrapper">
-    <div class="container">
+    <div class="flex-container">
         <igx-query-builder #queryBuilder
             [entities]="entities"
             [(expressionTree)]="expressionTree"
-            (expressionTreeChange)="executeQuery()"
-            class="output-area">
+            (expressionTreeChange)="onChange()"
+            class="container">
         </igx-query-builder>
 
-        <div class="output-area">
+        <div class="container">
             <pre>{{sqlQuery}}</pre>
         </div>
     </div>
 
-    <igx-grid #grid [data]="gridData" [autoGenerate]="true" height="270px" [width]="'calc(100% - 40px)'">
+    <igx-grid #grid [data]="data" [autoGenerate]="true" height="270px" [width]="'calc(100% - 40px)'">
     </igx-grid>
 </div>

src/app/interactions/query-builder/query-builder-sql-sample/query-builder-sql-sample.component.scss

@@ -4,17 +4,13 @@
     overflow-y: auto;
 }
 
-.container {
+.flex-container {
     display: flex;
     flex-wrap: wrap;
     margin-right: 20px;
 }
 
-igx-query-builder {
-    flex: 1 100px;
-}
-
-.output-area{
+.container {
     flex: 1 200px;
     box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.75);
     border-radius: 0.75rem;
@@ -27,6 +23,10 @@ igx-query-builder {
     }
 }
 
+igx-query-builder {
+    flex: 1 100px;
+}
+
 igx-grid {
     margin-left: 20px;
 }

src/app/interactions/query-builder/query-builder-sql-sample/query-builder-sql-sample.component.ts

@@ -1,6 +1,6 @@
 import { HttpClient } from '@angular/common/http';
-import { ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
-import { EntityType, FilteringExpressionsTree, IExpressionTree, IgxGridComponent, IgxQueryBuilderComponent, IgxStringFilteringOperand } from 'igniteui-angular';
+import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
+import { EntityType, FilteringExpressionsTree, IExpressionTree, IgxColumnComponent, IgxGridComponent, IgxNumberFilteringOperand, IgxQueryBuilderComponent, IgxStringFilteringOperand } from 'igniteui-angular';
 import { format } from 'sql-formatter';
 
 const API_ENDPOINT = 'https://data-northwind.indigo.design';
@@ -9,16 +9,13 @@ const API_ENDPOINT = 'https://data-northwind.indigo.design';
     selector: 'app-query-builder-sql-sample',
     styleUrls: ['./query-builder-sql-sample.component.scss'],
     templateUrl: 'query-builder-sql-sample.component.html',
-    imports: [IgxQueryBuilderComponent, IgxGridComponent]
+    imports: [IgxQueryBuilderComponent, IgxGridComponent, IgxColumnComponent]
 })
-export class QueryBuilderSqlSampleComponent implements OnInit {
-    @ViewChild('queryBuilder', { static: true })
-    public queryBuilder: IgxQueryBuilderComponent;
-
+export class QueryBuilderSqlSampleComponent implements OnInit, AfterViewInit {
     @ViewChild('grid', { static: true })
     public grid: IgxGridComponent;
 
-    public gridData = [];
+    public data: any[] = [];
     public entities: EntityType[] = [];
     public expressionTree: IExpressionTree;
     public sqlQuery: string = 'SQL Query will be displayed here';
@@ -28,13 +25,10 @@ export class QueryBuilderSqlSampleComponent implements OnInit {
     public ngOnInit(): void {
         this.setEntities();
         this.setInitialExpressionTree();
-        this.executeQuery();
     }
 
-    public executeQuery() {
-        const sqlQuery = this.transformExpressionTreeToSqlQuery(this.expressionTree);
-        this.sqlQuery = format(sqlQuery);
-        this.setGridData();
+    public ngAfterViewInit(): void {
+        this.onChange();
     }
 
     private setEntities() {
@@ -97,7 +91,7 @@ export class QueryBuilderSqlSampleComponent implements OnInit {
             searchTree: categoriesTree
         });
 
-        const suppliersTree = new FilteringExpressionsTree(0, undefined, 'Suppliers', ['*']);
+        const suppliersTree = new FilteringExpressionsTree(0, undefined, 'Suppliers', ['supplierId', 'companyName', 'contactName', 'contactTitle']);
         suppliersTree.filteringOperands.push({
             fieldName: 'supplierId',
             conditionName: IgxStringFilteringOperand.instance().condition('inQuery').name,
@@ -190,12 +184,20 @@ export class QueryBuilderSqlSampleComponent implements OnInit {
         }
     }
 
-    private setGridData() {
+    public onChange() {
+        const sqlQuery = this.transformExpressionTreeToSqlQuery(this.expressionTree);
+        this.sqlQuery = format(sqlQuery);
+
         this.grid.isLoading = true;
-        this.http.post(`${API_ENDPOINT}/QueryBuilder/ExecuteQuery`, this.expressionTree).subscribe(data => {
-            this.gridData = Object.values(data)[0] as any[];
+        this.http.post(`${API_ENDPOINT}/QueryBuilder/ExecuteQuery`, this.expressionTree).subscribe(data =>{
+            this.data = Object.values(data)[0];
             this.grid.isLoading = false;
+            this.cdr.detectChanges();
+            this.calculateColsInView();
         });
-        this.cdr.detectChanges();
+    }
+
+    private calculateColsInView() {
+        this.grid.columns.forEach(column => column.hidden = !this.expressionTree.returnFields.includes(column.field));
     }
 }