@limetech/lime-crm-building-blocks 1.102.0 → 1.102.1
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/CHANGELOG.md +7 -0
- package/dist/cjs/limebb-lime-query-filter-group_3.cjs.entry.js +164 -70
- package/dist/collection/components/lime-query-builder/expressions/filter-group-logic.js +150 -0
- package/dist/collection/components/lime-query-builder/expressions/lime-query-filter-group.js +15 -71
- package/dist/components/lime-query-filter-expression.js +164 -70
- package/dist/esm/limebb-lime-query-filter-group_3.entry.js +164 -70
- package/dist/lime-crm-building-blocks/lime-crm-building-blocks.esm.js +1 -1
- package/dist/lime-crm-building-blocks/p-7731e1b0.entry.js +1 -0
- package/dist/types/components/lime-query-builder/expressions/filter-group-logic.d.ts +89 -0
- package/package.json +1 -1
- package/dist/lime-crm-building-blocks/p-6579412e.entry.js +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
## [1.102.1](https://github.com/Lundalogik/lime-crm-building-blocks/compare/v1.102.0...v1.102.1) (2025-11-11)
|
|
2
|
+
|
|
3
|
+
### Bug Fixes
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
* **lime-query-builder:** normalize null events to undefined ([710b9b0](https://github.com/Lundalogik/lime-crm-building-blocks/commit/710b9b0a0142bb323a59cb3b549a763f6e319bce))
|
|
7
|
+
|
|
1
8
|
## [1.102.0](https://github.com/Lundalogik/lime-crm-building-blocks/compare/v1.101.0...v1.102.0) (2025-11-07)
|
|
2
9
|
|
|
3
10
|
### Features
|
|
@@ -6,6 +6,156 @@ const index = require('./index-ff255a0d.js');
|
|
|
6
6
|
const index_esm = require('./index.esm-d785eb6e.js');
|
|
7
7
|
const propertyResolution = require('./property-resolution-fb42a46b.js');
|
|
8
8
|
|
|
9
|
+
/**
|
|
10
|
+
* Get the subheading text for a filter group based on its operator and expression count
|
|
11
|
+
*
|
|
12
|
+
* @param operator - The group's operator (AND or OR)
|
|
13
|
+
* @param expressionCount - Number of child expressions
|
|
14
|
+
* @returns Subheading text, or empty string if 0 or 1 expressions
|
|
15
|
+
*/
|
|
16
|
+
function getFilterGroupSubheading(operator, expressionCount) {
|
|
17
|
+
if (expressionCount <= 1) {
|
|
18
|
+
return '';
|
|
19
|
+
}
|
|
20
|
+
return operator === index_esm.Zt.AND
|
|
21
|
+
? 'All of these conditions are true'
|
|
22
|
+
: 'Any of these conditions are true';
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* Get the label for the "Add condition" button
|
|
26
|
+
*
|
|
27
|
+
* @param operator - The group's operator (AND or OR)
|
|
28
|
+
* @param expressionCount - Number of child expressions
|
|
29
|
+
* @returns Appropriate button label based on context
|
|
30
|
+
*/
|
|
31
|
+
function getAddConditionButtonLabel(operator, expressionCount) {
|
|
32
|
+
if (expressionCount === 0) {
|
|
33
|
+
return 'Add a condition';
|
|
34
|
+
}
|
|
35
|
+
return operator === index_esm.Zt.AND
|
|
36
|
+
? 'Add another condition'
|
|
37
|
+
: 'Add alternative';
|
|
38
|
+
}
|
|
39
|
+
/**
|
|
40
|
+
* Get the label for the "Add group" button
|
|
41
|
+
*
|
|
42
|
+
* @param operator - The group's operator (AND or OR)
|
|
43
|
+
* @param expressionCount - Number of child expressions
|
|
44
|
+
* @returns Appropriate button label based on context
|
|
45
|
+
*/
|
|
46
|
+
function getAddGroupButtonLabel(operator, expressionCount) {
|
|
47
|
+
if (expressionCount === 0) {
|
|
48
|
+
return 'Add a group';
|
|
49
|
+
}
|
|
50
|
+
return operator === index_esm.Zt.AND
|
|
51
|
+
? 'Add another group'
|
|
52
|
+
: 'Add alternative group';
|
|
53
|
+
}
|
|
54
|
+
/**
|
|
55
|
+
* Create a new empty comparison expression
|
|
56
|
+
*
|
|
57
|
+
* @returns A new comparison expression with empty key and value
|
|
58
|
+
*/
|
|
59
|
+
function createEmptyComparison() {
|
|
60
|
+
return {
|
|
61
|
+
key: '',
|
|
62
|
+
op: index_esm.Zt.EQUALS,
|
|
63
|
+
exp: '',
|
|
64
|
+
};
|
|
65
|
+
}
|
|
66
|
+
/**
|
|
67
|
+
* Create a new nested group with the opposite operator from the parent
|
|
68
|
+
*
|
|
69
|
+
* @param parentOperator - The parent group's operator
|
|
70
|
+
* @returns A new group with the opposite operator and one empty comparison
|
|
71
|
+
*/
|
|
72
|
+
function createNestedGroup(parentOperator) {
|
|
73
|
+
const oppositeOp = parentOperator === index_esm.Zt.AND ? index_esm.Zt.OR : index_esm.Zt.AND;
|
|
74
|
+
return {
|
|
75
|
+
op: oppositeOp,
|
|
76
|
+
exp: [createEmptyComparison()],
|
|
77
|
+
};
|
|
78
|
+
}
|
|
79
|
+
/**
|
|
80
|
+
* Add a new expression to a group immutably
|
|
81
|
+
*
|
|
82
|
+
* @param group - The existing group
|
|
83
|
+
* @param newExpression - The expression to add
|
|
84
|
+
* @returns A new group with the expression added to the end
|
|
85
|
+
*/
|
|
86
|
+
function addExpressionToGroup(group, newExpression) {
|
|
87
|
+
return {
|
|
88
|
+
op: group.op,
|
|
89
|
+
exp: [...group.exp, newExpression],
|
|
90
|
+
};
|
|
91
|
+
}
|
|
92
|
+
/**
|
|
93
|
+
* Toggle a group's operator between AND and OR
|
|
94
|
+
*
|
|
95
|
+
* @param group - The group to toggle
|
|
96
|
+
* @returns A new group with the toggled operator
|
|
97
|
+
*/
|
|
98
|
+
function toggleGroupOperator(group) {
|
|
99
|
+
const newOperator = group.op === index_esm.Zt.AND ? index_esm.Zt.OR : index_esm.Zt.AND;
|
|
100
|
+
return {
|
|
101
|
+
op: newOperator,
|
|
102
|
+
exp: [...group.exp],
|
|
103
|
+
};
|
|
104
|
+
}
|
|
105
|
+
/**
|
|
106
|
+
* Update a child expression in a group, handling deletion and unwrapping
|
|
107
|
+
*
|
|
108
|
+
* This function handles three scenarios:
|
|
109
|
+
* 1. Update: Replace a child expression with a new one
|
|
110
|
+
* 2. Delete: Remove a child (when updatedChild is undefined)
|
|
111
|
+
* - If last child is deleted, return 'removed' (group should be deleted)
|
|
112
|
+
* - If deletion leaves one child, return 'unwrapped' (unwrap to that child)
|
|
113
|
+
* - Otherwise, return 'updated' with the remaining children
|
|
114
|
+
*
|
|
115
|
+
* @param group - The group containing the child
|
|
116
|
+
* @param childIndex - Index of the child to update
|
|
117
|
+
* @param updatedChild - The new child expression, or undefined to delete
|
|
118
|
+
* @returns Result object with type and resulting expression
|
|
119
|
+
*/
|
|
120
|
+
function updateChildExpression(group, childIndex, updatedChild) {
|
|
121
|
+
const expressions = [...group.exp];
|
|
122
|
+
if (!updatedChild) {
|
|
123
|
+
// Deletion - remove the child
|
|
124
|
+
expressions.splice(childIndex, 1);
|
|
125
|
+
if (expressions.length === 0) {
|
|
126
|
+
// No children left - remove the entire group
|
|
127
|
+
return {
|
|
128
|
+
type: 'removed',
|
|
129
|
+
expression: undefined,
|
|
130
|
+
};
|
|
131
|
+
}
|
|
132
|
+
if (expressions.length === 1) {
|
|
133
|
+
// One child left - unwrap to that child
|
|
134
|
+
return {
|
|
135
|
+
type: 'unwrapped',
|
|
136
|
+
expression: expressions[0],
|
|
137
|
+
};
|
|
138
|
+
}
|
|
139
|
+
// Multiple children remain - return updated group
|
|
140
|
+
return {
|
|
141
|
+
type: 'updated',
|
|
142
|
+
expression: {
|
|
143
|
+
op: group.op,
|
|
144
|
+
exp: expressions,
|
|
145
|
+
},
|
|
146
|
+
};
|
|
147
|
+
}
|
|
148
|
+
// Update - replace the child
|
|
149
|
+
expressions[childIndex] = updatedChild;
|
|
150
|
+
return {
|
|
151
|
+
type: 'updated',
|
|
152
|
+
expression: {
|
|
153
|
+
op: group.op,
|
|
154
|
+
exp: expressions,
|
|
155
|
+
},
|
|
156
|
+
};
|
|
157
|
+
}
|
|
158
|
+
|
|
9
159
|
const limeQueryFilterGroupCss = "@charset \"UTF-8\";.expression{display:flex;flex-direction:column;margin-bottom:1rem;gap:0;background-color:rgb(var(--contrast-100));border:1px solid rgb(var(--contrast-500));border-radius:0.75rem}.expression .clickable-header{cursor:pointer;user-select:none}.expression .clickable-header:hover{background-color:rgb(var(--contrast-200))}.expression>ul{margin-top:0;margin-right:1rem;margin-bottom:1rem;margin-left:1rem;padding-left:1rem;list-style:disc}.expression>ul li{margin-top:1rem}.expression>ul li.add-button{list-style:none;display:flex;gap:0.5rem}";
|
|
10
160
|
const LimebbLimeQueryFilterGroupStyle0 = limeQueryFilterGroupCss;
|
|
11
161
|
|
|
@@ -15,80 +165,32 @@ const LimeQueryFilterGroupComponent = class {
|
|
|
15
165
|
this.expressionChange = index.createEvent(this, "expressionChange", 7);
|
|
16
166
|
this.renderChildExpression = (expression, childIndex) => (index.h("li", null, index.h("limebb-lime-query-filter-expression", { platform: this.platform, context: this.context, limetype: this.limetype, activeLimetype: this.activeLimetype, expression: expression, onExpressionChange: this.handleExpressionChange(childIndex) })));
|
|
17
167
|
this.handleToggleOperator = () => {
|
|
18
|
-
const
|
|
19
|
-
this.expressionChange.emit(
|
|
20
|
-
op: newOperator,
|
|
21
|
-
exp: this.expression.exp,
|
|
22
|
-
});
|
|
168
|
+
const newGroup = toggleGroupOperator(this.expression);
|
|
169
|
+
this.expressionChange.emit(newGroup);
|
|
23
170
|
};
|
|
24
171
|
this.handleAddChildExpression = () => {
|
|
25
|
-
|
|
26
|
-
const
|
|
27
|
-
|
|
28
|
-
op: index_esm.Zt.EQUALS,
|
|
29
|
-
exp: '',
|
|
30
|
-
};
|
|
31
|
-
this.expressionChange.emit({
|
|
32
|
-
op: this.expression.op,
|
|
33
|
-
exp: [...this.expression.exp, newChild],
|
|
34
|
-
});
|
|
172
|
+
const newChild = createEmptyComparison();
|
|
173
|
+
const newGroup = addExpressionToGroup(this.expression, newChild);
|
|
174
|
+
this.expressionChange.emit(newGroup);
|
|
35
175
|
};
|
|
36
176
|
this.handleAddChildGroup = () => {
|
|
37
|
-
|
|
38
|
-
const
|
|
39
|
-
|
|
40
|
-
op: oppositeOp,
|
|
41
|
-
exp: [
|
|
42
|
-
{
|
|
43
|
-
key: '',
|
|
44
|
-
op: index_esm.Zt.EQUALS,
|
|
45
|
-
exp: '',
|
|
46
|
-
},
|
|
47
|
-
],
|
|
48
|
-
};
|
|
49
|
-
this.expressionChange.emit({
|
|
50
|
-
op: this.expression.op,
|
|
51
|
-
exp: [...this.expression.exp, newChild],
|
|
52
|
-
});
|
|
177
|
+
const newChild = createNestedGroup(this.expression.op);
|
|
178
|
+
const newGroup = addExpressionToGroup(this.expression, newChild);
|
|
179
|
+
this.expressionChange.emit(newGroup);
|
|
53
180
|
};
|
|
54
181
|
this.handleExpressionChange = (updatedChildIndex) => (event) => {
|
|
55
182
|
event.stopPropagation();
|
|
56
183
|
const updatedExpression = event.detail;
|
|
57
|
-
const
|
|
58
|
-
|
|
59
|
-
// Deletion - remove the child and potentially unwrap
|
|
60
|
-
expressions.splice(updatedChildIndex, 1);
|
|
61
|
-
if (expressions.length === 0) {
|
|
62
|
-
this.expressionChange.emit(undefined);
|
|
63
|
-
return;
|
|
64
|
-
}
|
|
65
|
-
if (expressions.length === 1) {
|
|
66
|
-
// Unwrap when only one child remains after deletion
|
|
67
|
-
this.expressionChange.emit(expressions[0]);
|
|
68
|
-
return;
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
else {
|
|
72
|
-
// Update - replace the child, don't unwrap
|
|
73
|
-
expressions[updatedChildIndex] = updatedExpression;
|
|
74
|
-
}
|
|
75
|
-
this.expressionChange.emit({
|
|
76
|
-
op: this.expression.op,
|
|
77
|
-
exp: expressions,
|
|
78
|
-
});
|
|
184
|
+
const result = updateChildExpression(this.expression, updatedChildIndex, updatedExpression);
|
|
185
|
+
this.expressionChange.emit(result.expression);
|
|
79
186
|
};
|
|
80
187
|
}
|
|
81
188
|
render() {
|
|
82
189
|
const subheading = this.getSubheading();
|
|
83
|
-
return (index.h("div", { key: '
|
|
190
|
+
return (index.h("div", { key: 'bf26300a939b4a2a1b401fa7a81593ec745a2a52', class: "expression" }, subheading && (index.h("limel-header", { key: 'f5152a2ca09811540b626965f52f5793e6c99728', subheading: subheading, onClick: this.handleToggleOperator, class: "clickable-header" })), index.h("ul", { key: 'c4cad750e47e0b6c94d6a76b2a4d8b72e36b3402' }, this.expression.exp.map(this.renderChildExpression), index.h("li", { key: 'ddd614f237a0c0314c2977b74a31b365f3251f9d', class: "add-button" }, this.renderAddButton(), this.renderAddGroupButton()))));
|
|
84
191
|
}
|
|
85
192
|
getSubheading() {
|
|
86
|
-
|
|
87
|
-
return '';
|
|
88
|
-
}
|
|
89
|
-
return this.expression.op === index_esm.Zt.AND
|
|
90
|
-
? 'All of these conditions are true'
|
|
91
|
-
: 'Any of these conditions are true';
|
|
193
|
+
return getFilterGroupSubheading(this.expression.op, this.expression.exp.length);
|
|
92
194
|
}
|
|
93
195
|
renderAddButton() {
|
|
94
196
|
const label = this.getAddButtonLabel();
|
|
@@ -99,18 +201,10 @@ const LimeQueryFilterGroupComponent = class {
|
|
|
99
201
|
return (index.h("limel-button", { label: label, icon: "tree_structure", onClick: this.handleAddChildGroup }));
|
|
100
202
|
}
|
|
101
203
|
getAddButtonLabel() {
|
|
102
|
-
|
|
103
|
-
if (this.expression.exp.length === 0) {
|
|
104
|
-
return 'Add a condition';
|
|
105
|
-
}
|
|
106
|
-
return isAnd ? 'Add another condition' : 'Add alternative';
|
|
204
|
+
return getAddConditionButtonLabel(this.expression.op, this.expression.exp.length);
|
|
107
205
|
}
|
|
108
206
|
getAddGroupButtonLabel() {
|
|
109
|
-
|
|
110
|
-
if (this.expression.exp.length === 0) {
|
|
111
|
-
return 'Add a group';
|
|
112
|
-
}
|
|
113
|
-
return isAnd ? 'Add another group' : 'Add alternative group';
|
|
207
|
+
return getAddGroupButtonLabel(this.expression.op, this.expression.exp.length);
|
|
114
208
|
}
|
|
115
209
|
};
|
|
116
210
|
LimeQueryFilterGroupComponent.style = LimebbLimeQueryFilterGroupStyle0;
|
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
import { Operator, } from "@limetech/lime-web-components";
|
|
2
|
+
/**
|
|
3
|
+
* Get the subheading text for a filter group based on its operator and expression count
|
|
4
|
+
*
|
|
5
|
+
* @param operator - The group's operator (AND or OR)
|
|
6
|
+
* @param expressionCount - Number of child expressions
|
|
7
|
+
* @returns Subheading text, or empty string if 0 or 1 expressions
|
|
8
|
+
*/
|
|
9
|
+
export function getFilterGroupSubheading(operator, expressionCount) {
|
|
10
|
+
if (expressionCount <= 1) {
|
|
11
|
+
return '';
|
|
12
|
+
}
|
|
13
|
+
return operator === Operator.AND
|
|
14
|
+
? 'All of these conditions are true'
|
|
15
|
+
: 'Any of these conditions are true';
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* Get the label for the "Add condition" button
|
|
19
|
+
*
|
|
20
|
+
* @param operator - The group's operator (AND or OR)
|
|
21
|
+
* @param expressionCount - Number of child expressions
|
|
22
|
+
* @returns Appropriate button label based on context
|
|
23
|
+
*/
|
|
24
|
+
export function getAddConditionButtonLabel(operator, expressionCount) {
|
|
25
|
+
if (expressionCount === 0) {
|
|
26
|
+
return 'Add a condition';
|
|
27
|
+
}
|
|
28
|
+
return operator === Operator.AND
|
|
29
|
+
? 'Add another condition'
|
|
30
|
+
: 'Add alternative';
|
|
31
|
+
}
|
|
32
|
+
/**
|
|
33
|
+
* Get the label for the "Add group" button
|
|
34
|
+
*
|
|
35
|
+
* @param operator - The group's operator (AND or OR)
|
|
36
|
+
* @param expressionCount - Number of child expressions
|
|
37
|
+
* @returns Appropriate button label based on context
|
|
38
|
+
*/
|
|
39
|
+
export function getAddGroupButtonLabel(operator, expressionCount) {
|
|
40
|
+
if (expressionCount === 0) {
|
|
41
|
+
return 'Add a group';
|
|
42
|
+
}
|
|
43
|
+
return operator === Operator.AND
|
|
44
|
+
? 'Add another group'
|
|
45
|
+
: 'Add alternative group';
|
|
46
|
+
}
|
|
47
|
+
/**
|
|
48
|
+
* Create a new empty comparison expression
|
|
49
|
+
*
|
|
50
|
+
* @returns A new comparison expression with empty key and value
|
|
51
|
+
*/
|
|
52
|
+
export function createEmptyComparison() {
|
|
53
|
+
return {
|
|
54
|
+
key: '',
|
|
55
|
+
op: Operator.EQUALS,
|
|
56
|
+
exp: '',
|
|
57
|
+
};
|
|
58
|
+
}
|
|
59
|
+
/**
|
|
60
|
+
* Create a new nested group with the opposite operator from the parent
|
|
61
|
+
*
|
|
62
|
+
* @param parentOperator - The parent group's operator
|
|
63
|
+
* @returns A new group with the opposite operator and one empty comparison
|
|
64
|
+
*/
|
|
65
|
+
export function createNestedGroup(parentOperator) {
|
|
66
|
+
const oppositeOp = parentOperator === Operator.AND ? Operator.OR : Operator.AND;
|
|
67
|
+
return {
|
|
68
|
+
op: oppositeOp,
|
|
69
|
+
exp: [createEmptyComparison()],
|
|
70
|
+
};
|
|
71
|
+
}
|
|
72
|
+
/**
|
|
73
|
+
* Add a new expression to a group immutably
|
|
74
|
+
*
|
|
75
|
+
* @param group - The existing group
|
|
76
|
+
* @param newExpression - The expression to add
|
|
77
|
+
* @returns A new group with the expression added to the end
|
|
78
|
+
*/
|
|
79
|
+
export function addExpressionToGroup(group, newExpression) {
|
|
80
|
+
return {
|
|
81
|
+
op: group.op,
|
|
82
|
+
exp: [...group.exp, newExpression],
|
|
83
|
+
};
|
|
84
|
+
}
|
|
85
|
+
/**
|
|
86
|
+
* Toggle a group's operator between AND and OR
|
|
87
|
+
*
|
|
88
|
+
* @param group - The group to toggle
|
|
89
|
+
* @returns A new group with the toggled operator
|
|
90
|
+
*/
|
|
91
|
+
export function toggleGroupOperator(group) {
|
|
92
|
+
const newOperator = group.op === Operator.AND ? Operator.OR : Operator.AND;
|
|
93
|
+
return {
|
|
94
|
+
op: newOperator,
|
|
95
|
+
exp: [...group.exp],
|
|
96
|
+
};
|
|
97
|
+
}
|
|
98
|
+
/**
|
|
99
|
+
* Update a child expression in a group, handling deletion and unwrapping
|
|
100
|
+
*
|
|
101
|
+
* This function handles three scenarios:
|
|
102
|
+
* 1. Update: Replace a child expression with a new one
|
|
103
|
+
* 2. Delete: Remove a child (when updatedChild is undefined)
|
|
104
|
+
* - If last child is deleted, return 'removed' (group should be deleted)
|
|
105
|
+
* - If deletion leaves one child, return 'unwrapped' (unwrap to that child)
|
|
106
|
+
* - Otherwise, return 'updated' with the remaining children
|
|
107
|
+
*
|
|
108
|
+
* @param group - The group containing the child
|
|
109
|
+
* @param childIndex - Index of the child to update
|
|
110
|
+
* @param updatedChild - The new child expression, or undefined to delete
|
|
111
|
+
* @returns Result object with type and resulting expression
|
|
112
|
+
*/
|
|
113
|
+
export function updateChildExpression(group, childIndex, updatedChild) {
|
|
114
|
+
const expressions = [...group.exp];
|
|
115
|
+
if (!updatedChild) {
|
|
116
|
+
// Deletion - remove the child
|
|
117
|
+
expressions.splice(childIndex, 1);
|
|
118
|
+
if (expressions.length === 0) {
|
|
119
|
+
// No children left - remove the entire group
|
|
120
|
+
return {
|
|
121
|
+
type: 'removed',
|
|
122
|
+
expression: undefined,
|
|
123
|
+
};
|
|
124
|
+
}
|
|
125
|
+
if (expressions.length === 1) {
|
|
126
|
+
// One child left - unwrap to that child
|
|
127
|
+
return {
|
|
128
|
+
type: 'unwrapped',
|
|
129
|
+
expression: expressions[0],
|
|
130
|
+
};
|
|
131
|
+
}
|
|
132
|
+
// Multiple children remain - return updated group
|
|
133
|
+
return {
|
|
134
|
+
type: 'updated',
|
|
135
|
+
expression: {
|
|
136
|
+
op: group.op,
|
|
137
|
+
exp: expressions,
|
|
138
|
+
},
|
|
139
|
+
};
|
|
140
|
+
}
|
|
141
|
+
// Update - replace the child
|
|
142
|
+
expressions[childIndex] = updatedChild;
|
|
143
|
+
return {
|
|
144
|
+
type: 'updated',
|
|
145
|
+
expression: {
|
|
146
|
+
op: group.op,
|
|
147
|
+
exp: expressions,
|
|
148
|
+
},
|
|
149
|
+
};
|
|
150
|
+
}
|
package/dist/collection/components/lime-query-builder/expressions/lime-query-filter-group.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
|
-
import {
|
|
2
|
+
import { addExpressionToGroup, createEmptyComparison, createNestedGroup, getAddConditionButtonLabel, getAddGroupButtonLabel, getFilterGroupSubheading, toggleGroupOperator, updateChildExpression, } from "./filter-group-logic";
|
|
3
3
|
/**
|
|
4
4
|
* Lime Query Filter Group Component
|
|
5
5
|
*
|
|
@@ -22,80 +22,32 @@ export class LimeQueryFilterGroupComponent {
|
|
|
22
22
|
constructor() {
|
|
23
23
|
this.renderChildExpression = (expression, childIndex) => (h("li", null, h("limebb-lime-query-filter-expression", { platform: this.platform, context: this.context, limetype: this.limetype, activeLimetype: this.activeLimetype, expression: expression, onExpressionChange: this.handleExpressionChange(childIndex) })));
|
|
24
24
|
this.handleToggleOperator = () => {
|
|
25
|
-
const
|
|
26
|
-
this.expressionChange.emit(
|
|
27
|
-
op: newOperator,
|
|
28
|
-
exp: this.expression.exp,
|
|
29
|
-
});
|
|
25
|
+
const newGroup = toggleGroupOperator(this.expression);
|
|
26
|
+
this.expressionChange.emit(newGroup);
|
|
30
27
|
};
|
|
31
28
|
this.handleAddChildExpression = () => {
|
|
32
|
-
|
|
33
|
-
const
|
|
34
|
-
|
|
35
|
-
op: Operator.EQUALS,
|
|
36
|
-
exp: '',
|
|
37
|
-
};
|
|
38
|
-
this.expressionChange.emit({
|
|
39
|
-
op: this.expression.op,
|
|
40
|
-
exp: [...this.expression.exp, newChild],
|
|
41
|
-
});
|
|
29
|
+
const newChild = createEmptyComparison();
|
|
30
|
+
const newGroup = addExpressionToGroup(this.expression, newChild);
|
|
31
|
+
this.expressionChange.emit(newGroup);
|
|
42
32
|
};
|
|
43
33
|
this.handleAddChildGroup = () => {
|
|
44
|
-
|
|
45
|
-
const
|
|
46
|
-
|
|
47
|
-
op: oppositeOp,
|
|
48
|
-
exp: [
|
|
49
|
-
{
|
|
50
|
-
key: '',
|
|
51
|
-
op: Operator.EQUALS,
|
|
52
|
-
exp: '',
|
|
53
|
-
},
|
|
54
|
-
],
|
|
55
|
-
};
|
|
56
|
-
this.expressionChange.emit({
|
|
57
|
-
op: this.expression.op,
|
|
58
|
-
exp: [...this.expression.exp, newChild],
|
|
59
|
-
});
|
|
34
|
+
const newChild = createNestedGroup(this.expression.op);
|
|
35
|
+
const newGroup = addExpressionToGroup(this.expression, newChild);
|
|
36
|
+
this.expressionChange.emit(newGroup);
|
|
60
37
|
};
|
|
61
38
|
this.handleExpressionChange = (updatedChildIndex) => (event) => {
|
|
62
39
|
event.stopPropagation();
|
|
63
40
|
const updatedExpression = event.detail;
|
|
64
|
-
const
|
|
65
|
-
|
|
66
|
-
// Deletion - remove the child and potentially unwrap
|
|
67
|
-
expressions.splice(updatedChildIndex, 1);
|
|
68
|
-
if (expressions.length === 0) {
|
|
69
|
-
this.expressionChange.emit(undefined);
|
|
70
|
-
return;
|
|
71
|
-
}
|
|
72
|
-
if (expressions.length === 1) {
|
|
73
|
-
// Unwrap when only one child remains after deletion
|
|
74
|
-
this.expressionChange.emit(expressions[0]);
|
|
75
|
-
return;
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
else {
|
|
79
|
-
// Update - replace the child, don't unwrap
|
|
80
|
-
expressions[updatedChildIndex] = updatedExpression;
|
|
81
|
-
}
|
|
82
|
-
this.expressionChange.emit({
|
|
83
|
-
op: this.expression.op,
|
|
84
|
-
exp: expressions,
|
|
85
|
-
});
|
|
41
|
+
const result = updateChildExpression(this.expression, updatedChildIndex, updatedExpression);
|
|
42
|
+
this.expressionChange.emit(result.expression);
|
|
86
43
|
};
|
|
87
44
|
}
|
|
88
45
|
render() {
|
|
89
46
|
const subheading = this.getSubheading();
|
|
90
|
-
return (h("div", { key: '
|
|
47
|
+
return (h("div", { key: 'bf26300a939b4a2a1b401fa7a81593ec745a2a52', class: "expression" }, subheading && (h("limel-header", { key: 'f5152a2ca09811540b626965f52f5793e6c99728', subheading: subheading, onClick: this.handleToggleOperator, class: "clickable-header" })), h("ul", { key: 'c4cad750e47e0b6c94d6a76b2a4d8b72e36b3402' }, this.expression.exp.map(this.renderChildExpression), h("li", { key: 'ddd614f237a0c0314c2977b74a31b365f3251f9d', class: "add-button" }, this.renderAddButton(), this.renderAddGroupButton()))));
|
|
91
48
|
}
|
|
92
49
|
getSubheading() {
|
|
93
|
-
|
|
94
|
-
return '';
|
|
95
|
-
}
|
|
96
|
-
return this.expression.op === Operator.AND
|
|
97
|
-
? 'All of these conditions are true'
|
|
98
|
-
: 'Any of these conditions are true';
|
|
50
|
+
return getFilterGroupSubheading(this.expression.op, this.expression.exp.length);
|
|
99
51
|
}
|
|
100
52
|
renderAddButton() {
|
|
101
53
|
const label = this.getAddButtonLabel();
|
|
@@ -106,18 +58,10 @@ export class LimeQueryFilterGroupComponent {
|
|
|
106
58
|
return (h("limel-button", { label: label, icon: "tree_structure", onClick: this.handleAddChildGroup }));
|
|
107
59
|
}
|
|
108
60
|
getAddButtonLabel() {
|
|
109
|
-
|
|
110
|
-
if (this.expression.exp.length === 0) {
|
|
111
|
-
return 'Add a condition';
|
|
112
|
-
}
|
|
113
|
-
return isAnd ? 'Add another condition' : 'Add alternative';
|
|
61
|
+
return getAddConditionButtonLabel(this.expression.op, this.expression.exp.length);
|
|
114
62
|
}
|
|
115
63
|
getAddGroupButtonLabel() {
|
|
116
|
-
|
|
117
|
-
if (this.expression.exp.length === 0) {
|
|
118
|
-
return 'Add a group';
|
|
119
|
-
}
|
|
120
|
-
return isAnd ? 'Add another group' : 'Add alternative group';
|
|
64
|
+
return getAddGroupButtonLabel(this.expression.op, this.expression.exp.length);
|
|
121
65
|
}
|
|
122
66
|
static get is() { return "limebb-lime-query-filter-group"; }
|
|
123
67
|
static get encapsulation() { return "shadow"; }
|