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

// 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
8
9
import Card, { CardHeader, CardContent, CardActions } from 'ui/common/Card';
import { Properties, PropertiesItem } from 'ui/common/Properties';
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
10
11
12
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';
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
15
16
17
18
19
20
21
22

const style = (theme) => ({
  root: {
    height: '100%',
    flexDirection: 'column' as 'column',
    justifyContent: 'space-between',
    display: 'flex',
  },
Matija Obreza's avatar
Matija Obreza committed
23
  media: {
24
25
26
27
28
29
30
31
32
33
    // 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%',
34
    maxWidth: '100%',
35
36
37
38
39
40
41
42
    width: 'auto' as 'auto',
    height: 'auto' as 'auto',
    position: 'absolute' as 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    margin: 'auto' as 'auto',
Matija Obreza's avatar
Matija Obreza committed
43
  },
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
44
45
});

46
47
48
49
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;
50
51
52
53
54
55
56
57
58
59
60
61
62
63
  const thumbSizes: number[] = [ 200, 300, 600 ];

  let x: string = '';
  let sizes: string = '';
  if (image) {
    for (const size of thumbSizes) {
      x += `/proxy/uploads/d/_thumbs${image.thumbnailPath}/${size}x${size}.png ${size}w, `;
    }
    sizes += `(max-width: 600px) 200px, `;
    sizes += `(min-width: 1800px) 600px, `;
    sizes += `300px`;
    // x += `/proxy/uploads/d${image.storagePath} ${image.width}w`;
    // sizes += `${image.width}px`;
  }
64
65
66
67

  return (
    <div className={ classes.media }>
    { hasCover &&
68
69
      <img className={ classes.mediaImage } srcSet={ x } sizes={ sizes }
        src={ `/proxy/uploads/d/_thumbs${image.thumbnailPath}/300x300.png` } alt={ crop.name } /> }
70
71
72
73
74
75
76
    { !hasCover &&
      <img className={ classes.mediaImage } src={ `images/crop-placeholder.jpg` } alt={ crop.name } />
    }
    </div>
  );
};

Matija Obreza's avatar
Matija Obreza committed
77
const CropCard = ({crop, classes, compact = false, edit = false, ...other}: { crop: CropDetails, classes?: any, compact?: boolean, edit?: boolean }) => {
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
78
79
80
81
82
  if (!crop) {
    return null;
  }

  return compact ? (
Matija Obreza's avatar
Matija Obreza committed
83
    <Grid item xs={ 12 } sm={ 6 } md={ 4 } lg={ 3 } xl={ 2 } >
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
84
      <Card className={ classes.root }>
85
        <CropImage classes={ classes } crop={ crop } />
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
86
87
        <CardHeader title={
          <Link to={ `/c/${crop.shortName}${edit ? '/edit' : '' }` }>
Matija Obreza's avatar
Matija Obreza committed
88
            { crop.name }
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
89
90
91
92
93
94
95
96
97
98
          </Link>
        }/>
      </Card>
    </Grid>
  )
  :
  (
    <Grid item xs={ 12 }>
      <Card className={ classes.root }>
        <CardHeader title={
Matija Obreza's avatar
Matija Obreza committed
99
          <Link to={ `/c/${crop.shortName}${edit ? '/edit' : '' }` }>{ crop.name }</Link>
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
100
101
102
103
104
105
106
107
        }/>
        <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
108
109
110
111
112
113
114
        <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
115
116
117
118
119
120
      </Card>
    </Grid>
  );
};

export default withStyles(style)(CropCard);