@evoke-platform/ui-components 1.6.0-testing.13 → 1.6.0-testing.14

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

@@ -0,0 +1,100 @@
+import { Help, InfoRounded } from '@mui/icons-material';
+import React from 'react';
+import { IconButton, InputLabel, Tooltip, Typography } from '../../../core';
+import { Box } from '../../../layout';
+const underFieldStyles = {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+};
+const descriptionStyles = {
+    color: '#999',
+    whiteSpace: 'normal',
+    display: 'block',
+};
+const PrefixSuffix = (props) => {
+    const { prefix, suffix, height, isViewOnly } = props;
+    const text = prefix || suffix;
+    const prefixSuffixStyles = {
+        display: 'inline-flex',
+        alignItems: 'center',
+        background: isViewOnly ? undefined : '#f5f5f5',
+        padding: '5px',
+        border: isViewOnly ? undefined : '1px solid #ccc',
+        ...(suffix && {
+            borderTopRightRadius: '5px',
+            borderBottomRightRadius: '5px',
+            marginLeft: '-5px',
+            padding: '7px 5px 7px 10px',
+            marginTop: '6px',
+        }),
+        ...(prefix && {
+            borderTopLeftRadius: '5px',
+            borderBottomLeftRadius: '5px',
+            marginRight: '-5px',
+            padding: '7px 10px 7px 5px',
+            marginTop: '6px',
+        }),
+        height: height === 'small' ? 24 : 40,
+    };
+    if (!prefix && !suffix)
+        return null;
+    return (React.createElement(Box, { sx: prefixSuffixStyles },
+        React.createElement(Typography, null, text)));
+};
+/**
+ * A component that wraps a FormField and adds a label,
+ * description, tooltip, prefix, suffix and word/char counts
+ */
+const FieldWrapper = (props) => {
+    const { inputId, label, description, tooltip, prefix, suffix, value, maxLength, errorMessage, showCharCount, inputType, viewOnly, children, fieldHeight, required, } = props;
+    const charCount = typeof value === 'string' ? value.length : 0;
+    const remainingChars = maxLength ? maxLength - charCount : undefined;
+    return (React.createElement(Box, null,
+        React.createElement(Box, { sx: { padding: '10px 0' } },
+            inputType !== 'boolean' && (React.createElement(InputLabel, { htmlFor: inputId, sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    color: viewOnly ? 'text.secondary' : 'text.primary',
+                    fontSize: '14px',
+                } },
+                label,
+                required ? (React.createElement(Typography, { component: 'span', sx: { color: 'red', fontSize: '12px', lineHeight: '22px', paddingLeft: '4px' } }, `*`)) : null,
+                tooltip && (React.createElement(Tooltip, { placement: "right", title: tooltip },
+                    React.createElement(IconButton, null,
+                        React.createElement(Help, { sx: { fontSize: '14px' } })))))),
+            React.createElement(Box, { sx: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignItems: viewOnly ? 'center' : 'flex-start',
+                } },
+                inputType === 'string' && (React.createElement(PrefixSuffix, { prefix: prefix, height: fieldHeight || 'medium', isViewOnly: viewOnly })),
+                React.createElement(Box, { sx: {
+                        width: viewOnly && suffix ? undefined : '100%',
+                        marginTop: '6px',
+                        borderRadius: '8px',
+                    } },
+                    children,
+                    inputType !== 'boolean' && (errorMessage || description || showCharCount) && (React.createElement(Box, { sx: underFieldStyles },
+                        React.createElement(Box, { sx: {
+                                width: '100%',
+                                display: 'flex',
+                                justifyContent: 'space-between',
+                                alignItems: 'flex-start',
+                                flexWrap: 'wrap',
+                                paddingTop: '4px',
+                            } },
+                            React.createElement(Box, { sx: { display: 'flex', flexDirection: 'column' } },
+                                errorMessage ? (React.createElement(Box, { display: 'flex', alignItems: 'center' },
+                                    React.createElement(InfoRounded, { color: 'error', sx: { fontSize: '.75rem', marginRight: '3px' } }),
+                                    React.createElement(Typography, { fontSize: '12px', color: 'error', sx: { lineHeight: '18px' } }, errorMessage))) : (React.createElement("span", null)),
+                                description && (React.createElement(Typography, { id: `${inputId}-description`, variant: "caption", sx: descriptionStyles }, description))),
+                            showCharCount && (React.createElement(Typography, { variant: "caption", sx: { color: '#999999', whiteSpace: 'nowrap' } },
+                                remainingChars ?? charCount,
+                                ' ',
+                                (remainingChars ?? charCount) === 1 ? 'character' : 'characters',
+                                !!maxLength && ` remaining`)))))),
+                inputType === 'string' && (React.createElement(PrefixSuffix, { suffix: suffix, height: fieldHeight || 'medium', isViewOnly: viewOnly }))))));
+};
+export default FieldWrapper;

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { Obj } from '@evoke-platform/context';
+import { FieldValues, UseFormGetValues } from 'react-hook-form';
+type FormContextType = {
+    fetchedOptions: FieldValues;
+    setFetchedOptions: (newData: FieldValues) => void;
+    getValues: UseFormGetValues<FieldValues>;
+    stickyFooter?: boolean;
+    object?: Obj;
+};
+export declare const FormContext: import("react").Context<FormContextType>;
+export {};

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

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+export const FormContext = createContext({
+    fetchedOptions: {},
+    setFetchedOptions: () => { },
+    getValues: (() => ({})),
+    stickyFooter: false,
+    object: undefined,
+});

package/dist/published/components/custom/FormV2/components/FormFieldTypes/AddressFields.d.ts

@@ -0,0 +1,17 @@
+import { InputField, InputParameter, InputParameterReference, Property, ReadonlyField } from '@evoke-platform/context';
+import React from 'react';
+import { FieldErrors, FieldValues } from 'react-hook-form';
+import { Address } from '../../../FormField/AddressFieldComponent';
+interface AddressProps {
+    entry: InputParameterReference | ReadonlyField | InputField;
+    errors?: FieldErrors;
+    handleChange: (propertyId: string, value: string | Address | undefined) => void;
+    fieldHeight?: 'small' | 'medium';
+    readOnly?: boolean;
+    parameters?: InputParameter[];
+    instance?: FieldValues;
+    entryId: string;
+    fieldDefinition: InputParameter | Property;
+}
+declare function AddressFields(props: AddressProps): React.JSX.Element;
+export default AddressFields;

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

@@ -0,0 +1,50 @@
+import { useApiServices, } from '@evoke-platform/context';
+import React from 'react';
+import { useFormContext } from '../../../../../theme/hooks';
+import { Typography } from '../../../../core';
+import FormField from '../../../FormField';
+import FieldWrapper from '../FieldWrapper';
+import { getPrefixedUrl, isOptionEqualToValue } from '../utils';
+function AddressFields(props) {
+    const { entry, errors, handleChange, fieldHeight, readOnly, parameters, instance, entryId, fieldDefinition } = props;
+    const { getValues } = useFormContext();
+    const apiServices = useApiServices();
+    const addressObject = entryId.split('.')[0];
+    const addressField = entryId.split('.')[1];
+    const addressValues = entry.type === 'readonlyField' ? instance?.[addressObject] : getValues(addressObject);
+    const fieldValue = addressValues?.[addressField];
+    const display = entry?.display;
+    const validation = fieldDefinition?.validation
+        ? fieldDefinition.validation
+        : {};
+    const queryAddresses = async (query) => {
+        return await apiServices.get(getPrefixedUrl(`/locations/search`), {
+            params: { query: query },
+        });
+    };
+    const handleAddressChange = (name, value) => {
+        if (addressField === 'line1' && typeof value === 'object' && value.line1) {
+            const addressKeys = ['line1', 'city', 'county', 'state', 'zipCode'];
+            addressKeys.forEach((key) => {
+                const fullKey = `${addressObject}.${key}`;
+                if (parameters?.some((p) => p.id === fullKey)) {
+                    const fieldValue = value[key];
+                    handleChange(fullKey, fieldValue);
+                }
+            });
+        }
+        else {
+            handleChange(name, value);
+        }
+    };
+    const addressErrors = errors?.[addressObject];
+    const addressFieldError = addressErrors?.[addressField];
+    return (React.createElement(FieldWrapper, { inputId: entryId, inputType: "string", label: display?.label || 'default', description: !readOnly ? display?.description : undefined, tooltip: display?.tooltip, value: fieldValue, maxLength: 'maxLength' in validation ? validation?.maxLength : 0, required: entry.display?.required || false, showCharCount: !readOnly && display?.charCount, viewOnly: !!readOnly, prefix: display?.prefix, suffix: display?.suffix }, !readOnly ? (React.createElement(FormField, { property: fieldDefinition, defaultValue: fieldValue, onChange: handleAddressChange, isMultiLineText: !!display?.rowCount, readOnly: entry.type === 'readonlyField', ...(addressField === 'line1' && { queryAddresses }), mask: validation?.mask, placeholder: display?.placeholder, isOptionEqualToValue: isOptionEqualToValue, size: fieldHeight, error: !!addressFieldError, errorMessage: addressFieldError?.message, additionalProps: {
+            ...(display?.description && {
+                inputProps: {
+                    'aria-describedby': `${entryId}-description`,
+                },
+            }),
+        } })) : (React.createElement(Typography, { variant: "body1", key: entryId, sx: { height: '24px', paddingTop: '6px' } }, fieldValue))));
+}
+export default AddressFields;

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,88 @@
+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, instanceInput } = 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: [
+                    {
+                        type: 'content',
+                        html: `<p>You are about to delete ${instanceInput?.name}. Deleted records can't be restored. Are you sure you want to continue?</p>`,
+                    },
+                ],
+                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;