#48 Entity Container

Author: andrerpena

demo/client/presets/base/components/EntityContainer.txt

@@ -0,0 +1,36 @@
+{
+    entities: [
+        {
+            name: "contact",
+            fields: [
+                {
+                    name: "name",
+                    displayName: "Name",
+                    type: "string",
+                    required: true,
+                },
+                {
+                    name: "email",
+                    displayName: "E-mail",
+                    type: "entity",
+                    entityName: 'email'
+                }
+            ]
+        },
+        {
+            name: "email",
+            fields: [
+                {
+                    name: "emailType",
+                    displayName: "Type",
+                    type: "string"
+                },
+                {
+                    name: "address",
+                    displayName: "Address",
+                    type: "string"
+                }
+            ]
+        }
+    ]
+}

demo/client/presets/presets.js

@@ -149,6 +149,13 @@ export default [
 		formTitle: 'Edit contact',
 		schema: require('./base/components/Lookup.txt')
 	},
+	{
+		name: 'EntityContainer',
+		displayName: 'Components - EntityContainer',
+		entityName: 'contact',
+		formTitle: 'Edit contact',
+		schema: require('./base/components/EntityContainer.txt')
+	},
 	{
 		name: 'ArrayContainer',
 		displayName: 'Components - ArrayContainer',

src/components/field/EntityContainer.js

@@ -0,0 +1,37 @@
+import React from 'react';
+
+const EntityContainer = React.createClass({
+
+    propTypes: {
+        name: React.PropTypes.string.isRequired,
+        componentFactory: React.PropTypes.object.isRequired
+    },
+
+    render: function () {
+
+        var header = this.props.displayName
+            ? <header className="metaform-group-header no-lateral-margin">
+                <span className="metaform-group-title">
+                    {this.props.displayName}
+                </span>
+        </header>
+            : null;
+
+
+        return <div className="entity-container">
+            {header}
+            <div className="entity-container-content">
+                {
+                    this.props.componentFactory.buildGroupComponent({
+                        component: this.props.layout.component,
+                        layout: this.props.layout,
+                        fields: this.props.fields,
+                        componentFactory: this.props.componentFactory
+                    })
+                }
+            </div>
+        </div>;
+    }
+});
+
+export default EntityContainer;

src/factory/BootstrapFactory.js

@@ -12,6 +12,7 @@ import FieldGroup from '../components/field/FieldGroup';
 import Checkbox from '../components/field/CheckBox';
 import Radio from '../components/field/Radio';
 import FileUpload from '../components/field/FileUpload';
+import EntityContainer from '../components/field/EntityContainer';
 
 import Group from '../components/group/Group';
 import TabGroup from '../components/group/TabGroup';
@@ -43,6 +44,7 @@ class BootstrapFactory extends ComponentFactory {
         this.registerFieldComponent('Static', ['string', 'int', 'float', 'datetime', 'date', 'time', 'bool'], Static);
         this.registerFieldComponent('FieldGroup', ['group'], FieldGroup);
         this.registerFieldComponent('FileUpload', ['string'], FileUpload);
+        this.registerFieldComponent('EntityContainer', ['entity'], EntityContainer);
 
         this.registerGroupComponent('Group', Group);
         this.registerGroupComponent('TabGroup', TabGroup);

src/factory/constants/TypeConstants.js

@@ -8,7 +8,8 @@ export default {
         int : 'TextBox',
         float: 'TextBox',
         bool: 'Checkbox',
-        group: 'FieldGroup'
+        group: 'FieldGroup',
+        entity: 'EntityContainer'
     },
     details: {
         string: 'Static',
@@ -19,6 +20,7 @@ export default {
         int: 'Static',
         float: 'Static',
         bool: 'Static',
-        group: 'FieldGroup'
+        group: 'FieldGroup',
+        entity: 'EntityContainer'
     }
 }