diff --git a/packages/volto/src/components/manage/Form/ModalForm.jsx b/packages/volto/src/components/manage/Form/ModalForm.jsx index 4bc39652c1..e52a8ef77a 100644 --- a/packages/volto/src/components/manage/Form/ModalForm.jsx +++ b/packages/volto/src/components/manage/Form/ModalForm.jsx @@ -5,7 +5,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { keys, map } from 'lodash'; +import { isEqual, keys, map } from 'lodash'; import { Button, Form as UiForm, @@ -75,6 +75,7 @@ class ModalForm extends Component { submitError: PropTypes.string, onSubmit: PropTypes.func.isRequired, onCancel: PropTypes.func, + onChangeFormData: PropTypes.func, open: PropTypes.bool, submitLabel: PropTypes.string, loading: PropTypes.bool, @@ -206,6 +207,20 @@ class ModalForm extends Component { }); } + /** + * On updates caused by props change + * if errors from Backend come, these will be shown to their corresponding Fields + * also the first Tab to have any errors will be selected + * @param {Object} prevProps + */ + async componentDidUpdate(prevProps, prevState) { + if (this.props.onChangeFormData) { + if (!isEqual(prevState?.formData, this.state.formData)) { + this.props.onChangeFormData(this.state.formData); + } + } + } + /** * Render method. * @method render diff --git a/packages/volto/src/components/manage/Widgets/SchemaWidget.jsx b/packages/volto/src/components/manage/Widgets/SchemaWidget.jsx index 722a2d06d0..bd8a423afd 100644 --- a/packages/volto/src/components/manage/Widgets/SchemaWidget.jsx +++ b/packages/volto/src/components/manage/Widgets/SchemaWidget.jsx @@ -662,9 +662,16 @@ config.registerUtility({ * @param {Object} intl * @param {*} fieldsets * @param {Boolean} allowEditId + * @param {Object} extraFields * @return {Object} - schema */ -const schemaField = (factory, intl, fieldsets, allowEditId) => { +const schemaField = ( + factory, + intl, + fieldsets, + allowEditId, + extraFields = {}, +) => { const utility = config.getUtility({ name: factory, type: 'fieldFactoryProperties', @@ -697,6 +704,7 @@ const schemaField = (factory, intl, fieldsets, allowEditId) => { id: 'default', title: 'default', fields: [ + ...keys(extraFields), ...(allowEditId ? ['id'] : []), ...['title', 'description', 'parentFieldSet', 'queryParameterName'], ...keys(properties), @@ -705,6 +713,7 @@ const schemaField = (factory, intl, fieldsets, allowEditId) => { }, ], properties: { + ...extraFields, ...(allowEditId ? { id: { @@ -949,7 +958,10 @@ class SchemaWidget extends Component { * @returns {undefined} */ onAddField(values) { - const fieldId = slugify(values.title, keys(this.props.value.properties)); + const fieldId = slugify( + values.id || values.title, + keys(this.props.value.properties), + ); const currentFieldsetFields = this.props.value.fieldsets[this.state.currentFieldset].fields; const hasChangeNote = currentFieldsetFields.indexOf('changeNote') > -1; @@ -966,6 +978,10 @@ class SchemaWidget extends Component { type: 'fieldFactoryInitialData', }); + const multiple = + values.factory === 'Multiple Choice' || + values.factory === 'label_multi_choice_field'; + const initialData = utility.method ? utility.method(this.props.intl) : { @@ -986,10 +1002,11 @@ class SchemaWidget extends Component { properties: { ...this.props.value.properties, [fieldId]: { - title: values.title, - description: values.description, id: fieldId, ...omit(initialData, ['required']), + ...omit(values, ['factory', 'required', 'id', 'parentFieldset']), + ...formatTextareaToArray(values.values), + ...formatTextareaToChoices(values.values, multiple), }, }, required: [ @@ -1303,7 +1320,7 @@ class SchemaWidget extends Component { */ onShowAddField(event) { this.setState({ - addField: true, + addField: '', }); event.preventDefault(); } @@ -1694,21 +1711,24 @@ class SchemaWidget extends Component { { + this.setState({ + addField: data.factory, + }); }} - schema={{ - fieldsets: [ - { - id: 'default', - title: this.props.intl.formatMessage(messages.default), - fields: ['factory', 'title', 'description', 'required'], - }, - ], - properties: { + title={this.props.intl.formatMessage(messages.addField)} + formData={{}} + schema={schemaField( + this.state.addField, + this.props.intl, + this.props.value.fieldsets.filter( + (fieldset) => + !fieldset.behavior || + fieldset.id === 'default' || + fieldset.behavior.includes('generated'), + ), + this.props.allowEditId, + { factory: { type: 'string', factory: 'Choice', @@ -1719,22 +1739,8 @@ class SchemaWidget extends Component { filterChoices: filterFactory, additionalChoices: additionalFactory, }, - title: { - type: 'string', - title: this.props.intl.formatMessage(messages.title), - }, - description: { - type: 'string', - widget: 'textarea', - title: this.props.intl.formatMessage(messages.description), - }, - required: { - type: 'boolean', - title: this.props.intl.formatMessage(messages.required), - }, }, - required: ['type', 'title'], - }} + )} /> )} {this.state.editField !== null && (