@evoke-platform/ui-components 1.0.0-dev.170 → 1.0.0-dev.173
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/dist/published/components/custom/CriteriaBuilder/CriteriaBuilder.d.ts +1 -0
- package/dist/published/components/custom/CriteriaBuilder/CriteriaBuilder.js +8 -23
- package/dist/published/components/custom/CriteriaBuilder/ValueEditor.js +22 -14
- package/dist/published/stories/CriteriaBuilder.stories.js +3 -0
- package/package.json +1 -1
|
@@ -6,6 +6,7 @@ export declare type CriteriaInputProps = {
|
|
|
6
6
|
properties: ObjectProperty[];
|
|
7
7
|
setCriteria: Function;
|
|
8
8
|
criteria?: Record<string, any>;
|
|
9
|
+
originalCriteria?: Record<string, any>;
|
|
9
10
|
enablePresetValues?: boolean;
|
|
10
11
|
presetValues?: PresetValue[];
|
|
11
12
|
dynamicContentInput?: {
|
|
@@ -25,8 +25,6 @@ const ALL_OPERATORS = [
|
|
|
25
25
|
{ name: 'notNull', label: 'is not null' },
|
|
26
26
|
{ name: 'in', label: 'in' },
|
|
27
27
|
{ name: 'notIn', label: 'not in' },
|
|
28
|
-
{ name: 'between', label: 'between' },
|
|
29
|
-
{ name: 'notBetween', label: 'not between' },
|
|
30
28
|
];
|
|
31
29
|
const CustomRuleGroup = (props) => {
|
|
32
30
|
const rg = Object.assign(Object.assign({}, props), useRuleGroup(props));
|
|
@@ -136,42 +134,29 @@ export const valueEditor = (props) => {
|
|
|
136
134
|
return ValueEditor(props);
|
|
137
135
|
};
|
|
138
136
|
const CriteriaBuilder = (props) => {
|
|
139
|
-
const { properties, criteria, setCriteria, enablePresetValues, presetValues, operators, dynamicContentInput, disabled, hideBorder, presetGroupLabel, } = props;
|
|
137
|
+
const { properties, criteria, setCriteria, originalCriteria, enablePresetValues, presetValues, operators, dynamicContentInput, disabled, hideBorder, presetGroupLabel, } = props;
|
|
140
138
|
const [query, setQuery] = useState(undefined);
|
|
141
139
|
useEffect(() => {
|
|
142
|
-
if (criteria) {
|
|
143
|
-
const
|
|
140
|
+
if (criteria || originalCriteria) {
|
|
141
|
+
const criteriaToParse = criteria || originalCriteria || {};
|
|
142
|
+
const updatedQuery = parseMongoDB(criteriaToParse);
|
|
144
143
|
setQuery(Object.assign(Object.assign({}, updatedQuery), { rules: updatedQuery.rules.map((rule) => {
|
|
145
144
|
var _a, _b;
|
|
146
145
|
const propertyType = (_a = properties.find((property) => property.id === rule.field)) === null || _a === void 0 ? void 0 : _a.type;
|
|
147
146
|
return Object.assign(Object.assign({}, rule), { value: propertyType === 'array' ||
|
|
148
147
|
(propertyType === 'string' && rule.operator === 'in') ||
|
|
149
148
|
rule.operator === 'notIn'
|
|
150
|
-
? (_b = rule.value) === null || _b === void 0 ? void 0 : _b.split(',')
|
|
151
|
-
return {
|
|
152
|
-
label: item,
|
|
153
|
-
value: {
|
|
154
|
-
name: item,
|
|
155
|
-
label: item,
|
|
156
|
-
},
|
|
157
|
-
};
|
|
158
|
-
})
|
|
149
|
+
? (_b = rule.value) === null || _b === void 0 ? void 0 : _b.split(',')
|
|
159
150
|
: rule.value });
|
|
160
151
|
}) }));
|
|
161
152
|
}
|
|
162
153
|
else {
|
|
163
154
|
setQuery({ combinator: 'and', rules: [] });
|
|
164
155
|
}
|
|
165
|
-
}, []);
|
|
156
|
+
}, [originalCriteria]);
|
|
166
157
|
const handleQueryChange = (q) => {
|
|
167
|
-
const updatedQuery = Object.assign(Object.assign({}, q), { rules: q.rules.map((rule) => {
|
|
168
|
-
var _a;
|
|
169
|
-
return Object.assign(Object.assign({}, rule), { value: Array.isArray(rule.value) && !!((_a = rule.value[0]) === null || _a === void 0 ? void 0 : _a.label)
|
|
170
|
-
? rule.value.map((item) => item.label)
|
|
171
|
-
: rule.value });
|
|
172
|
-
}) });
|
|
173
158
|
setQuery(q);
|
|
174
|
-
const newCriteria = JSON.parse(formatQuery(
|
|
159
|
+
const newCriteria = JSON.parse(formatQuery(q, 'mongodb'));
|
|
175
160
|
if (isEmpty(difference(newCriteria, { $and: [{ $expr: true }] }))) {
|
|
176
161
|
setCriteria(undefined);
|
|
177
162
|
}
|
|
@@ -216,7 +201,7 @@ const CriteriaBuilder = (props) => {
|
|
|
216
201
|
},
|
|
217
202
|
} },
|
|
218
203
|
React.createElement(QueryBuilderMaterial, null,
|
|
219
|
-
React.createElement(QueryBuilder, { query: !criteria ? { combinator: 'and', rules: [] } : query, fields: fields, onQueryChange: (q) => {
|
|
204
|
+
React.createElement(QueryBuilder, { query: !criteria && !originalCriteria ? { combinator: 'and', rules: [] } : query, fields: fields, onQueryChange: (q) => {
|
|
220
205
|
handleQueryChange(q);
|
|
221
206
|
}, showCombinatorsBetweenRules: true, listsAsArrays: true, disabled: disabled, addRuleToNewGroups: true, controlElements: {
|
|
222
207
|
combinatorSelector: customCombinator,
|
|
@@ -23,7 +23,7 @@ const ValueEditor = (props) => {
|
|
|
23
23
|
const [openPresetValues, setOpenPresetValues] = useState(false);
|
|
24
24
|
const disabled = ['null', 'notNull'].includes(operator);
|
|
25
25
|
const presetValues = (_a = context.presetValues) !== null && _a !== void 0 ? _a : [];
|
|
26
|
-
const isPresetValue = (value) => (value === null || value === void 0 ? void 0 : value.
|
|
26
|
+
const isPresetValue = (value) => (value === null || value === void 0 ? void 0 : value.startsWith('{{{')) && (value === null || value === void 0 ? void 0 : value.endsWith('}}}'));
|
|
27
27
|
const isPresetValueSelected = presetValues && typeof value === 'string' && isPresetValue(value);
|
|
28
28
|
const presetDisplayValue = (_c = (_b = presetValues === null || presetValues === void 0 ? void 0 : presetValues.find((option) => option.value.name === value)) === null || _b === void 0 ? void 0 : _b.label) !== null && _c !== void 0 ? _c : '';
|
|
29
29
|
const onClick = (e) => {
|
|
@@ -52,6 +52,9 @@ const ValueEditor = (props) => {
|
|
|
52
52
|
if (isPresetValueSelected) {
|
|
53
53
|
return;
|
|
54
54
|
}
|
|
55
|
+
if (disabled) {
|
|
56
|
+
return React.createElement(React.Fragment, null);
|
|
57
|
+
}
|
|
55
58
|
if (inputType === 'date') {
|
|
56
59
|
// date editor
|
|
57
60
|
return (React.createElement(LocalizationProvider, null,
|
|
@@ -90,27 +93,32 @@ const ValueEditor = (props) => {
|
|
|
90
93
|
...((_a = values === null || values === void 0 ? void 0 : values.sort((a, b) => a.label.localeCompare(b.name))) !== null && _a !== void 0 ? _a : []),
|
|
91
94
|
...((_b = presetValues === null || presetValues === void 0 ? void 0 : presetValues.sort((a, b) => a.label.localeCompare(b.label))) !== null && _b !== void 0 ? _b : [])
|
|
92
95
|
];
|
|
93
|
-
const getValue = () => {
|
|
94
|
-
if (isMultiple) {
|
|
95
|
-
return Array.isArray(value) && !disabled ? value : [];
|
|
96
|
-
}
|
|
97
|
-
else {
|
|
98
|
-
return disabled ? value : '';
|
|
99
|
-
}
|
|
100
|
-
};
|
|
101
96
|
if (isMultiple || (values === null || values === void 0 ? void 0 : values.length)) {
|
|
102
|
-
return (React.createElement(Autocomplete, { freeSolo: inputType !== 'array' && inputType !== 'select', multiple: isMultiple, options: options, value:
|
|
97
|
+
return (React.createElement(Autocomplete, { freeSolo: inputType !== 'array' && inputType !== 'select', multiple: isMultiple, options: options, value: isMultiple ? (Array.isArray(value) ? value : []) : value, onChange: (event, newValue) => {
|
|
103
98
|
var _a, _b, _c;
|
|
104
99
|
let value;
|
|
105
100
|
if (isMultiple) {
|
|
106
|
-
|
|
101
|
+
const values = newValue.map((item) => { var _a; return item.name || ((_a = item.value) === null || _a === void 0 ? void 0 : _a.name) || item; });
|
|
102
|
+
value = Array.from(new Set(values));
|
|
107
103
|
}
|
|
108
104
|
else {
|
|
109
|
-
value = (_c = (_b = newValue === null || newValue === void 0 ? void 0 : newValue.value) === null || _b === void 0 ? void 0 : _b.name) !== null && _c !== void 0 ? _c : '';
|
|
105
|
+
value = (_c = (_a = newValue === null || newValue === void 0 ? void 0 : newValue.name) !== null && _a !== void 0 ? _a : (_b = newValue === null || newValue === void 0 ? void 0 : newValue.value) === null || _b === void 0 ? void 0 : _b.name) !== null && _c !== void 0 ? _c : '';
|
|
110
106
|
}
|
|
111
107
|
handleOnChange(value);
|
|
112
|
-
}, renderInput: (params) => (React.createElement(TextField, Object.assign({ inputRef: inputRef, label: params === null || params === void 0 ? void 0 : params.label }, params, { size: "small" }))),
|
|
113
|
-
|
|
108
|
+
}, renderInput: (params) => (React.createElement(TextField, Object.assign({ inputRef: inputRef, label: params === null || params === void 0 ? void 0 : params.label }, params, { size: "small" }))), getOptionLabel: (option) => {
|
|
109
|
+
var _a;
|
|
110
|
+
if (typeof option === 'string') {
|
|
111
|
+
return ((_a = options.find((o) => { var _a; return option === o.name || option == ((_a = o.value) === null || _a === void 0 ? void 0 : _a.name); })) === null || _a === void 0 ? void 0 : _a.label) || '';
|
|
112
|
+
}
|
|
113
|
+
return option === null || option === void 0 ? void 0 : option.label;
|
|
114
|
+
}, isOptionEqualToValue: (option, value) => {
|
|
115
|
+
var _a;
|
|
116
|
+
if (typeof value === 'string') {
|
|
117
|
+
return (option === null || option === void 0 ? void 0 : option.name) === value || ((_a = option === null || option === void 0 ? void 0 : option.value) === null || _a === void 0 ? void 0 : _a.name) === value;
|
|
118
|
+
}
|
|
119
|
+
else {
|
|
120
|
+
return (option === null || option === void 0 ? void 0 : option.label) === (value === null || value === void 0 ? void 0 : value.label);
|
|
121
|
+
}
|
|
114
122
|
}, groupBy: (option) => { var _a; return isPresetValue((_a = option.value) === null || _a === void 0 ? void 0 : _a.name) ? context.presetGroupLabel || 'Preset Values' : 'Options'; }, renderGroup: groupRenderGroup, sortBy: 'NONE', sx: { width: '33%' } }));
|
|
115
123
|
}
|
|
116
124
|
else {
|