@evoke-platform/ui-components 1.6.0-dev.19 → 1.6.0-dev.20

package/dist/published/components/custom/FormV2/components/FormFieldTypes/CollectionFiles/ActionDialog.d.ts

@@ -0,0 +1,14 @@
+import { Action, ActionType, EvokeForm, InputParameter, Obj } from '@evoke-platform/context';
+import React from 'react';
+export type ActionDialogProps = {
+    open: boolean;
+    onClose: () => void;
+    action: Action;
+    instanceInput: Record<string, unknown>;
+    handleSubmit: (actionType: ActionType, input: Record<string, unknown> | undefined, instanceId?: string, setSubmitting?: (value: boolean) => void) => void;
+    object: Obj;
+    instanceId?: string;
+    relatedParameter?: InputParameter;
+    relatedForm?: EvokeForm;
+};
+export declare const ActionDialog: (props: ActionDialogProps) => React.JSX.Element;

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

@@ -0,0 +1,83 @@
+import { useApiServices } from '@evoke-platform/context';
+import { Close } from '@mui/icons-material';
+import React, { useEffect, useState } from 'react';
+import { Dialog, DialogContent, DialogTitle, IconButton, Skeleton } from '../../../../../core';
+import { Box } from '../../../../../layout';
+import ErrorComponent from '../../../../ErrorComponent';
+import { getPrefixedUrl } from '../../utils';
+const styles = {
+    button: {
+        textTransform: 'initial',
+        fontSize: '14px',
+        fontWeight: 700,
+        marginRight: '10px',
+    },
+    dialogTitle: {
+        fontSize: '18px',
+        fontWeight: 700,
+        paddingTop: '35px',
+        paddingBottom: '20px',
+    },
+    closeIcon: {
+        position: 'absolute',
+        right: '17px',
+        top: '22px',
+    },
+    cancelBtn: {
+        border: '1px solid #ced4da',
+        width: '75px',
+        marginRight: '10px',
+        color: 'black',
+    },
+    deleteBtn: {
+        color: '#ffffff',
+        backgroundColor: '#A12723',
+        '&:hover': { backgroundColor: '#A12723' },
+    },
+};
+export const ActionDialog = (props) => {
+    const { open, onClose, action, object, instanceId, relatedForm } = props;
+    const [loading, setLoading] = useState(false);
+    const [hasAccess, setHasAccess] = useState();
+    const [form, setForm] = useState();
+    const apiServices = useApiServices();
+    const isDeleteAction = action.type === 'delete';
+    useEffect(() => {
+        if (instanceId) {
+            setLoading(true);
+            apiServices.get(getPrefixedUrl(`/objects/${object.id}/instances/${instanceId}/checkAccess`), {
+                params: { action: 'execute', field: action.id },
+            }, (error, result) => {
+                setHasAccess(result?.result ?? false);
+                setLoading(false);
+            });
+        }
+        else {
+            setHasAccess(true);
+            setLoading(false);
+        }
+    }, [object, instanceId]);
+    useEffect(() => {
+        setForm(isDeleteAction && !form
+            ? {
+                id: '',
+                name: '',
+                entries: [],
+                objectId: object.id,
+                actionId: '_delete',
+                display: {
+                    submitLabel: 'Delete',
+                },
+            }
+            : relatedForm);
+    }, [relatedForm, action, form]);
+    return (React.createElement(Dialog, { maxWidth: 'md', fullWidth: true, open: open, onClose: (e, reason) => reason !== 'backdropClick' && onClose() },
+        React.createElement(DialogTitle, { sx: styles.dialogTitle },
+            React.createElement(IconButton, { sx: styles.closeIcon, onClick: onClose },
+                React.createElement(Close, { fontSize: "small" })),
+            action && hasAccess && !loading ? action?.name : ''),
+        React.createElement(DialogContent, { sx: { paddingBottom: loading ? undefined : '0px' } }, hasAccess ? (React.createElement(Box, { sx: { width: '100%', marginTop: '10px' } })) : (React.createElement(React.Fragment, null, loading ? (React.createElement(React.Fragment, null,
+            React.createElement(Skeleton, { height: '30px', animation: 'wave' }),
+            React.createElement(Skeleton, { height: '30px', animation: 'wave' }),
+            React.createElement(Skeleton, { height: '30px', animation: 'wave' }))) : (React.createElement(ErrorComponent, { code: 'AccessDenied', message: 'You do not have permission to perform this action.', styles: { boxShadow: 'none' } })))))));
+};

package/dist/published/components/custom/FormV2/components/FormFieldTypes/CollectionFiles/DocumentViewerCell.d.ts

@@ -0,0 +1,13 @@
+import { ObjectInstance } from '@evoke-platform/context';
+import React from 'react';
+export type DocumentViewerCellProps = {
+    instance: ObjectInstance;
+    propertyId: string;
+    setSnackbarError: (error: {
+        showAlert: boolean;
+        message?: string;
+        isError?: boolean;
+    }) => void;
+    smallerThanMd?: boolean;
+};
+export declare const DocumentViewerCell: (props: DocumentViewerCellProps) => React.JSX.Element;

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

@@ -0,0 +1,140 @@
+import { useApiServices } from '@evoke-platform/context';
+import React, { useState } from 'react';
+import { AutorenewRounded, Close, FileWithExtension, LaunchRounded } from '../../../../../../icons';
+import { Button, Dialog, DialogContent, DialogTitle, IconButton, Menu, MenuItem, Typography, } from '../../../../../core';
+import { Grid } from '../../../../../layout';
+import { getPrefixedUrl } from '../../utils';
+const DocumentView = (props) => {
+    const { document } = props;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Grid, { item: true, sx: {
+                display: 'flex',
+                justifyContent: 'center',
+                padding: '7px',
+            } },
+            React.createElement(FileWithExtension, { fontFamily: "Arial", fileExtension: document.name?.split('.')?.pop() ?? '', sx: {
+                    height: '1rem',
+                    width: '1rem',
+                } })),
+        React.createElement(Grid, { item: true, xs: 12, sx: {
+                width: '100%',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+            } },
+            React.createElement(Typography, { noWrap: true, sx: {
+                    fontSize: '14px',
+                    fontWeight: 700,
+                    lineHeight: '15px',
+                    width: '100%',
+                } }, document?.name))));
+};
+export const DocumentViewerCell = (props) => {
+    const { instance, propertyId, setSnackbarError, smallerThanMd } = props;
+    const apiServices = useApiServices();
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [isLoading, setIsLoading] = useState(false);
+    const downloadDocument = async (doc, instance) => {
+        setIsLoading(true);
+        try {
+            const documentResponse = await apiServices.get(getPrefixedUrl(`/objects/${instance.objectId}/instances/${instance.id}/documents/${doc.id}/content`), { responseType: 'blob' });
+            const contentType = documentResponse.type;
+            const blob = new Blob([documentResponse], { type: contentType });
+            const url = URL.createObjectURL(blob);
+            // Let the browser handle whether to open the document to view in a new tab or download it.
+            window.open(url, '_blank');
+            setIsLoading(false);
+            URL.revokeObjectURL(url);
+        }
+        catch (error) {
+            const status = error.status;
+            let message = 'An error occurred while downloading the document.';
+            if (status === 403) {
+                message = 'You do not have permission to download this document.';
+            }
+            else if (status === 404) {
+                message = 'Document not found.';
+            }
+            setIsLoading(false);
+            setSnackbarError({
+                showAlert: true,
+                message,
+                isError: true,
+            });
+        }
+    };
+    return (React.createElement(React.Fragment, null, instance[propertyId]?.length ? (React.createElement(React.Fragment, null,
+        React.createElement(Button, { sx: {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'flex-start',
+                padding: '6px 10px',
+            }, color: 'inherit', onClick: async (event) => {
+                event.stopPropagation();
+                const documents = instance[propertyId];
+                if (documents.length === 1) {
+                    await downloadDocument(documents[0], instance);
+                }
+                else {
+                    setAnchorEl(event.currentTarget);
+                }
+            }, variant: "text", "aria-haspopup": "menu", "aria-controls": `document-menu-${instance.id}-${propertyId}`, "aria-expanded": anchorEl ? 'true' : 'false' },
+            isLoading ? (React.createElement(AutorenewRounded, { sx: {
+                    color: '#637381',
+                    width: '20px',
+                    height: '20px',
+                } })) : (React.createElement(LaunchRounded, { sx: {
+                    color: '#637381',
+                    width: '20px',
+                    height: '20px',
+                } })),
+            React.createElement(Typography, { sx: {
+                    marginLeft: '8px',
+                    fontWeight: 400,
+                    fontSize: '14px',
+                } }, isLoading ? 'Preparing document...' : 'View Document')),
+        !smallerThanMd ? (React.createElement(Menu, { id: `document-menu-${instance.id}-${propertyId}`, anchorEl: anchorEl, open: Boolean(anchorEl), onClose: () => {
+                setAnchorEl(null);
+            }, sx: {
+                '& .MuiPaper-root': {
+                    borderRadius: '12px',
+                    boxShadow: 'rgba(145, 158, 171, 0.2)',
+                },
+            }, variant: 'menu', PaperProps: {
+                tabIndex: 0,
+                sx: {
+                    maxHeight: 200,
+                    maxWidth: 300,
+                    minWidth: 300,
+                },
+                component: 'nav',
+            } }, instance[propertyId].map((document) => (React.createElement(MenuItem, { key: document.id, onClick: async (e) => {
+                setAnchorEl(null);
+                await downloadDocument(document, instance);
+            }, "aria-label": document.name },
+            React.createElement(DocumentView, { document: document })))))) : (React.createElement(Dialog, { open: Boolean(anchorEl), onClose: () => setAnchorEl(null) },
+            React.createElement(DialogTitle, { sx: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    paddingBottom: '0px',
+                } },
+                React.createElement(Typography, { sx: { fontSize: '14px', color: '#637381' } }, "Select a document to download"),
+                React.createElement(IconButton, { onClick: () => setAnchorEl(null) },
+                    React.createElement(Close, { fontSize: "small" }))),
+            React.createElement(DialogContent, { sx: { padding: '20px 16px' } }, instance[propertyId].map((document) => (React.createElement(Grid, null,
+                React.createElement(Button, { color: 'inherit', onClick: async () => {
+                        setAnchorEl(null);
+                        await downloadDocument(document, instance);
+                    }, sx: {
+                        maxWidth: '100%',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                        padding: '2px 0px',
+                    }, key: document.id },
+                    React.createElement(DocumentView, { document: document })))))))))) : (React.createElement(Typography, { sx: {
+            fontStyle: 'italic',
+            marginLeft: '12px',
+            fontSize: '14px',
+        } }, "No documents"))));
+};

package/dist/published/components/custom/FormV2/components/FormFieldTypes/CollectionFiles/DropdownRepeatableField.d.ts

@@ -0,0 +1,17 @@
+import { ObjWithRoot as EvokeObjectWithRoot, InputParameter, ObjectInstance, Property, ViewLayoutEntityReference } from '@evoke-platform/context';
+import React from 'react';
+import { FieldValues } from 'react-hook-form';
+export type DropdownRepeatableFieldProps = {
+    id: string;
+    fieldDefinition: InputParameter | Property;
+    instance?: FieldValues;
+    criteria?: object;
+    readOnly: boolean;
+    initialMiddleObjectInstances: ObjectInstance[];
+    middleObject: EvokeObjectWithRoot;
+    fieldHeight?: 'small' | 'medium';
+    hasDescription?: boolean;
+    viewLayout?: ViewLayoutEntityReference;
+};
+declare const DropdownRepeatableField: (props: DropdownRepeatableFieldProps) => React.JSX.Element;
+export default DropdownRepeatableField;

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

@@ -0,0 +1,233 @@
+import { useApiServices, useNotification, } from '@evoke-platform/context';
+import { debounce, isArray, isEmpty, isEqual } from 'lodash';
+import React, { useCallback, useEffect, useState } from 'react';
+import { useFormContext } from '../../../../../../theme/hooks';
+import { Skeleton } from '../../../../../core';
+import { retrieveCustomErrorMessage } from '../../../../Form/utils';
+import { getMiddleObject, getMiddleObjectFilter, getPrefixedUrl, transformToWhere } from '../../utils';
+import { DropdownRepeatableFieldInput } from './DropdownRepeatableFieldInput';
+const DropdownRepeatableField = (props) => {
+    const { id, fieldDefinition, criteria, instance, readOnly, initialMiddleObjectInstances, middleObject, fieldHeight, hasDescription, viewLayout, } = props;
+    const { fetchedOptions, setFetchedOptions } = useFormContext();
+    const [layout, setLayout] = useState();
+    const [loading, setLoading] = useState(false);
+    const [layoutLoaded, setLayoutLoaded] = useState(false);
+    const [searchValue, setSearchValue] = useState('');
+    const [middleObjectInstances, setMiddleObjectInstances] = useState(initialMiddleObjectInstances);
+    const [endObject, setEndObject] = useState(fetchedOptions[`${fieldDefinition.id}EndObject`]);
+    const [endObjectInstances, setEndObjectInstances] = useState(fetchedOptions[`${fieldDefinition.id}EndObjectInstances`] || []);
+    const [initialLoading, setInitialLoading] = useState(endObjectInstances ? false : true);
+    const [selectedOptions, setSelectedOptions] = useState([]);
+    const [hasFetched, setHasFetched] = useState(!!fetchedOptions[`${fieldDefinition.id}EndObjectInstancesHaveFetched`] || false);
+    const [snackbarError, setSnackbarError] = useState({
+        showAlert: false,
+        isError: true,
+    });
+    const { instanceChanges } = useNotification();
+    const apiServices = useApiServices();
+    const getMiddleObjectInstances = async () => {
+        const filter = instance ? getMiddleObjectFilter(fieldDefinition, instance.id) : {};
+        try {
+            return await apiServices.get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/instances`), {
+                params: { filter: JSON.stringify(filter) },
+            });
+        }
+        catch (err) {
+            console.error(err);
+            return [];
+        }
+    };
+    const fetchMiddleObjectInstances = async () => {
+        const newInstances = await getMiddleObjectInstances();
+        setMiddleObjectInstances(newInstances);
+    };
+    const setDropDownSelections = (instances) => {
+        setSelectedOptions(instances
+            .filter((currInstance) => fieldDefinition.manyToManyPropertyId in currInstance)
+            .map((currInstance) => ({
+            label: currInstance[fieldDefinition.manyToManyPropertyId]?.name,
+            endObjectId: currInstance[fieldDefinition.manyToManyPropertyId].id,
+            middleObjectId: currInstance.id,
+        }))
+            .sort((instanceA, instanceB) => instanceA.label.localeCompare(instanceB.label)));
+    };
+    useEffect(() => {
+        const endObjectProperty = middleObject?.properties?.find((currProperty) => fieldDefinition.manyToManyPropertyId === currProperty.id);
+        if (endObjectProperty && endObjectProperty.objectId && !fetchedOptions[`${fieldDefinition.id}EndObject`]) {
+            setLayoutLoaded(false);
+            apiServices.get(getPrefixedUrl(`/objects/${endObjectProperty.objectId}/effective`), { params: { filter: { fields: ['id', 'name', 'properties', 'viewLayout'] } } }, (error, effectiveObject) => {
+                if (error) {
+                    console.error(error);
+                }
+                else {
+                    // If there's no error then the effective object is defined.
+                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                    const endObject = effectiveObject;
+                    setEndObject(endObject);
+                    let defaultLayout;
+                    if (endObject.viewLayout?.dropdown) {
+                        defaultLayout = {
+                            id: 'default',
+                            name: 'Default',
+                            objectId: endObject.id,
+                            ...endObject.viewLayout.dropdown,
+                        };
+                    }
+                    if (viewLayout) {
+                        apiServices
+                            .get(getPrefixedUrl(`/objects/${viewLayout.objectId}/dropdownLayouts/${viewLayout.id}`))
+                            .then(setLayout)
+                            .catch(() => setLayout(defaultLayout))
+                            .finally(() => setLayoutLoaded(true));
+                    }
+                    else {
+                        setLayout(defaultLayout);
+                        setLayoutLoaded(true);
+                    }
+                }
+            });
+        }
+    }, [middleObject, viewLayout]);
+    useEffect(() => {
+        instanceChanges?.subscribe(middleObject.rootObjectId, () => {
+            fetchMiddleObjectInstances();
+        });
+        return () => instanceChanges?.unsubscribe(middleObject.rootObjectId);
+    }, [instanceChanges, fetchMiddleObjectInstances]);
+    const fetchEndObjectInstances = useCallback((searchedName) => {
+        if ((fieldDefinition.objectId &&
+            fieldDefinition.manyToManyPropertyId &&
+            endObjectInstances.length === 0 &&
+            !hasFetched) ||
+            (searchedName !== undefined && searchedName !== '')) {
+            setLoading(true);
+            const endObjectProperty = middleObject.properties?.find((currProperty) => fieldDefinition.manyToManyPropertyId === currProperty.id);
+            if (endObjectProperty?.objectId) {
+                const { propertyId, direction } = layout?.sort ?? {
+                    propertyId: 'name',
+                    direction: 'asc',
+                };
+                const filter = {
+                    limit: 100,
+                    order: `${propertyId} ${direction}`,
+                };
+                let searchCriteria = criteria && !isEmpty(criteria) ? transformToWhere(criteria) : {};
+                if (searchedName?.length) {
+                    const nameCriteria = transformToWhere({
+                        name: {
+                            like: searchedName,
+                            options: 'i',
+                        },
+                    });
+                    searchCriteria = !isEmpty(criteria)
+                        ? {
+                            and: [searchCriteria, nameCriteria],
+                        }
+                        : nameCriteria;
+                }
+                filter.where = searchCriteria;
+                apiServices.get(getPrefixedUrl(`/objects/${endObjectProperty.objectId}/instances`), { params: { filter: JSON.stringify(filter) } }, (error, instances) => {
+                    if (!error && instances) {
+                        setEndObjectInstances(instances);
+                        setHasFetched(true);
+                    }
+                    setInitialLoading(false);
+                    setLoading(false);
+                });
+            }
+        }
+        else if (endObjectInstances.length !== 0) {
+            setInitialLoading(false);
+        }
+    }, [fieldDefinition.objectId, fieldDefinition.manyToManyPropertyId, middleObject]);
+    const debouncedEndObjectSearch = useCallback(debounce(fetchEndObjectInstances, 500), [fetchEndObjectInstances]);
+    useEffect(() => {
+        if (!fetchedOptions[`${fieldDefinition.id}EndObjectInstances`] ||
+            (isArray(fetchedOptions[`${fieldDefinition.id}EndObjectInstances`]) &&
+                fetchedOptions[`${fieldDefinition.id}EndObjectInstances`].length === 0)) {
+            setFetchedOptions({
+                [`${fieldDefinition.id}EndObjectInstances`]: endObjectInstances,
+                [`${fieldDefinition.id}EndObjectInstancesHaveFetched`]: hasFetched,
+            });
+        }
+        if (!fetchedOptions[`${fieldDefinition.id}EndObject`]) {
+            setFetchedOptions({
+                [`${fieldDefinition.id}EndObject`]: endObject,
+            });
+        }
+        if (!isEqual(middleObjectInstances, initialMiddleObjectInstances)) {
+            setFetchedOptions({
+                [`${fieldDefinition.id}MiddleObjectInstances`]: middleObjectInstances,
+            });
+        }
+    }, [endObjectInstances, endObject, middleObjectInstances]);
+    useEffect(() => {
+        const updateFetchedOptions = (key, value) => {
+            if (!fetchedOptions[key]) {
+                setFetchedOptions({ [key]: value });
+            }
+        };
+        updateFetchedOptions(`${fieldDefinition.id}EndObjectInstances`, endObjectInstances);
+        updateFetchedOptions(`${fieldDefinition.id}EndObjectInstancesHaveFetched`, hasFetched);
+        updateFetchedOptions(`${fieldDefinition.id}EndObject`, endObject);
+        if (!isEqual(middleObjectInstances, initialMiddleObjectInstances)) {
+            setFetchedOptions({ [`${fieldDefinition.id}MiddleObjectInstances`]: middleObjectInstances });
+        }
+    }, [
+        endObjectInstances,
+        endObject,
+        middleObjectInstances,
+        fetchedOptions,
+        fieldDefinition.id,
+        hasFetched,
+        initialMiddleObjectInstances,
+        setFetchedOptions,
+    ]);
+    useEffect(() => {
+        debouncedEndObjectSearch(searchValue);
+        return () => debouncedEndObjectSearch.cancel();
+    }, [searchValue, debouncedEndObjectSearch]);
+    useEffect(() => {
+        if (layoutLoaded) {
+            fetchEndObjectInstances();
+        }
+    }, [fetchEndObjectInstances, layoutLoaded]);
+    const saveMiddleInstance = async (endObjectId, endObjectName) => {
+        if (fieldDefinition.objectId) {
+            const middleObject = getMiddleObject(fieldDefinition, endObjectId, endObjectName, instance);
+            try {
+                const newInstance = await apiServices.post(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/instances/actions`), { actionId: `_create`, input: middleObject });
+                setMiddleObjectInstances((prevObjectInstances) => [
+                    ...prevObjectInstances,
+                    newInstance,
+                ]);
+            }
+            catch (err) {
+                setSnackbarError({
+                    showAlert: true,
+                    message: retrieveCustomErrorMessage(err) ??
+                        'An error occurred while adding an instance',
+                    isError: true,
+                });
+                setDropDownSelections(middleObjectInstances);
+            }
+        }
+    };
+    const removeMiddleInstance = async (instanceId) => {
+        try {
+            await apiServices.post(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/instances/${instanceId}/actions`), { actionId: '_delete' });
+            setMiddleObjectInstances((prevInstances) => prevInstances.filter((curr) => curr.id !== instanceId));
+        }
+        catch (err) {
+            setDropDownSelections(middleObjectInstances);
+            setSnackbarError({
+                showAlert: true,
+                message: retrieveCustomErrorMessage(err) ??
+                    'An error occurred while deleting the instance',
+                isError: true,
+            });
+        }
+    };
+    return initialLoading || !middleObject || !middleObjectInstances || !endObjectInstances || !endObject ? (React.createElement(Skeleton, null)) : (React.createElement(React.Fragment, null, middleObjectInstances && endObject && (React.createElement(DropdownRepeatableFieldInput, { id: id, fieldDefinition: fieldDefinition, readOnly: readOnly || !middleObject.actions?.some((action) => action.id === '_create'), layout: layout, middleObjectInstances: middleObjectInstances, endObjectInstances: endObjectInstances ?? [], endObject: endObject, searchValue: searchValue, loading: loading, handleSaveMiddleInstance: saveMiddleInstance, handleRemoveMiddleInstance: removeMiddleInstance, setSearchValue: setSearchValue, setSnackbarError: setSnackbarError, snackbarError: snackbarError, selectedOptions: selectedOptions, setSelectedOptions: setSelectedOptions, setDropdownSelections: setDropDownSelections, fieldHeight: fieldHeight, hasDescription: hasDescription }))));
+};
+export default DropdownRepeatableField;

package/dist/published/components/custom/FormV2/components/FormFieldTypes/CollectionFiles/DropdownRepeatableFieldInput.d.ts

@@ -0,0 +1,40 @@
+import { DropdownViewLayout, InputParameter, Obj, ObjectInstance, Property } from '@evoke-platform/context';
+import React from 'react';
+import { AutocompleteOption } from '../../../../../core';
+type DropdownRepeatableFieldInputProps = {
+    id: string;
+    fieldDefinition: InputParameter | Property;
+    readOnly: boolean;
+    layout?: DropdownViewLayout;
+    middleObjectInstances: ObjectInstance[];
+    endObjectInstances: ObjectInstance[];
+    endObject: Pick<Obj, 'id' | 'name' | 'properties'>;
+    searchValue: string;
+    loading: boolean;
+    fieldHeight?: 'small' | 'medium';
+    handleSaveMiddleInstance: (endObjectId: string, endObjectName: string) => void;
+    handleRemoveMiddleInstance: (instanceId: string) => void;
+    setSearchValue: (value: string) => void;
+    setSelectedOptions: (selectedOptions: DropdownRepeatableFieldInputOption[]) => void;
+    selectedOptions: DropdownRepeatableFieldInputOption[];
+    setSnackbarError: (snackbarError: {
+        showAlert: boolean;
+        message?: string;
+        isError: boolean;
+    }) => void;
+    snackbarError: {
+        showAlert: boolean;
+        message?: string;
+        isError: boolean;
+    };
+    setDropdownSelections?: (middleObjectInstances: ObjectInstance[]) => void;
+    hasDescription?: boolean;
+};
+export type DropdownRepeatableFieldInputOption = AutocompleteOption & {
+    endObjectId: string;
+    middleObjectId?: string;
+    subLabel?: string;
+    hidden?: boolean;
+};
+export declare const DropdownRepeatableFieldInput: (props: DropdownRepeatableFieldInputProps) => React.JSX.Element;
+export default DropdownRepeatableFieldInput;

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

@@ -0,0 +1,95 @@
+import { difference, isEmpty, isObject } from 'lodash';
+import Handlebars from 'no-eval-handlebars';
+import React, { useEffect, useState } from 'react';
+import { Snackbar, TextField, Typography } from '../../../../../core';
+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, middleObjectInstances, endObjectInstances, endObject, searchValue, loading, handleSaveMiddleInstance, handleRemoveMiddleInstance, setSearchValue, selectedOptions, setSnackbarError, snackbarError, setDropdownSelections, fieldHeight, hasDescription, } = props;
+    const [selectOptions, setSelectOptions] = useState([]);
+    useEffect(() => {
+        setDropdownSelections && setDropdownSelections(middleObjectInstances);
+    }, [middleObjectInstances]);
+    useEffect(() => {
+        const manyToManyPropertyId = fieldDefinition.manyToManyPropertyId;
+        if (manyToManyPropertyId) {
+            const enums = endObjectInstances.map((endObjectInstance) => {
+                const normalizedInstance = normalizeDates(endObjectInstance, endObject);
+                return {
+                    label: normalizedInstance.name,
+                    subLabel: layout?.secondaryTextExpression
+                        ? compileExpression(normalizedInstance, layout.secondaryTextExpression)
+                        : undefined,
+                    endObjectId: normalizedInstance.id,
+                    value: undefined,
+                };
+            });
+            setSelectOptions([
+                ...enums,
+                ...selectedOptions
+                    .filter((selectedOption) => !enums.find((availableOption) => availableOption.endObjectId === selectedOption.endObjectId))
+                    .map((option) => ({ ...option, hidden: true })),
+            ]);
+        }
+    }, [endObjectInstances, layout]);
+    const handleChange = (key, newSelectedOptions) => {
+        // Delete middle objects that have been removed
+        // Add middle objects that have been added
+        // You can only really add or remove one value at a time
+        const addedValues = difference(newSelectedOptions, selectedOptions);
+        if (!isEmpty(addedValues)) {
+            addedValues.forEach((newValue) => {
+                if (isDropdownRepeatableFieldInputOption(newValue) &&
+                    fieldDefinition.relatedPropertyId &&
+                    fieldDefinition.manyToManyPropertyId) {
+                    handleSaveMiddleInstance(newValue.endObjectId, newValue.label);
+                }
+            });
+        }
+        const removedValues = difference(selectedOptions, newSelectedOptions);
+        if (!isEmpty(removedValues)) {
+            removedValues.forEach((removedValue) => {
+                if (isObject(removedValue) && removedValue.middleObjectId) {
+                    handleRemoveMiddleInstance(removedValue.middleObjectId);
+                }
+            });
+        }
+    };
+    const compileExpression = (instance, expression) => {
+        const template = Handlebars.compileAST(expression);
+        return template(instance);
+    };
+    return (React.createElement(React.Fragment, null, !readOnly ? (fieldDefinition && (React.createElement(React.Fragment, null,
+        React.createElement(FormField, { id: id, property: {
+                ...fieldDefinition,
+                type: 'array',
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                enum: selectOptions,
+            }, onChange: handleChange, defaultValue: selectedOptions, isOptionEqualToValue: (option, value) => isDropdownRepeatableFieldInputOption(value) &&
+                isDropdownRepeatableFieldInputOption(option) &&
+                option.endObjectId === value.endObjectId, size: fieldHeight, renderOption: (props, option) => {
+                return isObject(props) && isDropdownRepeatableFieldInputOption(option) ? (React.createElement("li", { ...props, key: option.endObjectId },
+                    React.createElement(Typography, null,
+                        option.label,
+                        React.createElement("br", null),
+                        React.createElement(Typography, { variant: "caption", color: "#586069" }, option.subLabel ? option.subLabel : '')))) : null;
+            }, disableCloseOnSelect: true, additionalProps: {
+                filterOptions: (options) => {
+                    return options.filter((option) => !option.hidden);
+                },
+                inputValue: searchValue,
+                renderInput: (params) => (React.createElement(TextField, { ...params, inputProps: {
+                        ...params.inputProps,
+                        ...(hasDescription
+                            ? { 'aria-describedby': `${id}-description` }
+                            : undefined),
+                    }, onChange: (event) => {
+                        setSearchValue(event.target.value);
+                    } })),
+                loading,
+                sortBy: 'NONE',
+            } }),
+        React.createElement(Snackbar, { open: snackbarError.showAlert, handleClose: () => setSnackbarError({ isError: snackbarError.isError, showAlert: false }), message: snackbarError.message, error: snackbarError.isError })))) : (React.createElement(Typography, null, selectedOptions && selectedOptions.map((option) => option.label).join(', ')))));
+};
+export default DropdownRepeatableFieldInput;

package/dist/published/components/custom/FormV2/components/FormFieldTypes/CollectionFiles/RepeatableField.d.ts

@@ -0,0 +1,12 @@
+import { InputParameter, Property, ViewLayoutEntityReference } from '@evoke-platform/context';
+import React from 'react';
+import { FieldValues } from 'react-hook-form';
+export type ObjectPropertyInputProps = {
+    fieldDefinition: InputParameter | Property;
+    instance?: FieldValues;
+    canUpdateProperty: boolean;
+    criteria?: object;
+    viewLayout?: ViewLayoutEntityReference;
+};
+declare const RepeatableField: (props: ObjectPropertyInputProps) => React.JSX.Element;
+export default RepeatableField;

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

@@ -0,0 +1,526 @@
+import { useApiServices, useNotification, } from '@evoke-platform/context';
+import { LocalDateTime } from '@js-joda/core';
+import { get, isEqual, isObject, pick, startCase } from 'lodash';
+import { DateTime } from 'luxon';
+import React, { useCallback, useEffect, useState } from 'react';
+import sift from 'sift';
+import { Edit, ExpandMoreOutlined, TrashCan } from '../../../../../../icons';
+import { useResponsive } from '../../../../../../theme';
+import { useFormContext } from '../../../../../../theme/hooks';
+import { Accordion, AccordionDetails, AccordionSummary, Button, IconButton, Skeleton, Snackbar, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Tooltip, Typography, } from '../../../../../core';
+import { Box } from '../../../../../layout';
+import { getReadableQuery } from '../../../../CriteriaBuilder';
+import { retrieveCustomErrorMessage } from '../../../../Form/utils';
+import { getPrefixedUrl, normalizeDateTime, transformToWhere } from '../../utils';
+import { ActionDialog } from './ActionDialog';
+import { DocumentViewerCell } from './DocumentViewerCell';
+const styles = {
+    addButton: {
+        backgroundColor: '#ebf4f8',
+        boxShadow: 'none',
+        color: '#0075a7',
+        marginTop: '15px',
+        '&:hover': {
+            backgroundColor: '#ebf4f8',
+            color: '#0075a7',
+            boxShadow: 'none',
+        },
+    },
+    tableCell: {
+        color: '#637381',
+        backgroundColor: '#F4F6F8',
+        fontSize: '14px',
+        fontWeight: '700',
+        padding: '8px 20px',
+        whiteSpace: 'nowrap',
+    },
+};
+const RepeatableField = (props) => {
+    const { fieldDefinition, instance, canUpdateProperty, criteria, viewLayout } = props;
+    const { fetchedOptions, setFetchedOptions } = useFormContext();
+    const { instanceChanges } = useNotification();
+    const apiServices = useApiServices();
+    const { smallerThan } = useResponsive();
+    const smallerThanMd = smallerThan('md');
+    const [reloadOnErrorTrigger, setReloadOnErrorTrigger] = useState(true);
+    const [criteriaObjects, setCriteriaObjects] = useState([]);
+    const [selectedRow, setSelectedRow] = 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 [snackbarError, setSnackbarError] = useState({
+        showAlert: false,
+        isError: false,
+    });
+    const DEFAULT_CREATE_ACTION = '_create';
+    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) ?? [];
+        if (tableViewLayout) {
+            objectIds = criteriaProperties
+                .filter((p) => tableViewLayout.properties.some((column) => column.id === p.id))
+                .map((property) => property.objectId);
+        }
+        else {
+            objectIds = criteriaProperties.map((p) => p.objectId);
+        }
+        const objects = [];
+        for (const objectId of new Set(objectIds)) {
+            try {
+                const criteriaObject = await apiServices.get(getPrefixedUrl(`/objects/${objectId}/effective`), {
+                    params: { fields: ['id', 'name', 'properties'] },
+                });
+                objects.push(criteriaObject);
+            }
+            catch (error) {
+                console.error(`Error fetching criteria object with ID ${objectId}:`, error);
+            }
+        }
+        setCriteriaObjects(objects);
+    }, [apiServices, relatedObject, tableViewLayout]);
+    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 (relatedObject?.rootObjectId) {
+            // 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);
+        }
+    }, [instanceChanges, relatedObject]);
+    const retrieveCriteria = (relatedObjProperty, action, object) => {
+        let property;
+        if (action.parameters) {
+            property = action.parameters.find((param) => param.id === relatedObjProperty);
+            return {
+                relatedObjectProperty: property,
+                criteria: property?.validation?.criteria,
+            };
+        }
+        else if (action.inputProperties) {
+            const flattenInputProperties = (entries) => {
+                return entries.reduce((acc, entry) => {
+                    if (entry.components) {
+                        const components = entry.components.flatMap((s) => s.components ?? []);
+                        return acc.concat(flattenInputProperties(components ?? []));
+                    }
+                    else if (entry.columns) {
+                        const components = entry.columns.flatMap((c) => c.components ?? []);
+                        return acc.concat(flattenInputProperties(components ?? []));
+                    }
+                    else if (entry.html) {
+                        return acc;
+                    }
+                    else {
+                        return acc.concat([entry]);
+                    }
+                }, []);
+            };
+            property = flattenInputProperties(action.inputProperties).find((param) => param.key === relatedObjProperty);
+            return {
+                relatedObjectProperty: property,
+                criteria: (property?.validate).criteria,
+            };
+        }
+        else {
+            property = object.properties?.find((prop) => prop.id === relatedObjProperty);
+            return {
+                relatedObjectProperty: property,
+                criteria: property?.validation?.criteria,
+            };
+        }
+    };
+    const checkCreateAccess = (relatedObject) => {
+        if (fieldDefinition.objectId && canUpdateProperty && !fetchedOptions[`${fieldDefinition.id}HasCreateAction`]) {
+            apiServices
+                .get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/instances/checkAccess`), {
+                params: { action: 'execute', field: '_create', scope: 'data' },
+            })
+                .then((checkAccess) => {
+                const action = relatedObject.actions?.find((item) => item.id === '_create');
+                if (action &&
+                    fieldDefinition.relatedPropertyId &&
+                    // TODO: replace with the entries create form or defaultFormId of the
+                    // default create action, keeping it like this to get minimum changes out so other can use it
+                    !!fieldDefinition.createForm) {
+                    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 {
+                    setHasCreateAction(false);
+                }
+            });
+        }
+    };
+    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');
+        setSelectedRow(id);
+        setOpenDialog(true);
+    };
+    const addRow = () => {
+        setDialogType('create');
+        setSelectedRow(undefined);
+        setOpenDialog(true);
+    };
+    const editRow = (id) => {
+        setDialogType('update');
+        setSelectedRow(id);
+        setOpenDialog(true);
+    };
+    const ErrorComponent = () => loading ? (React.createElement("div", null,
+        React.createElement(Typography, { sx: {
+                fontSize: '14px',
+                color: '#727c84',
+            } }, "Loading..."))) : (React.createElement(Typography, { sx: {
+            color: 'rgb(114 124 132)',
+            fontSize: '14px',
+        } },
+        "An error occurred when retrieving this data.",
+        ' ',
+        React.createElement(Button, { sx: {
+                padding: 0,
+                '&:hover': {
+                    backgroundColor: 'transparent',
+                },
+                'min-width': '44px',
+            }, variant: "text", onClick: () => setReloadOnErrorTrigger((prevState) => !prevState) }, "Retry")));
+    const save = async (actionType, input, instanceId) => {
+        // date-time fields are stored in the database in ISO format so convert all
+        // LocalDateTime objects to ISO format.
+        if (isObject(input)) {
+            input = Object.entries(input).reduce((agg, [key, value]) => Object.assign(agg, {
+                [key]: value instanceof LocalDateTime ? normalizeDateTime(value) : value,
+            }), {});
+        }
+        if (actionType === 'create') {
+            const updatedInput = {
+                ...input,
+                [fieldDefinition?.relatedPropertyId]: { id: instance?.id },
+            };
+            try {
+                const instance = await apiServices.post(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/instances/actions`), {
+                    actionId: DEFAULT_CREATE_ACTION,
+                    input: updatedInput,
+                });
+                const hasAccess = fieldDefinition?.relatedPropertyId && fieldDefinition.relatedPropertyId in instance;
+                hasAccess && setRelatedInstances([...relatedInstances, instance]);
+                setOpenDialog(false);
+                setDialogType(undefined);
+                setSelectedRow(undefined);
+            }
+            catch (err) {
+                setSnackbarError({
+                    showAlert: true,
+                    message: retrieveCustomErrorMessage(err) ??
+                        `An error occurred while creating an instance`,
+                    isError: true,
+                });
+            }
+        }
+        else {
+            const relatedObjectId = relatedObject?.id;
+            try {
+                await apiServices.post(getPrefixedUrl(`/objects/${relatedObjectId}/instances/${instanceId}/actions`), {
+                    actionId: `_${actionType}`,
+                    input: pick(input, relatedObject?.properties
+                        ?.filter((property) => !property.formula && property.type !== 'collection')
+                        .map((property) => property.id) ?? []),
+                });
+                if (actionType === 'delete') {
+                    setRelatedInstances((prevInstances) => prevInstances.filter((instance) => instance.id !== instanceId));
+                }
+                else {
+                    setRelatedInstances((prevInstances) => prevInstances.map((i) => (i.id === instance?.id ? instance : i)));
+                }
+                setOpenDialog(false);
+                setDialogType(undefined);
+                setSelectedRow(undefined);
+            }
+            catch (err) {
+                setSnackbarError({
+                    showAlert: true,
+                    message: retrieveCustomErrorMessage(err) ??
+                        `An error occurred while ${actionType === 'delete' ? ' deleting' : ' updating'} an instance`,
+                    isError: true,
+                });
+            }
+        }
+    };
+    const retrieveViewLayout = () => {
+        let properties = [];
+        if (tableViewLayout?.properties?.length) {
+            for (const prop of tableViewLayout.properties) {
+                const propertyId = prop.id.split('.')[0];
+                const property = relatedObject?.properties?.find((p) => p.id === propertyId);
+                if (property) {
+                    if ((property.type === 'object' && property.id !== property.relatedPropertyId) ||
+                        property.type === 'address' ||
+                        property.type === 'user') {
+                        properties.push({
+                            ...property,
+                            id: ['user', 'object'].includes(property.type) && !prop.id.endsWith('.name')
+                                ? `${prop.id}.name`
+                                : prop.id,
+                            name: property.type === 'address'
+                                ? `${property.name} - ${startCase(prop.id.split('.')[1])}`
+                                : property.name,
+                        });
+                    }
+                    else {
+                        properties.push(property);
+                    }
+                }
+            }
+        }
+        else {
+            properties =
+                relatedObject?.properties
+                    ?.filter((prop) => !['address', 'image', 'collection'].includes(prop.type))
+                    .map((prop) => ({
+                    ...prop,
+                    id: prop.type === 'object' || prop.type === 'user' ? `${prop.id}.name` : prop.id,
+                })) ?? [];
+        }
+        return properties;
+    };
+    const columns = retrieveViewLayout();
+    const getValue = (relatedInstance, propertyId, propertyType) => {
+        const value = get(relatedInstance, propertyId);
+        // If the date-like value is empty then there is no need to format.
+        if (!value) {
+            return value;
+        }
+        if (propertyType === 'date') {
+            return DateTime.fromISO(value).toLocaleString(DateTime.DATE_SHORT);
+        }
+        if (propertyType === 'date-time') {
+            return DateTime.fromISO(value).toLocaleString(DateTime.DATETIME_SHORT);
+        }
+        if (propertyType === 'time') {
+            return DateTime.fromISO(value).toLocaleString(DateTime.TIME_SIMPLE);
+        }
+        if (propertyType === 'criteria' && typeof value === 'object') {
+            const property = relatedObject?.properties?.find((p) => p.id === propertyId);
+            return getReadableQuery(value, criteriaObjects.find((o) => o.id === property?.objectId)?.properties ?? []);
+        }
+        return value;
+    };
+    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 ? (!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',
+                    '&:before': {
+                        display: 'none',
+                    },
+                    marginBottom: 0,
+                    '&.Mui-expanded': {
+                        margin: '0px',
+                    },
+                } },
+                React.createElement(AccordionSummary, { sx: {
+                        '&.Mui-expanded': {
+                            borderBottom: '1px solid #dbe0e4',
+                            minHeight: '44px',
+                            borderBottomLeftRadius: '0px',
+                            borderBottomRightRadius: '0px',
+                            margin: '0px',
+                        },
+                        minHeight: '48px',
+                        maxHeight: '48px',
+                        backgroundColor: '#f9fafb',
+                        // MUI accordion summaries have different border radius for the first and last item
+                        borderTopLeftRadius: index === 0 ? '3px' : undefined,
+                        borderTopRightRadius: index === 0 ? '3px' : undefined,
+                        borderBottomRightRadius: index === relatedInstances.length - 1 ? '3px' : undefined,
+                        borderBottomLeftRadius: index === relatedInstances.length - 1 ? '3px' : undefined,
+                    }, expandIcon: React.createElement(ExpandMoreOutlined, { fontSize: "medium" }) },
+                    React.createElement(Box, { sx: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            width: '100%',
+                            justifyContent: 'space-between',
+                        } }, React.createElement(Box, { sx: { display: 'flex', alignItems: 'center', marginY: '10px' } },
+                        React.createElement(Typography, { sx: { fontSize: '16px', fontWeight: '600', lineHight: '24px' } }, getValue(relatedInstance, 'name', 'string'))))),
+                React.createElement(AccordionDetails, null,
+                    React.createElement(Box, null, columns
+                        ?.filter((prop) => prop.id !== 'name')
+                        ?.map((prop) => (React.createElement(Box, { key: prop.id, sx: { mb: 1, display: 'flex', alignItems: 'center' } },
+                        React.createElement(Typography, { component: "span", sx: { color: '#637381', marginRight: '3px' } },
+                            prop.name,
+                            ":"),
+                        prop.type === 'document' ? (React.createElement(DocumentViewerCell, { instance: relatedInstance, propertyId: prop.id, setSnackbarError: setSnackbarError })) : (React.createElement(Typography, null,
+                            getValue(relatedInstance, prop.id, prop.type),
+                            prop.type === 'user' &&
+                                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) },
+                            React.createElement(Tooltip, { title: "Edit" },
+                                React.createElement(Edit, null))),
+                        React.createElement(IconButton, { onClick: () => deleteRow(relatedInstance.id) },
+                            React.createElement(Tooltip, { title: "Delete" },
+                                React.createElement(TrashCan, { sx: { ':hover': { color: '#A12723' } } }))))))))))) : (React.createElement(TableContainer, { sx: {
+                    borderRadius: '6px',
+                    border: '1px solid #919EAB3D',
+                    boxShadow: 'none',
+                    maxHeight: '70vh',
+                } },
+                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)),
+                            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) => {
+                            return (React.createElement(TableCell, { sx: { fontSize: '16px' } }, prop.type === 'document' ? (React.createElement(DocumentViewerCell, { instance: relatedInstance, propertyId: prop.id, setSnackbarError: setSnackbarError })) : (React.createElement(Typography, { key: prop.id, sx: prop.id === 'name'
+                                    ? {
+                                        '&:hover': {
+                                            textDecoration: 'underline',
+                                            cursor: 'pointer',
+                                        },
+                                    }
+                                    : {}, onClick: !!fieldDefinition.updatedForm && // TODO: replace with the entries update form
+                                    canUpdateProperty &&
+                                    prop.id === 'name'
+                                    ? () => editRow(relatedInstance.id)
+                                    : undefined },
+                                getValue(relatedInstance, prop.id, prop.type),
+                                prop.type === 'user' &&
+                                    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' } },
+                            !!fieldDefinition.updateForm && ( // TODO: replace with the entries update form
+                            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) },
+                                React.createElement(Tooltip, { title: "Delete" },
+                                    React.createElement(TrashCan, { sx: { ':hover': { color: '#A12723' } } })))))))))))),
+            hasCreateAction && (React.createElement(Button, { variant: "contained", sx: styles.addButton, onClick: addRow, "aria-label": 'Add' }, "Add"))),
+        relatedObject && openDialog && (React.createElement(ActionDialog, { object: relatedObject, open: openDialog, onClose: () => setOpenDialog(false), instanceInput: relatedInstances.find((i) => i.id === selectedRow) ?? {}, handleSubmit: save, action: relatedObject?.actions?.find((a) => a.id ===
+                (dialogType === 'create' ? '_create' : dialogType === 'update' ? '_update' : '_delete')), instanceId: selectedRow, relatedParameter: fieldDefinition })),
+        React.createElement(Snackbar, { open: snackbarError.showAlert, handleClose: () => setSnackbarError({ isError: snackbarError.isError, showAlert: false }), message: snackbarError.message, error: snackbarError.isError })));
+};
+export default RepeatableField;

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

@@ -1,4 +1,4 @@
-import { Columns, FormEntry, Property, Sections } from '@evoke-platform/context';
+import { Columns, FormEntry, InputParameter, Obj, ObjectInstance, Property, Sections } from '@evoke-platform/context';
 import { LocalDateTime } from '@js-joda/core';
 import { FieldValues } from 'react-hook-form';
 import { AutocompleteOption } from '../../../core';
@@ -20,3 +20,16 @@ export declare const getEntryId: (entry: FormEntry) => string | undefined;
 export declare function getPrefixedUrl(url: string): string;
 export declare const isOptionEqualToValue: (option: AutocompleteOption | string, value: unknown) => boolean;
 export declare function addressProperties(addressProperty: Property): Property[];
+export declare const normalizeDates: (instance: ObjectInstance, evokeObject?: Obj) => ObjectInstance;
+export declare const transformToWhere: (mongoQuery: Record<string, unknown>) => Record<string, unknown>;
+export declare const getMiddleObject: (fieldDefinition: InputParameter | Property, endObjectId: string, endObjectName: string, instance?: FieldValues) => {
+    [x: string]: {
+        id: any;
+        name: any;
+    };
+} | undefined;
+export declare const getMiddleObjectFilter: (fieldDefinition: InputParameter | Property, instanceId: string) => {
+    where: {
+        [x: string]: string;
+    };
+};

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

@@ -1,6 +1,7 @@
 import { LocalDateTime } from '@js-joda/core';
 import jsonLogic from 'json-logic-js';
-import { get, isArray, isObject } from 'lodash';
+import { get, isArray, isObject, transform } from 'lodash';
+import { DateTime } from 'luxon';
 export const scrollIntoViewWithOffset = (el, offset, container) => {
     const elementRect = el.getBoundingClientRect();
     const containerRect = container ? container.getBoundingClientRect() : document.body.getBoundingClientRect();
@@ -170,3 +171,79 @@ export function addressProperties(addressProperty) {
         },
     ];
 }
+export const normalizeDates = (instance, evokeObject) => {
+    const dateProps = ['date', 'date-time', 'time'];
+    const properties = evokeObject?.properties
+        ?.filter((property) => dateProps.includes(property.type))
+        .reduce((agg, property) => Object.assign(agg, { [property.id]: property.type }), {}) ?? {};
+    const propKeys = Object.keys(properties);
+    const updatedInstance = { ...instance };
+    Object.keys(instance).forEach((key) => {
+        // Ignore non-datelike and empty fields.
+        if (!propKeys.includes(key) || !instance[key]) {
+            return;
+        }
+        switch (properties[key]) {
+            case 'date':
+                // Casting here is valid because the value has already been
+                // determined to be a datelike field that is non-empty.
+                updatedInstance[key] = DateTime.fromISO(instance[key]).toLocaleString(DateTime.DATE_SHORT);
+                break;
+            case 'date-time':
+                // Casting here is valid because the value has already been
+                // determined to be a datelike field that is non-empty.
+                updatedInstance[key] = DateTime.fromISO(instance[key]).toLocaleString(DateTime.DATETIME_SHORT);
+                break;
+            case 'time':
+                // Casting here is valid because the value has already been
+                // determined to be a datelike field that is non-empty.
+                updatedInstance[key] = DateTime.fromISO(instance[key]).toLocaleString(DateTime.TIME_SIMPLE);
+                break;
+        }
+    });
+    return updatedInstance;
+};
+const OPERATOR_MAP = {
+    $and: 'and',
+    $or: 'or',
+    $eq: 'eq',
+    $ne: 'neq',
+    $lt: 'lt',
+    $lte: 'lte',
+    $gt: 'gt',
+    $gte: 'gte',
+    $in: 'inq',
+    $nin: 'nin',
+    $regex: 'regexp',
+    $exists: 'exists',
+    $not: 'not',
+};
+export const transformToWhere = (mongoQuery) => {
+    return transform(mongoQuery, (result, value, key) => {
+        const newKey = typeof key === 'string' && key.startsWith('$') ? OPERATOR_MAP[key] : key;
+        if (newKey === undefined) {
+            throw new Error(`Unsupported operator ${key}`);
+        }
+        result[newKey] = isObject(value) ? transformToWhere(value) : value;
+    });
+};
+export const getMiddleObject = (fieldDefinition, endObjectId, endObjectName, instance) => {
+    if (fieldDefinition.relatedPropertyId && fieldDefinition.manyToManyPropertyId) {
+        const middleObject = {
+            [fieldDefinition.relatedPropertyId]: {
+                id: instance?.id,
+                name: instance?.name,
+            },
+            [fieldDefinition.manyToManyPropertyId]: {
+                id: endObjectId,
+                name: endObjectName,
+            },
+        };
+        return middleObject;
+    }
+};
+export const getMiddleObjectFilter = (fieldDefinition, instanceId) => {
+    const filterProperty = `${fieldDefinition.relatedPropertyId}.id`;
+    const filter = { where: { [filterProperty]: instanceId } };
+    return filter;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.6.0-dev.19",
+    "version": "1.6.0-dev.20",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",
@@ -87,7 +87,7 @@
         "yalc": "^1.0.0-pre.53"
     },
     "peerDependencies": {
-        "@evoke-platform/context": "^1.3.0-0",
+        "@evoke-platform/context": "^1.3.0-dev.6",
         "react": "^18.1.0",
         "react-dom": "^18.1.0"
     },