@syncfusion/ej2-querybuilder 19.3.45 → 19.4.42
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.github/PULL_REQUEST_TEMPLATE/Bug.md +63 -0
- package/.github/PULL_REQUEST_TEMPLATE/feature.md +39 -0
- package/CHANGELOG.md +10 -1
- package/dist/ej2-querybuilder.umd.min.js +2 -2
- package/dist/ej2-querybuilder.umd.min.js.map +1 -1
- package/dist/es6/ej2-querybuilder.es2015.js +80 -17
- package/dist/es6/ej2-querybuilder.es2015.js.map +1 -1
- package/dist/es6/ej2-querybuilder.es5.js +80 -17
- package/dist/es6/ej2-querybuilder.es5.js.map +1 -1
- package/dist/global/ej2-querybuilder.min.js +2 -2
- package/dist/global/ej2-querybuilder.min.js.map +1 -1
- package/dist/global/index.d.ts +1 -1
- package/package.json +11 -11
- package/src/query-builder/query-builder.d.ts +6 -0
- package/src/query-builder/query-builder.js +80 -17
- package/styles/bootstrap4.css +5 -0
- package/styles/bootstrap5-dark.css +5 -0
- package/styles/bootstrap5.css +5 -0
- package/styles/query-builder/_fluent-definition.scss +107 -0
- package/styles/query-builder/bootstrap4.css +5 -0
- package/styles/query-builder/bootstrap5-dark.css +5 -0
- package/styles/query-builder/bootstrap5.css +5 -0
- package/styles/query-builder/icons/_fluent.scss +8 -0
|
@@ -134,6 +134,9 @@ let QueryBuilder = class QueryBuilder extends Component {
|
|
|
134
134
|
this.isNotified = false;
|
|
135
135
|
this.isAddSuccess = false;
|
|
136
136
|
this.isNotValueChange = false;
|
|
137
|
+
this.isFieldChange = false;
|
|
138
|
+
this.isFieldClose = false;
|
|
139
|
+
this.isDestroy = false;
|
|
137
140
|
MultiSelect.Inject(CheckBoxSelection);
|
|
138
141
|
}
|
|
139
142
|
getPersistData() {
|
|
@@ -606,8 +609,8 @@ let QueryBuilder = class QueryBuilder extends Component {
|
|
|
606
609
|
ddlField = {
|
|
607
610
|
dataSource: this.columns,
|
|
608
611
|
fields: this.fields, placeholder: this.l10n.getConstant('SelectField'),
|
|
609
|
-
popupHeight: ((this.columns.length > 5) ? height : 'auto'),
|
|
610
|
-
change: this.changeField.bind(this), value: rule ? ddlValue : null, open: this.popupOpen.bind(this)
|
|
612
|
+
popupHeight: ((this.columns.length > 5) ? height : 'auto'), close: this.fieldClose.bind(this, ruleElem.id + '_filterkey'),
|
|
613
|
+
change: this.changeField.bind(this), value: rule ? ddlValue : null, open: this.popupOpen.bind(this, true)
|
|
611
614
|
};
|
|
612
615
|
if (this.fieldModel) {
|
|
613
616
|
ddlField = Object.assign({}, ddlField, this.fieldModel);
|
|
@@ -629,11 +632,11 @@ let QueryBuilder = class QueryBuilder extends Component {
|
|
|
629
632
|
const ddlValue = this.isImportRules ? rule.field : rule.field;
|
|
630
633
|
ddlField = {
|
|
631
634
|
fields: { dataSource: this.columns,
|
|
632
|
-
value:
|
|
635
|
+
value: 'field', text: 'label', child: 'columns', expanded: 'expanded' },
|
|
633
636
|
placeholder: this.l10n.getConstant('SelectField'), showClearButton: false,
|
|
634
637
|
popupHeight: ((this.columns.length > 5) ? height : 'auto'), changeOnBlur: false,
|
|
635
638
|
change: this.changeField.bind(this), value: this.isImportRules ? [ddlValue] : null,
|
|
636
|
-
open: this.popupOpen.bind(this)
|
|
639
|
+
open: this.popupOpen.bind(this, false)
|
|
637
640
|
};
|
|
638
641
|
if (this.fieldModel) {
|
|
639
642
|
ddlField = Object.assign({}, ddlField, this.fieldModel);
|
|
@@ -1233,21 +1236,38 @@ let QueryBuilder = class QueryBuilder extends Component {
|
|
|
1233
1236
|
}
|
|
1234
1237
|
}
|
|
1235
1238
|
}
|
|
1239
|
+
fieldClose(id) {
|
|
1240
|
+
if (this.isFieldChange || this.isDestroy) {
|
|
1241
|
+
return;
|
|
1242
|
+
}
|
|
1243
|
+
this.isFieldClose = true;
|
|
1244
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
1245
|
+
const ddl = getComponent(id, 'dropdownlist');
|
|
1246
|
+
const item = ddl.popupObj.element.querySelector('.e-active');
|
|
1247
|
+
const itemData = ddl.getItemData();
|
|
1248
|
+
ddl.value = itemData.value;
|
|
1249
|
+
const customArgs = { element: ddl.element, value: itemData.value, isInteracted: true,
|
|
1250
|
+
previousItemData: this.prevItemData, previousItem: null, item: item, itemData: itemData, event: null, e: null };
|
|
1251
|
+
this.changeField(customArgs);
|
|
1252
|
+
this.isFieldChange = false;
|
|
1253
|
+
}
|
|
1236
1254
|
changeField(args) {
|
|
1237
1255
|
if (args.isInteracted) {
|
|
1256
|
+
this.isFieldChange = true;
|
|
1257
|
+
this.prevItemData = args.itemData;
|
|
1238
1258
|
const fieldElem = closest(args.element, '.e-rule-filter') || closest(args.element, '.e-rule-sub-filter');
|
|
1239
1259
|
const column = this.fieldMode === 'DropdownTree' ? this.getColumn(args.value[0]) : this.getColumn(args.value);
|
|
1240
1260
|
if (this.fieldMode === 'DropdownTree' && fieldElem != null) {
|
|
1241
|
-
const ddtElem = fieldElem.querySelector(
|
|
1261
|
+
const ddtElem = fieldElem.querySelector('.e-control');
|
|
1242
1262
|
const ddt = getComponent(ddtElem, 'dropdowntree');
|
|
1243
1263
|
if (column) {
|
|
1244
|
-
if (column.type
|
|
1264
|
+
if (column.type === 'object') {
|
|
1245
1265
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
1246
1266
|
ddt.value = args.oldValue;
|
|
1247
1267
|
ddt.dataBind();
|
|
1248
1268
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
1249
1269
|
if (isNullOrUndefined(args.oldValue)) {
|
|
1250
|
-
ddtElem.value =
|
|
1270
|
+
ddtElem.value = '';
|
|
1251
1271
|
}
|
|
1252
1272
|
else {
|
|
1253
1273
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
@@ -1404,15 +1424,20 @@ let QueryBuilder = class QueryBuilder extends Component {
|
|
|
1404
1424
|
tempElem.appendChild(subFieldElem);
|
|
1405
1425
|
const height = (this.element.className.indexOf('e-device') > -1) ? '250px' : '200px';
|
|
1406
1426
|
const subFieldData = Object.keys(this.selectedColumn.columns[0]);
|
|
1407
|
-
|
|
1427
|
+
let ddlField;
|
|
1428
|
+
ddlField = {
|
|
1408
1429
|
dataSource: this.selectedColumn.columns,
|
|
1409
1430
|
fields: this.fields,
|
|
1410
1431
|
placeholder: this.l10n.getConstant('SelectField'),
|
|
1411
1432
|
popupHeight: ((subFieldData.length > 5) ? height : 'auto'),
|
|
1412
1433
|
change: this.changeField.bind(this),
|
|
1413
1434
|
index: 0,
|
|
1414
|
-
open: this.popupOpen.bind(this)
|
|
1415
|
-
}
|
|
1435
|
+
open: this.popupOpen.bind(this, false)
|
|
1436
|
+
};
|
|
1437
|
+
if (this.fieldModel) {
|
|
1438
|
+
ddlField = Object.assign({}, ddlField, this.fieldModel);
|
|
1439
|
+
}
|
|
1440
|
+
const dropDownList = new DropDownList(ddlField);
|
|
1416
1441
|
dropDownList.appendTo('#' + ruleId + '_subfilterkey' + this.subFilterCounter);
|
|
1417
1442
|
if (this.isImportRules) {
|
|
1418
1443
|
const subField = this.selectedColumn.columns;
|
|
@@ -1532,7 +1557,7 @@ let QueryBuilder = class QueryBuilder extends Component {
|
|
|
1532
1557
|
change: this.changeField.bind(this),
|
|
1533
1558
|
index: 0,
|
|
1534
1559
|
value: value,
|
|
1535
|
-
open: this.popupOpen.bind(this)
|
|
1560
|
+
open: this.popupOpen.bind(this, false)
|
|
1536
1561
|
};
|
|
1537
1562
|
if (this.operatorModel) {
|
|
1538
1563
|
ddlOperator = Object.assign({}, ddlOperator, this.operatorModel);
|
|
@@ -1551,10 +1576,13 @@ let QueryBuilder = class QueryBuilder extends Component {
|
|
|
1551
1576
|
this.updateRules(ddlArgs.element, ddlArgs.item);
|
|
1552
1577
|
}
|
|
1553
1578
|
}
|
|
1554
|
-
popupOpen(args) {
|
|
1579
|
+
popupOpen(isField, args) {
|
|
1555
1580
|
if (this.enableRtl) {
|
|
1556
1581
|
addClass([args.popup.element], 'e-rtl');
|
|
1557
1582
|
}
|
|
1583
|
+
if (isField) {
|
|
1584
|
+
this.isFieldClose = false;
|
|
1585
|
+
}
|
|
1558
1586
|
}
|
|
1559
1587
|
destroyControls(target, isRuleTemplate) {
|
|
1560
1588
|
const element = isRuleTemplate ? target : target.nextElementSibling;
|
|
@@ -1747,7 +1775,7 @@ let QueryBuilder = class QueryBuilder extends Component {
|
|
|
1747
1775
|
change: this.changeValue.bind(this, i),
|
|
1748
1776
|
close: this.closePopup.bind(this, i),
|
|
1749
1777
|
actionBegin: this.multiSelectOpen.bind(this, parentId + '_valuekey' + i),
|
|
1750
|
-
open: this.popupOpen.bind(this)
|
|
1778
|
+
open: this.popupOpen.bind(this, false)
|
|
1751
1779
|
};
|
|
1752
1780
|
if (this.valueModel && this.valueModel.multiSelectModel) {
|
|
1753
1781
|
multiSelectValue = Object.assign({}, multiSelectValue, this.valueModel.multiSelectModel);
|
|
@@ -1806,8 +1834,10 @@ let QueryBuilder = class QueryBuilder extends Component {
|
|
|
1806
1834
|
}
|
|
1807
1835
|
closePopup(i, args) {
|
|
1808
1836
|
const element = document.getElementById(args.popup.element.id.replace('_popup', ''));
|
|
1809
|
-
|
|
1810
|
-
|
|
1837
|
+
if (element) {
|
|
1838
|
+
const value = getComponent(element, 'multiselect').value;
|
|
1839
|
+
this.updateRules(element, value, i);
|
|
1840
|
+
}
|
|
1811
1841
|
}
|
|
1812
1842
|
processTemplate(target, itemData, rule, tempRule) {
|
|
1813
1843
|
const container = closest(target, '.e-rule-container');
|
|
@@ -2168,6 +2198,9 @@ let QueryBuilder = class QueryBuilder extends Component {
|
|
|
2168
2198
|
return 0;
|
|
2169
2199
|
}
|
|
2170
2200
|
getPreviousItemData(prevItemData, column) {
|
|
2201
|
+
if (this.isFieldClose && prevItemData) {
|
|
2202
|
+
prevItemData = this.getColumn(prevItemData.value);
|
|
2203
|
+
}
|
|
2171
2204
|
if (column.template && prevItemData && Object.keys(prevItemData).length < 4) {
|
|
2172
2205
|
prevItemData.template = column.template;
|
|
2173
2206
|
}
|
|
@@ -2659,6 +2692,7 @@ let QueryBuilder = class QueryBuilder extends Component {
|
|
|
2659
2692
|
* @returns {void}
|
|
2660
2693
|
*/
|
|
2661
2694
|
destroy() {
|
|
2695
|
+
this.isDestroy = true;
|
|
2662
2696
|
const queryElement = this.element;
|
|
2663
2697
|
if (!queryElement) {
|
|
2664
2698
|
return;
|
|
@@ -2714,6 +2748,7 @@ let QueryBuilder = class QueryBuilder extends Component {
|
|
|
2714
2748
|
this.clearQBTemplate();
|
|
2715
2749
|
}
|
|
2716
2750
|
classList(this.element, [], ['e-rtl', 'e-responsive', 'e-device']);
|
|
2751
|
+
this.isDestroy = false;
|
|
2717
2752
|
}
|
|
2718
2753
|
/**
|
|
2719
2754
|
* Adds single or multiple rules.
|
|
@@ -3495,6 +3530,9 @@ let QueryBuilder = class QueryBuilder extends Component {
|
|
|
3495
3530
|
rule.not = notValue;
|
|
3496
3531
|
}
|
|
3497
3532
|
}
|
|
3533
|
+
else if ((isNullOrUndefined(rule.condition)) && isNullOrUndefined(rule.rules)) {
|
|
3534
|
+
rule = { 'label': '', 'field': '', 'operator': '', 'type': '', 'value': '' };
|
|
3535
|
+
}
|
|
3498
3536
|
else {
|
|
3499
3537
|
if (this.enableNotCondition) {
|
|
3500
3538
|
rule = { 'condition': rule.condition, 'rules': rule.rules, 'not': rule.not };
|
|
@@ -3678,7 +3716,7 @@ let QueryBuilder = class QueryBuilder extends Component {
|
|
|
3678
3716
|
}
|
|
3679
3717
|
}
|
|
3680
3718
|
}
|
|
3681
|
-
else if (ruleColl[i].operator.length) {
|
|
3719
|
+
else if (!isNullOrUndefined(ruleColl[i].operator) && !isNullOrUndefined(ruleColl[i].operator.length)) {
|
|
3682
3720
|
const oper = ruleColl[i].operator.toLowerCase();
|
|
3683
3721
|
let isDateFilter = false;
|
|
3684
3722
|
const dateOperColl = ['equal', 'notequal', 'greaterthan', 'greaterthanorequal', 'lessthan', 'lessthanorequal'];
|
|
@@ -4010,7 +4048,7 @@ let QueryBuilder = class QueryBuilder extends Component {
|
|
|
4010
4048
|
if (!isNullOrUndefined(ruleColl)) {
|
|
4011
4049
|
for (let i = 0, len = ruleColl.length; i < len; i++) {
|
|
4012
4050
|
const keys = Object.keys(ruleColl[i]);
|
|
4013
|
-
if (!isNullOrUndefined(ruleColl[i].rules) && keys.indexOf('rules') > -1) {
|
|
4051
|
+
if (!isNullOrUndefined(ruleColl[i].rules) && keys.indexOf('rules') > -1 && (ruleColl[i].rules.length !== 0)) {
|
|
4014
4052
|
parentElem = this.renderGroup(ruleColl[i], ruleColl[i].condition, parentElem, ruleColl[i].not);
|
|
4015
4053
|
parentElem = this.importRules(ruleColl[i], parentElem, true);
|
|
4016
4054
|
}
|
|
@@ -4381,6 +4419,12 @@ let QueryBuilder = class QueryBuilder extends Component {
|
|
|
4381
4419
|
this.parser.push(['Literal', matchValue]);
|
|
4382
4420
|
return matchValue.length + 2;
|
|
4383
4421
|
}
|
|
4422
|
+
// eslint-disable-next-line
|
|
4423
|
+
if (this.checkNumberLiteral(sqlString)) {
|
|
4424
|
+
matchValue = /^[0-9]+(\.[0-9]+)?/.exec(sqlString)[0];
|
|
4425
|
+
this.parser.push(['Literal', matchValue]);
|
|
4426
|
+
return matchValue.length;
|
|
4427
|
+
}
|
|
4384
4428
|
//String
|
|
4385
4429
|
if (/^'((?:[^\\']+?|\\.|'')*)'(?!')/.exec(sqlString)) {
|
|
4386
4430
|
matchValue = /^'((?:[^\\']+?|\\.|'')*)'(?!')/.exec(sqlString)[0];
|
|
@@ -4420,6 +4464,25 @@ let QueryBuilder = class QueryBuilder extends Component {
|
|
|
4420
4464
|
}
|
|
4421
4465
|
return false;
|
|
4422
4466
|
}
|
|
4467
|
+
checkNumberLiteral(sqlString) {
|
|
4468
|
+
const lastParser = this.parser[this.parser.length - 1];
|
|
4469
|
+
if (!lastParser) {
|
|
4470
|
+
return true;
|
|
4471
|
+
}
|
|
4472
|
+
else {
|
|
4473
|
+
if (/^[0-9]+(\.[0-9]+)?/.exec(sqlString)) {
|
|
4474
|
+
const secParser = this.parser[this.parser.length - 2];
|
|
4475
|
+
const betweenParser = this.parser[this.parser.length - 3];
|
|
4476
|
+
if (lastParser[0] === 'Left' && (secParser && secParser[0] === 'Conditions')) {
|
|
4477
|
+
return true;
|
|
4478
|
+
}
|
|
4479
|
+
if (lastParser[0] === 'Conditions' && (betweenParser && betweenParser[1].indexOf('between') < 0)) {
|
|
4480
|
+
return true;
|
|
4481
|
+
}
|
|
4482
|
+
}
|
|
4483
|
+
}
|
|
4484
|
+
return false;
|
|
4485
|
+
}
|
|
4423
4486
|
getOperator(value, operator) {
|
|
4424
4487
|
const operators = {
|
|
4425
4488
|
'=': 'equal', '!=': 'notequal', '<': 'lessthan', '>': 'greaterthan', '<=': 'lessthanorequal',
|