Skip to content

GitLab

G
Genesys Website
Commit 5799f6bb authored by Matija Obreza's avatar Matija Obreza
Browse files
Options

i18n updates 

- Components should receive translated strings
- Components may use t() for their internal texts
parent 6e1a1487
Hide whitespace changes
Inline Side-by-side
Showing with 51 additions and 52 deletions
src/accessions/ui/BrowsePage.tsx
View file @ 5799f6bb
......@@ -51,7 +51,7 @@ class BrowsePage extends BrowsePageTemplate<Accession> {
<PageLayout sidebar={
<AccessionFilters initialValues={ paged && paged.filter || {} } onSubmit={ this.myApplyFilters } />
}>
<ContentHeader title="accessions.public.p.browse.title" subTitle="accessions.public.p.browse.subTitle" />
<ContentHeader title={ t('accessions.public.p.browse.title') } subTitle={ t('accessions.public.p.browse.subTitle') } />
<PaginationComponent
pageObj={ paged }
onChange={ this.onPaginationChange }
......
src/accessions/ui/DisplayPage.tsx
View file @ 5799f6bb
......@@ -95,7 +95,7 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> {
return (
<PageLayout withFooter>
<ScrollToTopOnMount />
<ContentHeader title="accessions.public.p.display.title" subtitle="accessions.public.p.display.subTitle" />
<ContentHeader title={ t('accessions.public.p.display.title') } subtitle={ t('accessions.public.p.display.subTitle') } />
{ stillLoading ? <Loading /> :
<div>
......
src/accessions/ui/MapPage.tsx
View file @ 5799f6bb
......@@ -83,7 +83,7 @@ class BrowsePage extends React.Component<IMapPageProps, any> {
return (
<PageLayout withFooter>
<ContentHeader title="accessions.public.p.browse.title" subTitle="accessions.public.p.browse.subTitle" />
<ContentHeader title={ t('accessions.public.p.browse.title') } subTitle={ t('accessions.public.p.browse.subTitle') } />
<Tabs
tab={ currentTab }
actions={
......
src/accessions/ui/OverviewPage.tsx
View file @ 5799f6bb
......@@ -129,7 +129,7 @@ class BrowsePage extends React.Component<IOverviewPageProps, any> {
}
withFooter
>
<ContentHeader title="accessions.public.p.browse.title" subTitle="accessions.public.p.browse.subTitle"/>
<ContentHeader title={ t('accessions.public.p.browse.title') } subTitle={ t('accessions.public.p.browse.subTitle') } />
<Tabs
tab={ currentTab }
actions={
......
src/crop/ui/BrowsePage.tsx
View file @ 5799f6bb
......@@ -36,13 +36,13 @@ class BrowsePage extends React.Component<IBrowsePageProps> {
return (
<PageLayout>
<ContentHeader title="crop.public.p.browse.title" subTitle="crop.public.p.browse.subTitle"/>
<ContentHeader title={ t('crop.public.p.browse.title') } subTitle={ t('crop.public.p.browse.subTitle') } />
<Authorize role="ROLE_ADMINISTRATOR">
<ContentHeaderWithButton buttons={ <ActionButton title={ t('crop.public.p.browse.createCrop') } action={ this.addNewCropHandle } style={ {margin: '4px', padding: '0'} }/> }/>
</Authorize>
<PageContents>
<GridLayout>
{ crops && crops.sort((a, b) => a.name.localeCompare(b.name)).map((crop) => <CropCard key={ crop.shortName } crop={ crop } compact t={ t }/>) }
{ crops && crops.sort((a, b) => a.name.localeCompare(b.name)).map((crop) => <CropCard key={ crop.shortName } crop={ crop } compact />) }
</GridLayout>
</PageContents>
</PageLayout>
......
src/crop/ui/DisplayPage.tsx
View file @ 5799f6bb
......@@ -92,7 +92,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
return (
<PageLayout withFooter>
<ContentHeader title="crop.public.p.display.title"/>
<ContentHeader title={ t('crop.public.p.display.title') } />
{ !crop || crop.shortName !== shortName ? (<Loading/>) :
<PageContents>
{ cropDetails.blurb && cropDetails.blurb.body &&
......
src/crop/ui/c/CropCard.tsx
View file @ 5799f6bb
import * as React from 'react';
import { Link } from 'react-router-dom';
import { translate } from 'react-i18next';
// Models
import CropDetails from 'model/genesys/CropDetails';
......@@ -115,4 +116,4 @@ const CropCard = ({crop, classes, compact = false, edit = false, t, ...other}: {
);
};
export default withStyles(style)(CropCard);
export default translate()(withStyles(style)(CropCard));
src/institutes/ui/DisplayPage.tsx
View file @ 5799f6bb
import * as React from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { translate } from 'react-i18next';
import { Link } from 'react-router-dom';
// Actions
import {loadInstitute} from 'institutes/actions/public';
import {applyFilters} from 'accessions/actions/public';
import { loadInstitute } from 'institutes/actions/public';
import { applyFilters } from 'accessions/actions/public';
// Models
import FaoInstituteDetails from 'model/genesys/FaoInstituteDetails';
// UI
import PageLayout, {MainSection, PageContents, PageSection} from 'ui/layout/PageLayout';
import PageLayout, { MainSection, PageContents, PageSection } from 'ui/layout/PageLayout';
import GridLayout from 'ui/layout/GridLayout';
import PropertiesCard from 'ui/common/PropertiesCard.tsx';
import ContentHeader from 'ui/common/heading/ContentHeader';
......@@ -20,12 +20,12 @@ import LocationMap from 'ui/common/LocationMap';
import Loading from 'ui/common/Loading';
import Number from 'ui/common/Number';
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 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 { Breakpoint } from '@material-ui/core/styles/createBreakpoints';
import { CountryLink } from 'ui/genesys/Links';
import BarChart from 'ui/common/bar-chart';
interface IDisplayPageProps extends React.ClassAttributes<any> {
......@@ -123,7 +123,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
</MainSection>
{ institute.blurb && institute.blurb.body &&
<PageSection title="institutes.public.p.display.about">
<PageSection title={ t('institutes.public.p.display.about') }>
<Properties>
<div style={ !isMobile ? {columnCount: 2} : {} } dangerouslySetInnerHTML={ {__html: institute.blurb.body} }/>
</Properties>
......@@ -131,11 +131,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
}
{ institute.details.latitude !== null && institute.details.longitude !== null &&
<PageSection title="geo.common.location">
<Properties>
<PropertiesItem title={ t('geo.common.latitude') }>{ institute.details.latitude }</PropertiesItem>
<PropertiesItem title={ t('geo.common.longitude') }>{ institute.details.longitude }</PropertiesItem>
</Properties>
<PageSection title={ t('geo.common.location') }>
<LocationMap
location={
{
......@@ -145,6 +141,10 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
}
}
/>
<Properties>
<PropertiesItem title={ t('geo.common.latitude') }>{ institute.details.latitude }</PropertiesItem>
<PropertiesItem title={ t('geo.common.longitude') }>{ institute.details.longitude }</PropertiesItem>
</Properties>
</PageSection>
}
......@@ -217,11 +217,11 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
</GridLayout>
{ institute.lastUpdates && institute.lastUpdates.length > 0 &&
<PageSection title="institutes.public.p.display.lastUpdates">
<PageSection title={ t('institutes.public.p.display.lastUpdates') }>
<Properties>
{ institute.lastUpdates.map((lastUpdate) => (
<PropertiesItem key={ `${lastUpdate[0]}-${lastUpdate[1]}=${lastUpdate[2]}` }
numeric title={ PrettyDate({value: new Date(lastUpdate[0], lastUpdate[1] - 1, lastUpdate[2])}) }>
numeric title={ <PrettyDate value={ new Date(lastUpdate[0], lastUpdate[1] - 1, lastUpdate[2]) } /> }>
<a onClick={ () => this.applyLastModifyDateFilter(lastUpdate) }><Number value={ lastUpdate[3] } /></a>
</PropertiesItem>
)) }
......@@ -230,7 +230,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
}
{ institute.pdciStats && institute.pdciStats.histogram && institute.pdciStats.histogram.length > 0 &&
<PageSection title="institutes.public.p.display.PDCI">
<PageSection title={ t('institutes.public.p.display.PDCI') }>
<BarChart data={ institute.pdciStats.histogram.map((item, i) => ({key: i % 2 === 0 ? i / 2 : '', value: item })) }/>
<p className="mt-20">{ t('institutes.public.p.display.pdciScore', { count: institute.pdciStats.count, avg: institute.pdciStats.avg, min: institute.pdciStats.min, max: institute.pdciStats.max }) }</p>
<Link to="/content/passport-data-completeness-index">{ t('institutes.public.p.display.readPDCI') }</Link>
......
src/list/ui/BrowsePage.tsx
View file @ 5799f6bb
......@@ -53,15 +53,15 @@ class MyListPage extends React.Component<IMyListPageProps> {
return (
<PageLayout>
<ContentHeader
title="list.public.p.browse.title"
subTitle="list.public.p.browse.subTitle"
title={ t('list.public.p.browse.title') }
subTitle={ t('list.public.p.browse.subTitle') }
/>
{ accessions && accessions.length > 0
? (
<div>
<ContentHeaderWithButton
title={ `${accessions.length} ${t('accessions.common.modelName', {count: accessions.length})}` }
buttons={ <ActionButton title="list.public.p.browse.sendRequest" action={ this.sendRequestAction }/> }
title={ `${accessions.length} ${ t('accessions.common.modelName', {count: accessions.length})}` }
buttons={ <ActionButton title={ t('list.public.p.browse.sendRequest') } action={ this.sendRequestAction }/> }
/>
{ accessions.map((accession, index) => <div key={ index } className="pr-20 pb-10 pt-10 pl-20"><AccessionCard index={ index } accession={ accession }/></div>) }
</div>
......
src/repository/ui/c/FileCard.tsx
View file @ 5799f6bb
......@@ -98,8 +98,8 @@ const FileCard = ({file, classes, compact = false, edit = false, deleteFile, edi
title={ <span><a href={ `/proxy/uploads/${file.uuid}` }><DownloadIcon /></a> <span>{ file.originalFilename }</span></span> }
action={
<div className={ classes.actions }>
<span><ActionButton action={ () => editFile(file.uuid) } title="common:action.edit"/></span>
<span><ActionButton action={ () => deleteFile(file.uuid) } title="common:action.delete"/></span>
<span><ActionButton action={ () => editFile(file.uuid) } title={ t('common:action.edit') } /></span>
<span><ActionButton action={ () => deleteFile(file.uuid) } title={ t('common:action.delete') } /></span>
{ file && file._permissions.manage && <Permissions clazz={ RepositoryFile.clazz } id={ file.id } /> }
</div>
}
......
src/requests/ui/admin/DisplayPage.tsx
View file @ 5799f6bb
......@@ -54,9 +54,9 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
title={ t('requests.admin.p.display.title', {email: request.email}) }
buttons={
<div>
<ActionButton title="requests.admin.p.display.sendValidationEmail" action={ () => sendValidationEmail(request.uuid) }/>
<ActionButton title="requests.admin.p.display.validateRequest" action={ () => validateRequest(request.uuid) }/>
<ActionButton title="requests.admin.p.display.recheckPID" action={ () => recheckPid(request.uuid) }/>
<ActionButton title={ t('requests.admin.p.display.sendValidationEmail') } action={ () => sendValidationEmail(request.uuid) }/>
<ActionButton title={ t('requests.admin.p.display.validateRequest') } action={ () => validateRequest(request.uuid) }/>
<ActionButton title={ t('requests.admin.p.display.recheckPID') } action={ () => recheckPid(request.uuid) }/>
<BackButton defaultTarget="/admin/requests"/>
</div>
}
......
src/ui/common/Properties.tsx
View file @ 5799f6bb
......@@ -66,7 +66,9 @@ class PropertiesItem1 extends React.Component<IItemProps & WithStyles<'propertie
return (
<Grid item xs={ 12 } md={ small ? 3 : 12 } className={ classes.propertiesRow }>
<Grid container style={ small ? {height: '100%' } : {} } spacing={ 0 }>
<Grid item xs={ small && numeric ? 8 : 6 } md={ small ? 12 : (numeric ? 9 : 3) } className="font-bold p-halfrem" style={ { fontSize: '1rem', fontFamily: 'Roboto, sans-serif' } }>{ typeof title === 'string' ? t(title) : title }</Grid>
<Grid item xs={ small && numeric ? 8 : 6 } md={ small ? 12 : (numeric ? 9 : 3) } className="font-bold p-halfrem" style={ { fontSize: '1rem', fontFamily: 'Roboto, sans-serif' } }>
{ title && typeof title === 'string' ? t(title) : title }
</Grid>
<Grid item xs={ small && numeric ? 4 : 6 } md={ small ? 12 : (numeric ? 3 : 9) } className={ `${small ? classes.propertiesValueSmall : ''} ${numeric && !small ? classes.propertiesValueNumeric : ''} ${classes.propertiesValue}` }>
{ children }
</Grid>
......
src/ui/common/buttons/ActionButton.tsx
View file @ 5799f6bb
import * as React from 'react';
import { translate } from 'react-i18next';
import Button from '@material-ui/core/Button';
interface IActionButtonProps extends React.ClassAttributes<any> {
......@@ -7,19 +6,18 @@ interface IActionButtonProps extends React.ClassAttributes<any> {
title: string;
action: any;
style?: any;
t: any;
}
class ActionButton extends React.Component<IActionButtonProps, any> {
public render() {
const { title, action, variant = 'raised', style, t } = this.props;
const { title, action, variant = 'raised', style } = this.props;
return (
<Button style={ style } variant={ variant } onClick={ action }>
{ t(title) }
{ title }
</Button>
);
}
}
export default translate()(ActionButton);
export default ActionButton;
src/ui/common/buttons/BackButton.tsx
View file @ 5799f6bb
......@@ -40,7 +40,7 @@ class BackButton extends React.Component<IBackButtonProps, any> {
const { defaultBackText, style, t } = this.props;
return (
<Button variant="raised" style={ style } onClick={ this.onGoBack }>
{ t(defaultBackText) || t('common:action.back') }
{ defaultBackText || t('common:action.back') }
</Button>
);
}
......
src/ui/common/checkbox/index.tsx
View file @ 5799f6bb
import * as React from 'react';
import {translate} from 'react-i18next';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
const ReduxCheckbox = ({input: {value, onChange}, label = null, style = {height: '40px'}, t, ...rest}) => (
const ReduxCheckbox = ({input: {value, onChange}, label = null, style = {height: '40px'}, ...rest}) => (
<FormControlLabel
style={ style }
control={
......@@ -12,9 +11,9 @@ const ReduxCheckbox = ({input: {value, onChange}, label = null, style = {height:
onChange={ onChange }
/>
}
label={ t(label) }
label={ label }
{ ...rest }
/>
);
export default translate()(ReduxCheckbox);
export default ReduxCheckbox;
src/ui/layout/PageLayout.tsx
View file @ 5799f6bb
import * as React from 'react';
import { translate } from 'react-i18next';
import { withStyles } from '@material-ui/core/styles';
import Card, {CardHeader, CardContent} from 'ui/common/Card';
......@@ -84,22 +83,22 @@ const Layout = ({classes, children = null, sidebar = null, withFooter = false}:
);
const Contents = ({classes, children = null}) => children && <div className={ classes.pageContents }>{ children }</div>;
const Section1 = ({classes, title, children = null, t}) => children && (
const Section1 = ({classes, title, children = null}) => children && (
<Card className={ classes.mainSection }>
<CardHeader classes={ { title: classes.mainSectionTitle } } title={ t(title) } />
<CardHeader classes={ { title: classes.mainSectionTitle } } title={ title } />
<CardContent>{ children }</CardContent>
</Card>
);
const Section2 = ({classes, title, children = null, t}) => children && (
const Section2 = ({classes, title, children = null}) => children && (
<Card className={ classes.section }>
<CardHeader classes={ { title: classes.sectionTitle } } title={ title && t(title) } />
<CardHeader classes={ { title: classes.sectionTitle } } title={ title } />
<CardContent>{ children }</CardContent>
</Card>
);
export const PageContents = withStyles(styles)(Contents);
export const MainSection = translate()(withStyles(styles)(Section1));
export const PageSection = translate()(withStyles(styles)(Section2));
export const MainSection = withStyles(styles)(Section1);
export const PageSection = withStyles(styles)(Section2);
export default withStyles(styles)(Layout);
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