Merge branch 'master' of gitlab.com:asacreative/redemption-point/new-frontend-customer-redemption-point

This commit is contained in:
enggar_ganteng 2019-01-05 20:15:14 +07:00
commit 21068d285b
2 changed files with 68 additions and 87 deletions

View File

@ -20,11 +20,9 @@ import {
} from 'material-ui';
import {Table as TableAntd} from 'antd';
import {startCase} from 'lodash';
import {LINKS} from "../../routes";
import {Link} from 'react-router-dom';
import SearchIcon from 'material-ui/svg-icons/action/search';
import UnarchiveIcon from 'material-ui/svg-icons/content/unarchive';
import ArchiveIcon from 'material-ui/svg-icons/content/archive';
import DC from 'decimal.js-light';
import NumberFormat from 'react-number-format';
import MoreIcon from 'material-ui/svg-icons/navigation/more-vert';
@ -32,7 +30,7 @@ import LoadingDialog from "../LoadingDialog";
import Loader from 'react-loader-advanced';
import './style.scss';
import {DIALOG} from "../../stores/global_ui";
import EmptyComponent from '../EmptyComponent';
import faker from 'faker';
@inject('appstate')
@observer
@ -49,11 +47,6 @@ export default class WalletComponent extends React.Component {
};
this.defaultState = Object.assign({}, this.state);
this.http = props.appstate.http;
this.authStore = props.appstate.auth;
this.globalUI = props.appstate.globalUI;
this.transactionStore = props.appstate.transaction;
this.bankStore = props.appstate.bank;
this.userData = props.appstate.userData;
}
componentDidMount() {
@ -67,48 +60,42 @@ export default class WalletComponent extends React.Component {
// this.authStore.getWallet();
}
handleUpdateInput = (searchText) => {
this.setState({
searchText: searchText,
});
};
handleNewRequest = () => {
this.setState({
searchText: '',
});
};
tabsHandleChange = (value) => {
this.setState({
slideIndex: value,
});
};
search = (event)=>{
if(event.target.value.length == 0){
this.transactionStore.isSearching = false;
}
else{
this.transactionStore.isSearching = true;
this.transactionStore.search(event.target.value);
}
};
handleChangeSorter = (pagination, filters, sorter) => {
// console.log('Various parameters', pagination, filters, sorter);
this.setState({
filteredInfo: filters,
sortedInfo: sorter,
});
};
handleChange = (event, index, value) => this.setState({value});
render() {
const voucher = <NumberFormat value={(500000).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/>;
const points = <NumberFormat value={15000} displayType={'text'} thousandSeparator={true}/>;
const data = [
{
id: faker.random.uuid(),
created_at: faker.date.past(),
type: 'Points',
amount: faker.commerce.price()
},
{
id: faker.random.uuid(),
created_at: faker.date.past(),
type: 'Points',
amount: faker.commerce.price()
},
{
id: faker.random.uuid(),
created_at: faker.date.past(),
type: 'Voucher',
amount: faker.commerce.price()
},
{
id: faker.random.uuid(),
created_at: faker.date.past(),
type: 'Voucher',
amount: faker.commerce.price()
},
{
id: faker.random.uuid(),
created_at: faker.date.past(),
type: 'Points',
amount: faker.commerce.price()
},
];
const columns = [{
title: 'Id',
@ -133,25 +120,26 @@ export default class WalletComponent extends React.Component {
dataIndex: 'type',
key: 'type',
className: 'recentOrder-noOrder',
render: (text) => <span>{text.name}</span>
},
{
title: 'Status',
dataIndex: 'status',
key: 'status',
className: 'recentOrder-status',
render: (text) => <div><span>{text === 'created' ? 'Waiting Approval' : startCase(text)}</span></div>
render: (text) => <span>{text}</span>
},
// {
// title: 'Status',
// dataIndex: 'status',
// key: 'status',
// className: 'recentOrder-status',
// render: (text) => <div><span>{text === 'created' ? 'Waiting Approval' : startCase(text)}</span></div>
// },
{
title: 'Amount',
dataIndex: 'amount',
key: 'amount',
className: 'recentOrder-customer bolder green',
render: (text) => {
return <NumberFormat
value={new DC(text).toNumber()} displayType={'text'}
thousandSeparator={true} prefix={'Rp. '}/>
return <span>
<NumberFormat
value={new DC(text).toNumber()} displayType={'text'}
thousandSeparator={true}/>
</span>
}
@ -165,30 +153,18 @@ export default class WalletComponent extends React.Component {
<h3 className="headerMenu">Wallet</h3>
</div>
</div>
{
(this.transactionStore.saldo.length === 2) ?
<div>
<div className="col s6 m6">
<Card className="cardLite row">
<CardTitle titleStyle={{color:'#6772e5'}} title={voucher} subtitle="Voucher"/>
</Card>
</div>
<div className="col s6 m6">
<Card className="cardLite row">
<CardTitle titleStyle={{color:'#6772e5'}} title={points} subtitle="Points"/>
</Card>
</div>
</div>
:
<div className="col s12 m12">
<Card className="cardLite row">
<CardTitle title={voucher} subtitle="Your Voucher"/>
</Card>
<Card className="cardLite row">
<CardTitle title={points} subtitle="Your Points"/>
</Card>
</div>
}
<div>
<div className="col s6 m6">
<Card className="cardLite row">
<CardTitle titleStyle={{color:'#6772e5'}} title={voucher} subtitle="Voucher"/>
</Card>
</div>
<div className="col s6 m6">
<Card className="cardLite row">
<CardTitle titleStyle={{color:'#6772e5'}} title={points} subtitle="Points"/>
</Card>
</div>
</div>
<div className="col s12">
<Card className="cardLite" style={{paddingBottom: 5}}>
@ -196,7 +172,7 @@ export default class WalletComponent extends React.Component {
<ToolbarGroup>
<SearchIcon style={{marginRight: 8, color: "#999"}}/>
<TextField
hintText="Search Transaction"
hintText="Search Redeem History"
style={{fontSize: 14}}
hintStyle={{fontSize: 14}}
fullWidth={true}
@ -240,14 +216,14 @@ export default class WalletComponent extends React.Component {
</Toolbar>
<Divider/>
<div>
<Loader show={this.globalUI.loadingVisibility} message={<LoadingDialog/>}
<Loader show={false} message={<LoadingDialog/>}
messageStyle={{textAlign: 'center'}}
backgroundStyle={{backgroundColor: 'rgba(255,255,255,0.5)'}}>
<TableAntd
pagination={true}
className='table-padded'
dataSource={this.transactionStore.isSearching ? this.transactionStore.transactionListFiltered : this.transactionStore.list}
onChange={this.handleChangeSorter}
className='table-padded tableWallet'
dataSource={data}
// onChange={this.handleChangeSorter}
columns={columns}
// onRow={(record) => {`
// return {

View File

@ -1,5 +1,10 @@
.wallet {
margin-top: 35px;
.tableWallet{
padding: 15px;
}
.container {
padding: 25px;