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

Overviews: Use global filter and updated HTML layout

parent 382066be
......@@ -28,9 +28,8 @@
"datasets": "Datasets",
"subsets": "Subsets",
"overview": {
"title": "Accession overview",
"subTitle": "Summary information about selected accessions",
"about": "About",
"title": "Collection overview",
"about": "About {{count, number}} {{what, lowercase}}",
"total": "Total",
"Other": "Other",
"Not specified": "Not specified",
......
......@@ -56,22 +56,7 @@ class AccessionOverviewSection extends React.Component<IAccessionOverviewPagePro
});
return (
<div className="row pl-5">
{overviewsTerms && overviewsTerms.get('institute.code') &&
<PropertiesCard
propertiesList={overviewsTerms.get('institute.code')}
title={t(`accession.overview.institute code`)}
propertyItemProps={{numeric: true}}
/>
}
{overviewsTerms && overviewsTerms.get('institute.country.code3') &&
<PropertiesCard
propertiesList={overviewsTerms.get('institute.country.code3')}
countyCodes={countryCodes}
title={t(`accession.overview.institute country code3`)}
propertyItemProps={{numeric: true}}
/>
}
<div className="row">
{overviewsTerms && overviewsTerms.get('crop.shortName') &&
<PropertiesCard
propertiesList={overviewsTerms.get('crop.shortName')}
......@@ -201,6 +186,21 @@ class AccessionOverviewSection extends React.Component<IAccessionOverviewPagePro
propertyItemProps={{numeric: true}}
/>
}
{overviewsTerms && overviewsTerms.get('institute.code') &&
<PropertiesCard
propertiesList={overviewsTerms.get('institute.code')}
title={t(`accession.overview.institute code`)}
propertyItemProps={{numeric: true}}
/>
}
{overviewsTerms && overviewsTerms.get('institute.country.code3') &&
<PropertiesCard
propertiesList={overviewsTerms.get('institute.country.code3')}
countyCodes={countryCodes}
title={t(`accession.overview.institute country code3`)}
propertyItemProps={{numeric: true}}
/>
}
</div>
);
}
......
......@@ -25,10 +25,10 @@ export default class App extends React.Component<IAppProps, any> {
<div>
<Switch>
<Route path="/a/:uuid" exact render={ (props) => <AccessionDetails { ...props } apiUrl={ apiUrl } /> } />
<Route path="/" exact render={ (props) => <AccessionList { ...props } filter={ this.props.filter }/> }/>
<Route path="/" exact render={ (props) => <AccessionList { ...props } filter={ this.props.filter } /> }/>
<Route path="/api-info" exact component={ ApiInfoPage }/>
<Route path="/cart/" exact component={ CartPage }/>
<Route path="/overview" exact component={ OverviewPage }/>
<Route path="/overview" exact render={ (props) => <OverviewPage { ...props } filter={ this.props.filter } /> }/>
<Route component={ NotFound }/>
</Switch>
......
......@@ -8,8 +8,10 @@ import { AccessionService } from '@genesys/client/service';
// UI
import AccessionOverviewSection from './AccessionOverviewSection';
import AccessionFilter from '@genesys/client/model/accession/AccessionFilter';
interface IOverviewPageProps extends React.ClassAttributes<any>, WithTranslation {
filter: AccessionFilter;
location: any;
}
......@@ -25,7 +27,7 @@ class BrowsePage extends React.Component<IOverviewPageProps, any> {
private loadData = (pageR: IPageRequest): Promise<any> => {
return AccessionService
.listOverview('', pageR)
.listOverview(this.props.filter, pageR)
.then((data) => {
console.log('overview: ', data);
this.setState({ overviewData: data });
......@@ -53,18 +55,11 @@ class BrowsePage extends React.Component<IOverviewPageProps, any> {
<div>
{ overviewData &&
<>
<div className="text-white bg-info px-4 py-2">
<h1>{t('accession.overview.title')}</h1>
<h3>{t('accession.overview.subTitle')}</h3>
</div>
<div className="px-4 py-2 mb-5">
<h4 className="d-flex justify-content-between align-items-center">
{ `${t('accession.overview.about')} ${t('estimatedNumberOfItems', { count: overviewData.accessionCount, what: t('accession.model_plural', { count: overviewData.accessionCount }) })} `}
</h4>
</div>
<AccessionOverviewSection
overview={ overviewData && overviewData.overview }
/>
<p>
{ t('accession.overview.about', { count: overviewData.accessionCount, what: t('accession.model_plural', { count: overviewData.accessionCount }) }) }
</p>
<AccessionOverviewSection overview={ overviewData && overviewData.overview } />
</>
}
</div>
......
......@@ -37,13 +37,11 @@ class PropertiesCard extends React.Component<IProperty, any> {
}
return (
<div className="col-sm-12 col-md-12 col-xl-6 pl-0 pr-5 pb-5">
<div className="card col-sm-12 col-md-12 col-xl-12 p-0 h-100">
<div className="card-header">
<span className="card-title">{title}</span>
</div>
<div className="card-body">
<div style={{height: "400px", width: "100%"}}>
<div className="col-sm-12 col-md-12 col-xl-6 pb-5">
<div className="col-sm-12 col-md-12 col-xl-12 p-0 h-100">
<h4>{title}</h4>
<div className="">
<div style={{height: "300px", width: "100%"}}>
<TreeMap style={{height: "100%"}} data={{
name: t("accession.overview.total"),
children: propertiesList,
......
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