Updated crop details page

- Link to accessions
- Blurb columns fixed
Signed-off-by: Matija Obreza <matija.obreza@croptrust.org>

src/crop/ui/DisplayPage.tsx

@@ -6,6 +6,7 @@ import withStyles from '@material-ui/core/styles/withStyles';
 
 // Actions
 import { loadCropDetails } from 'crop/actions/public';
+import { applyFilters } from 'accessions/actions/public';
 
 // Models
 import Crop from 'model/genesys/Crop';
@@ -25,8 +26,14 @@ import Number from 'ui/common/Number';
 const styles = (theme) => ({
   cropBlurb: {
     padding: '16px',
-    columnCount: 2,
-    columnGap: '3rem',
+    [theme.breakpoints.up('md')]: {
+      columnCount: 2,
+      columnGap: '3rem',
+    },
+    [theme.breakpoints.up('xl')]: {
+      columnCount: 3,
+      columnGap: '3rem',
+    },
     '& > h1':{
       fontSize: '41px',
       marginTop: '22px',
@@ -55,6 +62,7 @@ interface IDisplayPageProps extends React.ClassAttributes<any> {
   shortName: string;
   i18n: any;
   classes: any;
+  applyFilters: any;
 }
 
 class DisplayPage extends React.Component<IDisplayPageProps, any> {
@@ -72,6 +80,12 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
     }
   }
 
+  private applyCropFilter = () => {
+    const { shortName, applyFilters} = this.props;
+    const filter = { crop: shortName };
+    applyFilters(filter);
+  }
+
   public render() {
     const { cropDetails, shortName, classes } = this.props;
     const crop = cropDetails;
@@ -90,7 +104,9 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
 
               <PageSection title="General information">
                 <Properties>
-                  <PropertiesItem title="Accessions in genesys" keepEmpty><Number value={ cropDetails.accessionCount || 0 } /></PropertiesItem>
+                  <PropertiesItem title="Accessions in genesys" keepEmpty>
+                    <a onClick={ this.applyCropFilter }><Number value={ cropDetails.accessionCount || 0 } /></a>
+                  </PropertiesItem>
                 </Properties>
               </PageSection>
 
@@ -111,6 +127,7 @@ const mapStateToProps = (state, ownProps) => ({
 
 const mapDispatchToProps = (dispatch) => bindActionCreators({
   loadCropDetails,
+  applyFilters,
 }, dispatch);