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:34:38 +07:00
parent 226766f408
commit 826ebd37a9
1 changed files with 58 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,8 @@
import React from "react"; import React from "react";
import {inject, observer} from "mobx-react"; import {inject, observer} from "mobx-react";
import compose from 'recompose/compose';
import withStyles from "@material-ui/core/styles/withStyles"; import withStyles from "@material-ui/core/styles/withStyles";
import withWidth, {isWidthUp} from '@material-ui/core/withWidth';
import QueueAnim from 'rc-queue-anim'; import QueueAnim from 'rc-queue-anim';
import "./style.scss"; import "./style.scss";
import NumberFormat from 'react-number-format'; import NumberFormat from 'react-number-format';
@ -126,6 +128,21 @@ class DashboardComponent extends React.Component {
render() { render() {
const {classes} = this.props; const {classes} = this.props;
const getGridListCols = () => {
if (isWidthUp('lg', this.props.width)) {
return 4;
}
if (isWidthUp('md', this.props.width)) {
return 3;
}
if (isWidthUp('sm', this.props.width)) {
return 2;
}
return 1;
}
const settings = { const settings = {
arrows: true, arrows: true,
infinite: true, infinite: true,
@ -237,11 +254,11 @@ class DashboardComponent extends React.Component {
spacing={24} spacing={24}
style={{marginTop: 30}}> style={{marginTop: 30}}>
<Grid item xs={9} sm={9} 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>
<MuiGridList spacing={10} cellHeight={180} cols={4} className={classes.gridList} style={{ <MuiGridList cellHeight={180} cols={getGridListCols()} className={classes.gridList} style={{
width: '100%', width: '100%',
height: undefined, height: undefined,
}}> }}>
@ -253,83 +270,49 @@ class DashboardComponent extends React.Component {
image = this.http.appendImagePath(image); image = this.http.appendImagePath(image);
} }
return ( return (
<MuiGridListTile key={index} className={classes.imgFullWidth} style={{ <MuiGridListTile key={index} className={classes.imgFullWidth} style={{
height: 'auto', height: 'auto',
padding: 5, padding: 5,
// border: "1px solid #000" // border: "1px solid #000"
}}> }}>
<MuiCard className={classes.card}> <MuiCard className={classes.card}>
<MuiCardMedia <MuiCardMedia
component="img" component="img"
alt={item.name} alt={item.name}
className={classes.media} className={classes.media}
height="130" height="130"
image={image} image={image}
title={item.name} title={item.name}
/> />
<MuiDivider light/> <MuiDivider light/>
<MuiCardContent> <MuiCardContent>
<Typography noWrap={true} variant="subtitle1"> <Typography noWrap={true} variant="subtitle1">
{item.name} {item.name}
</Typography> </Typography>
<Typography className={classes.pos} color="textSecondary"> <Typography className={classes.pos} color="textSecondary">
Ind Ind
</Typography> </Typography>
<Typography variant="subtitle2"> <Typography variant="subtitle2">
From: 100 Point From: 100 Point
</Typography> </Typography>
</MuiCardContent> </MuiCardContent>
<MuiCardActions> <MuiCardActions>
<MuiButton <MuiButton
fullWidth fullWidth
variant="outlined" variant="outlined"
color="primary" color="primary"
onClick={() => this.setState({isOpened: true, data: item})} onClick={() => this.setState({isOpened: true, data: item})}
size="small"> size="small">
Redeem Redeem
</MuiButton> </MuiButton>
</MuiCardActions> </MuiCardActions>
</MuiCard> </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>
{/*<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>
</Grid> </Grid>
<ModalVouchersComponent <ModalVouchersComponent
@ -345,4 +328,4 @@ class DashboardComponent extends React.Component {
} }
} }
export default withStyles(styles)(DashboardComponent); export default compose(withStyles(styles), withWidth(),)(DashboardComponent);