Ahmad.zuhdi.y/bukopin-redemption-client-react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

new page

Browse Source
This commit is contained in:
enggar_ganteng 2019-01-30 21:30:20 +07:00
parent 135beb5238
commit 5023788030
1 changed files with 122 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
src/common/pages/Dashboard/index.js
View File

@ -254,7 +254,7 @@ class DashboardComponent extends React.Component {
spacing={24} spacing={24}
style={{ marginTop: 30 }}> style={{ marginTop: 30 }}>
<Grid item xs={10} sm={10} md={9} lg={9}> {/* <Grid item xs={10} sm={10} md={9} lg={9}>
<Typography variant="h6" gutterBottom> <Typography variant="h6" gutterBottom>
Voucher & Gift Card Voucher & Gift Card
</Typography> </Typography>
@ -280,7 +280,12 @@ class DashboardComponent extends React.Component {
component="img" component="img"
alt={item.name} alt={item.name}
className={classes.media} className={classes.media}
height="130" height="120"
style={{
marginLeft: 'auto',
marginRight: 'auto',
width: 180
}}
image={image} image={image}
title={item.name} title={item.name}
/> />
@ -312,7 +317,76 @@ class DashboardComponent extends React.Component {
}) : (<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={10} sm={10} md={9} lg={9}>
<Typography variant="h6" gutterBottom>
Voucher & Gift Card
</Typography>
<Grid container spacing={24}
justify="center"
alignItems="center"
style={{ marginTop: 15 }}>
{(this.vouchersStore.list.length > 0) ?
this.vouchersStore.list.map((item, index) => {
let image = get(item, 'images.logo', '');
if (!image.includes('http')) {
image = this.http.appendImagePath(image);
}
return (
<Grid item xs={12} sm={6} md={4} lg={3}>
<MuiCard className={classes.card}>
<div style={{display:'flex',alignItems:'center',justifyContent:'center'}}>
<MuiCardMedia
component="img"
alt={item.name}
className={classes.media}
height="120"
style={{
marginLeft: 'auto',
marginRight: 'auto',
marginTop:10,
marginBottom:10,
width: 180,
objectFit:'contain'
}}
image={image}
title={item.name}
/>
</div>
<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>
</Grid> </Grid>
)
}) : (<EmptyComponent type="default4" header="" content="There is no voucher in sight" />)
}
</Grid>
</Grid>
</Grid> </Grid>
</Grid> </Grid>
{this.state.isOpened && ( {this.state.isOpened && (
@ -330,4 +404,4 @@ class DashboardComponent extends React.Component {
} }
} }
export default compose(withStyles(styles), withWidth(),)(DashboardComponent); export default compose(withStyles(styles), withWidth())(DashboardComponent);