@evoke-platform/ui-components 1.16.0 → 1.17.0

package/dist/published/components/custom/CriteriaBuilder/CriteriaBuilder.d.ts

@@ -1,14 +1,10 @@
-import { Property } from '@evoke-platform/context';
 import React from 'react';
 import 'react-querybuilder/dist/query-builder.css';
-import { Operator, PresetValue, TreeViewObject } from './types';
+import { EvokeObject } from '../../../types';
+import { ObjectProperty, Operator, PresetValue, TreeViewObject } from './types';
 import { ValueEditorProps } from './ValueEditor';
 export type CriteriaInputProps = {
-    /**
-     * The ability to input free text for property selection.
-     */
-    propertyFreeSolo?: boolean;
-    properties: Property[];
+    properties: ObjectProperty[];
     setCriteria: (criteria?: Record<string, unknown> | undefined) => void;
     criteria?: Record<string, unknown>;
     originalCriteria?: Record<string, unknown>;
@@ -27,7 +23,7 @@ export type CriteriaInputProps = {
     hideBorder?: boolean;
     presetGroupLabel?: string;
     treeViewOpts?: {
-        fetchObject?: (objectId: string) => Promise<TreeViewObject | undefined>;
+        fetchObject?: (objectId: string) => Promise<EvokeObject | undefined>;
         object: TreeViewObject;
     };
     /**

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

@@ -11,7 +11,7 @@ import { Box } from '../../layout';
 import { OverflowTextField } from '../OverflowTextField';
 import { difference, parseMongoDB } from '../util';
 import PropertyTree from './PropertyTree';
-import { ALL_OPERATORS } from './utils';
+import { ALL_OPERATORS, traversePropertyPath } from './utils';
 import ValueEditor from './ValueEditor';
 const styles = {
     buttons: {
@@ -88,114 +88,99 @@ const customButton = (props) => {
             },
         } }, buttonLabel))));
 };
-const customOperatorSelector = (props) => {
-    const { options, value, handleOnChange, context, level } = props;
+const customSelector = (props) => {
+    const { options, value, handleOnChange, title, context, level } = props;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const rule = props.rule;
+    let width = '90px';
     let val = value;
     let opts = options;
-    const placeholder = 'Select Operator';
-    const width = '25%';
     let inputType = props.fieldData?.inputType;
     // for tree view / related object properties, the properties are stored in the propertyTreeMap upon selection
     if (!!context.treeViewOpts && !!context.propertyTreeMap?.[rule.field]) {
         inputType = context.propertyTreeMap[rule.field].type;
     }
+    const isTreeViewEnabled = context.treeViewOpts && title === 'Fields';
+    const fetchObject = context.treeViewOpts?.fetchObject;
+    const object = context.treeViewOpts?.object;
     let readOnly = context.disabled;
     if (!readOnly && context.disabledCriteria) {
         readOnly =
             Object.entries(context.disabledCriteria.criteria).some(([key, value]) => key === rule.field && value === rule.value && rule.operator === '=') && level === context.disabledCriteria.level;
+        const keys = Object.keys(context.disabledCriteria.criteria);
+        if (title === 'Fields') {
+            opts = opts.filter((o) => readOnly || !keys.includes(o.name));
+        }
     }
-    if (inputType === 'array') {
-        opts = options
-            .filter((option) => ['null', 'notNull', 'in'].includes(option.name))
-            .map((option) => ({ name: option.name, label: option.label }));
-        val = val === '=' ? '' : options.find((option) => option.name === val).name;
-    }
-    else if (inputType === 'document' || inputType === 'criteria') {
-        opts = options
-            .filter((option) => ['null', 'notNull'].includes(option.name))
-            .map((option) => ({ name: option.name, label: option.label }));
-        val = val === '=' ? '' : options.find((option) => option.name === val).name;
-    }
-    else if (inputType === 'date' || inputType === 'date-time' || inputType === 'time') {
-        opts = options
-            .filter((option) => ['=', '!=', '<', '>', '<=', '>=', 'null', 'notNull'].includes(option.name))
-            .map((option) => ({
-            ...option,
-            label: option.name === '>'
-                ? inputType === 'time'
-                    ? 'Later than'
-                    : 'After'
-                : option.name === '>='
-                    ? inputType === 'time'
-                        ? 'Later than or at'
-                        : 'After or on'
-                    : option.name === '<'
+    let placeholder = '';
+    switch (title) {
+        case 'Operators':
+            width = '25%';
+            placeholder = 'Select Operator';
+            if (inputType === 'array') {
+                opts = options
+                    .filter((option) => ['null', 'notNull', 'in'].includes(option.name))
+                    .map((option) => ({ name: option.name, label: option.label }));
+                val = val === '=' ? '' : options.find((option) => option.name === val).name;
+            }
+            else if (inputType === 'document' || inputType === 'criteria') {
+                opts = options
+                    .filter((option) => ['null', 'notNull'].includes(option.name))
+                    .map((option) => ({ name: option.name, label: option.label }));
+                val = val === '=' ? '' : options.find((option) => option.name === val).name;
+            }
+            else if (inputType === 'date' || inputType === 'date-time' || inputType === 'time') {
+                opts = options
+                    .filter((option) => ['=', '!=', '<', '>', '<=', '>=', 'null', 'notNull'].includes(option.name))
+                    .map((option) => ({
+                    ...option,
+                    label: option.name === '>'
                         ? inputType === 'time'
-                            ? 'Earlier than'
-                            : 'Before'
-                        : option.name === '<='
+                            ? 'Later than'
+                            : 'After'
+                        : option.name === '>='
                             ? inputType === 'time'
-                                ? 'Earlier than or at'
-                                : 'Before or on'
-                            : option.label,
-        }));
-    }
-    else if (inputType === 'integer' || inputType === 'number') {
-        opts = options.filter((option) => ['=', '!=', '<', '<=', '>', '>=', 'null', 'notNull', 'in', 'notIn'].includes(option.name));
-        // checks if it is a single-select property
-    }
-    else if (inputType === 'string' && isArray(props.fieldData?.values)) {
-        opts = options.filter((option) => ['in', 'notIn', '=', '!=', 'notNull', 'null'].includes(option.name));
-    }
-    else if (inputType === 'string') {
-        opts = options.filter((option) => !['>', '<', '<=', '>='].includes(option.name));
-    }
-    else if (inputType === 'image' || inputType === 'boolean') {
-        opts = options.filter((option) => ['=', '!=', 'null', 'notNull'].includes(option.name));
-    }
-    return (React.createElement(Autocomplete, { options: opts, value: val ?? null, getOptionLabel: (option) => {
-            if (typeof option === 'string') {
-                return opts.find((o) => option === o.name)?.label || option;
+                                ? 'Later than or at'
+                                : 'After or on'
+                            : option.name === '<'
+                                ? inputType === 'time'
+                                    ? 'Earlier than'
+                                    : 'Before'
+                                : option.name === '<='
+                                    ? inputType === 'time'
+                                        ? 'Earlier than or at'
+                                        : 'Before or on'
+                                    : option.label,
+                }));
             }
-            return option.label;
-        }, getOptionKey: (option) => option.name, isOptionEqualToValue: (option, value) => {
-            if (typeof option === 'string') {
-                return option === value;
+            else if (inputType === 'integer' || inputType === 'number') {
+                opts = options.filter((option) => ['=', '!=', '<', '<=', '>', '>=', 'null', 'notNull', 'in', 'notIn'].includes(option.name));
+                // checks if it is a single-select property
             }
-            else {
-                return option.name === value;
+            else if (inputType === 'string' && isArray(props.fieldData?.values)) {
+                opts = options.filter((option) => ['in', 'notIn', '=', '!=', 'notNull', 'null'].includes(option.name));
             }
-        }, 
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        onChange: (event, newValue) => {
-            handleOnChange(typeof newValue === 'string' ? newValue : newValue?.value.name);
-        }, renderInput: (params) => (React.createElement(OverflowTextField, { value: opts.find((o) => value === o.name)?.label || val || '', ...params, placeholder: placeholder, size: "small", inputProps: {
-                ...params.inputProps,
-                'aria-label': placeholder,
-            } })), sx: { width: width, background: readOnly ? '#f4f6f8' : '#fff' }, disableClearable: true, readOnly: readOnly }));
-};
-const customFieldSelector = (props) => {
-    const { options, value, handleOnChange, context, level } = props;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const rule = props.rule;
-    const val = options.find((option) => option.name === value)?.name || value;
-    let opts = options;
-    const placeholder = 'Select Property';
-    const width = '37%';
-    const isTreeViewEnabled = context.treeViewOpts;
-    const fetchObject = context.treeViewOpts?.fetchObject;
-    const object = context.treeViewOpts?.object;
-    const setObject = context.treeViewOpts?.setObject;
-    let readOnly = context.disabled;
-    if (!readOnly && context.disabledCriteria) {
-        readOnly =
-            Object.entries(context.disabledCriteria.criteria).some(([key, value]) => key === rule.field && value === rule.value && rule.operator === '=') && level === context.disabledCriteria.level;
-        const keys = Object.keys(context.disabledCriteria.criteria);
-        opts = opts.filter((o) => readOnly || !keys.includes(o.name));
+            else if (inputType === 'string') {
+                opts = options.filter((option) => !['>', '<', '<=', '>='].includes(option.name));
+            }
+            else if (inputType === 'image' || inputType === 'boolean') {
+                opts = options.filter((option) => ['=', '!=', 'null', 'notNull'].includes(option.name));
+            }
+            break;
+        case 'Fields':
+            placeholder = 'Select Property';
+            width = '37%';
+            val = options.find((option) => option.name === val)?.name;
+            break;
     }
-    return (React.createElement(React.Fragment, null, isTreeViewEnabled ? (React.createElement(PropertyTree, { value: val ?? value, rootObject: object, setRootObject: setObject, fetchObject: fetchObject, propertyTreeMap: context.propertyTreeMap ?? {}, handleTreePropertySelect: handleOnChange })) : (React.createElement(Autocomplete, { freeSolo: context.propertyFreeSolo, options: opts, value: val || null, getOptionLabel: (option) => {
+    const handleTreePropertySelect = async (propertyId) => {
+        const propertyInfo = await traversePropertyPath(propertyId, object, fetchObject);
+        context.setPropertyTreeMap((prev) => {
+            return { ...prev, [propertyId]: propertyInfo };
+        });
+        handleOnChange(propertyId);
+    };
+    return (React.createElement(React.Fragment, null, isTreeViewEnabled ? (React.createElement(PropertyTree, { value: val ?? value, rootObject: object, fetchObject: fetchObject, propertyTreeMap: context.propertyTreeMap ?? {}, handleTreePropertySelect: handleTreePropertySelect })) : (React.createElement(Autocomplete, { options: opts, value: val ?? null, getOptionLabel: (option) => {
             if (typeof option === 'string') {
                 return opts.find((o) => option === o.name)?.label || option;
             }
@@ -210,10 +195,8 @@ const customFieldSelector = (props) => {
         }, 
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         onChange: (event, newValue) => {
-            handleOnChange(typeof newValue === 'string' ? newValue : newValue?.value.name);
-        }, onInputChange: context.propertyFreeSolo
-            ? (event, newInputValue) => handleOnChange(newInputValue)
-            : undefined, renderInput: (params) => (React.createElement(OverflowTextField, { value: val || '', ...params, placeholder: placeholder, size: "small", inputProps: {
+            handleOnChange(newValue?.value.name);
+        }, renderInput: (params) => (React.createElement(OverflowTextField, { value: opts.find((o) => value === o.name)?.label || '', ...params, placeholder: placeholder, size: "small", inputProps: {
                 ...params.inputProps,
                 'aria-label': placeholder,
             } })), sx: { width: width, background: readOnly ? '#f4f6f8' : '#fff' }, disableClearable: true, readOnly: readOnly }))));
@@ -292,159 +275,77 @@ const getAllRuleIds = (rules) => {
     });
     return ids;
 };
-const processRules = (rules, properties) => {
-    return rules.map((rule) => {
-        if ('rules' in rule) {
-            return {
-                ...rule,
-                rules: processRules(rule.rules, properties),
-            };
-        }
-        else {
-            const propertyType = properties.find((property) => property.id === rule.field)?.type;
-            let adjustedValue = rule.value;
-            if ((rule.operator === 'null' || rule.operator === 'notNull') && rule.value) {
-                adjustedValue = null;
+const CriteriaBuilder = (props) => {
+    const { properties, criteria, setCriteria, originalCriteria, enablePresetValues, presetValues, operators, disabled, disabledCriteria, hideBorder, presetGroupLabel, customValueEditor, treeViewOpts, disableRegexEscapeChars, } = props;
+    const [propertyTreeMap, setPropertyTreeMap] = useState();
+    const processRules = (rules) => {
+        return rules.map((rule) => {
+            if ('rules' in rule) {
+                return {
+                    ...rule,
+                    rules: processRules(rule.rules),
+                };
             }
-            return {
-                ...rule,
-                operator: propertyType === 'array' && rule.operator === '=' ? 'in' : rule.operator,
-                value: adjustedValue,
-            };
-        }
-    });
-};
-const insertChangesOnly = (prev, newObject) => {
-    const mergedProperties = newObject.properties.map((newProp) => {
-        const prevProp = prev.properties.find((prop) => prop.id === newProp.id);
-        if (prevProp) {
-            return {
-                ...newProp,
-                children: newProp.children &&
-                    newProp.children[0].type === 'loading' &&
-                    prevProp.children
-                    ? prevProp.children
-                    : newProp.children && prevProp.children
-                        ? insertChangesOnly({ id: prevProp.id, name: prevProp.name, properties: prevProp.children }, { id: newProp.id, name: newProp.name, properties: newProp.children }).properties
-                        : newProp.children,
-            };
-        }
-        else {
-            return newProp;
-        }
-    });
-    return {
-        ...newObject,
-        properties: mergedProperties,
+            else {
+                const propertyType = properties.find((property) => property.id === rule.field)?.type;
+                let adjustedValue = rule.value;
+                if ((rule.operator === 'null' || rule.operator === 'notNull') && rule.value) {
+                    adjustedValue = null;
+                }
+                return {
+                    ...rule,
+                    operator: propertyType === 'array' && rule.operator === '=' ? 'in' : rule.operator,
+                    value: adjustedValue,
+                };
+            }
+        });
     };
-};
-const CriteriaBuilder = (props) => {
-    const { propertyFreeSolo, properties, criteria, setCriteria, originalCriteria, enablePresetValues, presetValues, operators, disabled, disabledCriteria, hideBorder, presetGroupLabel, customValueEditor, treeViewOpts, disableRegexEscapeChars, } = props;
-    const [propertyTreeMap, setPropertyTreeMap] = useState({});
-    const [treeViewObject, setTreeViewObject] = useState();
     useEffect(() => {
-        let obj;
-        if (treeViewOpts?.object) {
-            obj = {
-                ...treeViewOpts.object,
-                properties: treeViewOpts.object.properties
-                    .filter((prop) => prop.type !== 'collection')
-                    .map((prop) => ({
-                    ...prop,
-                    children: prop.children
-                        ?.filter((child) => child.type !== 'collection')
-                        .map((child) => ({
-                        ...child,
-                        id: `${prop.id}.${child.id}`,
-                    })),
-                })),
-            };
-        }
-        if ((criteria || originalCriteria) && obj && treeViewOpts?.fetchObject) {
-            const updateTreeViewObject = async (criteria, treeViewObject, fetchObject) => {
-                const newQuery = parseMongoDB(criteria);
+        if ((criteria || originalCriteria) &&
+            !isEmpty(treeViewOpts) &&
+            treeViewOpts.object &&
+            treeViewOpts.fetchObject) {
+            const { object, fetchObject } = treeViewOpts;
+            // this retrieves the properties from a treeview for each property in the query
+            // they are then used in the custom query builder components to determine the input type etc
+            const updatePropertyTreeMap = async () => {
+                const newQuery = parseMongoDB(criteria || originalCriteria || {});
                 const ids = getAllRuleIds(newQuery.rules);
-                const newTreeViewObject = { ...treeViewObject };
-                const traversePath = async (path, properties, fetchObject) => {
-                    const prop = properties?.find((prop) => path.startsWith(`${prop.id}.`) || path === prop.id);
-                    if (prop?.type === 'object' && prop.objectId && prop.children) {
-                        if (prop.children.length === 1 &&
-                            prop.children[0]?.type === 'loading') {
-                            try {
-                                const fetchedObject = await fetchObject(prop.objectId);
-                                prop.children = fetchedObject?.properties
-                                    ?.filter((item) => item.type !== 'collection')
-                                    .map((item) => {
-                                    return {
-                                        ...item,
-                                        id: `${prop.id}.${item.id}`,
-                                        children: item.children?.map((child) => ({
-                                            ...child,
-                                            id: `${prop.id}.${item.id}.${child.id}`,
-                                        })),
-                                    };
-                                });
-                                fetchedObject && (await traversePath(path, fetchedObject.properties, fetchObject));
-                            }
-                            catch (error) {
-                                prop.children = [
-                                    {
-                                        id: `${prop.id}-failed`,
-                                        name: 'Loading Failed',
-                                        type: 'loadingFailed',
-                                    },
-                                ];
-                                console.error('Error fetching object for criteria builder:', error);
-                            }
-                        }
-                        else {
-                            await traversePath(path, prop.children, fetchObject);
-                        }
-                    }
-                };
+                let newPropertyTreeMap = {};
+                const newPropertyTreeMapPromises = [];
                 for (const id of ids) {
-                    await traversePath(id, newTreeViewObject.properties, fetchObject);
-                }
-                setTreeViewObject((prevTreeViewObject) => prevTreeViewObject ? insertChangesOnly(prevTreeViewObject, newTreeViewObject) : newTreeViewObject);
-            };
-            updateTreeViewObject(criteria || originalCriteria || {}, obj, treeViewOpts.fetchObject);
-        }
-    }, [treeViewOpts, criteria, originalCriteria]);
-    useEffect(() => {
-        if (!treeViewObject)
-            return;
-        const getNamePath = (path, object) => {
-            const helper = (path, object) => {
-                let namePath = '';
-                const prop = (object.properties ?? []).find((prop) => path.startsWith(`${prop.id}.`) || path === prop.id);
-                if (prop) {
-                    if (prop.children) {
-                        const result = helper(path, { id: prop.id, name: prop.name, properties: prop.children });
-                        namePath = result ? prop.name + ' / ' + result : '';
-                    }
-                    else {
-                        namePath = prop.name;
+                    if (!propertyTreeMap?.[id]) {
+                        newPropertyTreeMapPromises.push(traversePropertyPath(id, object, fetchObject)
+                            .then((property) => {
+                            if (property) {
+                                return {
+                                    [id]: property,
+                                };
+                            }
+                            return {};
+                        })
+                            .catch((err) => {
+                            console.error(err);
+                            return {};
+                        }));
                     }
                 }
-                return namePath;
+                newPropertyTreeMap = (await Promise.all(newPropertyTreeMapPromises)).reduce((acc, currentProperty) => ({ ...acc, ...currentProperty }), {});
+                setPropertyTreeMap((prevPropertyTreeMap) => ({
+                    ...prevPropertyTreeMap,
+                    ...newPropertyTreeMap,
+                }));
             };
-            return helper(path, object) || path;
-        };
-        const newQuery = parseMongoDB(criteria || originalCriteria || {});
-        const ids = getAllRuleIds(newQuery.rules);
-        const result = {};
-        for (const id of ids) {
-            result[id] = getNamePath(id, treeViewObject);
+            updatePropertyTreeMap().catch((err) => console.error(err));
         }
-        setPropertyTreeMap(result);
-    }, [criteria, originalCriteria, treeViewObject]);
+    }, [criteria, originalCriteria, treeViewOpts]);
     const initializeQuery = () => {
         const criteriaToParse = criteria || originalCriteria;
         const updatedQuery = criteriaToParse ? parseMongoDB(criteriaToParse || {}) : undefined;
         return updatedQuery
             ? {
                 ...updatedQuery,
-                rules: processRules(updatedQuery.rules, properties),
+                rules: processRules(updatedQuery.rules),
             }
             : { combinator: 'and', rules: [] };
     };
@@ -470,7 +371,7 @@ const CriteriaBuilder = (props) => {
     const handleQueryChange = (q) => {
         const processedQuery = {
             ...q,
-            rules: processRules(q.rules, properties),
+            rules: processRules(q.rules),
         };
         setQuery(processedQuery);
         const newCriteria = JSON.parse(formatQuery(processedQuery, {
@@ -562,6 +463,9 @@ const CriteriaBuilder = (props) => {
                     borderStyle: 'hidden',
                     background: '#fff',
                 },
+                '.ruleGroup:not(:has(.rule, .ruleGroup .ruleGroup))': {
+                    backgroundColor: 'transparent',
+                },
                 '.ruleGroup-header': {
                     display: 'block',
                 },
@@ -612,8 +516,8 @@ const CriteriaBuilder = (props) => {
                         },
                     }, showCombinatorsBetweenRules: true, listsAsArrays: true, disabled: disabled, addRuleToNewGroups: true, controlElements: {
                         combinatorSelector: customCombinator,
-                        fieldSelector: customFieldSelector,
-                        operatorSelector: customOperatorSelector,
+                        fieldSelector: customSelector,
+                        operatorSelector: customSelector,
                         addGroupAction: customButton,
                         addRuleAction: customButton,
                         ruleGroup: CustomRuleGroup,
@@ -627,15 +531,17 @@ const CriteriaBuilder = (props) => {
                         presetGroupLabel,
                         disabled,
                         disabledCriteria,
-                        treeViewOpts: treeViewObject && treeViewOpts
+                        treeViewOpts: treeViewOpts
                             ? {
                                 ...treeViewOpts,
-                                object: treeViewObject,
-                                setObject: setTreeViewObject,
+                                object: {
+                                    ...treeViewOpts?.object,
+                                    properties: treeViewOpts?.object.properties.filter(({ type }) => type !== 'collection'),
+                                },
                             }
                             : undefined,
                         propertyTreeMap,
-                        propertyFreeSolo,
+                        setPropertyTreeMap,
                     }, controlClassnames: {
                         ruleGroup: 'container',
                     }, operators: operators