@evoke-platform/ui-components 1.8.0-testing.1 → 1.8.0-testing.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/dist/published/components/core/TextField/TextField.js +3 -2
  2. package/dist/published/components/custom/DataGrid/index.d.ts +1 -0
  3. package/dist/published/components/custom/Form/FormComponents/ObjectComponent/ObjectPropertyInput.js +4 -0
  4. package/dist/published/components/custom/Form/FormComponents/UserComponent/UserProperty.js +4 -0
  5. package/dist/published/components/custom/Form/utils.js +76 -44
  6. package/dist/published/components/custom/FormV2/FormRenderer.d.ts +4 -0
  7. package/dist/published/components/custom/FormV2/FormRenderer.js +13 -14
  8. package/dist/published/components/custom/FormV2/FormRendererContainer.d.ts +4 -0
  9. package/dist/published/components/custom/FormV2/FormRendererContainer.js +56 -109
  10. package/dist/published/components/custom/FormV2/components/FormContext.d.ts +4 -0
  11. package/dist/published/components/custom/FormV2/components/FormFieldTypes/CollectionFiles/ActionDialog.d.ts +9 -5
  12. package/dist/published/components/custom/FormV2/components/FormFieldTypes/CollectionFiles/ActionDialog.js +12 -24
  13. package/dist/published/components/custom/FormV2/components/FormFieldTypes/CollectionFiles/RepeatableField.d.ts +5 -1
  14. package/dist/published/components/custom/FormV2/components/FormFieldTypes/CollectionFiles/RepeatableField.js +80 -30
  15. package/dist/published/components/custom/FormV2/components/FormFieldTypes/relatedObjectFiles/InstanceLookup.js +1 -1
  16. package/dist/published/components/custom/FormV2/components/FormFieldTypes/relatedObjectFiles/ObjectPropertyInput.js +51 -27
  17. package/dist/published/components/custom/FormV2/components/FormFieldTypes/relatedObjectFiles/RelatedObjectInstance.d.ts +5 -5
  18. package/dist/published/components/custom/FormV2/components/FormFieldTypes/relatedObjectFiles/RelatedObjectInstance.js +45 -7
  19. package/dist/published/components/custom/FormV2/components/RecursiveEntryRenderer.js +7 -4
  20. package/dist/published/components/custom/FormV2/components/ValidationFiles/ValidationErrorDisplay.d.ts +3 -0
  21. package/dist/published/components/custom/FormV2/components/ValidationFiles/ValidationErrorDisplay.js +1 -3
  22. package/dist/published/components/custom/FormV2/components/types.d.ts +7 -1
  23. package/dist/published/components/custom/FormV2/components/utils.d.ts +27 -2
  24. package/dist/published/components/custom/FormV2/components/utils.js +108 -2
  25. package/dist/published/components/custom/index.d.ts +1 -0
  26. package/dist/published/index.d.ts +1 -1
  27. package/dist/published/theme/hooks.d.ts +4 -0
  28. package/package.json +5 -2
@@ -4,7 +4,8 @@ import UIThemeProvider from '../../../theme';
4
4
  import FieldError from '../FieldError';
5
5
  import Typography from '../Typography';
6
6
  const TextField = (props) => {
7
- const { id, variant, label, labelPlacement, readOnly, required, error, instructionText, errorMessage } = props;
7
+ const { labelPlacement, readOnly, instructionText, errorMessage, ...muiProps } = props;
8
+ const { id, variant, label, required, error } = muiProps;
8
9
  const readOnlyStyles = {
9
10
  '.MuiOutlinedInput-root': {
10
11
  paddingRight: '5px',
@@ -28,7 +29,7 @@ const TextField = (props) => {
28
29
  readOnly: readOnly,
29
30
  'aria-readonly': !!readOnly,
30
31
  'data-testid': 'label-outside',
31
- }, ...props, label: null, sx: readOnly
32
+ }, ...muiProps, label: null, sx: readOnly
32
33
  ? { ...readOnlyStyles, ...props.sx }
33
34
  : {
34
35
  '& fieldset': { borderRadius: '8px' },
@@ -1,3 +1,4 @@
1
1
  import DataGrid from './DataGrid';
2
+ export type { GridSortModel } from '@mui/x-data-grid';
2
3
  export { DataGrid };
3
4
  export default DataGrid;
@@ -230,6 +230,10 @@ export const ObjectPropertyInput = (props) => {
230
230
  ? (options.find((o) => o.id === option)?.name ?? '')
231
231
  : option.label;
232
232
  }, onKeyDownCapture: (e) => {
233
+ // prevents keyboard trap
234
+ if (e.key === 'Tab') {
235
+ return;
236
+ }
233
237
  if (instance?.[property.id]?.id || selectedInstance?.id) {
234
238
  e.preventDefault();
235
239
  }
@@ -89,6 +89,10 @@ export const UserProperty = (props) => {
89
89
  }
90
90
  }
91
91
  }, onKeyDownCapture: (e) => {
92
+ // prevents keyboard trap
93
+ if (e.key === 'Tab') {
94
+ return;
95
+ }
92
96
  if (value) {
93
97
  e.preventDefault();
94
98
  }
@@ -254,6 +254,7 @@ export function convertFormToComponents(entries, parameters, object) {
254
254
  conditional: convertVisibilityToConditional(displayOptions?.visibility),
255
255
  viewLayout: displayOptions?.viewLayout,
256
256
  strictlyTrue: parameter.type === 'boolean' && parameter.strictlyTrue,
257
+ documentMetadata: parameter.type === 'document' ? entry.documentMetadata : undefined,
257
258
  };
258
259
  }
259
260
  })
@@ -420,6 +421,7 @@ export function convertComponentsToForm(components) {
420
421
  }
421
422
  : {}),
422
423
  },
424
+ ...(component.documentMetadata ? { documentMetadata: component.documentMetadata } : {}),
423
425
  enumWithLabels: component.data?.values,
424
426
  };
425
427
  }
@@ -489,49 +491,76 @@ export function flattenFormComponents(components) {
489
491
  export async function addObjectPropertiesToComponentProps(properties,
490
492
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
491
493
  formComponents, allCriteriaInputs, instance, objectPropertyInputProps, associatedObject, autoSave, readOnly, defaultPages, navigateTo, queryAddresses, apiServices, isModal, fieldHeight, richTextEditor) {
494
+ function removeEmptySections(component) {
495
+ // if a component is an entry to a property that the user doesn't have permission to view, remove it
496
+ if (component?.property?.id) {
497
+ const hasPermission = allProperties.some((p) => p.id === component.property.id);
498
+ if (!hasPermission)
499
+ return undefined;
500
+ }
501
+ // remove sections or tabs with no components
502
+ if (component.components) {
503
+ component.components = component.components
504
+ .map(removeEmptySections)
505
+ .filter((c) => c !== undefined);
506
+ if (component.components.length === 0)
507
+ return undefined;
508
+ }
509
+ // check columns for empty components or sections with no components
510
+ const actionInput = component;
511
+ if (actionInput.columns) {
512
+ const processedColumns = actionInput.columns.map((col) => ({
513
+ ...col,
514
+ components: (col.components || [])
515
+ .map(removeEmptySections)
516
+ .filter((c) => c !== undefined),
517
+ }));
518
+ actionInput.columns = processedColumns;
519
+ if (processedColumns.every((col) => col.components.length === 0)) {
520
+ return undefined;
521
+ }
522
+ }
523
+ return component;
524
+ }
525
+ const allProperties = properties.flatMap((property) => property.type === 'address'
526
+ ? [
527
+ {
528
+ id: `${property.id}.line1`,
529
+ name: `${property.name} Line 1`,
530
+ type: 'string',
531
+ },
532
+ {
533
+ id: `${property.id}.line2`,
534
+ name: `${property.name} Line 2`,
535
+ type: 'string',
536
+ },
537
+ {
538
+ id: `${property.id}.city`,
539
+ name: `${property.name} City`,
540
+ type: 'string',
541
+ },
542
+ {
543
+ id: `${property.id}.county`,
544
+ name: `${property.name} County`,
545
+ type: 'string',
546
+ },
547
+ {
548
+ id: `${property.id}.state`,
549
+ name: `${property.name} State`,
550
+ type: 'string',
551
+ },
552
+ {
553
+ id: `${property.id}.zipCode`,
554
+ name: `${property.name} Zip Code`,
555
+ type: 'string',
556
+ },
557
+ ]
558
+ : [property]);
492
559
  return [
493
560
  ...(await Promise.all(formComponents
494
561
  ?.filter((component) => !isUndefined(component) && !isNil(component))
495
562
  ?.map(async (component) => {
496
- const property = properties
497
- .flatMap((property) => {
498
- if (property.type === 'address') {
499
- return [
500
- {
501
- id: `${property.id}.line1`,
502
- name: `${property.name} Line 1`,
503
- type: 'string',
504
- },
505
- {
506
- id: `${property.id}.line2`,
507
- name: `${property.name} Line 2`,
508
- type: 'string',
509
- },
510
- {
511
- id: `${property.id}.city`,
512
- name: `${property.name} City`,
513
- type: 'string',
514
- },
515
- {
516
- id: `${property.id}.county`,
517
- name: `${property.name} County`,
518
- type: 'string',
519
- },
520
- {
521
- id: `${property.id}.state`,
522
- name: `${property.name} State`,
523
- type: 'string',
524
- },
525
- {
526
- id: `${property.id}.zipCode`,
527
- name: `${property.name} Zip Code`,
528
- type: 'string',
529
- },
530
- ];
531
- }
532
- return property;
533
- })
534
- .find((property) => property.id === component.key);
563
+ const property = allProperties.find((prop) => prop.id === component.key);
535
564
  const id = property?.id ?? component.key;
536
565
  if (component.type === 'Content') {
537
566
  return component;
@@ -543,7 +572,7 @@ formComponents, allCriteriaInputs, instance, objectPropertyInputProps, associate
543
572
  ? DateTime.now().toISODate()
544
573
  : DateTime.fromISO(component.initialValue).toISODate();
545
574
  }
546
- // @Deprecrated
575
+ // @Deprecated
547
576
  // This will overwrite the default value
548
577
  if (component.defaultToCurrentDate) {
549
578
  component.initialValue = DateTime.now().toISODate();
@@ -556,7 +585,7 @@ formComponents, allCriteriaInputs, instance, objectPropertyInputProps, associate
556
585
  ? DateTime.now().toISO()
557
586
  : DateTime.fromISO(component.initialValue).toISO();
558
587
  }
559
- // @Deprecrated
588
+ // @Deprecated
560
589
  // This will overwrite the default value
561
590
  if (component.defaultToCurrentDate) {
562
591
  component.initialValue = DateTime.now().toISO();
@@ -575,7 +604,7 @@ formComponents, allCriteriaInputs, instance, objectPropertyInputProps, associate
575
604
  suppressMilliseconds: true,
576
605
  });
577
606
  }
578
- // @Deprecrated
607
+ // @Deprecated
579
608
  // This will overwrite the default value
580
609
  if (component.defaultToCurrentTime) {
581
610
  component.initialValue = DateTime.now().toISOTime({
@@ -709,13 +738,16 @@ formComponents, allCriteriaInputs, instance, objectPropertyInputProps, associate
709
738
  : undefined,
710
739
  };
711
740
  }
712
- if (component.columns) {
741
+ else {
742
+ component = removeEmptySections(component);
743
+ }
744
+ if (component?.columns) {
713
745
  for (const column of component.columns) {
714
746
  column.components = await addObjectPropertiesToComponentProps(properties, column.components, allCriteriaInputs, instance, objectPropertyInputProps, associatedObject, autoSave, readOnly, undefined, undefined, queryAddresses, apiServices, isModal, fieldHeight, richTextEditor);
715
747
  }
716
748
  return component;
717
749
  }
718
- if (component.components) {
750
+ if (component?.components) {
719
751
  for (const item of component.components) {
720
752
  const nestedFieldProperty = properties.find((property) => property.id === item.key);
721
753
  if (item.type) {
@@ -14,6 +14,10 @@ export type FormProps = BaseProps & {
14
14
  instance?: ObjectInstance | Document;
15
15
  onChange: (id: string, value: unknown) => void;
16
16
  onValidationChange?: (errors: FieldErrors) => void;
17
+ associatedObject?: {
18
+ instanceId?: string;
19
+ propertyId?: string;
20
+ };
17
21
  };
18
22
  declare function FormRenderer(props: FormProps): React.JSX.Element;
19
23
  export default FormRenderer;
@@ -1,5 +1,5 @@
1
1
  import { useObject } from '@evoke-platform/context';
2
- import { isEqual } from 'lodash';
2
+ import { isEmpty, isEqual } from 'lodash';
3
3
  import React, { useEffect, useMemo, useState } from 'react';
4
4
  import { useForm } from 'react-hook-form';
5
5
  import { useResponsive } from '../../../theme';
@@ -12,7 +12,7 @@ import { convertDocToParameters, convertPropertiesToParams } from './components/
12
12
  import { handleValidation } from './components/ValidationFiles/Validation';
13
13
  import ValidationErrorDisplay from './components/ValidationFiles/ValidationErrorDisplay';
14
14
  function FormRenderer(props) {
15
- const { onSubmit, value, fieldHeight, richTextEditor, hideButtons, stickyFooter, onCancel, form, instance, onChange, onValidationChange, } = props;
15
+ const { onSubmit, value, fieldHeight, richTextEditor, hideButtons, stickyFooter, onCancel, form, instance, onChange, onValidationChange, associatedObject, } = props;
16
16
  const { entries, name: title, objectId, actionId, display } = form;
17
17
  const { register, unregister, setValue, reset, handleSubmit, formState: { errors, isSubmitted }, getValues, } = useForm({
18
18
  defaultValues: value,
@@ -99,10 +99,9 @@ function FormRenderer(props) {
99
99
  }, []);
100
100
  if (entries && parameters && (!actionId || action)) {
101
101
  return (React.createElement(React.Fragment, null,
102
- React.createElement(Box, { sx: {
102
+ ((isSubmitted && !isEmpty(errors)) || (isSmallerThanMd && hasSections) || title) && (React.createElement(Box, { sx: {
103
103
  paddingX: isSmallerThanMd ? 2 : 3,
104
104
  paddingTop: '0px',
105
- borderBottom: '2px solid #F4F6F8',
106
105
  } },
107
106
  React.createElement(Box, { sx: {
108
107
  display: 'flex',
@@ -111,13 +110,14 @@ function FormRenderer(props) {
111
110
  flexWrap: 'wrap',
112
111
  paddingY: isSm || isXs ? 2 : 3,
113
112
  } },
114
- React.createElement(Typography, { sx: {
113
+ title && (React.createElement(Typography, { sx: {
115
114
  fontSize: '20px',
116
115
  lineHeight: '30px',
117
116
  fontWeight: 700,
118
117
  flexGrow: '1',
119
- } }, title),
118
+ } }, title)),
120
119
  isSmallerThanMd && hasSections && (React.createElement(Box, { sx: {
120
+ color: '#212B36',
121
121
  display: 'flex',
122
122
  alignItems: 'center',
123
123
  maxHeight: '22px',
@@ -140,7 +140,7 @@ function FormRenderer(props) {
140
140
  fontWeight: 400,
141
141
  fontSize: '14px',
142
142
  }, onClick: handleCollapseAll }, "Collapse all")))),
143
- React.createElement(ValidationErrorDisplay, { formId: form.id, title: title })),
143
+ React.createElement(ValidationErrorDisplay, { formId: form.id, title: title, errors: errors, showSubmitError: isSubmitted }))),
144
144
  React.createElement(FormContext.Provider, { value: {
145
145
  fetchedOptions,
146
146
  setFetchedOptions: updateFetchedOptions,
@@ -159,26 +159,25 @@ function FormRenderer(props) {
159
159
  handleChange: onChange,
160
160
  triggerFieldReset,
161
161
  showSubmitError: isSubmitted,
162
+ associatedObject,
162
163
  } },
163
164
  React.createElement(Box, { sx: {
164
- padding: isModal ? '0px' : isSm || isXs ? 2 : 3,
165
- paddingBottom: '0px',
166
- paddingTop: !hasSections ? undefined : '0px',
165
+ paddingX: isSm || isXs ? 2 : 3,
166
+ // when rendering the default delete action, we don't want a border
167
+ borderTop: !form.id || isModal ? undefined : '1px solid #e9ecef',
167
168
  } },
168
169
  entries.map((entry, index) => (React.createElement(RecursiveEntryRenderer, { key: index, entry: entry, isDocument: !!(form.id === 'documentForm') }))),
169
170
  !hideButtons && (actionId || form.id === 'documentForm') && onSubmit && (React.createElement(Box, { sx: {
170
171
  ...(stickyFooter === false ? { position: 'static' } : { position: 'sticky' }),
171
- bottom: isModal ? -5 : isSmallerThanMd ? 0 : 24,
172
+ bottom: isModal || isSmallerThanMd ? 0 : 24,
172
173
  zIndex: 1000,
173
174
  borderTop: action?.type !== 'delete' ? '1px solid #f4f6f8' : 'none',
174
175
  backgroundColor: '#fff',
175
- paddingY: isSmallerThanMd ? '16px' : '20px',
176
- paddingX: isSmallerThanMd ? '16px' : '20px',
176
+ padding: isSmallerThanMd ? '16px' : '20px',
177
177
  display: 'flex',
178
178
  justifyContent: isXs ? 'center' : 'flex-end',
179
179
  alignItems: 'center',
180
180
  marginX: isSmallerThanMd ? -2 : -3,
181
- marginBottom: '1px',
182
181
  borderRadius: '0px 0px 6px 6px',
183
182
  } },
184
183
  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 })))))));
@@ -16,6 +16,10 @@ export type FormProps = BaseProps & {
16
16
  richTextEditor?: ComponentType<SimpleEditorProps>;
17
17
  onClose?: () => void;
18
18
  onSubmit?: (submission: Record<string, unknown>) => Promise<void>;
19
+ associatedObject?: {
20
+ instanceId?: string;
21
+ propertyId?: string;
22
+ };
19
23
  };
20
24
  declare function FormRendererContainer(props: FormProps): React.JSX.Element;
21
25
  export default FormRendererContainer;
@@ -1,5 +1,4 @@
1
1
  import { useApiServices, useApp, useAuthenticationContext, useNavigate, useObject, } from '@evoke-platform/context';
2
- import { LocalDateTime } from '@js-joda/core';
3
2
  import axios from 'axios';
4
3
  import { get, isArray, isEmpty, isEqual, merge, omit, pick, set, uniq } from 'lodash';
5
4
  import React, { useEffect, useState } from 'react';
@@ -7,10 +6,10 @@ import { Skeleton, Snackbar } from '../../core';
7
6
  import { Box } from '../../layout';
8
7
  import ErrorComponent from '../ErrorComponent';
9
8
  import { evalDefaultVals, processValueUpdate } from './components/DefaultValues';
10
- import { convertDocToEntries, encodePageSlug, formatDataToDoc, getEntryId, getPrefixedUrl, getUnnestedEntries, isAddressProperty, isEmptyWithDefault, normalizeDateTime, } from './components/utils';
9
+ import { convertDocToEntries, deleteDocuments, encodePageSlug, formatDataToDoc, formatSubmission, getEntryId, getPrefixedUrl, getUnnestedEntries, isAddressProperty, isEmptyWithDefault, } from './components/utils';
11
10
  import FormRenderer from './FormRenderer';
12
11
  function FormRendererContainer(props) {
13
- const { instanceId, pageNavigation, documentId, dataType, display, formId, stickyFooter, objectId, actionId, richTextEditor, } = props;
12
+ const { instanceId, pageNavigation, documentId, dataType, display, formId, stickyFooter, objectId, actionId, richTextEditor, onClose, onSubmit, associatedObject, } = props;
14
13
  const apiServices = useApiServices();
15
14
  const navigateTo = useNavigate();
16
15
  const { id: appId, defaultPages } = useApp();
@@ -98,10 +97,11 @@ function FormRendererContainer(props) {
98
97
  return;
99
98
  if (formId || action?.defaultFormId) {
100
99
  apiServices
101
- .get(getPrefixedUrl(`data/forms/${formId || action?.defaultFormId}`))
100
+ .get(getPrefixedUrl(`/forms/${formId || action?.defaultFormId}`))
102
101
  .then((evokeForm) => {
103
102
  if (evokeForm?.actionId === actionId) {
104
- setForm(evokeForm);
103
+ const form = onClose ? { ...evokeForm, name: '' } : evokeForm;
104
+ setForm(form);
105
105
  }
106
106
  else {
107
107
  setError(true);
@@ -111,24 +111,50 @@ function FormRendererContainer(props) {
111
111
  onError(error);
112
112
  });
113
113
  }
114
- else if (action && !action?.defaultFormId) {
114
+ else if (action) {
115
115
  apiServices
116
- .get(getPrefixedUrl(`data/forms?filter[where][actionId]=${action.id}`))
116
+ .get(getPrefixedUrl('/forms'), {
117
+ params: {
118
+ filter: {
119
+ where: {
120
+ actionId: action.id,
121
+ objectId: objectId,
122
+ },
123
+ },
124
+ },
125
+ })
117
126
  .then((matchingForms) => {
118
127
  if (matchingForms.length === 1) {
119
- if (matchingForms[0]?.actionId === actionId) {
120
- setForm(matchingForms[0]);
121
- }
122
- else {
123
- setError(true);
124
- }
128
+ const form = onClose ? { ...matchingForms[0], name: '' } : matchingForms[0];
129
+ setForm(form);
130
+ // use this default form if no delete form is found
131
+ }
132
+ else if (action.type === 'delete' && instance) {
133
+ setForm({
134
+ id: '',
135
+ name: '',
136
+ entries: [
137
+ {
138
+ type: 'content',
139
+ html: `<p>You are about to delete <strong>${instance.name}</strong>. Deleted records can't be restored. Are you sure you want to continue?</p>`,
140
+ },
141
+ ],
142
+ objectId: objectId,
143
+ actionId: '_delete',
144
+ display: {
145
+ submitLabel: 'Delete',
146
+ },
147
+ });
148
+ }
149
+ else if (instance || action.type === 'create') {
150
+ setError(true);
125
151
  }
126
152
  })
127
153
  .catch((error) => {
128
154
  onError(error);
129
155
  });
130
156
  }
131
- }, [action]);
157
+ }, [action, objectId, instance]);
132
158
  useEffect(() => {
133
159
  if (form?.id === 'documentForm') {
134
160
  setParameters([
@@ -174,54 +200,6 @@ function FormRendererContainer(props) {
174
200
  };
175
201
  getInitialValues();
176
202
  }, [form, instance, sanitizedObject]);
177
- const uploadDocuments = async (files, metadata) => {
178
- const allDocuments = [];
179
- const formData = new FormData();
180
- for (const [index, file] of files.entries()) {
181
- if ('size' in file) {
182
- formData.append(`files[${index}]`, file);
183
- }
184
- else {
185
- allDocuments.push(file);
186
- }
187
- }
188
- if (metadata) {
189
- for (const [key, value] of Object.entries(metadata)) {
190
- formData.append(key, value);
191
- }
192
- }
193
- const docs = await apiServices?.post(getPrefixedUrl(`/objects/${form?.objectId}/instances/${instanceId}/documents`), formData);
194
- return allDocuments.concat(docs?.map((doc) => ({
195
- id: doc.id,
196
- name: doc.name,
197
- })) ?? []);
198
- };
199
- const deleteDocuments = async (submittedFields, requestSuccess, action) => {
200
- const documentProperties = action?.parameters
201
- ? action.parameters.filter((param) => param.type === 'document')
202
- : sanitizedObject?.properties?.filter((prop) => prop.type === 'document');
203
- for (const docProperty of documentProperties ?? []) {
204
- const savedValue = submittedFields[docProperty.id];
205
- const originalValue = instance?.[docProperty.id];
206
- const documentsToRemove = requestSuccess
207
- ? (originalValue?.filter((file) => !savedValue?.some((f) => f.id === file.id)) ?? [])
208
- : (savedValue?.filter((file) => !originalValue?.some((f) => f.id === file.id)) ?? []);
209
- for (const doc of documentsToRemove) {
210
- try {
211
- await apiServices?.delete(getPrefixedUrl(`/objects/${form?.objectId}/instances/${instanceId}/documents/${doc.id}`));
212
- }
213
- catch (error) {
214
- if (error) {
215
- setSnackbarError({
216
- showAlert: true,
217
- message: `An error occurred while removing document '${doc.name}'`,
218
- isError: true,
219
- });
220
- }
221
- }
222
- }
223
- }
224
- };
225
203
  const onSubmissionSuccess = (updatedInstance) => {
226
204
  setSnackbarError({
227
205
  showAlert: true,
@@ -247,47 +225,7 @@ function FormRendererContainer(props) {
247
225
  const saveHandler = async (submission) => {
248
226
  if (!form)
249
227
  return;
250
- // checks for a file upload and handles getting the new format to upload
251
- for (const [key, value] of Object.entries(submission)) {
252
- if (isArray(value)) {
253
- const fileInArray = value.some((item) => item instanceof File);
254
- if (fileInArray) {
255
- try {
256
- const uploadedDocuments = await uploadDocuments(value, {
257
- type: '',
258
- view_permission: '',
259
- });
260
- submission[key] = uploadedDocuments;
261
- }
262
- catch (err) {
263
- if (err) {
264
- setSnackbarError({
265
- showAlert: true,
266
- message: `An error occurred while uploading associated documents`,
267
- isError: true,
268
- });
269
- }
270
- return;
271
- }
272
- }
273
- // if there are address fields with no value address needs to be set to undefined to be able to submit
274
- }
275
- else if (typeof value === 'object' && value !== null) {
276
- if (Object.values(value).every((v) => v === undefined)) {
277
- submission[key] = undefined;
278
- // only submit the name and id of a related object
279
- }
280
- else if ('id' in value && 'name' in value) {
281
- submission[key] = pick(value, 'id', 'name');
282
- }
283
- }
284
- else if ((value === '' && !document) || value === undefined) {
285
- submission[key] = null;
286
- }
287
- else if (value instanceof LocalDateTime) {
288
- submission[key] = normalizeDateTime(value);
289
- }
290
- }
228
+ submission = await formatSubmission(submission, apiServices, objectId, instanceId, setSnackbarError);
291
229
  if (document) {
292
230
  submission = formatDataToDoc(submission);
293
231
  }
@@ -331,9 +269,9 @@ function FormRendererContainer(props) {
331
269
  ?.filter((property) => !property.formula && property.type !== 'collection')
332
270
  .map((property) => property.id) ?? []),
333
271
  });
334
- if (response) {
272
+ if (response && sanitizedObject && instance) {
335
273
  onSubmissionSuccess(response);
336
- deleteDocuments(submission, !!response, action ?? undefined);
274
+ deleteDocuments(submission, !!response, apiServices, sanitizedObject, instance, action ?? undefined, setSnackbarError);
337
275
  }
338
276
  }
339
277
  }
@@ -393,7 +331,17 @@ function FormRendererContainer(props) {
393
331
  const fieldValue = instanceData?.[fieldId] ??
394
332
  instanceData?.metadata?.[fieldId];
395
333
  const parameter = parameters?.find((param) => param.id === fieldId);
396
- if (entry.type !== 'readonlyField' && isEmptyWithDefault(fieldValue, entry, instanceData)) {
334
+ if (associatedObject?.propertyId === fieldId && associatedObject?.instanceId && parameter) {
335
+ try {
336
+ const instance = await apiServices.get(getPrefixedUrl(`/objects/${parameter.objectId}/instances/${associatedObject.instanceId}`));
337
+ result[associatedObject.propertyId] = instance;
338
+ }
339
+ catch (error) {
340
+ console.error(error);
341
+ }
342
+ }
343
+ else if (entry.type !== 'readonlyField' &&
344
+ isEmptyWithDefault(fieldValue, entry, instanceData)) {
397
345
  if (fieldId && parameters && parameters.length > 0) {
398
346
  const defaultValuesArray = await evalDefaultVals(parameters, entry, fieldValue, fieldId, apiServices, userAccount, instanceData);
399
347
  for (const { fieldId, fieldValue } of defaultValuesArray) {
@@ -467,10 +415,9 @@ function FormRendererContainer(props) {
467
415
  backgroundColor: '#ffffff',
468
416
  borderRadius: '6px',
469
417
  padding: '0px',
470
- border: !isLoading ? '1px solid #dbe0e4' : undefined,
418
+ border: !isLoading && !onClose ? '1px solid #dbe0e4' : undefined,
471
419
  } },
472
- !isLoading ? (React.createElement(React.Fragment, null,
473
- React.createElement(FormRenderer, { onSubmit: saveHandler, hideButtons: document && !hasDocumentUpdateAccess, richTextEditor: richTextEditor, fieldHeight: display?.fieldHeight ?? 'medium', value: formData, stickyFooter: stickyFooter, form: form, instance: dataType !== 'documents' ? instance : document, onChange: onChange, onCancel: onCancel }))) : (React.createElement(Box, { sx: { padding: '20px' } },
420
+ !isLoading ? (React.createElement(FormRenderer, { onSubmit: onSubmit ?? saveHandler, hideButtons: document && !hasDocumentUpdateAccess, richTextEditor: richTextEditor, fieldHeight: display?.fieldHeight ?? 'medium', value: formData, stickyFooter: stickyFooter, form: form, instance: dataType !== 'documents' ? instance : document, onChange: onChange, onCancel: onClose ?? onCancel, associatedObject: associatedObject })) : (React.createElement(Box, { sx: { padding: '20px' } },
474
421
  React.createElement(Box, { display: 'flex', width: '100%', justifyContent: 'space-between' },
475
422
  React.createElement(Skeleton, { width: '78%', sx: { borderRadius: '8px', height: '40px' } }),
476
423
  React.createElement(Skeleton, { width: '20%', sx: { borderRadius: '8px', height: '40px' } })),
@@ -20,6 +20,10 @@ type FormContextType = {
20
20
  fieldHeight?: 'small' | 'medium';
21
21
  triggerFieldReset?: boolean;
22
22
  showSubmitError?: boolean;
23
+ associatedObject?: {
24
+ instanceId?: string;
25
+ propertyId?: string;
26
+ };
23
27
  };
24
28
  export declare const FormContext: import("react").Context<FormContextType>;
25
29
  export {};
@@ -1,14 +1,18 @@
1
- import { Action, ActionType, EvokeForm, InputParameter, Obj } from '@evoke-platform/context';
1
+ import { Action, InputParameter, Obj } from '@evoke-platform/context';
2
2
  import React from 'react';
3
+ import { FieldValues } from 'react-hook-form';
3
4
  export type ActionDialogProps = {
4
5
  open: boolean;
5
6
  onClose: () => void;
6
7
  action: Action;
7
- instanceInput: Record<string, unknown>;
8
- handleSubmit: (actionType: ActionType, input: Record<string, unknown> | undefined, instanceId?: string, setSubmitting?: (value: boolean) => void) => void;
8
+ handleSubmit: (action: Action, input: FieldValues, instanceId?: string, setSubmitting?: (value: boolean) => void) => void;
9
9
  object: Obj;
10
10
  instanceId?: string;
11
- relatedParameter?: InputParameter;
12
- relatedForm?: EvokeForm;
11
+ relatedParameter: InputParameter;
12
+ relatedFormId?: string;
13
+ associatedObject?: {
14
+ instanceId?: string;
15
+ propertyId?: string;
16
+ };
13
17
  };
14
18
  export declare const ActionDialog: (props: ActionDialogProps) => React.JSX.Element;