@evoke-platform/ui-components 1.13.0 → 1.15.0

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

@@ -9,9 +9,9 @@ import { TrashCan } from '../../../icons/custom';
 import { Autocomplete, Button, IconButton, Typography } from '../../core';
 import { Box } from '../../layout';
 import { OverflowTextField } from '../OverflowTextField';
-import { difference } from '../util';
+import { difference, parseMongoDB } from '../util';
 import PropertyTree from './PropertyTree';
-import { ALL_OPERATORS, parseMongoDB, traversePropertyPath } from './utils';
+import { ALL_OPERATORS, traversePropertyPath } from './utils';
 import ValueEditor from './ValueEditor';
 const styles = {
     buttons: {

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

@@ -36,21 +36,6 @@ export type TreeViewObject = {
     name: string;
     properties: TreeViewProperty[];
 };
-export type MongoDBQueryValue = null | string | boolean | {
-    $not?: {
-        $regex?: string;
-    };
-    $regex?: string;
-    $expr?: boolean;
-    $eq?: unknown;
-    $ne?: unknown;
-    $lt?: unknown;
-    $lte?: unknown;
-    $gt?: unknown;
-    $gte?: unknown;
-    $in?: unknown[];
-    $nin?: unknown[];
-};
 export type TreeItem = TreeViewBaseItem<{
     id: string;
     label: string;

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

@@ -1,5 +1,4 @@
 import { Property } from '@evoke-platform/context';
-import { RuleGroupType } from 'react-querybuilder';
 import { Obj, ObjectProperty } from '../../../types';
 import { TreeItem } from './types';
 /**
@@ -46,15 +45,6 @@ export declare const traversePropertyPath: (propertyPath: string, rootObject: Ob
  * @returns {string} - The truncated name path if it exceeds the limit, otherwise the original name path.
  */
 export declare const truncateNamePath: (namePath: string, limit?: number) => string;
-/**
- * Parses a MongoDB query into a RuleGroupType or a single RuleType.
- * This function recursively processes the MongoDB query and transforms it into
- * a structured format that can be used in the CriteriaBuilder.
- *
- * @param {Record<string, unknown>} mongoQuery - The MongoDB query to be parsed.
- * @returns {RuleGroupType} - Correctly formatted rule or rules for the query builder.
- */
-export declare function parseMongoDB(mongoQuery: Record<string, unknown>): RuleGroupType;
 export declare const ALL_OPERATORS: {
     name: string;
     label: string;

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

@@ -1,4 +1,5 @@
-import { isArray, isEmpty, startCase } from 'lodash';
+import { startCase } from 'lodash';
+import { parseMongoDB } from '../util';
 /**
  * Recursively updates a node in a tree structure by applying an updater function to the node with the specified ID.
  *
@@ -122,166 +123,6 @@ export const truncateNamePath = (namePath, limit = 20) => {
         return `${namePath.substring(0, limit - 3)}...`;
     }
 };
-/**
- * Parses a MongoDB query into a RuleGroupType or a single RuleType.
- * This function recursively processes the MongoDB query and transforms it into
- * a structured format that can be used in the CriteriaBuilder.
- *
- * @param {Record<string, unknown>} mongoQuery - The MongoDB query to be parsed.
- * @returns {RuleGroupType} - Correctly formatted rule or rules for the query builder.
- */
-export function parseMongoDB(mongoQuery) {
-    /**
-     * Parses a single rule from the MongoDB query.
-     *
-     * @param {string} key - The field name for the rule.
-     * @param {MongoDBQueryValue} value - The value associated with the key to parse.
-     * @returns {RuleType | undefined} - A RuleType if the value is valid, otherwise undefined.
-     */
-    const parseRule = (key, value) => {
-        if (key === '$expr') {
-            return undefined;
-        }
-        else if (value === null) {
-            return {
-                field: key,
-                operator: 'null',
-                value: null,
-            };
-        }
-        else if (typeof value === 'string' ||
-            typeof value === 'number' ||
-            typeof value === 'boolean' ||
-            '$eq' in value) {
-            return {
-                field: key,
-                operator: '=',
-                value: typeof value === 'object' && '$eq' in value ? value.$eq : value,
-            };
-        }
-        else if (value.$not && typeof value.$not.$regex === 'string') {
-            return {
-                field: key,
-                operator: 'doesNotContain',
-                value: value.$not.$regex,
-            };
-        }
-        else if (typeof value.$regex === 'string') {
-            let operator = 'contains';
-            let regexValue = value.$regex;
-            if (regexValue.startsWith('^')) {
-                operator = 'beginsWith';
-                regexValue = regexValue.slice(1);
-            }
-            else if (regexValue.endsWith('$')) {
-                operator = 'endsWith';
-                regexValue = regexValue.slice(0, -1);
-            }
-            if (regexValue) {
-                // remove escape characters for display
-                regexValue = regexValue.replace(/\\(.)/g, '$1');
-            }
-            return {
-                field: key,
-                operator: operator,
-                value: regexValue,
-            };
-        }
-        else if ('$ne' in value) {
-            return {
-                field: key,
-                operator: value.$ne === null ? 'notNull' : '!=',
-                value: value.$ne,
-            };
-        }
-        else if ('$lt' in value) {
-            return {
-                field: key,
-                operator: '<',
-                value: value.$lt,
-            };
-        }
-        else if ('$lte' in value) {
-            return {
-                field: key,
-                operator: '<=',
-                value: value.$lte,
-            };
-        }
-        else if ('$gt' in value) {
-            return {
-                field: key,
-                operator: '>',
-                value: value.$gt,
-            };
-        }
-        else if ('$gte' in value) {
-            return {
-                field: key,
-                operator: '>=',
-                value: value.$gte,
-            };
-        }
-        else if ('$in' in value) {
-            return {
-                field: key,
-                operator: 'in',
-                value: value.$in ?? [],
-            };
-        }
-        else if ('$nin' in value) {
-            return {
-                field: key,
-                operator: 'notIn',
-                value: value.$nin ?? [],
-            };
-        }
-        else {
-            return undefined;
-        }
-    };
-    /**
-     * Recursively parses a MongoDB query into a RuleGroupType or RuleType.
-     *
-     * @param {Record<string, unknown>} query - The MongoDB query object to be parsed.
-     * @returns {RuleGroupType | RuleType} - A RuleGroupType with combinator and rules, or a single RuleType.
-     */
-    const parseGroup = (query) => {
-        if ('$and' in query && isArray(query.$and)) {
-            return {
-                combinator: 'and',
-                rules: query.$and.map(parseGroup).filter((rule) => rule !== undefined),
-            };
-        }
-        else if ('$or' in query && isArray(query.$or)) {
-            return {
-                combinator: 'or',
-                rules: query.$or.map(parseGroup).filter((rule) => rule !== undefined),
-            };
-        }
-        else if (isEmpty(query)) {
-            return { combinator: 'and', rules: [] };
-        }
-        else {
-            const rules = Object.entries(query)
-                .map(([key, value]) => parseRule(key, value))
-                .filter((rule) => rule !== null);
-            return rules[0];
-        }
-    };
-    const result = parseGroup(mongoQuery);
-    // Check if the result is a RuleGroupType (i.e., has a combinator)
-    if (result && 'combinator' in result) {
-        return result;
-    }
-    else {
-        // If there are no condition groups configured so it's not a RuleGroupType, wrap it in a default 'and' combinator
-        return {
-            combinator: 'and',
-            rules: result ? [result] : [],
-        };
-    }
-}
 export const ALL_OPERATORS = [
     { name: '=', label: 'Is' },
     { name: '!=', label: 'Is not' },

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

@@ -3,8 +3,9 @@ import { DateTime } from 'luxon';
 import { nanoid } from 'nanoid';
 import Handlebars from 'no-eval-handlebars';
 import qs from 'qs';
-import { defaultRuleProcessorMongoDB, formatQuery, parseMongoDB, } from 'react-querybuilder';
+import { defaultRuleProcessorMongoDB, formatQuery, } from 'react-querybuilder';
 import escape from 'string-escape-regex';
+import { parseMongoDB } from '../util';
 // The following functions are used to build the FormIO form components from the form parameters.
 export function determineComponentType(properties, parameter) {
     if (!parameter)
@@ -374,7 +375,7 @@ export function convertComponentsToForm(components) {
                         ? { booleanDisplay: component.displayOption }
                         : {}),
                     ...(component.displayOption && component?.property?.type === 'object'
-                        ? { relatedObjectDisplay: component.displayOption }
+                        ? { relatedObjectDisplay: component.displayOption, viewLayout: component.viewLayout }
                         : {}),
                     ...(component.defaultToCurrentDate ||
                         component.defaultToCurrentTime ||

package/dist/published/components/custom/FormV2/FormRenderer.d.ts

@@ -27,7 +27,7 @@ export type FormRendererProps = BaseProps & {
     renderBody?: (props: BodyProps) => React.ReactNode;
     renderFooter?: (props: FooterProps) => React.ReactNode;
 };
-export declare const FormRenderer: React.FC<FormRendererProps> & {
+export declare const FormRenderer: ((props: FormRendererProps) => React.JSX.Element) & {
     Header: React.FC<HeaderProps>;
     Body: React.FC<BodyProps>;
     Footer: React.FC<FooterProps>;

package/dist/published/components/custom/FormV2/FormRenderer.js

@@ -1,14 +1,16 @@
-import { useObject } from '@evoke-platform/context';
+import { useApiServices, } from '@evoke-platform/context';
+import { useQuery } from '@tanstack/react-query';
 import { isEmpty, isEqual, omit } from 'lodash';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useWidgetSize } from '../../../theme';
 import { Box } from '../../layout';
 import { Body } from './components/Body';
+import ConditionalQueryClientProvider from './components/ConditionalQueryClientProvider';
 import { Footer, FooterActions } from './components/Footer';
 import { FormContext } from './components/FormContext';
 import Header, { AccordionActions, Title } from './components/Header';
-import { assignIdsToSectionsAndRichText, convertPropertiesToParams, entryIsVisible, getEntryId, getNestedParameterIds, isAddressProperty, obfuscateValue, } from './components/utils';
+import { assignIdsToSectionsAndRichText, convertPropertiesToParams, entryIsVisible, getEntryId, getNestedParameterIds, getPrefixedUrl, isAddressProperty, obfuscateValue, } from './components/utils';
 import { handleValidation } from './components/ValidationFiles/Validation';
 import ValidationErrors from './components/ValidationFiles/ValidationErrors';
 const FormRendererInternal = (props) => {
@@ -23,15 +25,14 @@ const FormRendererInternal = (props) => {
         defaultWidth: 1200,
     });
     const isSmallerThanMd = isBelow('md');
+    const apiServices = useApiServices();
     const [expandedSections, setExpandedSections] = useState([]);
     const [fetchedOptions, setFetchedOptions] = useState({});
     const [expandAll, setExpandAll] = useState();
     const [action, setAction] = useState();
-    const [object, setObject] = useState();
     const [triggerFieldReset, setTriggerFieldReset] = useState(false);
     const [isInitializing, setIsInitializing] = useState(true);
     const [parameters, setParameters] = useState();
-    const objectStore = useObject(objectId);
     const validationContainerRef = useRef(null);
     const updateFetchedOptions = (newData) => {
         setFetchedOptions((prev) => ({
@@ -45,32 +46,26 @@ const FormRendererInternal = (props) => {
     function handleCollapseAll() {
         setExpandAll(false);
     }
+    const { data: object } = useQuery({
+        queryKey: [objectId, 'sanitized'],
+        queryFn: () => apiServices.get(getPrefixedUrl(`/objects/${objectId}/effective`), {
+            params: { sanitizedVersion: true },
+        }),
+        staleTime: Infinity,
+        enabled: !!objectId,
+    });
     const updatedEntries = useMemo(() => {
         return object ? assignIdsToSectionsAndRichText(entries, object, parameters) : [];
     }, [entries, object, parameters]);
     useEffect(() => {
-        (async () => {
-            try {
-                const object = await objectStore.get({ sanitized: true });
-                const action = object?.actions?.find((a) => a.id === actionId);
-                setObject(object);
-                setAction(action);
-                if (action?.parameters) {
-                    setParameters(action.parameters);
-                }
-                else if (object) {
-                    // if forms actionId is synced with object properties
-                    setParameters(convertPropertiesToParams(object));
-                }
-            }
-            catch (error) {
-                console.error('Failed to fetch object, action or parameters:', error);
-            }
-            finally {
-                setIsInitializing(false);
-            }
-        })();
-    }, [objectStore, actionId]);
+        if (!object)
+            return;
+        const action = object.actions?.find((a) => a.id === actionId);
+        setAction(action);
+        // if forms action is synced with object properties then convertPropertiesToParams
+        setParameters(action?.parameters ?? convertPropertiesToParams(object));
+        setIsInitializing(false);
+    }, [object, actionId]);
     useEffect(() => {
         const currentValues = getValues();
         if (value) {
@@ -244,7 +239,10 @@ const FormRendererInternal = (props) => {
                     } })),
                 action && onSubmit && (renderFooter ? renderFooter(footerProps) : React.createElement(Footer, { ...footerProps }))))));
 };
-export const FormRenderer = Object.assign(FormRendererInternal, {
+export const FormRenderer = Object.assign(function FormRenderer(props) {
+    return (React.createElement(ConditionalQueryClientProvider, null,
+        React.createElement(FormRendererInternal, { ...props })));
+}, {
     Header,
     Body,
     Footer,