CropCard.tsx 2.44 KB
Newer Older
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
1
2
3
4
import * as React from 'react';
import {Link} from 'react-router-dom';

// Models
Matija Obreza's avatar
Matija Obreza committed
5
import CropDetails from 'model/genesys/CropDetails';
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
6
7

// UI
Matija Obreza's avatar
Matija Obreza committed
8
import Card, {CardHeader, CardContent, CardMedia, CardActions} from 'ui/common/Card';
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
9
10
11
12
import {Properties, PropertiesItem} from 'ui/common/Properties';
import PrettyDate from 'ui/common/time/PrettyDate';
import Grid from '@material-ui/core/Grid';
import withStyles from '@material-ui/core/styles/withStyles';
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
13
14
import Button from '@material-ui/core/Button';
import Authorize from 'ui/common/authorized/Authorize';
Matija Obreza's avatar
Matija Obreza committed
15
import Number from 'ui/common/Number';
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
16
17
18
19
20
21
22
23

const style = (theme) => ({
  root: {
    height: '100%',
    flexDirection: 'column' as 'column',
    justifyContent: 'space-between',
    display: 'flex',
  },
Matija Obreza's avatar
Matija Obreza committed
24
25
26
  media: {
    height: 150,
  },
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
27
28
});

Matija Obreza's avatar
Matija Obreza committed
29
const CropCard = ({crop, classes, compact = false, edit = false, ...other}: { crop: CropDetails, classes?: any, compact?: boolean, edit?: boolean }) => {
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
30
31
32
33
34
  if (!crop) {
    return null;
  }

  return compact ? (
Matija Obreza's avatar
Matija Obreza committed
35
    <Grid item xs={ 12 } sm={ 6 } md={ 4 } lg={ 3 } xl={ 2 } >
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
36
      <Card className={ classes.root }>
Matija Obreza's avatar
Matija Obreza committed
37
        { crop.covers && crop.covers.length > 0 && <CardMedia className={ classes.media } title={ crop.name } image={ `/proxy/uploads/d${crop.covers[0].storagePath}` } /> }
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
38
39
        <CardHeader title={
          <Link to={ `/c/${crop.shortName}${edit ? '/edit' : '' }` }>
Matija Obreza's avatar
Matija Obreza committed
40
            { crop.name }
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
41
42
43
          </Link>
        }/>
        <CardContent>
Matija Obreza's avatar
Matija Obreza committed
44
          <Number value={ crop.accessionCount } />
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
45
46
47
48
49
50
51
52
53
        </CardContent>
      </Card>
    </Grid>
  )
  :
  (
    <Grid item xs={ 12 }>
      <Card className={ classes.root }>
        <CardHeader title={
Matija Obreza's avatar
Matija Obreza committed
54
          <Link to={ `/c/${crop.shortName}${edit ? '/edit' : '' }` }>{ crop.name }</Link>
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
55
56
57
58
59
60
61
62
        }/>
        <CardContent>
          <Properties>
            <PropertiesItem title="Original name">{ crop.name }</PropertiesItem>
            <PropertiesItem title="Registered"><PrettyDate value={ new Date(crop.createdDate) }/></PropertiesItem>
            <PropertiesItem title="Last modified"><PrettyDate value={ new Date(crop.lastModifiedDate) }/></PropertiesItem>
          </Properties>
        </CardContent>
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
63
64
65
66
67
68
69
        <Authorize role="ROLE_ADMINISTRATOR">
          <CardActions>
            <Link to={ `/c/${crop.shortName}/edit` }>
              <Button variant="raised">Edit</Button>
            </Link>
          </CardActions>
        </Authorize>
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
70
71
72
73
74
75
      </Card>
    </Grid>
  );
};

export default withStyles(style)(CropCard);