@evoke-platform/ui-components 1.10.0-dev.2 → 1.10.0-dev.21

package/dist/published/components/custom/FormV2/components/FormFieldTypes/CollectionFiles/RepeatableField.js

@@ -1,5 +1,5 @@
 import { useApiServices, useNotification, } from '@evoke-platform/context';
-import { get, isEqual, pick, startCase } from 'lodash';
+import { get, isEqual, omit, startCase } from 'lodash';
 import { DateTime } from 'luxon';
 import React, { useCallback, useEffect, useState } from 'react';
 import sift from 'sift';
@@ -34,7 +34,7 @@ const styles = {
     },
 };
 const RepeatableField = (props) => {
-    const { fieldDefinition, canUpdateProperty, criteria, viewLayout, entry, createActionId, updateActionId, deleteActionId, } = props;
+    const { fieldDefinition, canUpdateProperty, criteria, viewLayout, entry } = props;
     const { fetchedOptions, setFetchedOptions, instance, width } = useFormContext();
     const { isBelow } = useWidgetSize({
         scroll: false,
@@ -62,10 +62,12 @@ const RepeatableField = (props) => {
         showAlert: false,
         isError: false,
     });
-    const createAction = relatedObject?.actions?.find((item) => item.id === createActionId);
-    const updateAction = relatedObject?.actions?.find((item) => item.id === updateActionId);
-    const deleteAction = relatedObject?.actions?.find((item) => item.id === deleteActionId);
+    const createAction = relatedObject?.actions?.find((item) => item.id === entry.display?.createActionId);
+    const updateAction = relatedObject?.actions?.find((item) => item.id === entry.display?.updateActionId);
+    const deleteAction = relatedObject?.actions?.find((item) => item.id === entry.display?.deleteActionId);
     function getForm(setForm, action, formId) {
+        if (formId === '_auto_')
+            return;
         if (formId || action?.defaultFormId) {
             apiServices
                 .get(getPrefixedUrl(`/forms/${formId || action?.defaultFormId}`))
@@ -76,27 +78,6 @@ const RepeatableField = (props) => {
                 console.error(error);
             });
         }
-        else if (action) {
-            apiServices
-                .get(getPrefixedUrl('/forms'), {
-                params: {
-                    filter: {
-                        where: {
-                            actionId: action.id,
-                            objectId: fieldDefinition.objectId,
-                        },
-                    },
-                },
-            })
-                .then((matchingForms) => {
-                if (matchingForms.length === 1) {
-                    setForm(matchingForms[0]);
-                }
-            })
-                .catch((error) => {
-                console.error(error);
-            });
-        }
     }
     const fetchRelatedInstances = useCallback(async (refetch = false) => {
         let relatedObject;
@@ -209,11 +190,11 @@ const RepeatableField = (props) => {
     }, [fetchCriteriaObjects, relatedObject]);
     useEffect(() => {
         if (createAction && !createForm)
-            getForm(setCreateForm, createAction); // TODO: pass entry.display?.createForm as a third argument
+            getForm(setCreateForm, createAction, entry.display?.createFormId);
         if (updateAction && !updateForm)
-            getForm(setUpdateForm, updateAction); // TODO: pass entry.display?.updateForm as a third argument
+            getForm(setUpdateForm, updateAction, entry.display?.updateFormId);
         if (deleteAction && !deleteForm)
-            getForm(setDeleteForm, deleteAction); // TODO: pass entry.display?.deleteForm as a third argument
+            getForm(setDeleteForm, deleteAction, entry.display?.deleteFormId);
     }, [entry.display, createAction, updateAction, deleteAction]);
     useEffect(() => {
         if (relatedObject?.rootObjectId) {
@@ -269,10 +250,10 @@ const RepeatableField = (props) => {
         if (fieldDefinition.objectId && canUpdateProperty && !fetchedOptions[`${fieldDefinition.id}HasCreateAction`]) {
             apiServices
                 .get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/instances/checkAccess`), {
-                params: { action: 'execute', field: '_create', scope: 'data' },
+                params: { action: 'execute', field: entry.display?.createActionId, scope: 'data' },
             })
                 .then((checkAccess) => {
-                const action = relatedObject.actions?.find((item) => item.id === '_create');
+                const action = relatedObject.actions?.find((item) => item.id === entry.display?.createActionId);
                 if (action && fieldDefinition.relatedPropertyId) {
                     const { relatedObjectProperty, criteria } = retrieveCriteria(fieldDefinition.relatedPropertyId, action, relatedObject);
                     if (!criteria || JSON.stringify(criteria).includes('{{{input.') || !relatedObjectProperty) {
@@ -346,17 +327,21 @@ const RepeatableField = (props) => {
             }, variant: "text", onClick: () => setReloadOnErrorTrigger((prevState) => !prevState) }, "Retry")));
     const save = async (input) => {
         const action = relatedObject?.actions?.find((a) => a.id ===
-            (dialogType === 'create' ? createActionId : dialogType === 'update' ? updateActionId : deleteActionId));
+            (dialogType === 'create'
+                ? entry.display?.createActionId
+                : dialogType === 'update'
+                    ? entry.display?.updateActionId
+                    : entry.display?.deleteActionId));
         // when save is called we know that fieldDefinition is a parameter and fieldDefinition.objectId is defined
         input = await formatSubmission(input, apiServices, fieldDefinition.objectId, selectedInstanceId, action?.type === 'update' ? updateForm : undefined);
-        if (action?.type === 'create' && createActionId) {
+        if (action?.type === 'create' && entry.display?.createActionId) {
             const updatedInput = {
                 ...input,
                 [fieldDefinition?.relatedPropertyId]: { id: instance?.id },
             };
             try {
                 const instance = await apiServices.post(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/instances/actions`), {
-                    actionId: createActionId,
+                    actionId: entry.display?.createActionId,
                     input: updatedInput,
                 });
                 const hasAccess = fieldDefinition?.relatedPropertyId && fieldDefinition.relatedPropertyId in instance;
@@ -379,8 +364,8 @@ const RepeatableField = (props) => {
             try {
                 const response = await apiServices.post(getPrefixedUrl(`/objects/${relatedObjectId}/instances/${selectedInstanceId}/actions`), {
                     actionId: `_${action?.type}`,
-                    input: pick(input, relatedObject?.properties
-                        ?.filter((property) => !property.formula && property.type !== 'collection')
+                    input: omit(input, relatedObject?.properties
+                        ?.filter((property) => property.formula || property.type === 'collection')
                         .map((property) => property.id) ?? []),
                 });
                 if (response && relatedObject && instance) {
@@ -519,12 +504,12 @@ const RepeatableField = (props) => {
                                 users?.find((user) => get(relatedInstance, `${prop.id.split('.')[0]}.id`) === user.id)?.status === 'Inactive' &&
                                 ' (Inactive)')))))),
                     canUpdateProperty && (React.createElement(Box, { sx: { mt: 2, display: 'flex', gap: 1 } },
-                        React.createElement(IconButton, { onClick: () => editRow(relatedInstance.id) },
+                        entry.display?.updateActionId && (React.createElement(IconButton, { onClick: () => editRow(relatedInstance.id) },
                             React.createElement(Tooltip, { title: "Edit" },
-                                React.createElement(Edit, null))),
-                        React.createElement(IconButton, { onClick: () => deleteRow(relatedInstance.id) },
+                                React.createElement(Edit, null)))),
+                        entry.display?.deleteActionId && (React.createElement(IconButton, { onClick: () => deleteRow(relatedInstance.id) },
                             React.createElement(Tooltip, { title: "Delete" },
-                                React.createElement(TrashCan, { sx: { ':hover': { color: '#A12723' } } }))))))))))) : (React.createElement(TableContainer, { sx: {
+                                React.createElement(TrashCan, { sx: { ':hover': { color: '#A12723' } } })))))))))))) : (React.createElement(TableContainer, { sx: {
                     borderRadius: '6px',
                     border: '1px solid #919EAB3D',
                     boxShadow: 'none',
@@ -544,7 +529,7 @@ const RepeatableField = (props) => {
                                             cursor: 'pointer',
                                         },
                                     }
-                                    : {}, onClick: updateActionId &&
+                                    : {}, onClick: entry.display?.updateActionId &&
                                     canUpdateProperty &&
                                     prop.id === 'name'
                                     ? () => editRow(relatedInstance.id)
@@ -554,24 +539,26 @@ const RepeatableField = (props) => {
                                     users?.find((user) => get(relatedInstance, `${prop.id.split('.')[0]}.id`) === user.id)?.status === 'Inactive' && (React.createElement("span", null, ' (Inactive)'))))));
                         }),
                         canUpdateProperty && (React.createElement(TableCell, { sx: { width: '80px' } },
-                            updateActionId && (React.createElement(IconButton, { "aria-label": `edit-collection-instance-${index}`, onClick: () => editRow(relatedInstance.id) },
+                            entry.display?.updateActionId && (React.createElement(IconButton, { "aria-label": `edit-collection-instance-${index}`, onClick: () => editRow(relatedInstance.id) },
                                 React.createElement(Tooltip, { title: "Edit" },
                                     React.createElement(Edit, null)))),
-                            React.createElement(IconButton, { "aria-label": `delete-collection-instance-${index}`, onClick: () => deleteRow(relatedInstance.id) },
+                            entry.display?.deleteActionId && (React.createElement(IconButton, { "aria-label": `delete-collection-instance-${index}`, onClick: () => deleteRow(relatedInstance.id) },
                                 React.createElement(Tooltip, { title: "Delete" },
-                                    React.createElement(TrashCan, { sx: { ':hover': { color: '#A12723' } } })))))))))))),
-            hasCreateAction && createActionId && (React.createElement(Button, { variant: "contained", sx: styles.addButton, onClick: addRow, "aria-label": 'Add' }, "Add"))),
+                                    React.createElement(TrashCan, { sx: { ':hover': { color: '#A12723' } } }))))))))))))),
+            hasCreateAction && entry.display?.createActionId && (React.createElement(Button, { variant: "contained", sx: styles.addButton, disabled: !createAction, onClick: addRow, "aria-label": 'Add' }, "Add"))),
         relatedObject && openDialog && (React.createElement(ActionDialog, { object: relatedObject, open: openDialog, onClose: () => setOpenDialog(false), onSubmit: save, action: relatedObject?.actions?.find((a) => a.id ===
                 (dialogType === 'create'
-                    ? createActionId
+                    ? entry.display?.createActionId
                     : dialogType === 'update'
-                        ? updateActionId
-                        : deleteActionId)), relatedFormId: dialogType === 'create'
+                        ? entry.display?.updateActionId
+                        : entry.display?.deleteActionId)), relatedFormId: dialogType === 'create'
                 ? createForm?.id
                 : dialogType === 'update'
                     ? updateForm?.id
                     : dialogType === 'delete'
-                        ? deleteForm?.id
+                        ? entry.display?.deleteFormId === '_auto_'
+                            ? '_auto_'
+                            : deleteForm?.id
                         : undefined, instanceId: selectedInstanceId, relatedParameter: fieldDefinition, associatedObject: instance?.id && fieldDefinition.relatedPropertyId
                 ? { instanceId: instance.id, propertyId: fieldDefinition.relatedPropertyId }
                 : undefined })),

package/dist/published/components/custom/FormV2/components/FormFieldTypes/Criteria.js

@@ -8,7 +8,7 @@ import { addressProperties, getPrefixedUrl } from '../utils';
 export default function Criteria(props) {
     const { value, canUpdateProperty, fieldDefinition, error } = props;
     const apiServices = useApiServices();
-    const { fetchedOptions, setFetchedOptions, handleChange } = useFormContext();
+    const { fetchedOptions, setFetchedOptions, handleChange, onAutosave } = useFormContext();
     const [loadingError, setLoadingError] = useState(false);
     const [loading, setLoading] = useState(false);
     const [properties, setProperties] = useState(fetchedOptions[`${fieldDefinition.id}Options`] || []);
@@ -57,9 +57,22 @@ export default function Criteria(props) {
     useEffect(() => {
         fetchProperties();
     }, [fetchProperties]);
-    const handleUpdate = (criteria) => {
+    const handleUpdate = async (criteria) => {
         if (criteria || value) {
-            handleChange(fieldDefinition.id, criteria ?? null);
+            const newValue = criteria ?? null;
+            try {
+                handleChange && (await handleChange(fieldDefinition.id, newValue));
+            }
+            catch (error) {
+                console.error('Failed to update field:', error);
+                return;
+            }
+            try {
+                await onAutosave?.(fieldDefinition.id);
+            }
+            catch (error) {
+                console.error('Autosave failed:', error);
+            }
         }
     };
     if (loadingError) {

package/dist/published/components/custom/FormV2/components/FormFieldTypes/DocumentFiles/Document.js

@@ -12,7 +12,7 @@ import { DocumentList } from './DocumentList';
 export const Document = (props) => {
     const { id, canUpdateProperty, error, value, validate, hasDescription } = props;
     const apiServices = useApiServices();
-    const { fetchedOptions, setFetchedOptions, object, handleChange, instance } = useFormContext();
+    const { fetchedOptions, setFetchedOptions, object, handleChange, onAutosave: onAutosave, instance, } = useFormContext();
     const [snackbarError, setSnackbarError] = useState();
     const [documents, setDocuments] = useState();
     const [hasUpdatePermission, setHasUpdatePermission] = useState(fetchedOptions[`${id}UpdatePermission`]);
@@ -49,13 +49,25 @@ export const Document = (props) => {
         checkPermissions();
     }, [checkPermissions]);
     const handleUpload = async (files) => {
+        // Store File objects in form state - they will be uploaded during autosave via formatSubmission()
         const newDocuments = [...(documents ?? []), ...(files ?? [])];
         setDocuments(newDocuments);
-        handleChange(id, newDocuments);
+        try {
+            handleChange && (await handleChange(id, newDocuments));
+        }
+        catch (error) {
+            console.error('Failed to update field:', error);
+            return;
+        }
+        try {
+            await onAutosave?.(id);
+        }
+        catch (error) {
+            console.error('Autosave failed:', error);
+        }
     };
     const uploadDisabled = !!validate?.maxDocuments && (documents?.length ?? 0) >= validate.maxDocuments;
     const { getRootProps, getInputProps, open, fileRejections } = useDropzone({
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         onDrop: (files) => handleUpload(files),
         disabled: uploadDisabled,
         accept: validate?.allowedFileExtensions
@@ -109,7 +121,7 @@ export const Document = (props) => {
                         } }, validate?.maxDocuments === 1
                         ? `Maximum size is ${formattedMaxSize}.`
                         : `The maximum size of each document is ${formattedMaxSize}.`)))))),
-        canUpdateProperty && isNil(hasUpdatePermission) ? (React.createElement(Skeleton, { variant: "rectangular", height: formattedMaxSize || allowedTypesMessage ? '136px' : '115px', sx: { margin: '5px 0', borderRadius: '8px' } })) : (React.createElement(DocumentList, { id: id, handleChange: handleChange, value: value, setSnackbarError: (type, message) => setSnackbarError({ message, type }), canUpdateProperty: canUpdateProperty && !!hasUpdatePermission })),
+        canUpdateProperty && isNil(hasUpdatePermission) ? (React.createElement(Skeleton, { variant: "rectangular", height: formattedMaxSize || allowedTypesMessage ? '136px' : '115px', sx: { margin: '5px 0', borderRadius: '8px' } })) : (React.createElement(DocumentList, { id: id, handleChange: handleChange, onAutosave: onAutosave, value: value, setSnackbarError: (type, message) => setSnackbarError({ message, type }), canUpdateProperty: canUpdateProperty && !!hasUpdatePermission })),
         React.createElement(Snackbar, { open: !!snackbarError?.message, handleClose: () => setSnackbarError(null), message: snackbarError?.message, error: snackbarError?.type === 'error' }),
         errors.length > 0 && (React.createElement(Box, { display: 'flex', alignItems: 'center' },
             React.createElement(InfoRounded, { sx: { fontSize: '.75rem', marginRight: '3px', color: '#D3271B' } }),

package/dist/published/components/custom/FormV2/components/FormFieldTypes/DocumentFiles/DocumentList.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 import { SavedDocumentReference } from '../../types';
 type DocumentListProps = {
-    handleChange: (propertyId: string, value: (File | SavedDocumentReference)[] | undefined) => void;
+    handleChange?: (propertyId: string, value: (File | SavedDocumentReference)[] | undefined) => void;
+    onAutosave?: (fieldId: string) => void | Promise<void>;
     id: string;
     canUpdateProperty: boolean;
     value: (File | SavedDocumentReference)[] | undefined;

package/dist/published/components/custom/FormV2/components/FormFieldTypes/DocumentFiles/DocumentList.js

@@ -24,7 +24,7 @@ const viewableFileTypes = [
     'text/plain',
 ];
 export const DocumentList = (props) => {
-    const { handleChange, id, canUpdateProperty, value: documents, setSnackbarError } = props;
+    const { handleChange, onAutosave, id, canUpdateProperty, value: documents, setSnackbarError } = props;
     const apiServices = useApiServices();
     const { fetchedOptions, setFetchedOptions, object, instance } = useFormContext();
     const [hasViewPermission, setHasViewPermission] = useState(fetchedOptions[`${id}ViewPermission`] ?? true);
@@ -88,9 +88,22 @@ export const DocumentList = (props) => {
     };
     const isFile = (doc) => doc instanceof File;
     const fileExists = (doc) => savedDocuments?.find((d) => d.id === doc.id);
-    const handleRemove = (index) => {
+    const handleRemove = async (index) => {
         const updatedDocuments = documents?.filter((_, i) => i !== index) ?? [];
-        handleChange(id, updatedDocuments.length === 0 ? undefined : updatedDocuments);
+        const newValue = updatedDocuments.length === 0 ? undefined : updatedDocuments;
+        try {
+            handleChange && (await handleChange(id, newValue));
+        }
+        catch (error) {
+            console.error('Failed to update field:', error);
+            return;
+        }
+        try {
+            await onAutosave?.(id);
+        }
+        catch (error) {
+            console.error('Autosave failed:', error);
+        }
     };
     const openDocument = async (index) => {
         const doc = documents?.[index];

package/dist/published/components/custom/FormV2/components/FormFieldTypes/Image.js

@@ -55,7 +55,7 @@ const styles = {
 };
 export const Image = (props) => {
     const { id, canUpdateProperty, error, value, hasDescription } = props;
-    const { handleChange } = useFormContext();
+    const { handleChange, onAutosave: onAutosave } = useFormContext();
     const [image, setImage] = useState();
     useEffect(() => {
         if (typeof value === 'string') {
@@ -63,15 +63,41 @@ export const Image = (props) => {
         }
     }, [value]);
     const handleUpload = async (file) => {
+        // max file size 300KB
         if (file?.size && file.size <= 300000) {
-            const dataUrl = file ? await blobToDataUrl(file) : null;
+            const dataUrl = await blobToDataUrl(file);
             setImage(dataUrl);
-            handleChange(id, dataUrl);
+            try {
+                handleChange && (await handleChange(id, dataUrl));
+            }
+            catch (error) {
+                console.error('Failed to update field:', error);
+                return;
+            }
+            try {
+                await onAutosave?.(id);
+            }
+            catch (error) {
+                console.error('Autosave failed:', error);
+            }
         }
     };
-    const handleRemove = (e) => {
+    const handleRemove = async (e) => {
         setImage(null);
-        handleChange(id, '');
+        try {
+            handleChange && (await handleChange(id, ''));
+        }
+        catch (error) {
+            console.error('Failed to update field:', error);
+            e.stopPropagation();
+            return;
+        }
+        try {
+            await onAutosave?.(id);
+        }
+        catch (error) {
+            console.error('Autosave failed:', error);
+        }
         e.stopPropagation();
     };
     const { getRootProps, getInputProps, open } = useDropzone({

package/dist/published/components/custom/FormV2/components/FormFieldTypes/UserProperty.js

@@ -6,7 +6,7 @@ import { Autocomplete, IconButton, Paper, TextField, Typography } from '../../..
 import { getPrefixedUrl, isOptionEqualToValue } from '../utils';
 const UserProperty = (props) => {
     const { id, error, value, readOnly, hasDescription } = props;
-    const { fetchedOptions, setFetchedOptions, handleChange, fieldHeight } = useFormContext();
+    const { fetchedOptions, setFetchedOptions, handleChange, onAutosave: onAutosave, fieldHeight } = useFormContext();
     const [loadingOptions, setLoadingOptions] = useState(false);
     const apiServices = useApiServices();
     const [options, setOptions] = useState(fetchedOptions[`${id}Options`] || []);
@@ -40,9 +40,21 @@ const UserProperty = (props) => {
             });
         }
     }, [id]);
-    function handleChangeUserProperty(id, value) {
+    async function handleChangeUserProperty(id, value) {
         const updatedValue = typeof value?.value === 'string' ? { name: value.label, id: value.value } : null;
-        handleChange(id, updatedValue);
+        try {
+            handleChange && (await handleChange(id, updatedValue));
+        }
+        catch (error) {
+            console.error('Failed to update field:', error);
+            return; // Exit early if handleChange fails
+        }
+        try {
+            await onAutosave?.(id);
+        }
+        catch (error) {
+            console.error('Autosave failed:', error);
+        }
     }
     return (options && (React.createElement(Autocomplete, { id: id, fullWidth: true, open: openOptions, popupIcon: userValue || readOnly ? '' : React.createElement(ExpandMore, null), clearIcon: !loadingOptions && userValue ? (React.createElement(IconButton, { size: "small", disableRipple: true, onKeyDown: (e) => {
                 if (e.key === 'Enter') {