Commit 2db7b35d authored by Matija Obreza's avatar Matija Obreza
Browse files

Minor UI fixes

- Overview page translations and layout
- PropertiesCard styles
- DatasetService rematchAccessions URL updated
parent b0ef2186
......@@ -422,11 +422,21 @@
"available": {
"true": "Available for distribution",
"false": "Not available for distribution",
"1": "Available for distribution",
"0": "Not available for distribution",
"null": "Availability not provided"
},
"sgsv": {
"true": "Backed up in SGSV",
"false": "Not in SGSV",
"1": "Backed up in SGSV",
"0": "Not in SGSV"
},
"mlsStatus": {
"true": "Accession is part of the Multi-lateral system of ITPGRFA",
"false": "Not declared in the Multi-lateral system of ITPGRFA ",
"false": "Not declared in the Multi-lateral system of ITPGRFA",
"1": "Accession is part of the Multi-lateral system of ITPGRFA",
"0": "Not declared in the Multi-lateral system of ITPGRFA",
"null": "Status not provided"
},
"coll": {
......@@ -481,6 +491,8 @@
"999": "Other"
},
"overview": {
"Other": "Other",
"Not specified": "Not specified",
"institute code": "Holding Institute",
"institute country code3": "Country of holding institute",
"crop shortName": "Crop",
......
......@@ -96,11 +96,21 @@
"available": {
"true": "Available for distribution",
"false": "Not available for distribution",
"1": "Available for distribution",
"0": "Not available for distribution",
"null": "Availability not provided"
},
"sgsv": {
"true": "Backed up in SGSV",
"false": "Not in SGSV",
"1": "Backed up in SGSV",
"0": "Not in SGSV"
},
"mlsStatus": {
"true": "Accession is part of the Multi-lateral system of ITPGRFA",
"false": "Not declared in the Multi-lateral system of ITPGRFA ",
"false": "Not declared in the Multi-lateral system of ITPGRFA",
"1": "Accession is part of the Multi-lateral system of ITPGRFA",
"0": "Not declared in the Multi-lateral system of ITPGRFA",
"null": "Status not provided"
},
"coll": {
......@@ -155,6 +165,8 @@
"999": "Other"
},
"overview": {
"Other": "Other",
"Not specified": "Not specified",
"institute code": "Holding Institute",
"institute country code3": "Country of holding institute",
"crop shortName": "Crop",
......
......@@ -5,7 +5,7 @@ import { translate } from 'react-i18next';
import { withStyles } from '@material-ui/core/styles';
// Actions
import { loadAccession } from 'accessions/actions/public';
import { loadAccession, applyFilters } from 'accessions/actions/public';
import {addAccessionToMyList, removeAccessionFromMyList} from 'list/actions/public';
// Models
......@@ -13,7 +13,6 @@ import AccessionDetails from 'model/accession/AccessionDetails';
import RepositoryFile from 'model/repository/RepositoryFile';
// UI
import { Link } from 'react-router-dom';
import PrettyDate from 'ui/common/time/PrettyDate';
import PageLayout, { PageContents, MainSection, PageSection } from 'ui/layout/PageLayout';
import ContentHeader from 'ui/common/heading/ContentHeader';
......@@ -59,6 +58,7 @@ interface IBrowsePageProps {
accessions: any;
addAccessionToMyList: any;
removeAccessionFromMyList: any;
applyFilters: any;
}
class BrowsePage extends React.Component<IBrowsePageProps, any> {
......@@ -95,6 +95,14 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> {
}
}
private applyFilterForInstituteSpecies = () => {
const { accession: {details: accession}, applyFilters } = this.props;
const filter = {holder: {code: [ accession.institute.code ]}, taxa: { genus: [ accession.taxonomy.genus ], species: [ accession.taxonomy.species ] }};
applyFilters(filter);
}
public render() {
const { t, error, uuid, doi, accessions, classes } = this.props;
const { details: accession, pdci, datasets, subsets, files, imageGallery } = this.props.accession ?
......@@ -185,7 +193,7 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> {
<PropertiesItem title={ t('accessions.common.species') }>
{ accession.taxonomy.species }
{ '' }
<Link to={ '/a' }>View <i>{ `${accession.taxonomy.genus} ${accession.taxonomy.species}` }</i> at { accession.institute.code }</Link>
<a onClick={ this.applyFilterForInstituteSpecies }>View <i>{ `${accession.taxonomy.genus} ${accession.taxonomy.species}` }</i> at { accession.institute.code }</a>
</PropertiesItem>
<PropertiesItem title={ t('accessions.public.p.display.scientificName') }><SciName taxa={ accession.taxonomy.taxonNameHtml } /></PropertiesItem>
{ accession.crop && <PropertiesItem title={ t('accessions.public.p.display.cropName') }><CropChips crops={ accession.crop.shortName } /></PropertiesItem> }
......@@ -311,6 +319,7 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({
addAccessionToMyList,
removeAccessionFromMyList,
loadAccession,
applyFilters,
}, dispatch);
......
......@@ -66,6 +66,7 @@ class BrowsePage extends React.Component<IOverviewPageProps, any> {
const updatedFilter: AccessionFilter = { ...overview.filter };
switch (property) {
case 'crop':
case 'sampStat':
case 'holder.code':
case 'holder.country.iso3':
......@@ -148,50 +149,50 @@ class BrowsePage extends React.Component<IOverviewPageProps, any> {
<PageContents className="pt-1rem">
<GridContainer>
{ overviewsTerms && overviewsTerms.get('institute.code') && overviewsTerms.get('institute.code').length > 2 &&
<PropertiesCard propertiesList={ overviewsTerms.get('institute.code').map((term) => ({title: term.term, value: filterByTerm('holder.code', term, term.count) })) } title={ t(`accessions.common.overview.institute code`) } small/>
<PropertiesCard propertiesList={ overviewsTerms.get('institute.code').map((term) => ({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 &&
<PropertiesCard propertiesList={ overviewsTerms.get('institute.country.code3').map((term) => ({title: term.term, value: filterByTerm('holder.country.iso3', term, term.count) })) } title={ t(`accessions.common.overview.institute country code3`) } small/>
<PropertiesCard propertiesList={ overviewsTerms.get('institute.country.code3').map((term) => ({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 &&
<PropertiesCard propertiesList={ overviewsTerms.get('crop.shortName').map((term) => ({title: term.term, value: filterByTerm('crop', term, term.count)})) } title={ t(`accessions.common.overview.crop shortName`) } small/>
<PropertiesCard propertiesList={ overviewsTerms.get('crop.shortName').map((term) => ({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 &&
<PropertiesCard propertiesList={ overviewsTerms.get('cropName').map((term) => ({title: term.term, value: term.count })) } title={ t(`accessions.common.overview.cropName`) } small/>
<PropertiesCard propertiesList={ overviewsTerms.get('cropName').map((term) => ({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 &&
<PropertiesCard propertiesList={ overviewsTerms.get('taxonomy.genus').map((term) => ({title: term.term, value: filterByTerm('taxa.genus', term, term.count) })) } title={ t(`accessions.common.overview.taxonomy genus`) } small/>
<PropertiesCard propertiesList={ overviewsTerms.get('taxonomy.genus').map((term) => ({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 &&
<PropertiesCard propertiesList={ overviewsTerms.get('taxonomy.genusSpecies').map((term) => ({title: term.term, value: term.count })) } title={ t(`accessions.common.overview.taxonomy genusSpecies`) } small/>
<PropertiesCard propertiesList={ overviewsTerms.get('taxonomy.genusSpecies').map((term) => ({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 &&
<PropertiesCard propertiesList={ overviewsTerms.get('sampStat')
.filter((term) => term.term !== 'other').map((term) => ({title: t(`accessions.common.sampleStatus.${term.term}`), value: filterByTerm('sampStat', term, term.count) })) } title={ t(`accessions.common.overview.sampStat`) } small/>
.filter((term) => 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 &&
<PropertiesCard propertiesList={ overviewsTerms.get('storage').map((term) => ({title: t(`accessions.common.storage.${term.term}`), value: filterByTerm('storage', term, term.count) })) } title={ t(`accessions.common.overview.storage`) } small/>
<PropertiesCard propertiesList={ overviewsTerms.get('storage').map((term) => ({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 &&
<PropertiesCard propertiesList={ overviewsTerms.get('countryOfOrigin.code3').map((term) => ({title: term.term, value: filterByTerm('origin.iso3', term, term.count)})) } title={ t(`accessions.common.overview.countryOfOrigin code3`) } small/>
<PropertiesCard propertiesList={ overviewsTerms.get('countryOfOrigin.code3').map((term) => ({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 &&
<PropertiesCard propertiesList={ overviewsTerms.get('donorCode').map((term) => ({title: term.term, value: term.count })) } title={ t(`accessions.common.overview.donorCode`) } small/>
<PropertiesCard propertiesList={ overviewsTerms.get('donorCode').map((term) => ({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 &&
<PropertiesCard propertiesList={ overviewsTerms.get('duplSite').map((term) => ({title: term.term, value: term.count })) } title={ t(`accessions.common.overview.duplSite`) } small/>
<PropertiesCard propertiesList={ overviewsTerms.get('duplSite').map((term) => ({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 &&
<PropertiesCard propertiesList={ overviewsTerms.get('breederCode').map((term) => ({title: term.term, value: term.count })) } title={ t(`accessions.common.overview.breederCode`) } small/>
<PropertiesCard propertiesList={ overviewsTerms.get('breederCode').map((term) => ({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 &&
<PropertiesCard propertiesList={ overviewsTerms.get('mlsStatus').map((term) => ({title: term.term === '1' ? 'Yes' : 'No', value: filterByTerm('mlsStatus', term, term.count) })) } title={ t(`accessions.common.overview.mlsStatus`) } small/>
<PropertiesCard propertiesList={ overviewsTerms.get('mlsStatus').map((term) => ({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 &&
<PropertiesCard propertiesList={ overviewsTerms.get('available').map((term) => ({title: term.term === '1' ? 'Yes' : 'No', value: filterByTerm('available', term, term.count) })) } title={ t(`accessions.common.overview.available`) } small/>
<PropertiesCard propertiesList={ overviewsTerms.get('available').map((term) => ({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('sgsv') && overviewsTerms.get('sgsv').length > 2 &&
<PropertiesCard propertiesList={ overviewsTerms.get('sgsv').map((term) => ({title: term.term === '1' ? 'Yes' : 'No', value: filterByTerm('sgsv', term, term.count) })) } title={ t(`accessions.common.overview.sgsv`) } small/>
<PropertiesCard propertiesList={ overviewsTerms.get('sgsv').map((term) => ({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 } } />
}
</GridContainer>
</PageContents>
......
......@@ -122,7 +122,7 @@ class PartnerPage extends React.Component<IPartnerPageProps, any> {
) }
{ partnerInstitutes && partnerInstitutes.content && partnerInstitutes.content.length > 0 && (
<PropertiesItem title={ t('partners.common.wiewsCodes') }>
{ partnerInstitutes.content.map((institute) => (
{ partnerInstitutes.content.sort((a, b) => a.code.localeCompare(b.code)).map((institute) => (
<div key={ institute.code }>
<InstituteLink to={ institute }><b>{ institute.code }</b> { institute.fullName }</InstituteLink>
{ ` ` }
......@@ -133,7 +133,7 @@ class PartnerPage extends React.Component<IPartnerPageProps, any> {
) }
{ partner.countryCodes.length > 0 && (
<PropertiesItem title={ t('partners.common.countries') }>
{ partner.countryCodes.map((countryCode) => (
{ partner.countryCodes.sort().map((countryCode) => (
<div key={ countryCode }><CountryLink country={ countryCode } /></div>
)) }
</PropertiesItem>
......
......@@ -18,7 +18,7 @@ const URL_CREATE_DATASET = `/api/v1/dataset/create`;
const URL_REVIEW_DATASET = `/api/v1/dataset/for-review`;
const URL_DATASET_LIST = `/api/v1/dataset/list`;
const URL_MY_DATASETS = `/api/v1/dataset/list-mine`;
const URL_REMATCH_DATASET_ACCESSIONS = UrlTemplate.parse(`/api/v1/dataset/rematchAccessions/{uuid},{version}`);
const URL_REMATCH_DATASET_ACCESSIONS = UrlTemplate.parse(`/api/v1/dataset/rematch-accessions/{uuid},{version}`);
const URL_REJECT_DATASET = `/api/v1/dataset/reject`;
const URL_REMOVE_DESCRIPTORS = UrlTemplate.parse(`/api/v1/dataset/remove-descriptors/{uuid},{version}`);
const URL_UPDATE_DESCRIPTORS = UrlTemplate.parse(`/api/v1/dataset/set-descriptors/{uuid},{version}`);
......
......@@ -28,21 +28,24 @@ const styles = (theme) => ({
/* tslint:enable */
},
propertiesValue: {
overflowX: 'hidden' as 'hidden',
display: 'flex' as 'flex',
flexWrap: 'wrap' as 'wrap',
alignItems: 'center' as 'center',
fontSize: '1rem',
padding: '.7rem 1rem',
// display: 'flex' as 'flex',
// flexWrap: 'wrap' as 'wrap',
// alignItems: 'center' as 'center',
fontSize: '1rem',
padding: '.7rem 1rem',
},
propertiesValueSmall: {
alignItems: 'flex-end' as 'flex-end',
[theme.breakpoints.down('sm')]: {
justifyContent: 'flex-end' as 'flex-end',
},
display: 'flex' as 'flex',
overflowX: 'hidden' as 'hidden',
alignItems: 'flex-end' as 'flex-end',
[theme.breakpoints.down('sm')]: {
justifyContent: 'flex-end' as 'flex-end',
},
},
propertiesValueNumeric: {
justifyContent: 'flex-end' as 'flex-end',
display: 'flex' as 'flex',
overflowX: 'hidden' as 'hidden',
justifyContent: 'flex-end' as 'flex-end',
},
});
......
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