Merge pull request #11960 from IgniteUI/mtsvyatkova/query-builder

Query Builder Component

Author: ChronosSF

CHANGELOG.md

@@ -6,6 +6,24 @@ All notable changes for each version of this project will be documented in this
 - `IgxDropDown`
     - The `aria-label` attribute of the `IgxDropDownItemBase` can now be se to a custom value for its descendants (of which `IgxDropDownItem`) by the `ariaLabel` property.
 
+## 14.2.0
+
+### New Features
+- The filtering logic inside the grid's Advanced Filtering  is now extracted as a separate  `IgxQueryBuilder` component. The Query Builder allows you to build complex queries by specifying AND/OR operators, conditions and values using the UI. It outputs an object describing the structure of the query. Use the `locale` property to modify the locale settings. The default value is resolved to the global Angular application locale. The `resourceStrings` allows changing the displayed strings.
+    
+    - Code example below:
+
+    ```html
+    <igx-query-builder [fields]="fields">
+        <!-- Custom header -->
+        <igx-query-builder-header [title]="'Custom title'"
+            [showLegend]="false">
+        </igx-query-builder-header>
+    </igx-query-builder>
+    ```
+
+    - For more information, check out the [README](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/query-builder/README.md), [specification](https://github.com/IgniteUI/igniteui-angular/wiki/Query-Builder) and [official documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/query-builder).
+
 ## 14.1.0
 
 ### New Features

README.md

@@ -101,6 +101,7 @@ Some of the Angular chart types included are: [Polar chart](https://www.infragis
 |navbar|:white_check_mark:|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/navbar/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/navbar)|||||
 |navigation drawer|:white_check_mark:|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/navigation-drawer/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/navdrawer)|||||
 |pivot grid|:white_check_mark:|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/grids/pivot-grid/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/pivotgrid/pivot-grid)|||||
+|query builder|:white_check_mark:|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/query-builder/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/query-builder)|||||
 |radio|:white_check_mark:|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/radio/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/radio-button)|||||
 |rating|:white_check_mark:||[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/rating)|||||
 |select|:white_check_mark:|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/select/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/select)|||||

projects/igniteui-angular-i18n/src/i18n/BG/query-builder-resources.ts

@@ -0,0 +1,60 @@
+import { IQueryBuilderResourceStrings } from 'igniteui-angular';
+
+const QueryBuilderResourceStringsBG_: ExpandRequire<IQueryBuilderResourceStrings> = {
+    igx_query_builder_date_placeholder: 'Избери дата',
+    igx_query_builder_time_placeholder: 'Избери време',
+    igx_query_builder_filter_operator_and: 'And',
+    igx_query_builder_filter_operator_or: 'Or',
+    igx_query_builder_filter_contains: 'Съдържа',
+    igx_query_builder_filter_doesNotContain: 'Не съдържа',
+    igx_query_builder_filter_startsWith: 'Започва с',
+    igx_query_builder_filter_endsWith: 'Завършва на',
+    igx_query_builder_filter_equals: 'Равно на',
+    igx_query_builder_filter_doesNotEqual: 'Не е равно на',
+    igx_query_builder_filter_empty: 'Празно',
+    igx_query_builder_filter_notEmpty: 'Не е празно',
+    igx_query_builder_filter_null: 'Null',
+    igx_query_builder_filter_notNull: 'Не е Null',
+    igx_query_builder_filter_before: 'Преди',
+    igx_query_builder_filter_after: 'След',
+    igx_query_builder_filter_at: 'На',
+    igx_query_builder_filter_not_at: 'Не е на',
+    igx_query_builder_filter_at_before: 'На или преди',
+    igx_query_builder_filter_at_after: 'На или след',
+    igx_query_builder_filter_today: 'Днес',
+    igx_query_builder_filter_yesterday: 'Вчера',
+    igx_query_builder_filter_thisMonth: 'Този месец',
+    igx_query_builder_filter_lastMonth: 'Миналия месец',
+    igx_query_builder_filter_nextMonth: 'Следващия месец',
+    igx_query_builder_filter_thisYear: 'Тази година',
+    igx_query_builder_filter_lastYear: 'Миналата година',
+    igx_query_builder_filter_nextYear: 'Следващата година',
+    igx_query_builder_filter_greaterThan: 'По-голямо от',
+    igx_query_builder_filter_lessThan: 'По-малко от',
+    igx_query_builder_filter_greaterThanOrEqualTo: 'По-голямо или равно на',
+    igx_query_builder_filter_lessThanOrEqualTo: 'По-малко или равно на',
+    igx_query_builder_filter_true: 'True',
+    igx_query_builder_filter_false: 'False',
+    igx_query_builder_filter_all: 'Всички',    
+    igx_query_builder_title: 'Query Builder',
+    igx_query_builder_and_group: '"And" група',
+    igx_query_builder_or_group: '"Or" група',
+    igx_query_builder_end_group: 'Край на групирането',
+    igx_query_builder_and_label: 'and',
+    igx_query_builder_or_label: 'or',
+    igx_query_builder_add_condition: 'Условие',
+    igx_query_builder_create_and_group: 'Създай "And" група',
+    igx_query_builder_create_or_group: 'Създай "Or" група',
+    igx_query_builder_ungroup: 'Разгрупирай',
+    igx_query_builder_delete: 'Изтрий',
+    igx_query_builder_delete_filters: 'Изтрий филтрите',
+    igx_query_builder_initial_text: 'Започнете със създаване не група от условия свързани с "And" или "Or".',
+    igx_query_builder_column_placeholder: 'Избери колона',
+    igx_query_builder_condition_placeholder: 'Изберете филтър',
+    igx_query_builder_value_placeholder: 'Стойност',
+};
+
+/**
+ * Bulgarian resource strings for IgxQueryBuilder
+ */
+export const QueryBuilderResourceStringsBG = QueryBuilderResourceStringsBG_ as ExpandRequire<IQueryBuilderResourceStrings>;

projects/igniteui-angular-i18n/src/i18n/BG/resources.ts

@@ -10,6 +10,7 @@ import { TreeResourceStringsBG } from './tree-resources';
 import { InputResourceStringsBG } from './input-resources';
 import { ChipResourceStringsBG} from './chip-resources';
 import { ComboResourceStringsBG } from './combo-resources';
+import { QueryBuilderResourceStringsBG } from './query-builder-resources';
 
 /**
  * Bulgarian resource strings for all components
@@ -26,5 +27,6 @@ export const IgxResourceStringsBG = {
     ...TreeResourceStringsBG,
     ...InputResourceStringsBG,
     ...ChipResourceStringsBG,
-    ...ComboResourceStringsBG
+    ...ComboResourceStringsBG,
+    ...QueryBuilderResourceStringsBG,
 };

projects/igniteui-angular-i18n/src/i18n/CS/query-builder-resources.ts

@@ -0,0 +1,60 @@
+import { IQueryBuilderResourceStrings } from 'igniteui-angular';
+
+const QueryBuilderResourceStringsCS_: ExpandRequire<IQueryBuilderResourceStrings> = {
+    igx_query_builder_date_placeholder: 'Datum výdeje',
+    igx_query_builder_time_placeholder: 'Čas vyzvednutí',
+    igx_query_builder_filter_operator_and: 'A',
+    igx_query_builder_filter_operator_or: 'Nebo',
+    igx_query_builder_filter_contains: 'Obsahuje',
+    igx_query_builder_filter_doesNotContain: 'Neobsahuje',
+    igx_query_builder_filter_startsWith: 'Začíná s',
+    igx_query_builder_filter_endsWith: 'Končí s',
+    igx_query_builder_filter_equals: 'Se rovná',
+    igx_query_builder_filter_doesNotEqual: 'Nerovná se',
+    igx_query_builder_filter_empty: 'Prázdný',
+    igx_query_builder_filter_notEmpty: 'Není prázdný',
+    igx_query_builder_filter_null: 'Nula',
+    igx_query_builder_filter_notNull: 'Nenulový',
+    igx_query_builder_filter_before: 'Před',
+    igx_query_builder_filter_after: 'Po',
+    igx_query_builder_filter_at: 'V',
+    igx_query_builder_filter_not_at: 'Ne v',
+    igx_query_builder_filter_at_before: 'V nebo dříve',
+    igx_query_builder_filter_at_after: 'V nebo po',
+    igx_query_builder_filter_today: 'Dnes',
+    igx_query_builder_filter_yesterday: 'Včera',
+    igx_query_builder_filter_thisMonth: 'Tento měsíc',
+    igx_query_builder_filter_lastMonth: 'Minulý měsíc',
+    igx_query_builder_filter_nextMonth: 'Příští měsíc',
+    igx_query_builder_filter_thisYear: 'Tento rok',
+    igx_query_builder_filter_lastYear: 'Minulý rok',
+    igx_query_builder_filter_nextYear: 'Příští rok',
+    igx_query_builder_filter_greaterThan: 'Větší než',
+    igx_query_builder_filter_lessThan: 'Méně než',
+    igx_query_builder_filter_greaterThanOrEqualTo: 'Větší než nebo rovno',
+    igx_query_builder_filter_lessThanOrEqualTo: 'Méně než nebo rovno',
+    igx_query_builder_filter_true: 'True',
+    igx_query_builder_filter_false: 'False',
+    igx_query_builder_filter_all: 'Všechno',    
+    igx_query_builder_title: 'Query Builder',
+    igx_query_builder_and_group: '"A" skupina',
+    igx_query_builder_or_group: '"Nebo" skupina',
+    igx_query_builder_end_group: 'Ukončit skupina',
+    igx_query_builder_and_label: 'a',
+    igx_query_builder_or_label: 'nebo',
+    igx_query_builder_add_condition: 'Stav',
+    igx_query_builder_create_and_group: 'Vytvořte skupinu "A"',
+    igx_query_builder_create_or_group: 'Vytvořte skupinu "Nebo"',
+    igx_query_builder_ungroup: 'Oddělit',
+    igx_query_builder_delete: 'Vymazat',
+    igx_query_builder_delete_filters: 'Smazat filtry',
+    igx_query_builder_initial_text: 'Začněte vytvořením skupiny podmínek spojených s "And" nebo "Or"',
+    igx_query_builder_column_placeholder: 'Vyberte sloupec',
+    igx_query_builder_condition_placeholder: 'Vyberte filtr',
+    igx_query_builder_value_placeholder: 'Hodnota',
+};
+
+/**
+ * Czech resource strings for IgxQueryBuilder
+ */
+export const QueryBuilderResourceStringsCS = QueryBuilderResourceStringsCS_ as ExpandRequire<IQueryBuilderResourceStrings>;

projects/igniteui-angular-i18n/src/i18n/CS/resources.ts

@@ -10,6 +10,7 @@ import { TreeResourceStringsCS } from './tree-resources';
 import { InputResourceStringsCS } from './input-resources';
 import { ChipResourceStringsCS } from './chip-resources';
 import { ComboResourceStringsCS } from './combo-resources';
+import { QueryBuilderResourceStringsCS } from './query-builder-resources';
 
 /**
  * Czech resource strings for all components
@@ -26,5 +27,6 @@ export const IgxResourceStringsCS = {
     ...TreeResourceStringsCS,
     ...InputResourceStringsCS,
     ...ChipResourceStringsCS,
-    ...ComboResourceStringsCS
+    ...ComboResourceStringsCS,
+    ...QueryBuilderResourceStringsCS
 };

projects/igniteui-angular-i18n/src/i18n/DA/query-builder-resources.ts

@@ -0,0 +1,60 @@
+import { IQueryBuilderResourceStrings } from 'igniteui-angular';
+
+const QueryBuilderResourceStringsDA_: ExpandRequire<IQueryBuilderResourceStrings> = {
+    igx_query_builder_date_placeholder: 'Afhentningsdato',
+    igx_query_builder_time_placeholder: 'Afhentningstidspunkt',
+    igx_query_builder_filter_operator_and: 'Og',
+    igx_query_builder_filter_operator_or: 'Eller',
+    igx_query_builder_filter_contains: 'Indeholder',
+    igx_query_builder_filter_doesNotContain: 'Indeholder ikke',
+    igx_query_builder_filter_startsWith: 'Starter med',
+    igx_query_builder_filter_endsWith: 'Ender med',
+    igx_query_builder_filter_equals: 'Lig med',
+    igx_query_builder_filter_doesNotEqual: 'Er ikke lig med',
+    igx_query_builder_filter_empty: 'Tom',
+    igx_query_builder_filter_notEmpty: 'Ikke tom',
+    igx_query_builder_filter_null: 'Null',
+    igx_query_builder_filter_notNull: 'Ikke Null',
+    igx_query_builder_filter_before: 'Før',
+    igx_query_builder_filter_after: 'Efter',
+    igx_query_builder_filter_at: 'På',
+    igx_query_builder_filter_not_at: 'Ikke på',
+    igx_query_builder_filter_at_before: 'På eller før',
+    igx_query_builder_filter_at_after: 'På eller efter',
+    igx_query_builder_filter_today: 'I dag',
+    igx_query_builder_filter_yesterday: 'I går',
+    igx_query_builder_filter_thisMonth: 'Denne måned',
+    igx_query_builder_filter_lastMonth: 'Sidste måned',
+    igx_query_builder_filter_nextMonth: 'Næste måned',
+    igx_query_builder_filter_thisYear: 'Dette år',
+    igx_query_builder_filter_lastYear: 'Sidste år',
+    igx_query_builder_filter_nextYear: 'Næste år',
+    igx_query_builder_filter_greaterThan: 'Større end',
+    igx_query_builder_filter_lessThan: 'Mindre end',
+    igx_query_builder_filter_greaterThanOrEqualTo: 'Større end eller lig med',
+    igx_query_builder_filter_lessThanOrEqualTo: 'Mindre end eller lig med',
+    igx_query_builder_filter_true: 'True',
+    igx_query_builder_filter_false: 'False',
+    igx_query_builder_filter_all: 'Alle',    
+    igx_query_builder_title: 'Query Builder',
+    igx_query_builder_and_group: '"Og" gruppe',
+    igx_query_builder_or_group: '"Eller" gruppe',
+    igx_query_builder_end_group: 'Afslut gruppe',
+    igx_query_builder_and_label: 'og',
+    igx_query_builder_or_label: 'eller',
+    igx_query_builder_add_condition: 'Tilstand',
+    igx_query_builder_create_and_group: 'Opret "Og" gruppe',
+    igx_query_builder_create_or_group: 'Opret "Eller" gruppe',
+    igx_query_builder_ungroup: 'Fjern gruppe',
+    igx_query_builder_delete: 'Slet',
+    igx_query_builder_delete_filters: 'Slet filtre',
+    igx_query_builder_initial_text: 'Start med at oprette en tilstandsgruppe, der er knyttet til "Og" eller "Eller"',
+    igx_query_builder_column_placeholder: 'Vælg kolonne',
+    igx_query_builder_condition_placeholder: 'Vælg filter',
+    igx_query_builder_value_placeholder: 'Værdi',
+};
+
+/**
+ * Danish resource strings for IgxQueryBuilder
+ */
+export const QueryBuilderResourceStringsDA = QueryBuilderResourceStringsDA_ as ExpandRequire<IQueryBuilderResourceStrings>;

projects/igniteui-angular-i18n/src/i18n/DA/resources.ts

@@ -10,6 +10,7 @@ import { TreeResourceStringsDA } from './tree-resources';
 import { InputResourceStringsDA } from './input-resources';
 import { ChipResourceStringsDA } from './chip-resources';
 import { ComboResourceStringsDA } from './combo-resources';
+import { QueryBuilderResourceStringsDA } from './query-builder-resources';
 
 /**
  * Danish resource strings for all components
@@ -26,5 +27,6 @@ export const IgxResourceStringsDA = {
     ...TreeResourceStringsDA,
     ...InputResourceStringsDA,
     ...ChipResourceStringsDA,
-    ...ComboResourceStringsDA
+    ...ComboResourceStringsDA,
+    ...QueryBuilderResourceStringsDA
 };

projects/igniteui-angular-i18n/src/i18n/DE/query-builder-resources.ts

@@ -0,0 +1,60 @@
+import { IQueryBuilderResourceStrings } from 'igniteui-angular';
+
+const QueryBuilderResourceStringsDE_: ExpandRequire<IQueryBuilderResourceStrings> = {
+    igx_query_builder_date_placeholder: 'Wähle Datum',
+    igx_query_builder_time_placeholder: 'Abholungszeit',
+    igx_query_builder_filter_operator_and: 'Und',
+    igx_query_builder_filter_operator_or: 'Oder',
+    igx_query_builder_filter_contains: 'Enthält',
+    igx_query_builder_filter_doesNotContain: 'Enthält nicht',
+    igx_query_builder_filter_startsWith: 'Beginnt mit',
+    igx_query_builder_filter_endsWith: 'Endet mit',
+    igx_query_builder_filter_equals: 'Gleich',
+    igx_query_builder_filter_doesNotEqual: 'Nicht gleich',
+    igx_query_builder_filter_empty: 'Leer',
+    igx_query_builder_filter_notEmpty: 'Nicht leer',
+    igx_query_builder_filter_null: 'Null',
+    igx_query_builder_filter_notNull: 'Nicht Null',
+    igx_query_builder_filter_before: 'Vor',
+    igx_query_builder_filter_after: 'Nach',
+    igx_query_builder_filter_at: 'Um',
+    igx_query_builder_filter_not_at: 'Nicht um',
+    igx_query_builder_filter_at_before: 'Um oder vor',
+    igx_query_builder_filter_at_after: 'Um oder nach',
+    igx_query_builder_filter_today: 'Heute',
+    igx_query_builder_filter_yesterday: 'Gestern',
+    igx_query_builder_filter_thisMonth: 'Diesen Monat',
+    igx_query_builder_filter_lastMonth: 'Letzten Monat',
+    igx_query_builder_filter_nextMonth: 'Nächsten Monat',
+    igx_query_builder_filter_thisYear: 'Dieses Jahr',
+    igx_query_builder_filter_lastYear: 'Letztes Jahr',
+    igx_query_builder_filter_nextYear: 'Nächstes Jahr',
+    igx_query_builder_filter_greaterThan: 'Größer als',
+    igx_query_builder_filter_lessThan: 'Kleiner als',
+    igx_query_builder_filter_greaterThanOrEqualTo: 'Größer als oder gleich',
+    igx_query_builder_filter_lessThanOrEqualTo: 'Kleiner als oder gleich',
+    igx_query_builder_filter_true: 'Wahr',
+    igx_query_builder_filter_false: 'Falsch',
+    igx_query_builder_filter_all: 'Alle',    
+    igx_query_builder_title: 'Query Builder',
+    igx_query_builder_and_group: '"Und" Gruppe',
+    igx_query_builder_or_group: '"Oder" Gruppe',
+    igx_query_builder_end_group: 'Beende Gruppe',
+    igx_query_builder_and_label: 'und',
+    igx_query_builder_or_label: 'oder',
+    igx_query_builder_add_condition: 'Bedingung',
+    igx_query_builder_create_and_group: 'Erstelle "Und" Gruppe',
+    igx_query_builder_create_or_group: 'Erstelle "Oder" Gruppe',
+    igx_query_builder_ungroup: 'Lösche Gruppierung',
+    igx_query_builder_delete: 'Lösche',
+    igx_query_builder_delete_filters: 'Lösche Filter',
+    igx_query_builder_initial_text: 'Fange an mit einer Gruppe von Bedingungen, die mit "Und" oder "Oder" verknüpft sind',
+    igx_query_builder_column_placeholder: 'Wähle Spalte',
+    igx_query_builder_condition_placeholder: 'Wähle Filter',
+    igx_query_builder_value_placeholder: 'Wert',
+};
+
+/**
+ * German resource strings for IgxQueryBuilder
+ */
+export const QueryBuilderResourceStringsDE = QueryBuilderResourceStringsDE_ as ExpandRequire<IQueryBuilderResourceStrings>;

projects/igniteui-angular-i18n/src/i18n/DE/resources.ts

@@ -10,6 +10,7 @@ import { TreeResourceStringsDE } from './tree-resources';
 import { InputResourceStringsDE } from './input-resources';
 import { ChipResourceStringsDE } from './chip-resources';
 import { ComboResourceStringsDE } from './combo-resources';
+import { QueryBuilderResourceStringsDE } from './query-builder-resources';
 
 /**
  * German resource strings for all components
@@ -26,5 +27,6 @@ export const IgxResourceStringsDE = {
     ...TreeResourceStringsDE,
     ...InputResourceStringsDE,
     ...ChipResourceStringsDE,
-    ...ComboResourceStringsDE
+    ...ComboResourceStringsDE,
+    ...QueryBuilderResourceStringsDE
 };