Merge pull request #3631 from IgniteUI/dmdimitrov/query-builder-sql-sample

feat(query-builder): add SQL query sample

Author: ChronosSF

live-editing/configs/QueryBuilderConfigGenerator.ts

@@ -1,8 +1,6 @@
 import { Config, IConfigGenerator} from 'igniteui-live-editing'
 import { BaseAppConfig } from './BaseConfig';
 export class QueryBuilderConfigGenerator implements IConfigGenerator {
-
-
     public generateConfigs(): Config[] {
         const configs = new Array<Config>();
 
@@ -25,6 +23,13 @@ export class QueryBuilderConfigGenerator implements IConfigGenerator {
             shortenComponentPathBy: "/interactions/query-builder/"
         }));
 
+        // configs.push(new Config({
+        //     component: 'QueryBuilderSqlSampleComponent',
+        //     additionalDependencies: ["sql-formatter"],
+        //     appConfig: BaseAppConfig,
+        //     shortenComponentPathBy: "/interactions/query-builder/"
+        // })); // sql-formatter is not available in the live editing environment and cannot be enabled per config atm
+
         return configs;
     }
 }

package-lock.json

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

package.json

@@ -51,5 +51,6 @@ export const interactionsRoutesData = {
     'query-builder-sample-1': { displayName: 'Query Builder Sample 1', parentName: 'Query Builder' },
     'query-builder-style': { displayName: 'Query Builder Style Sample', parentName: 'Query Builder' },
     'query-builder-template-sample': { displayName: 'Query Builder Template Sample', parentName: 'Query Builder' },
+    'query-builder-sql-sample': { displayName: 'Query Builder SQL Sample', parentName: 'Query Builder' },
     'query-builder-request-sample': { displayName: 'Query Builder Request Sample', parentName: 'Query Builder' }
 };

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

@@ -23,6 +23,7 @@ import { OverlayStylingComponent } from './overlay/overlay-styling/overlay-styli
 import { QueryBuilderSample1Component } from './query-builder/query-builder-sample-1/query-builder-sample-1.component';
 import { QueryBuilderStyleComponent } from './query-builder/query-builder-style/query-builder-style.component';
 import { QueryBuilderTemplateSampleComponent } from './query-builder/query-builder-template-sample/query-builder-template-sample.component';
+import { QueryBuilderSqlSampleComponent } from './query-builder/query-builder-sql-sample/query-builder-sql-sample.component';
 import { QueryBuilderRequestSampleComponent } from './query-builder/query-builder-request-sample/query-builder-request-sample.component';
 import { RippleSample2Component } from './ripple/ripple-sample-2/ripple-sample-2.component';
 import { RippleSample3Component } from './ripple/ripple-sample-3/ripple-sample-3.component';
@@ -306,6 +307,11 @@ export const InteractionsRoutes: Routes = [
         data: interactionsRoutesData['query-builder-template-sample'],
         path: 'query-builder-template-sample'
     },
+    {
+        component: QueryBuilderSqlSampleComponent,
+        data: interactionsRoutesData['query-builder-sql-sample'],
+        path: 'query-builder-sql-sample'
+    },
     {
         component: QueryBuilderRequestSampleComponent,
         data: interactionsRoutesData['query-builder-request-sample'],

src/app/interactions/interactions.routes.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-request-sample/query-builder-request-sample.component.ts

@@ -0,0 +1,17 @@
+<div class="wrapper">
+    <div class="flex-container">
+        <igx-query-builder #queryBuilder
+            [entities]="entities"
+            [(expressionTree)]="expressionTree"
+            (expressionTreeChange)="onChange()"
+            class="container">
+        </igx-query-builder>
+    
+        <div class="container">
+            <pre>{{sqlQuery}}</pre>
+        </div>
+    </div>
+
+    <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.html

@@ -0,0 +1,32 @@
+.wrapper {
+    margin: 10px;
+    height: 100%;
+    overflow-y: auto;
+}
+
+.flex-container {
+    display: flex;
+    flex-wrap: wrap;
+    margin-right: 20px;
+}
+
+.container {
+    flex: 1 200px;
+    box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.75);
+    border-radius: 0.75rem;
+    margin: 5px 0px 20px 20px;
+    word-break: break-all;
+    word-wrap: break-word;
+
+    pre {
+        margin-left: 10px
+    }
+}
+
+igx-query-builder {
+    flex: 1 100px;
+}
+
+igx-grid {
+    margin-left: 20px;
+}