From 3a9f76351807b7e9607ba4bc3fb46812a79b26fc Mon Sep 17 00:00:00 2001 From: sipp11 Date: Sat, 19 Dec 2015 04:15:40 +0700 Subject: [PATCH] WIP --- src/components/Account.js | 62 ++++++++++++++++++++++++++++++++------- src/components/Tx.js | 28 ++++++++++++------ src/components/TxForm.js | 46 ++++++++++++++++------------- 3 files changed, 95 insertions(+), 41 deletions(-) diff --git a/src/components/Account.js b/src/components/Account.js index fbf2c10..abe28f0 100644 --- a/src/components/Account.js +++ b/src/components/Account.js @@ -1,5 +1,6 @@ import React from 'react'; import {Link} from 'react-router'; +import autobind from 'autobind-decorator'; import AuthenticatedComponent from './AuthenticatedComponent'; import AccountStore from '../stores/AccountStore.js'; import AccountService from '../services/AccountService.js'; @@ -9,6 +10,7 @@ import Tx from './Tx'; List of all account related to user */ +@autobind class Account extends React.Component { constructor(props) { super(props); @@ -51,29 +53,67 @@ class Account extends React.Component { return AccountStore.account } - renderAccounts(act) { + renderAccounts(act, index) { return ( -
  • {act.title} - {act.currency} - -- owner {act.owner} - -- ro #{act.ro_users.length} - -- rw #{act.rw_users.length}
    • +
  • + {act.title} {act.currency} + -- owner {act.owner}
    • ) } + handleAccountView(act) { + this.setState({account: act}); + } + + renderAccountView() { + var act = this.state.account; + return ( +
    +

    {act.title}

    + + + Transactions +
    + ); + } + + render() { + var accountView = ''; + if (this.state.account) { + accountView = this.renderAccountView(); + } + if (this.props.params.accountId) { return (
    - +
    + +
    ) } else { return ( -
    - +
    +
    +
    +
      + {this.state.accounts.map(this.renderAccounts)} +
    +
    +
    + {accountView} +
    +
    + + Account +
    +
    ) } diff --git a/src/components/Tx.js b/src/components/Tx.js index d3f35ff..63914a7 100644 --- a/src/components/Tx.js +++ b/src/components/Tx.js @@ -25,18 +25,22 @@ class Tx extends React.Component { this.setState(this.getTxState()); } + _accountChange() { + this._account = AccountStore.account; + AccountStore.removeChangeListener(this._accountChange); + } + componentDidMount() { - if ( ( !this.state.account ) || - ( this.state.account.id !== +this.props.params.accountId ) ) { - this.fetchAccount(this.props.params.accountId); - this.fetchTxs(this.props.params.accountId); + this._account = this.props.account; + if (!this._account) { + this._account = this.fetchAccount(this.props.params.accountId); + AccountStore.addChangeListener(this._accountChange); } + this.fetchTxs(this.props.params.accountId); TxStore.addChangeListener(this._onChange); - AccountStore.addChangeListener(this._onChange); } componentWillUnmount() { - AccountStore.removeChangeListener(this._onChange); TxStore.removeChangeListener(this._onChange); } @@ -50,7 +54,6 @@ class Tx extends React.Component { getTxState() { return { - account: AccountStore.account, txs: TxStore.txs, tx: {} } @@ -82,6 +85,7 @@ class Tx extends React.Component { updateTx(tx) { tx.user = this.props.user.user_id; + tx.account = this._account.id; if (!tx.id) return this.newTx(tx) @@ -104,14 +108,20 @@ class Tx extends React.Component { } render() { + var txsList = ( +
  • No transaction yet
    • + ); + if (this.state.txs.length) { + txsList = this.state.txs.map(this.renderTx); + } return (
    -

    {this.state.account.title}

    +

    {this.props.account.title}

    -
      {this.state.txs.map(this.renderTx)}
    +
      {txsList}
    diff --git a/src/components/TxForm.js b/src/components/TxForm.js index c31d318..6edd86f 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 @@ -23,7 +23,7 @@ class TxForm extends React.Component { amount : this.parseEquation(this.refs.amount.value), currency : this.refs.currency.value, date : this.refs.date.value, - account : this.refs.account.value, + // account : this.refs.account.value, note : this.refs.note.value } // 3. Add the tx to the App State @@ -57,14 +57,10 @@ class TxForm extends React.Component { defaultTxState() { return { id: '', amount: '', currency: '', - date: '2015-12-16', note: '' + date: moment().format('YYYY-MM-DD'), note: '' } } - resetForm() { - this.setState({tx: this.defaultTxState()}); - } - deleteItem() { var tx = { id : +this.refs.id.value @@ -73,16 +69,26 @@ class TxForm extends React.Component { this.refs.txForm.reset(); } + resetForm() { + this.refs.txForm.reset(); + this.setState({tx: this.defaultTxState(), clearForm: true}) + } + render() { this.state = this.state || {}; if (this.state.updated) { this.state.tx = this.state.updated; delete this.state["updated"]; - } else { + } else if (!this.state.clearForm) { this.state.tx = JSON.parse(JSON.stringify(this.props.tx)); } - if (Object.keys(this.state.tx).length == 0) + if (Object.keys(this.state.tx).length == 0) { this.state.tx = this.defaultTxState(); + } + + if (this.state.clearForm) { + delete this.state["clearForm"]; + } var hasItem = ( (this.state.tx.id) ? true : false ); var delDisabledClassName = cx({ @@ -130,15 +136,11 @@ class TxForm extends React.Component { name="date" value={this.state.tx.date} onChange={this.handleChange} />
    - +
    + + +
    @@ -150,9 +152,11 @@ class TxForm extends React.Component {
    - - - + + Reset + - Remove Tx