feat(query-builder): update styles and configuration

Author: igdmdimitrov

live-editing/configs/QueryBuilderConfigGenerator.ts

@@ -1,10 +1,6 @@
 import { Config, IConfigGenerator} from 'igniteui-live-editing'
 import { BaseAppConfig } from './BaseConfig';
 export class QueryBuilderConfigGenerator implements IConfigGenerator {
-    public additionalImports = {
-        RemoteLoDService: '../../src/app/services/remote-lod.service'
-    };
-
     public generateConfigs(): Config[] {
         const configs = new Array<Config>();
 
@@ -29,7 +25,6 @@ export class QueryBuilderConfigGenerator implements IConfigGenerator {
 
         configs.push(new Config({
             component: 'QueryBuilderSqlSampleComponent',
-            additionalFiles: ['/src/app/interactions/query-builder/query-builder-sql-sample/data-query.ts'],
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/interactions/query-builder/"
         }));

package-lock.json

@@ -82,7 +82,6 @@
     "minireset.css": "0.0.6",
     "rxjs": "^7.8.2",
     "sql-formatter": "^15.4.11",
-    "sql.js": "^1.12.0",
     "tslib": "^2.6.1",
     "zone.js": "~0.15.0"
   },

package.json

@@ -3,7 +3,8 @@
         <igx-query-builder #queryBuilder
             [entities]="entities"
             [(expressionTree)]="expressionTree"
-            (expressionTreeChange)="executeQuery()">
+            (expressionTreeChange)="executeQuery()"
+            class="output-area">
         </igx-query-builder>
 
         <div class="output-area">

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

@@ -7,6 +7,7 @@
 .container {
     display: flex;
     flex-wrap: wrap;
+    margin-right: 20px;
 }
 
 igx-query-builder {
@@ -16,8 +17,8 @@ igx-query-builder {
 .output-area{
     flex: 1 200px;
     box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.75);
-    border-radius: 4px;
-    margin: 5px 20px 20px 20px;
+    border-radius: 0.75rem;
+    margin: 5px 0px 20px 20px;
     word-break: break-all;
     word-wrap: break-word;
 

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

@@ -1,7 +1,8 @@
 import { HttpClient } from '@angular/common/http';
-import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
-import { EntityType, FieldType, FilteringExpressionsTree, IExpressionTree, IgxGridComponent, IgxQueryBuilderComponent, IgxStringFilteringOperand } from 'igniteui-angular';
+import { ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
+import { EntityType, FilteringExpressionsTree, IExpressionTree, IgxGridComponent, IgxQueryBuilderComponent, IgxStringFilteringOperand } from 'igniteui-angular';
 import { format } from 'sql-formatter';
+
 const API_ENDPOINT = 'https://data-northwind.indigo.design';
 
 @Component({
@@ -22,7 +23,7 @@ export class QueryBuilderSqlSampleComponent implements OnInit {
     public expressionTree: IExpressionTree;
     public sqlQuery: string = 'SQL Query will be displayed here';
 
-    constructor(private http: HttpClient) {}
+    constructor(private http: HttpClient, private cdr: ChangeDetectorRef) {}
 
     public ngOnInit(): void {
         this.setEntities();
@@ -80,7 +81,7 @@ export class QueryBuilderSqlSampleComponent implements OnInit {
     }
 
     private setInitialExpressionTree() {
-        const categoriesTree = new FilteringExpressionsTree(0, undefined, 'Categories', ['categoryId', 'name']);
+        const categoriesTree = new FilteringExpressionsTree(0, undefined, 'Categories', ['categoryId']);
         categoriesTree.filteringOperands.push({
             fieldName: 'name',
             conditionName: IgxStringFilteringOperand.instance().condition('equals').name,
@@ -210,8 +211,11 @@ export class QueryBuilderSqlSampleComponent implements OnInit {
     }
 
     private setGridData() {
+        this.grid.isLoading = true;
         this.http.post(`${API_ENDPOINT}/QueryBuilder/ExecuteQuery`, this.expressionTree).subscribe(data => {
             this.gridData = Object.values(data)[0] as any[];
+            this.grid.isLoading = false;
         });
+        this.cdr.detectChanges();
     }
 }