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

Updated Accession, Subset and Institute display

- <Markdown supports "firstParagraph" flag
parent 73434892
......@@ -4,6 +4,7 @@
*/
import {PublishState} from 'model/common.model';
import Creator from 'model/Creator';
import FaoInstitute from 'model/FaoInstitute';
class Subset {
public accessionCount: number;
......@@ -24,6 +25,7 @@ class Subset {
public uuid: string;
public version: number;
public wiewsCode: string;
public institute: FaoInstitute;
public static DEFAULT_SORT = {
property: 'title',
......
......@@ -6,11 +6,14 @@ interface IMarkdownTextProps extends React.HTMLProps<HTMLElement> {
source: string;
basic?: boolean;
rows?: number;
firstParagraph?: boolean;
}
function Markdown({source, rows, style, className, basic}: IMarkdownTextProps) {
function Markdown({source, rows, style, className, basic, firstParagraph}: IMarkdownTextProps) {
if (source) {
const eol = source.indexOf('\n');
const text = firstParagraph && eol > 0 ? source.substring(0, eol) : source;
const mdStyle: object = rows ? { maxHeight: `${rows + 1.5}rem`, overflow: 'hidden', marginBottom: '1.429rem' } : {};
if (basic) {
......@@ -18,7 +21,7 @@ function Markdown({source, rows, style, className, basic}: IMarkdownTextProps) {
return (
<div style={ { ...style, ...mdStyle } } className={ `markdown-basic ${className ? className : ''}` }>
<MarkdownComponent skipHtml unwrapDisallowed allowedTypes={ [ 'strong', 'emphasis'] }
className="markdown-basic" source={ source } />
className="markdown-basic" source={ text } />
</div>
);
......@@ -26,13 +29,13 @@ function Markdown({source, rows, style, className, basic}: IMarkdownTextProps) {
if (style) {
return (
<div style={ { ...style, ...mdStyle } } className={ `${className ? className : ''}` }>
<MarkdownComponent skipHtml className="markdown" source={ source } />
<MarkdownComponent skipHtml className="markdown" source={ text } />
</div>
);
} else {
return (
<div style={ { ...style, ...mdStyle } } className={ `${className ? className : ''}` }>
<MarkdownComponent skipHtml className="markdown" source={ source } />
<MarkdownComponent skipHtml className="markdown" source={ text } />
</div>
);
}
......
import * as React from 'react';
import Subset from 'model/Subset';
import { SubsetLink } from 'ui/genesys/Links';
import { SubsetLink, InstituteLink } from 'ui/genesys/Links';
import Card, {CardHeader, CardContent, CardActions} from 'ui/common/Card';
import Markdown from 'ui/common/markdown';
import Number from 'ui/common/Number';
import { Properties, PropertiesItem } from 'ui/common/Properties';
const SubsetCard = ({subset, ...other}: { subset: Subset } & React.ClassAttributes<any>) => {
const SubsetCard = ({subset, complete = false, ...other}: { subset: Subset, complete?: boolean } & React.ClassAttributes<any>) => {
return (
<Card>
<CardHeader title={ <SubsetLink to={ subset } /> } />
<CardContent>
<Markdown source={ subset.description } />
<Markdown className="mb-20" firstParagraph={ !complete } source={ subset.description } />
<Properties>
<PropertiesItem title="Publisher">{ subset.publisher }</PropertiesItem>
<PropertiesItem title="License">{ subset.rights }</PropertiesItem>
<PropertiesItem title="Number of accessions"><Number value={ subset.accessionCount } /></PropertiesItem>
<PropertiesItem title="Institute"><InstituteLink to={ subset.institute }>{ subset.institute.fullName }</InstituteLink></PropertiesItem>
{ complete && <PropertiesItem title="Publisher">{ subset.publisher }</PropertiesItem> }
{ complete && <PropertiesItem title="License">{ subset.rights }</PropertiesItem> }
</Properties>
</CardContent>
{ false &&
......
......@@ -243,16 +243,16 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> {
<PropertiesCard
small
title="Associated datasets"
propertyItemProps={ {keepEmpty: true} }
propertiesList={ datasets.map((dataset) => ({title: <DatasetLink to={ dataset } />, value: ''})) }
propertyItemProps={ { keepEmpty: true } }
propertiesList={ datasets.map((dataset) => ({ title: 'Dataset', value: <DatasetLink to={ dataset } /> })) }
/>
}
{ subsets && subsets.length > 0 &&
<PropertiesCard
small
title="Associated Subsets"
propertyItemProps={ {keepEmpty: true} }
propertiesList={ subsets.map((subset) => ({title: <SubsetLink to={ subset } />, value: ''})) }
propertyItemProps={ { keepEmpty: true } }
propertiesList={ subsets.map((subset) => ({ title: 'Subset', value: <SubsetLink to={ subset } /> })) }
/>
}
</GridLayout>
......
......@@ -17,6 +17,7 @@ import PropertiesCard from 'ui/common/PropertiesCard.tsx';
import ContentHeader from 'ui/common/heading/ContentHeader';
import LocationMap from 'ui/common/LocationMap';
import Loading from 'ui/common/Loading';
import Number from 'ui/common/Number';
import { ScrollToTopOnMount } from 'ui/common/page/scrollers';
import {Properties, PropertiesItem} from 'ui/common/Properties';
import PieChart from 'ui/common/pie-chart';
......@@ -115,14 +116,16 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
<a href={ institute.details.url }> { institute.details.url }</a>
</PropertiesItem>
}
<PropertiesItem title="Accessions in Genesys">{ <a onClick={ this.applyInstituteCodeFilter }> { institute.details.accessionCount } </a> }</PropertiesItem>
<PropertiesItem title="Accessions in Genesys">
<a onClick={ this.applyInstituteCodeFilter }><Number value={ institute.details.accessionCount } /></a>
</PropertiesItem>
</Properties>
</MainSection>
{ institute.details.latitude !== null && institute.details.longitude !== null &&
<PageSection title="Location">
<Properties>
<PropertiesItem title="latitude">{ institute.details.latitude }</PropertiesItem>
<PropertiesItem title="longitude">{ institute.details.longitude }</PropertiesItem>
<PropertiesItem title="Latitude">{ institute.details.latitude }</PropertiesItem>
<PropertiesItem title="Longitude">{ institute.details.longitude }</PropertiesItem>
</Properties>
<LocationMap
location={
......@@ -208,7 +211,10 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
<PageSection title="Last updates of passport data">
<Properties>
{ institute.lastUpdates.map((lastUpdate) => (
<PropertiesItem numeric title={ PrettyDate({value: new Date(lastUpdate[0], lastUpdate[1] - 1, lastUpdate[2])}) }>{ <a onClick={ () => this.applyLastModifyDateFilter(lastUpdate) }>{ lastUpdate[3] }</a> }</PropertiesItem>
<PropertiesItem key={ `${lastUpdate[0]}-${lastUpdate[1]}=${lastUpdate[2]}` }
numeric title={ PrettyDate({value: new Date(lastUpdate[0], lastUpdate[1] - 1, lastUpdate[2])}) }>
<a onClick={ () => this.applyLastModifyDateFilter(lastUpdate) }><Number value={ lastUpdate[3] } /></a>
</PropertiesItem>
)) }
</Properties>
</PageSection>
......
......@@ -77,7 +77,7 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
return (
<div>
<SubsetCard subset={ subset }/>
<SubsetCard complete subset={ subset }/>
<Grid container spacing={ 16 } className={ classes.accessionSection } justify={ 'space-between' }>
{ subset.creators &&
<PropertiesCard
......@@ -91,7 +91,10 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
}
/>
}
{ subsetAccessions && subsetAccessions.map((accession) => <Grid key={ accession.uuid } item xs={ 12 } className={ classes.accessionCard }><AccessionCard accession={ accession }/></Grid>) }
{ subsetAccessions && subsetAccessions.map((accession, index: number) =>
<Grid key={ accession.uuid } item xs={ 12 } className={ classes.accessionCard }>
<AccessionCard index={ index } accession={ accession }/>
</Grid>) }
</Grid>
</div>
);
......
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