Commit 89f3353e authored by Matija Obreza's avatar Matija Obreza
Browse files

UI fixes for Crop display page

- Added `<BlurbText body=...  />` control
parent c8d94120
import * as React from 'react';
// UI
import withStyles from '@material-ui/core/styles/withStyles';
/*tslint:disable*/
const style = (theme) => ({
cropBlurb: {
padding: '16px',
[theme.breakpoints.up('md')]: {
columnCount: 2,
columnGap: '3rem',
},
[theme.breakpoints.up('xl')]: {
columnCount: 3,
columnGap: '3rem',
},
'& > h1':{
fontSize: '32px',
marginBottom: '1rem',
fontFamily: 'Roboto-Bold',
},
'& > p': {
// color: '#4d4c46',
fontSize: '18px',
fontFamily: 'Roboto-Regular',
lineHeight: '30px',
margin: '0 0 30px 0',
'& ~ a': {
// color: '#006db4',
textDecoration: 'none',
},
},
},
});
/*tslint:enable*/
const BlurbText = ({classes, body}: { body: string, classes?: any }) => {
return (
<div className={ classes.cropBlurb } dangerouslySetInnerHTML={ {__html: body} }/>
);
};
export default withStyles(style)(BlurbText);
......@@ -14,55 +14,26 @@ import Crop from 'model/genesys/Crop';
import CropDetails from 'model/genesys/CropDetails';
// UI
import PageLayout, {PageContents, PageSection} from 'ui/layout/PageLayout';
import PageLayout, { PageContents, MainSection } from 'ui/layout/PageLayout';
import {Properties, PropertiesItem} from 'ui/common/Properties';
import CropCard from 'crop/ui/c/CropCard';
import Section from 'ui/common/layout/Section';
import Loading from 'ui/common/Loading';
import PropertiesCard from 'ui/common/PropertiesCard';
import Number from 'ui/common/Number';
import GridContainer from 'ui/layout/GridContainer';
import PieChart from 'ui/common/pie-chart';
import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton';
import ButtonBar from 'ui/common/buttons/ButtonBar';
import ActionButton from 'ui/common/buttons/ActionButton';
import Authorize from 'ui/common/authorized/Authorize';
import PageTitle from 'ui/common/PageTitle';
import PrettyDate from 'ui/common/time/PrettyDate';
import { CardActions } from 'ui/common/Card';
import { Link } from 'react-router-dom';
import Button from '@material-ui/core/Button';
import BlurbText from 'cms/ui/c/BlurbText';
import ContentHeader from 'ui/common/heading/ContentHeader';
import Permissions from 'ui/common/permission/Permissions';
/*tslint:disable*/
const styles = (theme) => ({
cropBlurb: {
padding: '16px',
[theme.breakpoints.up('md')]: {
columnCount: 2,
columnGap: '3rem',
},
[theme.breakpoints.up('xl')]: {
columnCount: 3,
columnGap: '3rem',
},
'& > h1':{
fontSize: '41px',
marginTop: '22px',
marginBottom: '11px',
fontFamily: 'Roboto-Bold',
},
'& > p': {
color: '#4d4c46',
fontSize: '18px',
fontFamily: 'Roboto-Regular',
lineHeight: '30px',
margin: '0 0 30px 0',
'& ~ a': {
color: '#006db4',
textDecoration: 'none',
},
},
},
relinkButton: {
marginTop: '4px',
marginBottom: '4px'
},
});
/*tslint:enable*/
......@@ -72,7 +43,7 @@ interface IDisplayPageProps extends React.ClassAttributes<any> {
crops: Crop[];
shortName: string;
t: any;
classes: any;
classes?: any;
applyFilters: any;
relinkAccessions: (shortName: string) => void;
}
......@@ -104,41 +75,41 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
}
public render() {
const { cropDetails, shortName, classes, t } = this.props;
const { cropDetails, shortName, t } = this.props;
const crop = cropDetails;
return (
<PageLayout withFooter>
<PageTitle title={ !crop || crop.shortName !== shortName ? t('common:label.loading', { what: shortName }) : crop.name }/>
<ContentHeaderWithButton title={ !crop || crop.shortName !== shortName ? t('common:label.loading', { what: shortName }) : crop.name }
buttons={
<Authorize role="ROLE_ADMINISTRATOR">
<ButtonBar>
<ActionButton
className={ classes.relinkButton }
title={ t('crop.admin.p.link') }
action={ this.relinkAccessions }
/>
</ButtonBar>
</Authorize>
}
/>
<ContentHeader title={ !crop || crop.shortName !== shortName ? t('common:label.loading', { what: shortName }) : crop.name } />
{ !crop || crop.shortName !== shortName ? (<Loading/>) :
<PageContents className="mt-15 container-spacing-horizontal pb-1rem">
<PageContents className="pt-1rem">
<MainSection title={ t('crop.public.p.display.generalInformation') }>
{ cropDetails.blurb && cropDetails.blurb.body &&
<Section title={ shortName }>
<div className={ classes.cropBlurb } dangerouslySetInnerHTML={ {__html: cropDetails.blurb.body} }/>
</Section>
<Properties>
<BlurbText body={ cropDetails.blurb.body } />
</Properties>
}
<CropCard crop={ crop } t={ t }/>
<PageSection title={ t(`crop.public.p.display.generalInformation`) }>
<Properties>
<PropertiesItem title={ t(`crop.common.accessionsInGenesys`) } keepEmpty>
<a onClick={ this.applyCropFilter }><Number value={ cropDetails.accessionCount || 0 } /></a>
</PropertiesItem>
</Properties>
</PageSection>
<Properties>
<PropertiesItem title={ t('crop.public.c.cropCard.originalName') }>{ crop.name }</PropertiesItem>
{ crop.createdDate && <PropertiesItem title={ t('crop.public.c.cropCard.registered') }><PrettyDate value={ new Date(crop.createdDate) }/></PropertiesItem> }
{ crop.lastModifiedDate && <PropertiesItem title={ t('common:label.lastUpdated') }><PrettyDate value={ new Date(crop.lastModifiedDate) }/></PropertiesItem> }
<PropertiesItem title={ t(`crop.common.accessionsInGenesys`) } keepEmpty>
<a onClick={ this.applyCropFilter }><Number value={ cropDetails.accessionCount || 0 } /></a>
</PropertiesItem>
</Properties>
<CardActions className="container-spacing-vertical mt-15">
<ButtonBar>
<Button onClick={ this.applyCropFilter }>{ t('institutes.public.p.display.browseAccessions') }</Button>
{ crop._permissions.manage && <Link to={ `/c/${crop.shortName}/edit` }><Button>{ t('common:action.edit') }</Button></Link> }
{ crop._permissions.manage && <Permissions clazz={ Crop.clazz } id={ crop.id }/> }
<Authorize role="ROLE_ADMINISTRATOR">
<Button onClick={ this.relinkAccessions }>{ t('crop.admin.p.link') }</Button>
</Authorize>
</ButtonBar>
</CardActions>
</MainSection>
{ crop.overview &&
<GridContainer className="pb-1rem">
......
......@@ -24,8 +24,6 @@ import { ScrollToTopOnMount } from 'ui/common/page/scrollers';
import { Properties, PropertiesItem } from 'ui/common/Properties';
import PieChart from 'ui/common/pie-chart';
import PrettyDate from 'ui/common/time/PrettyDate';
import withWidth from '@material-ui/core/withWidth';
import { Breakpoint } from '@material-ui/core/styles/createBreakpoints';
import { CountryLink } from 'ui/genesys/Links';
import BarChart from 'ui/common/bar-chart';
import { CardActions } from 'ui/common/Card';
......@@ -35,11 +33,11 @@ import FaoInstitute from 'model/genesys/FaoInstitute';
import ButtonBar from 'ui/common/buttons/ButtonBar';
import DownloadDialog from 'ui/common/download-dialog';
import PageTitle from 'ui/common/PageTitle';
import BlurbText from 'cms/ui/c/BlurbText';
interface IDisplayPageProps extends React.ClassAttributes<any> {
t: any;
classes?: any;
width: Breakpoint;
code: string;
institute: FaoInstituteDetails;
error: any;
......@@ -49,7 +47,6 @@ interface IDisplayPageProps extends React.ClassAttributes<any> {
userRoles: string[];
mapLayers: MapLayer[];
}
const mobile = ['sm', 'xs'] as Breakpoint[];
class DisplayPage extends React.Component<IDisplayPageProps, any> {
......@@ -107,10 +104,9 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
}
public render() {
const { error, institute, code, width, mapLayers, t } = this.props;
const { error, institute, code, mapLayers, t } = this.props;
const slug: string = this.state.authenticated ? 'download-authenticated' : 'download-anonymous';
const stillLoading: boolean = ! error && (! institute || (code && institute && institute.details.code !== code));
const isMobile = mobile.indexOf(width) !== -1;
let cropShortNameOverview;
let cropNameOverview;
......@@ -140,6 +136,11 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
{ institute &&
<PageContents className="pt-1rem">
<MainSection title={ t('institutes.public.p.display.title') }>
{ institute.blurb && institute.blurb.body &&
<Properties>
<BlurbText body={ institute.blurb.body } />
</Properties>
}
<Properties>
<PropertiesItem title={ t('institutes.common.instituteCode') }>{ institute.details.code }</PropertiesItem>
<PropertiesItem title={ t('institutes.public.p.display.type') }>{ institute.details.type }</PropertiesItem>
......@@ -180,14 +181,6 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
</CardActions>
</MainSection>
{ institute.blurb && institute.blurb.body &&
<PageSection title={ t('institutes.public.p.display.about') }>
<Properties>
<div style={ !isMobile ? {columnCount: 2} : {} } dangerouslySetInnerHTML={ {__html: institute.blurb.body} }/>
</Properties>
</PageSection>
}
{ institute.details.latitude !== null && institute.details.longitude !== null &&
<PageSection title={ t('geo.common.location') }>
<LocationMap
......@@ -195,7 +188,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
mapLayers={ mapLayers }
/>
<Properties>
<PropertiesItem title={ t('geo.common.latitude') }>{ institute.details.latitude }</PropertiesItem>
<PropertiesItem title={ t('geo.common.latitude') }>({ institute.details.latitude }</PropertiesItem>
<PropertiesItem title={ t('geo.common.longitude') }>{ institute.details.longitude }</PropertiesItem>
</Properties>
</PageSection>
......@@ -313,4 +306,4 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({
}, dispatch);
export default connect(mapStateToProps, mapDispatchToProps)(withWidth()(translate()(DisplayPage)));
export default connect(mapStateToProps, mapDispatchToProps)(translate()(DisplayPage));
import { Permissions } from 'model/acl/ACL';
/*
* Defined in Swagger as '#/definitions/Crop'
*/
class Crop {
public _permissions?: Permissions;
public active: boolean;
public createdBy: number;
public createdDate: Date;
......@@ -17,7 +20,7 @@ class Crop {
public shortName: string;
public version: number;
public static clazz: string = 'org.genesys2.server.model.impl.Crop';
}
export default Crop;
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