diff --git a/openbis_ng_ui/src/js/components/common/form/AutocompleterField.jsx b/openbis_ng_ui/src/js/components/common/form/AutocompleterField.jsx
index 441f325c32e78a87bda8e4915abb6f5ba3099ecd..d1409a98c49a1f071f7fbcefbe6504d341d335ea 100644
--- a/openbis_ng_ui/src/js/components/common/form/AutocompleterField.jsx
+++ b/openbis_ng_ui/src/js/components/common/form/AutocompleterField.jsx
@@ -6,6 +6,7 @@ import logger from '@src/js/common/logger.js'
import FormFieldContainer from './FormFieldContainer.jsx'
import FormFieldLabel from './FormFieldLabel.jsx'
+import FormFieldView from './FormFieldView.jsx'
const styles = theme => ({
paper: {
@@ -61,6 +62,23 @@ class AutocompleterFormField extends React.PureComponent {
render() {
logger.log(logger.DEBUG, 'AutocompleterFormField.render')
+ const { mode = 'edit' } = this.props
+
+ if (mode === 'view') {
+ return this.renderView()
+ } else if (mode === 'edit') {
+ return this.renderEdit()
+ } else {
+ throw 'Unsupported mode: ' + mode
+ }
+ }
+
+ renderView() {
+ const { label, value } = this.props
+ return <FormFieldView label={label} value={value} />
+ }
+
+ renderEdit() {
const {
name,
options,
diff --git a/openbis_ng_ui/src/js/components/common/form/CheckboxField.jsx b/openbis_ng_ui/src/js/components/common/form/CheckboxField.jsx
index d88f68828c6c3fb3277abe5a4b925ec218b2d82b..555a15c46b1751da28af4ae0f79d52f35e4c8c52 100644
--- a/openbis_ng_ui/src/js/components/common/form/CheckboxField.jsx
+++ b/openbis_ng_ui/src/js/components/common/form/CheckboxField.jsx
@@ -10,11 +10,15 @@ import FormFieldLabel from './FormFieldLabel.jsx'
const styles = () => ({
container: {
display: 'flex',
- alignItems: 'center'
+ alignItems: 'center',
+ marginLeft: '-4px'
},
label: {
cursor: 'pointer'
},
+ labelDisabled: {
+ cursor: 'inherit'
+ },
checkbox: {
padding: '2px',
marginRight: '4px'
@@ -73,11 +77,18 @@ class CheckboxFormField extends React.PureComponent {
disabled,
error,
metadata,
+ mode = 'edit',
styles,
classes,
onClick
} = this.props
+ if (mode !== 'view' && mode !== 'edit') {
+ throw 'Unsupported mode: ' + mode
+ }
+
+ const isDisabled = disabled || mode !== 'edit'
+
return (
<FormFieldContainer
description={description}
@@ -92,7 +103,7 @@ class CheckboxFormField extends React.PureComponent {
action={action => (this.action = action)}
value={name}
checked={!!value}
- disabled={disabled}
+ disabled={isDisabled}
onChange={this.handleChange}
onFocus={this.handleFocus}
classes={{ root: classes.checkbox }}
@@ -100,7 +111,7 @@ class CheckboxFormField extends React.PureComponent {
/>
<Typography
component='label'
- className={classes.label}
+ className={isDisabled ? classes.labelDisabled : classes.label}
onClick={this.handleLabelClick}
>
<FormFieldLabel
diff --git a/openbis_ng_ui/src/js/components/common/form/FormFieldView.jsx b/openbis_ng_ui/src/js/components/common/form/FormFieldView.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..7880f74ac396b13e2c2adc057d371361e40aab7c
--- /dev/null
+++ b/openbis_ng_ui/src/js/components/common/form/FormFieldView.jsx
@@ -0,0 +1,37 @@
+import React from 'react'
+import { withStyles } from '@material-ui/core/styles'
+import Typography from '@material-ui/core/Typography'
+
+const styles = theme => ({
+ label: {
+ fontSize: theme.typography.label.fontSize,
+ color: theme.typography.label.color
+ },
+ value: {
+ paddingBottom: theme.spacing(1) / 2,
+ borderBottomStyle: 'dotted',
+ borderBottomWidth: '1px',
+ borderBottomColor: theme.typography.label.color,
+ '&:after': {
+ content: '"\\00a0"'
+ }
+ }
+})
+
+class FormFieldView extends React.PureComponent {
+ render() {
+ const { label, value, classes } = this.props
+ return (
+ <div>
+ <Typography variant='body2' className={classes.label}>
+ {label}
+ </Typography>
+ <Typography variant='body2' className={classes.value}>
+ {value ? value : ''}
+ </Typography>
+ </div>
+ )
+ }
+}
+
+export default withStyles(styles)(FormFieldView)
diff --git a/openbis_ng_ui/src/js/components/common/form/SelectField.jsx b/openbis_ng_ui/src/js/components/common/form/SelectField.jsx
index 3773366d5bd60d571ee247ba0085148cc2db55c1..d0710e77d32bc4028455c54798057b67cb700dd0 100644
--- a/openbis_ng_ui/src/js/components/common/form/SelectField.jsx
+++ b/openbis_ng_ui/src/js/components/common/form/SelectField.jsx
@@ -6,6 +6,7 @@ import logger from '@src/js/common/logger.js'
import FormFieldContainer from './FormFieldContainer.jsx'
import FormFieldLabel from './FormFieldLabel.jsx'
+import FormFieldView from './FormFieldView.jsx'
const styles = theme => ({
textField: {
@@ -54,6 +55,24 @@ class SelectFormField extends React.PureComponent {
render() {
logger.log(logger.DEBUG, 'SelectFormField.render')
+ const { mode = 'edit' } = this.props
+
+ if (mode === 'view') {
+ return this.renderView()
+ } else if (mode === 'edit') {
+ return this.renderEdit()
+ } else {
+ throw 'Unsupported mode: ' + mode
+ }
+ }
+
+ renderView() {
+ const { label, value, options } = this.props
+ const option = options.find(option => option.value === value)
+ return <FormFieldView label={label} value={option ? option.label : null} />
+ }
+
+ renderEdit() {
const {
reference,
name,
diff --git a/openbis_ng_ui/src/js/components/common/form/TextField.jsx b/openbis_ng_ui/src/js/components/common/form/TextField.jsx
index 7b4cffc089beee9a29ee060a7cb1de41c50a5012..ff2c92e6a0e5d397f6e585005fd816035339a256 100644
--- a/openbis_ng_ui/src/js/components/common/form/TextField.jsx
+++ b/openbis_ng_ui/src/js/components/common/form/TextField.jsx
@@ -6,6 +6,7 @@ import logger from '@src/js/common/logger.js'
import FormFieldContainer from './FormFieldContainer.jsx'
import FormFieldLabel from './FormFieldLabel.jsx'
+import FormFieldView from './FormFieldView.jsx'
const styles = theme => ({
startAdornment: {
@@ -26,6 +27,23 @@ class TextFormField extends React.PureComponent {
render() {
logger.log(logger.DEBUG, 'TextFormField.render')
+ const { mode = 'edit' } = this.props
+
+ if (mode === 'view') {
+ return this.renderView()
+ } else if (mode === 'edit') {
+ return this.renderEdit()
+ } else {
+ throw 'Unsupported mode: ' + mode
+ }
+ }
+
+ renderView() {
+ const { label, value } = this.props
+ return <FormFieldView label={label} value={value} />
+ }
+
+ renderEdit() {
const {
reference,
id,
diff --git a/openbis_ng_ui/src/js/components/common/theme/ThemeProvider.jsx b/openbis_ng_ui/src/js/components/common/theme/ThemeProvider.jsx
index 37c13343d06601104a3fb47e81d72611ac953b52..cdd4015b050527671636e3676ec42b852053600d 100644
--- a/openbis_ng_ui/src/js/components/common/theme/ThemeProvider.jsx
+++ b/openbis_ng_ui/src/js/components/common/theme/ThemeProvider.jsx
@@ -5,7 +5,11 @@ import lightBlue from '@material-ui/core/colors/lightBlue'
const theme = createMuiTheme({
typography: {
- useNextVariants: true
+ useNextVariants: true,
+ label: {
+ fontSize: '0.7em',
+ color: '#0000008a'
+ }
},
palette: {
grey: {
diff --git a/openbis_ng_ui/src/js/components/types/form/TypeForm.jsx b/openbis_ng_ui/src/js/components/types/form/TypeForm.jsx
index ba99c7ca8d87b2a113a806a36ad89b1366ca3a65..27dd562c81d9cf37a2f196cd1189015920a10126 100644
--- a/openbis_ng_ui/src/js/components/types/form/TypeForm.jsx
+++ b/openbis_ng_ui/src/js/components/types/form/TypeForm.jsx
@@ -96,7 +96,8 @@ class TypeForm extends React.PureComponent {
sections,
selection,
removePropertyDialogOpen,
- removeSectionDialogOpen
+ removeSectionDialogOpen,
+ mode
} = this.state
let { classes } = this.props
@@ -111,6 +112,7 @@ class TypeForm extends React.PureComponent {
properties={properties}
sections={sections}
selection={selection}
+ mode={mode}
onOrderChange={controller.handleOrderChange}
onSelectionChange={controller.handleSelectionChange}
/>
@@ -138,6 +140,7 @@ class TypeForm extends React.PureComponent {
properties={properties}
sections={sections}
selection={selection}
+ mode={mode}
onChange={controller.handleChange}
onSelectionChange={controller.handleSelectionChange}
onBlur={controller.handleBlur}
@@ -150,8 +153,11 @@ class TypeForm extends React.PureComponent {
onAddSection={controller.handleAddSection}
onAddProperty={controller.handleAddProperty}
onRemove={controller.handleRemove}
+ onEdit={controller.handleEdit}
onSave={controller.handleSave}
+ onCancel={controller.handleCancel}
selection={selection}
+ mode={mode}
/>
<TypeFormDialogRemoveSection
open={removeSectionDialogOpen}
diff --git a/openbis_ng_ui/src/js/components/types/form/TypeFormButtons.jsx b/openbis_ng_ui/src/js/components/types/form/TypeFormButtons.jsx
index 5c8380e25fb7e89a6507947901ef6c88a14d94da..cd29075d160d919cf0a847552e5be2c32db85aba 100644
--- a/openbis_ng_ui/src/js/components/types/form/TypeFormButtons.jsx
+++ b/openbis_ng_ui/src/js/components/types/form/TypeFormButtons.jsx
@@ -26,12 +26,40 @@ class TypeFormButtons extends React.PureComponent {
render() {
logger.log(logger.DEBUG, 'TypeFormButtons.render')
+ const { mode } = this.props
+
+ if (mode === 'view') {
+ return this.renderView()
+ } else if (mode === 'edit') {
+ return this.renderEdit()
+ } else {
+ throw 'Unsupported mode: ' + mode
+ }
+ }
+
+ renderView() {
+ const { classes, onEdit } = this.props
+
+ return (
+ <Container className={classes.container}>
+ <Button
+ name='edit'
+ label='Edit'
+ styles={{ root: classes.button }}
+ onClick={onEdit}
+ />
+ </Container>
+ )
+ }
+
+ renderEdit() {
const {
classes,
onAddSection,
onAddProperty,
onRemove,
- onSave
+ onSave,
+ onCancel
} = this.props
return (
@@ -63,6 +91,12 @@ class TypeFormButtons extends React.PureComponent {
styles={{ root: classes.button }}
onClick={onSave}
/>
+ <Button
+ name='cancel'
+ label='Cancel'
+ styles={{ root: classes.button }}
+ onClick={onCancel}
+ />
</Container>
)
}
diff --git a/openbis_ng_ui/src/js/components/types/form/TypeFormController.js b/openbis_ng_ui/src/js/components/types/form/TypeFormController.js
index d6c2e6cf9942589bc63ba49172220047f158e0dc..c1bb6c49e73bb5a4ed6996ce719e1400f6a57f1e 100644
--- a/openbis_ng_ui/src/js/components/types/form/TypeFormController.js
+++ b/openbis_ng_ui/src/js/components/types/form/TypeFormController.js
@@ -1,6 +1,8 @@
import autoBind from 'auto-bind'
import TypeFormControllerLoad from './TypeFormControllerLoad.js'
import TypeFormControllerValidate from './TypeFormControllerValidate.js'
+import TypeFormControllerEdit from './TypeFormControllerEdit.js'
+import TypeFormControllerCancel from './TypeFormControllerCancel.js'
import TypeFormControllerSave from './TypeFormControllerSave.js'
import TypeFormControllerRemove from './TypeFormControllerRemove.js'
import TypeFormControllerAddSection from './TypeFormControllerAddSection.js'
@@ -64,6 +66,14 @@ export default class TypeFormController {
new TypeFormControllerRemove(this).executeCancel()
}
+ handleEdit() {
+ return new TypeFormControllerEdit(this).execute()
+ }
+
+ handleCancel() {
+ return new TypeFormControllerCancel(this).execute()
+ }
+
handleSave() {
return new TypeFormControllerSave(this).execute()
}
diff --git a/openbis_ng_ui/src/js/components/types/form/TypeFormControllerCancel.js b/openbis_ng_ui/src/js/components/types/form/TypeFormControllerCancel.js
new file mode 100644
index 0000000000000000000000000000000000000000..edd22720071bc7ef15656d237647616ab7cb797d
--- /dev/null
+++ b/openbis_ng_ui/src/js/components/types/form/TypeFormControllerCancel.js
@@ -0,0 +1,13 @@
+export default class TypeFormControllerEdit {
+ constructor(controller) {
+ this.controller = controller
+ this.context = controller.context
+ }
+
+ execute() {
+ this.context.setState(state => ({
+ ...state,
+ mode: 'view'
+ }))
+ }
+}
diff --git a/openbis_ng_ui/src/js/components/types/form/TypeFormControllerEdit.js b/openbis_ng_ui/src/js/components/types/form/TypeFormControllerEdit.js
new file mode 100644
index 0000000000000000000000000000000000000000..3d9bfab7049a581e184e61bcaee175ec881ba3ca
--- /dev/null
+++ b/openbis_ng_ui/src/js/components/types/form/TypeFormControllerEdit.js
@@ -0,0 +1,13 @@
+export default class TypeFormControllerEdit {
+ constructor(controller) {
+ this.controller = controller
+ this.context = controller.context
+ }
+
+ execute() {
+ this.context.setState(state => ({
+ ...state,
+ mode: 'edit'
+ }))
+ }
+}
diff --git a/openbis_ng_ui/src/js/components/types/form/TypeFormControllerLoad.js b/openbis_ng_ui/src/js/components/types/form/TypeFormControllerLoad.js
index 793e8223ea1eaafefa680c648266910b48bcb389..9e03e95ca8d2780697b6837f23b0c531596cfcd5 100644
--- a/openbis_ng_ui/src/js/components/types/form/TypeFormControllerLoad.js
+++ b/openbis_ng_ui/src/js/components/types/form/TypeFormControllerLoad.js
@@ -11,6 +11,7 @@ export default class TypeFormControllerLoad {
async execute() {
await this.context.setState({
+ mode: 'view',
loading: true,
validate: false
})
diff --git a/openbis_ng_ui/src/js/components/types/form/TypeFormParameters.jsx b/openbis_ng_ui/src/js/components/types/form/TypeFormParameters.jsx
index 2265ef2a856bc86c3a9a1931763ded67007b2615..c1b23a944d79056cb3c6f99e6d210f2d390dcb7d 100644
--- a/openbis_ng_ui/src/js/components/types/form/TypeFormParameters.jsx
+++ b/openbis_ng_ui/src/js/components/types/form/TypeFormParameters.jsx
@@ -22,6 +22,7 @@ class TypeFormParameters extends React.PureComponent {
sections,
properties,
selection,
+ mode,
onChange,
onSelectionChange,
onBlur
@@ -33,6 +34,7 @@ class TypeFormParameters extends React.PureComponent {
controller={controller}
type={type}
selection={selection}
+ mode={mode}
onChange={onChange}
onSelectionChange={onSelectionChange}
onBlur={onBlur}
@@ -40,6 +42,7 @@ class TypeFormParameters extends React.PureComponent {
<TypeFormParametersSection
sections={sections}
selection={selection}
+ mode={mode}
onChange={onChange}
onSelectionChange={onSelectionChange}
onBlur={onBlur}
@@ -49,6 +52,7 @@ class TypeFormParameters extends React.PureComponent {
type={type}
properties={properties}
selection={selection}
+ mode={mode}
onChange={onChange}
onSelectionChange={onSelectionChange}
onBlur={onBlur}
diff --git a/openbis_ng_ui/src/js/components/types/form/TypeFormParametersProperty.jsx b/openbis_ng_ui/src/js/components/types/form/TypeFormParametersProperty.jsx
index 5b9a40d253e4d7f3950427cef4b0e537ab1f47ce..f1c7cd8a36feffd646cc3398cd53bfd06162961e 100644
--- a/openbis_ng_ui/src/js/components/types/form/TypeFormParametersProperty.jsx
+++ b/openbis_ng_ui/src/js/components/types/form/TypeFormParametersProperty.jsx
@@ -208,7 +208,7 @@ class TypeFormParametersProperty extends React.PureComponent {
{ label: 'Global', value: 'global' }
]
- const { classes } = this.props
+ const { mode, classes } = this.props
return (
<div className={classes.field}>
<SelectField
@@ -219,6 +219,7 @@ class TypeFormParametersProperty extends React.PureComponent {
error={error}
disabled={!enabled}
value={value}
+ mode={mode}
options={options}
onChange={this.handleChange}
onFocus={this.handleFocus}
@@ -235,7 +236,7 @@ class TypeFormParametersProperty extends React.PureComponent {
return null
}
- const { classes } = this.props
+ const { mode, classes } = this.props
return (
<div className={classes.field}>
<TextField
@@ -246,6 +247,7 @@ class TypeFormParametersProperty extends React.PureComponent {
error={error}
disabled={!enabled}
value={value}
+ mode={mode}
onChange={this.handleChange}
onFocus={this.handleFocus}
onBlur={this.handleBlur}
@@ -261,7 +263,7 @@ class TypeFormParametersProperty extends React.PureComponent {
return null
}
- const { classes, controller } = this.props
+ const { mode, classes, controller } = this.props
if (property.scope.value === 'local') {
return (
@@ -274,6 +276,7 @@ class TypeFormParametersProperty extends React.PureComponent {
error={error}
disabled={!enabled}
value={value}
+ mode={mode}
onChange={this.handleChange}
onFocus={this.handleFocus}
onBlur={this.handleBlur}
@@ -298,6 +301,7 @@ class TypeFormParametersProperty extends React.PureComponent {
error={error}
disabled={!enabled}
value={value}
+ mode={mode}
onChange={this.handleChange}
onFocus={this.handleFocus}
onBlur={this.handleBlur}
@@ -314,7 +318,7 @@ class TypeFormParametersProperty extends React.PureComponent {
return null
}
- const { classes } = this.props
+ const { mode, classes } = this.props
return (
<div className={classes.field}>
<TextField
@@ -325,6 +329,7 @@ class TypeFormParametersProperty extends React.PureComponent {
error={error}
disabled={!enabled}
value={value}
+ mode={mode}
onChange={this.handleChange}
onFocus={this.handleFocus}
onBlur={this.handleBlur}
@@ -347,7 +352,7 @@ class TypeFormParametersProperty extends React.PureComponent {
}
})
- const { classes } = this.props
+ const { mode, classes } = this.props
return (
<div className={classes.field}>
<SelectField
@@ -359,6 +364,7 @@ class TypeFormParametersProperty extends React.PureComponent {
disabled={!enabled}
value={value}
options={options}
+ mode={mode}
onChange={this.handleChange}
onFocus={this.handleFocus}
onBlur={this.handleBlur}
@@ -374,7 +380,7 @@ class TypeFormParametersProperty extends React.PureComponent {
return null
}
- const { classes, controller } = this.props
+ const { mode, classes, controller } = this.props
const { vocabularies = [] } = controller.getDictionaries()
let options = []
@@ -400,6 +406,7 @@ class TypeFormParametersProperty extends React.PureComponent {
disabled={!enabled}
value={value}
options={options}
+ mode={mode}
onChange={this.handleChange}
onFocus={this.handleFocus}
onBlur={this.handleBlur}
@@ -415,7 +422,7 @@ class TypeFormParametersProperty extends React.PureComponent {
return null
}
- const { classes, controller } = this.props
+ const { mode, classes, controller } = this.props
const { materialTypes = [] } = controller.getDictionaries()
let options = []
@@ -441,6 +448,7 @@ class TypeFormParametersProperty extends React.PureComponent {
disabled={!enabled}
value={value}
options={options}
+ mode={mode}
onChange={this.handleChange}
onFocus={this.handleFocus}
onBlur={this.handleBlur}
@@ -456,7 +464,7 @@ class TypeFormParametersProperty extends React.PureComponent {
return null
}
- const { classes } = this.props
+ const { mode, classes } = this.props
return (
<div className={classes.field}>
@@ -468,6 +476,7 @@ class TypeFormParametersProperty extends React.PureComponent {
disabled={!enabled}
value={value}
multiline={true}
+ mode={mode}
onChange={this.handleChange}
onFocus={this.handleFocus}
onBlur={this.handleBlur}
@@ -483,7 +492,7 @@ class TypeFormParametersProperty extends React.PureComponent {
return null
}
- const { classes } = this.props
+ const { mode, classes } = this.props
return (
<div className={classes.field}>
@@ -495,6 +504,7 @@ class TypeFormParametersProperty extends React.PureComponent {
disabled={!enabled}
value={value}
multiline={true}
+ mode={mode}
onChange={this.handleChange}
onFocus={this.handleFocus}
onBlur={this.handleBlur}
@@ -510,7 +520,7 @@ class TypeFormParametersProperty extends React.PureComponent {
return null
}
- const { classes, controller } = this.props
+ const { mode, classes, controller } = this.props
const { dynamicPlugins = [] } = controller.getDictionaries()
let options = []
@@ -535,6 +545,7 @@ class TypeFormParametersProperty extends React.PureComponent {
disabled={!enabled}
value={value}
options={options}
+ mode={mode}
onChange={this.handleChange}
onFocus={this.handleFocus}
onBlur={this.handleBlur}
@@ -550,7 +561,7 @@ class TypeFormParametersProperty extends React.PureComponent {
return null
}
- const { classes } = this.props
+ const { mode, classes } = this.props
return (
<div className={classes.field}>
<CheckboxField
@@ -560,6 +571,7 @@ class TypeFormParametersProperty extends React.PureComponent {
error={error}
disabled={!enabled}
value={value}
+ mode={mode}
onChange={this.handleChange}
onFocus={this.handleFocus}
onBlur={this.handleBlur}
@@ -577,7 +589,7 @@ class TypeFormParametersProperty extends React.PureComponent {
return null
}
- const { classes } = this.props
+ const { mode, classes } = this.props
return (
<div className={classes.field}>
<TextField
@@ -588,6 +600,7 @@ class TypeFormParametersProperty extends React.PureComponent {
error={error}
disabled={!enabled}
value={value}
+ mode={mode}
onChange={this.handleChange}
onFocus={this.handleFocus}
onBlur={this.handleBlur}
@@ -603,7 +616,7 @@ class TypeFormParametersProperty extends React.PureComponent {
return null
}
- const { classes } = this.props
+ const { mode, classes } = this.props
return (
<div className={classes.field}>
<CheckboxField
@@ -613,6 +626,7 @@ class TypeFormParametersProperty extends React.PureComponent {
error={error}
disabled={!enabled}
value={value}
+ mode={mode}
onChange={this.handleChange}
onFocus={this.handleFocus}
onBlur={this.handleBlur}
diff --git a/openbis_ng_ui/src/js/components/types/form/TypeFormParametersSection.jsx b/openbis_ng_ui/src/js/components/types/form/TypeFormParametersSection.jsx
index 00f889990fa727e843e49088f6ede50865327149..07348b69f568864c3f55de293c152419f64f1cc7 100644
--- a/openbis_ng_ui/src/js/components/types/form/TypeFormParametersSection.jsx
+++ b/openbis_ng_ui/src/js/components/types/form/TypeFormParametersSection.jsx
@@ -38,7 +38,7 @@ class TypeFormParametersSection extends React.PureComponent {
focus() {
const section = this.getSection(this.props)
- if (section) {
+ if (section && this.reference && this.reference.current) {
this.reference.current.focus()
}
}
@@ -87,7 +87,7 @@ class TypeFormParametersSection extends React.PureComponent {
return null
}
- const { classes } = this.props
+ const { mode, classes } = this.props
return (
<div className={classes.field}>
<TextField
@@ -97,6 +97,7 @@ class TypeFormParametersSection extends React.PureComponent {
error={error}
disabled={!enabled}
value={value}
+ mode={mode}
onChange={this.handleChange}
onBlur={this.handleBlur}
/>
diff --git a/openbis_ng_ui/src/js/components/types/form/TypeFormParametersType.jsx b/openbis_ng_ui/src/js/components/types/form/TypeFormParametersType.jsx
index fec37933406b49a18f93c72c18f4f5a7a6bdb07e..e3313ed26f5e4f8e8a05a90240be1b28e723d4ae 100644
--- a/openbis_ng_ui/src/js/components/types/form/TypeFormParametersType.jsx
+++ b/openbis_ng_ui/src/js/components/types/form/TypeFormParametersType.jsx
@@ -147,7 +147,7 @@ class TypeFormParametersType extends React.PureComponent {
return null
}
- const { classes } = this.props
+ const { mode, classes } = this.props
return (
<div className={classes.field}>
<TextField
@@ -158,6 +158,7 @@ class TypeFormParametersType extends React.PureComponent {
error={error}
disabled={!enabled}
value={value}
+ mode={mode}
onChange={this.handleChange}
onFocus={this.handleFocus}
onBlur={this.handleBlur}
@@ -173,7 +174,7 @@ class TypeFormParametersType extends React.PureComponent {
return null
}
- const { classes } = this.props
+ const { mode, classes } = this.props
return (
<div className={classes.field}>
<TextField
@@ -183,6 +184,7 @@ class TypeFormParametersType extends React.PureComponent {
error={error}
disabled={!enabled}
value={value}
+ mode={mode}
onChange={this.handleChange}
onFocus={this.handleFocus}
onBlur={this.handleBlur}
@@ -198,7 +200,7 @@ class TypeFormParametersType extends React.PureComponent {
return null
}
- const { classes, controller } = this.props
+ const { mode, classes, controller } = this.props
const { validationPlugins = [] } = controller.getDictionaries()
let options = []
@@ -223,6 +225,7 @@ class TypeFormParametersType extends React.PureComponent {
disabled={!enabled}
value={value}
options={options}
+ mode={mode}
onChange={this.handleChange}
onFocus={this.handleFocus}
onBlur={this.handleBlur}
@@ -238,7 +241,7 @@ class TypeFormParametersType extends React.PureComponent {
return null
}
- const { classes } = this.props
+ const { mode, classes } = this.props
return (
<div className={classes.field}>
<CheckboxField
@@ -248,6 +251,7 @@ class TypeFormParametersType extends React.PureComponent {
error={error}
disabled={!enabled}
value={value}
+ mode={mode}
onChange={this.handleChange}
onFocus={this.handleFocus}
onBlur={this.handleBlur}
@@ -263,7 +267,7 @@ class TypeFormParametersType extends React.PureComponent {
return null
}
- const { classes } = this.props
+ const { mode, classes } = this.props
return (
<div className={classes.field}>
<CheckboxField
@@ -273,6 +277,7 @@ class TypeFormParametersType extends React.PureComponent {
error={error}
disabled={!enabled}
value={value}
+ mode={mode}
onChange={this.handleChange}
onFocus={this.handleFocus}
onBlur={this.handleBlur}
@@ -288,7 +293,7 @@ class TypeFormParametersType extends React.PureComponent {
return null
}
- const { classes } = this.props
+ const { mode, classes } = this.props
return (
<div className={classes.field}>
<CheckboxField
@@ -298,6 +303,7 @@ class TypeFormParametersType extends React.PureComponent {
error={error}
disabled={!enabled}
value={value}
+ mode={mode}
onChange={this.handleChange}
onFocus={this.handleFocus}
onBlur={this.handleBlur}
@@ -313,7 +319,7 @@ class TypeFormParametersType extends React.PureComponent {
return null
}
- const { classes } = this.props
+ const { mode, classes } = this.props
return (
<div className={classes.field}>
<CheckboxField
@@ -323,6 +329,7 @@ class TypeFormParametersType extends React.PureComponent {
error={error}
disabled={!enabled}
value={value}
+ mode={mode}
onChange={this.handleChange}
onFocus={this.handleFocus}
onBlur={this.handleBlur}
@@ -338,7 +345,7 @@ class TypeFormParametersType extends React.PureComponent {
return null
}
- const { classes } = this.props
+ const { mode, classes } = this.props
return (
<div className={classes.field}>
<TextField
@@ -349,6 +356,7 @@ class TypeFormParametersType extends React.PureComponent {
error={error}
disabled={!enabled}
value={value}
+ mode={mode}
onChange={this.handleChange}
onFocus={this.handleFocus}
onBlur={this.handleBlur}
@@ -364,7 +372,7 @@ class TypeFormParametersType extends React.PureComponent {
return null
}
- const { classes } = this.props
+ const { mode, classes } = this.props
return (
<div className={classes.field}>
<CheckboxField
@@ -374,6 +382,7 @@ class TypeFormParametersType extends React.PureComponent {
error={error}
disabled={!enabled}
value={value}
+ mode={mode}
onChange={this.handleChange}
onFocus={this.handleFocus}
onBlur={this.handleBlur}
@@ -389,7 +398,7 @@ class TypeFormParametersType extends React.PureComponent {
return null
}
- const { classes } = this.props
+ const { mode, classes } = this.props
return (
<div className={classes.field}>
<CheckboxField
@@ -399,6 +408,7 @@ class TypeFormParametersType extends React.PureComponent {
error={error}
disabled={!enabled}
value={value}
+ mode={mode}
onChange={this.handleChange}
onFocus={this.handleFocus}
onBlur={this.handleBlur}
@@ -414,7 +424,7 @@ class TypeFormParametersType extends React.PureComponent {
return null
}
- const { classes } = this.props
+ const { mode, classes } = this.props
return (
<div className={classes.field}>
<CheckboxField
@@ -424,6 +434,7 @@ class TypeFormParametersType extends React.PureComponent {
error={error}
disabled={!enabled}
value={value}
+ mode={mode}
onChange={this.handleChange}
onFocus={this.handleFocus}
onBlur={this.handleBlur}
@@ -439,7 +450,7 @@ class TypeFormParametersType extends React.PureComponent {
return null
}
- const { classes } = this.props
+ const { mode, classes } = this.props
return (
<div className={classes.field}>
<TextField
@@ -449,6 +460,7 @@ class TypeFormParametersType extends React.PureComponent {
error={error}
disabled={!enabled}
value={value}
+ mode={mode}
onChange={this.handleChange}
onFocus={this.handleFocus}
onBlur={this.handleBlur}
@@ -464,7 +476,7 @@ class TypeFormParametersType extends React.PureComponent {
return null
}
- const { classes } = this.props
+ const { mode, classes } = this.props
return (
<div className={classes.field}>
<TextField
@@ -474,6 +486,7 @@ class TypeFormParametersType extends React.PureComponent {
error={error}
disabled={!enabled}
value={value}
+ mode={mode}
onChange={this.handleChange}
onFocus={this.handleFocus}
onBlur={this.handleBlur}
diff --git a/openbis_ng_ui/src/js/components/types/form/TypeFormPreview.jsx b/openbis_ng_ui/src/js/components/types/form/TypeFormPreview.jsx
index edc8b241f3e85d3e78c8dcd2b99d58193b437678..35a170b31b6c958e1b500773ca27e94aecc9af04 100644
--- a/openbis_ng_ui/src/js/components/types/form/TypeFormPreview.jsx
+++ b/openbis_ng_ui/src/js/components/types/form/TypeFormPreview.jsx
@@ -104,7 +104,7 @@ class TypeFormPreview extends React.PureComponent {
}
renderSection(section, index) {
- const { properties, selection, onSelectionChange } = this.props
+ const { mode, properties, selection, onSelectionChange } = this.props
const sectionProperties = section.properties.map(id =>
_.find(properties, ['id', id])
@@ -116,6 +116,7 @@ class TypeFormPreview extends React.PureComponent {
section={section}
index={index}
selection={selection}
+ mode={mode}
onSelectionChange={onSelectionChange}
>
{this.renderProperties(sectionProperties, 0)}
@@ -124,7 +125,7 @@ class TypeFormPreview extends React.PureComponent {
}
renderProperties(properties, index) {
- const { controller, selection, onSelectionChange } = this.props
+ const { mode, controller, selection, onSelectionChange } = this.props
return properties.map((property, offset) => {
return (
@@ -134,6 +135,7 @@ class TypeFormPreview extends React.PureComponent {
property={property}
index={index + offset}
selection={selection}
+ mode={mode}
onSelectionChange={onSelectionChange}
/>
)
diff --git a/openbis_ng_ui/src/js/components/types/form/TypeFormPreviewProperty.jsx b/openbis_ng_ui/src/js/components/types/form/TypeFormPreviewProperty.jsx
index c0d39db6cb55b49d49ba8a805816d1f1da449a04..7f2c44e3a080390b212f996aa63aa709905bc4b4 100644
--- a/openbis_ng_ui/src/js/components/types/form/TypeFormPreviewProperty.jsx
+++ b/openbis_ng_ui/src/js/components/types/form/TypeFormPreviewProperty.jsx
@@ -15,6 +15,7 @@ const EMPTY = 'empty'
const styles = theme => ({
draggable: {
width: '100%',
+ cursor: 'pointer',
padding: theme.spacing(1),
boxSizing: 'border-box',
borderWidth: '2px',
@@ -170,7 +171,7 @@ class TypeFormPreviewProperty extends React.PureComponent {
render() {
logger.log(logger.DEBUG, 'TypeFormPreviewProperty.render')
- let { property, selection, index, classes } = this.props
+ let { mode, property, selection, index, classes } = this.props
const selected =
selection &&
@@ -178,7 +179,11 @@ class TypeFormPreviewProperty extends React.PureComponent {
selection.params.id === property.id
return (
- <Draggable draggableId={property.id} index={index}>
+ <Draggable
+ draggableId={property.id}
+ index={index}
+ isDragDisabled={mode !== 'edit'}
+ >
{provided => (
<div
ref={provided.innerRef}
diff --git a/openbis_ng_ui/src/js/components/types/form/TypeFormPreviewSection.jsx b/openbis_ng_ui/src/js/components/types/form/TypeFormPreviewSection.jsx
index 6de3d19b500d7838267f402079f28e3f8aa2fddf..d3a99ef55be72cdd7fc39cb9f5fbec65956b7b3a 100644
--- a/openbis_ng_ui/src/js/components/types/form/TypeFormPreviewSection.jsx
+++ b/openbis_ng_ui/src/js/components/types/form/TypeFormPreviewSection.jsx
@@ -9,6 +9,7 @@ import util from '@src/js/common/util.js'
const styles = theme => ({
draggable: {
width: '100%',
+ cursor: 'pointer',
marginBottom: theme.spacing(1),
'&:hover $droppable': {
borderColor: theme.palette.background.secondary
@@ -53,7 +54,7 @@ class TypeFormPreviewSection extends React.PureComponent {
render() {
logger.log(logger.DEBUG, 'TypeFormPreviewSection.render')
- let { section, index, children, selection, classes } = this.props
+ let { mode, section, index, children, selection, classes } = this.props
let { id, name } = section
const selected =
@@ -62,7 +63,11 @@ class TypeFormPreviewSection extends React.PureComponent {
selection.params.id === section.id
return (
- <Draggable draggableId={id} index={index}>
+ <Draggable
+ draggableId={id}
+ index={index}
+ isDragDisabled={mode !== 'edit'}
+ >
{provided => (
<div
ref={provided.innerRef}