mirror of
https://github.com/aclindsa/moneygo.git
synced 2024-10-30 07:40:05 -04:00
Clean up UI for importing transactions
This commit is contained in:
parent
2736d5f996
commit
2088065603
@ -9,6 +9,7 @@ var Table = ReactBootstrap.Table;
|
|||||||
var Grid = ReactBootstrap.Grid;
|
var Grid = ReactBootstrap.Grid;
|
||||||
var Row = ReactBootstrap.Row;
|
var Row = ReactBootstrap.Row;
|
||||||
var Col = ReactBootstrap.Col;
|
var Col = ReactBootstrap.Col;
|
||||||
|
var Panel = ReactBootstrap.Panel;
|
||||||
|
|
||||||
var Button = ReactBootstrap.Button;
|
var Button = ReactBootstrap.Button;
|
||||||
var ButtonToolbar = ReactBootstrap.ButtonToolbar;
|
var ButtonToolbar = ReactBootstrap.ButtonToolbar;
|
||||||
@ -436,13 +437,19 @@ const AddEditTransactionModal = React.createClass({
|
|||||||
const ImportTransactionsModal = React.createClass({
|
const ImportTransactionsModal = React.createClass({
|
||||||
getInitialState: function() {
|
getInitialState: function() {
|
||||||
return {
|
return {
|
||||||
|
importing: false,
|
||||||
|
imported: false,
|
||||||
importFile: "",
|
importFile: "",
|
||||||
uploadProgress: -1};
|
uploadProgress: -1,
|
||||||
|
error: null};
|
||||||
},
|
},
|
||||||
handleCancel: function() {
|
handleCancel: function() {
|
||||||
this.setState({
|
this.setState({
|
||||||
|
importing: false,
|
||||||
|
imported: false,
|
||||||
importFile: "",
|
importFile: "",
|
||||||
uploadProgress: -1
|
uploadProgress: -1,
|
||||||
|
error: null
|
||||||
});
|
});
|
||||||
if (this.props.onCancel != null)
|
if (this.props.onCancel != null)
|
||||||
this.props.onCancel();
|
this.props.onCancel();
|
||||||
@ -465,6 +472,7 @@ const ImportTransactionsModal = React.createClass({
|
|||||||
handleImportTransactions: function() {
|
handleImportTransactions: function() {
|
||||||
var file = this.refs.importfile.getInputDOMNode().files[0];
|
var file = this.refs.importfile.getInputDOMNode().files[0];
|
||||||
var formData = new FormData();
|
var formData = new FormData();
|
||||||
|
this.setState({importing: true});
|
||||||
formData.append('importfile', file, this.state.importFile);
|
formData.append('importfile', file, this.state.importFile);
|
||||||
$.ajax({
|
$.ajax({
|
||||||
type: "POST",
|
type: "POST",
|
||||||
@ -479,14 +487,29 @@ const ImportTransactionsModal = React.createClass({
|
|||||||
}
|
}
|
||||||
return xhrObject;
|
return xhrObject;
|
||||||
}.bind(this),
|
}.bind(this),
|
||||||
beforeSend: function() {
|
success: function(data, status, jqXHR) {
|
||||||
console.log("before send");
|
var e = new Error();
|
||||||
},
|
e.fromJSON(data);
|
||||||
success: function() {
|
if (e.isError()) {
|
||||||
this.setState({uploadProgress: 100});
|
var errString = e.ErrorString;
|
||||||
console.log("success");
|
if (e.ErrorId == 3 /* Invalid Request */) {
|
||||||
|
errString = "Please check that the file you uploaded is a valid OFX file for this account and try again.";
|
||||||
|
}
|
||||||
|
this.setState({
|
||||||
|
importing: false,
|
||||||
|
error: errString
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
uploadProgress: 100,
|
||||||
|
importing: false,
|
||||||
|
imported: true
|
||||||
|
});
|
||||||
}.bind(this),
|
}.bind(this),
|
||||||
error: function(e) {
|
error: function(e) {
|
||||||
|
this.setState({importing: false});
|
||||||
console.log("error handler", e);
|
console.log("error handler", e);
|
||||||
},
|
},
|
||||||
// So jQuery doesn't try to process teh data or content-type
|
// So jQuery doesn't try to process teh data or content-type
|
||||||
@ -498,10 +521,31 @@ const ImportTransactionsModal = React.createClass({
|
|||||||
render: function() {
|
render: function() {
|
||||||
var accountNameLabel = ""
|
var accountNameLabel = ""
|
||||||
if (this.props.account != null )
|
if (this.props.account != null )
|
||||||
accountNameLabel = "Import File to '" + getAccountDisplayName(this.props.account, this.props.account_map) + "':";
|
accountNameLabel = "Importing to '" + getAccountDisplayName(this.props.account, this.props.account_map) + "' account:";
|
||||||
var progressBar = [];
|
var progressBar = [];
|
||||||
if (this.state.uploadProgress != -1)
|
if (this.state.importing && this.state.uploadProgress == 100) {
|
||||||
progressBar = (<ProgressBar now={this.state.uploadProgress} label="%(percent)s%" />);
|
progressBar = (<ProgressBar now={this.state.uploadProgress} active label="Importing transactions..." />);
|
||||||
|
} else if (this.state.importing && this.state.uploadProgress != -1) {
|
||||||
|
progressBar = (<ProgressBar now={this.state.uploadProgress} active label="Uploading... %(percent)s%" />);
|
||||||
|
}
|
||||||
|
|
||||||
|
var panel = [];
|
||||||
|
if (this.state.error != null) {
|
||||||
|
panel = (<Panel header="Error Importing Transactions" bsStyle="danger">{this.state.error}</Panel>);
|
||||||
|
} else if (this.state.imported) {
|
||||||
|
panel = (<Panel header="Successfully Imported Transactions" bsStyle="success">Your import is now complete.</Panel>);
|
||||||
|
}
|
||||||
|
|
||||||
|
var buttonsDisabled = (this.state.importing) ? "disabled" : "";
|
||||||
|
var button1 = [];
|
||||||
|
var button2 = [];
|
||||||
|
if (!this.state.imported && this.state.error == null) {
|
||||||
|
button1 = (<Button onClick={this.handleCancel} disabled={buttonsDisabled} bsStyle="warning">Cancel</Button>);
|
||||||
|
button2 = (<Button onClick={this.handleImportTransactions} disabled={buttonsDisabled} bsStyle="success">Import</Button>);
|
||||||
|
} else {
|
||||||
|
button1 = (<Button onClick={this.handleCancel} disabled={buttonsDisabled} bsStyle="success">OK</Button>);
|
||||||
|
}
|
||||||
|
var inputDisabled = (this.state.importing || this.state.error != null || this.state.imported) ? "disabled" : "";
|
||||||
return (
|
return (
|
||||||
<Modal show={this.props.show} onHide={this.handleCancel} bsSize="medium">
|
<Modal show={this.props.show} onHide={this.handleCancel} bsSize="medium">
|
||||||
<Modal.Header closeButton>
|
<Modal.Header closeButton>
|
||||||
@ -513,17 +557,19 @@ const ImportTransactionsModal = React.createClass({
|
|||||||
ref="importform">
|
ref="importform">
|
||||||
<Input type="file"
|
<Input type="file"
|
||||||
ref="importfile"
|
ref="importfile"
|
||||||
|
disabled={inputDisabled}
|
||||||
value={this.state.importFile}
|
value={this.state.importFile}
|
||||||
label={accountNameLabel}
|
label={accountNameLabel}
|
||||||
help="Select an OFX/QFX file to upload."
|
help="Select an OFX/QFX file to upload."
|
||||||
onChange={this.onImportChanged} />
|
onChange={this.onImportChanged} />
|
||||||
</form>
|
</form>
|
||||||
{progressBar}
|
{progressBar}
|
||||||
|
{panel}
|
||||||
</Modal.Body>
|
</Modal.Body>
|
||||||
<Modal.Footer>
|
<Modal.Footer>
|
||||||
<ButtonGroup>
|
<ButtonGroup>
|
||||||
<Button onClick={this.handleCancel} bsStyle="warning">Cancel</Button>
|
{button1}
|
||||||
<Button onClick={this.handleImportTransactions} bsStyle="success">Import</Button>
|
{button2}
|
||||||
</ButtonGroup>
|
</ButtonGroup>
|
||||||
</Modal.Footer>
|
</Modal.Footer>
|
||||||
</Modal>
|
</Modal>
|
||||||
|
Loading…
Reference in New Issue
Block a user