refs #2210: adding save to modalProps, still have to dispatch to journeyPattern

4 files changed, 139 insertions, 98 deletions

diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/actions/index.js b/app/assets/javascripts/es6_browserified/journey_patterns/actions/index.js
index 2561a6add..c9f029bcd 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/actions/index.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/actions/index.js
@@ -37,6 +37,10 @@ const actions = {
   closeModal : () => ({
     type : 'CLOSE_MODAL'
   }),
+  saveModal : (data) => ({
+    type: 'SAVE_MODAL',
+    data
+  }),
   savePage : (dispatch, currentPage) => ({
     type: 'SAVE_PAGE',
     dispatch
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/components/Modal.js b/app/assets/javascripts/es6_browserified/journey_patterns/components/Modal.js
index 869d14f1e..cfc53d302 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/components/Modal.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/components/Modal.js
@@ -1,112 +1,130 @@
 var React = require('react')
+var Component = require('react').Component
 var PropTypes = require('react').PropTypes
 
-const ModalComponent = (props) => {
-  return (
-    <div className={ (props.modal.open ? 'in' : '') + ' modal fade' } id='JourneyPatternModal'>
-      <div className='modal-dialog'>
-        <div className='modal-content'>
-          <div className='modal-header clearfix'>
-            <h4 className='pull-left'>
-              Modifier la mission
-              {props.modal.open && (
-                <em> "{props.modal.modalProps.journeyPattern.name}"</em>
-              )}
-            </h4>
-            <div className='btn-group btn-group-sm pull-right'>
-              <button
-                type='button'
-                className='btn btn-primary dropdown-toggle'
-                data-toggle='dropdown'
-              >
-                <span className='fa fa-bars'></span>
-                <span className='caret'></span>
-              </button>
+class ModalComponent extends Component {
+  constructor(props) {
+    super(props)
+  }
+  handleSubmit(e) {
+    e.preventDefault()
+    this.props.saveModal(this.refs)
+  }
 
-              <ul className='dropdown-menu'>
-                <li><a href='#'>Horaires des courses</a></li>
-                <li>
-                  <a
-                    href='#'
-                    onClick={() => props.onDeleteJourneyPattern(props.modal.modalProps.index, props.modal.modalProps.journeyPattern)}
+  render() {
+    return (
+      <div className={ (this.props.modal.open ? 'in' : '') + ' modal fade' } id='JourneyPatternModal'>
+        <div className='modal-dialog'>
+          <div className='modal-content'>
+            <div className='modal-header clearfix'>
+              <h4 className='pull-left'>
+                Modifier la mission
+                {this.props.modal.open && (
+                  <em> "{this.props.modal.modalProps.journeyPattern.name}"</em>
+                )}
+              </h4>
+              <div className='btn-group btn-group-sm pull-right'>
+                <button
+                  type='button'
+                  className='btn btn-primary dropdown-toggle'
+                  data-toggle='dropdown'
                   >
-                    Supprimer la mission
-                  </a>
-                </li>
-              </ul>
+                  <span className='fa fa-bars'></span>
+                  <span className='caret'></span>
+                </button>
+
+                <ul className='dropdown-menu'>
+                  <li><a href='#'>Horaires des courses</a></li>
+                  <li>
+                    <a
+                      href='#'
+                      onClick={() => this.props.onDeleteJourneyPattern(this.props.modal.modalProps.index, this.props.modal.modalProps.journeyPattern)}
+                      >
+                      Supprimer la mission
+                    </a>
+                  </li>
+                </ul>
+              </div>
+              {this.props.modal.open && (
+                this.props.modal.modalProps.journeyPattern.deletable ?
+                <div className='alert alert-danger' style={{clear: 'both', marginBottom: 0}}>La mission a été supprimée. Cette action sera effective après validation.</div>
+                :
+                ''
+              )}
             </div>
-            {props.modal.open && (
-              props.modal.modalProps.journeyPattern.deletable ?
-              <div className='alert alert-danger' style={{clear: 'both', marginBottom: 0}}>La mission a été supprimée. Cette action sera effective après validation.</div>
-              :
-              ''
-            )}
-          </div>
-          <div className='modal-body'>
-            {props.modal.open && (
-              <form>
-                <div className='form-group'>
-                  <label>Nom</label>
-                  <input
-                    type='text'
-                    className='form-control'
-                    id={props.modal.modalProps.index}
-                    defaultValue={props.modal.modalProps.journeyPattern.name}
-                  />
-                </div>
+            <div className='modal-body'>
+              {this.props.modal.open && (
+                <form>
+                  <div className='form-group'>
+                    <label>Nom</label>
+                    <input
+                      type='text'
+                      ref='name'
+                      className='form-control'
+                      id={this.props.modal.modalProps.index}
+                      defaultValue={this.props.modal.modalProps.journeyPattern.name}
+                      />
+                  </div>
 
-                <div className='row'>
-                  <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
-                    <div className='form-group'>
-                      <label>Nom public</label>
-                      <input
-                        type='text'
-                        className='form-control'
-                        id={props.modal.modalProps.index}
-                        defaultValue={props.modal.modalProps.journeyPattern.published_name}
-                        />
+                  <div className='row'>
+                    <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
+                      <div className='form-group'>
+                        <label>Nom public</label>
+                        <input
+                          type='text'
+                          ref='published_name'
+                          className='form-control'
+                          id={this.props.modal.modalProps.index}
+                          defaultValue={this.props.modal.modalProps.journeyPattern.published_name}
+                          />
+                      </div>
                     </div>
-                  </div>
-                  <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
-                    <div className='form-group'>
-                      <label>N° d'enregistrement</label>
-                      <input
-                        type='text'
-                        className='form-control'
-                        id={props.modal.modalProps.index}
-                        defaultValue={props.modal.modalProps.journeyPattern.registration_number}
-                        />
+                    <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
+                      <div className='form-group'>
+                        <label>N° d'enregistrement</label>
+                        <input
+                          type='text'
+                          ref='registration_number'
+                          className='form-control'
+                          id={this.props.modal.modalProps.index}
+                          defaultValue={this.props.modal.modalProps.journeyPattern.registration_number}
+                          />
+                      </div>
                     </div>
                   </div>
-                </div>
 
-              </form>
-            )}
-          </div>
-          <div className='modal-footer'>
-            <button
-              className='btn btn-default'
-              data-dismiss='modal'
-              onClick={props.onModalClose}
-            >
-              Annuler
-            </button>
-            <button
-              className='btn btn-danger'
-            >
-              Valider
-            </button>
+                </form>
+              )}
+            </div>
+            <div className='modal-footer'>
+              <button
+                className='btn btn-default'
+                data-dismiss='modal'
+                type='button'
+                onClick={this.props.onModalClose}
+                >
+                Annuler
+              </button>
+              <button
+                className='btn btn-danger'
+                type='button'
+                onClick={this.handleSubmit.bind(this)}
+                >
+                Valider
+              </button>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-  )
+    )
+  }
 }
 
 ModalComponent.propTypes = {
   index: PropTypes.number,
   modal: PropTypes.object,
   onModalClose: PropTypes.func.isRequired,
+  saveModal: PropTypes.func.isRequired,
   onDeleteJourneyPattern: PropTypes.func.isRequired
 }
 
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/containers/Modal.js b/app/assets/javascripts/es6_browserified/journey_patterns/containers/Modal.js
index 06f4d0e13..c60b05403 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/containers/Modal.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/containers/Modal.js
@@ -15,6 +15,9 @@ const mapDispatchToProps = (dispatch) => {
     },
     onDeleteJourneyPattern: (index, journeyPattern) =>{
       dispatch(actions.deleteJourneyPattern(index, journeyPattern))
+    },
+    saveModal: (data) =>{
+      dispatch(actions.saveModal(data))
     }
   }
 }
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/modal.js b/app/assets/javascripts/es6_browserified/journey_patterns/reducers/modal.js
index 1ee7f64c0..577987997 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/modal.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/reducers/modal.js
@@ -1,3 +1,18 @@
+const updatedJourneyPattern = (state = {}, action) => {
+  switch (action.type) {
+    case 'DELETE_JOURNEYPATTERN_MODAL':
+      return Object.assign({}, state, { deletable: true })
+    case 'SAVE_MODAL':
+      return Object.assign({}, state, {
+        name: action.data.name.value,
+        published_name: action.data.published_name.value,
+        registration_number: action.data.registration_number.value
+      })
+    default:
+      return state
+  }
+}
+
 const modal = (state = {}, action) => {
   switch (action.type) {
     case 'UPDATE_JOURNEYPATTERN_MODAL':
@@ -11,17 +26,18 @@ const modal = (state = {}, action) => {
     case 'DELETE_JOURNEYPATTERN_MODAL':
       return Object.assign({}, state, {
         modalProps: {
-          index: action.index,
-          journeyPattern: {
-            name: action.journeyPattern.name,
-            object_id: action.journeyPattern.object_id,
-            published_name: action.journeyPattern.published_name,
-            registration_number: action.journeyPattern.registration_number,
-            stop_points: action.journeyPattern.stop_points,
-            deletable: true
-          }
+          index: state.modalProps.index,
+          journeyPattern: updatedJourneyPattern(state.modalProps.journeyPattern, action)
         }
       })
+    case 'SAVE_MODAL':
+      return Object.assign({}, state, {
+        modalProps: {
+          index: state.modalProps.index,
+          journeyPattern: updatedJourneyPattern(state.modalProps.journeyPattern, action)
+        }
+      })
+
     case 'CLOSE_MODAL':
       return {
         open: false,