Cadastro de Ciclos de Pagamentos: inclusão

Author: leonardomleitao

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

@@ -10,7 +10,10 @@ 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 List from './billingCycleList'
+import Form from './billingCycleForm'
 
 class BillingCycle extends Component {
 
@@ -35,8 +38,12 @@ class BillingCycle extends Component {
                             <TabContent id='tabList'>
                                 <List />
                             </TabContent>
-                            <TabContent id='tabCreate'><h1>Incluir</h1></TabContent>
-                            <TabContent id='tabUpdate'><h1>Alterar</h1></TabContent>
+                            <TabContent id='tabCreate'>
+                                <Form onSubmit={this.props.create} />
+                            </TabContent>
+                            <TabContent id='tabUpdate'>
+                                <Form />
+                            </TabContent>
                             <TabContent id='tabDelete'><h1>Excluir</h1></TabContent>
                         </TabsContent> 
                     </Tabs> 
@@ -46,5 +53,7 @@ class BillingCycle extends Component {
     }
 }
 
-const mapDispatchToProps = dispatch => bindActionCreators({selectTab, showTabs}, dispatch)
+const mapDispatchToProps = dispatch => bindActionCreators({
+    selectTab, showTabs, create
+}, dispatch)
 export default connect(null, mapDispatchToProps)(BillingCycle)

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

@@ -1,4 +1,8 @@
 import axios from 'axios'
+import { toastr } from 'react-redux-toastr'
+import { reset as resetForm, initialize } from 'redux-form'
+import { showTabs, selectTab } from '../common/tab/tabActions'
+
 const BASE_URL = 'http://localhost:3003/api'
 
 export function getList() {
@@ -7,4 +11,30 @@ export function getList() {
         type: 'BILLING_CYCLES_FETCHED',
         payload: request
     }
+}
+
+export function create(values) {
+    return dispatch => {
+        axios.post(`${BASE_URL}/billingCycles`, values)
+            .then(resp => {
+                toastr.success('Sucesso', 'Operação Realizada com sucesso.')
+                dispatch([ 
+                    resetForm('billingCycleForm'),
+                    getList(),
+                    selectTab('tabList'),
+                    showTabs('tabList', 'tabCreate')
+                ])
+            })
+            .catch(e => {
+                e.response.data.errors.forEach(error => toastr.error('Erro', error))
+            })
+    }
+}
+
+export function showUpdate(billingCycle) {
+    return [ 
+        showTabs('tabUpdate'),
+        selectTab('tabUpdate'),
+        initialize('billingCycleForm', billingCycle)
+    ]
 }

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

@@ -0,0 +1,27 @@
+import React, { Component } from 'react'
+import { reduxForm, Field } from 'redux-form'
+import labelAndInput from '../common/form/labelAndInput'
+
+class BillingCycleForm extends Component {
+
+    render() {
+        const { handleSubmit } = this.props
+        return (
+            <form role='form' onSubmit={handleSubmit}>
+                <div className='box-body'>
+                    <Field name='name' component={labelAndInput} 
+                        label='Nome' cols='12 4' placeholder='Informe o nome' />
+                    <Field name='month' component={labelAndInput} type='number'
+                        label='Mês' cols='12 4' placeholder='Informe o mês' />
+                    <Field name='year' component={labelAndInput} type='number' 
+                        label='Ano' cols='12 4' placeholder='Informe o ano' />
+                </div>
+                <div className='box-footer'>
+                    <button type='submit' className='btn btn-primary'>Submit</button>
+                </div>
+            </form>
+        )
+    }
+}
+
+export default reduxForm({form: 'billingCycleForm'})(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 } from './billingCycleActions'
+import { getList, showUpdate } from './billingCycleActions'
 
 class BillingCycleList extends Component {
 
@@ -16,6 +16,11 @@ class BillingCycleList extends Component {
                 <td>{bc.name}</td>
                 <td>{bc.month}</td>
                 <td>{bc.year}</td>
+                <td>
+                    <button className='btn btn-warning' onClick={() => this.props.showUpdate(bc)}>
+                        <i className='fa fa-pencil'></i>
+                    </button>
+                </td>
             </tr>
         ))
     }
@@ -29,6 +34,7 @@ class BillingCycleList extends Component {
                             <th>Nome</th>
                             <th>Mês</th>
                             <th>Ano</th>
+                            <th>Ações</th>
                         </tr>
                     </thead>
                     <tbody>
@@ -41,5 +47,7 @@ class BillingCycleList extends Component {
 }
 
 const mapStateToProps = state => ({list: state.billingCycle.list})
-const mapDispatchToProps = dispatch => bindActionCreators({getList}, dispatch)
+const mapDispatchToProps = dispatch => bindActionCreators({
+    getList, showUpdate
+}, dispatch)
 export default connect(mapStateToProps, mapDispatchToProps)(BillingCycleList)

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

@@ -0,0 +1,13 @@
+import React from 'react'
+import Grid from '../layout/grid'
+
+export default props => (
+    <Grid cols={props.cols}>
+        <div className='form-group'>
+            <label htmlFor={props.name}>{props.label}</label>
+            <input {...props.input} className='form-control'
+                 placeholder={props.placeholder}
+                 readOnly={props.readOnly} type={props.type} />
+        </div>
+    </Grid>
+)

my-money-app/frontend/src/common/msg/messages.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import ReduxToastr from 'react-redux-toastr'
+import 'modules/react-redux-toastr/lib/css/react-redux-toastr.css'
+
+export default props => (
+    <ReduxToastr 
+        timeOut={4000}
+        newestOnTop={false}
+        preventDuplicates={true}
+        position='top-right'
+        transitionIn='fadeIn'
+        transitionOut='fadeOut'
+        progressBar />
+)

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

@@ -4,13 +4,15 @@ import { applyMiddleware, createStore } from 'redux'
 import { Provider } from 'react-redux'
 
 import promise from 'redux-promise'
+import multi from 'redux-multi'
+import thunk from 'redux-thunk'
 
 import App from './main/app'
 import reducers from './main/reducers'
 
 const devTools = window.__REDUX_DEVTOOLS_EXTENSION__ 
       && window.__REDUX_DEVTOOLS_EXTENSION__()
-const store = applyMiddleware(promise)(createStore)(reducers, devTools)
+const store = applyMiddleware(multi, thunk, promise)(createStore)(reducers, devTools)
 ReactDOM.render(
     <Provider store={store}>
         <App />

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

@@ -5,6 +5,7 @@ import Header from '../common/template/header'
 import SideBar from '../common/template/sideBar'
 import Footer from '../common/template/footer'
 import Routes from './routes'
+import Messages from '../common/msg/messages'
 
 export default props => (
     <div className='wrapper'>
@@ -14,5 +15,6 @@ export default props => (
             <Routes />
         </div>
         <Footer />
+        <Messages />
     </div>
 )

my-money-app/frontend/src/main/reducers.js

@@ -1,4 +1,6 @@
 import { combineReducers } from 'redux'
+import { reducer as formReducer } from 'redux-form'
+import { reducer as toastrReducer } from 'react-redux-toastr'
 
 import DashboardReducer from '../dashboard/dashboardReducer'
 import TabReducer from '../common/tab/tabReducer'
@@ -7,7 +9,9 @@ import BillingCycleReducer from '../billingCycle/billingCycleReducer'
 const rootReducer = combineReducers({
     dashboard: DashboardReducer,
     tab: TabReducer,
-    billingCycle: BillingCycleReducer
+    billingCycle: BillingCycleReducer,
+    form: formReducer,
+    toastr: toastrReducer
 })
 
 export default rootReducer