Commit 3094acc2 authored by Matija Obreza's avatar Matija Obreza
Browse files

Updated rendering of PageSection and accession gallery

parent babc2a9b
...@@ -2,6 +2,7 @@ import * as React from 'react'; ...@@ -2,6 +2,7 @@ import * as React from 'react';
import {connect} from 'react-redux'; import {connect} from 'react-redux';
import {bindActionCreators} from 'redux'; import {bindActionCreators} from 'redux';
import { translate } from 'react-i18next'; import { translate } from 'react-i18next';
import { withStyles } from '@material-ui/core/styles';
// Actions // Actions
import { loadAccession } from 'accessions/actions/public'; import { loadAccession } from 'accessions/actions/public';
...@@ -33,9 +34,17 @@ import PdciTable from './c/PdciTable'; ...@@ -33,9 +34,17 @@ import PdciTable from './c/PdciTable';
import ImageGalleryView from 'repository/ui/c/ImageGalleryView'; import ImageGalleryView from 'repository/ui/c/ImageGalleryView';
import Button from '@material-ui/core/Button/Button'; import Button from '@material-ui/core/Button/Button';
const styles = (theme) => ({
pageSection: {
marginBottom: '1em',
},
});
interface IBrowsePageProps extends React.ClassAttributes<any> { interface IBrowsePageProps extends React.ClassAttributes<any> {
t: any; t: any;
classes: any;
uuid: string; uuid: string;
doi: string; // DOI comes from the route without the '10.' doi: string; // DOI comes from the route without the '10.'
accession: AccessionDetails; accession: AccessionDetails;
...@@ -81,8 +90,8 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> { ...@@ -81,8 +90,8 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> {
} }
public render() { public render() {
const { t, error, uuid, doi, accessions } = this.props; const { t, error, uuid, doi, accessions, classes } = this.props;
const {details: accession, pdci, datasets, subsets, files, imageGallery} = this.props.accession ? const { details: accession, pdci, datasets, subsets, files, imageGallery } = this.props.accession ?
this.props.accession this.props.accession
: :
{details: null, pdci: null, datasets: null, subsets: null, files: null, imageGallery: null}; {details: null, pdci: null, datasets: null, subsets: null, files: null, imageGallery: null};
...@@ -159,6 +168,10 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> { ...@@ -159,6 +168,10 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> {
</Properties> </Properties>
</MainSection> </MainSection>
{ imageGallery &&
<ImageGalleryView className={ classes.pageSection } imageGallery={ imageGallery }/>
}
<PageSection title={ t('accessions.common.taxonomy') }> <PageSection title={ t('accessions.common.taxonomy') }>
<Properties> <Properties>
<PropertiesItem title={ t('accessions.common.genus') }>{ accession.taxonomy.genus }</PropertiesItem> <PropertiesItem title={ t('accessions.common.genus') }>{ accession.taxonomy.genus }</PropertiesItem>
...@@ -183,29 +196,6 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> { ...@@ -183,29 +196,6 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> {
</Properties> </Properties>
</PageSection> </PageSection>
} }
{ files &&
<PageSection title={ t('accessions.public.p.display.relatedResources') }>
<Properties>
{ files.map((e: RepositoryFile) => (
<PropertiesItem key={ e.uuid } title={
<a href={ `/proxy/api/v1/repository/download/${e.uuid}` }>
<Button variant="raised" component="span">
{ t('common:action.download') }
</Button>
</a>
}>
<b>{ e.originalFilename }</b>
</PropertiesItem>
)) }
</Properties>
</PageSection>
}
{ imageGallery &&
<PageSection title={ t('accessions.public.p.display.imageGallery') }>
<ImageGalleryView imageGallery={ imageGallery }/>
</PageSection>
}
{ accession.coll && { accession.coll &&
<PageSection title={ t('accessions.public.p.display.collectingInformation') }> <PageSection title={ t('accessions.public.p.display.collectingInformation') }>
...@@ -246,6 +236,24 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> { ...@@ -246,6 +236,24 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> {
</Properties> </Properties>
</PageSection> } </PageSection> }
{ files &&
<PageSection title={ t('accessions.public.p.display.relatedResources') }>
<Properties>
{ files.map((e: RepositoryFile) => (
<PropertiesItem key={ e.uuid } title={
<a href={ `/proxy/api/v1/repository/download/${e.uuid}` }>
<Button variant="raised" component="span">
{ t('common:action.download') }
</Button>
</a>
}>
<b>{ e.originalFilename }</b>
</PropertiesItem>
)) }
</Properties>
</PageSection>
}
{ pdci && <PdciTable pdci={ pdci } title={ t('accessions.public.p.display.pdci') }/> } { pdci && <PdciTable pdci={ pdci } title={ t('accessions.public.p.display.pdci') }/> }
<PageSection title={ t('accessions.public.p.display.metadata') }> <PageSection title={ t('accessions.public.p.display.metadata') }>
...@@ -299,4 +307,4 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({ ...@@ -299,4 +307,4 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({
}, dispatch); }, dispatch);
export default connect(mapStateToProps, mapDispatchToProps)(translate()(BrowsePage)); export default connect(mapStateToProps, mapDispatchToProps)(translate()(withStyles(styles)(BrowsePage)));
...@@ -5,8 +5,8 @@ import ImageGallery from 'model/repository/ImageGallery'; ...@@ -5,8 +5,8 @@ import ImageGallery from 'model/repository/ImageGallery';
// UI // UI
import Card, {CardHeader, CardContent, CardMedia} from 'ui/common/Card'; import Card, {CardHeader, CardContent, CardMedia} from 'ui/common/Card';
import {Properties, PropertiesItem} from 'ui/common/Properties'; // import {Properties, PropertiesItem} from 'ui/common/Properties';
import PrettyDate from 'ui/common/time/PrettyDate'; // import PrettyDate from 'ui/common/time/PrettyDate';
import Grid from '@material-ui/core/Grid'; import Grid from '@material-ui/core/Grid';
import withStyles from '@material-ui/core/styles/withStyles'; import withStyles from '@material-ui/core/styles/withStyles';
...@@ -22,13 +22,13 @@ const style = (theme) => ({ ...@@ -22,13 +22,13 @@ const style = (theme) => ({
}, },
}); });
const ImageGalleryView = ({imageGallery, classes, compact = false, edit = false, ...other}: { imageGallery: ImageGallery, classes?: any, compact?: boolean, edit?: boolean }) => { const ImageGalleryView = ({imageGallery, classes, className, compact = false, edit = false, ...other}: { imageGallery: ImageGallery, className?: string, classes?: any, compact?: boolean, edit?: boolean }) => {
if (!imageGallery) { if (!imageGallery) {
return null; return null;
} }
return compact ? ( return compact ? (
<Grid item xs={ 12 }> <Grid item xs={ 12 } className={ className }>
<Card className={ classes.root }> <Card className={ classes.root }>
<CardHeader title={ imageGallery.title || imageGallery.folder } /> <CardHeader title={ imageGallery.title || imageGallery.folder } />
<CardContent> <CardContent>
...@@ -39,7 +39,7 @@ const ImageGalleryView = ({imageGallery, classes, compact = false, edit = false, ...@@ -39,7 +39,7 @@ const ImageGalleryView = ({imageGallery, classes, compact = false, edit = false,
) )
: :
( (
<Grid item xs={ 12 }> <Grid item xs={ 12 } className={ className }>
<Grid container spacing={ 16 }> <Grid container spacing={ 16 }>
{ imageGallery.images.map((image) => ( { imageGallery.images.map((image) => (
<Grid key={ image.uuid } item xs={ 12 } sm={ 6 } md={ 4 } lg={ 3 } xl={ 2 }> <Grid key={ image.uuid } item xs={ 12 } sm={ 6 } md={ 4 } lg={ 3 } xl={ 2 }>
...@@ -51,21 +51,20 @@ const ImageGalleryView = ({imageGallery, classes, compact = false, edit = false, ...@@ -51,21 +51,20 @@ const ImageGalleryView = ({imageGallery, classes, compact = false, edit = false,
</Card> </Card>
</Grid> </Grid>
)) } )) }
<Grid item xs={ 12 }>
<Card className={ classes.root }>
<CardContent>
<Properties>
<PropertiesItem title="repository.admin.c.common.path">{ imageGallery.folder }</PropertiesItem>
<PropertiesItem title="repository.admin.c.common.registered"><PrettyDate value={ new Date(imageGallery.createdDate) }/></PropertiesItem>
<PropertiesItem title="common:label.lastModified"><PrettyDate value={ new Date(imageGallery.lastModifiedDate) }/></PropertiesItem>
</Properties>
</CardContent>
</Card>
</Grid>
</Grid> </Grid>
</Grid> </Grid>
); );
// <Grid item xs={ 12 }>
// <Card className={ classes.root }>
// <CardContent>
// <Properties>
// <PropertiesItem title="repository.admin.c.common.path">{ imageGallery.folder }</PropertiesItem>
// <PropertiesItem title="repository.admin.c.common.registered"><PrettyDate value={ new Date(imageGallery.createdDate) }/></PropertiesItem>
// <PropertiesItem title="common:label.lastModified"><PrettyDate value={ new Date(imageGallery.lastModifiedDate) }/></PropertiesItem>
// </Properties>
// </CardContent>
// </Card>
// </Grid>
}; };
export default withStyles(style)(ImageGalleryView); export default withStyles(style)(ImageGalleryView);
...@@ -41,13 +41,14 @@ const styles = (theme) => ({ ...@@ -41,13 +41,14 @@ const styles = (theme) => ({
paddingRight: '1em', paddingRight: '1em',
}, },
mainSection: { mainSection: {
marginBottom: '1em',
}, },
mainSectionTitle: { mainSectionTitle: {
// color: 'Blue', // color: 'Blue',
}, },
section: { section: {
height: '100%', height: '100%',
marginBottom: '1em',
}, },
sectionTitle: { sectionTitle: {
fontSize: '1.3rem', fontSize: '1.3rem',
......
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