From 18b067e3715b4986bd2aadd5daa5db8b1d84f17c Mon Sep 17 00:00:00 2001
From: vkovtun <viktor.kovtun@id.ethz.ch>
Date: Thu, 22 Jun 2023 17:06:19 +0200
Subject: [PATCH] SSDM-13579: Added file info panel.
---
.../database/data-browser/DataBrowser.jsx | 121 ++++++++++--------
.../database/data-browser/InfoPanel.jsx | 67 ++++++++++
.../database/data-browser/Toolbar.jsx | 1 -
3 files changed, 132 insertions(+), 57 deletions(-)
create mode 100644 ui-admin/src/js/components/database/data-browser/InfoPanel.jsx
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 b8c442ba83c..8c600dd90f6 100644
--- a/ui-admin/src/js/components/database/data-browser/DataBrowser.jsx
+++ b/ui-admin/src/js/components/database/data-browser/DataBrowser.jsx
@@ -12,6 +12,7 @@ import Grid from '@src/js/components/common/grid/Grid.jsx'
import GridFilterOptions from '@src/js/components/common/grid/GridFilterOptions.js'
import AppController from '@src/js/components/AppController.js'
import ItemIcon from '@src/js/components/database/data-browser/ItemIcon.jsx'
+import { InfoPanel } from "@src/js/components/database/data-browser/InfoPanel.jsx";
const styles = theme => ({
boundary: {
@@ -24,6 +25,10 @@ const styles = theme => ({
icon: {
fontSize: '4rem',
},
+ flex: {
+ display: 'flex',
+ flexWrap: 'wrap',
+ }
})
const configuration =
@@ -116,8 +121,8 @@ class DataBrowser extends React.Component {
// TODO: implement
}
- handleSelect(file) {
- this.setState({selectedFile: file});
+ handleSelect(selectedRow) {
+ this.setState({selectedFile: selectedRow.data});
}
handleMultiselect(file) {
@@ -142,60 +147,64 @@ class DataBrowser extends React.Component {
viewType={viewType}
onViewTypeChange={this.handleViewTypeChange}
/>
- {viewType === 'list' && (
- <Grid
- // id={id}
- // settingsId={id}
- filterModes={[GridFilterOptions.COLUMN_FILTERS]}
- header='Files'
- columns={[
- {
- name: 'name',
- label: 'Name',
- sortable: true,
- getValue: ({ row }) => row,
- renderValue: ({ value }) => <><ItemIcon file={value} classes={classes} configuration={configuration} /> {value.name}</>,
- renderFilter: null
- },
- {
- name: 'size',
- label: 'Size',
- sortable: true,
- getValue: ({ row }) => row.size
- },
- {
- name: 'modified',
- label: 'Modified',
- sortable: false,
- getValue: ({ row }) => row.lastModifiedTime.toLocaleString()
- },
- ]}
- loadRows={this.load}
- sort='registrationDate'
- sortDirection='desc'
- exportable={false}
- selectable={true}
- multiselectable={true}
- loadSettings={null}
- onSettingsChange={null}
- onError={this.onError}
- exportXLS={null}
- />
- )}
- {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}
- />
- )}
+ <div className={classes.flex}>
+ {viewType === 'list' && (
+ <Grid
+ // id={id}
+ // settingsId={id}
+ filterModes={[GridFilterOptions.COLUMN_FILTERS]}
+ header='Files'
+ columns={[
+ {
+ name: 'name',
+ label: 'Name',
+ sortable: true,
+ getValue: ({ row }) => row,
+ renderValue: ({ value }) => <><ItemIcon file={value} classes={classes} configuration={configuration} /> {value.name}</>,
+ renderFilter: null
+ },
+ {
+ name: 'size',
+ label: 'Size',
+ sortable: true,
+ getValue: ({ row }) => row.size
+ },
+ {
+ name: 'modified',
+ label: 'Modified',
+ sortable: false,
+ getValue: ({ row }) => row.lastModifiedTime.toLocaleString()
+ },
+ ]}
+ loadRows={this.load}
+ sort='registrationDate'
+ sortDirection='desc'
+ exportable={false}
+ selectable={true}
+ multiselectable={true}
+ loadSettings={null}
+ onSettingsChange={null}
+ onError={this.onError}
+ onSelectedRowChange={this.handleSelect}
+ exportXLS={null}
+ />
+ )}
+ {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}
+ />
+ )}
+ <InfoPanel file={selectedFile} />
+ </div>
</Paper>
)
}
diff --git a/ui-admin/src/js/components/database/data-browser/InfoPanel.jsx b/ui-admin/src/js/components/database/data-browser/InfoPanel.jsx
new file mode 100644
index 00000000000..082c516d5c0
--- /dev/null
+++ b/ui-admin/src/js/components/database/data-browser/InfoPanel.jsx
@@ -0,0 +1,67 @@
+/*
+ * Copyright ETH 2023 Zürich, Scientific IT Services
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import React from 'react'
+
+import autoBind from 'auto-bind'
+import Container from '@src/js/components/common/form/Container.jsx'
+import Table from '@material-ui/core/Table'
+import TableBody from '@material-ui/core/TableBody'
+import TableCell from '@material-ui/core/TableCell'
+import TableRow from '@material-ui/core/TableRow'
+
+export class InfoPanel extends React.Component {
+ constructor(props, context) {
+ super(props, context)
+ autoBind(this)
+ }
+
+ render() {
+ const { classes, file } = this.props
+
+ // return <div>Test</div>
+
+ return (file &&
+ <Container>
+ <Table>
+ <TableBody>
+ <TableRow>
+ <TableCell variant='head'>Name</TableCell>
+ <TableCell>{file.name}</TableCell>
+ </TableRow>
+ <TableRow>
+ <TableCell variant='head'>Size</TableCell>
+ <TableCell>{file.size}</TableCell>
+ </TableRow>
+ <TableRow>
+ <TableCell variant='head'>Created</TableCell>
+ <TableCell>{file.creationTime.toLocaleString()}</TableCell>
+ </TableRow>
+ <TableRow>
+ <TableCell variant='head'>Modified</TableCell>
+ <TableCell>{file.lastModifiedTime.toLocaleString()}</TableCell>
+ </TableRow>
+ <TableRow>
+ <TableCell variant='head'>Accessed</TableCell>
+ <TableCell>{file.lastAccessTime.toLocaleString()}</TableCell>
+ </TableRow>
+ </TableBody>
+ </Table>
+ </Container>
+ )
+ }
+}
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 dafb0c83732..a7cdd4ccedc 100644
--- a/ui-admin/src/js/components/database/data-browser/Toolbar.jsx
+++ b/ui-admin/src/js/components/database/data-browser/Toolbar.jsx
@@ -18,7 +18,6 @@
import React from 'react'
import { withStyles } from '@material-ui/core/styles'
import messages from '@src/js/common/messages.js'
-import Container from '@src/js/components/common/form/Container.jsx'
import Button from '@src/js/components/common/form/Button.jsx'
import ViewComfyIcon from '@material-ui/icons/ViewComfy'
import ViewListIcon from '@material-ui/icons/ViewList'
--
GitLab