This commit is contained in:
Ridwan Abadi 2019-01-28 20:24:54 +07:00
parent 5221815e85
commit 3605365c0b

View File

@ -27,6 +27,8 @@ 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 MuiCardActions} from '@material-ui/core/CardActions';
import {default as MuiCardButton} from '@material-ui/core/Button';
import EmptyComponent from '../EmptyComponent'; import EmptyComponent from '../EmptyComponent';
import * as _ from 'lodash'; import * as _ from 'lodash';
import {grey400, darkBlack, lightBlack, black} from 'material-ui/styles/colors'; import {grey400, darkBlack, lightBlack, black} from 'material-ui/styles/colors';
@ -49,6 +51,7 @@ import PopularItemCardComponent from "./PopularItemCard";
import NewItemCardComponent from "./NewItemCard"; import NewItemCardComponent from "./NewItemCard";
import '../Vouchers/style.scss'; import '../Vouchers/style.scss';
import ModalTopupComponent from "../Wallet/Modal"; import ModalTopupComponent from "../Wallet/Modal";
import Typography from '@material-ui/core/Typography';
import {styles} from "../RegisterNew/styles"; import {styles} from "../RegisterNew/styles";
const { const {
@ -119,7 +122,7 @@ class DashboardComponent extends React.Component {
}; };
return ( return (
<div className={classes.root}> <Grid className={classes.root}>
<Grid <Grid
container container
direction="row" direction="row"
@ -131,25 +134,16 @@ class DashboardComponent extends React.Component {
{this.props.appstate.wallet.data.wallet ? ( {this.props.appstate.wallet.data.wallet ? (
<MuiCard className={classes.card}> <MuiCard className={classes.card}>
<MuiCardContent> <MuiCardContent>
<h3 style={{ <Typography variant="h5" component="h2">
display: 'block', Voucher
fontSize: '1rem', </Typography>
textTransform: 'uppercase', <Typography component="p">
color: '#0006',
letterSpacing: 1
}}>Voucher</h3>
<div className="value">
{/* <NumberFormat value={(this.props.appstate.wallet.data.wallet).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/> */}
<NumberFormat value={(0).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/> <NumberFormat value={(0).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/>
</div> </Typography>
<div style={{marginTop: 10}}>
<Button type="primary" icon="plus" onClick={() => this.setModalTopup(true)}>Add Voucher</Button>
{/* <a className="btnFlatUnderline" onClick={() => this.setModalTopup(true)}>
<span>Add Voucher</span>
<Icon className="ml-8" type="right" />
</a> */}
</div>
</MuiCardContent> </MuiCardContent>
<MuiCardActions>
<MuiCardButton type="primary" icon="plus" onClick={() => this.setModalTopup(true)}>Add Voucher</MuiCardButton>
</MuiCardActions>
</MuiCard> </MuiCard>
) : ''} ) : ''}
</Grid> </Grid>
@ -201,8 +195,15 @@ class DashboardComponent extends React.Component {
</Grid> </Grid>
</Grid> </Grid>
<div style={{marginLeft: '10%', marginRight: '10%', marginTop: 20, flexGrow: 1, minHeight: window.innerHeight - 70, backgroundColor: '#fff'}}> <Grid
<div> container
direction="row"
justify="center"
alignItems="center"
spacing={24}
style={{marginTop: 30}}>
<Grid item xs={12} sm={12} md={12} lg={12}>
<Slider {...settings}> <Slider {...settings}>
<div> <div>
<img src={slider1} width={'100%'}/> <img src={slider1} width={'100%'}/>
@ -220,11 +221,10 @@ class DashboardComponent extends React.Component {
<img src={slider5} width={'100%'}/> <img src={slider5} width={'100%'}/>
</div> </div>
</Slider> </Slider>
</div> </Grid>
<div> <Grid item xs={12} sm={12} md={12} lg={12}>
<Grid container spacing={0} style={{}}> {/* <Grid item xs={12}>
{/* <Grid item xs={12}>
<div> <div>
<div className="row"> <div className="row">
<div className="col l12 m12 s12 padding"> <div className="col l12 m12 s12 padding">
@ -252,44 +252,44 @@ class DashboardComponent extends React.Component {
</div> </div>
</div> </div>
</Grid> */} </Grid> */}
<Grid item xs={12}>
<div className={"voucher"} style={{marginTop: 0}}>
<div className="row">
<div className="col l12 m12 s12 padding">
<h3>
Voucher & Gift Card
</h3>
<Row gutter={10}> <Grid item xs={12}>
{ <div className={"voucher"} style={{marginTop: 0}}>
(this.vouchersStore.list.length > 0) ? <div className="row">
this.vouchersStore.list.map((item, index) => { <div className="col l12 m12 s12 padding">
return (<Col onClick={() => this.setState({isOpened: true, data: item})} key={index} span={6}> <h3>
<ItemCard data={item}/> Voucher & Gift Card
</Col>) </h3>
})
: (
<EmptyComponent type="default4" header="" content="There is no voucher in sight"/>
)
}
</Row>
<ModalVouchersComponent <Row gutter={10}>
title={this.state.data.name + ' Vouchers'} {
data={this.state.data} (this.vouchersStore.list.length > 0) ?
isVisible={this.state.isOpened} this.vouchersStore.list.map((item, index) => {
onOk={() => this.setState({isOpened: false})} return (<Col onClick={() => this.setState({isOpened: true, data: item})} key={index} span={6}>
onCancel={() => this.setState({isOpened: false})} <ItemCard data={item}/>
/> </Col>)
</div> })
: (
<EmptyComponent type="default4" header="" content="There is no voucher in sight"/>
)
}
</Row>
<ModalVouchersComponent
title={this.state.data.name + ' Vouchers'}
data={this.state.data}
isVisible={this.state.isOpened}
onOk={() => this.setState({isOpened: false})}
onCancel={() => this.setState({isOpened: false})}
/>
</div> </div>
</div> </div>
</Grid> </div>
</Grid> </Grid>
</div> </Grid>
</div> </Grid>
<ModalTopupComponent onOk={() => this.setModalTopup(false)} onCancel={() => this.setModalTopup(false)} isVisible={this.state.modalTopup}/> <ModalTopupComponent onOk={() => this.setModalTopup(false)} onCancel={() => this.setModalTopup(false)} isVisible={this.state.modalTopup}/>
</div> </Grid>
); );
} }
} }