diff --git a/openbis_ng_ui/src/js/components/types/objectType/ObjectTypePreview.jsx b/openbis_ng_ui/src/js/components/types/objectType/ObjectTypePreview.jsx index c631b7cf43391b1422b1da591834322bf35495de..09d61199a3f20128b2c42728d5b30d66347a28cd 100644 --- a/openbis_ng_ui/src/js/components/types/objectType/ObjectTypePreview.jsx +++ b/openbis_ng_ui/src/js/components/types/objectType/ObjectTypePreview.jsx @@ -2,8 +2,7 @@ import _ from 'lodash' import React from 'react' import { DragDropContext, Droppable } from 'react-beautiful-dnd' import { withStyles } from '@material-ui/core/styles' -import Typography from '@material-ui/core/Typography' -import ObjectTypePreviewCode from './ObjectTypePreviewCode.jsx' +import ObjectTypePreviewHeader from './ObjectTypePreviewHeader.jsx' import ObjectTypePreviewProperty from './ObjectTypePreviewProperty.jsx' import ObjectTypePreviewSection from './ObjectTypePreviewSection.jsx' import logger from '../../../common/logger.js' @@ -14,9 +13,6 @@ const styles = theme => ({ display: 'flex', padding: `${theme.spacing(2)}px ${theme.spacing(4)}px` }, - header: { - marginBottom: theme.spacing(2) - }, form: {}, droppable: { display: 'flex', @@ -79,10 +75,7 @@ class ObjectTypePreview extends React.PureComponent { return ( <div className={classes.container} onClick={this.handleClick}> <div className={classes.form}> - <Typography variant='h6' className={classes.header}> - Form Preview - </Typography> - <ObjectTypePreviewCode type={type} /> + <ObjectTypePreviewHeader type={type} /> <DragDropContext onDragStart={this.handleDragStart} onDragEnd={this.handleDragEnd} diff --git a/openbis_ng_ui/src/js/components/types/objectType/ObjectTypePreviewCode.jsx b/openbis_ng_ui/src/js/components/types/objectType/ObjectTypePreviewCode.jsx deleted file mode 100644 index 84ad0f5d7360688ee02b9f20e239bf0edd56e1c7..0000000000000000000000000000000000000000 --- a/openbis_ng_ui/src/js/components/types/objectType/ObjectTypePreviewCode.jsx +++ /dev/null @@ -1,56 +0,0 @@ -import _ from 'lodash' -import React from 'react' -import TextField from '../../common/form/TextField.jsx' -import { withStyles } from '@material-ui/core/styles' -import logger from '../../../common/logger.js' - -const styles = theme => ({ - container: { - marginBottom: theme.spacing(2) - } -}) - -class ObjectTypePreviewCode extends React.PureComponent { - constructor(props) { - super(props) - this.state = { - value: '' - } - this.handleChange = this.handleChange.bind(this) - } - - handleChange(event) { - this.setState({ - value: event.target.value - }) - } - - render() { - logger.log(logger.DEBUG, 'ObjectTypePreviewCode.render') - - const { classes } = this.props - - return ( - <div className={classes.container}> - <TextField - label='Code' - value={this.getValue()} - disabled={this.getDisabled()} - onChange={this.handleChange} - /> - </div> - ) - } - - getValue() { - let { type } = this.props - return type.autoGeneratedCode ? type.generatedCodePrefix : this.state.value - } - - getDisabled() { - let { type } = this.props - return type.autoGeneratedCode - } -} - -export default _.flow(withStyles(styles))(ObjectTypePreviewCode) diff --git a/openbis_ng_ui/src/js/components/types/objectType/ObjectTypePreviewHeader.jsx b/openbis_ng_ui/src/js/components/types/objectType/ObjectTypePreviewHeader.jsx new file mode 100644 index 0000000000000000000000000000000000000000..fcede21081a2dac67683b920e442ffe7324b4771 --- /dev/null +++ b/openbis_ng_ui/src/js/components/types/objectType/ObjectTypePreviewHeader.jsx @@ -0,0 +1,118 @@ +import _ from 'lodash' +import React from 'react' +import Typography from '@material-ui/core/Typography' +import TextField from '../../common/form/TextField.jsx' +import { withStyles } from '@material-ui/core/styles' +import logger from '../../../common/logger.js' + +const styles = theme => ({ + field: { + marginBottom: theme.spacing(2) + } +}) + +class ObjectTypePreviewHeader extends React.PureComponent { + constructor(props) { + super(props) + this.state = { + values: {} + } + this.handleChange = this.handleChange.bind(this) + } + + handleChange(event) { + const name = event.target.name + const value = event.target.value + + this.setState(state => ({ + values: { + ...state.values, + [name]: value + } + })) + } + + render() { + logger.log(logger.DEBUG, 'ObjectTypePreviewHeader.render') + + return ( + <div> + {this.renderTitle()} + {this.renderCode()} + {this.renderParents()} + {this.renderContainer()} + </div> + ) + } + + renderTitle() { + const { classes } = this.props + return ( + <Typography variant='h6' className={classes.field}> + Form Preview + </Typography> + ) + } + + renderCode() { + const { type, classes } = this.props + + const value = type.autoGeneratedCode + ? type.generatedCodePrefix + : this.state.values.code + + const disabled = type.autoGeneratedCode + + return ( + <div className={classes.field}> + <TextField + name='code' + label='Code' + value={value} + disabled={disabled} + onChange={this.handleChange} + /> + </div> + ) + } + + renderParents() { + const { type, classes } = this.props + + if (type.showParents) { + return ( + <div className={classes.field}> + <TextField + name='parents' + label='Parents' + value={this.state.values.parents} + onChange={this.handleChange} + /> + </div> + ) + } else { + return null + } + } + + renderContainer() { + const { type, classes } = this.props + + if (type.showContainer) { + return ( + <div className={classes.field}> + <TextField + name='container' + label='Container' + value={this.state.values.container} + onChange={this.handleChange} + /> + </div> + ) + } else { + return null + } + } +} + +export default _.flow(withStyles(styles))(ObjectTypePreviewHeader)