Cadastro de ciclo de pagamento

Author: leonardomleitao

my-money-app/frontend/src/billingCycle/billingCycle.jsx

@@ -9,17 +9,15 @@ import TabsHeader from '../common/tab/tabsHeader'
 import TabsContent from '../common/tab/tabsContent'
 import TabHeader from '../common/tab/tabHeader'
 import TabContent from '../common/tab/tabContent'
-import { selectTab, showTabs } from '../common/tab/tabActions'
-import { create, update, remove } from './billingCycleActions'
+import { init, create, update, remove } from './billingCycleActions'
 
 import List from './billingCycleList'
 import Form from './billingCycleForm'
 
 class BillingCycle extends Component {
 
     componentWillMount() {
-        this.props.selectTab('tabList')
-        this.props.showTabs('tabList', 'tabCreate')
+        this.props.init()
     }
 
     render() {
@@ -39,26 +37,26 @@ class BillingCycle extends Component {
                                 <List />
                             </TabContent>
                             <TabContent id='tabCreate'>
-                                <Form onSubmit={this.props.create} 
+                                <Form onSubmit={this.props.create}
                                     submitLabel='Incluir' submitClass='primary' />
                             </TabContent>
                             <TabContent id='tabUpdate'>
-                                <Form onSubmit={this.props.update} 
+                                <Form onSubmit={this.props.update}
                                     submitLabel='Alterar' submitClass='info' />
                             </TabContent>
                             <TabContent id='tabDelete'>
-                                <Form onSubmit={this.props.remove} readOnly={true} 
+                                <Form onSubmit={this.props.remove} readOnly={true}
                                     submitLabel='Excluir' submitClass='danger' />
                             </TabContent>
                         </TabsContent> 
                     </Tabs> 
                 </Content> 
-            </div>
+            </div> 
         )
     }
 }
 
 const mapDispatchToProps = dispatch => bindActionCreators({
-    selectTab, showTabs, create, update, remove
+    init, create, update, remove
 }, dispatch)
 export default connect(null, mapDispatchToProps)(BillingCycle)

my-money-app/frontend/src/billingCycle/billingCycleActions.js

@@ -4,6 +4,7 @@ import { reset as resetForm, initialize } from 'redux-form'
 import { showTabs, selectTab } from '../common/tab/tabActions'
 
 const BASE_URL = 'http://localhost:3003/api'
+const INITIAL_VALUES = {credits: [{}], debts: [{}]}
 
 export function getList() {
     const request = axios.get(`${BASE_URL}/billingCycles`)
@@ -31,12 +32,7 @@ function submit(values, method) {
         axios[method](`${BASE_URL}/billingCycles/${id}`, values)
             .then(resp => {
                 toastr.success('Sucesso', 'Operação Realizada com sucesso.')
-                dispatch([ 
-                    resetForm('billingCycleForm'),
-                    getList(),
-                    selectTab('tabList'),
-                    showTabs('tabList', 'tabCreate')
-                ])
+                dispatch(init())
             })
             .catch(e => {
                 e.response.data.errors.forEach(error => toastr.error('Erro', error))
@@ -48,30 +44,23 @@ export function showUpdate(billingCycle) {
     return [ 
         showTabs('tabUpdate'),
         selectTab('tabUpdate'),
-        select(billingCycle)
+        initialize('billingCycleForm', billingCycle)
     ]
 }
 
 export function showDelete(billingCycle) {
     return [ 
         showTabs('tabDelete'),
         selectTab('tabDelete'),
-        select(billingCycle)
+        initialize('billingCycleForm', billingCycle)
     ]
 }
 
-export function select(billingCycle) {
-    return {
-        type: 'BILLING_CYCLE_SELECTED',
-        payload: billingCycle
-    }
-}
-
-export function cancel() {
-    return [ 
+export function init() {
+    return [
         showTabs('tabList', 'tabCreate'),
         selectTab('tabList'),
-        resetForm('billingCycleForm'),
-        { type: 'BILLING_CYCLE_CANCELED' }
+        getList(),
+        initialize('billingCycleForm', INITIAL_VALUES)
     ]
 }

my-money-app/frontend/src/billingCycle/billingCycleForm.jsx

@@ -1,41 +1,58 @@
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
-import { reduxForm, Field, initialize } from 'redux-form'
-import labelAndInput from '../common/form/labelAndInput'
-import { cancel } from './billingCycleActions'
+import { reduxForm, Field, formValueSelector } from 'redux-form'
+
+import { init } from './billingCycleActions'
+import LabelAndInput from '../common/form/labelAndInput'
+import ItemList from './itemList'
+import Summary from './summary'
 
 class BillingCycleForm extends Component {
 
-    componentWillMount() {
-        initialize('billingCycleForm', this.props.initialValues)
+    calculateSummary() {
+        const sum = (t, v) => t + v
+        return {
+            sumOfCredits: this.props.credits.map(c => +c.value || 0).reduce(sum),
+            sumOfDebts: this.props.debts.map(d => +d.value || 0).reduce(sum)
+        }
     }
 
     render() {
-        const { handleSubmit, readOnly } = this.props
+        const { handleSubmit, readOnly, credits, debts } = this.props
+        const { sumOfCredits, sumOfDebts } = this.calculateSummary()
         return (
             <form role='form' onSubmit={handleSubmit}>
                 <div className='box-body'>
-                    <Field name='name' component={labelAndInput} readOnly={readOnly}
+                    <Field name='name' component={LabelAndInput} readOnly={readOnly}
                         label='Nome' cols='12 4' placeholder='Informe o nome' />
-                    <Field name='month' component={labelAndInput} type='number' readOnly={readOnly}
+                    <Field name='month' component={LabelAndInput} type='number' readOnly={readOnly}
                         label='Mês' cols='12 4' placeholder='Informe o mês' />
-                    <Field name='year' component={labelAndInput} type='number' readOnly={readOnly}
+                    <Field name='year' component={LabelAndInput} type='number' readOnly={readOnly}
                         label='Ano' cols='12 4' placeholder='Informe o ano' />
+                    <Summary credit={sumOfCredits} debt={sumOfDebts} />
+                    <ItemList cols='12 6' list={credits} readOnly={readOnly}
+                        field='credits' legend='Créditos' />
+                    <ItemList cols='12 6' list={debts} readOnly={readOnly}
+                        field='debts' legend='Débitos' showStatus={true} />
                 </div>
                 <div className='box-footer'>
                     <button type='submit' className={`btn btn-${this.props.submitClass}`}>
                         {this.props.submitLabel}
                     </button>
                     <button type='button' className='btn btn-default'
-                        onClick={this.props.cancel}>Cancelar</button>
+                        onClick={this.props.init}>Cancelar</button>
                 </div>
             </form>
         )
     }
 }
 
-BillingCycleForm = reduxForm({form: 'billingCycleForm'})(BillingCycleForm)
-const mapStateToProps = state => ({initialValues: state.billingCycle.initialValues})
-const mapDispatchToProps = dispatch => bindActionCreators({cancel}, dispatch)
+BillingCycleForm = reduxForm({form: 'billingCycleForm', destroyOnUnmount: false})(BillingCycleForm)
+const selector = formValueSelector('billingCycleForm')
+const mapStateToProps = state => ({
+    credits: selector(state, 'credits'),
+    debts: selector(state, 'debts')
+})
+const mapDispatchToProps = dispatch => bindActionCreators({init}, dispatch)
 export default connect(mapStateToProps, mapDispatchToProps)(BillingCycleForm)

my-money-app/frontend/src/billingCycle/billingCycleList.jsx

@@ -50,7 +50,5 @@ class BillingCycleList extends Component {
 }
 
 const mapStateToProps = state => ({list: state.billingCycle.list})
-const mapDispatchToProps = dispatch => bindActionCreators({
-    getList, showUpdate, showDelete
-}, dispatch)
+const mapDispatchToProps = dispatch => bindActionCreators({getList, showUpdate, showDelete}, dispatch)
 export default connect(mapStateToProps, mapDispatchToProps)(BillingCycleList)

my-money-app/frontend/src/billingCycle/billingCycleReducer.js

@@ -1,13 +1,9 @@
-const INITIAL_STATE = {list: [], initialValues: {}}
+const INITIAL_STATE = {list: []}
 
 export default (state = INITIAL_STATE, action) => {
     switch (action.type) {
         case 'BILLING_CYCLES_FETCHED':
             return { ...state, list: action.payload.data }
-        case 'BILLING_CYCLE_SELECTED':
-            return { ...state, initialValues: action.payload }
-        case 'BILLING_CYCLE_CANCELED':
-            return { ...state, initialValues: INITIAL_STATE.initialValues }
         default:
             return state
     }

my-money-app/frontend/src/billingCycle/itemList.jsx

@@ -0,0 +1,80 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
+import { Field, arrayInsert, arrayRemove } from 'redux-form'
+import Grid from '../common/layout/grid'
+import Input from '../common/form/input'
+import If from '../common/operator/if'
+
+class ItemList extends Component {
+
+    add(index, item = {}) {
+        if(!this.props.readOnly) {
+            this.props.arrayInsert('billingCycleForm', this.props.field, index, item)
+        }
+    }
+
+    remove(index) {
+        if(!this.props.readOnly && this.props.list.length > 1) {
+            this.props.arrayRemove('billingCycleForm', this.props.field, index)
+        }
+    }
+
+    renderRows() {
+        const list = this.props.list || []
+        return list.map((item, index) => (
+            <tr key={index}>
+                <td><Field name={`${this.props.field}[${index}].name`} component={Input}
+                    placeholder='Informe o nome' readOnly={this.props.readOnly} /></td>
+                <td><Field name={`${this.props.field}[${index}].value`} component={Input}
+                    placeholder='Informe o valor' readOnly={this.props.readOnly} /></td>
+                <If test={this.props.showStatus}>
+                    <td><Field name={`${this.props.field}[${index}].status`} component={Input}
+                        placeholder='Informe o status' readOnly={this.props.readOnly} /></td>
+                </If>
+                <td>
+                    <button type='button' className='btn btn-success'
+                        onClick={() => this.add(index + 1)}>
+                        <i className="fa fa-plus"></i>
+                    </button>
+                    <button type='button' className='btn btn-warning'
+                        onClick={() => this.add(index + 1, item)}>
+                        <i className="fa fa-clone"></i>
+                    </button>
+                    <button type='button' className='btn btn-danger'
+                        onClick={() => this.remove(index)}>
+                        <i className="fa fa-trash-o"></i>
+                    </button>
+                </td>
+            </tr>
+        ))
+    }
+
+    render() {
+        return (
+            <Grid cols={this.props.cols}>
+                <fieldset>
+                    <legend>{this.props.legend}</legend>
+                    <table className='table'>
+                        <thead>
+                            <tr>
+                                <th>Nome</th>
+                                <th>Valor</th>
+                                <If test={this.props.showStatus}>
+                                    <th>Status</th>
+                                </If>
+                                <th className='table-actions'>Ações</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {this.renderRows()}
+                        </tbody>
+                    </table>
+                </fieldset>
+            </Grid>
+        )
+    }
+}
+
+const mapDispatchToProps = dispatch => bindActionCreators({ arrayInsert, arrayRemove }, dispatch)
+export default connect(null, mapDispatchToProps)(ItemList)

my-money-app/frontend/src/billingCycle/summary.jsx

@@ -0,0 +1,21 @@
+import React, { Component } from 'react'
+
+import Grid from '../common/layout/grid'
+import Row from '../common/layout/row'
+import ValueBox from '../common/widget/valueBox'
+
+export default ({credit, debt}) => (
+    <Grid cols='12'>
+        <fieldset>
+            <legend>Resumo</legend>
+            <Row>
+                <ValueBox cols='12 4' color='green' icon='bank'
+                    value={`R$ ${credit}`} text='Total de Créditos' />
+                <ValueBox cols='12 4' color='red' icon='credit-card'
+                    value={`R$ ${debt}`} text='Total de Débitos' />
+                <ValueBox cols='12 4' color='blue' icon='money'
+                    value={`R$ ${credit - debt}`} text='Valor Consolidado' />
+            </Row>
+        </fieldset>
+    </Grid>
+)

my-money-app/frontend/src/common/form/input.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default props => (
+    <input {...props.input}
+        className='form-control'
+        placeholder={props.placeholder}
+        readOnly={props.readOnly}
+        type={props.type} />
+)