@evoke-platform/ui-components 1.6.0-testing.9 → 1.6.0

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/FormFieldTypes/Criteria.d.ts

@@ -0,0 +1,12 @@
+import { InputParameter, Property } from '@evoke-platform/context';
+import React from 'react';
+type CriteriaProps = {
+    fieldDefinition: InputParameter | Property;
+    value?: CriteriaValue | null;
+    handleChange: (propertyId: string, value: CriteriaValue | null) => void;
+    canUpdateProperty: boolean;
+    error?: boolean;
+};
+type CriteriaValue = Record<string, unknown>;
+export default function Criteria(props: CriteriaProps): React.JSX.Element;
+export {};

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

@@ -0,0 +1,93 @@
+import { useApiServices } from '@evoke-platform/context';
+import React, { useCallback, useEffect, useState } from 'react';
+import { useFormContext } from '../../../../../theme/hooks';
+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 { handleChange, value, canUpdateProperty, fieldDefinition, error } = props;
+    const apiServices = useApiServices();
+    const { fetchedOptions, setFetchedOptions } = 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 (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);
+                }
+                setLoading(false);
+            });
+        }
+    }, [fieldDefinition.objectId, apiServices]);
+    useEffect(() => {
+        fetchProperties();
+    }, [fetchProperties]);
+    const handleUpdate = (criteria) => {
+        if (criteria || value) {
+            handleChange(fieldDefinition.id, criteria ?? null);
+        }
+    };
+    if (loadingError) {
+        return (React.createElement(Box, { sx: { display: 'flex', alignItems: 'center' } },
+            React.createElement(Typography, { sx: { color: 'rgb(114 124 132)', fontSize: '14px', paddingLeft: '10px' } }, "An error occurred when retrieving data needed for this criteria."),
+            React.createElement(Button, { sx: {
+                    padding: 0,
+                    '&:hover': { backgroundColor: 'transparent' },
+                    minWidth: '44px',
+                }, variant: "text", onClick: fetchProperties, disabled: loading }, "Retry"),
+            loading && React.createElement(CircularProgress, { size: 20, sx: { paddingLeft: '10px' } })));
+    }
+    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: [
+                {
+                    label: 'Current Date',
+                    value: { name: '{{{currentDate}}}', label: 'Current Date' },
+                    type: 'date',
+                },
+                {
+                    label: 'Current Time',
+                    value: { name: '{{{currentTime}}}', label: 'Current Time' },
+                    type: 'time',
+                },
+                {
+                    label: 'Current Date Time',
+                    value: { name: '{{{currentDateTime}}}', label: 'Current Date Time' },
+                    type: 'date-time',
+                },
+            ], enablePresetValues: true }))) : (React.createElement(Typography, { variant: "body2", sx: { color: '#637381' } }, "No criteria"));
+}

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

@@ -0,0 +1,16 @@
+import { DocumentValidation } from '@evoke-platform/context';
+import React from 'react';
+import { FieldValues } from 'react-hook-form';
+import { SavedDocumentReference } from '../../types';
+type DocumentProps = {
+    id: string;
+    handleChange: (propertyId: string, value: (File | SavedDocumentReference)[] | undefined) => void;
+    instance?: FieldValues;
+    canUpdateProperty: boolean;
+    error: boolean;
+    validate?: DocumentValidation;
+    value: (File | SavedDocumentReference)[] | undefined;
+    hasDescription?: boolean;
+};
+export declare const Document: (props: DocumentProps) => React.JSX.Element;
+export {};