Merge pull request #225 from plone/nested-schemas

Added support for nested schemas.
plone · Jul 19, 2018 · 492df06 · 492df06
2 parents dc58817 + a609635
commit 492df06
Show file tree

Hide file tree

Showing 4 changed files with 124 additions and 15 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@
 ### Added
 
 * Add Pastanaga Icon System @sneridagh
+* Support for nested schemas @robgietema
 
 ### Changes
 

diff --git a/src/components/manage/Form/Form.jsx b/src/components/manage/Form/Form.jsx
@@ -82,6 +82,7 @@ class Form extends Component {
         }),
       ),
       properties: PropTypes.objectOf(PropTypes.any),
+      definitions: PropTypes.objectOf(PropTypes.any),
       required: PropTypes.arrayOf(PropTypes.string),
     }).isRequired,
     formData: PropTypes.objectOf(PropTypes.any),
@@ -185,12 +186,24 @@ class Form extends Component {
    * @returns {undefined}
    */
   onChangeField(id, value) {
-    this.setState({
-      formData: {
-        ...this.state.formData,
-        [id]: value || null,
-      },
-    });
+    if (id.indexOf('|') !== -1) {
+      this.setState({
+        formData: {
+          ...this.state.formData,
+          [id.split('|')[0]]: {
+            ...this.state.formData[id.split('|')[0]],
+            [id.split('|')[1]]: value || null,
+          },
+        },
+      });
+    } else {
+      this.setState({
+        formData: {
+          ...this.state.formData,
+          [id]: value || null,
+        },
+      });
+    }
   }
 
   /**
@@ -281,8 +294,18 @@ class Form extends Component {
     const errors = {};
     map(this.props.schema.fieldsets, fieldset =>
       map(fieldset.fields, fieldId => {
-        const field = this.props.schema.properties[fieldId];
-        const data = this.state.formData[fieldId];
+        const field =
+          fieldId.indexOf('|') !== -1
+            ? this.props.schema.definitions[fieldId.split('|')[0]].properties[
+                fieldId.split('|')[1]
+              ]
+            : this.props.schema.properties[fieldId];
+
+        const data =
+          fieldId.indexOf('|') !== -1
+            ? this.state.formData[fieldId.split('|')[0]] &&
+              this.state.formData[fieldId.split('|')[0]][fieldId.split('|')[1]]
+            : this.state.formData[fieldId];
         if (this.props.schema.required.indexOf(fieldId) !== -1) {
           if (field.type !== 'boolean' && !data) {
             errors[fieldId] = errors[field] || [];
@@ -440,9 +463,20 @@ class Form extends Component {
                     ),
                     ...map(item.fields, field => (
                       <Field
-                        {...schema.properties[field]}
+                        {...(field.indexOf('|') !== -1
+                          ? schema.definitions[field.split('|')[0]].properties[
+                              field.split('|')[1]
+                            ]
+                          : schema.properties[field])}
                         id={field}
-                        value={this.state.formData[field]}
+                        value={
+                          field.indexOf('|') !== -1
+                            ? this.state.formData[field.split('|')[0]] &&
+                              this.state.formData[field.split('|')[0]][
+                                field.split('|')[1]
+                              ]
+                            : this.state.formData[field]
+                        }
                         required={schema.required.indexOf(field) !== -1}
                         onChange={this.onChangeField}
                         key={field}
@@ -483,9 +517,19 @@ class Form extends Component {
                 )}
                 {map(schema.fieldsets[0].fields, field => (
                   <Field
-                    {...schema.properties[field]}
+                    {...(field.indexOf('|') !== -1
+                      ? schema.definitions[field.split('|')[0]].properties[
+                          field.split('|')[1]
+                        ]
+                      : schema.properties[field])}
                     id={field}
-                    value={this.state.formData[field]}
+                    value={
+                      field.indexOf('|') !== -1
+                        ? this.state.formData[field.split('|')[0]][
+                            field.split('|')[1]
+                          ]
+                        : this.state.formData[field]
+                    }
                     required={schema.required.indexOf(field) !== -1}
                     onChange={this.onChangeField}
                     key={field}

diff --git a/src/reducers/schema/schema.js b/src/reducers/schema/schema.js
@@ -3,6 +3,17 @@
  * @module reducers/schema/schema
  */
 
+import {
+  flatten,
+  filter,
+  keys,
+  omitBy,
+  pickBy,
+  isPlainObject,
+  isArray,
+  map,
+} from 'lodash';
+
 import { GET_SCHEMA } from '../../constants/ActionTypes';
 
 const initialState = {
@@ -34,7 +45,53 @@ export default function schema(state = initialState, action = {}) {
         error: null,
         loading: false,
         loaded: true,
-        schema: action.result,
+        schema: {
+          ...action.result,
+          required: [
+            ...action.result.required,
+            ...flatten(
+              map(keys(pickBy(action.result.properties, isArray)), fieldset =>
+                map(
+                  action.result.definitions[fieldset].required,
+                  required => `${fieldset}|${required}`,
+                ),
+              ),
+            ),
+          ],
+          fieldsets:
+            action.result.fieldsets ||
+            filter(
+              [
+                {
+                  fields: keys(
+                    omitBy(
+                      pickBy(action.result.properties, isPlainObject),
+                      field => field.readonly,
+                    ),
+                  ),
+                  id: 'default',
+                  title: 'Default',
+                },
+                ...map(
+                  keys(
+                    omitBy(
+                      pickBy(action.result.properties, isArray),
+                      field => field.readonly,
+                    ),
+                  ),
+                  fieldset => ({
+                    fields: map(
+                      keys(action.result.definitions[fieldset].properties),
+                      field => `${fieldset}|${field}`,
+                    ),
+                    id: fieldset,
+                    title: action.result.definitions[fieldset].title,
+                  }),
+                ),
+              ],
+              fieldset => fieldset.fields.length > 0,
+            ),
+        },
       };
     case `${GET_SCHEMA}_FAIL`:
       return {

diff --git a/src/reducers/schema/schema.test.js b/src/reducers/schema/schema.test.js
@@ -28,13 +28,20 @@ describe('Schema reducer', () => {
     expect(
       schema(undefined, {
         type: `${GET_SCHEMA}_SUCCESS`,
-        result: 'My schema',
+        result: {
+          required: [],
+          properties: {},
+        },
       }),
     ).toEqual({
       error: null,
       loaded: true,
       loading: false,
-      schema: 'My schema',
+      schema: {
+        fieldsets: [],
+        required: [],
+        properties: {},
+      },
     });
   });