Commit 79d96428 authored by Maxym Borodenko's avatar Maxym Borodenko Committed by Matija Obreza
Browse files

Download accession MCPD, DwC-A, PDCI

- Download dialog
parent 60709785
......@@ -5,6 +5,7 @@
"backTo": "Back to {{where, lowercase}}",
"backToDashboard": "Back to dashboard",
"cancel": "Cancel",
"OK": "OK",
"close": "Close",
"collapse": "Collapse",
"delete": "Delete",
......
......@@ -288,6 +288,12 @@
"Admin": "Administration",
"login": "Login",
"register": "Registration"
},
"downloadDialog": {
"button": "Start download",
"title": "Before you download",
"refusing": "Refusing to export",
"warningMessage": "Accession data cannot be exported. There are more than {{value, number}} entries."
}
},
"datasets": {
......@@ -369,7 +375,9 @@
"associatedDatasets": "Associated Datasets",
"associatedSubsets": "Associated Subsets",
"relatedResources": "Related resources",
"imageGallery": "Image gallery"
"imageGallery": "Image gallery",
"MCPD": "MCPD",
"zip": "ZIP"
},
"browse": {
"title": "Accession browser",
......
......@@ -50,7 +50,9 @@
"associatedDatasets": "Associated Datasets",
"associatedSubsets": "Associated Subsets",
"relatedResources": "Related resources",
"imageGallery": "Image gallery"
"imageGallery": "Image gallery",
"MCPD": "MCPD",
"zip": "ZIP"
},
"browse": {
"title": "Accession browser",
......
......@@ -6,6 +6,7 @@ import { parse } from 'query-string';
// Actions
import { applyFilters, loadMoreAccessions, updateRoute } from 'accessions/actions/public';
import {loadArticlePromise} from 'cms/actions/public';
// Models
import Page from 'model/Page';
......@@ -22,9 +23,8 @@ import PaginationComponent from 'ui/common/pagination';
import AccessionCard from 'accessions/ui/c/AccessionCard';
import Tabs, { Tab } from 'ui/common/Tabs';
import AccessionFilters from './c/Filters';
// TODO only for demo
import Button from '@material-ui/core/Button';
import ButtonBar from 'ui/common/buttons/ButtonBar';
import Download from 'ui/common/download-acce-dialog';
class BrowsePage extends BrowsePageTemplate<Accession> {
protected static needs = [
......@@ -38,6 +38,23 @@ class BrowsePage extends BrowsePageTemplate<Accession> {
super(props, context);
}
public state = {
downloadArticle: null,
authenticated: false,
};
public componentWillMount() {
super.componentWillMount();
const { userRoles, loadArticlePromise, lang } = this.props;
const authenticated: boolean = userRoles.findIndex((role) => role === 'ROLE_USER') !== -1;
this.setState({authenticated});
const slug: string = authenticated ? 'download-authenticated' : 'download-anonymous';
if (!this.state.downloadArticle || (this.state.downloadArticle.slug !== slug)) {
loadArticlePromise(lang, slug).then((data) => this.setState({downloadArticle: data}));
}
}
public render() {
const { paged, loadMoreData, filterCode, currentTab, t} = this.props;
......@@ -61,9 +78,20 @@ class BrowsePage extends BrowsePageTemplate<Accession> {
tab={ currentTab }
actions={
<ButtonBar>
<Button variant="contained">{ t('TODO-Demo Share') }</Button>
<Button variant="contained">{ t('TODO-Demo Select all') }</Button>
<Button variant="contained">{ t('TODO-Demo Delete') }</Button>
{ this.state.authenticated &&
<Download dataType="mcpd"
article={ this.state.downloadArticle }
param={ paged && paged.filterCode || '' }
from="acn"
accessionNumber={ paged && paged.totalElements }
buttonTitle={ `${t('common:action.download')} ${t('accessions.public.p.display.MCPD')}` } />
}
<Download dataType="dwca"
article={ this.state.downloadArticle }
param={ paged && paged.filterCode || '' }
from="acn"
accessionNumber={ paged && paged.totalElements }
buttonTitle={ `${t('common:action.download')} ${t('accessions.public.p.display.zip')}` } />
</ButtonBar>
}
>
......@@ -97,12 +125,15 @@ const mapStateToProps = (state, ownProps) => ({
paged: state.accessions.public.paged || undefined,
filterCode: ownProps.match.params.filterCode,
currentTab: ownProps.match.params.tab || 'data', // current tab, or ownProps.location.pathname
userRoles: state.login.authorities,
lang: state.applicationConfig.lang,
});
const mapDispatchToProps = (dispatch) => bindActionCreators({
applyFilters,
loadMoreData: loadMoreAccessions,
updateRoute,
loadArticlePromise,
}, dispatch);
......
......@@ -24,6 +24,10 @@ export const loadArticle = (locale: string, slug: string) => (dispatch) => {
.then((article) => dispatch(receiveArticle(slug, article)));
};
export const loadArticlePromise = (locale: string, slug: string) => (dispatch) => {
return CmsService.getGlobalArticle(locale, slug);
};
const receiveDocumentation = (slug: string, documentation: ADoc) => ({
type: RECEIVE_DOCUMENTATION,
payload: {slug, documentation},
......
......@@ -32,6 +32,9 @@ import Button from '@material-ui/core/Button';
import Permissions from 'ui/common/permission/Permissions';
import FaoInstitute from 'model/genesys/FaoInstitute';
import ButtonBar from 'ui/common/buttons/ButtonBar';
import Download from 'ui/common/download-acce-dialog';
import {loadArticlePromise} from 'cms/actions/public';
import Article from 'model/cms/Article';
interface IDisplayPageProps extends React.ClassAttributes<any> {
t: any;
......@@ -43,6 +46,9 @@ interface IDisplayPageProps extends React.ClassAttributes<any> {
loadInstitute: any;
applyFilters: any;
applyOverviewFilters: any;
userRoles: string[];
loadArticlePromise: (locale: string, slug: string) => Promise<Article>;
lang: string;
}
const mobile = ['sm', 'xs'] as Breakpoint[];
......@@ -57,6 +63,11 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
super(props, context);
}
public state = {
downloadArticle: null,
authenticated: false,
};
private applyInstituteCodeFilter = () => {
const { institute, applyFilters} = this.props;
const filter = {holder: {code: [ institute.details.code ]}};
......@@ -87,11 +98,18 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
}
public componentWillMount() {
const { institute, code, loadInstitute } = this.props;
const { institute, code, loadInstitute, lang, userRoles, loadArticlePromise } = this.props;
if (code && (! institute || code !== institute.details.code)) {
console.log(`Reloading institute data for code=${code}`, institute);
loadInstitute(code);
}
const authenticated: boolean = userRoles.findIndex((role) => role === 'ROLE_USER') !== -1;
this.setState({authenticated});
const slug: string = authenticated ? 'download-authenticated' : 'download-anonymous';
if (!this.state.downloadArticle || (this.state.downloadArticle.slug !== slug)) {
loadArticlePromise(lang, slug).then((data) => this.setState({downloadArticle: data}));
}
}
public render() {
......@@ -144,9 +162,25 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
<ButtonBar barLabelText={ t('institutes.public.p.display.actions') }>
<Button onClick={ this.applyInstituteCodeFilter }>{ t('institutes.public.p.display.browseAccessions') }</Button>
<Button onClick={ this.applyFilterForOverview }>{ t('accessions.tab.overview') }</Button>
<Button onClick={ () => null }>{ `${t('common:action.download')} ${t('institutes.public.p.display.MCPD')}` }</Button>
<Button onClick={ () => null }>{ `${t('common:action.download')} ${t('institutes.public.p.display.PDCI_short')}` }</Button>
<Button onClick={ () => null }>{ `${t('common:action.download')} ${t('institutes.public.p.display.zip')}` }</Button>
{ this.state.authenticated &&
<Download dataType="mcpd"
article={ this.state.downloadArticle }
param={ code }
from="wiews"
buttonTitle={ `${t('common:action.download')} ${t('institutes.public.p.display.MCPD')}` } />
}
{ this.state.authenticated &&
<Download dataType="pdci"
param={ code }
from="wiews"
article={ this.state.downloadArticle }
buttonTitle={ `${t('common:action.download')} ${t('institutes.public.p.display.PDCI_short')}` } />
}
<Download dataType="dwca"
article={ this.state.downloadArticle }
param={ code }
from="wiews"
buttonTitle={ `${t('common:action.download')} ${t('institutes.public.p.display.zip')}` } />
{ institute.details._permissions.manage && <Link to={ `/dashboard/wiews/${institute.details.code}/edit` }><Button>{ t('common:action.edit') }</Button></Link> }
{ institute.details._permissions.manage && <Permissions clazz={ FaoInstitute.clazz } id={ institute.details.id }/> }
</ButtonBar>
......@@ -274,12 +308,15 @@ const mapStateToProps = (state, ownProps) => ({
institute: state.institutes.public.institute,
error: state.institutes.public.instituteError,
code: ownProps.match.params.wiewsCode,
userRoles: state.login.authorities,
lang: state.applicationConfig.lang,
});
const mapDispatchToProps = (dispatch) => bindActionCreators({
loadInstitute,
applyFilters,
applyOverviewFilters,
loadArticlePromise,
}, dispatch);
......
......@@ -287,6 +287,12 @@
"Admin": "Administration",
"login": "Login",
"register": "Registration"
},
"downloadDialog": {
"button": "Start download",
"title": "Before you download",
"refusing": "Refusing to export",
"warningMessage": "Accession data cannot be exported. There are more than {{value, number}} entries."
}
},
"datasets": {
......
import * as React from 'react';
import {translate} from 'react-i18next';
import {withStyles} from '@material-ui/core/styles';
// UI
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogTitle from '@material-ui/core/DialogTitle';
import DialogContentText from '@material-ui/core/DialogContentText';
import Article from 'model/cms/Article';
import Loading from 'ui/common/Loading';
/*tslint:disable*/
const styles = (theme) => ({
root: {
backgroundColor: 'white',
margin: '0px 8px',
'& > p': {
fontFamily: 'Roboto-Regular',
fontSize: '18px',
color: '#4d4c46',
lineHeight: '30px',
marginTop: '20px',
marginBottom: 0,
},
'& > h3': {
fontSize: '24px',
marginTop: '28px',
paddingBottom: '6px',
},
},
permButton: {
[theme.breakpoints.down('sm')]: {
width: '100%',
margin: '8px 0',
},
},
downloadBlock: {
width: 'auto',
display: 'flex' as 'flex',
justifyContent: 'flex-start' as 'flex-start',
paddingLeft: '24px',
paddingBottom: '24px',
},
title: {
backgroundColor: '#88ba42',
'& > h6': {
color: 'white',
paddingLeft: '8px',
marginBottom: 0,
fontSize: '1.714rem',
fontWeight: 'bold' as 'bold',
}
},
alertDescription: {
color: '#4d4c46',
}
});
/*tslint:enable*/
interface IDownloadProps extends React.ClassAttributes<any> {
classes: any;
variant?: 'text' | 'outlined' | 'contained' | 'contained' | 'fab' | 'extendedFab';
dataType: 'dwca' | 'pdci' | 'mcpd';
from: 'acn' | 'wiews';
buttonTitle: string;
param: string;
t: any;
article: Article;
accessionNumber?: number;
}
const WIEWS_DOWNLOAD_URL: string = `/proxy/api/v1/wiews/download`;
const ACN_DOWNLOAD_URL: string = `/proxy/api/v1/acn/download`;
const DOWNLOAD_LIMIT: number = 200000;
class Download extends React.Component<IDownloadProps, any> {
public state = {
open: false,
};
private show = () => {
this.setState({open: true});
}
private hide = () => {
this.setState({open: false});
}
private asyncHide = () => setTimeout(() => this.hide());
public render() {
const {variant = 'text', t, buttonTitle, from, param, dataType, classes, article, accessionNumber } = this.props;
let downloadUrl: string;
switch (from) {
case 'wiews': downloadUrl = WIEWS_DOWNLOAD_URL; break;
case 'acn': downloadUrl = ACN_DOWNLOAD_URL; break;
default: break;
}
return (
<div style={ { margin: '0 4px' } }>
<Button onClick={ this.show } className={ this.props.classes.permButton } variant={ variant }>{ buttonTitle }</Button>
{ this.state.open &&
<div>
{ accessionNumber && accessionNumber >= DOWNLOAD_LIMIT ?
<Dialog
open={ this.state.open }
onClose={ this.hide }
>
<DialogTitle id="alert-dialog-title">
<p>{ t('common.downloadDialog.refusing') }</p>
</DialogTitle>
<DialogContent>
<DialogContentText className={ classes.alertDescription }>
{ t(`common.downloadDialog.warningMessage`, {value: DOWNLOAD_LIMIT}) }
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={ this.hide } autoFocus>{ t('common:action.OK') }</Button>
</DialogActions>
</Dialog>
:
<Dialog
open={ this.state.open }
onClose={ this.hide }
maxWidth="lg"
fullWidth
>
<DialogTitle className={ classes.title }>{ t('common.downloadDialog.title') }</DialogTitle>
<DialogContent>
{
article && <div className={ classes.root } dangerouslySetInnerHTML={ {__html: article.body} }/>
|| <Loading />
}
</DialogContent>
<DialogActions className={ classes.downloadBlock }>
<form method="post" action={ `${downloadUrl}` } >
<input type="hidden" name={ `${dataType}` } value={ `${dataType}` } />
{ from === 'acn' && <input type="hidden" name="f" value={ `${param}` } /> }
{ from === 'wiews' && <input type="hidden" name="wiewsCode" value={ `${param}` } /> }
<Button variant="text" className={ `back-green` } onClick={ this.asyncHide } type="submit" autoFocus>
<span className="white">{ t('common.downloadDialog.button') }</span>
</Button>
</form>
</DialogActions>
</Dialog>
}
</div>
}
</div>
);
}
}
export default translate()(withStyles(styles)(Download));
Markdown is supported
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