@evoke-platform/ui-components 1.10.0-testing.3 → 1.10.0-testing.4
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.
- package/dist/published/components/custom/FormV2/components/FormFieldTypes/CollectionFiles/RepeatableField.d.ts +0 -3
- package/dist/published/components/custom/FormV2/components/FormFieldTypes/CollectionFiles/RepeatableField.js +28 -24
- package/dist/published/components/custom/FormV2/components/RecursiveEntryRenderer.js +2 -4
- package/dist/published/components/custom/FormV2/tests/FormRenderer.test.js +2 -0
- package/dist/published/components/custom/FormV2/tests/test-data.js +2 -0
- package/dist/published/stories/FormRendererData.js +2 -0
- package/package.json +1 -1
|
@@ -6,9 +6,6 @@ export type ObjectPropertyInputProps = {
|
|
|
6
6
|
criteria?: object;
|
|
7
7
|
viewLayout?: ViewLayoutEntityReference;
|
|
8
8
|
entry: InputField | InputParameterReference | ReadonlyField;
|
|
9
|
-
createActionId?: string;
|
|
10
|
-
updateActionId?: string;
|
|
11
|
-
deleteActionId?: string;
|
|
12
9
|
};
|
|
13
10
|
declare const RepeatableField: (props: ObjectPropertyInputProps) => React.JSX.Element;
|
|
14
11
|
export default RepeatableField;
|
|
@@ -34,7 +34,7 @@ const styles = {
|
|
|
34
34
|
},
|
|
35
35
|
};
|
|
36
36
|
const RepeatableField = (props) => {
|
|
37
|
-
const { fieldDefinition, canUpdateProperty, criteria, viewLayout, entry
|
|
37
|
+
const { fieldDefinition, canUpdateProperty, criteria, viewLayout, entry } = props;
|
|
38
38
|
const { fetchedOptions, setFetchedOptions, instance, width } = useFormContext();
|
|
39
39
|
const { isBelow } = useWidgetSize({
|
|
40
40
|
scroll: false,
|
|
@@ -62,9 +62,9 @@ const RepeatableField = (props) => {
|
|
|
62
62
|
showAlert: false,
|
|
63
63
|
isError: false,
|
|
64
64
|
});
|
|
65
|
-
const createAction = relatedObject?.actions?.find((item) => item.id === createActionId);
|
|
66
|
-
const updateAction = relatedObject?.actions?.find((item) => item.id === updateActionId);
|
|
67
|
-
const deleteAction = relatedObject?.actions?.find((item) => item.id === deleteActionId);
|
|
65
|
+
const createAction = relatedObject?.actions?.find((item) => item.id === entry.display?.createActionId);
|
|
66
|
+
const updateAction = relatedObject?.actions?.find((item) => item.id === entry.display?.updateActionId);
|
|
67
|
+
const deleteAction = relatedObject?.actions?.find((item) => item.id === entry.display?.deleteActionId);
|
|
68
68
|
function getForm(setForm, action, formId) {
|
|
69
69
|
if (formId || action?.defaultFormId) {
|
|
70
70
|
apiServices
|
|
@@ -209,11 +209,11 @@ const RepeatableField = (props) => {
|
|
|
209
209
|
}, [fetchCriteriaObjects, relatedObject]);
|
|
210
210
|
useEffect(() => {
|
|
211
211
|
if (createAction && !createForm)
|
|
212
|
-
getForm(setCreateForm, createAction
|
|
212
|
+
getForm(setCreateForm, createAction, entry.display?.createFormId);
|
|
213
213
|
if (updateAction && !updateForm)
|
|
214
|
-
getForm(setUpdateForm, updateAction
|
|
214
|
+
getForm(setUpdateForm, updateAction, entry.display?.updateFormId);
|
|
215
215
|
if (deleteAction && !deleteForm)
|
|
216
|
-
getForm(setDeleteForm, deleteAction
|
|
216
|
+
getForm(setDeleteForm, deleteAction, entry.display?.deleteFormId);
|
|
217
217
|
}, [entry.display, createAction, updateAction, deleteAction]);
|
|
218
218
|
useEffect(() => {
|
|
219
219
|
if (relatedObject?.rootObjectId) {
|
|
@@ -269,10 +269,10 @@ const RepeatableField = (props) => {
|
|
|
269
269
|
if (fieldDefinition.objectId && canUpdateProperty && !fetchedOptions[`${fieldDefinition.id}HasCreateAction`]) {
|
|
270
270
|
apiServices
|
|
271
271
|
.get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/instances/checkAccess`), {
|
|
272
|
-
params: { action: 'execute', field:
|
|
272
|
+
params: { action: 'execute', field: entry.display?.createActionId, scope: 'data' },
|
|
273
273
|
})
|
|
274
274
|
.then((checkAccess) => {
|
|
275
|
-
const action = relatedObject.actions?.find((item) => item.id ===
|
|
275
|
+
const action = relatedObject.actions?.find((item) => item.id === entry.display?.createActionId);
|
|
276
276
|
if (action && fieldDefinition.relatedPropertyId) {
|
|
277
277
|
const { relatedObjectProperty, criteria } = retrieveCriteria(fieldDefinition.relatedPropertyId, action, relatedObject);
|
|
278
278
|
if (!criteria || JSON.stringify(criteria).includes('{{{input.') || !relatedObjectProperty) {
|
|
@@ -346,17 +346,21 @@ const RepeatableField = (props) => {
|
|
|
346
346
|
}, variant: "text", onClick: () => setReloadOnErrorTrigger((prevState) => !prevState) }, "Retry")));
|
|
347
347
|
const save = async (input) => {
|
|
348
348
|
const action = relatedObject?.actions?.find((a) => a.id ===
|
|
349
|
-
(dialogType === 'create'
|
|
349
|
+
(dialogType === 'create'
|
|
350
|
+
? entry.display?.createActionId
|
|
351
|
+
: dialogType === 'update'
|
|
352
|
+
? entry.display?.updateActionId
|
|
353
|
+
: entry.display?.deleteActionId));
|
|
350
354
|
// when save is called we know that fieldDefinition is a parameter and fieldDefinition.objectId is defined
|
|
351
355
|
input = await formatSubmission(input, apiServices, fieldDefinition.objectId, selectedInstanceId, action?.type === 'update' ? updateForm : undefined);
|
|
352
|
-
if (action?.type === 'create' && createActionId) {
|
|
356
|
+
if (action?.type === 'create' && entry.display?.createActionId) {
|
|
353
357
|
const updatedInput = {
|
|
354
358
|
...input,
|
|
355
359
|
[fieldDefinition?.relatedPropertyId]: { id: instance?.id },
|
|
356
360
|
};
|
|
357
361
|
try {
|
|
358
362
|
const instance = await apiServices.post(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/instances/actions`), {
|
|
359
|
-
actionId: createActionId,
|
|
363
|
+
actionId: entry.display?.createActionId,
|
|
360
364
|
input: updatedInput,
|
|
361
365
|
});
|
|
362
366
|
const hasAccess = fieldDefinition?.relatedPropertyId && fieldDefinition.relatedPropertyId in instance;
|
|
@@ -519,12 +523,12 @@ const RepeatableField = (props) => {
|
|
|
519
523
|
users?.find((user) => get(relatedInstance, `${prop.id.split('.')[0]}.id`) === user.id)?.status === 'Inactive' &&
|
|
520
524
|
' (Inactive)')))))),
|
|
521
525
|
canUpdateProperty && (React.createElement(Box, { sx: { mt: 2, display: 'flex', gap: 1 } },
|
|
522
|
-
React.createElement(IconButton, { onClick: () => editRow(relatedInstance.id) },
|
|
526
|
+
entry.display?.updateActionId && (React.createElement(IconButton, { onClick: () => editRow(relatedInstance.id) },
|
|
523
527
|
React.createElement(Tooltip, { title: "Edit" },
|
|
524
|
-
React.createElement(Edit, null))),
|
|
525
|
-
React.createElement(IconButton, { onClick: () => deleteRow(relatedInstance.id) },
|
|
528
|
+
React.createElement(Edit, null)))),
|
|
529
|
+
entry.display?.deleteActionId && (React.createElement(IconButton, { onClick: () => deleteRow(relatedInstance.id) },
|
|
526
530
|
React.createElement(Tooltip, { title: "Delete" },
|
|
527
|
-
React.createElement(TrashCan, { sx: { ':hover': { color: '#A12723' } } }))))))))))) : (React.createElement(TableContainer, { sx: {
|
|
531
|
+
React.createElement(TrashCan, { sx: { ':hover': { color: '#A12723' } } })))))))))))) : (React.createElement(TableContainer, { sx: {
|
|
528
532
|
borderRadius: '6px',
|
|
529
533
|
border: '1px solid #919EAB3D',
|
|
530
534
|
boxShadow: 'none',
|
|
@@ -544,7 +548,7 @@ const RepeatableField = (props) => {
|
|
|
544
548
|
cursor: 'pointer',
|
|
545
549
|
},
|
|
546
550
|
}
|
|
547
|
-
: {}, onClick: updateActionId &&
|
|
551
|
+
: {}, onClick: entry.display?.updateActionId &&
|
|
548
552
|
canUpdateProperty &&
|
|
549
553
|
prop.id === 'name'
|
|
550
554
|
? () => editRow(relatedInstance.id)
|
|
@@ -554,19 +558,19 @@ const RepeatableField = (props) => {
|
|
|
554
558
|
users?.find((user) => get(relatedInstance, `${prop.id.split('.')[0]}.id`) === user.id)?.status === 'Inactive' && (React.createElement("span", null, ' (Inactive)'))))));
|
|
555
559
|
}),
|
|
556
560
|
canUpdateProperty && (React.createElement(TableCell, { sx: { width: '80px' } },
|
|
557
|
-
updateActionId && (React.createElement(IconButton, { "aria-label": `edit-collection-instance-${index}`, onClick: () => editRow(relatedInstance.id) },
|
|
561
|
+
entry.display?.updateActionId && (React.createElement(IconButton, { "aria-label": `edit-collection-instance-${index}`, onClick: () => editRow(relatedInstance.id) },
|
|
558
562
|
React.createElement(Tooltip, { title: "Edit" },
|
|
559
563
|
React.createElement(Edit, null)))),
|
|
560
|
-
React.createElement(IconButton, { "aria-label": `delete-collection-instance-${index}`, onClick: () => deleteRow(relatedInstance.id) },
|
|
564
|
+
entry.display?.deleteActionId && (React.createElement(IconButton, { "aria-label": `delete-collection-instance-${index}`, onClick: () => deleteRow(relatedInstance.id) },
|
|
561
565
|
React.createElement(Tooltip, { title: "Delete" },
|
|
562
|
-
React.createElement(TrashCan, { sx: { ':hover': { color: '#A12723' } } })))))))))))),
|
|
563
|
-
hasCreateAction && createActionId && (React.createElement(Button, { variant: "contained", sx: styles.addButton, onClick: addRow, "aria-label": 'Add' }, "Add"))),
|
|
566
|
+
React.createElement(TrashCan, { sx: { ':hover': { color: '#A12723' } } }))))))))))))),
|
|
567
|
+
hasCreateAction && entry.display?.createActionId && (React.createElement(Button, { variant: "contained", sx: styles.addButton, onClick: addRow, "aria-label": 'Add' }, "Add"))),
|
|
564
568
|
relatedObject && openDialog && (React.createElement(ActionDialog, { object: relatedObject, open: openDialog, onClose: () => setOpenDialog(false), onSubmit: save, action: relatedObject?.actions?.find((a) => a.id ===
|
|
565
569
|
(dialogType === 'create'
|
|
566
|
-
? createActionId
|
|
570
|
+
? entry.display?.createActionId
|
|
567
571
|
: dialogType === 'update'
|
|
568
|
-
? updateActionId
|
|
569
|
-
: deleteActionId)), relatedFormId: dialogType === 'create'
|
|
572
|
+
? entry.display?.updateActionId
|
|
573
|
+
: entry.display?.deleteActionId)), relatedFormId: dialogType === 'create'
|
|
570
574
|
? createForm?.id
|
|
571
575
|
: dialogType === 'update'
|
|
572
576
|
? updateForm?.id
|
|
@@ -90,9 +90,7 @@ export function RecursiveEntryRenderer(props) {
|
|
|
90
90
|
? display?.defaultValue.orderBy
|
|
91
91
|
: undefined, defaultValueCriteria: typeof display?.defaultValue === 'object' && 'criteria' in display.defaultValue
|
|
92
92
|
? display?.defaultValue?.criteria
|
|
93
|
-
: undefined, viewLayout: display?.viewLayout, hasDescription: !!display?.description,
|
|
94
|
-
// formId={display?.createFormId} // TODO: this should be added as part of the builder update
|
|
95
|
-
createActionId: '_create' })));
|
|
93
|
+
: undefined, viewLayout: display?.viewLayout, hasDescription: !!display?.description, formId: display?.createFormId, createActionId: display?.createActionId })));
|
|
96
94
|
}
|
|
97
95
|
else if (fieldDefinition.type === 'user') {
|
|
98
96
|
return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
|
|
@@ -101,7 +99,7 @@ export function RecursiveEntryRenderer(props) {
|
|
|
101
99
|
else if (fieldDefinition.type === 'collection') {
|
|
102
100
|
return fieldDefinition?.manyToManyPropertyId ? (middleObject && initialMiddleObjectInstances && (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
|
|
103
101
|
React.createElement(DropdownRepeatableField, { initialMiddleObjectInstances: fetchedOptions[`${entryId}MiddleObjectInstances`] || initialMiddleObjectInstances, fieldDefinition: fieldDefinition, id: entryId, middleObject: middleObject, readOnly: entry.type === 'readonlyField', criteria: validation?.criteria, hasDescription: !!display?.description })))) : (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
|
|
104
|
-
React.createElement(RepeatableField, { fieldDefinition: fieldDefinition, canUpdateProperty: entry.type !== 'readonlyField', criteria: validation?.criteria, viewLayout: display?.viewLayout, entry: entry
|
|
102
|
+
React.createElement(RepeatableField, { fieldDefinition: fieldDefinition, canUpdateProperty: entry.type !== 'readonlyField', criteria: validation?.criteria, viewLayout: display?.viewLayout, entry: entry })));
|
|
105
103
|
}
|
|
106
104
|
else if (fieldDefinition.type === 'richText') {
|
|
107
105
|
return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) }, richTextEditor ? (React.createElement(richTextEditor, {
|
|
@@ -650,6 +650,7 @@ describe('Form component', () => {
|
|
|
650
650
|
parameterId: 'specialtyType',
|
|
651
651
|
display: {
|
|
652
652
|
label: 'Speciality Type',
|
|
653
|
+
createActionId: '_create',
|
|
653
654
|
},
|
|
654
655
|
},
|
|
655
656
|
],
|
|
@@ -922,6 +923,7 @@ describe('Form component', () => {
|
|
|
922
923
|
display: {
|
|
923
924
|
label: 'Speciality Type',
|
|
924
925
|
relatedObjectDisplay: 'dropdown',
|
|
926
|
+
createActionId: '_create',
|
|
925
927
|
},
|
|
926
928
|
},
|
|
927
929
|
],
|