Commit a00a3920 authored by Matija Obreza's avatar Matija Obreza

Minor UI updates

- Set Accession display background color for historic records
- accessionCount using <Number
- Subset display uses AccessionRefCard instead of AccessionCard
parent 7b7e85f0
......@@ -356,6 +356,8 @@
"removeFromMyList": "Remove {{accessionNumber}} from my list",
"addToMyList": "Add {{accessionNumber}} to my list",
"holdingInstitute": "Holding institute",
"historic": "Historic accession",
"isHistoric": "This is a historic record of an accession",
"DOI": "DOI",
"acquisitionDate": "Acquisition Date",
"availability": "Availability for distribution",
......@@ -1666,7 +1668,8 @@
"detailedInstructions4": "Copy and paste the table from Excel into the text field below.",
"listOfAccessions": "List of accessions described in the dataset",
"pasteData": "Paste accessions data here (comma separated)",
"accessionListCount": "Accession list: {{count, numeric}} rows"
"accessionListCount": "List with {{count, number}} accession",
"accessionListCount_plural": "List with {{count, number}} accessions"
},
"basicInfo": {
"stepName": "Basic information",
......
......@@ -30,6 +30,8 @@
"removeFromMyList": "Remove {{accessionNumber}} from my list",
"addToMyList": "Add {{accessionNumber}} to my list",
"holdingInstitute": "Holding institute",
"historic": "Historic accession",
"isHistoric": "This is a historic record of an accession",
"DOI": "DOI",
"acquisitionDate": "Acquisition Date",
"availability": "Availability for distribution",
......
......@@ -38,6 +38,12 @@ const styles = (theme) => ({
pageSection: {
marginBottom: '1em',
},
selected: {
background: '#c9e2cb',
},
historic: {
background: '#ffe2e2 !important',
},
});
......@@ -96,7 +102,7 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> {
:
{details: null, pdci: null, datasets: null, subsets: null, files: null, imageGallery: null};
const isChecked = accession && accessions && accessions.includes(accession.uuid);
const isChecked = accession && accessions && accessions.includes(accession.uuid);
const theDoi = `10.${doi}`;
const stillLoading: boolean = ! error && (! accession
|| (doi && accession && accession.doi !== theDoi)
......@@ -115,7 +121,7 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> {
{ accession &&
<PageContents className="pt-1rem">
<MainSection title={
<MainSection className={ isChecked ? classes.selected : accession.historic ? classes.historic : '' } title={
<div>
{ t('accessions.common.modelName') }: { accession.accessionNumber }
<div className="float-right">
......@@ -144,6 +150,7 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> {
<span> &mdash; </span>
<CountryLink noflag country={ accession.institute.country }/>
</PropertiesItem>
{ accession.historic && <PropertiesItem className={ accession.historic ? classes.historic : '' } title={ t('accessions.public.p.display.historic') }>{ t('accessions.public.p.display.isHistoric') }</PropertiesItem> }
<PropertiesItem title={ t('accessions.common.instituteCode') }>{ accession.institute.code }</PropertiesItem>
<PropertiesItem title={ t('accessions.public.p.display.acquisitionDate') }><McpdDate value={ accession.acquisitionDate } /></PropertiesItem>
{ accession.countryOfOrigin && <PropertiesItem title={ t('accessions.common.countryOfOrigin') }>{ <CountryLink country={ accession.countryOfOrigin }/> }</PropertiesItem> }
......@@ -271,7 +278,7 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> {
small
title={ t('accessions.public.p.display.associatedDatasets') }
propertyItemProps={ { keepEmpty: true } }
propertiesList={ datasets.map((dataset) => ({ title: t('dataset.common.modelName'), value: <DatasetLink to={ dataset } /> })) }
propertiesList={ datasets.map((dataset) => ({ value: <DatasetLink to={ dataset } /> })) }
/>
}
{ subsets && subsets.length > 0 &&
......@@ -279,7 +286,7 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> {
small
title={ t('accessions.public.p.display.associatedSubsets') }
propertyItemProps={ { keepEmpty: true } }
propertiesList={ subsets.map((subset) => ({ title: t('subset.common.modelName'), value: <SubsetLink to={ subset } /> })) }
propertiesList={ subsets.map((subset) => ({ value: <SubsetLink to={ subset } /> })) }
/>
}
</GridContainer>
......
......@@ -20,7 +20,7 @@ const styles = (theme) => ({
background: '#c9e2cb',
},
historic: {
background: '#f3dddd',
background: '#ffe2e2',
},
});
......
......@@ -37,6 +37,7 @@ import Card, { CardHeader, CardContent, CardActions } from 'ui/common/Card';
import McpdDate from 'ui/common/time/McpdDate';
import PagedLoader from 'ui/common/PagedLoader';
import AccessionRefCard from 'accessions/ui/c/AccessionRefCard';
import Number from 'ui/common/Number';
const styles = (theme) => ({
root: {
......@@ -267,10 +268,10 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
</PropertiesItem>
}
<PropertiesItem title={ t('datasets.public.common.accessionsNumber') }>
{ dataset.accessionCount }
<Number value={ dataset.accessionCount } />
</PropertiesItem>
<PropertiesItem title={ t('datasets.public.common.traitsNumber') }>
{ dataset.descriptorCount }
<Number value={ dataset.descriptorCount } />
</PropertiesItem>
<PropertiesItem title={ t('datasets.public.c.datasetDisplay.properties.evaluationStart') }>
<McpdDate value={ dataset.startDate }/>
......
......@@ -74,7 +74,8 @@
"detailedInstructions4": "Copy and paste the table from Excel into the text field below.",
"listOfAccessions": "List of accessions described in the dataset",
"pasteData": "Paste accessions data here (comma separated)",
"accessionListCount": "Accession list: {{count, numeric}} rows"
"accessionListCount": "List with {{count, number}} accession",
"accessionListCount_plural": "List with {{count, number}} accessions"
},
"basicInfo": {
"stepName": "Basic information",
......
......@@ -12,11 +12,11 @@ import Page from 'model/Page';
import {AccessionRef} from 'model/accession/AccessionRef';
// ui
import SubsetCard from 'subsets/ui/c/SubsetCard';
import AccessionCard from 'accessions/ui/c/AccessionCard';
import PropertiesCard from 'ui/common/PropertiesCard';
import Grid from '@material-ui/core/Grid';
import Loading from 'ui/common/Loading';
import PagedLoader from 'ui/common/PagedLoader';
import AccessionRefCard from 'accessions/ui/c/AccessionRefCard';
const styles = (theme) => ({
accessionSection: {
......@@ -49,8 +49,8 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
}
const renderAccession = (accessionRef: AccessionRef, index: number) => (
<Grid key={ accessionRef.accession.uuid } item xs={ 12 } className={ classes.accessionCard }>
<AccessionCard index={ index } accession={ accessionRef.accession }/>
<Grid key={ `aref-${index}` } item xs={ 12 } className={ classes.accessionCard }>
<AccessionRefCard index={ index } accessionRef={ accessionRef }/>
</Grid>
);
......
......@@ -48,29 +48,33 @@ const styles = (theme) => ({
interface IItemProps extends React.ClassAttributes<any> {
// classes: any;
title: any;
title?: any;
small?: boolean;
keepEmpty?: boolean;
numeric?: boolean;
t: any;
// children: any;
style?: any;
className?: string;
}
class PropertiesItem1 extends React.Component<IItemProps & WithStyles<'propertiesContainer' | 'propertiesRow' | 'propertiesValue' | 'propertiesValueSmall' | 'propertiesValueNumeric'>, any> {
public render() {
const { keepEmpty, small, numeric, title, classes, children, t, style } = this.props;
const { keepEmpty, small, numeric, title, classes, className, children, t, style } = this.props;
if (!keepEmpty && ! children) {
return null;
}
const hasTitle: boolean = title !== null && title;
return (
<Grid item xs={ 12 } md={ small ? 3 : 12 } className={ classes.propertiesRow }>
<Grid item xs={ 12 } md={ small ? 3 : 12 } className={ `${classes.propertiesRow} ${className ? className : ''}` }>
<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' } }>
{ title && typeof title === 'string' ? t(title) : title }
</Grid>
<Grid item xs={ small && numeric ? 4 : 6 } md={ small ? 12 : (numeric ? 3 : 9) } style={ style }
{ hasTitle && (
<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={ !hasTitle ? 12 : small && numeric ? 4 : 6 } md={ !hasTitle ? 12 : small ? 12 : (numeric ? 3 : 9) } style={ style }
className={ style ? `${style}` : `${small ? classes.propertiesValueSmall : ''} ${numeric && !small ? classes.propertiesValueNumeric : ''} ${classes.propertiesValue}` }>
{ children }
</Grid>
......
......@@ -36,7 +36,7 @@ class PropertiesCard extends React.Component<IBundledProps, any> {
<Properties>
{
propertiesList.map((property, i) => (
<PropertiesItem key={ `${i}-${property.title}` } numeric title={ property.title } { ...propertyItemProps }>
<PropertiesItem key={ `${i}-${property.title}` } title={ property.title } { ...propertyItemProps }>
{ property.value && typeof property.value === 'number' ? t(`common:label.prettyNumber`, {value: property.value}) : property.value }
</PropertiesItem>
))
......
......@@ -77,9 +77,9 @@ const Layout = ({classes, children = null, sidebar = null, withFooter = false}:
);
const Contents = ({classes, style = {}, children = null, className = ''}) => children && <div style={ style } className={ `${className} ${classes.pageContents}` }>{ children }</div>;
const Section1 = ({classes, title, children = null}) => children && (
const Section1 = ({classes, className = '', title, children = null}) => children && (
<Card className={ classes.mainSection }>
<CardHeader classes={ { title: classes.mainSectionTitle } } title={ title } />
<CardHeader classes={ { title: classes.mainSectionTitle } } className={ className } title={ title } />
<CardContent>{ children }</CardContent>
</Card>
);
......
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