@evoke-platform/ui-components 1.8.0-dev.1 → 1.8.0-dev.11

package/dist/published/components/custom/Form/tests/test-data.js

@@ -39,6 +39,17 @@ export const licenseObject = {
             name: 'Create',
             type: 'create',
             outputEvent: 'License Created',
+            form: {
+                entries: [
+                    {
+                        parameterId: 'name',
+                        type: 'input',
+                        display: {
+                            label: 'License Number',
+                        },
+                    },
+                ],
+            },
         },
     ],
 };
@@ -78,6 +89,118 @@ export const licenseTypeObject = {
         },
     ],
 };
+// New dedicated object for 508 testing
+export const accessibility508Object = {
+    id: 'accessibility508',
+    name: 'Accessibility 508 Test Object',
+    properties: [
+        {
+            id: 'name',
+            name: 'Name',
+            type: 'string',
+        },
+        {
+            id: 'license',
+            name: 'License',
+            type: 'object',
+            objectId: 'license',
+        },
+        {
+            id: 'user',
+            name: 'User',
+            type: 'user',
+        },
+    ],
+    actions: [
+        {
+            id: '_update1',
+            name: 'Update Related Object',
+            type: 'update',
+            outputEvent: '508 Test Object Updated',
+            parameters: [
+                {
+                    id: 'name',
+                    name: 'Name',
+                    type: 'string',
+                },
+                {
+                    id: 'license',
+                    name: 'License',
+                    type: 'object',
+                    objectId: 'license',
+                },
+            ],
+            form: {
+                entries: [
+                    {
+                        parameterId: 'name',
+                        type: 'input',
+                        display: {
+                            label: 'Name',
+                        },
+                    },
+                    {
+                        parameterId: 'license',
+                        type: 'input',
+                        display: {
+                            label: 'License',
+                            relatedObjectDisplay: 'dropdown',
+                        },
+                    },
+                ],
+            },
+        },
+        {
+            id: '_update2',
+            name: 'Update User',
+            type: 'update',
+            outputEvent: '508 Test Object Updated',
+            parameters: [
+                {
+                    id: 'name',
+                    name: 'Name',
+                    type: 'string',
+                },
+                {
+                    id: 'user',
+                    type: 'user',
+                    name: 'User',
+                    required: false,
+                },
+            ],
+            form: {
+                entries: [
+                    {
+                        parameterId: 'name',
+                        type: 'input',
+                        display: {
+                            label: 'Name',
+                        },
+                    },
+                    {
+                        type: 'input',
+                        parameterId: 'user',
+                        display: {
+                            label: 'User',
+                        },
+                    },
+                ],
+            },
+        },
+        {
+            id: '_delete',
+            name: 'Delete',
+            type: 'delete',
+            outputEvent: 'Accessibility Type Deleted',
+        },
+        {
+            id: '_create',
+            name: 'Create',
+            type: 'create',
+            outputEvent: 'Accessibility Type Created',
+        },
+    ],
+};
 export const specialtyObject = {
     id: 'specialty',
     name: 'Specialty',
@@ -379,3 +502,18 @@ export const npSpecialtyType2 = {
         name: 'NP License Type',
     },
 };
+// Users
+export const users = [
+    {
+        id: 'user1',
+        status: 'Active',
+        email: 'user1@systemautomation.com',
+        name: 'User 1',
+    },
+    {
+        id: 'user2',
+        status: 'Active',
+        email: 'user2@systemautomation.com',
+        name: 'User 2',
+    },
+];

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

@@ -254,6 +254,7 @@ export function convertFormToComponents(entries, parameters, object) {
                 conditional: convertVisibilityToConditional(displayOptions?.visibility),
                 viewLayout: displayOptions?.viewLayout,
                 strictlyTrue: parameter.type === 'boolean' && parameter.strictlyTrue,
+                documentMetadata: parameter.type === 'document' ? entry.documentMetadata : undefined,
             };
         }
     })
@@ -420,6 +421,7 @@ export function convertComponentsToForm(components) {
                         }
                         : {}),
                 },
+                ...(component.documentMetadata ? { documentMetadata: component.documentMetadata } : {}),
                 enumWithLabels: component.data?.values,
             };
         }
@@ -489,49 +491,76 @@ export function flattenFormComponents(components) {
 export async function addObjectPropertiesToComponentProps(properties, 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 formComponents, allCriteriaInputs, instance, objectPropertyInputProps, associatedObject, autoSave, readOnly, defaultPages, navigateTo, queryAddresses, apiServices, isModal, fieldHeight, richTextEditor) {
+    function removeEmptySections(component) {
+        // if a component is an entry to a property that the user doesn't have permission to view, remove it
+        if (component?.property?.id) {
+            const hasPermission = allProperties.some((p) => p.id === component.property.id);
+            if (!hasPermission)
+                return undefined;
+        }
+        // remove sections or tabs with no components
+        if (component.components) {
+            component.components = component.components
+                .map(removeEmptySections)
+                .filter((c) => c !== undefined);
+            if (component.components.length === 0)
+                return undefined;
+        }
+        // check columns for empty components or sections with no components
+        const actionInput = component;
+        if (actionInput.columns) {
+            const processedColumns = actionInput.columns.map((col) => ({
+                ...col,
+                components: (col.components || [])
+                    .map(removeEmptySections)
+                    .filter((c) => c !== undefined),
+            }));
+            actionInput.columns = processedColumns;
+            if (processedColumns.every((col) => col.components.length === 0)) {
+                return undefined;
+            }
+        }
+        return component;
+    }
+    const allProperties = properties.flatMap((property) => property.type === 'address'
+        ? [
+            {
+                id: `${property.id}.line1`,
+                name: `${property.name} Line 1`,
+                type: 'string',
+            },
+            {
+                id: `${property.id}.line2`,
+                name: `${property.name} Line 2`,
+                type: 'string',
+            },
+            {
+                id: `${property.id}.city`,
+                name: `${property.name} City`,
+                type: 'string',
+            },
+            {
+                id: `${property.id}.county`,
+                name: `${property.name} County`,
+                type: 'string',
+            },
+            {
+                id: `${property.id}.state`,
+                name: `${property.name} State`,
+                type: 'string',
+            },
+            {
+                id: `${property.id}.zipCode`,
+                name: `${property.name} Zip Code`,
+                type: 'string',
+            },
+        ]
+        : [property]);
     return [
         ...(await Promise.all(formComponents
             ?.filter((component) => !isUndefined(component) && !isNil(component))
             ?.map(async (component) => {
-            const property = properties
-                .flatMap((property) => {
-                if (property.type === 'address') {
-                    return [
-                        {
-                            id: `${property.id}.line1`,
-                            name: `${property.name} Line 1`,
-                            type: 'string',
-                        },
-                        {
-                            id: `${property.id}.line2`,
-                            name: `${property.name} Line 2`,
-                            type: 'string',
-                        },
-                        {
-                            id: `${property.id}.city`,
-                            name: `${property.name} City`,
-                            type: 'string',
-                        },
-                        {
-                            id: `${property.id}.county`,
-                            name: `${property.name} County`,
-                            type: 'string',
-                        },
-                        {
-                            id: `${property.id}.state`,
-                            name: `${property.name} State`,
-                            type: 'string',
-                        },
-                        {
-                            id: `${property.id}.zipCode`,
-                            name: `${property.name} Zip Code`,
-                            type: 'string',
-                        },
-                    ];
-                }
-                return property;
-            })
-                .find((property) => property.id === component.key);
+            const property = allProperties.find((prop) => prop.id === component.key);
             const id = property?.id ?? component.key;
             if (component.type === 'Content') {
                 return component;
@@ -543,7 +572,7 @@ formComponents, allCriteriaInputs, instance, objectPropertyInputProps, associate
                             ? DateTime.now().toISODate()
                             : DateTime.fromISO(component.initialValue).toISODate();
                 }
-                // @Deprecrated
+                // @Deprecated
                 // This will overwrite the default value
                 if (component.defaultToCurrentDate) {
                     component.initialValue = DateTime.now().toISODate();
@@ -556,7 +585,7 @@ formComponents, allCriteriaInputs, instance, objectPropertyInputProps, associate
                             ? DateTime.now().toISO()
                             : DateTime.fromISO(component.initialValue).toISO();
                 }
-                // @Deprecrated
+                // @Deprecated
                 // This will overwrite the default value
                 if (component.defaultToCurrentDate) {
                     component.initialValue = DateTime.now().toISO();
@@ -575,7 +604,7 @@ formComponents, allCriteriaInputs, instance, objectPropertyInputProps, associate
                                 suppressMilliseconds: true,
                             });
                 }
-                // @Deprecrated
+                // @Deprecated
                 // This will overwrite the default value
                 if (component.defaultToCurrentTime) {
                     component.initialValue = DateTime.now().toISOTime({
@@ -709,13 +738,16 @@ formComponents, allCriteriaInputs, instance, objectPropertyInputProps, associate
                         : undefined,
                 };
             }
-            if (component.columns) {
+            else {
+                component = removeEmptySections(component);
+            }
+            if (component?.columns) {
                 for (const column of component.columns) {
                     column.components = await addObjectPropertiesToComponentProps(properties, column.components, allCriteriaInputs, instance, objectPropertyInputProps, associatedObject, autoSave, readOnly, undefined, undefined, queryAddresses, apiServices, isModal, fieldHeight, richTextEditor);
                 }
                 return component;
             }
-            if (component.components) {
+            if (component?.components) {
                 for (const item of component.components) {
                     const nestedFieldProperty = properties.find((property) => property.id === item.key);
                     if (item.type) {

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

@@ -2,7 +2,7 @@ import { EvokeForm, ObjectInstance } from '@evoke-platform/context';
 import React, { ComponentType } from 'react';
 import { FieldErrors, FieldValues } from 'react-hook-form';
 import { BaseProps, Document, SimpleEditorProps } from './components/types';
-export type FormProps = BaseProps & {
+export type FormRendererProps = BaseProps & {
     richTextEditor?: ComponentType<SimpleEditorProps>;
     hideButtons?: boolean;
     value?: FieldValues;
@@ -14,6 +14,10 @@ export type FormProps = BaseProps & {
     instance?: ObjectInstance | Document;
     onChange: (id: string, value: unknown) => void;
     onValidationChange?: (errors: FieldErrors) => void;
+    associatedObject?: {
+        instanceId?: string;
+        propertyId?: string;
+    };
 };
-declare function FormRenderer(props: FormProps): React.JSX.Element;
+declare function FormRenderer(props: FormRendererProps): React.JSX.Element;
 export default FormRenderer;

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

@@ -1,5 +1,5 @@
 import { useObject } from '@evoke-platform/context';
-import { isEqual } from 'lodash';
+import { isEmpty, isEqual } from 'lodash';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useResponsive } from '../../../theme';
@@ -12,7 +12,7 @@ import { convertDocToParameters, convertPropertiesToParams } from './components/
 import { handleValidation } from './components/ValidationFiles/Validation';
 import ValidationErrorDisplay from './components/ValidationFiles/ValidationErrorDisplay';
 function FormRenderer(props) {
-    const { onSubmit, value, fieldHeight, richTextEditor, hideButtons, stickyFooter, onCancel, form, instance, onChange, onValidationChange, } = props;
+    const { onSubmit, value, fieldHeight, richTextEditor, hideButtons, stickyFooter, onCancel, form, instance, onChange, onValidationChange, associatedObject, } = props;
     const { entries, name: title, objectId, actionId, display } = form;
     const { register, unregister, setValue, reset, handleSubmit, formState: { errors, isSubmitted }, getValues, } = useForm({
         defaultValues: value,
@@ -99,10 +99,9 @@ function FormRenderer(props) {
     }, []);
     if (entries && parameters && (!actionId || action)) {
         return (React.createElement(React.Fragment, null,
-            React.createElement(Box, { sx: {
+            ((isSubmitted && !isEmpty(errors)) || (isSmallerThanMd && hasSections) || title) && (React.createElement(Box, { sx: {
                     paddingX: isSmallerThanMd ? 2 : 3,
                     paddingTop: '0px',
-                    borderBottom: '2px solid #F4F6F8',
                 } },
                 React.createElement(Box, { sx: {
                         display: 'flex',
@@ -111,13 +110,14 @@ function FormRenderer(props) {
                         flexWrap: 'wrap',
                         paddingY: isSm || isXs ? 2 : 3,
                     } },
-                    React.createElement(Typography, { sx: {
+                    title && (React.createElement(Typography, { sx: {
                             fontSize: '20px',
                             lineHeight: '30px',
                             fontWeight: 700,
                             flexGrow: '1',
-                        } }, title),
+                        } }, title)),
                     isSmallerThanMd && hasSections && (React.createElement(Box, { sx: {
+                            color: '#212B36',
                             display: 'flex',
                             alignItems: 'center',
                             maxHeight: '22px',
@@ -140,7 +140,7 @@ function FormRenderer(props) {
                                 fontWeight: 400,
                                 fontSize: '14px',
                             }, onClick: handleCollapseAll }, "Collapse all")))),
-                React.createElement(ValidationErrorDisplay, { formId: form.id, title: title })),
+                React.createElement(ValidationErrorDisplay, { formId: form.id, title: title, errors: errors, showSubmitError: isSubmitted }))),
             React.createElement(FormContext.Provider, { value: {
                     fetchedOptions,
                     setFetchedOptions: updateFetchedOptions,
@@ -159,26 +159,25 @@ function FormRenderer(props) {
                     handleChange: onChange,
                     triggerFieldReset,
                     showSubmitError: isSubmitted,
+                    associatedObject,
                 } },
                 React.createElement(Box, { sx: {
-                        padding: isModal ? '0px' : isSm || isXs ? 2 : 3,
-                        paddingBottom: '0px',
-                        paddingTop: !hasSections ? undefined : '0px',
+                        paddingX: isSm || isXs ? 2 : 3,
+                        // when rendering the default delete action, we don't want a border
+                        borderTop: !form.id || isModal ? undefined : '1px solid #e9ecef',
                     } },
                     entries.map((entry, index) => (React.createElement(RecursiveEntryRenderer, { key: index, entry: entry, isDocument: !!(form.id === 'documentForm') }))),
                     !hideButtons && (actionId || form.id === 'documentForm') && onSubmit && (React.createElement(Box, { sx: {
                             ...(stickyFooter === false ? { position: 'static' } : { position: 'sticky' }),
-                            bottom: isModal ? -5 : isSmallerThanMd ? 0 : 24,
+                            bottom: isModal || isSmallerThanMd ? 0 : 24,
                             zIndex: 1000,
                             borderTop: action?.type !== 'delete' ? '1px solid #f4f6f8' : 'none',
                             backgroundColor: '#fff',
-                            paddingY: isSmallerThanMd ? '16px' : '20px',
-                            paddingX: isSmallerThanMd ? '16px' : '20px',
+                            padding: isSmallerThanMd ? '16px' : '20px',
                             display: 'flex',
                             justifyContent: isXs ? 'center' : 'flex-end',
                             alignItems: 'center',
                             marginX: isSmallerThanMd ? -2 : -3,
-                            marginBottom: '1px',
                             borderRadius: '0px 0px 6px 6px',
                         } },
                         React.createElement(ActionButtons, { onSubmit: onSubmit, handleSubmit: handleSubmit, isModal: isModal, actionType: action?.type, submitButtonLabel: display?.submitLabel, onReset: handleReset, unregister: unregister, entries: entries, setValue: setValue, formId: form.id })))))));

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

@@ -1,6 +1,6 @@
 import React, { ComponentType } from 'react';
 import { BaseProps, SimpleEditorProps } from './components/types';
-export type FormProps = BaseProps & {
+export type FormRendererContainerProps = BaseProps & {
     formId?: string;
     instanceId?: string;
     defaultPages?: Record<string, string>;
@@ -12,10 +12,15 @@ export type FormProps = BaseProps & {
     };
     actionId?: string;
     stickyFooter?: boolean;
+    hideButtons?: boolean;
     objectId: string;
     richTextEditor?: ComponentType<SimpleEditorProps>;
     onClose?: () => void;
     onSubmit?: (submission: Record<string, unknown>) => Promise<void>;
+    associatedObject?: {
+        instanceId?: string;
+        propertyId?: string;
+    };
 };
-declare function FormRendererContainer(props: FormProps): React.JSX.Element;
+declare function FormRendererContainer(props: FormRendererContainerProps): React.JSX.Element;
 export default FormRendererContainer;