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