Commit 24c34adc authored by Matija Obreza's avatar Matija Obreza
Browse files

<DescriptorCard defaults to "complete" but can be set to "brief" mode

- <DescriptorCard brief owner version.... displays brief card, but includes owner and version
- <DescriptorCard complete owner version... displays complete card, but excludes owner and version
parent 64f6e4eb
Pipeline #3977 passed with stages
in 3 minutes and 6 seconds
......@@ -7,9 +7,68 @@ import Grid from 'material-ui/Grid';
import Markdown from 'ui/common/markdown';
import Button from 'material-ui/Button';
import {Descriptor} from 'model/descriptors.model';
import { Descriptor } from 'model/descriptors.model';
import { VocabularyTerm } from 'model/vocabulary.model';
import { DescriptorLink } from 'ui/common/Links';
const T = (code: string): string => {
switch (code) {
case 'descriptor.category.PASSPORT': return 'Passport descriptor';
case 'descriptor.category.MANAGEMENT': return 'Management descriptor';
case 'descriptor.category.ENVIRONMENT': return 'Environment and Site descriptor';
case 'descriptor.category.CHARACTERIZATION': return 'Characterization descriptor';
case 'descriptor.category.EVALUATION': return 'Evaluation descriptor';
case 'descriptor.category.ABIOTICSTRESS': return 'Abiotic stress descriptor';
case 'descriptor.category.BIOTICSTRESS': return 'Biotic stress descriptor';
case 'descriptor.category.MOLECULAR': return 'Molecular marker descriptor';
case 'descriptor.dataType.NUMERIC': return 'Numeric';
case 'descriptor.dataType.TEXT': return 'Text';
case 'descriptor.dataType.SCALE': return 'Scale';
case 'descriptor.dataType.CODED': return 'Vocabulary';
case 'descriptor.dataType.BOOLEAN': return 'Yes/no';
case 'descriptor.dataType.DATE': return 'Date';
case 'crop.maize': return 'Maize';
case 'crop.yam': return 'Yam';
default: return code;
}
};
interface ICardProps {
complete?: boolean;
compact?: boolean;
textLength?: number;
owner?: boolean;
crop?: boolean;
vocabulary?: boolean;
category?: boolean;
version?: boolean;
dataType?: boolean;
}
const COMPLETE_DISPLAY = (): ICardProps => ({
textLength: 0,
owner: true,
crop: true,
vocabulary: true,
category: true,
version: true,
dataType: true,
});
const BRIEF_DISPLAY = (): ICardProps => ({
textLength: 0,
owner: false,
crop: false,
vocabulary: false,
category: false,
version: false,
dataType: true,
});
interface IDescriptorCardProps extends React.ClassAttributes<any> {
descriptor: Descriptor;
className?: string;
......@@ -136,156 +195,156 @@ const styles = (theme) => ({
btnDefault: theme.buttons.default,
});
class DescriptorCard extends React.Component<IDescriptorCardProps, any> {
const DescriptorCard = ({complete = true, compact, descriptor, classes, className, selectedProps, ...other}: IDescriptorCardProps & ICardProps) => {
private onClick = (select) => () => {
const { selectedProps: {onSelect, onUnselect}, descriptor} = this.props;
const onClick = (select) => () => {
const {onSelect, onUnselect} = selectedProps;
if (select) {
onSelect(descriptor);
} else {
onUnselect(descriptor);
}
}
public render() {
const {descriptor, classes, className, selectedProps} = this.props;
};
const T = (code: string) => {
switch (code) {
case 'descriptor.category.PASSPORT': return 'Passport descriptor';
case 'descriptor.category.MANAGEMENT': return 'Management descriptor';
case 'descriptor.category.ENVIRONMENT': return 'Environment and Site descriptor';
case 'descriptor.category.CHARACTERIZATION': return 'Characterization descriptor';
case 'descriptor.category.EVALUATION': return 'Evaluation descriptor';
case 'descriptor.category.ABIOTICSTRESS': return 'Abiotic stress descriptor';
case 'descriptor.category.BIOTICSTRESS': return 'Biotic stress descriptor';
case 'descriptor.category.MOLECULAR': return 'Molecular marker descriptor';
if (! descriptor) {
return null;
}
case 'descriptor.dataType.NUMERIC': return 'Numeric';
case 'descriptor.dataType.TEXT': return 'Text';
case 'descriptor.dataType.SCALE': return 'Scale';
case 'descriptor.dataType.CODED': return 'Vocabulary';
case 'descriptor.dataType.BOOLEAN': return 'Yes/no';
case 'descriptor.dataType.DATE': return 'Date';
const displayPref: ICardProps = compact ? BRIEF_DISPLAY() : COMPLETE_DISPLAY();
case 'crop.maize': return 'Maize';
case 'crop.yam': return 'Yam';
for (const prop of Object.keys(other)) {
displayPref[prop] = !displayPref[prop];
}
if (other.textLength) {
displayPref.textLength = other.textLength;
}
default: return code;
}
};
// console.log('DC displayPref', displayPref, complete, compact);
return (
<Card className={ `${classes.card} ${className}` } square>
<CardHeader
className={ classes.cardHeader }
classes={ {
title: classes.titleCard,
} }
title={ (
<DescriptorLink descriptor={ descriptor }>{ descriptor.title || 'Untitled' }</DescriptorLink>
) }
/>
<Divider />
<CardContent className={ classes.cardContent } >
{ descriptor.description && <Markdown source={ descriptor.description }/> }
<Grid container spacing={ 0 }>
<Grid item xs={ 12 }>
<Grid container spacing={ 0 } className={ `${classes.dataContainer} ${classes.grayRowsOdd}` }>
<Grid item xs={ 12 } md={ 3 }>
<Typography type="title" component="h3" className={ `${classes.gray} ${classes.grayTitleSmall} ${classes.pdBottom0}` }>
Publisher:
</Typography>
</Grid>
<Grid item xs={ 12 } md={ 9 } className={ `${classes.gray} ${classes.rightTextWrapper} ${classes.pdTop0}` }>
<Typography type="title" component="h3" className={ `${classes.rightText} ${classes.blue}` }>
{ descriptor.owner ? descriptor.owner.name : '' }
</Typography>
</Grid>
return (
<Card className={ `${classes.card} ${className}` } square>
<CardHeader
className={ classes.cardHeader }
classes={ {
title: classes.titleCard,
} }
title={ (
<DescriptorLink descriptor={ descriptor }>{ descriptor.title || 'Untitled' }</DescriptorLink>
) }
/>
<Divider />
<CardContent className={ classes.cardContent } >
{ descriptor.description && <Markdown source={ displayPref.textLength ? descriptor.description.substring(0, displayPref.textLength) : descriptor.description }/> }
<Grid container spacing={ 0 }>
<Grid item xs={ 12 }>
{ displayPref.owner && (
<Grid container spacing={ 0 } className={ `${classes.dataContainer} ${classes.grayRowsOdd}` }>
<Grid item xs={ 12 } md={ 3 }>
<Typography type="title" component="h3" className={ `${classes.gray} ${classes.grayTitleSmall} ${classes.pdBottom0}` }>
Publisher:
</Typography>
</Grid>
<Grid container spacing={ 0 } className={ `${classes.dataContainer} ${classes.grayRowsOdd}` }>
<Grid item xs={ 12 } md={ 3 }>
<Typography type="title" component="h3" className={ `${classes.gray} ${classes.grayTitleSmall} ${classes.pdBottom0}` }>
Version:
</Typography>
</Grid>
<Grid item xs={ 12 } md={ 9 } className={ `${classes.gray} ${classes.rightTextWrapper} ${classes.pdTop0}` }>
<Typography type="title" component="h3" className={ `${classes.rightText} ${classes.fontNormal}` }>
{ descriptor.versionTag }
</Typography>
</Grid>
<Grid item xs={ 12 } md={ 9 } className={ `${classes.gray} ${classes.rightTextWrapper} ${classes.pdTop0}` }>
<Typography type="title" component="h3" className={ `${classes.rightText} ${classes.blue}` }>
{ descriptor.owner ? descriptor.owner.name : '' }
</Typography>
</Grid>
{ descriptor.crop && (
<Grid container spacing={ 0 } className={ `${classes.dataContainer} ${classes.grayRowsOdd}` }>
<Grid item xs={ 12 } md={ 3 }>
<Typography type="title" component="h3" className={ `${classes.gray} ${classes.grayTitleSmall} ${classes.pdBottom0}` }>
Crop:
</Typography>
</Grid>
<Grid item xs={ 12 } md={ 9 } className={ `${classes.gray} ${classes.rightTextWrapper} ${classes.pdTop0}` }>
<Typography type="title" component="h3" className={ `${classes.rightText} ${classes.fontNormal}` }>
{ T(`crop.${descriptor.crop}`) || descriptor.crop }
</Typography>
</Grid>
</Grid>
) }
<Grid container spacing={ 0 } className={ `${classes.dataContainer} ${classes.grayRowsOdd}` }>
<Grid item xs={ 12 } md={ 3 }>
<Typography type="title" component="h3" className={ `${classes.gray} ${classes.grayTitleSmall} ${classes.pdBottom0}` }>
Classification:
</Typography>
</Grid>
<Grid item xs={ 12 } md={ 9 } className={ `${classes.gray} ${classes.rightTextWrapper} ${classes.pdTop0}` }>
<Typography type="title" component="h3" className={ `${classes.rightText} ${classes.fontNormal}` }>
{ T(`descriptor.category.${descriptor.category}`) }
</Typography>
</Grid>
</Grid>
) }
{ displayPref.version && (
<Grid container spacing={ 0 } className={ `${classes.dataContainer} ${classes.grayRowsOdd}` }>
<Grid item xs={ 12 } md={ 3 }>
<Typography type="title" component="h3" className={ `${classes.gray} ${classes.grayTitleSmall} ${classes.pdBottom0}` }>
Version:
</Typography>
</Grid>
<Grid container spacing={ 0 } className={ `${classes.dataContainer} ${classes.grayRowsOdd}` }>
<Grid item xs={ 12 } md={ 3 }>
<Typography type="title" component="h3" className={ `${classes.gray} ${classes.grayTitleSmall} ${classes.pdBottom0}` }>
Data type:
</Typography>
</Grid>
<Grid item xs={ 12 } md={ 9 } className={ `${classes.gray} ${classes.rightTextWrapper} ${classes.pdTop0}` }>
<Typography type="title" component="h3" className={ `${classes.rightText} ${classes.fontNormal}` }>
{ T(`descriptor.dataType.${descriptor.dataType}`) }
</Typography>
</Grid>
<Grid item xs={ 12 } md={ 9 } className={ `${classes.gray} ${classes.rightTextWrapper} ${classes.pdTop0}` }>
<Typography type="title" component="h3" className={ `${classes.rightText} ${classes.fontNormal}` }>
{ descriptor.versionTag }
</Typography>
</Grid>
</Grid>
) }
{ (displayPref.crop && descriptor.crop) && (
<Grid container spacing={ 0 } className={ `${classes.dataContainer} ${classes.grayRowsOdd}` }>
<Grid item xs={ 12 } md={ 3 }>
<Typography type="title" component="h3" className={ `${classes.gray} ${classes.grayTitleSmall} ${classes.pdBottom0}` }>
Crop:
</Typography>
</Grid>
<Grid item xs={ 12 } md={ 9 } className={ `${classes.gray} ${classes.rightTextWrapper} ${classes.pdTop0}` }>
<Typography type="title" component="h3" className={ `${classes.rightText} ${classes.fontNormal}` }>
{ T(`crop.${descriptor.crop}`) || descriptor.crop }
</Typography>
</Grid>
</Grid>
) }
{ (displayPref.category && descriptor.category) && (
<Grid container spacing={ 0 } className={ `${classes.dataContainer} ${classes.grayRowsOdd}` }>
<Grid item xs={ 12 } md={ 3 }>
<Typography type="title" component="h3" className={ `${classes.gray} ${classes.grayTitleSmall} ${classes.pdBottom0}` }>
Classification:
</Typography>
</Grid>
<Grid item xs={ 12 } md={ 9 } className={ `${classes.gray} ${classes.rightTextWrapper} ${classes.pdTop0}` }>
<Typography type="title" component="h3" className={ `${classes.rightText} ${classes.fontNormal}` }>
{ T(`descriptor.category.${descriptor.category}`) }
</Typography>
</Grid>
</Grid>
) }
{ displayPref.dataType && (
<Grid container spacing={ 0 } className={ `${classes.dataContainer} ${classes.grayRowsOdd}` }>
<Grid item xs={ 12 } md={ 3 }>
<Typography type="title" component="h3" className={ `${classes.gray} ${classes.grayTitleSmall} ${classes.pdBottom0}` }>
Data type:
</Typography>
</Grid>
<Grid item xs={ 12 } md={ 9 } className={ `${classes.gray} ${classes.rightTextWrapper} ${classes.pdTop0}` }>
<Typography type="title" component="h3" className={ `${classes.rightText} ${classes.fontNormal}` }>
{ T(`descriptor.dataType.${descriptor.dataType}`) }
</Typography>
</Grid>
</Grid>
) }
</Grid>
</CardContent>
{ selectedProps && (
<CardActions className={ classes.action }>
{ selectedProps.selectable && (
<Button
raised
onClick={ this.onClick(true) }
className={ classes.btnBlue }
disabled={ selectedProps.disabled }
>
+ SELECT DESCRIPTOR
</Button>
) }
{ !selectedProps.selectable && (
<Button
raised
onClick={ this.onClick(false) }
disabled={ selectedProps.disabled }
className={ classes.btnDefault }
>
UNSELECT
</Button>
) }
</CardActions>
) }
</Card>
);
}
{ (displayPref.vocabulary && descriptor.terms) && (
<Grid item xs={ 12 }>
{ descriptor.terms.map((term: VocabularyTerm) => (
<div key={ term.code }>{ term.code } &rarr; { term.title }</div>
)) }
</Grid>
) }
</Grid>
</CardContent>
{ selectedProps && (
<CardActions className={ classes.action }>
{ selectedProps.selectable && (
<Button
raised
onClick={ onClick(true) }
className={ classes.btnBlue }
disabled={ selectedProps.disabled }
>
+ SELECT DESCRIPTOR
</Button>
) }
}
{ !selectedProps.selectable && (
<Button
raised
onClick={ onClick(false) }
disabled={ selectedProps.disabled }
className={ classes.btnDefault }
>
UNSELECT
</Button>
) }
</CardActions>
) }
</Card>
);
};
export default (withStyles as any)(styles)(DescriptorCard);
......@@ -4,7 +4,7 @@ import {withStyles} from 'material-ui/styles';
import * as classnames from 'classnames';
import Card, {CardHeader} from 'material-ui/Card';
import {Descriptor} from 'model/descriptors.model';
import { Descriptor } from 'model/descriptors.model';
import {IDescriptorFilter} from 'model/filter.model';
import DescriptorSearchMenu from 'ui/catalog/descriptor/DescriptorSearchMenu';
import {Page} from 'model/common.model';
......@@ -105,14 +105,16 @@ class DescriptorPicker extends React.Component<IDescriptorPickerProps, any> {
<div className={ classes.availableHeader }>
{ matchingDescriptors.totalElements || 0 } descriptors available
</div>
{ matchingDescriptors.content.map((e, i) => (
{ matchingDescriptors.content.map((descriptor: Descriptor) => (
<DescriptorCard
descriptor={ e }
key={ i }
key={ descriptor.uuid }
descriptor={ descriptor }
compact
textLength={ 100 }
selectedProps={ {
selectable: true,
onSelect: this.onDescriptorSelected(true),
disabled: currentDescriptors && currentDescriptors.map((d) => d.uuid).indexOf(e.uuid) !== -1,
disabled: currentDescriptors && currentDescriptors.map((d) => d.uuid).indexOf(descriptor.uuid) !== -1,
} }
/>
),
......@@ -149,10 +151,12 @@ class DescriptorPicker extends React.Component<IDescriptorPickerProps, any> {
</Card>
)
}
{ currentDescriptors.length > 0 && currentDescriptors.map((e, i) => (
{ currentDescriptors.length > 0 && currentDescriptors.map((descriptor: Descriptor) => (
<DescriptorCard
descriptor={ e }
key={ i }
key={ descriptor.uuid }
descriptor={ descriptor }
compact
textLength={ 100 }
onUnselect={ this.onDescriptorSelected(false) }
selectedProps={ {
selectable: false,
......
import * as React from 'react';
import {withStyles} from 'material-ui/styles';
import { withStyles } from 'material-ui/styles';
import Grid from 'material-ui/Grid';
import {Descriptor} from 'model/descriptors.model';
import {Page} from 'model/common.model';
import {IDescriptorFilter} from 'model/filter.model';
import { Descriptor } from 'model/descriptors.model';
import { Page } from 'model/common.model';
import { IDescriptorFilter } from 'model/filter.model';
import PaginationComponent from 'ui/common/pagination';
import DescriptorCard from 'ui/catalog/descriptor/DescriptorCard';
import ContentHeader from 'ui/common/heading/ContentHeader';
......@@ -80,7 +80,10 @@ class Descriptors extends React.Component<IDescriptorListsPageProps, any> {
/>
</Grid>
<Grid item xs={ 12 }>
{ descriptorPage.content.map((e, i) => <DescriptorCard className={ classes.card } descriptor={ e } key={ i }/>) }
{ descriptorPage.content.map((d: Descriptor, i) => (
<DescriptorCard key={ d.uuid } className={ classes.card }
descriptor={ d } complete dataType vocabulary />
)) }
</Grid>
</Grid>
......
......@@ -13,6 +13,7 @@ import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton';
import { withStyles } from 'material-ui/styles';
import Grid from 'material-ui/Grid';
import Card, {CardHeader, CardContent} from 'material-ui/Card';
import Section from 'ui/pages/dataset/dataset-detail/c/Section';
import Divider from 'material-ui/Divider';
interface IDescriptorListPageProps extends React.ClassAttributes<any> {
......@@ -28,10 +29,10 @@ const styles = (theme) => ({
filterSection: theme.leftPanel.root,
contentContainer: {
backgroundColor: '#E8E5E0',
padding: '16px',
padding: '1.5rem',
},
card: {
margin: '0',
marginBottom: '1.5rem',
},
propertiesContainer: {
marginTop: '20px',
......@@ -140,12 +141,20 @@ class DescriptorListPage extends React.Component<IDescriptorListPageProps, any>
</Card>
</Grid>
<Grid item xs={ 12 } lg={ 9 }>
{ descriptorList.descriptors.map((descriptor: Descriptor) => (
<Grid item xs={ 12 } key={ `${descriptor.uuid}` }>
<DescriptorCard className={ classes.card } descriptor={ descriptor } />
</Grid>
),
) }
<div id={ `d-${descriptor.uuid}` }>
<DescriptorCard id={ `d-${descriptor.uuid}` } key={ `${descriptor.uuid}` } className={ classes.card } descriptor={ descriptor } complete owner crop version />
</div>
)) }
</Grid>
<Grid item xs={ 12 } lg={ 3 }>
<Section title="Table of contents">
{ descriptorList.descriptors.map((descriptor: Descriptor) => (
<div key={ `${descriptor.uuid}` }><a href={ `#d-${descriptor.uuid}` }>{ descriptor.title }</a></div>
)) }
</Section>
</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