Commit 98e2314f authored by Valeriy Panov's avatar Valeriy Panov
Browse files

#122. Replace mockups with real information

parent c9098faa
......@@ -9,23 +9,28 @@ import {RECEIVE_DATASET, RECEIVE_DATASET_PAGE} from '../constants/datasets';
import {receiveRepositoryFile} from './repositoryFile';
import {receiveCreator} from './creators';
import {receiveLocation} from './location';
import {receivePartner} from './partner';
import {RepositoryFile} from '../model/repositoryFile.model';
import {Location} from '../model/location.model';
import {Partner} from '../model/partner.model';
function handleDataset(dispatch, dataset: Dataset) {
const repositoryFiles: RepositoryFile[] = [ ...dataset.repositoryFiles ];
const locations: Location[] = [ ...dataset.locations ];
const creators: Creator[] = [...dataset.creators];
const owner: Partner = new Partner({ ...dataset.owner });
const normalized = new Dataset({
...dataset,
repositoryFiles: repositoryFiles.map((file) => file.uuid),
locations: locations.map((location) => location.uuid),
creators: creators.map((creator) => creator.uuid),
owner: owner.uuid,
});
dispatch(receiveDataset(normalized));
dispatch(receivePartner(owner));
repositoryFiles.forEach((file) => dispatch(receiveRepositoryFile(file)));
locations.forEach((location) => dispatch(receiveLocation(location)));
creators.forEach((creator) => dispatch(receiveCreator(creator)));
......@@ -78,15 +83,19 @@ function createDatasetRequest() {
}
function saveDatasetRequest(dataset: Dataset) {
// remove normalized data here
const data = new Dataset({
...dataset,
repositoryFiles: [],
creators: [],
locations: [],
});
return (dispatch, getState) => {
const owner = dataset.owner ? getState().partners.byId[dataset.owner] : null;
// remove normalized data here
const data = new Dataset({
...dataset,
repositoryFiles: [],
creators: [],
locations: [],
owner,
});
const token = getState().login.access_token;
return DatasetService.saveDataset(token, data)
......
......@@ -6,6 +6,8 @@ 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';
const styleSheet = (theme) => ({
blue: {
......@@ -51,12 +53,22 @@ const styleSheet = (theme) => ({
interface ISummaryProps extends React.ClassAttributes<any> {
classes: any;
dataset: Dataset;
creators: Creator[];
owner: Partner;
}
class Summary extends React.Component<ISummaryProps, any> {
protected renderName = (creators) => {
const creator: Creator = creators.find((e) => e.role === CreatorRole.CONTACT);
if (creator) {
return `${creator.firstName} ${creator.lastName}`;
}
return '';
}
public render() {
const {classes, dataset = new Dataset()} = this.props;
const {classes, creators, dataset = new Dataset(), owner} = this.props;
return (
<Grid item xs={ 12 } md={ 4 } lg={ 3 } className={ classes.wrapper }>
......@@ -105,7 +117,7 @@ class Summary extends React.Component<ISummaryProps, any> {
Data provider
</Typography>
<Typography type="body2" component="p" className={ classes.blue }>
Global Crop Diversity Trust
{ owner && owner.name }
</Typography>
</div>
</Grid>
......@@ -115,7 +127,7 @@ class Summary extends React.Component<ISummaryProps, any> {
Contact
</Typography>
<Typography type="body2" component="p" className={ classes.blue }>
Nora Castaneda
{ this.renderName(creators) }
</Typography>
</div>
</Grid>
......@@ -128,4 +140,4 @@ class Summary extends React.Component<ISummaryProps, any> {
}
export default (withStyles as any )(styleSheet)(Summary);
export default withStyles(styleSheet)(Summary);
......@@ -16,6 +16,7 @@ import {Creator} from '../../../../../model/creator.model';
import {Location} from '../../../../../model/location.model';
import Summary from './Summary';
import LocationMap from './LocationMap';
import {Partner} from '../../../../../model/partner.model';
const styles = (theme) => ({
root: {
......@@ -196,12 +197,13 @@ interface IDetailInfoProps extends React.ClassAttributes<any> {
repositoryFiles: RepositoryFile[];
creators: Creator[];
locations: Location[];
owner: Partner;
}
class DetailInfo extends React.Component<IDetailInfoProps, any> {
public render() {
const {classes, dataset = new Dataset(), repositoryFiles, creators, locations} = this.props;
const {classes, dataset = new Dataset(), repositoryFiles, creators, locations, owner} = this.props;
return (
<div className={ classes.root }>
......@@ -227,7 +229,7 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
</div>
</Paper>
</Grid>
<Summary { ...{dataset} }/>
<Summary dataset={ dataset } creators={ creators } owner={ owner } classes={ {} } />
<Grid item xs={ 12 } md={ 8 } lg={ 9 } className={ classes.wrapper1 }>
<Paper className={ `${classes.paper} ${classes.paperContainer}` } square>
<div className={ classes.titleWrapper }>
......@@ -251,7 +253,6 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
<Grid item xs={ 12 } md={ 9 }>
<Typography type="title" component="h3" className={ `${classes.gray} ${classes.grayTitleBig} ${classes.blue} ${classes.fontNormal} ${classes.pdTop0}` }>
{ dataset.rights }
qwerty
</Typography>
</Grid>
</Grid>
......@@ -276,7 +277,6 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
<Hidden mdDown>
<Typography type="title" component="h3" className={ `${classes.rightText} ${classes.fontNormal}` }>
{ e.originalFilename }
qwerty
</Typography>
</Hidden>
<Hidden mdDown>
......@@ -307,24 +307,24 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
<Grid container spacing={ 0 } className={ `${classes.dataContainer} ${classes.grayRowsOdd}` }>
<Grid item xs={ 12 } md={ 3 }>
<Typography type="title" component="h3" className={ `${classes.gray} ${classes.grayTitleSmall} ${classes.pdBottom0}` }>
Metadate create date:
Metadata create date:
</Typography>
</Grid>
<Grid item xs={ 12 } md={ 9 } className={ `${classes.gray} ${classes.rightTextWrapper} ${classes.pdTop0}` }>
<Typography type="title" component="h3" className={ `${classes.rightText} ${classes.fontNormal}` }>
March 1, 2017
{ dataset.createdDate && moment(dataset.createdDate).format('MMMM DD, YYYY') }
</Typography>
</Grid>
</Grid>
<Grid container spacing={ 0 } className={ `${classes.dataContainer} ${classes.grayRowsOdd}` }>
<Grid item xs={ 12 } md={ 3 }>
<Typography type="title" component="h3" className={ `${classes.gray} ${classes.grayTitleSmall} ${classes.pdBottom0}` }>
Metadate updated date:
Metadata updated date:
</Typography>
</Grid>
<Grid item xs={ 12 } md={ 9 } className={ `${classes.gray} ${classes.rightTextWrapper} ${classes.pdTop0}` }>
<Typography type="title" component="h3" className={ `${classes.rightText} ${classes.fontNormal}` }>
March 15, 2017
{ dataset.lastModifiedDate && moment(dataset.lastModifiedDate).format('MMMM DD, YYYY') }
</Typography>
</Grid>
</Grid>
......@@ -449,6 +449,7 @@ const mapStateToProps = (state, ownProps) => ({
locations: state.locations.items
.filter((uuid) => ownProps.dataset.locations.indexOf(uuid) !== -1)
.map((uuid) => state.locations.byId[uuid]),
owner: state.partners.byId[state.partners.items.find((uuid) => ownProps.dataset.owner === uuid)],
});
const mapDispatchToProps = (dispatch) => bindActionCreators({}, dispatch);
......
......@@ -61,7 +61,7 @@ class BasicInfoStep extends React.Component<ILoginContainerProps, any> {
placeholder="Partner"
array={ partners }
selectId="select-option-partner"
onBlur={ this.save }
onChange={ this.save }
/>
<Field
name="title"
......
......@@ -19,6 +19,7 @@ interface ISelectPartnerComponentProps extends React.ClassAttributes<any> {
array: any;
label: string;
selectId: string;
onChange: () => void;
}
class SelectPartnerComponent extends React.Component<ISelectPartnerComponentProps, any> {
......@@ -32,24 +33,19 @@ class SelectPartnerComponent extends React.Component<ISelectPartnerComponentProp
}
public componentDidMount() {
this.setState( { partner: this.props.input.value.id } );
this.setState( { partner: this.props.input.value } );
}
public triggerOuterOnBlur = () => {
this.props.input.onBlur();
}
public handleChange = (event) => {
this.setState({partner: event.target.value});
this.report(this.props.input.onChange, event.target.value);
public componentWillReceiveProps(newProps) {
const uuid = newProps.input.value;
if (uuid !== this.state.partner) {
this.setState( { partner: uuid } );
}
}
private report(onChange, value) {
if (value) {
onChange({id: value});
} else {
onChange(null);
}
public handleChange = ({target: {value}}) => {
this.setState({partner: value});
this.props.input.onChange(value || null);
}
public render() {
......@@ -64,12 +60,11 @@ class SelectPartnerComponent extends React.Component<ISelectPartnerComponentProp
native
value={ this.state.partner }
onChange={ this.handleChange }
onBlur={ this.triggerOuterOnBlur }
input={ <Input id={ selectId }/> }
>
<option value=""/>
{ array.map((p) => (
<option key={ p.id } value={ p.id }>{ p.name }</option>
<option key={ p.uuid } value={ p.uuid }>{ p.name }</option>
)) }
</Select>
</FormControl>
......@@ -78,4 +73,4 @@ class SelectPartnerComponent extends React.Component<ISelectPartnerComponentProp
}
}
export default (withStyles as any)(styles)(SelectPartnerComponent);
export default withStyles(styles)(SelectPartnerComponent);
......@@ -30,7 +30,7 @@ class BasicInfoStep extends React.Component<IDatasetProps, any> {
protected handleSubmit = (values: Dataset) => {
const {dataset, saveDatasetRequest} = this.props;
if (!_.isEqual({...dataset}, values)) {
if (!_.isEqual({...dataset}, {...values})) {
saveDatasetRequest(values);
}
}
......
......@@ -56,7 +56,7 @@ const renderRadioGroup = ({input, meta, ...rest}) => (
(event, value) => input.onChange(value) // tslint:disable-line
}
>
<FormControlLabel value="CONTRACT" label="Contact" control={ <Radio /> }/>
<FormControlLabel value="CONTACT" label="Contact" control={ <Radio /> }/>
<FormControlLabel value="CONTRIBUTOR" label="Contributor" control={ <Radio /> }/>
</RadioGroup>
</FormControl>
......
import * as React from 'react';
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';
let Map;
let Marker;
let TileLayer;
interface ILocationMapProps extends React.ClassAttributes<any> {
classes: any;
location: Location;
}
const styles = (theme) => ({
leafletContainer: {
width: '100%',
height: '300px',
},
progress: {
margin: '0 auto',
},
gray: {
backgroundColor: '#F8F7F5',
},
locationIcon: {
marginLeft: '20px',
marginRight: '4px',
width: '20px',
height: '20px',
position: 'relative',
top: '4px',
[theme.breakpoints.down('sm')]: {
marginLeft: '0',
},
},
blue: {
cursor: 'pointer',
},
locationIconWrap: {
[theme.breakpoints.down('sm')]: {
display: 'block',
},
},
});
class LocationMap extends React.Component<ILocationMapProps, any> {
constructor(props: ILocationMapProps, context: any) {
super(props, context);
this.state = {
show: false,
};
}
public componentDidMount() {
// leaflet map doesn't work on server (ssr)
Map = require('react-leaflet').Map;
Marker = require('react-leaflet').Marker;
TileLayer = require('react-leaflet').TileLayer;
}
private showMap = () => {
const show = !this.state.show;
this.setState({show});
}
public render() {
const {classes, location} = this.props;
const position = {
lat: location.decimalLatitude,
lng: location.decimalLongitude,
};
return (
<Grid item xs={ 12 }>
<Typography type="body1" component="p">
{ `${location.verbatimLocality}, ${location.stateProvince}, ${location.userCountry}` }
<span className={ classes.locationIconWrap }>
<LocationIcon className={ classes.locationIcon }/>
<a className={ classes.blue } onClick={ this.showMap }>
See on map
</a>
</span>
</Typography>
{
this.state.show ?
(
<div className={ classes.leafletContainer }>
<Map
center={ position }
zoom={ 6 }
>
<TileLayer
attribution={ '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }
url={ 'http://{s}.tile.osm.org/{z}/{x}/{y}.png' }
/>
{ position && <Marker position={ position }/> }
</Map>
</div>
)
: null
}
</Grid>
);
};
}
export default (withStyles as any)(styles)(LocationMap);
import * as React from 'react';
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';
const styleSheet = (theme) => ({
blue: {
color: '#006CB4',
},
wrapper: {
padding: '10px',
},
wrapperBottom: {
padding: '20px 0 10px',
[theme.breakpoints.down('md')]: {
padding: '10px 0 20px',
},
},
/* tslint:disable */
titleWrapper: {
padding: '15px 20px',
'& > h1': {
fontSize: '36px',
padding: '10px 0 0',
fontWeight: 'bold',
},
'& > h2': {
fontSize: '18px',
fontWeight: 'bold',
lineHeight: '20px',
},
'& > p': {
fontSize: '14px',
padding: '15px 0px 10px',
},
},
/* tslint:enable */
green: {
color: '#88ba42',
},
margin: {
marginBottom: '10px',
backgroundColor: '#f8f7f5',
},
});
interface ISummaryProps extends React.ClassAttributes<any> {
classes: any;
dataset: Dataset;
}
class Summary extends React.Component<ISummaryProps, any> {
public render() {
const {classes, dataset = new Dataset()} = this.props;
return (
<Grid item xs={ 12 } md={ 4 } 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 }>
150
</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 }>
50
</Typography>
</div>
</Grid>
<Grid item xs={ 12 }>
<div className={ `${classes.titleWrapper} ${classes.margin}` }>
<Typography type="title" component="h2">
Crop descriptor user
</Typography>
<Typography type="body2" component="p" className={ classes.blue }>
Rica Descriptor IRRI - Bioversity, 2007.
</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 }>
Global Crop Diversity Trust
</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 }>
Nora Castaneda
</Typography>
</div>
</Grid>
</Grid>
</div>
</Paper>
</Grid>
);
};
}
export default (withStyles as any )(styleSheet)(Summary);
......@@ -5,6 +5,7 @@ import Divider from 'material-ui/Divider';
import Typography from 'material-ui/Typography';
import Grid from 'material-ui/Grid';
import {Link} from 'react-router';
import * as moment from 'moment';
import {Partner} from '../../../../model/partner.model';
......@@ -101,7 +102,7 @@ class PartnerCard extends React.Component<IPartnerCardProps, any> {
</Link> as any
)
}
subheader={ 'Replace with pretty time for partner.createdDate' }
subheader={ partner.createdDate && moment(partner.createdDate).format('YYYY-DD-MM') }
/>
<Divider />
<CardContent>
......
......@@ -15,7 +15,7 @@ import BasicInfoStep from './pages/dataset/dataset-stepper/steps/basic-info';
import Creators from './pages/dataset/dataset-stepper/steps/creators';
import AccessionsListStep from './pages/dataset/dataset-stepper/steps/accessions-list';
import TimingAndLocationStep from './pages/dataset/dataset-stepper/steps/timing-and-location';
import ReviewAndPublishStep from './pages/dataset/dataset-stepper/steps/review-and-publish';