@evoke-platform/ui-components 1.2.1-testing.1 → 1.3.0

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

@@ -71,7 +71,7 @@ const CustomRuleGroup = (props) => {
                 } }))));
 };
 const customButton = (props) => {
-    const { title, handleOnClick, label, path } = props;
+    const { title, handleOnClick, label, path, context } = props;
     let buttonLabel = label;
     const nestedConditionLimit = 2;
     switch (title) {
@@ -82,7 +82,7 @@ const customButton = (props) => {
             buttonLabel = 'Add Condition';
             break;
     }
-    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: {
+    return (React.createElement(React.Fragment, null, !!path.length && (path.length < nestedConditionLimit || title === 'Add rule') && !context.disabled && (React.createElement(Button, { onClick: handleOnClick, startIcon: React.createElement(AddRounded, null), sx: {
             padding: '6px 16px',
             fontSize: '0.875rem',
             marginRight: path.length === 0 ? '.5rem' : '0px',
@@ -116,11 +116,11 @@ const customSelector = (props) => {
     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;
     const object = context.treeViewOpts?.object;
-    if (context.disabledCriteria) {
+    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);
@@ -219,7 +219,7 @@ const customSelector = (props) => {
 };
 const customCombinator = (props) => {
     const { value, handleOnChange, context, level, path } = props;
-    const isReadOnly = !!context.disabledCriteria && context.disabledCriteria.level - 1 === level;
+    const isReadOnly = context.disabled || (!!context.disabledCriteria && context.disabledCriteria.level - 1 === level);
     const conditionPositionInGroup = path[path.length - 1];
     const toggleCombinator = () => {
         const newCombinator = value === 'and' ? 'or' : 'and';
@@ -231,7 +231,7 @@ const customCombinator = (props) => {
             backgroundColor: isReadOnly ? '#f5f5f5' : '#fff',
             border: '1px solid #ddd',
             borderRadius: '8px',
-            cursor: 'pointer',
+            cursor: isReadOnly ? 'cursor' : 'pointer',
             width: '72px',
             padding: '5px 10px',
             fontSize: '16px',
@@ -250,8 +250,8 @@ const customDelete = (props) => {
     const { handleOnClick, context, level } = props;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const rule = props.ruleOrGroup;
-    let hideDelete = false;
-    if (context.disabledCriteria) {
+    let hideDelete = context.disabled;
+    if (!hideDelete && context.disabledCriteria) {
         hideDelete =
             Object.entries(context.disabledCriteria.criteria).some(([key, value]) => key === rule.field && value === rule.value && rule.operator === '=') && level === context.disabledCriteria.level;
     }
@@ -428,7 +428,7 @@ const CriteriaBuilder = (props) => {
                     background: '#F9FAFB',
                 },
                 '.ruleGroup:hover, .ruleGroup:has(:focus)': {
-                    borderColor: '#0678a9',
+                    borderColor: disabled ? undefined : '#0678a9',
                 },
                 '.ruleGroup:hover > .ruleGroup-header > .ruleGroup-remove, .ruleGroup:has(:focus) > .ruleGroup-header > .ruleGroup-remove ': {
                     opacity: 1,
@@ -502,6 +502,7 @@ const CriteriaBuilder = (props) => {
                         presetValues,
                         enablePresetValues,
                         presetGroupLabel,
+                        disabled,
                         disabledCriteria,
                         treeViewOpts: treeViewOpts
                             ? {
@@ -519,7 +520,7 @@ const CriteriaBuilder = (props) => {
                     }, operators: operators
                         ? ALL_OPERATORS.filter((o) => operators.includes(o.name))
                         : ALL_OPERATORS })),
-            React.createElement(Box, { sx: {
+            !disabled && (React.createElement(Box, { sx: {
                     display: 'flex',
                     justifyContent: 'space-between',
                     alignItems: 'center',
@@ -554,7 +555,7 @@ const CriteriaBuilder = (props) => {
                             backgroundColor: 'transparent',
                         },
                         ...styles.buttons,
-                    }, onClick: handleClearAll, title: "Clear all conditions", disabled: isEmpty(query.rules) }, "Clear all"))));
+                    }, 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

@@ -40,12 +40,12 @@ const ValueEditor = (props) => {
     // Manages input value for Autocomplete when using 'in/not in' operators, ensuring correct handling on blur.
     const [inputValue, setInputValue] = useState('');
     const disabled = ['null', 'notNull'].includes(operator);
-    const presetValues = context.presetValues ?? [];
+    const presetValues = context.presetValues?.filter((val) => !val.type || val.type === inputType) ?? [];
     const isPresetValue = (value) => value?.startsWith('{{{') && value?.endsWith('}}}');
     const isPresetValueSelected = presetValues && typeof value === 'string' && isPresetValue(value);
     const presetDisplayValue = presetValues?.find((option) => option.value.name === value)?.label ?? '';
-    let readOnly = false;
-    if (context.disabledCriteria) {
+    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;
     }
@@ -53,6 +53,7 @@ const ValueEditor = (props) => {
         input: {
             width: '33%',
             background: readOnly ? '#f4f6f8' : '#fff',
+            borderRadius: '8px',
         },
     };
     useEffect(() => {
@@ -197,7 +198,7 @@ const ValueEditor = (props) => {
                     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: styles.input, readOnly: readOnly }));
             }
             else {
-                return (React.createElement(TextField, { inputRef: inputRef, value: ['null', 'notNull'].includes(operator) ? '' : value, disabled: ['null', 'notNull'].includes(operator), onChange: (e) => {
+                return (React.createElement(TextField, { inputRef: inputRef, value: ['null', 'notNull'].includes(operator) ? '' : value, disabled: disabled || ['null', 'notNull'].includes(operator), onChange: (e) => {
                         if (inputType === 'number') {
                             handleOnChange(e.target.value ?? '');
                         }

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

@@ -26,6 +26,7 @@ export type PresetValue = {
         label: string;
         sublabel?: string;
     };
+    type?: string;
 };
 export type TreeViewProperty = ObjectProperty & {
     children?: TreeViewProperty[];

package/dist/published/components/custom/Form/Common/Form.js

@@ -7,6 +7,7 @@ import '../../../../styles/form-component.css';
 import { Skeleton, Snackbar } from '../../../core';
 import { Box } from '../../../layout';
 import { ButtonComponent, DocumentComponent, FormFieldComponent, ImageComponent, ObjectComponent, RepeatableFieldComponent, UserComponent, ViewOnlyComponent, } from '../FormComponents';
+import { CriteriaComponent } from '../FormComponents/CriteriaComponent/CriteriaComponent';
 import { addObjectPropertiesToComponentProps, buildComponentPropsFromDocumentProperties, buildComponentPropsFromObjectProperties, convertFormToComponents, getFlattenEntries, getPrefixedUrl, } from '../utils';
 const usePrevious = (value) => {
     const ref = useRef();
@@ -43,6 +44,7 @@ export function Form(props) {
             ViewOnlyManyToManyRepeatableField: RepeatableFieldComponent,
             ViewOnlyRepeatableField: RepeatableFieldComponent,
             ViewOnlyImage: ImageComponent,
+            ViewOnlyCriteria: CriteriaComponent,
             ViewOnlyTime: ViewOnlyComponent,
         };
         Components.setComponents({
@@ -66,6 +68,7 @@ export function Form(props) {
             ManyToManyRepeatableField: RepeatableFieldComponent,
             RepeatableField: RepeatableFieldComponent,
             Image: ImageComponent,
+            Criteria: CriteriaComponent,
             Time: FormFieldComponent,
             ...(isReadOnly && viewDetailsComponents),
         });

package/dist/published/components/custom/Form/FormComponents/CriteriaComponent/Criteria.d.ts

@@ -0,0 +1,13 @@
+import { ApiServices, Property } from '@evoke-platform/context';
+import React from 'react';
+type CriteriaProps = {
+    value?: CriteriaValue | null;
+    handleChange: (propertyId: string, value: CriteriaValue | null) => void;
+    property: Property;
+    apiServices: ApiServices;
+    canUpdateProperty: boolean;
+    error: boolean;
+};
+type CriteriaValue = Record<string, unknown>;
+export declare const Criteria: (props: CriteriaProps) => React.JSX.Element;
+export {};

package/dist/published/components/custom/Form/FormComponents/CriteriaComponent/Criteria.js

@@ -0,0 +1,64 @@
+import { CircularProgress } from '@mui/material';
+import React, { useCallback, useEffect, useState } from 'react';
+import { Button, Typography } from '../../../../..';
+import { Box } from '../../../../layout';
+import CriteriaBuilder from '../../../CriteriaBuilder';
+import { getPrefixedUrl } from '../../utils';
+export const Criteria = (props) => {
+    const { handleChange, property, value, canUpdateProperty, apiServices, error } = props;
+    const [properties, setProperties] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [loadingError, setLoadingError] = useState(false);
+    const fetchProperties = useCallback(async () => {
+        if (property.objectId) {
+            setLoading(true);
+            apiServices.get(getPrefixedUrl(`/objects/${property.objectId}/effective/properties`), { params: { fields: ['properties'] } }, (error, properties) => {
+                if (error) {
+                    console.error('Error fetching object properties', error);
+                    setLoadingError(true);
+                }
+                if (properties) {
+                    setProperties(properties);
+                    setLoadingError(false);
+                }
+                setLoading(false);
+            });
+        }
+    }, [property.objectId, apiServices]);
+    useEffect(() => {
+        fetchProperties();
+    }, [fetchProperties]);
+    const handleUpdate = (criteria) => {
+        handleChange(property.id, criteria ?? null);
+    };
+    if (loadingError) {
+        return (React.createElement(Box, { sx: { display: 'flex', alignItems: 'center' } },
+            React.createElement(Typography, { sx: { color: 'rgb(114 124 132)', fontSize: '14px', paddingLeft: '10px' } },
+                "An error occurred when retrieving data needed for this criteria.",
+                ' '),
+            React.createElement(Button, { sx: {
+                    padding: 0,
+                    '&:hover': { backgroundColor: 'transparent' },
+                    minWidth: '44px',
+                }, variant: "text", onClick: fetchProperties, disabled: loading }, "Retry"),
+            loading && React.createElement(CircularProgress, { size: 20, sx: { paddingLeft: '10px' } })));
+    }
+    return (React.createElement(Box, { sx: { borderRadius: '8px', border: error ? '1px solid #FF0000' : '1px solid #ddd' } },
+        React.createElement(CriteriaBuilder, { criteria: value ?? undefined, properties: properties, setCriteria: handleUpdate, disabled: !canUpdateProperty, hideBorder: true, presetValues: [
+                {
+                    label: 'Current Date',
+                    value: { name: '{{{currentDate}}}', label: 'Current Date' },
+                    type: 'date',
+                },
+                {
+                    label: 'Current Time',
+                    value: { name: '{{{currentTime}}}', label: 'Current Time' },
+                    type: 'time',
+                },
+                {
+                    label: 'Current Date Time',
+                    value: { name: '{{{currentDateTime}}}', label: 'Current Date Time' },
+                    type: 'date-time',
+                },
+            ], enablePresetValues: true })));
+};

package/dist/published/components/custom/Form/FormComponents/CriteriaComponent/CriteriaComponent.d.ts

@@ -0,0 +1,25 @@
+import { ReactComponent } from '@formio/react';
+import { Root } from 'react-dom/client';
+import { BaseFormComponentProps } from '../../types';
+export declare class CriteriaComponent extends ReactComponent {
+    [x: string]: any;
+    static schema: any;
+    component: BaseFormComponentProps & {
+        initialValue?: string;
+    };
+    errorDetails: any;
+    componentRoot?: Root;
+    constructor(component: BaseFormComponentProps, options: any, data: any);
+    init(): void;
+    clearErrors(): void;
+    handleValidation(): void;
+    hasErrors(): boolean;
+    errorMessages(): string;
+    /**
+     * Synchronizes out-of-the-box formio errors with this field's errorDetails object
+     */
+    manageFormErrors(): void;
+    handleChange: (key: string, value: Record<string, unknown> | null) => void;
+    beforeSubmit(): void;
+    attachReact(element: Element): void;
+}

package/dist/published/components/custom/Form/FormComponents/CriteriaComponent/CriteriaComponent.js

@@ -0,0 +1,121 @@
+import { ReactComponent } from '@formio/react';
+import { isEmpty } from 'lodash';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { FormComponentWrapper } from '../../Common';
+import { isPropertyVisible } from '../../utils';
+import { Criteria } from './Criteria';
+export class CriteriaComponent extends ReactComponent {
+    constructor(component, options, data) {
+        super({
+            ...component,
+            canUpdateProperty: !component.readOnly,
+            hideLabel: true,
+        }, options, data);
+        this.handleChange = (key, value) => {
+            delete this.errorDetails['api-error'];
+            // set the value on the form instance at this.root.data
+            // does not pick up changes when value is null, so we need to pass an empty string
+            this.setValue(value ?? '');
+            this.updateValue(value, { modified: true });
+            this.handleValidation();
+            this.emit('changed-' + this.component.key, value);
+            this.attach(this.element);
+            if (this.component.autoSave) {
+                this.component.autoSave({ [key]: value });
+            }
+        };
+        this.errorDetails = {};
+        this.handleChange = this.handleChange.bind(this);
+    }
+    init() {
+        if (this.component.initialValue && /^{{.*}}$/.test(this.component.initialValue)) {
+            const regex = /^{{input\.(?<relatedObjectProperty>[a-zA-Z][a-zA-Z0-9_]*)\.(?<nestedProperty>[a-zA-Z][a-zA-Z0-9_]*)}}$/;
+            const groups = regex.exec(this.component.initialValue)?.groups;
+            if (groups?.relatedObjectProperty && groups?.nestedProperty) {
+                this.on(`changed-${groups.relatedObjectProperty}`, (value) => {
+                    if (value) {
+                        this.setValue(value?.[groups.nestedProperty]);
+                        this.updateValue(value?.[groups.nestedProperty], { modified: true });
+                        this.attach(this.element);
+                        this.attachReact(this.element);
+                    }
+                });
+            }
+        }
+        this.on(`api-error`, (details) => {
+            const error = details.find((detail) => detail.code === 'errorMessage' && detail.path.replace('/', '') === this.component.key);
+            if (error) {
+                if (!this.root.customErrors.find((err) => err.formattedKeyOrPath === this.component.key && err.message === error.message)) {
+                    this.root.customErrors = [
+                        ...this.root.customErrors,
+                        {
+                            ...error,
+                            code: 'api-error',
+                            component: this.component,
+                            formattedKeyOrPath: this.component.key,
+                        },
+                    ];
+                }
+                this.errorDetails['api-error'] = error?.message;
+            }
+            else {
+                this.root.customErrors = this.root.customErrors.filter((item) => item.formattedKeyOrPath !== this.component.key);
+                delete this.errorDetails['api-error'];
+            }
+            this.attach(this.element);
+            this.attachReact(this.element);
+        });
+    }
+    clearErrors() {
+        this.errorDetails = {};
+        this.root.customErrors = this.root.customErrors.filter((error) => error.formattedKeyOrPath !== this.component.key);
+    }
+    handleValidation() {
+        if (!isPropertyVisible(this.component.conditional, this.root.data)) {
+            return;
+        }
+        // check for out-of-the-box formio errors which store on this.root.errors
+        this.checkValidity(this.dataValue, true, this.data);
+        this.manageFormErrors();
+    }
+    hasErrors() {
+        return !isEmpty(this.errorDetails);
+    }
+    errorMessages() {
+        return Object.values(this.errorDetails).join(', ');
+    }
+    /**
+     * Synchronizes out-of-the-box formio errors with this field's errorDetails object
+     */
+    manageFormErrors() {
+        const outOfTheBoxError = this.root.errors.find((error) => {
+            return error.component.key === this.component.key;
+        })?.message;
+        // add OoB formio error to errorDetails object to show under field
+        if (outOfTheBoxError) {
+            this.errorDetails['rootError'] = outOfTheBoxError;
+        }
+        else {
+            delete this.errorDetails['rootError'];
+        }
+    }
+    beforeSubmit() {
+        this.handleValidation();
+        this.element && this.attach(this.element);
+    }
+    attachReact(element) {
+        let root = ReactDOM.findDOMNode(element);
+        if (!root) {
+            root = element;
+        }
+        // FormIO uses id for an enclosing div, so we need to give the input field a different id.
+        const inputId = `${this.component.id}-input`;
+        /* TODO: You'll see warnings to upgrade to React 18's createRoot();
+         * It'll cause issues with: field-level errors not showing up, conditional
+         * visibility not working, focus moving out of the form on keypress.
+         * Will need to revisit later. Possibly look into using `this.ref` */
+        return ReactDOM.render(React.createElement("div", null, !this.component.hidden ? (React.createElement(FormComponentWrapper, { ...this.component, inputId: inputId, viewOnly: !this.component.canUpdateProperty, errorMessage: this.errorMessages() },
+            React.createElement(Criteria, { ...this.component, value: this.dataValue, handleChange: this.handleChange, error: this.hasErrors() }))) : null), root);
+    }
+}

package/dist/published/components/custom/Form/FormComponents/index.d.ts

@@ -1,4 +1,5 @@
 export * from './ButtonComponent';
+export * from './CriteriaComponent/CriteriaComponent';
 export * from './DocumentComponent/DocumentComponent';
 export * from './FormFieldComponent';
 export * from './ImageComponent/ImageComponent';

package/dist/published/components/custom/Form/FormComponents/index.js

@@ -1,4 +1,5 @@
 export * from './ButtonComponent';
+export * from './CriteriaComponent/CriteriaComponent';
 export * from './DocumentComponent/DocumentComponent';
 export * from './FormFieldComponent';
 export * from './ImageComponent/ImageComponent';

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

@@ -27,6 +27,7 @@ export function determineComponentType(properties, parameter) {
             return 'Decimal';
         case 'richText':
             return 'RichText';
+        case 'criteria':
         case 'date':
         case 'integer':
         case 'image':
@@ -842,6 +843,8 @@ export const buildComponentPropsFromObjectProperties = (properties, objectId, in
                 return 'Image';
             case 'richText':
                 return 'RichText';
+            case 'criteria':
+                return 'Criteria';
             case 'time':
                 return 'Time';
             case 'date-time':

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.2.1-testing.1",
+    "version": "1.3.0",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",
@@ -95,7 +95,7 @@
         "@dnd-kit/sortable": "^7.0.1",
         "@emotion/react": "^11.13.5",
         "@emotion/styled": "^11.8.1",
-        "@evoke-platform/context": "^1.0.0-dev.126",
+        "@evoke-platform/context": "^1.1.0-testing.0",
         "@formio/react": "^5.2.4-rc.1",
         "@js-joda/core": "^3.2.0",
         "@js-joda/locale_en-us": "^3.2.2",