Commit faee8164 authored by Matija Obreza's avatar Matija Obreza
Browse files

Updated dataset details with traits observed and accessions evaluated

- Moved components to ./c/
- Introduced <Section component
parent e78c32ce
Pipeline #3930 passed with stages
in 3 minutes and 22 seconds
import * as React from 'react';
import compose from 'recompose/compose';
import {withStyles, StyleRules} from 'material-ui/styles';
import { withStyles, StyleRules } from 'material-ui/styles';
import Grid from 'material-ui/Grid';
import Divider from 'material-ui/Divider';
import List, {ListItem, ListItemText} from 'material-ui/List';
import List, { ListItem, ListItemText } from 'material-ui/List';
import IconButton from 'material-ui/IconButton';
import ExpandMoreIcon from 'material-ui-icons/ExpandMore';
import Collapse from 'material-ui/transitions/Collapse';
......@@ -79,23 +79,23 @@ class BrowseMenu extends React.Component<IBrowseMenuProps, any> {
public componentDidMount() {
if (['sm', 'xs'].indexOf(this.props.width) !== -1) {
this.setState({expanded: false});
this.setState({ expanded: false });
}
}
private handleExpandClick = () => {
this.setState({expanded: !this.state.expanded});
this.setState({ expanded: !this.state.expanded });
}
public componentWillReceiveProps(nextProps) {
if (['sm', 'xs'].indexOf(nextProps.width) === -1 && !this.state.expanded) {
this.setState({expanded: true});
this.setState({ expanded: true });
}
}
public render() {
const {classes} = this.props;
const { classes } = this.props;
return (
<Grid item xs={ 12 } md={ 2 } className={ classes.root }>
......
import * as React from 'react';
import {withStyles} from 'material-ui/styles';
import { withStyles } from 'material-ui/styles';
import Grid from 'material-ui/Grid';
import Typography from 'material-ui/Typography';
import LocationIcon from 'material-ui-icons/LocationOn';
import {Location} from 'model/location.model';
import { Location } from 'model/location.model';
let Map;
let Marker;
......@@ -66,11 +66,11 @@ class LocationMap extends React.Component<ILocationMapProps, any> {
private showMap = () => {
const show = !this.state.show;
this.setState({show});
this.setState({ show });
}
public render() {
const {classes, location} = this.props;
const { classes, location } = this.props;
const position = {
lat: location.decimalLatitude,
......
import * as React from 'react';
import { withStyles } from 'material-ui/styles';
import Paper from 'material-ui/Paper';
import Divider from 'material-ui/Divider';
const styleSheet = (theme) => ({
/* tslint:disable */
titleWrapper: {
margin: 0,
textTransform: 'uppercase',
'& > h1': {
fontSize: '36px',
fontWeight: 'bold',
margin: 0,
padding: '1rem',
},
'& > h2': {
fontSize: '18px',
lineHeight: '20px',
margin: 0,
padding: '1rem',
},
},
/* tslint:enable */
green: {
color: '#88ba42',
},
container: {
padding: '1rem',
},
});
const Section = ({ classes, children, title }: { title: string } & any) => (
<Paper className={ classes.paper } square>
<div className={ classes.titleWrapper }>
<h2 className={ classes.green }>{ title }</h2>
</div>
<Divider/>
<div className={ classes.container }>
{ children }
</div>
</Paper>
);
export default withStyles(styleSheet)(Section);
import * as React from 'react';
import {withStyles} from 'material-ui/styles';
import { withStyles } from 'material-ui/styles';
import Grid from 'material-ui/Grid';
import Paper from 'material-ui/Paper';
import Typography from 'material-ui/Typography';
import Divider from 'material-ui/Divider';
import {Dataset} from 'model/dataset.model';
import {Creator, CreatorRole} from 'model/creator.model';
import {Partner} from 'model/partner.model';
import { Dataset } from 'model/dataset.model';
import { Creator, CreatorRole } from 'model/creator.model';
import { Partner } from 'model/partner.model';
const styleSheet = (theme) => ({
blue: {
......@@ -74,63 +74,61 @@ class Summary extends React.Component<ISummaryProps, any> {
}
public render() {
const {classes, creators, dataset = new Dataset(), owner} = this.props;
const { classes, creators, dataset = new Dataset(), owner } = this.props;
return (
<Grid item xs={ 12 } md={ 4 } lg={ 3 } className={ classes.wrapper }>
<Paper className={ classes.paper } square>
<div className={ classes.titleWrapper }>
<Typography type="headline" component="h2" className={ classes.green }>
SUMMARY
</Typography>
</div>
<Divider/>
<div className={ classes.summaryList }>
<Grid container spacing={ 0 } className={ classes.wrapperBottom }>
<Grid item xs={ 12 }>
<div className={ `${classes.titleWrapper} ${classes.margin}` }>
<Typography type="title" component="h2">
No. of accessions assessed
</Typography>
<Typography type="display1" component="h1" className={ classes.blue }>
{ dataset.accessionCount }
</Typography>
</div>
</Grid>
<Grid item xs={ 12 }>
<div className={ `${classes.titleWrapper} ${classes.margin}` }>
<Typography type="title" component="h2">
No. of traits assessed
</Typography>
<Typography type="display1" component="h1" className={ classes.blue }>
{ dataset.descriptorCount }
</Typography>
</div>
</Grid>
<Grid item xs={ 12 }>
<div className={ `${classes.titleWrapper} ${classes.margin}` }>
<Typography type="title" component="h2">
Data provider
</Typography>
<Typography type="body2" component="p" className={ classes.blue }>
{ owner && owner.name }
</Typography>
</div>
</Grid>
<Grid item xs={ 12 }>
<div className={ `${classes.titleWrapper} ${classes.margin}` }>
<Typography type="title" component="h2">
Contact
</Typography>
<Typography type="body2" component="p" className={ classes.blue }>
{ this.renderName(creators) }
</Typography>
</div>
</Grid>
<Paper className={ classes.paper } square>
<div className={ classes.titleWrapper }>
<Typography type="headline" component="h2" className={ classes.green }>
SUMMARY
</Typography>
</div>
<Divider/>
<div className={ classes.summaryList }>
<Grid container spacing={ 0 } className={ classes.wrapperBottom }>
<Grid item xs={ 12 }>
<div className={ `${classes.titleWrapper} ${classes.margin}` }>
<Typography type="title" component="h2">
No. of accessions assessed
</Typography>
<Typography type="display1" component="h1" className={ classes.blue }>
{ dataset.accessionCount }
</Typography>
</div>
</Grid>
</div>
</Paper>
</Grid>
<Grid item xs={ 12 }>
<div className={ `${classes.titleWrapper} ${classes.margin}` }>
<Typography type="title" component="h2">
No. of traits assessed
</Typography>
<Typography type="display1" component="h1" className={ classes.blue }>
{ dataset.descriptorCount }
</Typography>
</div>
</Grid>
<Grid item xs={ 12 }>
<div className={ `${classes.titleWrapper} ${classes.margin}` }>
<Typography type="title" component="h2">
Data provider
</Typography>
<Typography type="body2" component="p" className={ classes.blue }>
{ owner && owner.name }
</Typography>
</div>
</Grid>
<Grid item xs={ 12 }>
<div className={ `${classes.titleWrapper} ${classes.margin}` }>
<Typography type="title" component="h2">
Contact
</Typography>
<Typography type="body2" component="p" className={ classes.blue }>
{ this.renderName(creators) }
</Typography>
</div>
</Grid>
</Grid>
</div>
</Paper>
);
}
}
......
import * as React from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {withStyles} from 'material-ui/styles';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { withStyles } from 'material-ui/styles';
import Grid from 'material-ui/Grid';
import {Link} from 'react-router';
import { Link } from 'react-router';
import Button from 'material-ui/Button';
import BrowseMenu from './BrowseMenu';
import {Dataset} from 'model/dataset.model';
import DetailInfo from './detail-info';
import {loadDataset} from 'actions/dataset';
import BrowseMenu from './c/BrowseMenu';
import { Dataset } from 'model/dataset.model';
import DatasetDisplay from './c/DatasetDisplay';
import { loadDataset } from 'actions/dataset';
interface IDatasetDetailProps extends React.ClassAttributes<any> {
classes: any;
......@@ -54,14 +54,14 @@ class DatasetDetail extends React.Component<IDatasetDetailProps, any> {
protected static needs = [({ params: { uuid } }) => loadDataset(uuid)];
public componentDidMount() {
const {dataset, loadDataset, params: {uuid}} = this.props;
const { dataset, loadDataset, params: { uuid } } = this.props;
if (!dataset) {
loadDataset(uuid);
}
}
public render() {
const {classes, dataset} = this.props;
const { classes, dataset } = this.props;
return (
<div className={ classes.root }>
<Grid container spacing={ 0 }>
......@@ -76,7 +76,7 @@ class DatasetDetail extends React.Component<IDatasetDetailProps, any> {
</Button></Link>
</Grid>
<Grid item xs={ 12 } className={ classes.wrapper }>
<DetailInfo dataset={ dataset }/>
<DatasetDisplay dataset={ dataset }/>
</Grid>
</Grid>
</Grid>
......
......@@ -2,7 +2,7 @@ import * as React from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import DetailInfo from 'ui/pages/dataset/dataset-detail/detail-info';
import DatasetDisplay from 'ui/pages/dataset/dataset-detail/c/DatasetDisplay';
class ReviewAndPublishStep extends React.Component<any, any> {
......@@ -10,7 +10,7 @@ class ReviewAndPublishStep extends React.Component<any, any> {
const { dataset} = this.props;
return (
<DetailInfo dataset={ dataset } />
<DatasetDisplay dataset={ dataset } />
);
}
}
......
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