@evoke-platform/ui-components 1.1.0-testing.0 → 1.1.0-testing.2

package/dist/published/components/custom/CriteriaBuilder/CriteriaBuilder.js

@@ -3,7 +3,7 @@ import { Typography } from '@mui/material';
 import { QueryBuilderMaterial } from '@react-querybuilder/material';
 import { isArray, isEmpty, startCase } from 'lodash';
 import React, { useEffect, useMemo, useState } from 'react';
-import { QueryBuilder, RuleGroupBodyComponents, RuleGroupHeaderComponents, TestID, defaultRuleProcessorMongoDB, formatQuery, useRuleGroup, } from 'react-querybuilder';
+import { QueryBuilder, RuleGroupBodyComponents, RuleGroupHeaderComponents, TestID, add, defaultRuleProcessorMongoDB, formatQuery, useRuleGroup, } from 'react-querybuilder';
 import 'react-querybuilder/dist/query-builder.css';
 import escape from 'string-escape-regex';
 import { TrashCan } from '../../../icons/custom';
@@ -28,6 +28,14 @@ const ALL_OPERATORS = [
     { name: 'in', label: 'In' },
     { name: 'notIn', label: 'Not in' },
 ];
+const styles = {
+    buttons: {
+        padding: '6px 16px',
+        fontSize: '0.875rem',
+        marginRight: '0px',
+        boxShadow: 'none',
+    },
+};
 const CustomRuleGroup = (props) => {
     const rg = { ...props, ...useRuleGroup(props) };
     const [addRule, addGroup, cloneGroup, toggleLockGroup, removeGroup] = [
@@ -73,11 +81,8 @@ const customButton = (props) => {
         case 'Add rule':
             buttonLabel = 'Add Condition';
             break;
-        case 'Remove group':
-            buttonLabel = 'Clear All';
-            break;
     }
-    return (React.createElement(React.Fragment, null, (path.length < nestedConditionLimit || title === 'Add rule') && (React.createElement(Button, { onClick: handleOnClick, startIcon: React.createElement(AddRounded, null), sx: {
+    return (React.createElement(React.Fragment, null, !!path.length && (path.length < nestedConditionLimit || title === 'Add rule') && (React.createElement(Button, { onClick: handleOnClick, startIcon: React.createElement(AddRounded, null), sx: {
             padding: '6px 16px',
             fontSize: '0.875rem',
             marginRight: path.length === 0 ? '.5rem' : '0px',
@@ -282,29 +287,36 @@ const CriteriaBuilder = (props) => {
             !isEmpty(treeViewOpts) && updatePropertyTreeMap(updatedQuery);
             setQuery({
                 ...updatedQuery,
-                rules: processRules(updatedQuery.rules),
+                rules: processRules(updatedQuery.rules, true),
             });
         }
         else {
             setQuery({ combinator: 'and', rules: [] });
         }
     }, [originalCriteria]);
-    function processRules(rules) {
+    function processRules(rules, isSavedValue) {
         return rules.map((rule) => {
             if ('rules' in rule) {
                 return {
                     ...rule,
-                    rules: processRules(rule.rules),
+                    rules: processRules(rule.rules, isSavedValue),
                 };
             }
             else {
                 const propertyType = properties.find((property) => property.id === rule.field)?.type;
+                let adjustedValue = rule.value;
+                if ((propertyType === 'array' ||
+                    (propertyType === 'string' && (rule.operator === 'in' || rule.operator === 'notIn'))) &&
+                    isSavedValue) {
+                    adjustedValue = rule.value.split(',');
+                }
+                else if ((rule.operator === 'null' || rule.operator === 'notNull') && rule.value) {
+                    adjustedValue = null;
+                }
                 return {
                     ...rule,
-                    value: propertyType === 'array' ||
-                        (propertyType === 'string' && (rule.operator === 'in' || rule.operator === 'notIn'))
-                        ? rule.value?.split(',')
-                        : rule.value,
+                    operator: propertyType === 'array' && rule.operator === '=' ? 'in' : rule.operator,
+                    value: adjustedValue,
                 };
             }
         });
@@ -334,9 +346,31 @@ const CriteriaBuilder = (props) => {
             setPropertyTreeMap(tempPropertyMap);
         });
     };
+    const handleClearAll = () => {
+        handleQueryChange({ combinator: 'and', rules: [] });
+    };
+    const handleAddRule = () => {
+        if (query) {
+            const newQuery = add(query, { field: '', operator: '', value: '' }, []);
+            setQuery(newQuery);
+        }
+    };
+    const handleAddGroup = () => {
+        if (query) {
+            const newQuery = add(query, {
+                combinator: 'and',
+                rules: [{ field: '', operator: '', value: '' }],
+            }, []);
+            setQuery(newQuery);
+        }
+    };
     const handleQueryChange = (q) => {
-        setQuery(q);
-        const newCriteria = JSON.parse(formatQuery(q, {
+        const processedQuery = {
+            ...q,
+            rules: processRules(q.rules, false),
+        };
+        setQuery(processedQuery);
+        const newCriteria = JSON.parse(formatQuery(processedQuery, {
             format: 'mongodb',
             ruleProcessor: (rule, options) => {
                 let newRule = rule;
@@ -405,6 +439,7 @@ const CriteriaBuilder = (props) => {
                     borderStyle: 'hidden',
                     background: '#fff',
                     maxWidth: '70vw',
+                    margin: 'auto',
                 },
                 '.ruleGroup-header': {
                     display: 'block',
@@ -424,7 +459,9 @@ const CriteriaBuilder = (props) => {
                 '.ruleGroup .ruleGroup': { borderStyle: 'solid' },
             } },
             React.createElement(QueryBuilderMaterial, null,
-                React.createElement(QueryBuilder, { query: !criteria && !originalCriteria ? { combinator: 'and', rules: [] } : query, fields: fields, onQueryChange: (q) => {
+                React.createElement(QueryBuilder, { query: !criteria && !originalCriteria && query.rules.length === 0
+                        ? { combinator: 'and', rules: [] }
+                        : query, fields: fields, onQueryChange: (q) => {
                         handleQueryChange(q);
                     }, onAddRule: (rule) => {
                         // overrides new rule and sets up an empty rule with all three fields empty
@@ -483,7 +520,45 @@ const CriteriaBuilder = (props) => {
                         ruleGroup: 'container',
                     }, operators: operators
                         ? ALL_OPERATORS.filter((o) => operators.includes(o.name))
-                        : ALL_OPERATORS }))));
+                        : ALL_OPERATORS })),
+            React.createElement(Box, { sx: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    marginBottom: '10px',
+                    maxWidth: '71vw',
+                    marginLeft: 'auto',
+                    marginRight: 'auto',
+                } },
+                React.createElement(Box, null,
+                    React.createElement(Button, { sx: {
+                            backgroundColor: 'rgba(0, 117, 167, 0.08)',
+                            color: '#0075A7',
+                            marginLeft: '10px',
+                            '&:hover': {
+                                backgroundColor: 'rgba(0, 117, 167, 0.08)',
+                            },
+                            ...styles.buttons,
+                        }, startIcon: React.createElement(AddRounded, null), onClick: handleAddRule }, "Add Condition"),
+                    React.createElement(Button, { sx: {
+                            backgroundColor: '#f6f7f8',
+                            color: '#000',
+                            marginLeft: '8px',
+                            '&:hover': {
+                                backgroundColor: '#f6f7f8',
+                            },
+                            ...styles.buttons,
+                        }, startIcon: React.createElement(AddRounded, null), onClick: handleAddGroup, title: "Add a rule at the bottom of the group" }, "Add Condition Group")),
+                React.createElement(Button, { variant: 'text', sx: {
+                        justifyContent: 'flex-end',
+                        color: '#000',
+                        fontWeight: 500,
+                        paddingLeft: '0px',
+                        '&:hover': {
+                            backgroundColor: 'transparent',
+                        },
+                        ...styles.buttons,
+                    }, onClick: handleClearAll, title: "Clear all conditions", disabled: isEmpty(query.rules) }, "Clear All"))));
     }
     return React.createElement(React.Fragment, null);
 };

package/dist/published/components/custom/CriteriaBuilder/ValueEditor.js

@@ -2,7 +2,7 @@ import { Instant, LocalDate, LocalDateTime, LocalTime, ZoneId } from '@js-joda/c
 import { ClearRounded } from '@mui/icons-material';
 import { Box, darken, lighten, styled } from '@mui/material';
 import { DateTimePicker, TimePicker } from '@mui/x-date-pickers';
-import React, { useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Autocomplete, Chip, DatePicker, LocalizationProvider, Menu, MenuItem, TextField, Typography, } from '../../core';
 import { NumericFormat } from '../FormField/InputFieldComponent';
 const GroupHeader = styled('div')(({ theme }) => ({
@@ -18,7 +18,7 @@ const GroupHeader = styled('div')(({ theme }) => ({
 }));
 const GroupItems = styled('ul')({ padding: 0 });
 const ValueEditor = (props) => {
-    const { handleOnChange, value, operator, context, level, rule } = props;
+    const { handleOnChange, value, operator, context, level, rule, fieldData } = props;
     let inputType = props.inputType;
     let values = props.values;
     const property = context.propertyTreeMap?.[rule.field];
@@ -43,6 +43,15 @@ const ValueEditor = (props) => {
     const isPresetValueSelected = presetValues && typeof value === 'string' && isPresetValue(value);
     const presetDisplayValue = presetValues?.find((option) => option.value.name === value)?.label ?? '';
     let readOnly = false;
+    useEffect(() => {
+        if (!['in', 'notIn'].includes(operator) && Array.isArray(value)) {
+            handleOnChange('');
+        }
+        else if (['in', 'notIn'].includes(operator) && !Array.isArray(value)) {
+            handleOnChange([]);
+            setInputValue('');
+        }
+    }, [operator]);
     if (context.disabledCriteria) {
         readOnly =
             Object.entries(context.disabledCriteria.criteria).some(([key, value]) => key === rule.field && value === rule.value && rule.operator === '=') && level === context.disabledCriteria.level;
@@ -147,7 +156,7 @@ const ValueEditor = (props) => {
                 ...(presetValues?.sort((a, b) => a.label.localeCompare(b.label)) ?? []),
             ];
             if (isMultiple || values?.length) {
-                return (React.createElement(Autocomplete, { freeSolo: inputType !== 'array' && inputType !== 'select', multiple: isMultiple, options: options, value: isMultiple ? (Array.isArray(value) ? value : []) : value, 
+                return (React.createElement(Autocomplete, { freeSolo: inputType !== 'array' && fieldData.valueEditorType !== 'select', multiple: isMultiple, options: options, value: isMultiple ? (Array.isArray(value) ? value : []) : Array.isArray(value) ? '' : value, 
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     onChange: (event, newValue) => {
                         let value;
@@ -161,7 +170,19 @@ const ValueEditor = (props) => {
                         }
                         handleOnChange(value);
                     }, onBlur: () => {
-                        if (inputValue && (operator === 'in' || operator === 'notIn')) {
+                        if (inputValue &&
+                            (options.some((option) => option.name === inputValue) || !options.length) &&
+                            (operator === 'in' || operator === 'notIn')) {
+                            const newValues = Array.isArray(value) ? [...value, inputValue] : [inputValue];
+                            handleOnChange(Array.from(new Set(newValues)));
+                            setInputValue('');
+                        }
+                    }, onKeyDown: (event) => {
+                        if (event.key === 'Enter' &&
+                            inputValue &&
+                            (options.some((option) => option.name === inputValue) || !options.length) &&
+                            (operator === 'in' || operator === 'notIn')) {
+                            event.preventDefault();
                             const newValues = Array.isArray(value) ? [...value, inputValue] : [inputValue];
                             handleOnChange(Array.from(new Set(newValues)));
                             setInputValue('');

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.1.0-testing.0",
+    "version": "1.1.0-testing.2",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",