This commit is contained in:
Ridwan Abadi 2019-01-29 00:08:04 +07:00
parent 1b381c323f
commit 18a681b6e0

View File

@ -27,10 +27,16 @@ import {
import Grid from '@material-ui/core/Grid'; import Grid from '@material-ui/core/Grid';
import {default as MuiCard} from '@material-ui/core/Card' import {default as MuiCard} from '@material-ui/core/Card'
import {default as MuiCardContent} from '@material-ui/core/CardContent'; import {default as MuiCardContent} from '@material-ui/core/CardContent';
import {default as MuiCardMedia} from '@material-ui/core/CardMedia';
import {default as MuiCardActions} from '@material-ui/core/CardActions'; import {default as MuiCardActions} from '@material-ui/core/CardActions';
import {default as MuiCardActionArea} from '@material-ui/core/CardActionArea';
import {default as MuiCardButton} from '@material-ui/core/Button'; import {default as MuiCardButton} from '@material-ui/core/Button';
import {default as MuiGridList} from '@material-ui/core/GridList'; import {default as MuiGridList} from '@material-ui/core/GridList';
import {default as MuiGridListTile} from '@material-ui/core/GridListTile'; import {default as MuiGridListTile} from '@material-ui/core/GridListTile';
import {default as MuiButton} from '@material-ui/core/Button';
import {default as MuiDivider} from '@material-ui/core/Divider';
import Hidden from '@material-ui/core/Hidden';
import Chip from '@material-ui/core/Chip';
import {default as MuiGridListTileBar} from '@material-ui/core/GridListTileBar'; import {default as MuiGridListTileBar} from '@material-ui/core/GridListTileBar';
import ListSubheader from '@material-ui/core/ListSubheader'; import ListSubheader from '@material-ui/core/ListSubheader';
import IconButton from '@material-ui/core/IconButton'; import IconButton from '@material-ui/core/IconButton';
@ -168,7 +174,7 @@ class DashboardComponent extends React.Component {
spacing={24} spacing={24}
style={{marginTop: 30}}> style={{marginTop: 30}}>
<Grid item xs={12} sm={3} md={3} lg={3}> <Grid item xs={10} sm={3} md={3} lg={3}>
{this.props.appstate.wallet.data.wallet ? ( {this.props.appstate.wallet.data.wallet ? (
<MuiCard className={classes.card}> <MuiCard className={classes.card}>
<MuiCardContent> <MuiCardContent>
@ -186,7 +192,7 @@ class DashboardComponent extends React.Component {
) : ''} ) : ''}
</Grid> </Grid>
<Grid item xs={12} sm={3} md={3} lg={3}> <Grid item xs={10} sm={3} md={3} lg={3}>
{this.props.appstate.wallet.data.wallet ? ( {this.props.appstate.wallet.data.wallet ? (
<MuiCard className={classes.card}> <MuiCard className={classes.card}>
<MuiCardContent> <MuiCardContent>
@ -204,7 +210,7 @@ class DashboardComponent extends React.Component {
) : ''} ) : ''}
</Grid> </Grid>
<Grid item xs={12} sm={3} md={3} lg={3}> <Grid item xs={10} sm={3} md={3} lg={3}>
{this.props.appstate.wallet.data.wallet ? ( {this.props.appstate.wallet.data.wallet ? (
<MuiCard className={classes.card}> <MuiCard className={classes.card}>
<MuiCardContent> <MuiCardContent>
@ -225,17 +231,20 @@ class DashboardComponent extends React.Component {
<Grid <Grid
container container
direction="row" direction="column"
justify="center" justify="center"
alignItems="center" alignItems="center"
spacing={24} spacing={24}
style={{marginTop: 30}}> style={{marginTop: 30}}>
<MuiGridList cellHeight={180} className={classes.gridList}> <Grid item xs={9} sm={9} md={9} lg={9}>
<MuiGridListTile key="Subheader" cols={2} style={{height: 'auto'}}> <Typography variant="h6" gutterBottom>
<ListSubheader component="div">December</ListSubheader> Voucher & Gift Card
</MuiGridListTile> </Typography>
<MuiGridList cellHeight={180} cols={4} className={classes.gridList} style={{
width: '100%',
height: undefined,
}}>
{(this.vouchersStore.list.length > 0) ? {(this.vouchersStore.list.length > 0) ?
this.vouchersStore.list.map((item, index) => { this.vouchersStore.list.map((item, index) => {
let image = get(item, 'images.logo', ''); let image = get(item, 'images.logo', '');
@ -244,24 +253,49 @@ class DashboardComponent extends React.Component {
image = this.http.appendImagePath(image); image = this.http.appendImagePath(image);
} }
return ( return (
<MuiGridListTile <MuiGridListTile key={index} className={classes.imgFullWidth} style={{
key={index} height: 'auto',
onClick={() => this.setState({isOpened: true, data: item})}> padding: 5,
<img src={image} alt={''}/> // border: "1px solid #000"
<MuiGridListTileBar }}>
<MuiCard className={classes.card}>
<MuiCardMedia
component="img"
alt={item.name}
className={classes.media}
height="130"
image={image}
title={item.name} title={item.name}
subtitle={<span>by: {item.name}</span>}
actionIcon={
<IconButton className={classes.icon}>
<InfoIcon/>
</IconButton>
}
/> />
<MuiDivider light/>
<MuiCardContent>
<Typography noWrap={true} variant="subtitle1">
{item.name}
</Typography>
<Typography className={classes.pos} color="textSecondary">
Ind
</Typography>
<Typography variant="subtitle2">
From: 100 Point
</Typography>
</MuiCardContent>
<MuiCardActions>
<MuiButton
fullWidth
variant="outlined"
color="primary"
onClick={() => this.setState({isOpened: true, data: item})}
size="small">
Redeem
</MuiButton>
</MuiCardActions>
</MuiCard>
</MuiGridListTile> </MuiGridListTile>
) )
}) : (<EmptyComponent type="default4" header="" content="There is no voucher in sight"/>) }) : (<EmptyComponent type="default4" header="" content="There is no voucher in sight"/>)
} }
</MuiGridList> </MuiGridList>
</Grid>
{/*<Grid item xs={12}>*/} {/*<Grid item xs={12}>*/}
{/*<div className={"voucher"} style={{marginTop: 0}}>*/} {/*<div className={"voucher"} style={{marginTop: 0}}>*/}