From edc0150d532657fa260074b7ae7e7535d7e2071d Mon Sep 17 00:00:00 2001
From: vkovtun <viktor.kovtun@id.ethz.ch>
Date: Sat, 12 Aug 2023 12:55:47 +0200
Subject: [PATCH] SSDM-13579: Added navigation possibility to the navigation
bar.
---
.../database/data-browser/DataBrowser.jsx | 13 ++++--
.../database/data-browser/NavigationBar.jsx | 45 ++++++++++++++++---
2 files changed, 49 insertions(+), 9 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 665020187fa..ba338e8425a 100644
--- a/ui-admin/src/js/components/database/data-browser/DataBrowser.jsx
+++ b/ui-admin/src/js/components/database/data-browser/DataBrowser.jsx
@@ -150,11 +150,15 @@ class DataBrowser extends React.Component {
this.controller.gridController = gridController
}
+ async handlePathChange(path) {
+ await this.setPath(path)
+ }
+
async setPath(path) {
- if (this.state.path !== path) {
+ if (this.state.path !== path + '/') {
this.setState({ path: path + '/' })
this.controller.setPath(path + '/')
- this.controller.gridController.load()
+ await this.controller.gridController.load()
}
}
@@ -180,7 +184,10 @@ class DataBrowser extends React.Component {
selectedFile={selectedFile}
multiselectedFiles={multiselectedFiles}
/>
- <NavigationBar path={path} />
+ <NavigationBar
+ path={path}
+ onPathChange={this.handlePathChange}
+ />
<div className={[classes.flexContainer, classes.boundary, classes.content].join(' ')}>
{viewType === 'list' && (
<Grid
diff --git a/ui-admin/src/js/components/database/data-browser/NavigationBar.jsx b/ui-admin/src/js/components/database/data-browser/NavigationBar.jsx
index 1b14c036bb2..f3452c43fc8 100644
--- a/ui-admin/src/js/components/database/data-browser/NavigationBar.jsx
+++ b/ui-admin/src/js/components/database/data-browser/NavigationBar.jsx
@@ -20,6 +20,7 @@ import { withStyles } from '@material-ui/core/styles'
import autoBind from 'auto-bind'
import logger from "@src/js/common/logger.js";
import Container from "@src/js/components/common/form/Container.jsx";
+import Link from "@material-ui/core/Link";
const buttonSize = 'small'
@@ -29,7 +30,10 @@ const styles = theme => ({
display: 'flex',
whiteSpace: 'nowrap',
marginLeft: theme.spacing(1),
- marginRight: theme.spacing(1)
+ marginRight: theme.spacing(1),
+ },
+ link: {
+ fontSize: theme.typography.body2.fontSize
}
})
@@ -37,21 +41,50 @@ class NavigationBar extends React.Component {
constructor(props, context) {
super(props, context)
autoBind(this)
+ }
+
+ splitPath(path) {
+ const folders = path.split('/').filter((folder) => folder.length > 0)
+ let paths = new Array(folders.length)
+
+ if (paths.length > 0) {
+ paths[0] = '/' + folders[0]
+ for (let i = 1; i < paths.length; i++) {
+ paths[i] = paths[i - 1] + '/' + folders[i]
+ }
+ }
- this.controller = this.props.controller
+ return { folders, paths }
}
- handleUploadFiles() {}
+ renderLinks() {
+ const { classes, path, onPathChange } = this.props
+ const { folders, paths } = this.splitPath(path)
+ const components = new Array(2 * paths.length + 1)
- handleUploadFolders() {}
+ components[0] = '/'
+ for (let i = 0; i < paths.length; i++) {
+ components[2 * i + 1] = <Link
+ key={'path-' + i}
+ classes={{ root: classes.link }}
+ component="button"
+ onClick={() => onPathChange(paths[i])}
+ disabled={i === path.length - 1}
+ >
+ {folders[i]}
+ </Link>
+ components[2 * i + 2] = '/'
+ }
+
+ return components
+ }
render() {
logger.log(logger.DEBUG, 'NavigationBar.render')
- const { classes, path } = this.props
return (
<Container>
- { path }
+ { this.renderLinks() }
</Container>
)
}
--
GitLab