@evoke-platform/ui-components 1.15.0 → 1.16.0

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

@@ -1,10 +1,14 @@
+import { Property } from '@evoke-platform/context';
 import React from 'react';
 import 'react-querybuilder/dist/query-builder.css';
-import { EvokeObject } from '../../../types';
-import { ObjectProperty, Operator, PresetValue, TreeViewObject } from './types';
+import { Operator, PresetValue, TreeViewObject } from './types';
 import { ValueEditorProps } from './ValueEditor';
 export type CriteriaInputProps = {
-    properties: ObjectProperty[];
+    /**
+     * The ability to input free text for property selection.
+     */
+    propertyFreeSolo?: boolean;
+    properties: Property[];
     setCriteria: (criteria?: Record<string, unknown> | undefined) => void;
     criteria?: Record<string, unknown>;
     originalCriteria?: Record<string, unknown>;
@@ -23,7 +27,7 @@ export type CriteriaInputProps = {
     hideBorder?: boolean;
     presetGroupLabel?: string;
     treeViewOpts?: {
-        fetchObject?: (objectId: string) => Promise<EvokeObject | undefined>;
+        fetchObject?: (objectId: string) => Promise<TreeViewObject | 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, traversePropertyPath } from './utils';
+import { ALL_OPERATORS } from './utils';
 import ValueEditor from './ValueEditor';
 const styles = {
     buttons: {
@@ -88,99 +88,114 @@ const customButton = (props) => {
             },
         } }, buttonLabel))));
 };
-const customSelector = (props) => {
-    const { options, value, handleOnChange, title, context, level } = props;
+const customOperatorSelector = (props) => {
+    const { options, value, handleOnChange, 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));
-        }
     }
-    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 === '>'
+    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 === '<'
                         ? inputType === 'time'
-                            ? 'Later than'
-                            : 'After'
-                        : option.name === '>='
+                            ? 'Earlier than'
+                            : 'Before'
+                        : option.name === '<='
                             ? inputType === 'time'
-                                ? '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,
-                }));
-            }
-            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));
+                                ? '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;
             }
-            else if (inputType === 'string') {
-                opts = options.filter((option) => !['>', '<', '<=', '>='].includes(option.name));
+            return option.label;
+        }, getOptionKey: (option) => option.name, isOptionEqualToValue: (option, value) => {
+            if (typeof option === 'string') {
+                return option === value;
             }
-            else if (inputType === 'image' || inputType === 'boolean') {
-                opts = options.filter((option) => ['=', '!=', 'null', 'notNull'].includes(option.name));
+            else {
+                return option.name === value;
             }
-            break;
-        case 'Fields':
-            placeholder = 'Select Property';
-            width = '37%';
-            val = options.find((option) => option.name === val)?.name;
-            break;
+        }, 
+        // 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));
     }
-    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) => {
+    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) => {
             if (typeof option === 'string') {
                 return opts.find((o) => option === o.name)?.label || option;
             }
@@ -195,8 +210,10 @@ const customSelector = (props) => {
         }, 
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         onChange: (event, newValue) => {
-            handleOnChange(newValue?.value.name);
-        }, renderInput: (params) => (React.createElement(OverflowTextField, { value: opts.find((o) => value === o.name)?.label || '', ...params, placeholder: placeholder, size: "small", inputProps: {
+            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: {
                 ...params.inputProps,
                 'aria-label': placeholder,
             } })), sx: { width: width, background: readOnly ? '#f4f6f8' : '#fff' }, disableClearable: true, readOnly: readOnly }))));
@@ -275,77 +292,159 @@ const getAllRuleIds = (rules) => {
     });
     return ids;
 };
-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),
-                };
-            }
-            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 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;
             }
-        });
+            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,
     };
+};
+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(() => {
-        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 || {});
+        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);
                 const ids = getAllRuleIds(newQuery.rules);
-                let newPropertyTreeMap = {};
-                const newPropertyTreeMapPromises = [];
-                for (const id of ids) {
-                    if (!propertyTreeMap?.[id]) {
-                        newPropertyTreeMapPromises.push(traversePropertyPath(id, object, fetchObject)
-                            .then((property) => {
-                            if (property) {
-                                return {
-                                    [id]: property,
-                                };
+                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));
                             }
-                            return {};
-                        })
-                            .catch((err) => {
-                            console.error(err);
-                            return {};
-                        }));
+                            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);
+                        }
+                    }
+                };
+                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;
                     }
                 }
-                newPropertyTreeMap = (await Promise.all(newPropertyTreeMapPromises)).reduce((acc, currentProperty) => ({ ...acc, ...currentProperty }), {});
-                setPropertyTreeMap((prevPropertyTreeMap) => ({
-                    ...prevPropertyTreeMap,
-                    ...newPropertyTreeMap,
-                }));
+                return namePath;
             };
-            updatePropertyTreeMap().catch((err) => console.error(err));
+            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);
         }
-    }, [criteria, originalCriteria, treeViewOpts]);
+        setPropertyTreeMap(result);
+    }, [criteria, originalCriteria, treeViewObject]);
     const initializeQuery = () => {
         const criteriaToParse = criteria || originalCriteria;
         const updatedQuery = criteriaToParse ? parseMongoDB(criteriaToParse || {}) : undefined;
         return updatedQuery
             ? {
                 ...updatedQuery,
-                rules: processRules(updatedQuery.rules),
+                rules: processRules(updatedQuery.rules, properties),
             }
             : { combinator: 'and', rules: [] };
     };
@@ -371,7 +470,7 @@ const CriteriaBuilder = (props) => {
     const handleQueryChange = (q) => {
         const processedQuery = {
             ...q,
-            rules: processRules(q.rules),
+            rules: processRules(q.rules, properties),
         };
         setQuery(processedQuery);
         const newCriteria = JSON.parse(formatQuery(processedQuery, {
@@ -390,7 +489,10 @@ const CriteriaBuilder = (props) => {
                 return defaultRuleProcessorMongoDB(newRule, options);
             },
         }));
-        if (!isEmpty(difference(newCriteria, { $and: [{ $expr: true }] }))) {
+        if (isEmpty(difference(newCriteria, criteria))) {
+            return;
+        }
+        else if (!isEmpty(difference(newCriteria, { $and: [{ $expr: true }] }))) {
             setCriteria(newCriteria);
         }
         else {
@@ -510,8 +612,8 @@ const CriteriaBuilder = (props) => {
                         },
                     }, showCombinatorsBetweenRules: true, listsAsArrays: true, disabled: disabled, addRuleToNewGroups: true, controlElements: {
                         combinatorSelector: customCombinator,
-                        fieldSelector: customSelector,
-                        operatorSelector: customSelector,
+                        fieldSelector: customFieldSelector,
+                        operatorSelector: customOperatorSelector,
                         addGroupAction: customButton,
                         addRuleAction: customButton,
                         ruleGroup: CustomRuleGroup,
@@ -525,17 +627,15 @@ const CriteriaBuilder = (props) => {
                         presetGroupLabel,
                         disabled,
                         disabledCriteria,
-                        treeViewOpts: treeViewOpts
+                        treeViewOpts: treeViewObject && treeViewOpts
                             ? {
                                 ...treeViewOpts,
-                                object: {
-                                    ...treeViewOpts?.object,
-                                    properties: treeViewOpts?.object.properties.filter(({ type }) => type !== 'collection'),
-                                },
+                                object: treeViewObject,
+                                setObject: setTreeViewObject,
                             }
                             : undefined,
                         propertyTreeMap,
-                        setPropertyTreeMap,
+                        propertyFreeSolo,
                     }, controlClassnames: {
                         ruleGroup: 'container',
                     }, operators: operators