containers/TransactionContainer.js

TransactionContainer.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import TransactionActions from '../../Redux/TransactionRedux';
import TransactionComponent from '../../Components/Transaction/TransactionComponent';
import { browserHistory } from 'react-router';
import { Row, Grid, Col } from 'react-bootstrap';
import { DatePicker, RaisedButton } from 'material-ui';
import FontIcon from 'material-ui/FontIcon';
import IconButton from 'material-ui/IconButton';
import moment from 'moment';

class TransactionContainer extends Component {
    state = {
        startDt: moment().startOf('month').format('YYYY-MM-DD').toString(),
        endDt: moment().endOf('month').format('YYYY-MM-DD').toString(),
    }
    componentWillMount() {
        this.searchTransactions(this.state.startDt, this.state.endDt);
    }
    searchTransactions = () => {
        this.props.actions.transaction.fetchEntityTransactionsByAccount(
            3,
            1,
            {
                start_dt: this.state.startDt,
                end_dt: this.state.endDt,
                group_by_date: 0
            },
            ['account_origin', 'account_destine', 'business_center', 'assets']
        );
    }

    onTransactionClick = () => {
    }

    deleteTransaction = () => {
    }
    changeStartDt = (event, date) => {
        this.setState({startDt: date});
    }
    changeEndDt = (event, date) => {
        this.setState({endDt: date});
    }

    changeBusinessCenter = (transactionId, business_center_id) => {
        this.props.actions.transaction.updateTransaction(transactionId, { business_center_id, assets:[] });
    }

    uploadAsset = (transactionId, uriAssets) => {
        this.props.actions.transaction.updateTransaction(transactionId, {}, uriAssets);
    }

    deleteAsset = (transactionId, assetId) => {
        this.props.actions.transaction.deleteTransactionAsset(transactionId, assetId);
    }
    changeLock = (transactionId, isProtected) => {
        console.debug(transactionId, isProtected)
    }

    syncTransactions = () => {
        this.props.actions.transaction.syncEntityTransactionsByAccount(3, 1);
    }

    render () {
        let transactions = <TransactionComponent
            items={this.props.transaction.items}
            searchTransactions={this.onSearchTransactions}
            transactionClick={this.onTransactionClick}
            deleteTransaction={this.onDeleteTransaction}
            businessCenters={this.props.business_center.items}
            onChangeBusinessCenter={this.changeBusinessCenter}
            onUploadAssets={this.uploadAsset}
            onDeleteAsset={this.deleteAsset}
            onChangeLock={this.changeLock}
        />;

        transactions = this.props.transaction.items.length > 0 ? transactions : [];

        return (
                <div>
                    <Row><h2>Transacciones</h2></Row>
                    <Row>
                        <Col md={3}>
                            <DatePicker mode="landscape" hintText="Inicio" onChange={this.changeStartDt} />
                        </Col>
                        <Col md={3}>
                            <DatePicker mode="landscape" hintText="Termino" onChange={this.changeEndDt} />
                        </Col>
                        <Col md={3}>
                            <RaisedButton onClick={this.searchTransactions} primary={true}>Buscar</RaisedButton>
                        </Col>
                        <Col md={3}>
                            <IconButton onClick={this.syncTransactions}>
                                <FontIcon className="material-icons">sync</FontIcon>
                            </IconButton>
                        </Col>
                    </Row>
                    <Row>{ transactions }</Row>
                </div>
        );
    }
}

const mapStateToProps = (state) => ({
    transaction : state.transaction,
    business_center : state.business_center,
});

const mapDispatchToProps = (dispatch) => ({
	actions: {
        transaction: bindActionCreators(TransactionActions, dispatch),
    },
});

export default connect(mapStateToProps, mapDispatchToProps)(TransactionContainer);