From 32e6a605b0ee8de57d9136812c5f92ef9a81e15a Mon Sep 17 00:00:00 2001
From: pkupczyk <piotr.kupczyk@id.ethz.ch>
Date: Mon, 22 Jun 2020 19:52:03 +0200
Subject: [PATCH] NG_UI : SSDM-7583 : ObjectType form - introduce separate
'view' and 'edit' modes
---
.../common/form/AutocompleterField.jsx | 18 +++++++++
.../components/common/form/CheckboxField.jsx | 17 ++++++--
.../components/common/form/FormFieldView.jsx | 37 +++++++++++++++++
.../js/components/common/form/SelectField.jsx | 19 +++++++++
.../js/components/common/form/TextField.jsx | 18 +++++++++
.../components/common/theme/ThemeProvider.jsx | 6 ++-
.../src/js/components/types/form/TypeForm.jsx | 8 +++-
.../components/types/form/TypeFormButtons.jsx | 36 ++++++++++++++++-
.../types/form/TypeFormController.js | 10 +++++
.../types/form/TypeFormControllerCancel.js | 13 ++++++
.../types/form/TypeFormControllerEdit.js | 13 ++++++
.../types/form/TypeFormControllerLoad.js | 1 +
.../types/form/TypeFormParameters.jsx | 4 ++
.../types/form/TypeFormParametersProperty.jsx | 40 +++++++++++++------
.../types/form/TypeFormParametersSection.jsx | 5 ++-
.../types/form/TypeFormParametersType.jsx | 39 ++++++++++++------
.../components/types/form/TypeFormPreview.jsx | 6 ++-
.../types/form/TypeFormPreviewProperty.jsx | 9 ++++-
.../types/form/TypeFormPreviewSection.jsx | 9 ++++-
19 files changed, 268 insertions(+), 40 deletions(-)
create mode 100644 openbis_ng_ui/src/js/components/common/form/FormFieldView.jsx
create mode 100644 openbis_ng_ui/src/js/components/types/form/TypeFormControllerCancel.js
create mode 100644 openbis_ng_ui/src/js/components/types/form/TypeFormControllerEdit.js
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 441f325c32e..d1409a98c49 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 d88f68828c6..555a15c46b1 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 00000000000..7880f74ac39
--- /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 3773366d5bd..d0710e77d32 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 7b4cffc089b..ff2c92e6a0e 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 37c13343d06..cdd4015b050 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 ba99c7ca8d8..27dd562c81d 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 5c8380e25fb..cd29075d160 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 d6c2e6cf994..c1bb6c49e73 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 00000000000..edd22720071
--- /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 00000000000..3d9bfab7049
--- /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 793e8223ea1..9e03e95ca8d 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 2265ef2a856..c1b23a944d7 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 5b9a40d253e..f1c7cd8a36f 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 00f889990fa..07348b69f56 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 fec37933406..e3313ed26f5 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 edc8b241f3e..35a170b31b6 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 c0d39db6cb5..7f2c44e3a08 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 6de3d19b500..d3a99ef55be 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}
--
GitLab