Merge pull request #3664 from IgniteUI/vnext

Releasing new qb and tile manager samples on prod.

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;
     }
 }

live-editing/configs/TileManagerConfigGenerator.ts

@@ -0,0 +1,18 @@
+import { Config, IConfigGenerator} from 'igniteui-live-editing'
+import { BaseAppConfig } from './BaseConfig';
+export class TileManagerConfigGenerator implements IConfigGenerator {
+
+
+    public generateConfigs(): Config[] {
+        const configs = new Array<Config>();
+
+        configs.push(new Config({
+            component: 'TileManagerComponent',
+            additionalDependencies: ["igniteui-webcomponents"],
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/layouts/tile-manager/"
+        }));
+
+        return configs;
+    }
+}

live-editing/generators/ConfigGenerators.ts

@@ -63,6 +63,7 @@ import { StepperConfigGenerator } from '../configs/StepperConfigGenerator';
 import { PaginationConfigGenerator } from '../configs/PaginationConfigGenerator';
 import { PivotGridConfigGenerator } from '../configs/PivotGridConfigGenerator';
 import { QueryBuilderConfigGenerator } from '../configs/QueryBuilderConfigGenerator';
+import { TileManagerConfigGenerator } from '../configs/TileManagerConfigGenerator';
 
 export const CONFIG_GENERATORS =
     [
@@ -136,6 +137,7 @@ export const CONFIG_GENERATORS =
         TransactionsConfigGenerator,
         SplitterConfigGenerator,
         DockManagerConfigGenerator,
+        TileManagerConfigGenerator,
         PaginationConfigGenerator,
         QueryBuilderConfigGenerator
     ];

package-lock.json

@@ -71,16 +71,17 @@
     "express": "^4.18.2",
     "file-saver": "^2.0.2",
     "hammerjs": "^2.0.8",
-    "igniteui-angular": "19.1.3",
+    "igniteui-angular": "19.1.4",
     "igniteui-angular-charts": "^19.0.1",
     "igniteui-angular-core": "^19.0.1",
     "igniteui-angular-extras": "^19.1.2",
-    "igniteui-angular-i18n": "^19.1.0",
+    "igniteui-angular-i18n": "^19.1.4",
     "igniteui-dockmanager": "^1.16.0",
-    "igniteui-live-editing": "^3.0.0",
-    "igniteui-webcomponents": "^5.2.4",
+    "igniteui-live-editing": "^3.0.2",
+    "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() {