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 dd8e946f5ae084fc90fb3ec171da8513ae337a29..ef4e4246ce58f041f645a9557f5855bbb5d6691b 100644
--- a/ui-admin/src/js/components/database/data-browser/DataBrowser.jsx
+++ b/ui-admin/src/js/components/database/data-browser/DataBrowser.jsx
@@ -96,7 +96,9 @@ class DataBrowser extends React.Component {
lastModifiedTime: new Date('2023-05-30 15:33:14.048038'),
lastAccessTime: new Date('2023-05-30 15:33:14.048038')
}
- ]
+ ],
+ selectedFile: null,
+ multiselectedFiles: new Set([])
}
}
@@ -104,15 +106,56 @@ class DataBrowser extends React.Component {
this.setState({ viewType })
}
+ handleClick(file) {
+ // TODO: implement
+ }
+
+ handleSelect(file) {
+ this.setState({selectedFile: file});
+ }
+
+ handleMultiselect(file) {
+ // TODO: implement
+ }
+
render() {
- const { viewType, files } = this.state
+ const { viewType, files, selectedFile, multiselectedFiles } = this.state
const { classes } = this.props
return (
<Paper className={classes.boundary}>
- <Toolbar viewType={viewType} onViewTypeChange={this.handleViewTypeChange} />
- {viewType === 'list' && <ListView configuration={configuration} files={files} />}
- {viewType === 'grid' && <GridView configuration={configuration} files={files} />}
+ <Toolbar
+ viewType={viewType}
+ onViewTypeChange={this.handleViewTypeChange}
+ />
+ {viewType === 'list' && (
+ <ListView
+ clickable={true}
+ selectable={true}
+ multiselectable={true}
+ onClick={this.handleClick}
+ onSelect={this.handleSelect}
+ onMultiselect={this.handleMultiselect}
+ configuration={configuration}
+ files={files}
+ selectedFile = {selectedFile}
+ multiselectedFiles = {multiselectedFiles}
+ />
+ )}
+ {viewType === 'grid' && (
+ <GridView
+ clickable={true}
+ selectable={true}
+ multiselectable={true}
+ onClick={this.handleClick}
+ onSelect={this.handleSelect}
+ onMultiselect={this.handleMultiselect}
+ configuration={configuration}
+ files={files}
+ selectedFile = {selectedFile}
+ multiselectedFiles = {multiselectedFiles}
+ />
+ )}
</Paper>
)
}
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 873846029c8f9e50790a6c01dcc93eb5c50f91f3..d16fc15ac14b88752992a6e2ad0c746c9a5fae5b 100644
--- a/ui-admin/src/js/components/database/data-browser/GridView.jsx
+++ b/ui-admin/src/js/components/database/data-browser/GridView.jsx
@@ -1,27 +1,73 @@
-import React from 'react'
-import { withStyles } from '@material-ui/core/styles'
-import GridViewItem from '@src/js/components/database/data-browser/GridViewItem.jsx'
-import Grid from '@material-ui/core/Grid'
-
-const styles = (theme) => ({
- container: {
- fontFamily: theme.typography.fontFamily,
- display: 'grid',
- gridTemplateColumns: 'repeat(auto-fill, minmax(8rem, 1fr))',
- gridGap: '0.5rem'
- }
-})
+import React from "react";
+import { withStyles } from "@material-ui/core/styles";
+import GridViewItem from "@src/js/components/database/data-browser/GridViewItem.jsx";
+import Grid from "@material-ui/core/Grid";
+import autoBind from "auto-bind";
+
+const styles = theme => ({
+ container: {
+ fontFamily: theme.typography.fontFamily,
+ display: "grid",
+ gridTemplateColumns: "repeat(auto-fill, minmax(8rem, 1fr))",
+ gridGap: "0.5rem"
+ }
+});
class GridView extends React.Component {
+ constructor(props, context) {
+ super(props, context);
+ autoBind(this);
+ }
+
+ handleClick(event, file) {
+ const { clickable, onClick } = this.props;
+
+ if (clickable && onClick) {
+ onClick(file);
+ }
+ }
+
+ handleSelect(event, file) {
+ const { selectable, onSelect } = this.props;
- render() {
- const { classes, configuration, files } = this.props
- return (
- <Grid container className={classes.container}>
- {files.map((file) => <GridViewItem file={file} configuration={configuration}/>)}
- </Grid>
- )
+ if (selectable && onSelect) {
+ onSelect(file);
}
+ }
+
+ handleMultiselect(event) {
+ event.preventDefault();
+ event.stopPropagation();
+
+ const { multiselectable, onMultiselect, file } = this.props;
+
+ if (multiselectable && onMultiselect) {
+ onMultiselect(file);
+ }
+ }
+
+ render() {
+ const { clickable, selectable, multiselectable, classes, configuration, files, selectedFile, multiselectedFiles } = this.props;
+
+ return (
+ <Grid container className={classes.container}>
+ {files.map(file => (
+ <GridViewItem
+ clickable={clickable}
+ selectable={selectable}
+ selected={selectedFile === file}
+ multiselectable={multiselectable}
+ multiselected={multiselectedFiles.has(file)}
+ file={file}
+ configuration={configuration}
+ onClick={this.handleClick}
+ onSelect={this.handleSelect}
+ onMultiselect={this.handleMultiselect}
+ />
+ ))}
+ </Grid>
+ );
+ }
}
-export default withStyles(styles)(GridView)
+export default withStyles(styles)(GridView);
diff --git a/ui-admin/src/js/components/database/data-browser/GridViewItem.jsx b/ui-admin/src/js/components/database/data-browser/GridViewItem.jsx
index 4fa61126d9c6cd00e83335106d6b318b54dc9844..c9f88d8fcf5254b571992a97daa9a698cb8cf1c0 100644
--- a/ui-admin/src/js/components/database/data-browser/GridViewItem.jsx
+++ b/ui-admin/src/js/components/database/data-browser/GridViewItem.jsx
@@ -1,45 +1,93 @@
import React from 'react'
import { withStyles } from '@material-ui/core/styles'
import Grid from '@material-ui/core/Grid'
-import Card from "@material-ui/core/Card";
-import { CardContent, CardMedia } from "@material-ui/core";
+import Card from '@material-ui/core/Card'
+import { CardContent, CardMedia } from '@material-ui/core'
import ItemIcon from '@src/js/components/database/data-browser/ItemIcon.jsx'
+import autoBind from "auto-bind";
const styles = (theme) => ({
- cell: {
- display: 'block',
- position: 'relative',
- width: '8rem',
- height: '8rem',
- overflow: 'hidden',
- margin: '0.25rem',
- textAlign: 'center',
- cursor: 'pointer',
- '&:hover': {
- backgroundColor: '#0000000a'
- },
- },
- name: {
- padding: '0'
+ cell: {
+ display: 'block',
+ position: 'relative',
+ width: '8rem',
+ height: '8rem',
+ overflow: 'hidden',
+ margin: '0.25rem',
+ textAlign: 'center',
+ '&:hover': {
+ backgroundColor: '#0000000a'
}
+ },
+ name: {
+ padding: '0'
+ },
+ clickable: {
+ cursor: 'pointer'
+ },
+ selectable: {
+ cursor: 'pointer'
+ },
+ selected: {
+ backgroundColor: '#e8f7fd'
+ }
})
class GridViewItem extends React.Component {
- render() {
- const { classes, file, configuration } = this.props
-
- return (
- <Grid item component={Card} variant="outlined" className={classes.cell}>
- <CardMedia>
- <ItemIcon file={file} configuration={configuration} />
- </CardMedia>
- <CardContent className={classes.name}>
- {file.name}
- </CardContent>
- </Grid>
- )
+
+ constructor(props, context) {
+ super(props, context);
+ autoBind(this);
+ }
+
+ handleClick(event) {
+ const { onClick, onSelect, file } = this.props;
+
+ onClick(event, file);
+ onSelect(event, file);
+ };
+
+ render() {
+ const { classes,
+ file,
+ configuration,
+ clickable,
+ selectable,
+ multiselectable,
+ selected
+ } = this.props
+
+ let itemClasses = [classes.cell]
+
+ if (multiselectable) {
+ itemClasses.push(classes.multiselectable)
+ }
+ if (selectable) {
+ itemClasses.push(classes.selectable)
+ }
+ if (selected) {
+ itemClasses.push(classes.selected)
}
+ if (clickable) {
+ itemClasses.push(classes.clickable)
+ }
+
+ return (
+ <Grid
+ item
+ component={Card}
+ variant='outlined'
+ className={itemClasses.join(' ')}
+ onClick={this.handleClick}
+ >
+ <CardMedia>
+ <ItemIcon file={file} configuration={configuration} />
+ </CardMedia>
+ <CardContent className={classes.name}>{file.name}</CardContent>
+ </Grid>
+ )
+ }
}
export default withStyles(styles)(GridViewItem)
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 5e0cb735a8ebd682c9e2a38f5f04d71dad42f3c1..6325a77c09bc54eb238a479a012d3a951f1587fe 100644
--- a/ui-admin/src/js/components/database/data-browser/ListView.jsx
+++ b/ui-admin/src/js/components/database/data-browser/ListView.jsx
@@ -55,7 +55,10 @@ const styles = theme => ({
tableData: {
padding: theme.spacing(2),
borderWidth: '0'
- }
+ },
+ selected: {
+ backgroundColor: '#e8f7fd'
+ },
})
class ListView extends React.Component {