This commit is contained in:
Ridwan Abadi 2019-01-28 22:36:56 +07:00
parent 1156034b0e
commit d303f3dc28
2 changed files with 153 additions and 137 deletions

View File

@ -386,7 +386,7 @@ export default class App extends React.Component {
src={applicationIcon}/>
</Link>
<ToolbarSeparator className="hide-on-small-only" style={{marginLeft: 30, marginRight: 30}}/>
{/*<ToolbarSeparator className="hide-on-small-only" style={{marginLeft: 30, marginRight: 30}}/>*/}
{/*<IconButton className="hide-on-small-only" style={{marginRight: 10}}*/}
{/*onClick={() => this.toggleDrawer()}>*/}
{/*<IconMenus/>*/}
@ -403,11 +403,11 @@ export default class App extends React.Component {
<Icon type="environment"/><span className="hide-on-small-only">{this.user.userGeolocation.ip}</span>
</Button> */}
<Link onClick={this
.changeRoute
.bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}><MenuItem
className={(this.state.selectedMenu === '/app/dashboard') ? "menuAkunItem active" : 'menuAkunItem'}><span
className="menuAkun">Home</span></MenuItem></Link>
{/*<Link onClick={this*/}
{/*.changeRoute*/}
{/*.bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}><MenuItem*/}
{/*className={(this.state.selectedMenu === '/app/dashboard') ? "menuAkunItem active" : 'menuAkunItem'}><span*/}
{/*className="menuAkun">Home</span></MenuItem></Link>*/}
{/* <Link onClick={this
.changeRoute

View File

@ -29,6 +29,12 @@ import {default as MuiCard} from '@material-ui/core/Card'
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 {default as MuiGridList} from '@material-ui/core/GridList';
import {default as MuiGridListTile} from '@material-ui/core/GridListTile';
import {default as MuiGridListTileBar} from '@material-ui/core/GridListTileBar';
import ListSubheader from '@material-ui/core/ListSubheader';
import IconButton from '@material-ui/core/IconButton';
import InfoIcon from '@material-ui/icons/Info';
import EmptyComponent from '../EmptyComponent';
import * as _ from 'lodash';
import {grey400, darkBlack, lightBlack, black} from 'material-ui/styles/colors';
@ -53,6 +59,7 @@ import '../Vouchers/style.scss';
import ModalTopupComponent from "../Wallet/Modal";
import Typography from '@material-ui/core/Typography';
import {styles} from "../RegisterNew/styles";
import get from "lodash.get";
const {
LineChart,
@ -123,77 +130,6 @@ class DashboardComponent extends React.Component {
return (
<Grid className={classes.root}>
<Grid
container
direction="row"
justify="center"
alignItems="center"
spacing={24}
style={{marginTop: 30}}>
<Grid item xs={12} sm={3} md={3} lg={3}>
{this.props.appstate.wallet.data.wallet ? (
<MuiCard className={classes.card}>
<MuiCardContent>
<Typography variant="h5" component="h2">
Voucher
</Typography>
<Typography component="p">
<NumberFormat value={(0).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/>
</Typography>
</MuiCardContent>
<MuiCardActions>
<MuiCardButton type="primary" icon="plus" onClick={() => this.setModalTopup(true)}>Add Voucher</MuiCardButton>
</MuiCardActions>
</MuiCard>
) : ''}
</Grid>
<Grid item xs={12} sm={3} md={3} lg={3}>
{this.props.appstate.wallet.data.wallet ? (
<MuiCard className={classes.card}>
<MuiCardContent>
<h3 style={{
display: 'block',
fontSize: '1rem',
textTransform: 'uppercase',
color: '#0006',
letterSpacing: 1
}}> Profile</h3>
<div className="value">Please complete your profile</div>
<div style={{marginTop: 10}}>
<Button type="primary" icon="edit">Edit Profile</Button>
{/* <a className="btnFlatUnderline" onClick={() => this.setModalTopup(true)}>
<span>Edit Profile</span>
<Icon className="ml-8" type="right" />
</a> */}
</div>
</MuiCardContent>
</MuiCard>
) : ''}
</Grid>
<Grid item xs={12} sm={3} md={3} lg={3}>
{this.props.appstate.wallet.data.wallet ? (
<MuiCard className={classes.card}>
<MuiCardContent>
<h3 style={{
display: 'block',
fontSize: '1rem',
textTransform: 'uppercase',
color: '#0006',
letterSpacing: 1
}}>Credit Card</h3>
<div className="value ">Please add your credit card</div>
<div style={{marginTop: 10}}>
<Button type="primary" icon="plus">Add Credit Card</Button>
{/* <a className="btnFlatUnderline" onClick={() => this.setModalTopup(true)}>
<span>Add Credit Car</span>
<Icon className="ml-8" type="right" />
</a> */}
</div>
</MuiCardContent>
</MuiCard>
) : ''}
</Grid>
</Grid>
<Grid
container
@ -201,7 +137,7 @@ class DashboardComponent extends React.Component {
justify="center"
alignItems="center"
spacing={24}
style={{marginTop: 30}}>
style={{marginTop: 0}}>
<Grid item xs={12} sm={12} md={12} lg={12}>
<Slider {...settings}>
@ -223,71 +159,151 @@ class DashboardComponent extends React.Component {
</Slider>
</Grid>
<Grid item xs={12} sm={12} md={12} lg={12}>
{/* <Grid item xs={12}>
<div>
<div className="row">
<div className="col l12 m12 s12 padding">
<h3>
Popular Items
</h3>
<Row gutter={10}>
<PopularItemCardComponent/>
</Row>
</div>
</div>
</div>
</Grid>
<Grid item xs={12}>
<div>
<div className="row">
<div className="col l12 m12 s12 padding">
<h3>
New Products
</h3>
<Row gutter={10}>
<NewItemCardComponent/>
</Row>
</div>
</div>
</div>
</Grid> */}
<Grid
container
direction="row"
justify="center"
alignItems="center"
spacing={24}
style={{marginTop: 30}}>
<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>
<Grid item xs={12} sm={3} md={3} lg={3}>
{this.props.appstate.wallet.data.wallet ? (
<MuiCard className={classes.card}>
<MuiCardContent>
<Typography variant="h5" component="h2">
Voucher
</Typography>
<Typography component="p">
<NumberFormat value={(0).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/>
</Typography>
</MuiCardContent>
<MuiCardActions>
<MuiCardButton type="primary" icon="plus" onClick={() => this.setModalTopup(true)}>Add Voucher</MuiCardButton>
</MuiCardActions>
</MuiCard>
) : ''}
</Grid>
<Row gutter={10}>
{
(this.vouchersStore.list.length > 0) ?
this.vouchersStore.list.map((item, index) => {
return (<Col onClick={() => this.setState({isOpened: true, data: item})} key={index} span={6}>
<ItemCard data={item}/>
</Col>)
})
: (
<EmptyComponent type="default4" header="" content="There is no voucher in sight"/>
)
}
</Row>
<Grid item xs={12} sm={3} md={3} lg={3}>
{this.props.appstate.wallet.data.wallet ? (
<MuiCard className={classes.card}>
<MuiCardContent>
<Typography variant="h5" component="h2">
Profile
</Typography>
<Typography component="p">
Please complete your profile
</Typography>
</MuiCardContent>
<MuiCardActions>
<MuiCardButton type="primary" icon="plus" onClick={() => console.log('Edit Profile')}>Edit Profile</MuiCardButton>
</MuiCardActions>
</MuiCard>
) : ''}
</Grid>
<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>
<Grid item xs={12} sm={3} md={3} lg={3}>
{this.props.appstate.wallet.data.wallet ? (
<MuiCard className={classes.card}>
<MuiCardContent>
<Typography variant="h5" component="h2">
Credit Card
</Typography>
<Typography component="p">
Please add your credit card
</Typography>
</MuiCardContent>
<MuiCardActions>
<MuiCardButton type="primary" icon="plus" onClick={() => console.log('Edit Profile')}>Add Credit Card</MuiCardButton>
</MuiCardActions>
</MuiCard>
) : ''}
</Grid>
</Grid>
<Grid
container
direction="row"
justify="center"
alignItems="center"
spacing={24}
style={{marginTop: 30}}>
<MuiGridList cellHeight={180} className={classes.gridList}>
<MuiGridListTile key="Subheader" cols={2} style={{height: 'auto'}}>
<ListSubheader component="div">December</ListSubheader>
</MuiGridListTile>
{(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 (
<MuiGridListTile
key={index}
onClick={() => this.setState({isOpened: true, data: item})}>
<img src={image} alt={''}/>
<MuiGridListTileBar
title={item.name}
subtitle={<span>by: {item.name}</span>}
actionIcon={
<IconButton className={classes.icon}>
<InfoIcon/>
</IconButton>
}
/>
</MuiGridListTile>
)
}) : (<EmptyComponent type="default4" header="" content="There is no voucher in sight"/>)
}
</MuiGridList>
{/*<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}>*/}
{/*{*/}
{/*(this.vouchersStore.list.length > 0) ?*/}
{/*this.vouchersStore.list.map((item, index) => {*/}
{/*return (<Col onClick={() => this.setState({isOpened: true, data: item})} key={index} span={6}>*/}
{/*<ItemCard data={item}/>*/}
{/*</Col>)*/}
{/*})*/}
{/*: (*/}
{/*<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>*/}
{/*</Grid>*/}
</Grid>
</Grid>
<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})}
/>
<ModalTopupComponent onOk={() => this.setModalTopup(false)} onCancel={() => this.setModalTopup(false)} isVisible={this.state.modalTopup}/>
</Grid>
);