From e371fa0d9628115c7945f73af2f401b6b624057e Mon Sep 17 00:00:00 2001
From: pkupczyk <piotr.kupczyk@id.ethz.ch>
Date: Tue, 1 Sep 2020 11:02:39 +0200
Subject: [PATCH] NG_UI : vocabulary form : SSDM-7579 - clicking on a selected
item does not deselect it anymore (changed at both vocabulary form as well as
type form)
---
.../src/js/components/common/grid/Grid.jsx | 11 +++++++---
.../components/common/grid/GridContainer.jsx | 11 +++++++---
.../components/common/grid/GridController.js | 20 ++++++++++---------
.../src/js/components/common/grid/GridRow.jsx | 10 +++++-----
.../types/form/TypeFormPreviewProperty.jsx | 9 +--------
.../types/form/TypeFormPreviewSection.jsx | 8 +-------
.../components/types/form/VocabularyForm.jsx | 9 +++++----
7 files changed, 39 insertions(+), 39 deletions(-)
diff --git a/openbis_ng_ui/src/js/components/common/grid/Grid.jsx b/openbis_ng_ui/src/js/components/common/grid/Grid.jsx
index 0ccc2299387..d8fe3c715f0 100644
--- a/openbis_ng_ui/src/js/components/common/grid/Grid.jsx
+++ b/openbis_ng_ui/src/js/components/common/grid/Grid.jsx
@@ -1,5 +1,6 @@
import _ from 'lodash'
import React from 'react'
+import autoBind from 'auto-bind'
import { connect } from 'react-redux'
import { withStyles } from '@material-ui/core/styles'
import Table from '@material-ui/core/Table'
@@ -47,6 +48,7 @@ function mapStateToProps(state) {
class Grid extends React.PureComponent {
constructor(props) {
super(props)
+ autoBind(this)
this.state = {}
@@ -76,6 +78,10 @@ class Grid extends React.PureComponent {
}
}
+ handleClickContainer(event) {
+ event.stopPropagation()
+ }
+
render() {
logger.log(logger.DEBUG, 'Grid.render')
@@ -83,7 +89,7 @@ class Grid extends React.PureComponent {
return <React.Fragment />
}
- const { classes, onSelectedRowChange } = this.props
+ const { classes } = this.props
const {
filters,
sort,
@@ -97,7 +103,7 @@ class Grid extends React.PureComponent {
} = this.state
return (
- <div>
+ <div onClick={this.handleClickContainer}>
<Table classes={{ root: classes.table }}>
<GridHeader
columns={columns}
@@ -115,7 +121,6 @@ class Grid extends React.PureComponent {
columns={columns}
row={row}
selected={selectedRow ? selectedRow.id === row.id : false}
- selectable={onSelectedRowChange}
onClick={this.controller.handleRowSelect}
/>
)
diff --git a/openbis_ng_ui/src/js/components/common/grid/GridContainer.jsx b/openbis_ng_ui/src/js/components/common/grid/GridContainer.jsx
index 656e105a1ec..ffd976d3d21 100644
--- a/openbis_ng_ui/src/js/components/common/grid/GridContainer.jsx
+++ b/openbis_ng_ui/src/js/components/common/grid/GridContainer.jsx
@@ -5,14 +5,19 @@ const styles = theme => ({
container: {
padding: theme.spacing(2),
paddingTop: theme.spacing(1),
- paddingBottom: 0
+ paddingBottom: 0,
+ height: '100%'
}
})
class GridContainer extends React.Component {
render() {
- const { classes, children } = this.props
- return <div className={classes.container}>{children}</div>
+ const { classes, onClick, children } = this.props
+ return (
+ <div className={classes.container} onClick={onClick}>
+ {children}
+ </div>
+ )
}
}
diff --git a/openbis_ng_ui/src/js/components/common/grid/GridController.js b/openbis_ng_ui/src/js/components/common/grid/GridController.js
index 038164d4baf..5eb50c94523 100644
--- a/openbis_ng_ui/src/js/components/common/grid/GridController.js
+++ b/openbis_ng_ui/src/js/components/common/grid/GridController.js
@@ -140,11 +140,19 @@ export default class GridController {
}
async updateAllRows(rows) {
- await this._recalculateCurrentRows(rows)
+ const { allRows } = this.context.getState()
+
+ if (allRows !== rows) {
+ await this._recalculateCurrentRows(rows)
+ }
}
async updateSelectedRowId(selectedRowId) {
- await this._recalculateSelectedRow(selectedRowId)
+ const { selectedRow } = this.context.getState()
+
+ if (!selectedRow || selectedRow.id !== selectedRowId) {
+ await this._recalculateSelectedRow(selectedRowId)
+ }
}
async _recalculateCurrentRows(rows) {
@@ -340,13 +348,7 @@ export default class GridController {
}
handleRowSelect(row) {
- const { selectedRow } = this.context.getState()
-
- if (selectedRow && selectedRow.id === row.id) {
- this.updateSelectedRowId(null)
- } else {
- this.updateSelectedRowId(row.id)
- }
+ this.updateSelectedRowId(row ? row.id : null)
}
_filter(rows, columns, filters) {
diff --git a/openbis_ng_ui/src/js/components/common/grid/GridRow.jsx b/openbis_ng_ui/src/js/components/common/grid/GridRow.jsx
index 865bd76121a..566834cefcd 100644
--- a/openbis_ng_ui/src/js/components/common/grid/GridRow.jsx
+++ b/openbis_ng_ui/src/js/components/common/grid/GridRow.jsx
@@ -5,12 +5,12 @@ import TableCell from '@material-ui/core/TableCell'
import logger from '@src/js/common/logger.js'
const styles = theme => ({
+ row: {
+ cursor: 'pointer'
+ },
cell: {
padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`,
borderColor: theme.palette.border.secondary
- },
- selectable: {
- cursor: 'pointer'
}
})
@@ -30,7 +30,7 @@ class GridRow extends React.PureComponent {
render() {
logger.log(logger.DEBUG, 'GridRow.render')
- const { columns, row, selected, selectable, classes } = this.props
+ const { columns, row, selected, classes } = this.props
return (
<TableRow
@@ -39,7 +39,7 @@ class GridRow extends React.PureComponent {
hover={true}
selected={selected}
classes={{
- root: selectable ? classes.selectable : null
+ root: classes.row
}}
>
{columns.map(column => this.renderCell(column, row))}
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 d533f76455b..8cb716309e6 100644
--- a/openbis_ng_ui/src/js/components/types/form/TypeFormPreviewProperty.jsx
+++ b/openbis_ng_ui/src/js/components/types/form/TypeFormPreviewProperty.jsx
@@ -220,15 +220,8 @@ class TypeFormPreviewProperty extends React.PureComponent {
}
handleClick(event, newSelection) {
- const { selection } = this.props
-
event.stopPropagation()
-
- if (_.isEqual(selection, newSelection)) {
- this.props.onSelectionChange()
- } else {
- this.props.onSelectionChange(newSelection.type, newSelection.params)
- }
+ this.props.onSelectionChange(newSelection.type, newSelection.params)
}
handleChange(event) {
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 170c848b494..e7fd2081b91 100644
--- a/openbis_ng_ui/src/js/components/types/form/TypeFormPreviewSection.jsx
+++ b/openbis_ng_ui/src/js/components/types/form/TypeFormPreviewSection.jsx
@@ -44,8 +44,6 @@ class TypeFormPreviewSection extends React.PureComponent {
}
handleClick(event) {
- const { selection } = this.props
-
event.stopPropagation()
const newSelection = {
@@ -56,11 +54,7 @@ class TypeFormPreviewSection extends React.PureComponent {
}
}
- if (_.isEqual(selection, newSelection)) {
- this.props.onSelectionChange()
- } else {
- this.props.onSelectionChange(newSelection.type, newSelection.params)
- }
+ this.props.onSelectionChange(newSelection.type, newSelection.params)
}
render() {
diff --git a/openbis_ng_ui/src/js/components/types/form/VocabularyForm.jsx b/openbis_ng_ui/src/js/components/types/form/VocabularyForm.jsx
index e8150aebed0..3da7e258f68 100644
--- a/openbis_ng_ui/src/js/components/types/form/VocabularyForm.jsx
+++ b/openbis_ng_ui/src/js/components/types/form/VocabularyForm.jsx
@@ -43,9 +43,6 @@ class VocabularyForm extends React.PureComponent {
super(props)
autoBind(this)
- this.handleSelectedRowChange = this.handleSelectedRowChange.bind(this)
- this.handleGridControllerRef = this.handleGridControllerRef.bind(this)
-
this.state = {}
if (this.props.controller) {
@@ -61,6 +58,10 @@ class VocabularyForm extends React.PureComponent {
this.controller.load()
}
+ handleClickContainer() {
+ this.controller.handleSelectionChange()
+ }
+
handleSelectedRowChange(row) {
const { controller } = this
if (row) {
@@ -95,7 +96,7 @@ class VocabularyForm extends React.PureComponent {
const { terms, selection } = this.state
return (
- <GridContainer>
+ <GridContainer onClick={this.handleClickContainer}>
<Header>Terms</Header>
<Grid
id={ids.VOCABULARY_TERMS_GRID_ID}
--
GitLab