@evoke-platform/ui-components 1.13.0-dev.7 → 1.14.0

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

@@ -7,9 +7,12 @@ import FormField from '../../../../FormField';
 import { normalizeDates } from '../../utils';
 const isDropdownRepeatableFieldInputOption = (option) => isObject(option) && 'label' in option && 'endObjectId' in option;
 export const DropdownRepeatableFieldInput = (props) => {
-    const { id, fieldDefinition, readOnly, layout, endObjectInstances, endObject, searchValue, loading, handleSaveMiddleInstance, handleRemoveMiddleInstance, setSearchValue, selectedOptions, setSnackbarError, snackbarError, hasDescription, } = props;
+    const { id, fieldDefinition, readOnly, layout, middleObjectInstances, endObjectInstances, endObject, searchValue, loading, handleSaveMiddleInstance, handleRemoveMiddleInstance, setSearchValue, selectedOptions, setSnackbarError, snackbarError, setDropdownSelections, hasDescription, } = props;
     const { fieldHeight } = useFormContext();
     const [selectOptions, setSelectOptions] = useState([]);
+    useEffect(() => {
+        setDropdownSelections && setDropdownSelections(middleObjectInstances);
+    }, [middleObjectInstances]);
     useEffect(() => {
         const manyToManyPropertyId = fieldDefinition.manyToManyPropertyId;
         if (manyToManyPropertyId) {

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

@@ -1,8 +1,7 @@
 import { useApiServices, useNotification, } from '@evoke-platform/context';
-import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { get, omit, startCase } from 'lodash';
+import { get, isEqual, omit, startCase } from 'lodash';
 import { DateTime } from 'luxon';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import sift from 'sift';
 import { Edit, ExpandMoreOutlined, TrashCan } from '../../../../../../icons';
 import useWidgetSize, { useFormContext } from '../../../../../../theme/hooks';
@@ -10,7 +9,7 @@ import { Accordion, AccordionDetails, AccordionSummary, Button, IconButton, Skel
 import { Box } from '../../../../../layout';
 import { getReadableQuery } from '../../../../CriteriaBuilder';
 import { retrieveCustomErrorMessage } from '../../../../Form/utils';
-import { convertPropertiesToParams, deleteDocuments, formatSubmission, getPrefixedUrl, transformToWhere, useFormById, } from '../../utils';
+import { deleteDocuments, formatSubmission, getPrefixedUrl, transformToWhere } from '../../utils';
 import { ActionDialog } from './ActionDialog';
 import { DocumentViewerCell } from './DocumentViewerCell';
 const styles = {
@@ -36,7 +35,7 @@ const styles = {
 };
 const RepeatableField = (props) => {
     const { fieldDefinition, canUpdateProperty, criteria, viewLayout, entry } = props;
-    const { instance, width } = useFormContext();
+    const { fetchedOptions, setFetchedOptions, instance, width } = useFormContext();
     const { isBelow } = useWidgetSize({
         scroll: false,
         defaultWidth: width,
@@ -44,71 +43,106 @@ const RepeatableField = (props) => {
     const smallerThanMd = isBelow('md');
     const { instanceChanges } = useNotification();
     const apiServices = useApiServices();
+    const [reloadOnErrorTrigger, setReloadOnErrorTrigger] = useState(true);
     const [criteriaObjects, setCriteriaObjects] = useState([]);
     const [selectedInstanceId, setSelectedInstanceId] = useState();
     const [dialogType, setDialogType] = useState();
     const [openDialog, setOpenDialog] = useState(false);
+    const [users, setUsers] = useState(fetchedOptions[`${fieldDefinition.id}Users`] || []);
+    const [error, setError] = useState(false);
+    const [relatedInstances, setRelatedInstances] = useState(fetchedOptions[`${fieldDefinition.id}Options`] || []);
+    const [relatedObject, setRelatedObject] = useState(fetchedOptions[`${fieldDefinition.id}RelatedObject`]);
+    const [hasCreateAction, setHasCreateAction] = useState(fetchedOptions[`${fieldDefinition.id}HasCreateAction`] || false);
+    const [loading, setLoading] = useState((relatedObject && relatedInstances) || !fieldDefinition ? false : true);
+    const [tableViewLayout, setTableViewLayout] = useState(fetchedOptions[`${fieldDefinition.id}TableViewLayout`]);
+    const [createForm, setCreateForm] = useState(fetchedOptions[`${fieldDefinition.id}-createForm`]);
+    const [updateForm, setUpdateForm] = useState(fetchedOptions[`${fieldDefinition.id}-updateForm`]);
+    const [deleteForm, setDeleteForm] = useState(fetchedOptions[`${fieldDefinition.id}-deleteForm`]);
     const [snackbarError, setSnackbarError] = useState({
         showAlert: false,
         isError: false,
     });
-    const queryClient = useQueryClient();
-    const { data: relatedObject, isLoading: loadingRelatedObject } = useQuery({
-        queryKey: [fieldDefinition?.objectId, 'effective'],
-        queryFn: () => apiServices.get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/effective`)),
-        staleTime: Infinity,
-        enabled: !!fieldDefinition.objectId,
-    });
-    const { data: tableViewLayout, isFetching: isLayoutFetching } = useQuery({
-        queryKey: ['tableViewLayout', viewLayout?.id],
-        enabled: !!viewLayout?.id && !!relatedObject,
-        staleTime: Infinity,
-        placeholderData: () => {
-            return relatedObject?.viewLayout?.table
-                ? {
-                    id: 'default',
-                    name: 'Default',
-                    objectId: relatedObject.id,
-                    ...relatedObject.viewLayout.table,
-                }
-                : undefined;
-        },
-        queryFn: () => apiServices.get(getPrefixedUrl(`/objects/${viewLayout.objectId}/tableLayouts/${viewLayout.id}`)),
-    });
-    const transformedCriteria = useMemo(() => (criteria ? transformToWhere(criteria) : {}), [criteria]);
-    const relatedInstancesQueryKey = [
-        instance?.id,
-        'object',
-        fieldDefinition?.objectId,
-        'instances',
-        fieldDefinition?.relatedPropertyId,
-        transformedCriteria,
-    ];
-    const { data: relatedInstances = [], refetch: refetchRelatedInstances, isLoading: loadingRelatedInstances, isError: relatedInstancesError, } = useQuery({
-        queryKey: relatedInstancesQueryKey,
-        queryFn: async () => {
-            const filterProperty = `${fieldDefinition.relatedPropertyId}.id`;
-            const filter = {
-                where: { [filterProperty]: instance?.id, ...transformedCriteria },
-                limit: 100,
-            };
-            const instances = await apiServices.get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/instances`), {
-                params: { filter: JSON.stringify(filter) },
-            });
-            return instances;
-        },
-        enabled: !!fieldDefinition.relatedPropertyId && !!fieldDefinition.objectId && !!instance?.id,
-        staleTime: Infinity,
-    });
     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);
-    const createFormId = entry.display?.createFormId || createAction?.defaultFormId;
-    const updateFormId = entry.display?.updateFormId || updateAction?.defaultFormId;
-    const deleteFormId = entry.display?.deleteFormId || deleteAction?.defaultFormId;
-    const { data: createForm } = useFormById(createFormId ?? '', apiServices);
-    const { data: updateForm } = useFormById(updateFormId ?? '', apiServices);
-    const { data: deleteForm } = useFormById(deleteFormId ?? '', apiServices);
+    function getForm(setForm, action, formId) {
+        if (formId === '_auto_')
+            return;
+        if (formId || action?.defaultFormId) {
+            apiServices
+                .get(getPrefixedUrl(`/forms/${formId || action?.defaultFormId}`))
+                .then((evokeForm) => {
+                setForm(evokeForm);
+                setFetchedOptions({
+                    [`${fieldDefinition.id}${action?.type === 'delete' ? '-deleteForm' : action?.type === 'create' ? '-createForm' : '-updateForm'}`]: evokeForm,
+                });
+            })
+                .catch((error) => {
+                console.error(error);
+            });
+        }
+    }
+    const fetchRelatedInstances = useCallback(async (refetch = false) => {
+        let relatedObject;
+        if (fieldDefinition.objectId) {
+            if (!fetchedOptions[`${fieldDefinition.id}RelatedObject`]) {
+                try {
+                    relatedObject = await apiServices.get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/effective`));
+                    let defaultTableViewLayout;
+                    if (relatedObject.viewLayout?.table) {
+                        defaultTableViewLayout = {
+                            id: 'default',
+                            name: 'Default',
+                            objectId: relatedObject.id,
+                            ...relatedObject?.viewLayout.table,
+                        };
+                    }
+                    if (viewLayout) {
+                        apiServices
+                            .get(getPrefixedUrl(`/objects/${viewLayout.objectId}/tableLayouts/${viewLayout.id}`))
+                            .then(setTableViewLayout)
+                            .catch((err) => setTableViewLayout(defaultTableViewLayout));
+                    }
+                    else {
+                        setTableViewLayout(defaultTableViewLayout);
+                    }
+                    setRelatedObject(relatedObject);
+                }
+                catch (err) {
+                    console.error(err);
+                }
+            }
+            if (fieldDefinition.relatedPropertyId &&
+                fieldDefinition.objectId &&
+                instance?.id &&
+                (!fetchedOptions[`${fieldDefinition.id}Options`] || refetch)) {
+                const filterProperty = `${fieldDefinition.relatedPropertyId}.id`;
+                const transformedCriteria = criteria ? transformToWhere(criteria) : {};
+                const filter = {
+                    where: { [filterProperty]: instance?.id, ...transformedCriteria },
+                    limit: 100,
+                };
+                try {
+                    const timeout = setTimeout(() => {
+                        setLoading(false);
+                    }, 300);
+                    setLoading(true);
+                    const instances = await apiServices.get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/instances`), {
+                        params: { filter: JSON.stringify(filter) },
+                    });
+                    clearTimeout(timeout);
+                    if (instances) {
+                        setRelatedInstances(instances);
+                    }
+                }
+                catch (error) {
+                    setError(true);
+                }
+            }
+            setLoading(false);
+        }
+        relatedObject && checkCreateAccess(relatedObject);
+    }, [fieldDefinition]);
     const fetchCriteriaObjects = useCallback(async () => {
         let objectIds = [];
         const criteriaProperties = relatedObject?.properties?.filter((property) => property.type === 'criteria' && property.objectId) ?? [];
@@ -134,21 +168,41 @@ const RepeatableField = (props) => {
         }
         setCriteriaObjects(objects);
     }, [apiServices, relatedObject, tableViewLayout]);
-    const { data: users } = useQuery({
-        queryKey: ['users'],
-        queryFn: () => apiServices.get(getPrefixedUrl(`/users`)),
-        staleTime: Infinity,
-        meta: {
-            errorMessage: 'Error fetching users: ',
-        },
-    });
+    useEffect(() => {
+        if (!fetchedOptions[`${fieldDefinition.id}Users`]) {
+            (async () => {
+                try {
+                    const users = await apiServices.get(getPrefixedUrl(`/users`));
+                    setFetchedOptions({
+                        [`${fieldDefinition.id}Users`]: users,
+                    });
+                    setUsers(users);
+                }
+                catch (error) {
+                    console.error(error);
+                }
+            })();
+        }
+    }, [apiServices]);
+    useEffect(() => {
+        fetchRelatedInstances();
+    }, [fetchRelatedInstances, reloadOnErrorTrigger, instance]);
     useEffect(() => {
         if (relatedObject)
             fetchCriteriaObjects();
     }, [fetchCriteriaObjects, relatedObject]);
+    useEffect(() => {
+        if (createAction && !createForm)
+            getForm(setCreateForm, createAction, entry.display?.createFormId);
+        if (updateAction && !updateForm)
+            getForm(setUpdateForm, updateAction, entry.display?.updateFormId);
+        if (deleteAction && !deleteForm)
+            getForm(setDeleteForm, deleteAction, entry.display?.deleteFormId);
+    }, [entry.display, createAction, updateAction, deleteAction]);
     useEffect(() => {
         if (relatedObject?.rootObjectId) {
-            const callback = () => refetchRelatedInstances();
+            // pass true here so while it doesn't refetch on every tab change it does refetch on changes made
+            const callback = () => fetchRelatedInstances(true);
             instanceChanges?.subscribe(relatedObject?.rootObjectId, callback);
             return () => instanceChanges?.unsubscribe(relatedObject?.rootObjectId, callback);
         }
@@ -195,30 +249,59 @@ const RepeatableField = (props) => {
             };
         }
     };
-    const { data: hasCreatePermission } = useQuery({
-        queryKey: [fieldDefinition.objectId, entry.display?.createActionId, 'hasCreatePermission '],
-        queryFn: async () => {
-            const checkAccess = await apiServices.get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/instances/checkAccess`), {
+    const checkCreateAccess = useCallback((relatedObject) => {
+        if (fieldDefinition.objectId &&
+            canUpdateProperty &&
+            !fetchedOptions[`${fieldDefinition.id}HasCreateAction`]) {
+            apiServices
+                .get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/instances/checkAccess`), {
                 params: { action: 'execute', field: entry.display?.createActionId, scope: 'data' },
-            });
-            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) {
-                    return checkAccess.result;
+            })
+                .then((checkAccess) => {
+                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) {
+                        setHasCreateAction(checkAccess.result);
+                    }
+                    else {
+                        const validate = sift(criteria);
+                        setHasCreateAction(validate(instance) && checkAccess.result);
+                    }
                 }
                 else {
-                    const validate = sift(criteria);
-                    return validate(instance) && checkAccess.result;
+                    setHasCreateAction(false);
                 }
-            }
-            else {
-                return false;
-            }
-        },
-        staleTime: Infinity,
-        enabled: !!fieldDefinition.objectId && canUpdateProperty && !!relatedObject,
-    });
+            });
+        }
+    }, [fieldDefinition, canUpdateProperty, fetchedOptions, entry.display?.createActionId, instance, apiServices]);
+    useEffect(() => {
+        // Re-check create access when instance changes to re-evaluate the criteria
+        relatedObject && checkCreateAccess(relatedObject);
+    }, [relatedObject, checkCreateAccess]);
+    useEffect(() => {
+        const updatedOptions = {};
+        if ((relatedInstances && !fetchedOptions[`${fieldDefinition.id}Options`]) ||
+            fetchedOptions[`${fieldDefinition.id}Options`].length === 0 ||
+            !isEqual(relatedInstances, fetchedOptions[`${fieldDefinition.id}Options`])) {
+            updatedOptions[`${fieldDefinition.id}Options`] = relatedInstances;
+        }
+        if (relatedObject && !fetchedOptions[`${fieldDefinition.id}RelatedObject`]) {
+            updatedOptions[`${fieldDefinition.id}RelatedObject`] = relatedObject;
+        }
+        if (tableViewLayout && !fetchedOptions[`${fieldDefinition.id}TableViewLayout`]) {
+            updatedOptions[`${fieldDefinition.id}TableViewLayout`] = tableViewLayout;
+        }
+        if ((hasCreateAction || hasCreateAction === false) && !fetchedOptions[`${fieldDefinition.id}HasCreateAction`]) {
+            updatedOptions[`${fieldDefinition.id}HasCreateAction`] = hasCreateAction;
+        }
+        else if (!hasCreateAction && relatedObject) {
+            checkCreateAccess(relatedObject);
+        }
+        if (Object.keys(updatedOptions).length > 0) {
+            setFetchedOptions(updatedOptions);
+        }
+    }, [relatedObject, relatedInstances, hasCreateAction, tableViewLayout]);
     const deleteRow = (id) => {
         setDialogType('delete');
         setSelectedInstanceId(id);
@@ -234,7 +317,7 @@ const RepeatableField = (props) => {
         setSelectedInstanceId(id);
         setOpenDialog(true);
     };
-    const ErrorComponent = () => loadingRelatedObject || loadingRelatedInstances ? (React.createElement("div", null,
+    const ErrorComponent = () => loading ? (React.createElement("div", null,
         React.createElement(Typography, { sx: {
                 fontSize: '14px',
                 color: '#727c84',
@@ -250,7 +333,7 @@ const RepeatableField = (props) => {
                     backgroundColor: 'transparent',
                 },
                 'min-width': '44px',
-            }, variant: "text", onClick: () => refetchRelatedInstances() }, "Retry")));
+            }, variant: "text", onClick: () => setReloadOnErrorTrigger((prevState) => !prevState) }, "Retry")));
     const save = async (input) => {
         const action = relatedObject?.actions?.find((a) => a.id ===
             (dialogType === 'create'
@@ -261,7 +344,7 @@ const RepeatableField = (props) => {
         // 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, undefined, instance?.id && fieldDefinition.relatedPropertyId
             ? { instanceId: instance.id, propertyId: fieldDefinition.relatedPropertyId }
-            : undefined, action?.parameters ?? (relatedObject && convertPropertiesToParams(relatedObject)));
+            : undefined);
         if (action?.type === 'create' && entry.display?.createActionId) {
             const updatedInput = {
                 ...input,
@@ -272,11 +355,8 @@ const RepeatableField = (props) => {
                     actionId: entry.display?.createActionId,
                     input: updatedInput,
                 });
-                queryClient.setQueryData(relatedInstancesQueryKey, (oldData) => {
-                    if (!oldData)
-                        return [instance];
-                    return [...oldData, instance];
-                });
+                const hasAccess = fieldDefinition?.relatedPropertyId && fieldDefinition.relatedPropertyId in instance;
+                hasAccess && setRelatedInstances([...relatedInstances, instance]);
                 setOpenDialog(false);
                 setDialogType(undefined);
                 setSelectedInstanceId(undefined);
@@ -302,12 +382,12 @@ const RepeatableField = (props) => {
                 if (response && relatedObject && instance) {
                     deleteDocuments(input, !!response, apiServices, relatedObject, instance, action);
                 }
-                queryClient.setQueryData(relatedInstancesQueryKey, (oldData = []) => {
-                    if (action?.type === 'delete') {
-                        return oldData.filter((i) => i.id !== selectedInstanceId);
-                    }
-                    return oldData.map((i) => (i.id === instance?.id ? instance : i));
-                });
+                if (action?.type === 'delete') {
+                    setRelatedInstances((prevInstances) => prevInstances.filter((instance) => instance.id !== selectedInstanceId));
+                }
+                else {
+                    setRelatedInstances((prevInstances) => prevInstances.map((i) => (i.id === instance?.id ? instance : i)));
+                }
                 setOpenDialog(false);
                 setDialogType(undefined);
                 setSelectedInstanceId(undefined);
@@ -381,12 +461,12 @@ const RepeatableField = (props) => {
         }
         return value;
     };
-    return loadingRelatedObject || loadingRelatedInstances || isLayoutFetching ? (React.createElement(React.Fragment, null,
+    return loading ? (React.createElement(React.Fragment, null,
         React.createElement(Skeleton, null),
         React.createElement(Skeleton, null),
         React.createElement(Skeleton, null))) : (React.createElement(React.Fragment, null,
         React.createElement(Box, { sx: { padding: '10px 0' } },
-            !relatedInstances?.length ? (!relatedInstancesError ? (React.createElement(Typography, { sx: { margin: '-10px 0', color: 'rgb(114 124 132)', fontSize: '14px' } }, "No items added")) : (React.createElement(ErrorComponent, null))) : smallerThanMd ? (React.createElement(React.Fragment, null, relatedInstances?.map((relatedInstance, index) => (React.createElement(Accordion, { key: relatedInstance.id, sx: {
+            !relatedInstances?.length ? (!error ? (React.createElement(Typography, { sx: { margin: '-10px 0', color: 'rgb(114 124 132)', fontSize: '14px' } }, "No items added")) : (React.createElement(ErrorComponent, null))) : smallerThanMd ? (React.createElement(React.Fragment, null, relatedInstances?.map((relatedInstance, index) => (React.createElement(Accordion, { key: relatedInstance.id, sx: {
                     border: '1px solid #dbe0e4',
                     borderTop: index === 0 ? undefined : 'none',
                     boxShadow: 'none',
@@ -449,7 +529,7 @@ const RepeatableField = (props) => {
                 React.createElement(Table, { stickyHeader: true, sx: { minWidth: 650 } },
                     React.createElement(TableHead, { sx: { backgroundColor: '#F4F6F8' } },
                         React.createElement(TableRow, null,
-                            columns?.map((prop) => React.createElement(TableCell, { sx: styles.tableCell }, prop.name)),
+                            columns?.map((prop) => (React.createElement(TableCell, { sx: styles.tableCell }, prop.name))),
                             canUpdateProperty && React.createElement(TableCell, { sx: { ...styles.tableCell, width: '80px' } }))),
                     React.createElement(TableBody, null, relatedInstances?.map((relatedInstance, index) => (React.createElement(TableRow, { key: relatedInstance.id },
                         columns?.map((prop) => {
@@ -476,7 +556,7 @@ const RepeatableField = (props) => {
                             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' } } }))))))))))))),
-            hasCreatePermission && entry.display?.createActionId && (React.createElement(Button, { variant: "contained", sx: styles.addButton, disabled: !createAction, onClick: addRow, "aria-label": 'Add' }, "Add"))),
+            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'
                     ? entry.display?.createActionId

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

@@ -1,46 +1,62 @@
 import { useApiServices } from '@evoke-platform/context';
-import { useQuery } from '@tanstack/react-query';
-import React from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useFormContext } from '../../../../../theme/hooks';
-import { Button, CircularProgress, Skeleton, Typography } from '../../../../core';
+import { Button, CircularProgress, Typography } from '../../../../core';
 import { Box } from '../../../../layout';
 import CriteriaBuilder from '../../../CriteriaBuilder';
 import { addressProperties, getPrefixedUrl } from '../utils';
 export default function Criteria(props) {
     const { value, canUpdateProperty, fieldDefinition, error } = props;
     const apiServices = useApiServices();
-    const { handleChange, onAutosave } = useFormContext();
-    const { data: properties = [], error: loadingError, refetch: fetchProperties, isFetching: loading, } = useQuery({
-        queryKey: [fieldDefinition?.objectId, 'effective properties'],
-        queryFn: async () => {
-            const properties = await apiServices.get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/effective/properties`));
-            return properties.flatMap((prop) => {
-                if (prop.type === 'object' || prop.type === 'user') {
-                    return [
-                        {
-                            id: `${prop.id}.id`,
-                            name: `${prop.name} Id`,
-                            type: 'string',
-                        },
-                        {
-                            id: `${prop.id}.name`,
-                            name: `${prop.name} Name`,
-                            type: 'string',
-                        },
-                    ];
+    const { fetchedOptions, setFetchedOptions, handleChange, onAutosave } = useFormContext();
+    const [loadingError, setLoadingError] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [properties, setProperties] = useState(fetchedOptions[`${fieldDefinition.id}Options`] || []);
+    const fetchProperties = useCallback(async () => {
+        if (fieldDefinition.objectId && !fetchedOptions[`${fieldDefinition.id}Options`]) {
+            setLoading(true);
+            apiServices.get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/effective/properties`), { params: { fields: ['properties'] } }, (error, properties) => {
+                if (error) {
+                    console.error('Error fetching object properties', error);
+                    setLoadingError(true);
                 }
-                if (prop.type === 'address') {
-                    return addressProperties(prop);
+                if (properties) {
+                    const flattenProperties = properties.flatMap((prop) => {
+                        if (prop.type === 'object' || prop.type === 'user') {
+                            return [
+                                {
+                                    id: `${prop.id}.id`,
+                                    name: `${prop.name} Id`,
+                                    type: 'string',
+                                },
+                                {
+                                    id: `${prop.id}.name`,
+                                    name: `${prop.name} Name`,
+                                    type: 'string',
+                                },
+                            ];
+                        }
+                        else if (prop.type === 'address') {
+                            return addressProperties(prop);
+                        }
+                        return prop;
+                    });
+                    setProperties(flattenProperties);
+                    setFetchedOptions({
+                        [`${fieldDefinition.id}Options`]: flattenProperties.map((prop) => ({
+                            id: prop.id,
+                            name: prop.name,
+                        })),
+                    });
+                    setLoadingError(false);
                 }
-                return prop;
+                setLoading(false);
             });
-        },
-        staleTime: Infinity,
-        enabled: !!fieldDefinition?.objectId,
-        meta: {
-            errorMessage: 'Error fetching object properties: ',
-        },
-    });
+        }
+    }, [fieldDefinition.objectId, apiServices]);
+    useEffect(() => {
+        fetchProperties();
+    }, [fetchProperties]);
     const handleUpdate = async (criteria) => {
         if (criteria || value) {
             const newValue = criteria ?? null;
@@ -66,12 +82,9 @@ export default function Criteria(props) {
                     padding: 0,
                     '&:hover': { backgroundColor: 'transparent' },
                     minWidth: '44px',
-                }, variant: "text", onClick: () => fetchProperties(), disabled: loading }, "Retry"),
+                }, variant: "text", onClick: fetchProperties, disabled: loading }, "Retry"),
             loading && React.createElement(CircularProgress, { size: 20, sx: { paddingLeft: '10px' } })));
     }
-    if (loading) {
-        return React.createElement(Skeleton, null);
-    }
     return !!value || canUpdateProperty ? (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: [
                 {

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

@@ -1,13 +1,12 @@
 import { DocumentParameterValidation } from '@evoke-platform/context';
 import React from 'react';
-import { DocumentReference } from '../../types';
+import { SavedDocumentReference } from '../../types';
 type DocumentProps = {
     id: string;
-    fieldType?: 'file' | 'document';
     canUpdateProperty: boolean;
     error: boolean;
     validate?: DocumentParameterValidation;
-    value: (File | DocumentReference)[] | undefined;
+    value: (File | SavedDocumentReference)[] | undefined;
     hasDescription?: boolean;
 };
 export declare const Document: (props: DocumentProps) => React.JSX.Element;