Modal form improvements.

plone · Nov 28, 2024 · 3e6dfb7 · 3e6dfb7
1 parent a6d1466
commit 3e6dfb7
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 35 deletions.
diff --git 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
@@ -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 {
           <ModalForm
             onSubmit={this.onAddField}
             onCancel={this.onCancel}
-            title={this.props.intl.formatMessage(messages.addField)}
-            formData={{
-              type: '',
-              id: '',
-              title: '',
+            onChangeFormData={(data) => {
+              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 && (