Commit ec7b8701 authored by Markus Scheidgen's avatar Markus Scheidgen
Browse files

Added download/edit button combo to all lists.

parent 5d60b5f6
import React from 'react'
import PropTypes from 'prop-types'
import FileSaver from 'file-saver'
import { withApi } from './api'
import { compose } from 'recompose'
import { withErrors } from './errors'
import { apiBase } from '../config'
import { Tooltip, IconButton } from '@material-ui/core'
import DownloadIcon from '@material-ui/icons/CloudDownload'
class DownloadButton extends React.Component {
static propTypes = {
/**
* 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
*/
tooltip: PropTypes.string,
/**
* Whether the button is disabled
*/
disabled: PropTypes.bool,
/**
* Properties forwarded to the button.
*/
buttonProps: PropTypes.object,
api: PropTypes.object.isRequired,
user: PropTypes.object,
raiseError: PropTypes.func.isRequired,
}
state = {
preparingDownload: false
}
async onDownloadClicked() {
const {api, query, user, fileName, raiseError} = this.props
const url = new URL(`${apiBase}/raw/query`)
url.searchParams.append('strip', 'true')
Object.keys(query).forEach(key => {url.searchParams.append(key, query[key])})
if (user) {
try {
const token = await api.getSignatureToken()
url.searchParams.append('signature_token', token)
} catch(e) {
this.setState({preparingDownload: false})
raiseError(e)
}
}
console.log(url.href)
FileSaver.saveAs(url.href, fileName || 'nomad-download.zip')
this.setState({preparingDownload: false})
}
render() {
const {tooltip, disabled, buttonProps} = this.props
const {preparingDownload} = this.state
const props = {
...buttonProps,
disabled: disabled || preparingDownload,
onClick: () => this.onDownloadClicked()
}
return <IconButton {...props}>
<Tooltip title={tooltip || 'Download'}>
<DownloadIcon />
</Tooltip>
</IconButton>
}
}
export default compose(withApi(false), withErrors)(DownloadButton)
......@@ -312,6 +312,7 @@ class SuggestionsListTextInput extends React.Component {
class EditUserMetadataDialogUnstyled extends React.Component {
static propTypes = {
classes: PropTypes.object.isRequired,
query: PropTypes.object.isRequired,
total: PropTypes.number,
example: PropTypes.object,
buttonProps: PropTypes.object,
......@@ -416,13 +417,15 @@ class EditUserMetadataDialogUnstyled extends React.Component {
}
submitPromise(verify) {
const { query, api } = this.props
const { actions } = this.state
const editRequest = {
query: query,
verify: verify,
actions: actions
}
return this.props.api.edit(editRequest).then(data => {
return api.edit(editRequest).then(data => {
if (this.unmounted) {
return
}
......
......@@ -10,6 +10,8 @@ import { Link as RouterLink } from 'react-router-dom'
import MoreIcon from '@material-ui/icons/MoreHoriz'
import DownloadIcon from '@material-ui/icons/CloudDownload'
import EditUserMetadataDialog from '../EditUserMetadataDialog'
import DownloadButton from '../DownloadButton'
import { create } from 'jss'
export class EntryListUnstyled extends React.Component {
static propTypes = {
......@@ -213,13 +215,13 @@ export class EntryListUnstyled extends React.Component {
}
renderEntryActions(row) {
const query= {
calc_id: row.calc_id
}
return <React.Fragment>
<EditUserMetadataDialog example={row} total={1} onEditComplete={() => this.props.onChange()} />
<Tooltip title="Download raw files">
<IconButton>
<DownloadIcon />
</IconButton>
</Tooltip>
<EditUserMetadataDialog example={row} query={query} total={1} onEditComplete={() => this.props.onChange()} />
<DownloadButton query={query} tooltip="Download raw files" />
<Tooltip title="View entry page">
<IconButton onClick={() => this.props.history.push(`/entry/id/${row.upload_id}/${row.calc_id}`)}>
<MoreIcon />
......@@ -229,7 +231,7 @@ export class EntryListUnstyled extends React.Component {
}
render() {
const { classes, data, order, order_by, page, per_page, domain, editable, title, ...rest } = this.props
const { classes, data, order, order_by, page, per_page, domain, editable, title, query, actions, ...rest } = this.props
const { results, pagination: { total } } = data
const { selected } = this.state
......@@ -250,20 +252,22 @@ export class EntryListUnstyled extends React.Component {
onChangeRowsPerPage={this.handleChangeRowsPerPage}
/>
const example = selected ? data.results.find(d => d.calc_id === selected[0]) : data.results[0]
const selectActions = <React.Fragment>
<EditUserMetadataDialog
buttonProps={{color: 'primary'}}
const example = selected && selected.length > 0 ? results.find(d => d.calc_id === selected[0]) : results[0]
const selectQuery = selected ? {calc_id: selected.join(',')} : query
const createActions = (props, moreActions) => <React.Fragment>
{example ? <EditUserMetadataDialog
example={example} total={total}
disabled={!editable}
onEditComplete={() => this.props.onChange()}
/>
<Tooltip title="Download raw files">
<IconButton color="primary">
<DownloadIcon />
</IconButton>
</Tooltip>
{...props}
/> : ''}
<DownloadButton
tooltip="Download raw files"
{...props}/>
{moreActions}
</React.Fragment>
const selectActions = createActions({query: selectQuery, buttonProps: {color: 'primary'}})
const allActions = createActions({query: query}, actions)
return (
<div className={classes.root}>
......@@ -284,6 +288,7 @@ export class EntryListUnstyled extends React.Component {
onOrderChanged={(order, orderBy) => this.handleChange({order: order === 'asc' ? -1 : 1, order_by: orderBy})}
rows={per_page}
pagination={pagination}
actions={allActions}
{...rest}
/>
</div>
......
......@@ -485,7 +485,7 @@ class Upload extends React.Component {
return <EntryList
title={`Upload with ${data.pagination.total} detected entries`}
query={{upload_id: this.props.upload_id}}
query={{upload_id: upload.upload_id}}
columns={columns}
selectedColumns={Upload.defaultSelectedColumns}
editable={tasks_status === 'SUCCESS'}
......
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