From 6e429feccaa5e57b956e9d7c0c6039e597bffa1e Mon Sep 17 00:00:00 2001
From: vkovtun <viktor.kovtun@id.ethz.ch>
Date: Tue, 30 May 2023 18:19:42 +0200
Subject: [PATCH] SSDM-13579: First version of grid view.
---
.../database/data-browser/GridView.jsx | 14 ++---
.../database/data-browser/GridViewItem.jsx | 52 +++++++++++++++++++
2 files changed, 59 insertions(+), 7 deletions(-)
create mode 100644 ui-admin/src/js/components/database/data-browser/GridViewItem.jsx
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 55b7ed646e8..69163f7a8b5 100644
--- a/ui-admin/src/js/components/database/data-browser/GridView.jsx
+++ b/ui-admin/src/js/components/database/data-browser/GridView.jsx
@@ -1,19 +1,19 @@
import React from 'react'
import { withStyles } from '@material-ui/core/styles'
+import GridViewItem from "@src/js/components/database/data-browser/GridViewItem.jsx";
+import Container from "@src/js/components/common/form/Container.jsx";
const styles = theme => ({
- containerDefault: {
- padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`
- },
- containerSquare: {
- padding: `${theme.spacing(2)}px ${theme.spacing(2)}px`
- }
})
class GridView extends React.Component {
+
render() {
+ const { classes, configuration, files } = this.props
return (
- <div>GridView</div>
+ <Container>
+ {files.map((file) => <GridViewItem file={file} configuration={configuration}/>)}
+ </Container>
)
}
}
diff --git a/ui-admin/src/js/components/database/data-browser/GridViewItem.jsx b/ui-admin/src/js/components/database/data-browser/GridViewItem.jsx
new file mode 100644
index 00000000000..624509fae67
--- /dev/null
+++ b/ui-admin/src/js/components/database/data-browser/GridViewItem.jsx
@@ -0,0 +1,52 @@
+import React from 'react'
+import { withStyles } from '@material-ui/core/styles'
+import FolderIcon from "@material-ui/icons/FolderOpen";
+import FileIcon from "@material-ui/icons/InsertDriveFileOutlined";
+import autoBind from "auto-bind";
+
+const styles = theme => ({
+ icon: {
+ verticalAlign: 'middle',
+ fontSize: '4rem'
+ },
+})
+
+class GridViewItem extends React.Component {
+
+ constructor(props, context) {
+ super(props, context)
+ autoBind(this)
+
+ const { configuration } = this.props
+
+ this.extensionToIconType = new Map(
+ configuration.flatMap(
+ (configObject) => configObject.extensions.map(extension => [extension, configObject.icon])
+ )
+ )
+ }
+
+ // TODO: move out this method in favour of using a utility method from DataBrowser for example
+ getIcon(file) {
+ const { classes } = this.props
+
+ if (file.folder) {
+ return <FolderIcon className={classes.icon} />
+ } else {
+ const iconType = this.extensionToIconType.get(file.name.substring(file.name.lastIndexOf(".") + 1))
+ return iconType ? React.createElement(iconType, { className: classes.icon }) : <FileIcon className={classes.icon} />
+ }
+ }
+
+ render() {
+ const { classes, file } = this.props
+
+ return (
+ <div>
+ <>{this.getIcon(file)} {file.name}</>
+ </div>
+ )
+ }
+}
+
+export default withStyles(styles)(GridViewItem)
--
GitLab