Cadastro de Ciclos de Pagamentos

Author: leonardomleitao

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

@@ -10,7 +10,7 @@ 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 } from './billingCycleActions'
+import { create, update, remove } from './billingCycleActions'
 
 import List from './billingCycleList'
 import Form from './billingCycleForm'
@@ -39,21 +39,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 />
+                                <Form onSubmit={this.props.update} 
+                                    submitLabel='Alterar' submitClass='info' />
+                            </TabContent>
+                            <TabContent id='tabDelete'>
+                                <Form onSubmit={this.props.remove} readOnly={true} 
+                                    submitLabel='Excluir' submitClass='danger' />
                             </TabContent>
-                            <TabContent id='tabDelete'><h1>Excluir</h1></TabContent>
                         </TabsContent> 
                     </Tabs> 
                 </Content> 
-            </div> 
+            </div>
         )
     }
 }
 
 const mapDispatchToProps = dispatch => bindActionCreators({
-    selectTab, showTabs, create
+    selectTab, showTabs, create, update, remove
 }, dispatch)
 export default connect(null, mapDispatchToProps)(BillingCycle)

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

@@ -14,8 +14,21 @@ export function getList() {
 }
 
 export function create(values) {
+    return submit(values, 'post')
+}
+
+export function update(values) {
+    return submit(values, 'put')
+}
+
+export function remove(values) {
+    return submit(values, 'delete')
+}
+
+function submit(values, method) {
     return dispatch => {
-        axios.post(`${BASE_URL}/billingCycles`, values)
+        const id = values._id ? values._id : ''
+        axios[method](`${BASE_URL}/billingCycles/${id}`, values)
             .then(resp => {
                 toastr.success('Sucesso', 'Operação Realizada com sucesso.')
                 dispatch([ 
@@ -35,6 +48,30 @@ export function showUpdate(billingCycle) {
     return [ 
         showTabs('tabUpdate'),
         selectTab('tabUpdate'),
-        initialize('billingCycleForm', billingCycle)
+        select(billingCycle)
+    ]
+}
+
+export function showDelete(billingCycle) {
+    return [ 
+        showTabs('tabDelete'),
+        selectTab('tabDelete'),
+        select(billingCycle)
+    ]
+}
+
+export function select(billingCycle) {
+    return {
+        type: 'BILLING_CYCLE_SELECTED',
+        payload: billingCycle
+    }
+}
+
+export function cancel() {
+    return [ 
+        showTabs('tabList', 'tabCreate'),
+        selectTab('tabList'),
+        resetForm('billingCycleForm'),
+        { type: 'BILLING_CYCLE_CANCELED' }
     ]
 }

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

@@ -1,27 +1,41 @@
 import React, { Component } from 'react'
-import { reduxForm, Field } from 'redux-form'
+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'
 
 class BillingCycleForm extends Component {
 
+    componentWillMount() {
+        initialize('billingCycleForm', this.props.initialValues)
+    }
+
     render() {
-        const { handleSubmit } = this.props
+        const { handleSubmit, readOnly } = this.props
         return (
             <form role='form' onSubmit={handleSubmit}>
                 <div className='box-body'>
-                    <Field name='name' component={labelAndInput} 
+                    <Field name='name' component={labelAndInput} readOnly={readOnly}
                         label='Nome' cols='12 4' placeholder='Informe o nome' />
-                    <Field name='month' component={labelAndInput} type='number'
+                    <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' 
+                    <Field name='year' component={labelAndInput} type='number' readOnly={readOnly}
                         label='Ano' cols='12 4' placeholder='Informe o ano' />
                 </div>
                 <div className='box-footer'>
-                    <button type='submit' className='btn btn-primary'>Submit</button>
+                    <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>
                 </div>
             </form>
         )
     }
 }
 
-export default reduxForm({form: 'billingCycleForm'})(BillingCycleForm)
+BillingCycleForm = reduxForm({form: 'billingCycleForm'})(BillingCycleForm)
+const mapStateToProps = state => ({initialValues: state.billingCycle.initialValues})
+const mapDispatchToProps = dispatch => bindActionCreators({cancel}, dispatch)
+export default connect(mapStateToProps, mapDispatchToProps)(BillingCycleForm)

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

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
-import { getList, showUpdate } from './billingCycleActions'
+import { getList, showUpdate, showDelete } from './billingCycleActions'
 
 class BillingCycleList extends Component {
 
@@ -20,6 +20,9 @@ class BillingCycleList extends Component {
                     <button className='btn btn-warning' onClick={() => this.props.showUpdate(bc)}>
                         <i className='fa fa-pencil'></i>
                     </button>
+                    <button className='btn btn-danger' onClick={() => this.props.showDelete(bc)}>
+                        <i className='fa fa-trash-o'></i>
+                    </button>
                 </td>
             </tr>
         ))
@@ -34,7 +37,7 @@ class BillingCycleList extends Component {
                             <th>Nome</th>
                             <th>Mês</th>
                             <th>Ano</th>
-                            <th>Ações</th>
+                            <th className='table-actions'>Ações</th>
                         </tr>
                     </thead>
                     <tbody>
@@ -48,6 +51,6 @@ class BillingCycleList extends Component {
 
 const mapStateToProps = state => ({list: state.billingCycle.list})
 const mapDispatchToProps = dispatch => bindActionCreators({
-    getList, showUpdate
+    getList, showUpdate, showDelete
 }, dispatch)
 export default connect(mapStateToProps, mapDispatchToProps)(BillingCycleList)

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

@@ -1,9 +1,13 @@
-const INITIAL_STATE = {list: []}
+const INITIAL_STATE = {list: [], initialValues: {}}
 
 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/common/template/custom.css

@@ -2,4 +2,12 @@
     position: fixed;
     bottom:0px;
     width:100%;
+}
+
+button {
+    margin-left: 5px;
+}
+
+.table-actions {
+    width: 150px;
 }