294 lines
10 KiB
JavaScript
294 lines
10 KiB
JavaScript
import React from 'react';
|
|
import {observer, inject} from 'mobx-react';
|
|
import {Dialog, Divider, FlatButton, MenuItem, RaisedButton, SelectField, TextField} from "material-ui";
|
|
|
|
@inject('appstate')
|
|
@observer
|
|
export default class DepositFormComponent extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.props = props;
|
|
this.state = {
|
|
openedDialogBank : false,
|
|
};
|
|
this.defaultState = Object.assign({}, this.state);
|
|
this.http = props.appstate.http;
|
|
this.bankStore = props.appstate.bank;
|
|
this.depositStore = props.appstate.deposit;
|
|
this.currency = props.appstate.currencyStore;
|
|
}
|
|
|
|
handlePaymentProof = (event, index, value) => {
|
|
|
|
const file = event.nativeEvent.target.files[0];
|
|
const allowedFile = ['jpg', 'jpeg', 'png', 'gif'];
|
|
|
|
const [ext] = file.name.split('.').reverse();
|
|
|
|
if (!allowedFile.includes(ext.toLowerCase())) {
|
|
|
|
}
|
|
this.depositStore.file = file.name;
|
|
|
|
this.http.upload(file).then((response) => {
|
|
this.depositStore.data.payment_proof = "/api/v1" + response.path
|
|
});
|
|
};
|
|
|
|
handleOpen = () => {
|
|
this.setState({openedDialog: true});
|
|
};
|
|
|
|
handleClose = () => {
|
|
this.setState({openedDialog: false});
|
|
};
|
|
|
|
handleOpenBank = () => {
|
|
this.setState({
|
|
openedDialogBank:true
|
|
})
|
|
};
|
|
|
|
handleCloseBank = () => {
|
|
this.setState({
|
|
openedDialogBank:false
|
|
})
|
|
};
|
|
|
|
handleChangeBankName = (event) => {
|
|
this.bankStore.data.name = event.target.value;
|
|
};
|
|
|
|
handleChangeCurrency = (event, index, value) => {
|
|
this.bankStore.data.currency_id = value.id;
|
|
this.setState({currency: value});
|
|
console.log(this.bankStore.data.currency_id, value)
|
|
};
|
|
|
|
handleChangeOnBehalf = (event) => {
|
|
this.bankStore.data.on_behalf = event.target.value;
|
|
};
|
|
|
|
handleChangeAccount = (event) => {
|
|
this.bankStore.data.account_number = event.target.value;
|
|
};
|
|
|
|
postDataBank = () => {
|
|
this.bankStore.post();
|
|
this.setState({
|
|
openedDialogBank: false,
|
|
openedDialog:false
|
|
});
|
|
};
|
|
|
|
componentDidMount() {
|
|
this.bankStore.getAll();
|
|
this.bankStore.getAdminBank();
|
|
this.currency.getAll();
|
|
}
|
|
|
|
handleBank = (event, index, value) => {
|
|
this.depositStore.bank = value;
|
|
this.depositStore.data.bank_name = this.depositStore.bank.name;
|
|
this.depositStore.data.bank_account_number = this.depositStore.bank.account_number;
|
|
this.depositStore.data.bank_behalf_of = this.depositStore.bank.on_behalf;
|
|
}
|
|
|
|
handleBankAdmin = (event, index, value) => {
|
|
this.depositStore.bankAdmin = value;
|
|
this.depositStore.data.bank_to.id = this.depositStore.bankAdmin.id;
|
|
this.depositStore.data.bank_to.name = this.depositStore.bankAdmin.name;
|
|
this.depositStore.data.bank_to.account_number = this.depositStore.bankAdmin.account_number;
|
|
this.depositStore.data.bank_to.on_behalf = this.depositStore.bankAdmin.on_behalf;
|
|
}
|
|
|
|
handleAmount = (event) => {
|
|
this.depositStore.data.amount = event.target.value;
|
|
}
|
|
|
|
render() {
|
|
const actionsBank = [
|
|
<FlatButton
|
|
label="No"
|
|
primary={true}
|
|
style={{marginRight: 10}}
|
|
onClick={this.handleCloseBank}
|
|
/>,
|
|
<RaisedButton
|
|
label="Yes"
|
|
primary={true}
|
|
onClick={this.handleOpen}
|
|
/>,
|
|
];
|
|
const actions = [
|
|
<FlatButton
|
|
label="Cancel"
|
|
primary={true}
|
|
style={{marginRight: 10}}
|
|
onClick={this.handleClose}
|
|
/>,
|
|
<RaisedButton
|
|
label="Submit"
|
|
primary={true}
|
|
onClick={() => this.postDataBank()}
|
|
/>,
|
|
];
|
|
|
|
return (
|
|
<div>
|
|
<div className="row">
|
|
<div className="col s12 m6 l6">
|
|
<p style={{color: '#32325d', fontSize: '12px'}}>FROM BANK</p>
|
|
<SelectField
|
|
floatingLabelText={"Bank"}
|
|
fullWidth={true}
|
|
onChange={this.handleBank}
|
|
value={this.depositStore.bank}
|
|
hintText={this.depositStore.bank.name}
|
|
>
|
|
{this.bankStore.list.map(item => {
|
|
return (<MenuItem key={item.id} value={item} primaryText={`Bank ${item.name}`}/>)
|
|
})}
|
|
<Divider/>
|
|
<MenuItem key={0} value={0} style={{color: "blue"}} primaryText="Create New Bank.." onClick={this.handleOpenBank}/>
|
|
</SelectField>
|
|
<TextField
|
|
type="text"
|
|
fullWidth={true}
|
|
floatingLabelText={"Bank Account Number"}
|
|
disabled={true}
|
|
underlineDisabledStyle={{borderBottom: '1px dotted rgba(0, 0, 0, 0.3)'}}
|
|
value={this.depositStore.data.bank_account_number}
|
|
/>
|
|
<br/>
|
|
<TextField
|
|
type="text"
|
|
fullWidth={true}
|
|
floatingLabelText={"Behalf Of"}
|
|
disabled={true}
|
|
underlineDisabledStyle={{borderBottom: '1px dotted rgba(0, 0, 0, 0.3)'}}
|
|
value={this.depositStore.data.bank_behalf_of}
|
|
/>
|
|
</div>
|
|
<div className="col s12 m6 l6">
|
|
<p style={{color: '#32325d', fontSize: '12px'}}>TO BANK</p>
|
|
<SelectField
|
|
floatingLabelText={"Bank"}
|
|
fullWidth={true}
|
|
value={(this.bankStore.listAdmin.length > 0) ? this.bankStore.listAdmin[0].id : 0}
|
|
onChange={this.handleBankAdmin}
|
|
value={this.depositStore.bankAdmin}
|
|
>
|
|
{this.bankStore.listAdmin.map(item => {
|
|
return (<MenuItem key={item.id} value={item} primaryText={`Bank ${item.name}`}/>)
|
|
})}
|
|
</SelectField>
|
|
<div className="listCustDetail bankDetailInformation">
|
|
<div className="listCustDetailItem flex">
|
|
<p className="listCustomerDetailItemKey">Bank</p>
|
|
<code
|
|
className="listCustomerDetailItemValue">{this.depositStore.bankAdmin.name == '' ? "-" : this.depositStore.bankAdmin.name}</code>
|
|
</div>
|
|
<div className="listCustDetailItem flex">
|
|
<p className="listCustomerDetailItemKey">Behalf of</p>
|
|
<p
|
|
className="listCustomerDetailItemValue">{this.depositStore.bankAdmin.on_behalf == '' ? "--" : this.depositStore.bankAdmin.on_behalf}</p>
|
|
</div>
|
|
<div className="listCustDetailItem flex">
|
|
<p className="listCustomerDetailItemKey">Account Number</p>
|
|
<p
|
|
className="listCustomerDetailItemValue">{this.depositStore.bankAdmin.account_number == '' ? "--" : this.depositStore.bankAdmin.account_number}</p>
|
|
</div>
|
|
<div className="listCustDetailItem flex">
|
|
<p className="listCustomerDetailItemKey">Currency</p>
|
|
<p
|
|
className="listCustomerDetailItemValue">{this.depositStore.bankAdmin.account_number == '' ? "--" : "IDR"}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="row">
|
|
<div className="col s12 m6 l6">
|
|
<TextField fullWidth={true} min="0" type={"number"} floatingLabelText={"Amount (IDR)"}
|
|
onChange={this.handleAmount} defaultValue={this.depositStore.data.amount}/>
|
|
</div>
|
|
</div>
|
|
<div className="row">
|
|
<div className="col s12">
|
|
<div className="file-field input-field marginBottom18">
|
|
<div className="btn">
|
|
<span>File</span>
|
|
<input type="file" onChange={(...args) => this.handlePaymentProof(...args)} accept="image/*"/>
|
|
</div>
|
|
<div className="file-path-wrapper">
|
|
<input className="file-path validate" type="text"
|
|
placeholder="Upload the evidence (jpg,jpeg,png,gif)" value={this.depositStore.file}/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Dialog
|
|
title="Adding Bank"
|
|
actions={actionsBank}
|
|
modal={true}
|
|
open={this.state.openedDialogBank}
|
|
onRequestClose={() => this.handleCloseBank()}
|
|
>
|
|
<div style={{padding: 20}}>
|
|
<div className="row">
|
|
<div className="col s12 m6 l6">
|
|
<p className="label-form">Name</p>
|
|
<TextField
|
|
hintText=" E.g. BCA"
|
|
onChange={this.handleChangeBankName}
|
|
fullWidth={true}
|
|
/>
|
|
</div>
|
|
<div className="col s12 m6 l6">
|
|
<p className="label-form">Currency</p>
|
|
<SelectField
|
|
fullWidth={true}
|
|
value={(this.state.currency) ? this.state.currency : (() => this.setState({currency: this.currency.currencyList[0]}))}
|
|
onChange={this.handleChangeCurrency}>
|
|
{this.currency.currencyList.map((item, index) => {
|
|
return (<MenuItem key={index} value={item} primaryText={item.name} />)
|
|
})}
|
|
</SelectField>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="row">
|
|
<div className="col s12 m6 l6">
|
|
<p className="label-form">Account</p>
|
|
<TextField
|
|
hintText=" E.g. xxxxxxxxxx"
|
|
onChange={this.handleChangeAccount}
|
|
fullWidth={true}
|
|
type="number"
|
|
/>
|
|
</div>
|
|
<div className="col s12 m6 l6">
|
|
<p className="label-form">On Behalf</p>
|
|
<TextField
|
|
hintText=" E.g. Ridwan Abadi"
|
|
onChange={this.handleChangeOnBehalf}
|
|
fullWidth={true}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Dialog>
|
|
<Dialog
|
|
title="Warning"
|
|
actions={actions}
|
|
modal={true}
|
|
open={this.state.openedDialog}
|
|
onRequestClose={() => this.handleClose()}
|
|
>
|
|
Make sure all of your data is correct before submitting.
|
|
</Dialog>
|
|
</div>
|
|
)
|
|
}
|
|
}
|