Commit 484c881f authored by Markus Scheidgen's avatar Markus Scheidgen
Browse files

Download button with archive files. Search tabs with better order.

parent 1f18aced
Pipeline #65700 failed with stages
in 16 minutes and 12 seconds
......@@ -113,7 +113,7 @@ class DatasetPage extends React.Component {
<SearchContext
query={{dataset_id: datasetId}} ownerTypes={['all', 'public']} update={update}
>
<Search resultTab="entries" groups datasets />
<Search resultTab="entries" tabs={['entries', 'groups', 'datasets']} />
</SearchContext>
</div>
)
......
......@@ -5,7 +5,7 @@ import { withApi } from './api'
import { compose } from 'recompose'
import { withErrors } from './errors'
import { apiBase } from '../config'
import { Tooltip, IconButton } from '@material-ui/core'
import { Tooltip, IconButton, Menu, MenuItem } from '@material-ui/core'
import DownloadIcon from '@material-ui/icons/CloudDownload'
class DownloadButton extends React.Component {
......@@ -14,10 +14,6 @@ class DownloadButton extends React.Component {
* The query that defines what to download.
*/
query: PropTypes.object.isRequired,
/**
* A suggestion for the download filename.
*/
fileName: PropTypes.string,
/**
* A tooltip for the button
*/
......@@ -37,13 +33,17 @@ class DownloadButton extends React.Component {
}
state = {
preparingDownload: false
preparingDownload: false,
anchorEl: null
}
async onDownloadClicked(event) {
handleClick(event) {
event.stopPropagation()
this.setState({ anchorEl: event.currentTarget });
}
const {api, query, user, fileName, raiseError} = this.props
async handleSelect(choice) {
const {api, query, user, raiseError} = this.props
const params = {
strip: true
......@@ -59,25 +59,39 @@ class DownloadButton extends React.Component {
raiseError(e)
}
}
FileSaver.saveAs(`${apiBase}/raw/query?${new URLSearchParams(params).toString()}`, fileName || 'nomad-download.zip')
this.setState({preparingDownload: false})
FileSaver.saveAs(`${apiBase}/${choice}/query?${new URLSearchParams(params).toString()}`, `nomad-${choice}-download.zip`)
this.setState({preparingDownload: false, anchorEl: null})
}
handleClose() {
this.setState({anchorEl: null})
}
render() {
const {tooltip, disabled, buttonProps, dark} = this.props
const {preparingDownload} = this.state
const {preparingDownload, anchorEl} = this.state
const props = {
...buttonProps,
disabled: disabled || preparingDownload,
onClick: this.onDownloadClicked.bind(this)
onClick: this.handleClick.bind(this)
}
return <IconButton {...props} style={dark ? {color: 'white'} : null}>
<Tooltip title={tooltip || 'Download'}>
<DownloadIcon />
</Tooltip>
</IconButton>
return <React.Fragment>
<IconButton {...props} style={dark ? {color: 'white'} : null}>
<Tooltip title={tooltip || 'Download'}>
<DownloadIcon />
</Tooltip>
</IconButton>
<Menu
anchorEl={anchorEl}
open={Boolean(anchorEl)}
onClose={this.handleClose.bind(this)}
>
<MenuItem onClick={() => this.handleSelect('raw')}>Raw uploaded files</MenuItem>
<MenuItem onClick={() => this.handleSelect('archive')}>NOMAD Archive files</MenuItem>
</Menu>
</React.Fragment>
}
}
......
......@@ -61,11 +61,11 @@ class UserdataPage extends React.Component {
<SearchContext
{...this.props}
ownerTypes={['user', 'staging']} initialQuery={{owner: 'user'}}
initialRequest={{order_by: 'upload_time'}}
initialRequest={{order_by: 'upload_time', uploads: true}}
>
<Search
resultTab="entries"
datasets uploads
resultTab="uploads"
tabs={['uploads', 'datasets', 'entries']}
entryListProps={{selectedColumns: ['formula', 'upload_time', 'mainfile', 'co_authors', 'references', 'datasets']}}
/>
</SearchContext>
......
......@@ -16,14 +16,31 @@ import UploadList from './UploadsList'
import GroupList from './GroupList'
class Search extends React.Component {
static tabs = {
'entries': {
label: 'Entries',
render: (props) => <SearchEntryList {...(props || {})}/>
},
'groups': {
label: 'Grouped entries',
render: () => <SearchGroupList />
},
'uploads': {
label: 'Uploads',
render: () => <SearchUploadList />
},
'datasets': {
label: 'Datasets',
render: () => <SearchDatasetList />
}
}
static propTypes = {
classes: PropTypes.object.isRequired,
resultTab: PropTypes.string,
entryListProps: PropTypes.object,
visualization: PropTypes.string,
groups: PropTypes.bool,
datasets: PropTypes.bool,
uploads: PropTypes.bool
tabs: PropTypes.arrayOf(PropTypes.string)
}
static styles = theme => ({
......@@ -71,7 +88,7 @@ class Search extends React.Component {
static contextType = SearchContext.type
state = {
resultTab: this.resultTab || 'entries',
resultTab: 'entries',
openVisualization: this.props.visualization
}
......@@ -89,20 +106,26 @@ class Search extends React.Component {
}
}
componentDidMount() {
if ((this.props.resultTab || 'entries') !== 'entries') {
this.setState({resultTab: this.props.resultTab})
}
}
handleTabChange(tab) {
const {setRequest} = this.context
setRequest({
uploads: tab === 'uploads' ? true : undefined,
datasets: tab === 'datasets' ? true : undefined,
groups: tab === 'groups' ? true : undefined
this.setState({resultTab: tab}, () => {
setRequest({
uploads: tab === 'uploads' ? true : undefined,
datasets: tab === 'datasets' ? true : undefined,
groups: tab === 'groups' ? true : undefined
})
})
this.setState({resultTab: tab})
}
render() {
const {classes, entryListProps, groups, datasets, uploads} = this.props
const {classes, entryListProps, tabs} = this.props
const {resultTab, openVisualization} = this.state
// const {state: {request: {uploads, datasets, groups}}} = this.context
......@@ -142,28 +165,18 @@ class Search extends React.Component {
textColor="primary"
onChange={(event, value) => this.handleTabChange(value)}
>
<Tab label="Entries" value="entries" />
{groups && <Tab label="Grouped entries" value="groups" />}
{datasets && <Tab label="Datasets" value="datasets" />}
{uploads && <Tab label="Uploads" value="uploads" />}
{tabs.map(tab => <Tab
key={tab}
label={Search.tabs[tab].label}
value={tab}
/>)}
</Tabs>
<KeepState
visible={resultTab === 'entries'}
render={() => <SearchEntryList {...(entryListProps || {})}/>}
/>
{groups && <KeepState
visible={resultTab === 'groups'}
render={() => <SearchGroupList />}
/>}
{datasets && <KeepState
visible={resultTab === 'datasets'}
render={() => <SearchDatasetList />}
/>}
{uploads && <KeepState
visible={resultTab === 'uploads'}
render={() => <SearchUploadList />}
/>}
{tabs.map(tab => <KeepState
key={tab}
visible={resultTab === tab}
render={() => Search.tabs[tab].render(entryListProps)}
/>)}
</Paper>
</div>
</div>
......
......@@ -86,7 +86,7 @@ class SearchPage extends React.Component {
initialQuery={query}
ownerTypes={['all', 'public'].filter(key => user || withoutLogin.indexOf(key) !== -1)}
>
<Search visualization="elements" groups datasets />
<Search visualization="elements" tabs={['entries', 'groups', 'datasets']} />
</SearchContext>
</div>
)
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment