Commit 16a2c31b authored by Matija Obreza's avatar Matija Obreza
Browse files

Merge branch '100-sort-crops-alphabetically' into 'master'

Resolve "Sort crops alphabetically"

Closes #100

See merge request genesys-pgr/genesys-ui!92
parents 1d6f90c8 533595c7
...@@ -40,7 +40,7 @@ class BrowsePage extends React.Component<IBrowsePageProps> { ...@@ -40,7 +40,7 @@ class BrowsePage extends React.Component<IBrowsePageProps> {
</Authorize> </Authorize>
<PageContents> <PageContents>
<GridLayout> <GridLayout>
{ crops && crops.map((crop) => <CropCard key={ crop.shortName } crop={ crop } compact/>) } { crops && crops.sort((a, b) => a.name.localeCompare(b.name)).map((crop) => <CropCard key={ crop.shortName } crop={ crop } compact/>) }
</GridLayout> </GridLayout>
</PageContents> </PageContents>
</PageLayout> </PageLayout>
......
import * as React from 'react'; import * as React from 'react';
import {Link} from 'react-router-dom'; import { Link } from 'react-router-dom';
// Models // Models
import CropDetails from 'model/genesys/CropDetails'; import CropDetails from 'model/genesys/CropDetails';
// UI // UI
import Card, {CardHeader, CardContent, CardMedia, CardActions} from 'ui/common/Card'; import Card, { CardHeader, CardContent, CardActions } from 'ui/common/Card';
import {Properties, PropertiesItem} from 'ui/common/Properties'; import { Properties, PropertiesItem } from 'ui/common/Properties';
import PrettyDate from 'ui/common/time/PrettyDate'; import PrettyDate from 'ui/common/time/PrettyDate';
import Grid from '@material-ui/core/Grid'; import Grid from '@material-ui/core/Grid';
import withStyles from '@material-ui/core/styles/withStyles'; import withStyles from '@material-ui/core/styles/withStyles';
import Button from '@material-ui/core/Button'; import Button from '@material-ui/core/Button';
import Authorize from 'ui/common/authorized/Authorize'; import Authorize from 'ui/common/authorized/Authorize';
import Number from 'ui/common/Number';
const style = (theme) => ({ const style = (theme) => ({
root: { root: {
...@@ -22,10 +21,44 @@ const style = (theme) => ({ ...@@ -22,10 +21,44 @@ const style = (theme) => ({
display: 'flex', display: 'flex',
}, },
media: { media: {
height: 150, // marginTop: '-25%',
height: 200,
display: 'inline-block' as 'inline-block',
// vertical-align: top; /*not required*/
position: 'relative' as 'relative',
overflow: 'hidden' as 'hidden',
},
mediaImage: {
// maxHeight: '100%',
minWidth: '100%',
width: 'auto' as 'auto',
height: 'auto' as 'auto',
position: 'absolute' as 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
margin: 'auto' as 'auto',
}, },
}); });
const CropImage = ({classes, crop}: { classes: any, crop: CropDetails}) => {
// console.log(`renderImage`, crop);
const hasCover = crop.covers && crop.covers.length > 0;
const image = hasCover ? crop.covers[0] : null;
return (
<div className={ classes.media }>
{ hasCover &&
<img className={ classes.mediaImage } srcSet={ `/proxy/uploads/d/_thumbs${image.thumbnailPath}/200x200.png 1x, /proxy/uploads/d${image.storagePath} 4x` }
src={ `/proxy/uploads/d${image.storagePath}` } alt={ crop.name } /> }
{ !hasCover &&
<img className={ classes.mediaImage } src={ `images/crop-placeholder.jpg` } alt={ crop.name } />
}
</div>
);
};
const CropCard = ({crop, classes, compact = false, edit = false, ...other}: { crop: CropDetails, classes?: any, compact?: boolean, edit?: boolean }) => { const CropCard = ({crop, classes, compact = false, edit = false, ...other}: { crop: CropDetails, classes?: any, compact?: boolean, edit?: boolean }) => {
if (!crop) { if (!crop) {
return null; return null;
...@@ -34,15 +67,12 @@ const CropCard = ({crop, classes, compact = false, edit = false, ...other}: { cr ...@@ -34,15 +67,12 @@ const CropCard = ({crop, classes, compact = false, edit = false, ...other}: { cr
return compact ? ( return compact ? (
<Grid item xs={ 12 } sm={ 6 } md={ 4 } lg={ 3 } xl={ 2 } > <Grid item xs={ 12 } sm={ 6 } md={ 4 } lg={ 3 } xl={ 2 } >
<Card className={ classes.root }> <Card className={ classes.root }>
{ crop.covers && crop.covers.length > 0 && <CardMedia className={ classes.media } title={ crop.name } image={ `/proxy/uploads/d${crop.covers[0].storagePath}` } /> } <CropImage classes={ classes } crop={ crop } />
<CardHeader title={ <CardHeader title={
<Link to={ `/c/${crop.shortName}${edit ? '/edit' : '' }` }> <Link to={ `/c/${crop.shortName}${edit ? '/edit' : '' }` }>
{ crop.name } { crop.name }
</Link> </Link>
}/> }/>
<CardContent>
<Number value={ crop.accessionCount } />
</CardContent>
</Card> </Card>
</Grid> </Grid>
) )
......
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