Commit c8d94120 authored by Matija Obreza's avatar Matija Obreza
Browse files

Merge branch '220-display-number-of-accessions' into 'master'

Display number of accessions

Closes #220

See merge request genesys-pgr/genesys-ui!230
parents 8f8e0c6d 8092700b
......@@ -16,7 +16,6 @@ import ContentHeader from 'ui/common/heading/ContentHeader';
import Loading from 'ui/common/Loading';
import PagedLoader from 'ui/common/PagedLoader';
import PrettyFilters from 'ui/common/filter/PrettyFilters';
import PaginationComponent from 'ui/common/pagination';
import AccessionCard from 'accessions/ui/c/AccessionCard';
import Tabs, { Tab } from 'ui/common/Tabs';
import AccessionFilters from './c/Filters';
......@@ -55,13 +54,6 @@ class BrowsePage extends BrowsePageTemplate<Accession> {
}>
<PageTitle title={ t('accessions.public.p.browse.title') }/>
<ContentHeader title={ t('accessions.public.p.browse.title') } subTitle={ t('accessions.public.p.browse.subTitle') } />
<PaginationComponent
pageObj={ paged }
onSortChange={ this.onSortChange }
displayName="accessions.common.modelName"
sortOptions={ Accession.SORT_OPTIONS }
infinite
/>
<Tabs
tab={ currentTab }
actions={
......@@ -91,6 +83,8 @@ class BrowsePage extends BrowsePageTemplate<Accession> {
prefix="accessions"
filterObj={ paged && paged.filter || {} }
onSubmit={ this.myApplyFilters }
displayName="accessions.common.modelName"
amount={ paged && paged.totalElements }
/>
<PageContents className="pt-1rem container-spacing-horizontal">
{ ! paged ? <Loading /> :
......
......@@ -287,6 +287,8 @@ class BrowsePage extends React.Component<IMapPageProps, any> {
prefix="accessions"
filterObj={ mapInfo && mapInfo.filter || {} }
onSubmit={ this.myApplyFilters }
displayName="accessions.common.modelName"
amount={ mapInfo && mapInfo.accessionCount }
/>
<div className={ `${classes.leafletContainer} ${trackClickPos && classes.crosshair}` }>
{ mapInfo && typeof window !== 'undefined' &&
......
......@@ -155,6 +155,8 @@ class BrowsePage extends React.Component<IOverviewPageProps, any> {
prefix="accessions"
filterObj={ overviewWrapper && overviewWrapper.filter || {} }
onSubmit={ applyOverviewFilters }
displayName="accessions.common.modelName"
amount={ overviewWrapper && overviewWrapper.accessionCount }
/>
{ ! overview ? <Loading /> :
<div>
......
......@@ -8,6 +8,7 @@ class AccessionOverview {
public filterCode: string;
public filter: AccessionFilter;
public overview: any;
public accessionCount: number;
}
......
......@@ -32,7 +32,7 @@ class PropertiesCard extends React.Component<IBundledProps, any> {
{ topSection }
</Grid>
<Grid container justify={ 'center' } spacing={ 16 }>
<Grid item md={ children ? 7 : 12 } sm={ 12 }>
<Grid item md={ children ? 7 : 12 } xs={ 12 }>
<Properties>
{
propertiesList.map((property, i) => (
......
......@@ -40,17 +40,48 @@ interface IPrettyFiltersProps {
labels: Map<string, string>;
lookups: object;
prefix: string;
displayName?: string;
amount?: number;
}
const styles = (theme) => ({
root: {
display: 'flex',
flexDirection: 'row' as 'row',
},
withPagination: {
padding: '0 202px 0 12px',
[theme.breakpoints.down('sm')]: {
padding: '0 12px',
justifyContent: 'space-between' as 'space-between',
},
},
chip: {
margin: theme.spacing.unit / 2,
},
text: {
fontWeight: 'bold' as 'bold',
alignSelf: 'center' as 'center',
paddingRight: '10px',
lineHeight: '48px',
width: '180px',
flexShrink: 0,
[theme.breakpoints.down('sm')]: {
width: 'auto' as 'auto',
},
},
chipArea: {
flexGrow: 2,
display: 'flex',
justifyContent: 'center' as 'center',
flexWrap: 'wrap' as 'wrap',
padding: theme.spacing.unit / 2,
},
chip: {
margin: theme.spacing.unit / 2,
chipAreaWithPagination: {
[theme.breakpoints.down('sm')]: {
flexGrow: 1,
justifyContent: 'flex-end' as 'flex-end',
},
},
});
......@@ -192,24 +223,33 @@ class PrettyFilters extends React.Component<IPrettyFiltersProps, any> {
}
public render() {
const { classes, lookups, prefix, t, labels } = this.props;
const { classes, lookups, prefix, t, labels, amount, displayName } = this.props;
const { chipData } = this.state;
const dataArr = Object.getOwnPropertyNames(chipData);
return dataArr.length > 0 && (
<Paper square className={ classes.root }>
{ dataArr.map((key) => {
return (
<Chip
key={ key }
label={ getLabelName(key, chipData[key], lookups, prefix, t, labels) }
onDelete={ this.handleDelete(key) }
className={ classes.chip }
/>
);
}) }
const withAmount = amount !== undefined && amount !== null;
return (dataArr.length > 0 || withAmount) ? (
<Paper square className={ `${classes.root} ${withAmount ? classes.withPagination : ''}` }>
{ withAmount &&
<div className={ classes.text }>
{ t(amount < 10000 ? 'common:paginate.numberOfItems' : 'common:paginate.estimatedNumberOfItems',
{ count: amount, what: t(displayName || 'common:label.item', { count: amount }) }) }
</div>
}
<div className={ `${classes.chipArea} ${withAmount ? classes.chipAreaWithPagination : ''}` }>
{ dataArr.map((key) => {
return (
<Chip
key={ key }
label={ getLabelName(key, chipData[key], lookups, prefix, t, labels) }
onDelete={ this.handleDelete(key) }
className={ classes.chip }
/>
);
}) }
</div>
</Paper>
);
) : null;
}
}
......
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