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

updates

Browse Source
This commit is contained in:
Ridwan Abadi 2019-01-29 00:08:04 +07:00
parent 1b381c323f
commit 18a681b6e0
1 changed files with 97 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

160
src/common/pages/Dashboard/index.js
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,76 +231,104 @@ 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.map((item, index) => {
let image = get(item, 'images.logo', '');
{(this.vouchersStore.list.length > 0) ? if (!image.includes('http')) {
this.vouchersStore.list.map((item, index) => { image = this.http.appendImagePath(image);
let image = get(item, 'images.logo', ''); }
return (
if (!image.includes('http')) { <MuiGridListTile key={index} className={classes.imgFullWidth} style={{
image = this.http.appendImagePath(image); height: 'auto',
} padding: 5,
return ( // border: "1px solid #000"
<MuiGridListTile }}>
key={index} <MuiCard className={classes.card}>
onClick={() => this.setState({isOpened: true, data: item})}> <MuiCardMedia
<img src={image} alt={''}/> component="img"
<MuiGridListTileBar alt={item.name}
title={item.name} className={classes.media}
subtitle={<span>by: {item.name}</span>} height="130"
actionIcon={ image={image}
<IconButton className={classes.icon}> title={item.name}
<InfoIcon/> />
</IconButton> <MuiDivider light/>
} <MuiCardContent>
/> <Typography noWrap={true} variant="subtitle1">
</MuiGridListTile> {item.name}
) </Typography>
}) : (<EmptyComponent type="default4" header="" content="There is no voucher in sight"/>) <Typography className={classes.pos} color="textSecondary">
} Ind
</MuiGridList> </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>
)
}) : (<EmptyComponent type="default4" header="" content="There is no voucher in sight"/>)
}
</MuiGridList>
</Grid>
{/*<Grid item xs={12}>*/} {/*<Grid item xs={12}>*/}
{/*<div className={"voucher"} style={{marginTop: 0}}>*/} {/*<div className={"voucher"} style={{marginTop: 0}}>*/}
{/*<div className="row">*/} {/*<div className="row">*/}
{/*<div className="col l12 m12 s12 padding">*/} {/*<div className="col l12 m12 s12 padding">*/}
{/*<h3>*/} {/*<h3>*/}
{/*Voucher & Gift Card*/} {/*Voucher & Gift Card*/}
{/*</h3>*/} {/*</h3>*/}
{/*<Row gutter={10}>*/} {/*<Row gutter={10}>*/}
{/*{*/} {/*{*/}
{/*(this.vouchersStore.list.length > 0) ?*/} {/*(this.vouchersStore.list.length > 0) ?*/}
{/*this.vouchersStore.list.map((item, index) => {*/} {/*this.vouchersStore.list.map((item, index) => {*/}
{/*return (<Col onClick={() => this.setState({isOpened: true, data: item})} key={index} span={6}>*/} {/*return (<Col onClick={() => this.setState({isOpened: true, data: item})} key={index} span={6}>*/}
{/*<ItemCard data={item}/>*/} {/*<ItemCard data={item}/>*/}
{/*</Col>)*/} {/*</Col>)*/}
{/*})*/} {/*})*/}
{/*: (*/} {/*: (*/}
{/*<EmptyComponent type="default4" header="" content="There is no voucher in sight"/>*/} {/*<EmptyComponent type="default4" header="" content="There is no voucher in sight"/>*/}
{/*)*/} {/*)*/}
{/*}*/} {/*}*/}
{/*</Row>*/} {/*</Row>*/}
{/*<ModalVouchersComponent*/} {/*<ModalVouchersComponent*/}
{/*title={this.state.data.name + ' Vouchers'}*/} {/*title={this.state.data.name + ' Vouchers'}*/}
{/*data={this.state.data}*/} {/*data={this.state.data}*/}
{/*isVisible={this.state.isOpened}*/} {/*isVisible={this.state.isOpened}*/}
{/*onOk={() => this.setState({isOpened: false})}*/} {/*onOk={() => this.setState({isOpened: false})}*/}
{/*onCancel={() => this.setState({isOpened: false})}*/} {/*onCancel={() => this.setState({isOpened: false})}*/}
{/*/>*/} {/*/>*/}
{/*</div>*/} {/*</div>*/}
{/*</div>*/} {/*</div>*/}
{/*</div>*/} {/*</div>*/}
{/*</Grid>*/} {/*</Grid>*/}
</Grid> </Grid>
</Grid> </Grid>