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'; ...@@ -14,55 +14,26 @@ import Crop from 'model/genesys/Crop';
import CropDetails from 'model/genesys/CropDetails'; import CropDetails from 'model/genesys/CropDetails';
// UI // 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 {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 Loading from 'ui/common/Loading';
import PropertiesCard from 'ui/common/PropertiesCard'; import PropertiesCard from 'ui/common/PropertiesCard';
import Number from 'ui/common/Number'; import Number from 'ui/common/Number';
import GridContainer from 'ui/layout/GridContainer'; import GridContainer from 'ui/layout/GridContainer';
import PieChart from 'ui/common/pie-chart'; import PieChart from 'ui/common/pie-chart';
import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton';
import ButtonBar from 'ui/common/buttons/ButtonBar'; import ButtonBar from 'ui/common/buttons/ButtonBar';
import ActionButton from 'ui/common/buttons/ActionButton';
import Authorize from 'ui/common/authorized/Authorize'; import Authorize from 'ui/common/authorized/Authorize';
import PageTitle from 'ui/common/PageTitle'; 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*/ /*tslint:disable*/
const styles = (theme) => ({ 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*/ /*tslint:enable*/
...@@ -72,7 +43,7 @@ interface IDisplayPageProps extends React.ClassAttributes<any> { ...@@ -72,7 +43,7 @@ interface IDisplayPageProps extends React.ClassAttributes<any> {
crops: Crop[]; crops: Crop[];
shortName: string; shortName: string;
t: any; t: any;
classes: any; classes?: any;
applyFilters: any; applyFilters: any;
relinkAccessions: (shortName: string) => void; relinkAccessions: (shortName: string) => void;
} }
...@@ -104,41 +75,41 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> { ...@@ -104,41 +75,41 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
} }
public render() { public render() {
const { cropDetails, shortName, classes, t } = this.props; const { cropDetails, shortName, t } = this.props;
const crop = cropDetails; const crop = cropDetails;
return ( return (
<PageLayout withFooter> <PageLayout withFooter>
<PageTitle title={ !crop || crop.shortName !== shortName ? t('common:label.loading', { what: shortName }) : crop.name }/> <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 } <ContentHeader 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>
}
/>
{ !crop || crop.shortName !== shortName ? (<Loading/>) : { !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 && { cropDetails.blurb && cropDetails.blurb.body &&
<Section title={ shortName }> <Properties>
<div className={ classes.cropBlurb } dangerouslySetInnerHTML={ {__html: cropDetails.blurb.body} }/> <BlurbText body={ cropDetails.blurb.body } />
</Section> </Properties>
} }
<CropCard crop={ crop } t={ t }/> <Properties>
<PropertiesItem title={ t('crop.public.c.cropCard.originalName') }>{ crop.name }</PropertiesItem>
<PageSection title={ t(`crop.public.p.display.generalInformation`) }> { crop.createdDate && <PropertiesItem title={ t('crop.public.c.cropCard.registered') }><PrettyDate value={ new Date(crop.createdDate) }/></PropertiesItem> }
<Properties> { crop.lastModifiedDate && <PropertiesItem title={ t('common:label.lastUpdated') }><PrettyDate value={ new Date(crop.lastModifiedDate) }/></PropertiesItem> }
<PropertiesItem title={ t(`crop.common.accessionsInGenesys`) } keepEmpty> <PropertiesItem title={ t(`crop.common.accessionsInGenesys`) } keepEmpty>
<a onClick={ this.applyCropFilter }><Number value={ cropDetails.accessionCount || 0 } /></a> <a onClick={ this.applyCropFilter }><Number value={ cropDetails.accessionCount || 0 } /></a>
</PropertiesItem> </PropertiesItem>
</Properties> </Properties>
</PageSection> <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 && { crop.overview &&
<GridContainer className="pb-1rem"> <GridContainer className="pb-1rem">
......
...@@ -24,8 +24,6 @@ import { ScrollToTopOnMount } from 'ui/common/page/scrollers'; ...@@ -24,8 +24,6 @@ import { ScrollToTopOnMount } from 'ui/common/page/scrollers';
import { Properties, PropertiesItem } from 'ui/common/Properties'; import { Properties, PropertiesItem } from 'ui/common/Properties';
import PieChart from 'ui/common/pie-chart'; import PieChart from 'ui/common/pie-chart';
import PrettyDate from 'ui/common/time/PrettyDate'; 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 { CountryLink } from 'ui/genesys/Links';
import BarChart from 'ui/common/bar-chart'; import BarChart from 'ui/common/bar-chart';
import { CardActions } from 'ui/common/Card'; import { CardActions } from 'ui/common/Card';
...@@ -35,11 +33,11 @@ import FaoInstitute from 'model/genesys/FaoInstitute'; ...@@ -35,11 +33,11 @@ import FaoInstitute from 'model/genesys/FaoInstitute';
import ButtonBar from 'ui/common/buttons/ButtonBar'; import ButtonBar from 'ui/common/buttons/ButtonBar';
import DownloadDialog from 'ui/common/download-dialog'; import DownloadDialog from 'ui/common/download-dialog';
import PageTitle from 'ui/common/PageTitle'; import PageTitle from 'ui/common/PageTitle';
import BlurbText from 'cms/ui/c/BlurbText';
interface IDisplayPageProps extends React.ClassAttributes<any> { interface IDisplayPageProps extends React.ClassAttributes<any> {
t: any; t: any;
classes?: any; classes?: any;
width: Breakpoint;
code: string; code: string;
institute: FaoInstituteDetails; institute: FaoInstituteDetails;
error: any; error: any;
...@@ -49,7 +47,6 @@ interface IDisplayPageProps extends React.ClassAttributes<any> { ...@@ -49,7 +47,6 @@ interface IDisplayPageProps extends React.ClassAttributes<any> {
userRoles: string[]; userRoles: string[];
mapLayers: MapLayer[]; mapLayers: MapLayer[];
} }
const mobile = ['sm', 'xs'] as Breakpoint[];
class DisplayPage extends React.Component<IDisplayPageProps, any> { class DisplayPage extends React.Component<IDisplayPageProps, any> {
...@@ -107,10 +104,9 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> { ...@@ -107,10 +104,9 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
} }
public render() { 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 slug: string = this.state.authenticated ? 'download-authenticated' : 'download-anonymous';
const stillLoading: boolean = ! error && (! institute || (code && institute && institute.details.code !== code)); const stillLoading: boolean = ! error && (! institute || (code && institute && institute.details.code !== code));
const isMobile = mobile.indexOf(width) !== -1;
let cropShortNameOverview; let cropShortNameOverview;
let cropNameOverview; let cropNameOverview;
...@@ -140,6 +136,11 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> { ...@@ -140,6 +136,11 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
{ institute && { institute &&
<PageContents className="pt-1rem"> <PageContents className="pt-1rem">
<MainSection title={ t('institutes.public.p.display.title') }> <MainSection title={ t('institutes.public.p.display.title') }>
{ institute.blurb && institute.blurb.body &&
<Properties>
<BlurbText body={ institute.blurb.body } />
</Properties>
}
<Properties> <Properties>
<PropertiesItem title={ t('institutes.common.instituteCode') }>{ institute.details.code }</PropertiesItem> <PropertiesItem title={ t('institutes.common.instituteCode') }>{ institute.details.code }</PropertiesItem>
<PropertiesItem title={ t('institutes.public.p.display.type') }>{ institute.details.type }</PropertiesItem> <PropertiesItem title={ t('institutes.public.p.display.type') }>{ institute.details.type }</PropertiesItem>
...@@ -180,14 +181,6 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> { ...@@ -180,14 +181,6 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
</CardActions> </CardActions>
</MainSection> </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 && { institute.details.latitude !== null && institute.details.longitude !== null &&
<PageSection title={ t('geo.common.location') }> <PageSection title={ t('geo.common.location') }>
<LocationMap <LocationMap
...@@ -195,7 +188,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> { ...@@ -195,7 +188,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
mapLayers={ mapLayers } mapLayers={ mapLayers }
/> />
<Properties> <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> <PropertiesItem title={ t('geo.common.longitude') }>{ institute.details.longitude }</PropertiesItem>
</Properties> </Properties>
</PageSection> </PageSection>
...@@ -313,4 +306,4 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({ ...@@ -313,4 +306,4 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({
}, dispatch); }, 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' * Defined in Swagger as '#/definitions/Crop'
*/ */
class Crop { class Crop {
public _permissions?: Permissions;
public active: boolean; public active: boolean;
public createdBy: number; public createdBy: number;
public createdDate: Date; public createdDate: Date;
...@@ -17,7 +20,7 @@ class Crop { ...@@ -17,7 +20,7 @@ class Crop {
public shortName: string; public shortName: string;
public version: number; public version: number;
public static clazz: string = 'org.genesys2.server.model.impl.Crop';
} }
export default 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