Commit 31c92c2f authored by Viacheslav Pavlov's avatar Viacheslav Pavlov Committed by Matija Obreza
Browse files

Crops: list and details

parent 4b9de9d1
import * as React from 'react';
import {Link} from 'react-router-dom';
// Models
import Crop from 'model/Crop';
// UI
import Card, {CardHeader, CardContent} from 'ui/common/Card';
import {Properties, PropertiesItem} from 'ui/common/Properties';
import PrettyDate from 'ui/common/time/PrettyDate';
import Grid from '@material-ui/core/Grid';
import withStyles from '@material-ui/core/styles/withStyles';
const style = (theme) => ({
root: {
height: '100%',
flexDirection: 'column' as 'column',
justifyContent: 'space-between',
display: 'flex',
},
});
const CropCard = ({crop, classes, compact = false, edit = false, ...other}: { crop: Crop, classes?: any, compact?: boolean, edit?: boolean }) => {
if (!crop) {
return null;
}
// @ts-ignore
const name = window.initialLanguage && crop.i18n && JSON.parse(crop.i18n).name[window.initialLanguage] || crop.name;
return compact ? (
<Grid item sm={ 4 } md={ 3 } lg={ 2 }>
<Card className={ classes.root }>
<CardHeader title={
<Link to={ `/c/${crop.shortName}${edit ? '/edit' : '' }` }>
{ name }
</Link>
}/>
<CardContent>
{ crop.shortName }
</CardContent>
</Card>
</Grid>
)
:
(
<Grid item xs={ 12 }>
<Card className={ classes.root }>
<CardHeader title={
<Link to={ `/c/${crop.shortName}${edit ? '/edit' : '' }` }>{ name }</Link>
}/>
<CardContent>
<Properties>
<PropertiesItem title="Original name">{ crop.name }</PropertiesItem>
<PropertiesItem title="Localized name">{ name }</PropertiesItem>
<PropertiesItem title="Registered"><PrettyDate value={ new Date(crop.createdDate) }/></PropertiesItem>
<PropertiesItem title="Last modified"><PrettyDate value={ new Date(crop.lastModifiedDate) }/></PropertiesItem>
</Properties>
</CardContent>
</Card>
</Grid>
);
};
export default withStyles(style)(CropCard);
......@@ -101,6 +101,9 @@ class LeftMenu extends React.Component<ILeftMenuProps, any> {
<ListItem button>
<NavLink activeClassName="active" to="/wiews">{ t('menu.Institutes') }</NavLink>
</ListItem>
<ListItem button>
<NavLink activeClassName="active" to="/c">{ t('menu.Crops') }</NavLink>
</ListItem>
</div>
</Drawer>
</div>
......
......@@ -176,6 +176,7 @@ class Header extends React.Component<IHeaderProps | any, any> {
<NavLink activeClassName="active" to="/a">{ t('menu.Accessions') }</NavLink>
<NavLink activeClassName="active" to="/subsets">{ t('menu.Subsets') }</NavLink>
<NavLink activeClassName="active" to="/wiews">{ t('menu.Institutes') }</NavLink>
<NavLink activeClassName="active" to="/c">{ t('menu.Crops') }</NavLink>
</div>
</div>
<div className="float-right">{ this.renderLogin([ROLE_USER, ROLE_ADMINISTRATOR]) }</div>
......
import * as React from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
// Models
import Crop from 'model/Crop';
// UI
import PageLayout from 'ui/layout/PageLayout';
import ContentHeader from 'ui/common/heading/ContentHeader';
import CropCard from 'ui/genesys/crop/CropCard';
import GridLayout from 'ui/layout/GridLayout';
interface IBrowsePageProps extends React.ClassAttributes<any> {
crops: Crop[];
}
class BrowsePage extends React.Component<IBrowsePageProps> {
public render() {
const {crops} = this.props;
return (
<PageLayout>
<ContentHeader title="Crop list" subTitle="Genesys crops directory"/>
<div style={ {width: '75%', margin: '16px auto' } }>
<GridLayout>
{ crops && crops.map((crop) => <CropCard key={ crop.id } crop={ crop } compact/>) }
</GridLayout>
</div>
</PageLayout>
);
}
}
const mapStateToProps = (state, ownProps) => ({
crops: state.crop.crops || undefined,
filterCode: ownProps.match.params.filterCode,
});
const mapDispatchToProps = (dispatch) => bindActionCreators({}, dispatch);
export default connect(mapStateToProps, mapDispatchToProps)(BrowsePage);
import * as React from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
// Models
import Crop from 'model/Crop';
// UI
import PageLayout, {PageContents} from 'ui/layout/PageLayout';
import CropCard from 'ui/genesys/crop/CropCard';
import ContentHeader from 'ui/common/heading/ContentHeader';
interface IDisplayPageProps extends React.ClassAttributes<any> {
crops: Crop[];
shortName: string;
}
class DisplayPage extends React.Component<IDisplayPageProps, any> {
public state = {
crop: null,
};
public componentWillMount() {
const { crops, shortName } = this.props;
if (crops && shortName) {
const crop = crops.find((item) => item.shortName === shortName);
this.setState({crop});
}
}
public componentWillReceiveProps(nextProps) {
const { crops, shortName } = nextProps;
if (crops && shortName) {
const crop = crops.find((item) => item.shortName === shortName);
this.setState({crop});
}
}
public render() {
const { crop } = this.state;
return !crop ? null : (
<PageLayout>
<ContentHeader title="Crop details"/>
<PageContents>
<CropCard crop={ crop }/>
</PageContents>
</PageLayout>
);
}
}
const mapStateToProps = (state, ownProps) => ({
shortName: ownProps.match.params.shortName,
crops: state.crop.crops,
});
const mapDispatchToProps = (dispatch) => bindActionCreators({}, dispatch);
export default connect(mapStateToProps, mapDispatchToProps)(DisplayPage);
......@@ -25,6 +25,9 @@ import MapBrowsePage from 'ui/pages/accessions/MapPage';
import AccessionDisplayPage from 'ui/pages/accessions/DisplayPage';
import AccessionOverviewPage from 'ui/pages/accessions/OverviewPage';
// Crops
import CropBrowsePage from 'ui/pages/crops/BrowsePage';
import CropDisplayPage from 'ui/pages/crops/DisplayPage';
// Institute
import InstituteBrowsePage from 'ui/pages/institutes/BrowsePage';
import InstituteDisplayPage from 'ui/pages/institutes/DisplayPage';
......@@ -161,6 +164,17 @@ const routes = [
component: InstituteDisplayPage,
exact: true,
},
// Crops
{
path: '/c/',
component: CropBrowsePage,
exact: true,
},
{
path: '/c/:shortName',
component: CropDisplayPage,
exact: true,
},
// Dashboard
{
path: '/dashboard',
......
Supports Markdown
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