import * as React from 'react'; import { connect } from 'react-redux'; import { bindActionCreators } from 'redux'; import { parse } from 'query-string'; import { translate } from 'react-i18next'; import * as _ from 'lodash'; // Actions import { applyFilters, updateRoute, applyOverviewFilters, loadAccessionsOverviewPage } from 'accessions/actions/public'; import { showSnackbar } from 'actions/snackbar'; // Models import Accession from 'model/accession/Accession'; import FilteredPage, { IPageRequest } from 'model/FilteredPage'; import AccessionFilter from 'model/accession/AccessionFilter'; import AccessionOverview from 'model/accession/AccessionOverview'; // UI import PageLayout, { PageContents } from 'ui/layout/PageLayout'; import GridContainer from 'ui/layout/GridContainer'; import ContentHeader from 'ui/common/heading/ContentHeader'; import Loading from 'ui/common/Loading'; import Tabs, { Tab } from 'ui/common/Tabs'; import PropertiesCard from 'ui/common/PropertiesCard'; import PrettyFilters from 'ui/common/filter/PrettyFilters'; import Number from 'ui/common/Number'; import PageTitle from 'ui/common/PageTitle'; import AccessionFilters from './c/Filters'; // TODO only for demo import Button from '@material-ui/core/Button'; interface IOverviewPageProps extends React.ClassAttributes { overview: AccessionOverview; paged: FilteredPage; filterCode: string; showSnackbar: (snack: string) => void; applyOverviewFilters: (filters: string | AccessionFilter, page?: IPageRequest) => void; updateRoute: (paged: FilteredPage, path?: string) => void; currentTab: string; t: any; } /* tslint:disable */ class BrowsePage extends React.Component { protected static needs = [ ({ search, params: { filterCode } }) => { const qs = parse(search || ''); return applyOverviewFilters(filterCode || '', FilteredPage.fromQueryString(qs)); }, ]; constructor(props: IOverviewPageProps, context: any) { super(props, context); } public componentWillMount() { const { overview, filterCode, applyOverviewFilters } = this.props; if (! overview || filterCode !== overview.filterCode) { applyOverviewFilters(filterCode || ''); } } public componentWillReceiveProps(nextProps) { const { filterCode: prevCode, overview: prevOverview } = this.props; const { filterCode, applyOverviewFilters, overview } = nextProps; if (prevOverview && overview && _.isEqual(overview.filter, prevOverview.filter)) { if (prevCode !== filterCode) { applyOverviewFilters(filterCode || ''); } } } private addTerm = (property, term) => { const { overview, applyOverviewFilters, showSnackbar } = this.props; const updatedFilter: AccessionFilter = { ...overview.filter }; switch (property) { case 'crop': case 'sampStat': case 'holder.code': case 'holder.country.iso3': case 'origin.iso3': case 'taxa.genus': case 'taxa.species': case 'storage': _.set(updatedFilter, property, _.concat(_.get(updatedFilter, property), term).filter(x => x != null)); break; case 'sgsv': case 'available': case 'mlsStatus': _.set(updatedFilter, property, term === '1' ? true : false); break; // set default: _.set(updatedFilter, property, term); } // console.log(`Updated filter for ${property} +${term}`, updatedFilter); showSnackbar('Applying filters...'); applyOverviewFilters(updatedFilter); }; public render() { const { filterCode, currentTab, applyOverviewFilters, overview: overviewWrapper, t } = this.props; const overview = overviewWrapper && overviewWrapper.overview || null; const overviewKeys = ['institute.code', 'institute.country.code3', 'cropName', 'crop.shortName', 'sampStat', 'taxonomy.genus', 'taxonomy.genusSpecies', 'countryOfOrigin.code3', 'donorCode', 'mlsStatus', 'available', 'duplSite', 'sgsv', 'storage', 'breederCode']; const skipTerms = ['Other', 'Missing', 'Not specified']; const overviewsTerms = new Map(); if (overview) { overviewKeys.forEach((key) => { const overviewEl = overview[key]; const terms = [].concat(overviewEl.terms, {term: 'Other', count: overviewEl.other}, {term: 'Not specified', count: overviewEl.missing}); overviewsTerms.set(key, terms); }); } const filterByTerm = (property, term, count) => { return ( skipTerms.indexOf(term.term) === -1 ? ( this.addTerm(property, term.term) }>) : ( count ) ); }; return ( } withFooter > } > { t('accessions.tab.data') } { t('accessions.tab.overview') } { t('accessions.tab.map') } { ! overview ? :
{ overviewsTerms && overviewsTerms.get('institute.code') && overviewsTerms.get('institute.code').length > 2 && ({title: term.term, value: filterByTerm('holder.code', term, term.count) })) } title={ t(`accessions.common.overview.institute code`) } small propertyItemProps={ { numeric: true } } /> } { overviewsTerms && overviewsTerms.get('institute.country.code3') && overviewsTerms.get('institute.country.code3').length > 2 && ({title: term.term, value: filterByTerm('holder.country.iso3', term, term.count) })) } title={ t(`accessions.common.overview.institute country code3`) } small propertyItemProps={ { numeric: true } } /> } { overviewsTerms && overviewsTerms.get('crop.shortName') && overviewsTerms.get('crop.shortName').length > 2 && ({title: term.term, value: filterByTerm('crop', term, term.count)})) } title={ t(`accessions.common.overview.crop shortName`) } small propertyItemProps={ { numeric: true } } /> } { overviewsTerms && overviewsTerms.get('cropName') && overviewsTerms.get('cropName').length > 2 && ({title: term.term, value: term.count })) } title={ t(`accessions.common.overview.cropName`) } small propertyItemProps={ { numeric: true } } /> } { overviewsTerms && overviewsTerms.get('taxonomy.genus') && overviewsTerms.get('taxonomy.genus').length > 2 && ({title: term.term, value: filterByTerm('taxa.genus', term, term.count) })) } title={ t(`accessions.common.overview.taxonomy genus`) } small propertyItemProps={ { numeric: true } } /> } { overviewsTerms && overviewsTerms.get('taxonomy.genusSpecies') && overviewsTerms.get('taxonomy.genusSpecies').length > 2 && ({title: term.term, value: term.count })) } title={ t(`accessions.common.overview.taxonomy genusSpecies`) } small propertyItemProps={ { numeric: true } } /> } { overviewsTerms && overviewsTerms.get('sampStat') && overviewsTerms.get('sampStat').length > 2 && term.term !== 'other').map((term) => ({title: t([`accessions.common.sampleStatus.${term.term}`, `accessions.common.overview.${term.term}`]), value: filterByTerm('sampStat', term, term.count) })) } title={ t(`accessions.common.overview.sampStat`) } small propertyItemProps={ { numeric: true } } /> } { overviewsTerms && overviewsTerms.get('storage') && overviewsTerms.get('storage').length > 2 && ({title: t([`accessions.common.storage.${term.term}`, `accessions.common.overview.${term.term}`]), value: filterByTerm('storage', term, term.count) })) } title={ t(`accessions.common.overview.storage`) } small propertyItemProps={ { numeric: true } } /> } { overviewsTerms && overviewsTerms.get('countryOfOrigin.code3') && overviewsTerms.get('countryOfOrigin.code3').length > 2 && ({title: term.term, value: filterByTerm('origin.iso3', term, term.count)})) } title={ t(`accessions.common.overview.countryOfOrigin code3`) } small propertyItemProps={ { numeric: true } } /> } { overviewsTerms && overviewsTerms.get('donorCode') && overviewsTerms.get('donorCode').length > 2 && ({title: term.term, value: term.count })) } title={ t(`accessions.common.overview.donorCode`) } small propertyItemProps={ { numeric: true } } /> } { overviewsTerms && overviewsTerms.get('duplSite') && overviewsTerms.get('duplSite').length > 2 && ({title: term.term, value: term.count })) } title={ t(`accessions.common.overview.duplSite`) } small propertyItemProps={ { numeric: true } } /> } { overviewsTerms && overviewsTerms.get('breederCode') && overviewsTerms.get('breederCode').length > 2 && ({title: term.term, value: term.count })) } title={ t(`accessions.common.overview.breederCode`) } small propertyItemProps={ { numeric: true } } /> } { overviewsTerms && overviewsTerms.get('mlsStatus') && overviewsTerms.get('mlsStatus').length > 2 && ({title: t([`accessions.common.mlsStatus.${term.term}`, `accessions.common.overview.${term.term}`]), value: filterByTerm('mlsStatus', term, term.count) })) } title={ t(`accessions.common.overview.mlsStatus`) } small propertyItemProps={ { numeric: true } } /> } { overviewsTerms && overviewsTerms.get('available') && overviewsTerms.get('available').length > 2 && ({title: t([`accessions.common.available.${term.term}`, `accessions.common.overview.${term.term}`]), value: filterByTerm('available', term, term.count) })) } title={ t(`accessions.common.overview.available`) } small propertyItemProps={ { numeric: true } } /> } { overviewsTerms && overviewsTerms.get('historic') && overviewsTerms.get('historic').length > 2 && ({title: t([`accessions.common.historic.${term.term}`, `accessions.common.overview.${term.term}`]), value: filterByTerm('historic', term, term.count) })) } title={ t(`accessions.common.overview.historic`) } small propertyItemProps={ { numeric: true } } /> } { overviewsTerms && overviewsTerms.get('sgsv') && overviewsTerms.get('sgsv').length > 2 && ({title: t([`accessions.common.sgsv.${term.term}`, `accessions.common.overview.${term.term}`]), value: filterByTerm('sgsv', term, term.count) })) } title={ t(`accessions.common.overview.sgsv`) } small propertyItemProps={ { numeric: true } } /> }
}
); } } const mapStateToProps = (state, ownProps) => ({ paged: state.accessions.public.paged || undefined, overview: state.accessions.public.overview, filterCode: ownProps.match.params.filterCode || '', currentTab: ownProps.match.params.tab || 'overview', // current tab, or ownProps.location.pathname }); const mapDispatchToProps = (dispatch) => bindActionCreators({ showSnackbar, applyFilters, applyOverviewFilters, loadAccessionsOverviewPage, updateRoute, }, dispatch); export default connect(mapStateToProps, mapDispatchToProps)(translate()(BrowsePage));