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

update: Transaction Page

Browse Source
This commit is contained in:
Rifqy Zacky Ariadhy
2019-01-04 21:27:56 +07:00
parent 86574453f9
commit 6abf942ded
6 changed files with 115 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/common/pages/App/index.js
View File

@@ -42,7 +42,9 @@ import {getMobileOperatingSystem} from '../../stores/firebase';
import Alert from "../../components/Alert";
import EmptyComponent from '../EmptyComponent';
import NumberFormat from 'react-number-format';
import faker from 'faker';
faker.locale = 'id_ID';
@inject("appstate")
@observer
export default class App extends React.Component {

56
src/common/pages/Transaction/ItemList/index.js Normal file
View File

@@ -0,0 +1,56 @@
import React from 'react';
import {Card} from 'antd';
import {inject, observer} from "mobx-react";
import faker from "faker";
import './style.scss';
@inject("appstate")
@observer
export default class ItemList extends React.Component {
constructor(props) {
super(props);
this.props = props;
}
render() {
const {
data = {
transaction_id: '',
created_at: '',
updated_at: '',
deleted_at: '',
name: '',
status: '',
price: '',
voucher_code: ``,
}
} = this.props;
return(
<Card className={'cardContainer'}>
<div className={'parentContainerLeft'}>
<div className={'headerContainer'}>
<p className={'transactionCode'}>{data.transaction_id}</p>
<p className={'transactionDate'}>{data.updated_at}</p>
</div>
<div className={'bodyContainer'}>
<p className={'nameText'}>{data.name}</p>
<div className={'childContainer'}>
<p className={'childTitle'}>Price</p>
<p className={'childText'}>{data.price}</p>
</div>
<div className={'childContainer'}>
<p className={'childTitle'}>Voucher Code</p>
<p className={'childText'}>{data.voucher_code}</p>
</div>
</div>
</div>
<div className={'parentContainerRight'}>
<p className={'statusTitle'}>Status</p>
<p className={'statusText'}>{data.status}</p>
</div>
</Card>
);
}
}

3
src/common/pages/Transaction/ItemList/style.scss Normal file
View File

@@ -0,0 +1,3 @@
.cardContainer{
margin-bottom: 15px;
}

54
src/common/pages/Transaction/index.js
View File

@@ -1,10 +1,11 @@
import React from 'react';
import {inject, observer} from "mobx-react";
import { Spin, Alert, Divider } from 'antd';
import './style.scss';
import faker from 'faker';
import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
import {FlatButton} from "material-ui";
import './style.scss';
import ItemList from "./ItemList";
@inject("appstate")
@observer
@@ -15,6 +16,49 @@ export default class TransactionPage extends React.Component {
}
render() {
const data = [
{
transaction_id: `INV/20190101/VII/X/${faker.random.alphaNumeric(6).toUpperCase()}`,
created_at: faker.date.past().toString(),
updated_at: faker.date.past().toString(),
deleted_at: null,
name: faker.commerce.productName(),
status: 'Transaction Success',
price: faker.commerce.price(),
voucher_code: `${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()}`,
},
{
transaction_id: `INV/20190101/VII/X/${faker.random.alphaNumeric(6).toUpperCase()}`,
created_at: faker.date.past().toString(),
updated_at: faker.date.past().toString(),
deleted_at: null,
name: faker.commerce.productName(),
status: 'Transaction Success',
price: faker.commerce.price(),
voucher_code: `${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()}`,
},
{
transaction_id: `INV/20190101/VII/X/${faker.random.alphaNumeric(6).toUpperCase()}`,
created_at: faker.date.past().toString(),
updated_at: faker.date.past().toString(),
deleted_at: null,
name: faker.commerce.productName(),
status: 'Transaction Success',
price: faker.commerce.price(),
voucher_code: `${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()}`,
},
{
transaction_id: `INV/20190101/VII/X/${faker.random.alphaNumeric(6).toUpperCase()}`,
created_at: faker.date.past().toString(),
updated_at: faker.date.past().toString(),
deleted_at: null,
name: faker.commerce.productName(),
status: 'Transaction Success',
price: faker.commerce.price(),
voucher_code: `${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()}`,
},
];
return(
<div className={'transactionContainer'}>
<div className={'parentContainer'}>
@@ -37,6 +81,12 @@ export default class TransactionPage extends React.Component {
</div>
</div>
<Divider className={'dividerTop'} />
<div className={'listContainer'}>
{data.map(item => {
return <ItemList data={item}/>
})}
</div>
</div>
</div>
)

2
src/common/pages/Vouchers/ItemCard/index.js
View File

@@ -31,7 +31,7 @@ export class ItemCard extends React.Component {
return (
<Card className={'itemCard'}>
<img className={'imageCard'} style={{height:59,width:120}} src={data.image} />
<img className={'imageCard'} src={data.image} />
<p className={'titleCard'}>{data.name}</p>
</Card>
)

1
src/common/pages/Vouchers/style.scss
View File

@@ -21,6 +21,7 @@
.imageCard{
width: 120px;
max-height: 60px;
}
.titleCard{