diff --git a/demo/components/LiveSchemaEditorPresetProvider.js b/demo/components/LiveSchemaEditorPresetProvider.js index e69a1ef..b25b696 100644 --- a/demo/components/LiveSchemaEditorPresetProvider.js +++ b/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; diff --git a/demo/components/liveSchemaEditorPresets/selectiveMetaFormGroup.txt b/demo/components/liveSchemaEditorPresets/selectiveMetaFormGroup.txt new file mode 100644 index 0000000..2c29f56 --- /dev/null +++ b/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" + } + ] + }] + } + ] +} \ No newline at end of file diff --git a/src/less/components/LiveSchemaEditor.less b/demo/less/LiveSchemaEditor.less similarity index 100% rename from src/less/components/LiveSchemaEditor.less rename to demo/less/LiveSchemaEditor.less diff --git a/demo/less/styles.less b/demo/less/styles.less index 059739c..98ed737 100644 --- a/demo/less/styles.less +++ b/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'; diff --git a/src/DefaultComponentFactory.js b/src/DefaultComponentFactory.js index 97f63f6..7039a51 100644 --- a/src/DefaultComponentFactory.js +++ b/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({ diff --git a/src/components/groupComponents/MetaFormGroup.js b/src/components/groupComponents/MetaFormGroup.js index 0c5a5cc..f78b440 100644 --- a/src/components/groupComponents/MetaFormGroup.js +++ b/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 diff --git a/src/components/groupComponents/SelectiveMetaFormGroup.js b/src/components/groupComponents/SelectiveMetaFormGroup.js new file mode 100644 index 0000000..b843318 --- /dev/null +++ b/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
+ { + this.state.selectedFields.map((f, i) => { + return
+
+
+ +
+
+
+
+ this.handleSelectField(i, event)} options={ + components.map(c => ({value: c.data.name, text: c.data.displayName})) + }/> +
+
+
+
+
+
+
+ }) + } +
+
+
+ +
+
+
+
+
+ } + catch (ex) { + return +

Oh snap! The schema is not valid.

+ +

Detailed information: + {ex} +

+ ; + } + } +}); + +export default SelectiveMetaFormGroup; \ No newline at end of file diff --git a/src/less/components/SelectiveMetaFormGroup.less b/src/less/components/SelectiveMetaFormGroup.less new file mode 100644 index 0000000..7f79f54 --- /dev/null +++ b/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 { +} \ No newline at end of file diff --git a/src/less/styles.less b/src/less/styles.less index ae512e7..58d94eb 100644 --- a/src/less/styles.less +++ b/src/less/styles.less @@ -1,2 +1,3 @@ +@import './thirdParty/lookup'; @import './components/MetaForm'; -@import './components/LiveSchemaEditor'; \ No newline at end of file +@import './components/SelectiveMetaFormGroup'; diff --git a/src/lib/metadataProvider.js b/src/lib/metadataProvider.js index 5a03803..40cdf19 100644 --- a/src/lib/metadataProvider.js +++ b/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; }