@evoke-platform/ui-components 1.0.0-dev.244 → 1.0.0-dev.246

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

@@ -1,8 +1,7 @@
 import { ElementType } from 'react';
-import { ObjectProperty, TreeViewObject } from './types';
 import 'react-querybuilder/dist/query-builder.css';
 import { EvokeObject } from '../../../types';
-import { Operator, PresetValue } from './types';
+import { ObjectProperty, Operator, PresetValue, TreeViewObject } from './types';
 import { ValueEditorProps } from './ValueEditor';
 export type CriteriaInputProps = {
     properties: ObjectProperty[];

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

@@ -1,7 +1,7 @@
 import { AddRounded, UnfoldMore } from '@mui/icons-material';
 import { Typography } from '@mui/material';
 import { QueryBuilderMaterial } from '@react-querybuilder/material';
-import { isEmpty, startCase } from 'lodash';
+import { isArray, isEmpty, startCase } from 'lodash';
 import React, { useEffect, useMemo, useState } from 'react';
 import { QueryBuilder, RuleGroupBodyComponents, RuleGroupHeaderComponents, TestID, formatQuery, parseMongoDB, useRuleGroup, } from 'react-querybuilder';
 import 'react-querybuilder/dist/query-builder.css';
@@ -10,6 +10,7 @@ import { Autocomplete, Button, IconButton, TextField } from '../../core';
 import { Box } from '../../layout';
 import { difference } from '../util';
 import PropertyTree from './PropertyTree';
+import { traversePropertyPath } from './utils';
 import ValueEditor from './ValueEditor';
 const ALL_OPERATORS = [
     { name: '=', label: 'Is' },
@@ -107,7 +108,11 @@ const customSelector = (props) => {
     let width = '90px';
     let val = value;
     let opts = options;
-    const inputType = props.fieldData?.inputType;
+    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;
+    }
     let readOnly = false;
     const isTreeViewEnabled = context.treeViewOpts && title === 'Fields';
     const fetchObject = context.treeViewOpts?.fetchObject;
@@ -120,9 +125,11 @@ const customSelector = (props) => {
             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', 'notIn'].includes(option.name))
@@ -159,13 +166,28 @@ const customSelector = (props) => {
                                     : option.label,
                 }));
             }
+            else if (inputType === 'integer' || inputType === 'number') {
+                opts = options.filter((option) => ['=', '!=', '<', '<=', '>', '>=', 'null', 'notNull'].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));
+            }
             break;
         case 'Fields':
+            placeholder = 'Select Property';
             width = '33%';
             val = options.find((option) => option.name === val)?.name;
             break;
     }
-    return (React.createElement(React.Fragment, null, isTreeViewEnabled ? (React.createElement(PropertyTree, { value: val ?? value, rootObject: object, fetchObject: fetchObject, handleOnChange: handleOnChange })) : (React.createElement(Autocomplete, { 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, handleTreePropertySelect: handleTreePropertySelect })) : (React.createElement(Autocomplete, { options: opts, value: val ?? null, getOptionLabel: (option) => {
             if (typeof option === 'string') {
                 return opts.find((o) => option === o.name)?.label || '';
             }
@@ -176,7 +198,7 @@ const customSelector = (props) => {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         onChange: (event, newValue) => {
             handleOnChange(newValue?.value.name);
-        }, renderInput: (params) => React.createElement(TextField, { ...params, size: "small" }), sx: { width: width, background: '#fff' }, disableClearable: true, readOnly: readOnly }))));
+        }, renderInput: (params) => React.createElement(TextField, { ...params, placeholder: placeholder, size: "small" }), sx: { width: width, background: '#fff' }, disableClearable: true, readOnly: readOnly }))));
 };
 const customCombinator = (props) => {
     const { value, handleOnChange, context, level, path } = props;
@@ -243,10 +265,12 @@ export const valueEditor = (props) => {
 const CriteriaBuilder = (props) => {
     const { properties, criteria, setCriteria, originalCriteria, enablePresetValues, presetValues, operators, dynamicContentInput, disabled, disabledCriteria, hideBorder, presetGroupLabel, treeViewOpts, } = props;
     const [query, setQuery] = useState(undefined);
+    const [propertyTreeMap, setPropertyTreeMap] = useState({});
     useEffect(() => {
         if (criteria || originalCriteria) {
             const criteriaToParse = criteria || originalCriteria || {};
             const updatedQuery = parseMongoDB(criteriaToParse);
+            !isEmpty(treeViewOpts) && updatePropertyTreeMap(updatedQuery);
             setQuery({
                 ...updatedQuery,
                 rules: processRules(updatedQuery.rules),
@@ -276,10 +300,40 @@ const CriteriaBuilder = (props) => {
             }
         });
     }
+    // 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 = (q) => {
+        const ids = [];
+        const traverseRulesForIds = (rules) => {
+            rules.forEach((rule) => {
+                if ('rules' in rule) {
+                    traverseRulesForIds(rule.rules);
+                }
+                else {
+                    ids.push(rule.field);
+                }
+            });
+        };
+        traverseRulesForIds(q.rules);
+        const tempPropertyMap = { ...propertyTreeMap };
+        ids.forEach(async (id) => {
+            if (!propertyTreeMap[id] && treeViewOpts?.object && treeViewOpts?.fetchObject) {
+                const prop = await traversePropertyPath(id, treeViewOpts?.object, treeViewOpts?.fetchObject);
+                if (prop)
+                    tempPropertyMap[id] = prop;
+            }
+            setPropertyTreeMap(tempPropertyMap);
+        });
+    };
     const handleQueryChange = (q) => {
         setQuery(q);
         const newCriteria = JSON.parse(formatQuery(q, 'mongodb'));
-        if (isEmpty(difference(newCriteria, { $and: [{ $expr: true }] }))) {
+        //when q has no rules, it formats and parses to { $and: [{ $expr: true }] }
+        const allRulesDeleted = isEmpty(difference(newCriteria, { $and: [{ $expr: true }] }));
+        // since the Add Condition / Add Group buttons add rules with all the fields empty,
+        // we need to check if the first rule was added because q will still parse to { $and: [{ $expr: true }] }
+        const firstRuleAdded = isEmpty(criteria) && q.rules.length > 0;
+        if (allRulesDeleted && !firstRuleAdded) {
             setCriteria(undefined);
         }
         else {
@@ -346,6 +400,32 @@ const CriteriaBuilder = (props) => {
             React.createElement(QueryBuilderMaterial, null,
                 React.createElement(QueryBuilder, { query: !criteria && !originalCriteria ? { 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
+                        return {
+                            ...rule,
+                            field: '',
+                            operator: '',
+                        };
+                    }, onAddGroup: (group) => {
+                        // overrides new group and sets up a new group with an empty rule with all three fields showing
+                        const emptyRules = group.rules.map((rule) => ({
+                            ...rule,
+                            field: '',
+                            operator: '',
+                        }));
+                        return {
+                            ...group,
+                            rules: emptyRules,
+                            combinator: 'and',
+                        };
+                    }, translations: {
+                        fields: {
+                            placeholderLabel: '',
+                        },
+                        operators: {
+                            placeholderLabel: '',
+                        },
                     }, showCombinatorsBetweenRules: true, listsAsArrays: true, disabled: disabled, addRuleToNewGroups: true, controlElements: {
                         combinatorSelector: customCombinator,
                         fieldSelector: customSelector,
@@ -363,6 +443,8 @@ const CriteriaBuilder = (props) => {
                         presetGroupLabel,
                         disabledCriteria,
                         treeViewOpts,
+                        propertyTreeMap,
+                        setPropertyTreeMap,
                     }, controlClassnames: {
                         ruleGroup: 'container',
                     }, operators: operators

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

@@ -3,8 +3,8 @@ import { EvokeObject } from '../../../types';
 type PropertyTreeProps = {
     fetchObject: (id: string) => Promise<EvokeObject | undefined>;
     rootObject: EvokeObject;
-    handleOnChange: (property: string) => void;
+    handleTreePropertySelect: (propertyId: string) => void;
     value: string | undefined;
 };
-declare const PropertyTree: ({ fetchObject, handleOnChange, rootObject, value }: PropertyTreeProps) => JSX.Element;
+declare const PropertyTree: ({ fetchObject, handleTreePropertySelect, rootObject, value }: PropertyTreeProps) => JSX.Element;
 export default PropertyTree;

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

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react';
 import { Autocomplete, MenuItem, TextField, Tooltip, TreeView } from '../../core';
 import PropertyTreeItem from './PropertyTreeItem';
 import { fetchDisplayNamePath, findPropertyById, setIdPaths, truncateNamePath, updateTreeNode } from './utils';
-const PropertyTree = ({ fetchObject, handleOnChange, rootObject, value }) => {
+const PropertyTree = ({ fetchObject, handleTreePropertySelect, rootObject, value }) => {
     const [expandedNodes, setExpandedNodes] = useState([]);
     const [objectPropertyNamePathMap, setObjectPropertyNamePathMap] = useState({});
     const [objectProperties, setObjectProperties] = useState(rootObject.properties ?? []);
@@ -99,7 +99,7 @@ const PropertyTree = ({ fetchObject, handleOnChange, rootObject, value }) => {
         const property = findPropertyById(objectProperties, propertyId);
         // this prevents the selection of a parent node
         if (property && !property.children) {
-            handleOnChange(property.id);
+            handleTreePropertySelect(property.id);
         }
     };
     return (React.createElement(Autocomplete, { "aria-label": "Property Selector", value: value, fullWidth: true, sx: {

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

@@ -17,7 +17,20 @@ const GroupHeader = styled('div')(({ theme }) => ({
 }));
 const GroupItems = styled('ul')({ padding: 0 });
 const ValueEditor = (props) => {
-    const { handleOnChange, value, values, operator, inputType, context, level, rule } = props;
+    const { handleOnChange, value, operator, context, level, rule } = props;
+    let inputType = props.inputType;
+    let values = props.values;
+    const property = context.propertyTreeMap[rule.field];
+    // for tree view / related object properties, the properties are stored in the propertyTreeMap upon selection
+    if (!!context.treeViewOpts && !!property) {
+        inputType = property.type;
+        if (property.enum) {
+            values = property.enum.map((item) => ({
+                name: item,
+                label: item,
+            }));
+        }
+    }
     const inputRef = useRef(null);
     const [openPresetValues, setOpenPresetValues] = useState(false);
     const disabled = ['null', 'notNull'].includes(operator);
@@ -79,7 +92,7 @@ const ValueEditor = (props) => {
                         handleOnChange(uniqueSelections.length ? uniqueSelections : '');
                     }, 
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    isOptionEqualToValue: (option, value) => option === value, renderInput: (params) => (React.createElement(TextField, { label: params.label, ...params, size: "small" })), groupBy: (option) => isPresetValue(option.value?.name) ? context.presetGroupLabel || 'Preset Values' : 'Options', renderGroup: groupRenderGroup, sx: { width: '33%', background: '#fff' }, readOnly: readOnly }));
+                    isOptionEqualToValue: (option, value) => option === value, renderInput: (params) => (React.createElement(TextField, { label: params.label, ...params, size: "small", sx: { backgroundColor: '#fff' } })), groupBy: (option) => isPresetValue(option.value?.name) ? context.presetGroupLabel || 'Preset Values' : 'Options', renderGroup: groupRenderGroup, sx: { width: '33%', background: '#fff' }, readOnly: readOnly }));
             }
             else {
                 return (React.createElement(TextField, { inputRef: inputRef, value: ['null', 'notNull'].includes(operator) ? '' : value, disabled: ['null', 'notNull'].includes(operator), onChange: (e) => {
@@ -114,7 +127,7 @@ const ValueEditor = (props) => {
                             value = newValue?.name ?? newValue?.value?.name ?? '';
                         }
                         handleOnChange(value);
-                    }, renderInput: (params) => (React.createElement(TextField, { inputRef: inputRef, label: params?.label, ...params, size: "small" })), 
+                    }, renderInput: (params) => (React.createElement(TextField, { inputRef: inputRef, label: params?.label, ...params, size: "small", sx: { backgroundColor: '#fff' } })), 
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     getOptionLabel: (option) => {
                         if (typeof option === 'string') {

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

@@ -39,7 +39,7 @@ export declare const setIdPaths: (properties: ObjectProperty[], parentPath: stri
  *
  * @param {string} propertyPath - The dot-separated path of the property to traverse.
  * @param {Obj} rootObject - The root object from which to start the traversal.
- * @param {(objectId: string) => Promise<Obj | undefined>} fetchObject - A function to fetch an object by its ID.
+ * @param {FetchObjectFunction} fetchObject - A function to fetch an object by its ID.
  * @returns {Promise<ObjectProperty | null>} A promise that resolves to an ObjectProperty if found, or null otherwise.
  */
 export declare const traversePropertyPath: (propertyPath: string, rootObject: Obj, fetchObject: (objectId: string) => Promise<Obj | undefined>) => Promise<ObjectProperty | null>;

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

@@ -72,7 +72,7 @@ export const setIdPaths = (properties, parentPath) => {
  *
  * @param {string} propertyPath - The dot-separated path of the property to traverse.
  * @param {Obj} rootObject - The root object from which to start the traversal.
- * @param {(objectId: string) => Promise<Obj | undefined>} fetchObject - A function to fetch an object by its ID.
+ * @param {FetchObjectFunction} fetchObject - A function to fetch an object by its ID.
  * @returns {Promise<ObjectProperty | null>} A promise that resolves to an ObjectProperty if found, or null otherwise.
  */
 export const traversePropertyPath = async (propertyPath, rootObject, fetchObject) => {

package/dist/published/stories/CriteriaBuilder.stories.d.ts

@@ -3,6 +3,7 @@ import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { CriteriaInputProps } from '../components/custom/CriteriaBuilder/CriteriaBuilder';
 declare const _default: ComponentMeta<(props: CriteriaInputProps) => JSX.Element>;
 export default _default;
+export declare const CriteriaBuilderEmpty: ComponentStory<(props: CriteriaInputProps) => JSX.Element>;
 export declare const CriteriaBuilder: ComponentStory<(props: CriteriaInputProps) => JSX.Element>;
 export declare const CriteriaBuilderPresetUserID: ComponentStory<(props: CriteriaInputProps) => JSX.Element>;
 export declare const CriteriaBuilderGroupedPresetValues: ComponentStory<(props: CriteriaInputProps) => JSX.Element>;

package/dist/published/stories/CriteriaBuilder.stories.js

@@ -4,7 +4,101 @@ export default {
     title: 'Input/CriteriaBuilder',
     component: BuildCriteria,
 };
-const CriteriaBuilderTemplate = (args) => (React.createElement(BuildCriteria, { ...args }));
+const CriteriaBuilderTemplate = (args) => {
+    const [criteria, setCriteria] = React.useState(args.criteria);
+    args.setCriteria = setCriteria;
+    args.criteria = criteria;
+    console.log('reset criteria= ', criteria);
+    return React.createElement(BuildCriteria, { ...args });
+};
+export const CriteriaBuilderEmpty = CriteriaBuilderTemplate.bind({});
+CriteriaBuilderEmpty.args = {
+    properties: [
+        {
+            id: 'name',
+            name: 'name',
+            type: 'string',
+            required: true,
+        },
+        {
+            id: 'licenseNumber',
+            name: 'license number',
+            type: 'string',
+            required: true,
+        },
+        {
+            id: 'issueDate',
+            name: 'issue date',
+            type: 'date',
+            required: false,
+            objectId: '',
+        },
+        {
+            id: 'status',
+            name: 'status',
+            type: 'string',
+            enum: ['active', 'expired', 'pending approval'],
+            required: false,
+            objectId: '',
+        },
+        {
+            id: 'licenseeName',
+            name: 'Licensee Name',
+            type: 'string',
+            required: false,
+            formula: '{{person.firstName}} {{person.middleName}} {{person.lastName}}',
+        },
+        {
+            id: 'calculated',
+            name: 'calculated',
+            type: 'string',
+            required: false,
+            objectId: '',
+            formula: '{{status}} - {{licensee.firstName}}',
+        },
+        {
+            id: 'application',
+            name: 'applicant',
+            type: 'object',
+            required: false,
+            objectId: 'application',
+        },
+        {
+            id: 'applicantName',
+            name: 'Application Info',
+            type: 'string',
+            required: false,
+            formula: '{{application.name}} - {{status}}',
+        },
+        {
+            id: 'licensedFor',
+            name: 'licensed for',
+            type: 'array',
+            enum: [
+                'amusements',
+                'food and beverage',
+                'entertainment',
+                'transportation',
+                'hot dogs',
+                'swimming pools',
+                'ferris wheels',
+                'bungee jumping',
+            ],
+            required: true,
+            searchable: false,
+        },
+        {
+            id: 'inState',
+            name: 'In State',
+            type: 'string',
+            enum: ['Yes', 'No'],
+            required: false,
+            searchable: false,
+        },
+    ],
+    criteria: {},
+    setCriteria: (criteria) => console.log('criteria= ', criteria),
+};
 export const CriteriaBuilder = CriteriaBuilderTemplate.bind({});
 CriteriaBuilder.args = {
     properties: [
@@ -418,6 +512,13 @@ CriteriaBuilderRelatedObject.args = {
                             type: 'date',
                             required: false,
                         },
+                        {
+                            id: 'approvalStatus',
+                            name: 'Approval Status',
+                            type: 'string',
+                            enum: ['Approved', 'Denied', 'InProgress', 'Received'],
+                            required: false,
+                        },
                         {
                             id: 'licenseNumber',
                             name: 'LicenseNumber',
@@ -464,6 +565,13 @@ CriteriaBuilderRelatedObject.args = {
                             type: 'string',
                             required: true,
                         },
+                        {
+                            id: 'status',
+                            name: 'Status',
+                            type: 'string',
+                            enum: ['RN', 'NP', 'DNP', 'MA'],
+                            required: false,
+                        },
                         {
                             id: 'description',
                             name: 'Description',
@@ -703,10 +811,38 @@ CriteriaBuilderRelatedObject.args = {
     criteria: {
         $and: [
             {
-                name: 'bert',
+                'applicant.vehicleCount': {
+                    $gt: 2,
+                },
+            },
+            {
+                'applicant.license.expirationDate': {
+                    $gt: '2025-01-16',
+                },
+            },
+            {
+                'applicant.license.person.phone': {
+                    $regex: '410',
+                },
+            },
+            {
+                $or: [
+                    {
+                        'applicant.license.approvalStatus': 'InProgress',
+                    },
+                    {
+                        'applicant.license.approvalStatus': 'Approved',
+                    },
+                    {
+                        'applicant.license.issueDate': '2025-01-09',
+                    },
+                    {
+                        'applicant.avgVehicleRating': 1,
+                    },
+                ],
             },
             {
-                'applicant.lastName': '',
+                'applicationType.status': 'DNP',
             },
         ],
     },

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.0.0-dev.244",
+    "version": "1.0.0-dev.246",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",