Skip to content
GitLab
Commit 546bc6b6 authored by Matija Obreza's avatar Matija Obreza
Browse files

GUI fixes 

- Number rendering in Pagination
- Dataset details display
parent c288077e
Hide whitespace changes
Inline Side-by-side
src/ui/catalog/Properties.tsx
View file @ 546bc6b6
......@@ -23,6 +23,9 @@ const styles = (theme) => ({
},
/* tslint:enable */
},
propertiesValue: {
overflowX: 'hidden' as 'hidden',
},
});
interface IItemProps extends React.ClassAttributes<any> {
......@@ -31,14 +34,14 @@ interface IItemProps extends React.ClassAttributes<any> {
// children: any;
}
class PropertiesItem1 extends React.Component<IItemProps & WithStyles<'propertiesContainer' | 'propertiesRow'>, any> {
class PropertiesItem1 extends React.Component<IItemProps & WithStyles<'propertiesContainer' | 'propertiesRow' | 'propertiesValue'>, any> {
public render() {
const { title, classes, children } = this.props;
return (
<Grid container spacing={ 0 } className={ classes.propertiesRow }>
<Grid item xs={ 6 } md={ 3 } className="font-bold p-halfrem">{ title }</Grid>
<Grid item xs={ 6 } md={ 9 } className="p-halfrem">{ children }</Grid>
<Grid item xs={ 4 } md={ 3 } className="font-bold p-halfrem">{ title }</Grid>
<Grid item xs={ 8 } md={ 9 } className={ `${classes.propertiesValue} p-halfrem` }>{ children }</Grid>
</Grid>
);
}
......@@ -49,7 +52,7 @@ interface IProps extends React.ClassAttributes<any> {
// children: any;
}
class Properties1 extends React.Component<IProps & WithStyles<'propertiesContainer' | 'propertiesRow'>, any> {
class Properties1 extends React.Component<IProps & WithStyles<'propertiesContainer' | 'propertiesRow' | 'propertiesValue'>, any> {
public render() {
const { children, classes} = this.props;
return (
......
src/ui/common/Number.tsx 0 → 100644
View file @ 546bc6b6
import * as React from 'react';
// Print a number
// TBD maybe use l10n instead?
export default function Number({
value,
}: { value: number }) {
if (value !== null) {
return <span>{ value.toLocaleString() }</span>;
} else {
return <span>&mdash;</span>;
}
}
src/ui/common/pagination/index.tsx
View file @ 546bc6b6
......@@ -12,7 +12,7 @@ import compose from 'recompose/compose';
import withWidth from 'material-ui/utils/withWidth';
import Hidden from 'material-ui/Hidden';
import {Breakpoint} from 'material-ui/styles/createBreakpoints';
import Number from 'ui/common/Number';
import {Page} from 'model/common.model';
interface IPaginationComponentProps extends React.ClassAttributes<any> {
......@@ -157,7 +157,7 @@ class PaginationComponent extends React.Component<IPaginationComponentProps, any
<Grid container spacing={ 0 } className={ classes.root }>
<Grid item xs={ 12 }>
<div className={ `${classes.floatLeft} ${classes.bold} ${classes.textPagination}` }>
{ pageObj ? pageObj.totalElements : 0 } { displayName || 'items' }
<Number value={ pageObj ? pageObj.totalElements : 0 } /> { displayName || 'items' }
</div>
<Select
value={ pageObj ? pageObj.size : 10 }
......@@ -277,7 +277,7 @@ class PaginationComponent extends React.Component<IPaginationComponentProps, any
</Button>
</Hidden>
<Hidden implementation="css" only={ mobile }>
<span className={ classes.verticalAlign }>of { pageObj ? pageObj.totalPages : 0 } pages</span>
<span className={ classes.verticalAlign }>of <Number value={ pageObj ? pageObj.totalPages : 0 } /> pages</span>
</Hidden>
</div>
</Grid>
......
src/ui/pages/dataset/c/DatasetDisplay.tsx
View file @ 546bc6b6
......@@ -20,7 +20,6 @@ import { DatasetLink, DescriptorLink } from 'ui/catalog/Links';
import Summary from './Summary';
import LocationMap from './LocationMap';
import Button from 'material-ui/Button';
import Hidden from 'material-ui/Hidden';
import { Properties, PropertiesItem } from 'ui/catalog/Properties';
import Grid from 'material-ui/Grid';
import Divider from 'material-ui/Divider';
......@@ -225,36 +224,29 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
<Grid container spacing={ 0 }>
<Grid item xs={ 12 } md={ 8 } lg={ 9 } className="p-10">
<Section title="Dataset metadata">
<div className="pt-15 pb-15 pl-20 pr-20">
<h4 className="font-bold m-0">Creators</h4>
{ dataset.creators && dataset.creators.length > 0 &&
<div>
<div className="pt-15 pb-15 pl-20 pr-20">
<h4 className="font-bold m-0">Creators</h4>
</div>
<Divider/>
<Grid container spacing={ 0 } className="p-20">
<Grid item xs={ 12 }>
<Properties>
{ dataset.creators && dataset.creators.map((e: Creator, i) => (
<PropertiesItem title={ e.role } key={ e.id }>
<p><b>{ e.fullName }</b></p>
{ e.institutionalAffiliation && <p>{ e.institutionalAffiliation }</p> }
{ e.email && <div><a href={ `mailto:${e.email}` }>{ e.email }</a></div> }
</PropertiesItem>
)) }
</Properties>
</Grid>
</Grid>
<Divider/>
</div>
<Divider/>
<Grid container spacing={ 0 } className="p-20">
<Grid item xs={ 12 }>
{ dataset.creators && dataset.creators.map((e: Creator, i) => (
<Grid container spacing={ 0 } key={ i } className={ `${classes.dataContainer} ${classes.grayRowsOdd}` }>
<Grid item xs={ 12 } md={ 3 }>
<h3 className={ `font-bold ${classes.margin1} ${classes.gray} ${classes.grayTitleSmall}` }>
{ `${e.fullName}` }
</h3>
</Grid>
<Grid item xs={ 12 } md={ 4 } className={ `${classes.margin1} ${classes.gray}` }>
<a href={ `mailto:${e.email}` }
className={ `${classes.grayTitleA}` }>
{ e.email }
</a>
</Grid>
<Grid item xs={ 12 } md={ 5 } className={ `${classes.margin1} ${classes.gray}` }>
<p className={ `${classes.grayTitleSmall} ${classes.pdTop0}` }>
{ e.institutionalAffiliation }
</p>
</Grid>
</Grid>
))
}
</Grid>
</Grid>
<Divider/>
}
<div className="pt-15 pb-15 pl-20 pr-20">
<h4 className="font-bold m-0">Dataset use and licensing</h4>
</div>
......@@ -271,6 +263,7 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
</Properties>
</Grid>
}
<Divider/>
<div className="pt-15 pb-15 pl-20 pr-20">
<h4 className="font-bold m-0">
......@@ -280,32 +273,22 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
<Divider/>
<Grid container spacing={ 0 } className="p-20">
<Grid item xs={ 12 }>
<Properties>
{
dataset.repositoryFiles && dataset.repositoryFiles.map((e: RepositoryFile, i) => (
<Grid container spacing={ 0 } key={ i } className={ `${classes.dataContainer} ${classes.grayRowsEven}` }>
<Grid item xs={ 3 } className={ `${classes.dataName}` }>
<h3 className={ `${classes.gray} ${classes.grayTitleBig}` }>
{ e.title || 'Dataset file' }
</h3>
</Grid>
<Grid item xs={ 12 } md={ 12 } lg={ 9 } className={ `${classes.gray} ${classes.rightTextWrapper} ${classes.centerAlign}` }>
<Hidden implementation="css" mdDown>
{ e.originalFilename }
</Hidden>
<Hidden implementation="css" mdDown>
<a href={ `/proxy/api/v0/repository/download/${e.uuid}` }><Button raised component="span" className={ `${classes.buttonGreen} ${classes.button}` }>
Download
</Button></a>
</Hidden>
<Hidden implementation="css" mdUp>
<a href={ `/proxy/api/v0/repository/download/${e.uuid}` }><Button raised component="span" className={ `${classes.buttonGreen} ${classes.button}` }>
Download dataset
</Button></a>
</Hidden>
</Grid>
</Grid>
dataset.repositoryFiles && dataset.repositoryFiles.map((e: RepositoryFile) => (
<PropertiesItem key={ e.uuid } title={
<a href={ `/proxy/api/v0/repository/download/${e.uuid}` }>
<Button raised component="span" className={ `${classes.buttonGreen} ${classes.button}` }>
Download
</Button>
</a>
}>
<p>{ e.title || 'Dataset file' }</p>
<p>{ e.originalFilename }</p>
</PropertiesItem>
))
}
</Properties>
</Grid>
</Grid>
<Divider/>
......@@ -330,36 +313,6 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
</Grid>
</Grid>
<Divider/>
<div className="pt-15 pb-15 pl-20 pr-20">
<h4 className="font-bold m-0">Creators</h4>
</div>
<Divider/>
<Grid container spacing={ 0 } className="p-20">
<Grid item xs={ 12 }>
{ dataset.creators && dataset.creators.map((e: Creator, i) => (
<Grid container spacing={ 0 } key={ i } className={ `${classes.dataContainer} ${classes.grayRowsOdd}` }>
<Grid item xs={ 12 } md={ 3 }>
<h3 className={ `font-bold ${classes.margin1} ${classes.gray} ${classes.grayTitleSmall}` }>
{ `${e.fullName}` }
</h3>
</Grid>
<Grid item xs={ 12 } md={ 4 } className={ `${classes.margin1} ${classes.gray}` }>
<a href={ `mailto:${e.email}` }
className={ `${classes.grayTitleA}` }>
{ e.email }
</a>
</Grid>
<Grid item xs={ 12 } md={ 5 } className={ `${classes.margin1} ${classes.gray}` }>
<p className={ `${classes.grayTitleSmall} ${classes.pdTop0}` }>
{ e.institutionalAffiliation }
</p>
</Grid>
</Grid>
))
}
</Grid>
</Grid>
<Divider/>
<div className="pt-15 pb-15 pl-20 pr-20">
<h4 className="font-bold m-0">
Other Metadata
......@@ -396,7 +349,7 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
</Grid>
) }
{ dataset.descriptors && (
{ dataset.descriptors && dataset.descriptors.length > 0 && (
<Grid item xs={ 12 } md={ 12 } lg={ 12 } className="p-10">
<Section title="Traits observed">
<List>
......@@ -411,7 +364,7 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
</Grid>
) }
{ dataset.accessionIdentifiers && (
{ dataset.accessionIdentifiers && dataset.accessionIdentifiers.length > 0 && (
<Grid item xs={ 12 } md={ 12 } lg={ 12 } className="p-10">
<Section title="Accessions evaluated">
<div className="p-20">
......
Supports Markdown
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