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

CropChips imported

- display crop chip on accession details page
parent e86e1593
......@@ -6,6 +6,7 @@ import { AccessionLink } from 'ui/genesys/Links';
import Card, {CardContent, CardActions} from 'ui/common/Card';
import DOI from 'ui/common/DOI';
import SciName from 'ui/genesys/SciName';
import CropChips from 'ui/genesys/crop/CropChips';
const styles = (theme) => ({
firstRow: {
......@@ -27,6 +28,7 @@ const AccessionCard = ({ accession, classes, index, ...other }: { accession: Acc
<SciName taxa={ accession.taxonomy.taxonNameHtml } />
</AccessionLink>
</b>
{ accession.crop && <CropChips crops={ accession.crop.shortName } /> }
{ accession.countryOfOrigin && ` • ${accession.countryOfOrigin.name}` }
</div>
<div>
......
import * as React from 'react';
import {connect} from 'react-redux';
import { withStyles } from '@material-ui/core/styles';
import Crop from 'model/Crop';
interface ICropChipsProps extends React.ClassAttributes<any> {
crops?: string[] | string;
availableCrops: Crop[];
classes?: any;
}
const styles = (theme) => ({
chipHolder: {
display: 'inline-block',
position: 'relative' as 'relative',
height: '1em',
},
chip: {
display: 'inline-block',
marginRight: theme.spacing.unit,
padding: '.2em .5em',
position: 'relative' as 'relative',
top: '-.2em',
border: 'solid 1px Gray',
borderRadius: '.2em',
backgroundColor: '#e2e2e2',
color: 'Black',
fontWeight: 'bold' as 'bold',
},
});
const CropChips = ({crops, availableCrops, classes}: ICropChipsProps) => {
console.log(`CropChips`, crops);
if (typeof crops === 'string') {
crops = [ crops ];
}
return crops && crops.length > 0 && crops.filter((c) => c !== null).length > 0 && (
<div className={ classes.chipHolder }>
{ crops.map((c) => availableCrops ? availableCrops.find((crop) => crop.shortName === c) || c : c).map((crop) => {
if (! crop) {
console.log('Null crop in', crops);
return null;
} else if (typeof crop === 'string') {
return <div key={ crop } className={ classes.chip }>{ crop }</div>;
} else {
return <div key={ crop.shortName } className={ classes.chip }>{ crop.name }</div>;
}
}) }
</div>
);
};
const mapStateToProps = (state) => ({
availableCrops: state.crop.crops,
});
export default connect(mapStateToProps, null)(withStyles(styles)(CropChips));
import * as React from 'react';
import { connect } from 'react-redux';
import Crop from 'model/Crop';
import StringArrFilter from 'ui/common/filter/StringArrFilter';
interface IProps extends React.ClassAttributes<any> {
crops: Crop[];
}
class CropFilter extends React.Component<IProps, any> {
private options: object = {};
public componentWillMount() {
const { crops } = this.props;
if (crops && crops.length > 0) {
this.options = {};
crops.sort((a, b) => a.name.localeCompare(b.name)).forEach((crop) => {
this.options[crop.shortName] = crop.name;
});
}
}
public componentWillReceiveProps(nextProps) {
const { crops } = nextProps;
if (crops && crops.length > 0) {
this.options = {};
crops.sort((a, b) => a.name.localeCompare(b.name)).forEach((crop) => {
this.options[crop.shortName] = crop.name;
});
}
}
public render() {
return (
<StringArrFilter name="crop" options={ this.options } />
);
}
}
export default connect((state) => ({
crops: state.crop.crops,
}), null)(CropFilter);
import * as React from 'react';
import { connect } from 'react-redux';
import { translate } from 'react-i18next';
import Grid from '@material-ui/core/Grid';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormLabel from '@material-ui/core/FormLabel';
import FormControl from '@material-ui/core/FormControl';
import FormHelperText from '@material-ui/core/FormHelperText';
import Checkbox from '@material-ui/core/Checkbox';
import Radio from '@material-ui/core/Radio';
import Crop from 'model/Crop';
interface ICropSelectorProps extends React.ClassAttributes<any> {
t: any;
crops: Crop[];
fields?: any;
label: string;
input?: any;
single?: boolean;
}
const handleCheckboxChange = (fields, code) => () => {
const index = fields.getAll() ? fields.getAll().indexOf(code) : -1;
if (index === -1) {
fields.push(code);
} else {
fields.remove(index);
}
};
const handleRadioButtonChange = (input, code) => () => {
input.onChange(code);
};
const renderCheckbox = (fields, code) => (
<Checkbox
checked={ fields.getAll() && fields.getAll().indexOf(code) !== -1 }
onChange={ handleCheckboxChange(fields, code) }
value={ code }
/>
);
const renderRadioButton = (input, code) => (
<Radio
checked={ input.value === code }
onChange={ handleRadioButtonChange(input, code) }
value={ code }
/>
);
const CropSelector = ({t, crops, label, single, fields, input}: ICropSelectorProps) => crops && (
<FormControl fullWidth>
<FormLabel>{ label }</FormLabel>
<FormHelperText>{ t('m.crop.helper') }</FormHelperText>
<Grid container>
{
crops.sort((a, b) => a.name.localeCompare(b.name)).map((crop: Crop) => (
<Grid item key={ crop.shortName } xs={ 6 } md={ 4 } lg={ 3 } xl={ 2 }>
<FormControlLabel
control={
single ? renderRadioButton(input, crop.shortName)
: renderCheckbox(fields, crop.shortName)
}
label={ crop.name }
/>
</Grid>
))
}
</Grid>
</FormControl>
);
const mapStateToProps = (state) => ({
crops: state.crop.crops,
});
export default connect(mapStateToProps, null)(translate()(CropSelector));
......@@ -22,6 +22,8 @@ import { ExternalLink } from 'ui/common/Links';
import SciName from 'ui/genesys/SciName';
import { ScrollToTopOnMount } from 'ui/common/page/scrollers';
import ReduxCheckbox from 'ui/common/checkbox';
import CropChips from 'ui/genesys/crop/CropChips';
interface IBrowsePageProps extends React.ClassAttributes<any> {
t: any;
......@@ -141,7 +143,7 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> {
<Link to={ '/a' }>View <i>{ `${accession.taxonomy.genus} ${accession.taxonomy.species}` }</i> at { accession.institute.code }</Link>
</PropertiesItem>
<PropertiesItem title="Scientific name"><SciName taxa={ accession.taxonomy.taxonNameHtml } /></PropertiesItem>
{ accession.crop && <PropertiesItem title="Crop name">{ accession.crop.name }</PropertiesItem> }
{ accession.crop && <PropertiesItem title="Crop name"><CropChips crops={ accession.crop.shortName } /></PropertiesItem> }
<PropertiesItem title="Provided crop name">{ accession.cropName }</PropertiesItem>
</Properties>
</PageSection>
......
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