From eac0ca77cd6cd31e96ecde437c585b802f634ecf Mon Sep 17 00:00:00 2001
From: pkupczyk <piotr.kupczyk@id.ethz.ch>
Date: Tue, 5 Oct 2021 14:39:41 +0200
Subject: [PATCH] SSDM-11664 : NG UI & ELN : common table widget
---
.../src/js/components/common/grid/Grid.jsx | 21 ++--
.../components/common/grid/GridController.js | 110 ++++++++----------
2 files changed, 61 insertions(+), 70 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 0cbc01becce..7f2cfb5bc86 100644
--- a/openbis_ng_ui/src/js/components/common/grid/Grid.jsx
+++ b/openbis_ng_ui/src/js/components/common/grid/Grid.jsx
@@ -67,15 +67,16 @@ class Grid extends React.PureComponent {
this.controller.load()
}
- componentDidUpdate(prevProps) {
- if (this.props.rows !== prevProps.rows) {
- this.controller.updateRows(this.props.rows)
+ async componentDidUpdate(prevProps) {
+ if (
+ this.props.rows !== prevProps.rows ||
+ this.props.columns !== prevProps.columns
+ ) {
+ await this.controller.load()
}
+
if (this.props.selectedRowId !== prevProps.selectedRowId) {
- this.controller.updateSelectedRowId(this.props.selectedRowId)
- }
- if (this.props.columns !== prevProps.columns) {
- this.controller.updateColumns(this.props.columns)
+ await this.controller.updateSelectedRow(this.props.selectedRowId)
}
}
@@ -108,7 +109,7 @@ class Grid extends React.PureComponent {
pageSize,
columns,
rows,
- selectedRow,
+ selectedRowId,
totalCount
} = this.state
@@ -135,9 +136,7 @@ class Grid extends React.PureComponent {
key={row.id}
columns={columns}
row={row}
- selected={
- selectedRow ? selectedRow.id === row.id : false
- }
+ selected={row.id === selectedRowId}
onClick={this.controller.handleRowSelect}
/>
)
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 69927e4df50..eeef6f2a59c 100644
--- a/openbis_ng_ui/src/js/components/common/grid/GridController.js
+++ b/openbis_ng_ui/src/js/components/common/grid/GridController.js
@@ -20,7 +20,7 @@ export default class GridController {
columns: [],
rows: [],
allRows: [],
- selectedRow: null,
+ selectedRowId: null,
sort: null,
sortDirection: null,
totalCount: 0
@@ -165,9 +165,8 @@ export default class GridController {
}
async load() {
- const { columns, loadColumns, rows, loadRows } = this.context.getProps()
- const { filters, page, pageSize, sort, sortDirection, selectedRow } =
- this.context.getState()
+ const { columns, loadColumns, rows, loadRows, onLoad } =
+ this.context.getProps()
if ((rows && loadRows) || (!rows && !loadRows)) {
throw new Error(
@@ -185,6 +184,9 @@ export default class GridController {
loading: true
}))
+ const { filters, page, pageSize, sort, sortDirection } =
+ this.context.getState()
+
let newRows,
newAllRows,
newColumns,
@@ -239,7 +241,9 @@ export default class GridController {
totalCount: newTotalCount
}))
- await this._recalculateSelectedRow(selectedRow ? selectedRow.id : null)
+ if (onLoad) {
+ onLoad()
+ }
}
_loadSettings() {
@@ -335,68 +339,43 @@ export default class GridController {
openbis.updatePersons([update])
}
- async updateColumns() {
- this.load()
- }
-
- async updateRows() {
- this.load()
- }
-
- async updateSelectedRowId(selectedRowId) {
- const { selectedRow } = this.context.getState()
-
- if (!selectedRow || selectedRow.id !== selectedRowId) {
- await this._recalculateSelectedRow(selectedRowId)
- }
- }
-
- async _recalculateSelectedRow(selectedRowId) {
- const { selectedRow, rows } = this.context.getState()
+ async updateSelectedRow(newSelectedRowId) {
const { onSelectedRowChange } = this.context.getProps()
+ const { selectedRowId } = this.context.getState()
- let newSelectedRow = null
-
- if (selectedRowId !== null && selectedRowId !== undefined) {
- const foundRow = _.find(rows, row => row.id === selectedRowId)
- newSelectedRow = {
- id: selectedRowId,
- data: foundRow,
- visible: foundRow !== undefined
- }
- }
-
- if (!_.isEqual(selectedRow, newSelectedRow)) {
- await this.context.setState({
- selectedRow: newSelectedRow
- })
+ if (newSelectedRowId !== selectedRowId) {
+ await this.context.setState(() => ({
+ selectedRowId: newSelectedRowId
+ }))
if (onSelectedRowChange) {
- await onSelectedRowChange(newSelectedRow)
+ onSelectedRowChange(this.getSelectedRow())
}
}
}
- async showSelectedRow() {
- const { selectedRow, allRows, page, pageSize } = this.context.getState()
+ showSelectedRow() {
+ setTimeout(async () => {
+ const { selectedRowId, allRows, page, pageSize } = this.context.getState()
- if (!selectedRow) {
- return
- }
+ if (!selectedRowId) {
+ return
+ }
- const index = _.findIndex(allRows, ['id', selectedRow.id])
+ const index = _.findIndex(allRows, ['id', selectedRowId])
- if (index === -1) {
- return
- }
+ if (index === -1) {
+ return
+ }
- const newPage = Math.floor(index / pageSize)
+ const newPage = Math.floor(index / pageSize)
- if (newPage !== page) {
- await this.context.setState({
- page: newPage
- })
- await this.load()
- }
+ if (newPage !== page) {
+ await this.context.setState({
+ page: newPage
+ })
+ await this.load()
+ }
+ }, 1)
}
async handleFilterChange(column, filter) {
@@ -514,8 +493,8 @@ export default class GridController {
await this.load()
}
- handleRowSelect(row) {
- this.updateSelectedRowId(row ? row.id : null)
+ async handleRowSelect(row) {
+ await this.updateSelectedRow(row ? row.id : null)
}
_filter(rows, columns, filters) {
@@ -583,8 +562,21 @@ export default class GridController {
}
getSelectedRow() {
- const { selectedRow } = this.context.getState()
- return selectedRow
+ const { selectedRowId, rows, allRows } = this.context.getState()
+
+ if (selectedRowId !== null && selectedRowId !== undefined) {
+ const selectedRow = _.find(allRows, row => row.id === selectedRowId)
+ if (selectedRow !== undefined) {
+ const visible =
+ _.findIndex(rows, row => row.id === selectedRowId) !== -1
+ return {
+ id: selectedRow.id,
+ visible
+ }
+ }
+ }
+
+ return null
}
getTotalCount() {
--
GitLab