@evoke-platform/ui-components 1.10.0-testing.10 → 1.10.0-testing.12

package/dist/published/components/custom/FormV2/components/FormFieldTypes/relatedObjectFiles/ObjectPropertyInput.js

@@ -11,7 +11,7 @@ import { encodePageSlug, getDefaultPages, getPrefixedUrl, transformToWhere } fro
 import RelatedObjectInstance from './RelatedObjectInstance';
 const ObjectPropertyInput = (props) => {
     const { id, fieldDefinition, readOnly, error, mode, displayOption, filter, defaultValueCriteria, sortBy, orderBy, isModal, initialValue, viewLayout, hasDescription, createActionId, formId, } = props;
-    const { fetchedOptions, setFetchedOptions, parameters, fieldHeight, handleChange: handleChangeObjectField, instance, } = useFormContext();
+    const { fetchedOptions, setFetchedOptions, parameters, fieldHeight, handleChange: handleChangeObjectField, onAutosave: onAutosave, instance, } = useFormContext();
     const { defaultPages, findDefaultPageSlugFor } = useApp();
     const [selectedInstance, setSelectedInstance] = useState(initialValue || undefined);
     const [openCreateDialog, setOpenCreateDialog] = useState(false);
@@ -90,14 +90,27 @@ const ObjectPropertyInput = (props) => {
             });
             if (updatedFilter.where) {
                 setLoadingOptions(true);
-                apiServices.get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/instances?filter=${encodeURIComponent(JSON.stringify(updatedFilter))}`), (error, instances) => {
+                apiServices.get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/instances?filter=${encodeURIComponent(JSON.stringify(updatedFilter))}`), async (error, instances) => {
                     if (error) {
                         console.error(error);
                         setLoadingOptions(false);
                     }
                     if (instances && instances.length > 0) {
                         setSelectedInstance(instances[0]);
-                        handleChangeObjectField(id, instances[0]);
+                        try {
+                            await handleChangeObjectField(id, instances[0]);
+                        }
+                        catch (error) {
+                            console.error('Failed to update field:', error);
+                            setLoadingOptions(false);
+                            return;
+                        }
+                        try {
+                            await onAutosave?.(id);
+                        }
+                        catch (error) {
+                            console.error('Autosave failed:', error);
+                        }
                     }
                     setLoadingOptions(false);
                 });
@@ -131,7 +144,15 @@ const ObjectPropertyInput = (props) => {
                 }
             });
         }
-    }, [fieldDefinition, updatedCriteria, layout, fetchedOptions, hasFetched, id]);
+    }, [
+        fieldDefinition,
+        updatedCriteria,
+        layout,
+        fetchedOptions?.[`${id}Options`],
+        fetchedOptions?.[`${id}UpdatedCriteria`],
+        hasFetched,
+        id,
+    ]);
     const debouncedGetDropdownOptions = useCallback(debounce(getDropdownOptions, 200), [getDropdownOptions]);
     useEffect(() => {
         if (displayOption === 'dropdown') {
@@ -383,19 +404,38 @@ const ObjectPropertyInput = (props) => {
                     if (selectedInstance?.id) {
                         e.preventDefault();
                     }
-                }, loading: loadingOptions, onChange: (event, value) => {
-                    if (isNil(value)) {
-                        setDropdownInput(undefined);
-                        setSelectedInstance(undefined);
-                        handleChangeObjectField(id, null);
-                    }
-                    else if (value?.value === '__new__') {
-                        setOpenCreateDialog(true);
+                }, loading: loadingOptions, onChange: async (event, value) => {
+                    try {
+                        if (isNil(value)) {
+                            setDropdownInput(undefined);
+                            setSelectedInstance(undefined);
+                            await handleChangeObjectField(id, null);
+                            // Trigger autosave immediately upon clearing
+                            try {
+                                await onAutosave?.(id);
+                            }
+                            catch (error) {
+                                console.error('Autosave failed:', error);
+                            }
+                        }
+                        else if (value?.value === '__new__') {
+                            setOpenCreateDialog(true);
+                        }
+                        else {
+                            const selectedInstance = options.find((o) => o.id === value?.value);
+                            setSelectedInstance(selectedInstance);
+                            await handleChangeObjectField(id, selectedInstance);
+                            // Trigger autosave immediately upon selection
+                            try {
+                                await onAutosave?.(id);
+                            }
+                            catch (error) {
+                                console.error('Autosave failed:', error);
+                            }
+                        }
                     }
-                    else {
-                        const selectedInstance = options.find((o) => o.id === value?.value);
-                        setSelectedInstance(selectedInstance);
-                        handleChangeObjectField(id, selectedInstance);
+                    catch (error) {
+                        console.error('Failed to update field:', error);
                     }
                 }, selectOnFocus: false, onBlur: () => {
                     if (dropdownInput) {
@@ -468,9 +508,21 @@ const ObjectPropertyInput = (props) => {
                     : undefined, "aria-label": selectedInstance?.name }, selectedInstance?.name ? selectedInstance?.name : readOnly && 'None')),
             !readOnly && selectedInstance ? (React.createElement(Tooltip, { title: `Unlink` },
                 React.createElement("span", null,
-                    React.createElement(IconButton, { onClick: (event) => {
+                    React.createElement(IconButton, { onClick: async (event) => {
                             event.stopPropagation();
-                            handleChangeObjectField(id, null);
+                            try {
+                                await handleChangeObjectField(id, null);
+                            }
+                            catch (error) {
+                                console.error('Failed to update field:', error);
+                                return;
+                            }
+                            try {
+                                await onAutosave?.(id);
+                            }
+                            catch (error) {
+                                console.error('Autosave failed:', error);
+                            }
                             setSelectedInstance(undefined);
                         }, sx: { p: 0, marginBottom: '4px' }, "aria-label": `Unlink` },
                         React.createElement(Close, { sx: { width: '20px', height: '20px' } }))))) : (React.createElement(Button, { sx: {

package/dist/published/components/custom/FormV2/components/FormFieldTypes/relatedObjectFiles/RelatedObjectInstance.js

@@ -29,7 +29,7 @@ const styles = {
 };
 const RelatedObjectInstance = (props) => {
     const { relatedObject, open, title, id, setSelectedInstance, handleClose, mode, displayOption, filter, layout, formId, actionId, fieldDefinition, setSnackbarError, setOptions, options, } = props;
-    const { handleChange: handleChangeObjectField, richTextEditor, fieldHeight, width } = useFormContext();
+    const { handleChange: handleChangeObjectField, onAutosave, richTextEditor, fieldHeight, width } = useFormContext();
     const [selectedRow, setSelectedRow] = useState();
     const [relationType, setRelationType] = useState(displayOption === 'dropdown' || mode === 'newOnly' ? 'new' : 'existing');
     const apiServices = useApiServices();
@@ -42,7 +42,20 @@ const RelatedObjectInstance = (props) => {
     const linkExistingInstance = async () => {
         if (selectedRow) {
             setSelectedInstance(selectedRow);
-            handleChangeObjectField(id, selectedRow);
+            try {
+                await handleChangeObjectField(id, selectedRow);
+            }
+            catch (error) {
+                console.error('Failed to update field:', error);
+                onClose();
+                return;
+            }
+            try {
+                await onAutosave?.(id);
+            }
+            catch (error) {
+                console.error('Autosave failed:', error);
+            }
         }
         onClose();
     };
@@ -56,22 +69,31 @@ const RelatedObjectInstance = (props) => {
         }
         submission = await formatSubmission(submission, apiServices, relatedObject.id);
         try {
-            await apiServices
-                .post(getPrefixedUrl(`/objects/${relatedObject.id}/instances/actions`), {
+            const response = await apiServices.post(getPrefixedUrl(`/objects/${relatedObject.id}/instances/actions`), {
                 actionId: actionId,
                 input: submission,
-            })
-                .then((response) => {
-                handleChangeObjectField(id, response);
-                setSelectedInstance(response);
-                setSnackbarError({
-                    showAlert: true,
-                    message: 'New instance created',
-                    isError: false,
-                });
-                setOptions(options.concat([response]));
-                onClose();
             });
+            try {
+                await handleChangeObjectField(id, response);
+            }
+            catch (error) {
+                console.error('Failed to update field:', error);
+                return;
+            }
+            try {
+                await onAutosave?.(id);
+            }
+            catch (error) {
+                console.error('Autosave failed:', error);
+            }
+            setSelectedInstance(response);
+            setSnackbarError({
+                showAlert: true,
+                message: 'New instance created',
+                isError: false,
+            });
+            setOptions(options.concat([response]));
+            onClose();
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
         }
         catch (err) {

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

@@ -14,6 +14,7 @@ export type HeaderProps = {
     form: EvokeForm;
     errors?: FieldErrors;
     action?: Action;
+    autosaving?: boolean;
     sx?: SxProps;
 };
 declare const Header: React.FC<HeaderProps>;

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

@@ -1,5 +1,6 @@
 import { isEmpty } from 'lodash';
 import React from 'react';
+import { Autorenew } from '../../../../icons';
 import useWidgetSize, { useFormContext } from '../../../../theme/hooks';
 import Button from '../../../core/Button/Button';
 import { Typography } from '../../../core/Typography';
@@ -14,6 +15,7 @@ const Header = (props) => {
     });
     const isSmallerThanMd = isBelow('md');
     const { isXs, isSm } = breakpoints;
+    const isSmall = isSm || isXs;
     return (React.createElement(Box, { sx: {
             paddingX: isSmallerThanMd ? 2 : 3,
             paddingTop: '0px',
@@ -29,10 +31,20 @@ const Header = (props) => {
                 flex: 1,
             },
         } },
-        title && (React.createElement(Box, { sx: { flex: '1 1 100%' } },
-            React.createElement(Title, { ...props }))),
-        hasAccordions && (React.createElement(Box, { sx: { flex: '1 1 100%' } },
-            React.createElement(AccordionActions, { ...props }))),
+        title && (React.createElement(Box, { sx: { flex: '1 1 auto', minWidth: 0, display: 'flex', alignItems: 'center', gap: 1 } },
+            React.createElement(Title, { ...props }),
+            props.autosaving && !isSmall && React.createElement(SavingIndicator, null))),
+        hasAccordions && (React.createElement(Box, { sx: { flex: '0 0 auto', display: 'flex', alignItems: 'center' } },
+            React.createElement(Box, { sx: { display: 'flex', alignItems: 'center' } },
+                React.createElement(AccordionActions, { ...props })),
+            React.createElement(Box, { sx: {
+                    width: '96px',
+                    minWidth: '72px',
+                    display: 'flex',
+                    justifyContent: 'flex-end',
+                    alignItems: 'center',
+                    marginLeft: 0.5,
+                } }, props.autosaving && isSmall ? React.createElement(SavingIndicator, null) : React.createElement(Box, { sx: { width: '100%' } })))),
         React.createElement("div", { ref: validationErrorsRef, className: 'evoke-form-renderer-header' }, shouldShowValidationErrors && !isEmpty(errors) ? React.createElement(ValidationErrors, { errors: errors }) : null)));
 };
 // Default slot components for convenience
@@ -63,4 +75,30 @@ export const AccordionActions = ({ onExpandAll, onCollapseAll, expandedSections
                 fontSize: '14px',
             } }, "Collapse all")));
 };
+/**
+ * SavingIndicator displays a spinning icon with "Saving" text
+ * to indicate that an autosave operation is in progress.
+ */
+const SavingIndicator = () => (React.createElement(Box, { sx: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 0.5,
+    } },
+    React.createElement(Typography, { sx: {
+            fontSize: '14px',
+            color: 'text.secondary',
+        } }, "Saving"),
+    React.createElement(Autorenew, { sx: {
+            fontSize: '16px',
+            color: 'text.secondary',
+            animation: 'spin 1s linear infinite',
+            '@keyframes spin': {
+                '0%': {
+                    transform: 'rotate(0deg)',
+                },
+                '100%': {
+                    transform: 'rotate(360deg)',
+                },
+            },
+        } })));
 export default Header;

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

@@ -1,6 +1,7 @@
 import { useApiServices, useAuthenticationContext, } from '@evoke-platform/context';
 import { WarningRounded } from '@mui/icons-material';
 import DOMPurify from 'dompurify';
+import { isEmpty } from 'lodash';
 import React, { useEffect, useMemo } from 'react';
 import useWidgetSize, { useFormContext } from '../../../../theme/hooks';
 import { TextField, Typography } from '../../../core';
@@ -37,7 +38,7 @@ function getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, displ
 }
 export function RecursiveEntryRenderer(props) {
     const { entry } = props;
-    const { fetchedOptions, setFetchedOptions, object, getValues, errors, instance, richTextEditor, parameters, handleChange, fieldHeight, triggerFieldReset, associatedObject, form, width, } = useFormContext();
+    const { fetchedOptions, setFetchedOptions, object, getValues, errors, instance, richTextEditor, parameters, handleChange, onAutosave, fieldHeight, triggerFieldReset, associatedObject, form, width, } = useFormContext();
     // If the entry is hidden, clear its value and any nested values, and skip rendering
     if (!entryIsVisible(entry, getValues(), instance)) {
         return null;
@@ -97,9 +98,24 @@ export function RecursiveEntryRenderer(props) {
                 React.createElement(UserProperty, { id: entryId, value: fieldValue, error: !!errors?.[entryId], readOnly: entry.type === 'readonlyField', hasDescription: !!display?.description })));
         }
         else if (fieldDefinition.type === 'collection') {
-            return fieldDefinition?.manyToManyPropertyId ? (middleObject && initialMiddleObjectInstances && (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
-                React.createElement(DropdownRepeatableField, { initialMiddleObjectInstances: fetchedOptions[`${entryId}MiddleObjectInstances`] || initialMiddleObjectInstances, fieldDefinition: fieldDefinition, id: entryId, middleObject: middleObject, readOnly: entry.type === 'readonlyField', criteria: validation?.criteria, hasDescription: !!display?.description })))) : (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
-                React.createElement(RepeatableField, { fieldDefinition: fieldDefinition, canUpdateProperty: entry.type !== 'readonlyField', criteria: validation?.criteria, viewLayout: display?.viewLayout, entry: entry })));
+            if (fieldDefinition?.manyToManyPropertyId) {
+                if (middleObject && !isEmpty(middleObject)) {
+                    return (initialMiddleObjectInstances && (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
+                        React.createElement(DropdownRepeatableField, { initialMiddleObjectInstances: fetchedOptions[`${entryId}MiddleObjectInstances`] ||
+                                initialMiddleObjectInstances, fieldDefinition: fieldDefinition, id: entryId, middleObject: middleObject, readOnly: entry.type === 'readonlyField', criteria: validation?.criteria, hasDescription: !!display?.description }))));
+                }
+                else {
+                    // when in the builder preview, the middle object won't be fetched so instead show an empty field
+                    const singleSelectProperty = structuredClone(fieldDefinition);
+                    singleSelectProperty.type = 'choices';
+                    return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
+                        React.createElement(FormField, { id: entryId, property: singleSelectProperty, defaultValue: fieldValue || getValues(entryId), selectOptions: [], size: fieldHeight })));
+                }
+            }
+            else {
+                return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
+                    React.createElement(RepeatableField, { fieldDefinition: fieldDefinition, canUpdateProperty: entry.type !== 'readonlyField', criteria: validation?.criteria, viewLayout: display?.viewLayout, entry: entry })));
+            }
         }
         else if (fieldDefinition.type === 'richText') {
             return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) }, richTextEditor ? (React.createElement(richTextEditor, {
@@ -111,7 +127,11 @@ export function RecursiveEntryRenderer(props) {
                 disabled: entry.type === 'readonlyField',
                 rows: display?.rowCount,
                 hasError: !!errors?.[entryId],
-            })) : (React.createElement(FormField, { id: entryId, property: fieldDefinition, defaultValue: fieldValue || getValues(entryId), onChange: handleChange, readOnly: entry.type === 'readonlyField', placeholder: display?.placeholder, error: !!errors?.[entryId], errorMessage: errors?.[entryId]?.message, isMultiLineText: !!display?.rowCount, rows: display?.rowCount, size: fieldHeight }))));
+            })) : (React.createElement(FormField, { id: entryId, property: fieldDefinition, defaultValue: fieldValue || getValues(entryId), onChange: handleChange, onBlur: () => {
+                    onAutosave?.(entryId)?.catch((error) => {
+                        console.error('Autosave failed:', error);
+                    });
+                }, readOnly: entry.type === 'readonlyField', placeholder: display?.placeholder, error: !!errors?.[entryId], errorMessage: errors?.[entryId]?.message, isMultiLineText: !!display?.rowCount, rows: display?.rowCount, size: fieldHeight }))));
         }
         else if (fieldDefinition.type === 'document') {
             return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
@@ -154,7 +174,12 @@ export function RecursiveEntryRenderer(props) {
                     : `${entryId}-reset-false`, ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors), errorMessage: undefined },
                 React.createElement(FormField, { id: entryId, 
                     // TODO: Ideally the FormField prop should be called parameter but can't change the name for backwards compatibility reasons
-                    property: fieldDefinition, defaultValue: fieldValue || getValues(entryId), onChange: handleChange, readOnly: entry.type === 'readonlyField', placeholder: display?.placeholder, mask: validation?.mask, isOptionEqualToValue: isOptionEqualToValue, error: !!errors?.[entryId], errorMessage: errors?.[entryId]?.message, isMultiLineText: !!display?.rowCount, rows: display?.rowCount, required: entry.display?.required || false, size: fieldHeight, sortBy: display?.choicesDisplay?.sortBy && display.choicesDisplay.sortBy, displayOption: fieldDefinition.type === 'boolean'
+                    property: fieldDefinition, defaultValue: fieldValue || getValues(entryId), onChange: handleChange, onBlur: () => {
+                        // Blur event - reads current value from formData
+                        onAutosave?.(entryId)?.catch((error) => {
+                            console.error('Autosave failed:', error);
+                        });
+                    }, readOnly: entry.type === 'readonlyField', placeholder: display?.placeholder, mask: validation?.mask, isOptionEqualToValue: isOptionEqualToValue, error: !!errors?.[entryId], errorMessage: errors?.[entryId]?.message, isMultiLineText: !!display?.rowCount, rows: display?.rowCount, required: entry.display?.required || false, size: fieldHeight, sortBy: display?.choicesDisplay?.sortBy && display.choicesDisplay.sortBy, displayOption: fieldDefinition.type === 'boolean'
                         ? display?.booleanDisplay
                         : display?.choicesDisplay?.type && display.choicesDisplay.type, label: display?.label, description: display?.description, tooltip: display?.tooltip, selectOptions: fieldDefinition?.enum, additionalProps: additionalProps, isCombobox: fieldDefinition.nonStrictEnum, strictlyTrue: fieldDefinition.strictlyTrue })));
         }

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

@@ -562,6 +562,7 @@ export const uploadDocuments = async (files, metadata, apiServices, instanceId,
     const allDocuments = [];
     const formData = new FormData();
     for (const [index, file] of files.entries()) {
+        // Only upload File instances; SavedDocumentReference objects are already uploaded
         if ('size' in file) {
             formData.append(`files[${index}]`, file);
         }
@@ -623,6 +624,7 @@ export const deleteDocuments = async (submittedFields, requestSuccess, apiServic
 export async function formatSubmission(submission, apiServices, objectId, instanceId, form, setSnackbarError) {
     for (const [key, value] of Object.entries(submission)) {
         if (isArray(value)) {
+            // Only upload if array contains File instances (not SavedDocumentReference)
             const fileInArray = value.some((item) => item instanceof File);
             if (fileInArray && instanceId && apiServices && objectId) {
                 try {