diff --git a/src/components/AccountForm.js b/src/components/AccountForm.js index e69de29..b22115a 100644 --- a/src/components/AccountForm.js +++ b/src/components/AccountForm.js @@ -0,0 +1,120 @@ +/* + Add Account Form + +*/ +import React from 'react'; +import ReactMixin from 'react-mixin'; +import Catalyst from 'react-catalyst'; +import autobind from 'autobind-decorator'; +import cx from 'classnames'; +import parser from '../libs/parser'; +import moment from 'moment'; + + +@autobind +class AccountForm extends React.Component { + + updateAccount(event) { + // 1. Stop the form from submitting + event.preventDefault(); + // 2. Take the data from the form and create an object + var account = { + id : this.refs.id.value, + title : this.refs.title.value, + currency : this.refs.currency.value, + budget : this.refs.budget.value, + note : this.refs.note.value, + } + // 3. Add the Account to the App State + // console.log(this.props); + this.props.accountFormHandler(account); + this.refs.AccountForm.reset(); + } + + handleChange(evt) { + var currAccount = this.state.account; + currAccount[evt.target.name] = evt.target.value; + this.setState({updated: currAccount}); + } + + defaultAccountState() { + return { + id: '', title: 'new account', currency: 'usd', budget: '', note: '', + } + } + + resetForm() { + this.setState({account: this.defaultAccountState()}); + } + + deleteItem() { + var account = { + id : +this.refs.id.value + } + this.props.deleteAccount(account); + this.refs.AccountForm.reset(); + } + + render() { + this.state = this.state || {}; + if (this.state.updated) { + this.state.account = this.state.updated; + delete this.state["updated"]; + } else { + this.state.account = JSON.parse(JSON.stringify(this.props.account)); + } + if (Object.keys(this.state.account).length == 0) + this.state.account = this.defaultAccountState(); + + var hasItem = ( (this.state.account.id) ? true : false ); + + return ( +
+
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+
+
+ + + + +
+
+
+ ) + } +}; + +AccountForm.propTypes = { + AccountFormHandler : React.PropTypes.func.isRequired, + deleteAccount : React.PropTypes.func.isRequired, + accounts : React.PropTypes.array.isRequired, + Account : React.PropTypes.object, +} + +ReactMixin.onClass(AccountForm, Catalyst.LinkedStateMixin); + +export default AccountForm; diff --git a/src/components/TxForm.js b/src/components/TxForm.js index c31d318..f3e63ac 100644 --- a/src/components/TxForm.js +++ b/src/components/TxForm.js @@ -8,7 +8,7 @@ import Catalyst from 'react-catalyst'; import autobind from 'autobind-decorator'; import cx from 'classnames'; import parser from '../libs/parser'; -import Moment from 'moment'; +import moment from 'moment'; @autobind @@ -57,7 +57,7 @@ class TxForm extends React.Component { defaultTxState() { return { id: '', amount: '', currency: '', - date: '2015-12-16', note: '' + date: moment().format('YYYY-MM-DD'), note: '' } }