Releasing new qb and tile manager samples on prod.

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.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"
  },

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

@@ -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.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/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() {