@evoke-platform/ui-components 1.0.0-dev.217 → 1.0.0-dev.218

package/dist/published/components/custom/Form/FormComponents/ObjectComponent/ObjectPropertyInput.js

@@ -0,0 +1,306 @@
+import cleanDeep from 'clean-deep';
+import Handlebars from 'handlebars';
+import { cloneDeep, debounce, isEmpty, isNil, pick } from 'lodash';
+import React, { useCallback, useEffect, useState } from 'react';
+import { Close } from '../../../../../icons';
+import { Autocomplete, Button, Dialog, IconButton, Link, Paper, TextField, Tooltip, Typography, } from '../../../../core';
+import { Box } from '../../../../layout';
+import { getPrefixedUrl, normalizeDates, transformToWhere } from '../../utils';
+import { RelatedObjectInstance } from './RelatedObjectInstance';
+export const ObjectPropertyInput = (props) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+    const { id, instance, property, apiServices, defaultPages, handleChangeObjectProperty, nestedFieldsView, canUpdateProperty, error, navigateTo, mode, displayOption, filter, defaultValueCriteria, sortBy, orderBy, setSnackbarError, isModal, user, } = props;
+    const [relatedObject, setRelatedObject] = useState();
+    const [openCreateDialog, setOpenCreateDialog] = useState(false);
+    const [selectedInstance, setSelectedInstance] = useState();
+    const [dropdownInput, setDropdownInput] = useState();
+    const [loadingOptions, setLoadingOptions] = useState(false);
+    const [options, setOptions] = useState([]);
+    const [openOptions, setOpenOptions] = useState(false);
+    const DEFAULT_CREATE_ACTION = '_create';
+    useEffect(() => {
+        var _a;
+        if (!isEmpty(defaultValueCriteria) && !selectedInstance && !instance[property.id]) {
+            const updatedFilter = cleanDeep({
+                where: transformToWhere({ $and: [defaultValueCriteria, (_a = filter === null || filter === void 0 ? void 0 : filter.where) !== null && _a !== void 0 ? _a : {}] }),
+                order: orderBy && sortBy ? encodeURIComponent(sortBy + ' ' + orderBy) : undefined,
+                limit: 1,
+            });
+            if (updatedFilter.where) {
+                setLoadingOptions(true);
+                apiServices.get(getPrefixedUrl(`/objects/${property.objectId}/instances?filter=${encodeURIComponent(JSON.stringify(updatedFilter))}`), (error, instances) => {
+                    if (error) {
+                        console.error(error);
+                        setLoadingOptions(false);
+                    }
+                    if (instances) {
+                        setSelectedInstance(instances[0]);
+                        handleChangeObjectProperty(property.id, { id: instances[0].id, name: instances[0].name });
+                    }
+                    setLoadingOptions(false);
+                });
+            }
+        }
+    }, [property, defaultValueCriteria, sortBy, orderBy, apiServices]);
+    const getDropdownOptions = useCallback((name) => {
+        setLoadingOptions(true);
+        let updatedFilter = cloneDeep(filter);
+        if (!updatedFilter) {
+            updatedFilter = {};
+        }
+        updatedFilter.limit = 100;
+        updatedFilter.order = 'name ASC';
+        const where = name
+            ? transformToWhere({
+                name: {
+                    like: name,
+                    options: 'i',
+                },
+            })
+            : {};
+        updatedFilter.where = updatedFilter.where
+            ? {
+                and: [updatedFilter.where, where],
+            }
+            : where;
+        apiServices.get(getPrefixedUrl(`/objects/${property.objectId}/instances?filter=${JSON.stringify(updatedFilter)}`), (error, instances) => {
+            if (error) {
+                console.error(error);
+                setLoadingOptions(false);
+            }
+            if (instances) {
+                normalizeDates(instances, relatedObject);
+                setOptions(instances);
+                setLoadingOptions(false);
+            }
+        });
+    }, [relatedObject, setLoadingOptions, setOptions, property, filter]);
+    useEffect(() => {
+        if (displayOption === 'dropdown') {
+            getDropdownOptions();
+        }
+    }, [property, filter, displayOption, getDropdownOptions]);
+    const debouncedGetDropdownOptions = useCallback(debounce(getDropdownOptions, 500), [
+        filter,
+        property,
+        getDropdownOptions,
+    ]);
+    useEffect(() => {
+        debouncedGetDropdownOptions(dropdownInput);
+        return () => debouncedGetDropdownOptions.cancel();
+    }, [dropdownInput, debouncedGetDropdownOptions]);
+    useEffect(() => {
+        apiServices.get(getPrefixedUrl(`/objects/${property.objectId}/effective?sanitizedVersion=true`), (error, object) => {
+            if (error) {
+                console.error(error);
+            }
+            else {
+                setRelatedObject(object);
+            }
+        });
+    }, [property]);
+    const handleClose = () => {
+        setOpenCreateDialog(false);
+    };
+    const compileExpression = (expression, instance) => {
+        const template = Handlebars.compile(expression);
+        return instance ? template(instance) : undefined;
+    };
+    const navigationSlug = defaultPages && property.objectId && defaultPages[property.objectId];
+    return (React.createElement(React.Fragment, null,
+        displayOption === 'dropdown' ? (React.createElement(React.Fragment, null,
+            React.createElement(Autocomplete, { id: id, fullWidth: true, open: openOptions, componentsProps: {
+                    popper: {
+                        modifiers: [
+                            {
+                                name: 'flip',
+                                enabled: false,
+                            },
+                        ],
+                    },
+                }, PaperComponent: ({ children }) => {
+                    var _a;
+                    return (React.createElement(Paper, { sx: {
+                            borderRadius: '12px',
+                            boxShadow: '0px 24px 48px 0px rgba(145, 158, 171, 0.2)',
+                            '& .MuiAutocomplete-listbox': {
+                                maxHeight: '25vh',
+                            },
+                            '& .MuiAutocomplete-noOptions': {
+                                fontFamily: 'sans-serif',
+                                fontSize: '14px',
+                                paddingLeft: '24px',
+                                color: 'rgba(145, 158, 171, 1)',
+                            },
+                            '& .MuiAutocomplete-loading': {
+                                fontFamily: 'sans-serif',
+                                fontSize: '14px',
+                                paddingLeft: '24px',
+                                color: 'rgba(145, 158, 171, 1)',
+                            },
+                        } },
+                        children,
+                        mode !== 'existingOnly' &&
+                            ((_a = relatedObject === null || relatedObject === void 0 ? void 0 : relatedObject.actions) === null || _a === void 0 ? void 0 : _a.some((a) => a.id === DEFAULT_CREATE_ACTION)) && (React.createElement(Button, { fullWidth: true, sx: {
+                                justifyContent: 'flex-start',
+                                pl: 2,
+                                minHeight: '48px',
+                                borderTop: '1px solid rgba(145, 158, 171, 0.24)',
+                                borderRadius: '0p 0pc 6px 6px',
+                                paddingLeft: '22px',
+                                fontWeight: 400,
+                            }, onMouseDown: (e) => {
+                                setOpenCreateDialog(true);
+                            }, color: 'inherit' }, "+ Add New"))));
+                }, sx: {
+                    '& button.MuiButtonBase-root': Object.assign({}, (!loadingOptions &&
+                        (((_a = instance === null || instance === void 0 ? void 0 : instance[property.id]) === null || _a === void 0 ? void 0 : _a.id) || (selectedInstance === null || selectedInstance === void 0 ? void 0 : selectedInstance.id))
+                        ? {
+                            visibility: 'visible',
+                        }
+                        : {})),
+                }, noOptionsText: 'No options available', renderOption: (props, option) => {
+                    var _a, _b, _c, _d;
+                    return (React.createElement("li", Object.assign({}, props, { key: option.id }),
+                        React.createElement(Box, null,
+                            React.createElement(Typography, { sx: { marginLeft: '8px', fontSize: '14px' } }, option.label),
+                            ((_b = (_a = relatedObject === null || relatedObject === void 0 ? void 0 : relatedObject.viewLayout) === null || _a === void 0 ? void 0 : _a.dropdown) === null || _b === void 0 ? void 0 : _b.secondaryTextExpression) ? (React.createElement(Typography, { sx: { marginLeft: '8px', fontSize: '14px', color: '#637381' } }, compileExpression((_d = (_c = relatedObject === null || relatedObject === void 0 ? void 0 : relatedObject.viewLayout) === null || _c === void 0 ? void 0 : _c.dropdown) === null || _d === void 0 ? void 0 : _d.secondaryTextExpression, options.find((o) => o.id === option.value)))) : null)));
+                }, onOpen: () => {
+                    var _a;
+                    if (((_a = instance === null || instance === void 0 ? void 0 : instance[property.id]) === null || _a === void 0 ? void 0 : _a.id) || (selectedInstance === null || selectedInstance === void 0 ? void 0 : selectedInstance.id)) {
+                        setOpenOptions(false);
+                    }
+                    else {
+                        setOpenOptions(true);
+                    }
+                }, onClose: () => setOpenOptions(false), value: ((_b = instance === null || instance === void 0 ? void 0 : instance[property.id]) === null || _b === void 0 ? void 0 : _b.id) || (selectedInstance === null || selectedInstance === void 0 ? void 0 : selectedInstance.id)
+                    ? {
+                        value: (_e = (_d = (_c = instance === null || instance === void 0 ? void 0 : instance[property.id]) === null || _c === void 0 ? void 0 : _c.id) !== null && _d !== void 0 ? _d : selectedInstance === null || selectedInstance === void 0 ? void 0 : selectedInstance.id) !== null && _e !== void 0 ? _e : '',
+                        label: (_h = (_g = (_f = instance === null || instance === void 0 ? void 0 : instance[property.id]) === null || _f === void 0 ? void 0 : _f.name) !== null && _g !== void 0 ? _g : selectedInstance === null || selectedInstance === void 0 ? void 0 : selectedInstance.name) !== null && _h !== void 0 ? _h : '',
+                    }
+                    : null, isOptionEqualToValue: (option, value) => {
+                    if (typeof value === 'string') {
+                        return option.value === value;
+                    }
+                    return option.value === (value === null || value === void 0 ? void 0 : value.value);
+                }, options: options.map((o) => ({ label: o.name, value: o.id })), getOptionLabel: (option) => {
+                    var _a, _b;
+                    return typeof option === 'string'
+                        ? (_b = (_a = options.find((o) => o.id === option)) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : ''
+                        : option.label;
+                }, onKeyDownCapture: (e) => {
+                    var _a;
+                    if (((_a = instance === null || instance === void 0 ? void 0 : instance[property.id]) === null || _a === void 0 ? void 0 : _a.id) || (selectedInstance === null || selectedInstance === void 0 ? void 0 : selectedInstance.id)) {
+                        e.preventDefault();
+                    }
+                }, loading: loadingOptions, onChange: (event, value) => {
+                    if (isNil(value)) {
+                        setDropdownInput(undefined); // refresh search options
+                        setSelectedInstance(undefined);
+                        handleChangeObjectProperty(property.id, null);
+                    }
+                    else {
+                        const selectedInstance = options.find((o) => o.id === (value === null || value === void 0 ? void 0 : value.value));
+                        setSelectedInstance(selectedInstance);
+                        handleChangeObjectProperty(property.id, pick(selectedInstance, 'id', 'name'));
+                    }
+                }, selectOnFocus: false, onBlur: () => setDropdownInput(undefined), renderInput: (params) => {
+                    var _a, _b;
+                    return (React.createElement(TextField, Object.assign({}, params, { placeholder: 'Select', readOnly: !loadingOptions &&
+                            !!(((_a = instance === null || instance === void 0 ? void 0 : instance[property.id]) === null || _a === void 0 ? void 0 : _a.id) ||
+                                (selectedInstance === null || selectedInstance === void 0 ? void 0 : selectedInstance.id)), onChange: (event) => setDropdownInput(event.target.value), onClick: (e) => {
+                            var _a, _b, _c, _d, _e, _f, _g;
+                            if (navigationSlug &&
+                                ['DIV', 'INPUT'].includes((_a = e.target) === null || _a === void 0 ? void 0 : _a.nodeName) &&
+                                (((_b = instance === null || instance === void 0 ? void 0 : instance[property.id]) === null || _b === void 0 ? void 0 : _b.id) ||
+                                    (selectedInstance === null || selectedInstance === void 0 ? void 0 : selectedInstance.id))) {
+                                navigateTo &&
+                                    navigateTo(navigationSlug.replace(':instanceId', (_e = (_d = (_c = instance === null || instance === void 0 ? void 0 : instance[property.id]) === null || _c === void 0 ? void 0 : _c.id) !== null && _d !== void 0 ? _d : selectedInstance === null || selectedInstance === void 0 ? void 0 : selectedInstance.id) !== null && _e !== void 0 ? _e : ''));
+                            }
+                            if (openOptions &&
+                                ((_f = e.target) === null || _f === void 0 ? void 0 : _f.nodeName) === 'svg') {
+                                setOpenOptions(false);
+                            }
+                            else if (!['DIV', 'INPUT'].includes((_g = e.target) === null || _g === void 0 ? void 0 : _g.nodeName) &&
+                                !selectedInstance) {
+                                setOptions(options);
+                                setOpenOptions(true);
+                            }
+                        }, sx: Object.assign({}, (!loadingOptions &&
+                            (((_b = instance === null || instance === void 0 ? void 0 : instance[property.id]) === null || _b === void 0 ? void 0 : _b.id) ||
+                                (selectedInstance === null || selectedInstance === void 0 ? void 0 : selectedInstance.id))
+                            ? {
+                                '.MuiOutlinedInput-root': {
+                                    background: 'white',
+                                    border: 'auto',
+                                    '.MuiOutlinedInput-input': Object.assign({}, (navigationSlug
+                                        ? {
+                                            color: 'rgb(1, 78, 123)',
+                                            textDecoration: 'underline',
+                                            cursor: 'pointer',
+                                        }
+                                        : {})),
+                                },
+                                '& fieldset': { borderColor: 'auto' },
+                                '&:hover .MuiOutlinedInput-notchedOutline': {
+                                    border: 'auto',
+                                },
+                                caretColor: 'white',
+                            }
+                            : {})) })));
+                }, readOnly: !loadingOptions && !canUpdateProperty, error: error }))) : (React.createElement(Box, { sx: {
+                padding: ((_k = (_j = instance === null || instance === void 0 ? void 0 : instance[property.id]) === null || _j === void 0 ? void 0 : _j.name) !== null && _k !== void 0 ? _k : selectedInstance === null || selectedInstance === void 0 ? void 0 : selectedInstance.name)
+                    ? '16.5px 14px'
+                    : '10.5px 0',
+            } },
+            ((_o = (_m = (_l = instance === null || instance === void 0 ? void 0 : instance[property.id]) === null || _l === void 0 ? void 0 : _l.name) !== null && _m !== void 0 ? _m : selectedInstance === null || selectedInstance === void 0 ? void 0 : selectedInstance.name) !== null && _o !== void 0 ? _o : '') && (React.createElement(Link, { sx: {
+                    textDecoration: 'none',
+                    marginRight: 1,
+                    textDecorationLine: navigationSlug && (instance === null || instance === void 0 ? void 0 : instance[property.id]) && !isModal ? 'underline' : 'none',
+                    cursor: navigationSlug && (instance === null || instance === void 0 ? void 0 : instance[property.id]) && !isModal ? 'pointer' : 'auto',
+                    fontSize: '16px',
+                    fontWeight: 400,
+                    lineHeight: '24px',
+                    textAlign: 'left',
+                    color: navigationSlug && (instance === null || instance === void 0 ? void 0 : instance[property.id]) && !isModal ? '#0075A7' : '#212B36',
+                }, variant: "body2", href: navigationSlug && (instance === null || instance === void 0 ? void 0 : instance[property.id]) && !isModal
+                    ? `${process.env.REACT_APP_API_ROOT ? '' : '/app'}${navigationSlug.replace(':instanceId', (_r = (_q = (_p = instance === null || instance === void 0 ? void 0 : instance[property.id]) === null || _p === void 0 ? void 0 : _p.id) !== null && _q !== void 0 ? _q : selectedInstance === null || selectedInstance === void 0 ? void 0 : selectedInstance.id) !== null && _r !== void 0 ? _r : '')}`
+                    : undefined, "aria-label": (_t = (_s = instance === null || instance === void 0 ? void 0 : instance[property.id]) === null || _s === void 0 ? void 0 : _s.name) !== null && _t !== void 0 ? _t : selectedInstance === null || selectedInstance === void 0 ? void 0 : selectedInstance.name }, (_w = (_v = (_u = instance === null || instance === void 0 ? void 0 : instance[property.id]) === null || _u === void 0 ? void 0 : _u.name) !== null && _v !== void 0 ? _v : selectedInstance === null || selectedInstance === void 0 ? void 0 : selectedInstance.name) !== null && _w !== void 0 ? _w : '')),
+            canUpdateProperty &&
+                ((instance === null || instance === void 0 ? void 0 : instance[property.id]) || selectedInstance || (nestedFieldsView && (instance === null || instance === void 0 ? void 0 : instance.id))) ? (React.createElement(Tooltip, { title: `Unlink` },
+                React.createElement("span", null,
+                    React.createElement(IconButton, { onClick: (event) => {
+                            event.stopPropagation();
+                            handleChangeObjectProperty(property.id, null);
+                            setSelectedInstance(undefined);
+                        }, sx: { p: 0, marginBottom: '4px' }, "aria-label": `Unlink` },
+                        React.createElement(Close, { sx: { width: '20px', height: '20px' } }))))) : (React.createElement(Button, { sx: {
+                    backgroundColor: '#DFE3E8',
+                    color: '#212B36',
+                    fontWeight: '700',
+                    textTransform: 'capitalize',
+                    '&:hover': {
+                        backgroundColor: '#e6eaf0',
+                        boxShadow: 'none',
+                    },
+                    '&:disabled': {
+                        cursor: 'not-allowed',
+                        pointerEvents: 'all',
+                    },
+                    boxShadow: 'none',
+                    lineHeight: '2.75',
+                    padding: '0 23px',
+                }, size: "small", variant: "contained", disableElevation: true, onClick: (event) => {
+                    event.stopPropagation();
+                    setOpenCreateDialog(true);
+                }, "aria-label": `Add`, disabled: !canUpdateProperty }, "Add")))),
+        openCreateDialog && (React.createElement(React.Fragment, null, nestedFieldsView ? (React.createElement(RelatedObjectInstance, { apiServices: apiServices, handleClose: handleClose, handleChangeObjectProperty: handleChangeObjectProperty, instance: instance, setSelectedInstance: setSelectedInstance, relatedObject: relatedObject, property: property, nestedFieldsView: nestedFieldsView, mode: mode, setSnackbarError: setSnackbarError, displayOption: displayOption, setOptions: setOptions, options: options, filter: filter, user: user })) : (React.createElement(Dialog, { fullWidth: true, maxWidth: "md", open: openCreateDialog, onClose: (e, reason) => reason !== 'backdropClick' && handleClose },
+            React.createElement(Typography, { sx: {
+                    marginTop: '28px',
+                    fontSize: '22px',
+                    fontWeight: 700,
+                    marginLeft: '24px',
+                    marginBottom: '10px',
+                } }, `Add ${property.name}`),
+            React.createElement(RelatedObjectInstance, { apiServices: apiServices, handleClose: handleClose, handleChangeObjectProperty: handleChangeObjectProperty, instance: instance, setSnackbarError: setSnackbarError, setSelectedInstance: setSelectedInstance, nestedFieldsView: nestedFieldsView, relatedObject: relatedObject, property: property, mode: mode, displayOption: displayOption, setOptions: setOptions, options: options, filter: filter, user: user })))))));
+};

package/dist/published/components/custom/Form/FormComponents/ObjectComponent/RelatedObjectInstance.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { ApiServices, Obj, ObjectInstance, Property, Reference, UserAccount } from '@evoke-platform/context';
+export declare type RelatedObjectInstanceProps = {
+    relatedObject?: Obj;
+    property: Property;
+    apiServices: ApiServices;
+    setSelectedInstance: (selectedInstance: ObjectInstance) => void;
+    handleChangeObjectProperty: (propertyId: string, instance?: Reference | null) => void;
+    instance: ObjectInstance;
+    handleClose: () => void;
+    mode: 'default' | 'existingOnly';
+    setSnackbarError?: (snackbarError: {
+        showAlert: boolean;
+        message?: string;
+        isError?: boolean;
+    }) => void;
+    nestedFieldsView?: boolean;
+    displayOption?: 'dropdown' | 'dialogBox';
+    setOptions: (options: ObjectInstance[]) => void;
+    options: ObjectInstance[];
+    filter?: Record<string, unknown>;
+    user?: UserAccount;
+};
+export declare const RelatedObjectInstance: (props: RelatedObjectInstanceProps) => JSX.Element;

package/dist/published/components/custom/Form/FormComponents/ObjectComponent/RelatedObjectInstance.js

@@ -0,0 +1,126 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { useAuthenticationContext, } from '@evoke-platform/context';
+import { LocalDateTime } from '@js-joda/core';
+import { isObject, pick } from 'lodash';
+import React, { useState } from 'react';
+import { InfoRounded } from '../../../../../icons';
+import { Alert, Button, FormControlLabel, Radio, RadioGroup } from '../../../../core';
+import { Box, Grid } from '../../../../layout';
+import { Form } from '../../../Form';
+import { getPrefixedUrl, normalizeDateTime, normalizeDates } from '../../utils';
+import { InstanceLookup } from './InstanceLookup';
+const styles = {
+    actionButtons: {
+        padding: '8px 8px 24px 8px',
+        marginRight: '18px',
+        marginBotton: '16px',
+        display: 'flex',
+        justifyContent: 'flex-end',
+        alignItems: 'center',
+    },
+};
+const DEFAULT_CREATE_ACTION = '_create';
+export const RelatedObjectInstance = (props) => {
+    var _a;
+    const { relatedObject, property, setSelectedInstance, handleChangeObjectProperty, handleClose, apiServices, setSnackbarError, nestedFieldsView, mode, displayOption, setOptions, options, filter, user, } = props;
+    const [relationType, setRelationType] = useState(displayOption === 'dropdown' ? 'new' : 'existing');
+    const [selectedRow, setSelectedRow] = useState();
+    const [errors, setErrors] = useState([]);
+    const userAccount = user !== null && user !== void 0 ? user : (_a = useAuthenticationContext()) === null || _a === void 0 ? void 0 : _a.account;
+    const linkExistingInstance = () => __awaiter(void 0, void 0, void 0, function* () {
+        if (selectedRow) {
+            setSelectedInstance(selectedRow);
+            handleChangeObjectProperty(property.id, pick(selectedRow, 'id', 'name'));
+        }
+        onClose();
+    });
+    const queryAddresses = (query) => __awaiter(void 0, void 0, void 0, function* () {
+        return yield apiServices.get(getPrefixedUrl(`/locations/search`), {
+            params: { query: query },
+        });
+    });
+    const onClose = () => {
+        handleClose();
+        setErrors([]);
+    };
+    const createNewInstance = (submission) => __awaiter(void 0, void 0, void 0, function* () {
+        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        if (!relatedObject) {
+            // Handle the case where relatedObject is undefined
+            return { isSuccessful: false };
+        }
+        let isSuccessful = false;
+        let error;
+        if (isObject(submission)) {
+            // date-time fields are stored in the database in ISO format so convert all
+            // LocalDateTime objects to ISO format.
+            submission = Object.entries(submission).reduce((agg, [key, value]) => Object.assign(agg, {
+                [key]: value instanceof LocalDateTime ? normalizeDateTime(value) : value,
+            }), {});
+        }
+        try {
+            const instance = yield apiServices.post(getPrefixedUrl(`/objects/${relatedObject.id}/instances/actions`), {
+                actionId: DEFAULT_CREATE_ACTION,
+                input: submission,
+            });
+            handleChangeObjectProperty(property.id, pick(instance, 'id', 'name'));
+            setSelectedInstance(instance);
+            setSnackbarError && setSnackbarError({ showAlert: true, message: 'New instance created', isError: false });
+            normalizeDates([instance]);
+            setOptions(options.concat([instance]));
+            onClose();
+            isSuccessful = true;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        }
+        catch (err) {
+            setSnackbarError &&
+                setSnackbarError({
+                    showAlert: true,
+                    message: (_k = (_g = (_f = (_e = (_d = (_c = (_b = err.response) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.error) === null || _d === void 0 ? void 0 : _d.details) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.message) !== null && _g !== void 0 ? _g : (_j = (_h = err.data) === null || _h === void 0 ? void 0 : _h.error) === null || _j === void 0 ? void 0 : _j.message) !== null && _k !== void 0 ? _k : `An error occurred. The new instance was not created.`,
+                    isError: true,
+                });
+            error = (_m = (_l = err.response) === null || _l === void 0 ? void 0 : _l.data) === null || _m === void 0 ? void 0 : _m.error;
+            onClose();
+        }
+        return { isSuccessful, error };
+    });
+    return (React.createElement(Box, { sx: { background: nestedFieldsView ? '#F4F6F8' : 'none', borderRadius: '8px' } },
+        React.createElement(Box, { sx: { padding: '8px 24px 20px', '.MuiInputBase-root': { background: '#FFFF', borderRadius: '8px' } } },
+            !nestedFieldsView && displayOption !== 'dropdown' && mode !== 'existingOnly' && (React.createElement(Grid, { container: true },
+                React.createElement(Grid, { container: true, item: true },
+                    React.createElement(RadioGroup, { row: true, "aria-labelledby": "related-object-link-type", onChange: (event) => {
+                            event.target.value === 'existing' && setErrors([]);
+                            setRelationType(event.target.value);
+                        }, value: relationType },
+                        React.createElement(FormControlLabel, { value: "existing", control: React.createElement(Radio, null), label: "Existing" }),
+                        React.createElement(FormControlLabel, { value: "new", control: React.createElement(Radio, null), label: "New" }))))),
+            (errors === null || errors === void 0 ? void 0 : errors.length) ? (React.createElement(Alert, { severity: "error", sx: { margin: '10px 0', borderRadius: '8px' }, icon: React.createElement(InfoRounded, { sx: { color: '#A22723' } }) }, errors.length === 1 ? (React.createElement(React.Fragment, null,
+                "There is ",
+                React.createElement("strong", null, "1"),
+                " error")) : (React.createElement(React.Fragment, null,
+                "There are ",
+                React.createElement("strong", null, errors.length),
+                " errors")))) : undefined,
+            relationType === 'new' ? (React.createElement(Box, { sx: { width: '100%' } },
+                React.createElement(Form, { actionId: "_create", actionType: "create", object: relatedObject, onSave: createNewInstance, submitButtonLabel: 'Add', closeModal: onClose, apiServices: apiServices, clearable: true, objectInputCommonProps: {
+                        apiServices: apiServices,
+                        setSnackbarError: setSnackbarError,
+                    }, queryAddresses: queryAddresses, user: userAccount }))) : (relatedObject && (React.createElement(React.Fragment, null,
+                React.createElement(InstanceLookup, { apiServices: apiServices, nestedFieldsView: nestedFieldsView, setRelationType: setRelationType, object: relatedObject, setSelectedInstance: setSelectedRow, mode: mode, filter: filter }))))),
+        relationType !== 'new' && (React.createElement(Box, { sx: styles.actionButtons },
+            React.createElement(Button, { onClick: onClose, color: 'inherit', sx: {
+                    border: '1px solid #ced4da',
+                    width: '75px',
+                    marginRight: '0px',
+                    color: 'black',
+                } }, "Cancel"),
+            React.createElement(Button, { sx: { marginLeft: '8px', width: '85px', '&:hover': { boxShadow: 'none' } }, onClick: linkExistingInstance, variant: "contained" }, "Add")))));
+};

package/dist/published/components/custom/Form/FormComponents/RepeatableFieldComponent/ActionDialog.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { Action, ApiServices, Obj, Property, UserAccount } from '@evoke-platform/context';
+import { ObjectPropertyInputProps } from '../../types';
+export declare type ActionDialogProps = {
+    open: boolean;
+    onClose: () => void;
+    action: Action;
+    instanceInput: Record<string, unknown>;
+    handleSubmit: (actionType: 'delete' | 'update' | 'create', input: Record<string, unknown> | undefined, instanceId?: string, setSubmitting?: (value: boolean) => void) => Promise<{
+        isSuccessful: boolean;
+        error?: Record<string, unknown>;
+    }>;
+    object: Obj;
+    objectInputCommonProps: ObjectPropertyInputProps;
+    instanceId?: string;
+    relatedProperty?: Property;
+    apiServices: ApiServices;
+    queryAddresses?: unknown;
+    user?: UserAccount;
+};
+export declare const ActionDialog: (props: ActionDialogProps) => JSX.Element;

package/dist/published/components/custom/Form/FormComponents/RepeatableFieldComponent/ActionDialog.js

@@ -0,0 +1,96 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { concat } from 'lodash';
+import React, { useEffect, useState } from 'react';
+import { Close } from '../../../../../icons';
+import { Button, Dialog, DialogContent, DialogTitle, IconButton, LoadingButton, Skeleton, Typography, } from '../../../../core';
+import { ErrorComponent, Form } from '../../../../custom';
+import { Box } from '../../../../layout';
+import { convertComponentsToForm, convertFormToComponents, 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, instanceInput, handleSubmit, apiServices, object, instanceId, relatedProperty, objectInputCommonProps, queryAddresses, user, } = props;
+    const [updatedObject, setUpdatedObject] = useState();
+    const [hasAccess, setHasAccess] = useState();
+    const [loading, setLoading] = useState(false);
+    const [submitting, setSubmitting] = useState(false);
+    useEffect(() => {
+        if (instanceId) {
+            setLoading(true);
+            apiServices.get(getPrefixedUrl(`/objects/${object.id}/instances/${instanceId}/checkAccess`), {
+                params: { action: 'execute', field: action.id },
+            }, (error, result) => {
+                var _a;
+                setHasAccess((_a = result === null || result === void 0 ? void 0 : result.result) !== null && _a !== void 0 ? _a : false);
+                setLoading(false);
+            });
+        }
+        else {
+            setHasAccess(true);
+            setLoading(false);
+        }
+    }, [object, instanceId]);
+    useEffect(() => {
+        var _a, _b, _c, _d, _e, _f;
+        const input = (((_a = action === null || action === void 0 ? void 0 : action.form) === null || _a === void 0 ? void 0 : _a.entries) && action.parameters) || (action === null || action === void 0 ? void 0 : action.inputProperties)
+            ? (_c = (((_b = action.form) === null || _b === void 0 ? void 0 : _b.entries) && action.parameters
+                ? convertFormToComponents(action.form.entries, action.parameters, object)
+                : action === null || action === void 0 ? void 0 : action.inputProperties)) === null || _c === void 0 ? void 0 : _c.filter((inputProperty) => (inputProperty === null || inputProperty === void 0 ? void 0 : inputProperty.key) !== (relatedProperty === null || relatedProperty === void 0 ? void 0 : relatedProperty.relatedPropertyId))
+            : undefined;
+        const updatedAction = Object.assign(Object.assign({}, action), { form: input ? { entries: convertComponentsToForm(input) } : undefined });
+        const properties = (_d = object === null || object === void 0 ? void 0 : object.properties) === null || _d === void 0 ? void 0 : _d.filter((prop) => (prop === null || prop === void 0 ? void 0 : prop.id) !== (relatedProperty === null || relatedProperty === void 0 ? void 0 : relatedProperty.relatedPropertyId));
+        setUpdatedObject(Object.assign(Object.assign({}, object), { properties, actions: concat((_f = (_e = object === null || object === void 0 ? void 0 : object.actions) === null || _e === void 0 ? void 0 : _e.filter((a) => (a === null || a === void 0 ? void 0 : a.id) !== action.id)) !== null && _f !== void 0 ? _f : [], [updatedAction]) }));
+    }, [object]);
+    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 === null || action === void 0 ? void 0 : action.name : ''),
+        React.createElement(DialogContent, null, hasAccess ? (React.createElement(Box, { sx: { width: '100%', marginTop: '10px' } }, (action === null || action === void 0 ? void 0 : action.type) === 'delete' ? (React.createElement(React.Fragment, null,
+            React.createElement(Typography, null,
+                "Are you sure you want to delete this ", object === null || object === void 0 ? void 0 :
+                object.name,
+                "?"),
+            React.createElement(Box, { sx: { padding: '25ox 0 10px 0', display: 'flex', justifyContent: 'flex-end' } },
+                React.createElement(Button, { sx: Object.assign(Object.assign({}, styles.button), styles.cancelBtn), onClick: onClose }, "Cancel"),
+                React.createElement(LoadingButton, { sx: Object.assign(Object.assign({}, styles.button), styles.deleteBtn), onClick: () => handleSubmit('delete', undefined, instanceId, setSubmitting), loading: submitting }, "Delete")))) : (updatedObject && (React.createElement(Form, { actionId: action.id, actionType: action.type, apiServices: objectInputCommonProps.apiServices, object: updatedObject, instance: instanceInput, onSave: (data, setSubmitting) => __awaiter(void 0, void 0, void 0, function* () { return handleSubmit(action.type, data, instanceId, setSubmitting); }), objectInputCommonProps: objectInputCommonProps, closeModal: onClose, queryAddresses: queryAddresses, user: user }))))) : (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/Form/FormComponents/RepeatableFieldComponent/ManyToMany/DropdownRepeatableField.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { ApiServices, ObjWithRoot, ObjectInstance, Property } from '@evoke-platform/context';
+export declare type DropdownRepeatableFieldProps = {
+    id: string;
+    property: Property;
+    instance: ObjectInstance;
+    criteria?: object;
+    readOnly: boolean;
+    apiServices: ApiServices;
+    initialMiddleObjectInstances: ObjectInstance[];
+    middleObject: ObjWithRoot;
+    getMiddleObjectInstances: () => Promise<ObjectInstance[]>;
+    fieldHeight?: 'small' | 'medium';
+};
+export declare const DropdownRepeatableField: (props: DropdownRepeatableFieldProps) => JSX.Element;