Implementing the SelectiveMetaFormGroup

demo/components/LiveSchemaEditorPresetProvider.js

@@ -12,6 +12,7 @@ import innerEntity from './liveSchemaEditorPresets/innerEntity.txt';
 import arrays from './liveSchemaEditorPresets/arrays.txt';
 import confirmPassword from './liveSchemaEditorPresets/confirmPassword.txt';
 import confirmPurchase from './liveSchemaEditorPresets/confirmPurchase.txt';
+import selectiveMetaFormGroup from './liveSchemaEditorPresets/selectiveMetaFormGroup.txt';
 
 class LiveSchemaEditorPresetProvider {
     constructor() {
@@ -73,6 +74,14 @@ class LiveSchemaEditorPresetProvider {
             layoutName: 'sale-edit',
             code: confirmPurchase
         });
+        //this.presetsConfig.push({
+        //    value: 'selectiveMetaFormGroup',
+        //    text: 'SelectiveMetaFormGroup',
+        //    title: 'SelectiveMetaFormGroup',
+        //    entityName: 'contact',
+        //    layoutName: 'contact-edit',
+        //    code: selectiveMetaFormGroup
+        //});
     }
     getPresets() {
         return this.presetsConfig;

demo/components/liveSchemaEditorPresets/selectiveMetaFormGroup.txt

@@ -0,0 +1,32 @@
+{
+    entities: [
+        {
+            name: "contact",
+            fields: [
+                {
+                    name: "name",
+                    displayName: "Name",
+                    type: "string"
+                },
+                {
+                    name: "profession",
+                    displayName: "Profession",
+                    type: "string"
+                }
+            ],
+            layouts: [{
+                name: "contact-edit",
+                component: 'selectivemetaformgroup',
+                title: "Contact information",
+                fields: [
+                    {
+                        name: "name"
+                    },
+                    {
+                        name: "profession"
+                    }
+                ]
+            }]
+        }
+    ]
+}

demo/less/styles.less

@@ -2,6 +2,5 @@
 @import '../../node_modules/font-awesome/less/font-awesome.less';
 @import '../../node_modules/react-widgets/dist/css/react-widgets.css';
 
-@import '../../src/less/thirdParty/lookup.less';
-@import '../../src/less/components/MetaForm';
-@import '../../src/less/components/LiveSchemaEditor';
+@import '../../src/less/styles';
+@import './LiveSchemaEditor.less';

src/DefaultComponentFactory.js

@@ -12,6 +12,7 @@ import ArrayContainer from './components/fieldComponents/ArrayContainer.js';
 
 // Group components
 import MetaFormGroup from './components/groupComponents/MetaFormGroup.js';
+import SelectiveMetaFormGroup from './components/groupComponents/SelectiveMetaFormGroup.js';
 
 // Registers all field component definitions
 componentFactory.registerFieldComponent('textbox', ['string', 'int', 'float'], TextBox);
@@ -25,6 +26,7 @@ componentFactory.registerFieldComponent('arraycontainer', ['array'], ArrayContai
 
 // Registers all group component definitions
 componentFactory.registerGroupComponent('metaformgroup', MetaFormGroup);
+componentFactory.registerGroupComponent('selectivemetaformgroup', SelectiveMetaFormGroup);
 
 // Registers the component defaults
 componentFactory.setDefaultFieldComponents({

src/components/groupComponents/MetaFormGroup.js

@@ -4,6 +4,7 @@ import Alert from 'react-bootstrap/lib/Alert.js';
 
 var MetaFormGroup = React.createClass({
     propTypes: {
+        component: React.PropTypes.string,
         layout: React.PropTypes.object.isRequired,
         fields: React.PropTypes.array.isRequired,
         componentFactory: React.PropTypes.object.isRequired

src/components/groupComponents/SelectiveMetaFormGroup.js

@@ -0,0 +1,98 @@
+import React from 'react';
+import _ from 'underscore';
+import Alert from 'react-bootstrap/lib/Alert.js';
+import Lookup from '../fieldComponents/Lookup.js';
+import Button from 'react-bootstrap/lib/Button.js';
+import Glyphicon from 'react-bootstrap/lib/Glyphicon.js';
+
+var SelectiveMetaFormGroup = React.createClass({
+    propTypes: {
+        component: React.PropTypes.string,
+        layout: React.PropTypes.object.isRequired,
+        fields: React.PropTypes.array.isRequired,
+        componentFactory: React.PropTypes.object.isRequired
+    },
+    getInitialState: function () {
+        return {
+            selectedFields: []
+        }
+    },
+
+    handleAddField: function () {
+        let updatedState = React.addons.update(this.state, {selectedFields: {$push: [{}]}});
+        this.setState(updatedState);
+    },
+
+    handleRemoveField: function (index) {
+        let updatedState = _.extend({}, this.state);
+        updatedState.selectedFields.splice(index, 1);
+        this.setState(updatedState);
+    },
+
+    handleSelectField(index, event) {
+        console.log('selected ' + event.value);
+    },
+
+    render: function () {
+
+        try {
+            if (this.props.layout.groups && this.props.layout.groups.length) {
+                throw Error('The SelectiveMetaFormGroup cannot be applied to groups that have groups');
+            }
+            let components = this.props.layout.fields.map(field => {
+                let layoutFieldInProps = _.find(this.props.fields, cp => cp.name === field.name);
+                return {
+                    data: layoutFieldInProps,
+                    component: this.props.componentFactory.buildFieldComponent(layoutFieldInProps)
+                }
+            });
+            return <div className="selective-metaform-group">
+                {
+                    this.state.selectedFields.map((f, i) => {
+                        return <div className="selective-metaform-group-item">
+                            <div className="row">
+                                <div className="col-md-1">
+                                    <Button onClick={() => this.handleRemoveField(i)}>
+                                        <Glyphicon glyph="minus"/>
+                                    </Button>
+                                </div>
+                                <div className="col-md-11">
+                                    <div className="row">
+                                        <div className="col-md-6">
+                                            <Lookup name="field" displayName="Field" onChange={(event) => this.handleSelectField(i, event)} options={
+                                                components.map(c => ({value: c.data.name, text: c.data.displayName}))
+                                             }/>
+                                        </div>
+                                        <div className="col-md-6">
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    })
+                }
+                <div className="add-field-section">
+                    <div className="row">
+                        <div className="col-md-2">
+                            <Button onClick={this.handleAddField}>
+                                <Glyphicon glyph="plus"/>
+                            </Button>
+                        </div>
+                        <div className="col-md-10"></div>
+                    </div>
+                </div>
+            </div>
+        }
+        catch (ex) {
+            return <Alert bsStyle='danger'>
+                <h4>Oh snap! The schema is not valid.</h4>
+
+                <p>Detailed information:
+                    <b>{ex}</b>
+                </p>
+            </Alert>;
+        }
+    }
+});
+
+export default SelectiveMetaFormGroup;

src/less/components/SelectiveMetaFormGroup.less

@@ -0,0 +1,13 @@
+.selective-metaform-group {
+
+}
+
+.selective-metaform-group-item {
+}
+
+.selective-metaform-group-item-actions {
+
+}
+
+.selective-metaform-group-item-content {
+}

src/less/styles.less

@@ -1,2 +1,3 @@
+@import './thirdParty/lookup';
 @import './components/MetaForm';
-@import './components/LiveSchemaEditor';
+@import './components/SelectiveMetaFormGroup';

src/lib/metadataProvider.js

@@ -213,9 +213,7 @@ class MetadataProvider {
      * @returns {Object}
      */
     processLayoutGroup(layoutGroup) {
-
         let layoutGroupClone = {};
-
         if (layoutGroup.fields) {
             layoutGroupClone.fields = [];
             for (let i = 0; i < layoutGroup.fields.length; i++) {
@@ -231,6 +229,7 @@ class MetadataProvider {
 
         // copying useful properties
         layoutGroupClone.orientation = layoutGroup.orientation;
+        layoutGroupClone.component = layoutGroup.component;
 
         return layoutGroupClone;
     }