From 1d8cc7043411963cf1dd9b062ac98e88ce028a7e Mon Sep 17 00:00:00 2001
From: vkovtun <vkovtun@ethz.ch>
Date: Thu, 25 May 2023 12:14:29 +0200
Subject: [PATCH] SSDM-13579: Added changing logic for GridView and ListView
buttons on the toolbar.
---
.../database/data-browser/DataBrowser.jsx | 15 ++++++++++-----
.../components/database/data-browser/GridView.jsx | 2 +-
.../components/database/data-browser/ListView.jsx | 6 +++---
.../components/database/data-browser/Toolbar.jsx | 6 +++---
4 files changed, 17 insertions(+), 12 deletions(-)
diff --git a/ui-admin/src/js/components/database/data-browser/DataBrowser.jsx b/ui-admin/src/js/components/database/data-browser/DataBrowser.jsx
index 15e89d08bb9..30de7517bf2 100644
--- a/ui-admin/src/js/components/database/data-browser/DataBrowser.jsx
+++ b/ui-admin/src/js/components/database/data-browser/DataBrowser.jsx
@@ -1,5 +1,6 @@
import React from 'react'
import { withStyles } from '@material-ui/core/styles'
+import autoBind from 'auto-bind'
import Toolbar from '@src/js/components/database/data-browser/Toolbar.jsx'
import ListView from '@src/js/components/database/data-browser/ListView.jsx'
import GridView from '@src/js/components/database/data-browser/GridView.jsx'
@@ -22,23 +23,27 @@ const styles = theme => ({
class DataBrowser extends React.Component {
-
constructor(props, context) {
super(props, context)
+ autoBind(this)
this.state = {
viewType: props.viewType
}
}
+ handleViewTypeChange(viewType) {
+ this.setState({ viewType })
+ }
+
render() {
const { viewType } = this.state
const { classes } = this.props
return (
- <div className={ classes.boundary }>
- <Toolbar viewType={viewType} />
- {viewType === 'list' ? <ListView /> : null}
- {viewType === 'grid' ? <GridView /> : null}
+ <div className={classes.boundary}>
+ <Toolbar viewType={viewType} onViewTypeChange={this.handleViewTypeChange} />
+ {viewType === 'list' && <ListView />}
+ {viewType === 'grid' && <GridView />}
</div>
)
}
diff --git a/ui-admin/src/js/components/database/data-browser/GridView.jsx b/ui-admin/src/js/components/database/data-browser/GridView.jsx
index 27d31b0849c..55b7ed646e8 100644
--- a/ui-admin/src/js/components/database/data-browser/GridView.jsx
+++ b/ui-admin/src/js/components/database/data-browser/GridView.jsx
@@ -13,7 +13,7 @@ const styles = theme => ({
class GridView extends React.Component {
render() {
return (
- <div>GalleryBrowser</div>
+ <div>GridView</div>
)
}
}
diff --git a/ui-admin/src/js/components/database/data-browser/ListView.jsx b/ui-admin/src/js/components/database/data-browser/ListView.jsx
index 8e2d9d33c04..57952585991 100644
--- a/ui-admin/src/js/components/database/data-browser/ListView.jsx
+++ b/ui-admin/src/js/components/database/data-browser/ListView.jsx
@@ -1,5 +1,5 @@
-import React from "react";
-import { withStyles } from "@material-ui/core/styles";
+import React from 'react'
+import { withStyles } from '@material-ui/core/styles'
const styles = theme => ({
containerDefault: {
@@ -13,7 +13,7 @@ const styles = theme => ({
class ListView extends React.Component {
render() {
return (
- <div>ListBrowser</div>
+ <div>ListView</div>
)
}
}
diff --git a/ui-admin/src/js/components/database/data-browser/Toolbar.jsx b/ui-admin/src/js/components/database/data-browser/Toolbar.jsx
index e5d3af68adf..26b028b3bdb 100644
--- a/ui-admin/src/js/components/database/data-browser/Toolbar.jsx
+++ b/ui-admin/src/js/components/database/data-browser/Toolbar.jsx
@@ -16,11 +16,11 @@ const styles = theme => ({
class Toolbar extends React.Component {
render() {
- const { viewType } = this.props
+ const { viewType, onViewTypeChange } = this.props
return (
<Container>
- {viewType === 'list' && <Button label={<ViewComfyIcon/>}/>}
- {viewType === 'grid' && <Button label={<ViewListIcon/>}/>}
+ {viewType === 'list' && <Button label={<ViewComfyIcon/>} onClick={() => onViewTypeChange('grid')} />}
+ {viewType === 'grid' && <Button label={<ViewListIcon/>} onClick={() => onViewTypeChange('list')} />}
</Container>
)
}
--
GitLab