fix close modal caring about state

5 files changed, 74 insertions, 14 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 6dc2c0470..0d1c97fd7 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/actions/index.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/actions/index.js
@@ -29,6 +29,9 @@ const actions = {
     index,
     journeyPattern
   }),
+  closeModal : () => ({
+    type : 'CLOSE_MODAL'
+  }),
   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 219f32c8b..613acf461 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/components/Modal.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/components/Modal.js
@@ -6,29 +6,72 @@ const ModalComponent = (props) => {
     <div className={ (props.modal.open ? 'in' : '') + ' modal fade' } id='JourneyPatternModal'>
       <div className='modal-dialog'>
         <div className='modal-content'>
-          <div className='modal-header'>
-            <h4>
+          <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>
+
+              <ul className='dropdown-menu'>
+                <li><a href='#'>Horaires des courses</a></li>
+                <li><a href='#'>Supprimer la mission</a></li>
+              </ul>
+            </div>
           </div>
           <div className='modal-body'>
             {props.modal.open && (
-              <p>
-                <strong>Name: </strong>
-                {props.modal.modalProps.journeyPattern.name}
-                <br/>
-                <strong>Registration number: </strong>
-                {props.modal.modalProps.journeyPattern.registration_number}
-              </p>
+              <form>
+                <div className='form-group'>
+                  <label>Nom</label>
+                  <input
+                    type='text'
+                    className='form-control'
+                    id={props.modal.modalProps.index}
+                    value={props.modal.modalProps.journeyPattern.name}
+                    onChange={(e) => props.onInputChange(e)}
+                  />
+                </div>
+
+                <div className='form-group'>
+                  <label>Nom public</label>
+                  <input
+                    type='text'
+                    className='form-control'
+                    id={props.modal.modalProps.index}
+                    value={props.modal.modalProps.journeyPattern.published_name}
+                    onChange={(e) => props.onInputChange(e)}
+                  />
+                </div>
+
+                <div className='form-group'>
+                  <label>N° d'enregistrement</label>
+                  <input
+                    type='text'
+                    className='form-control'
+                    id={props.modal.modalProps.index}
+                    value={props.modal.modalProps.journeyPattern.registration_number}
+                    onChange={(e) => props.onInputChange(e)}
+                  />
+                </div>
+              </form>
             )}
           </div>
           <div className='modal-footer'>
             <button
               className='btn btn-default'
               data-dismiss='modal'
+              onClick={props.onModalClose}
             >
               Annuler
             </button>
@@ -46,7 +89,9 @@ const ModalComponent = (props) => {
 
 ModalComponent.propTypes = {
   index: PropTypes.number,
-  modal: PropTypes.object
+  modal: PropTypes.object,
+  onModalClose: PropTypes.func.isRequired,
+  onInputChange: PropTypes.func.isRequired
 }
 
 module.exports = ModalComponent
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/containers/JourneyPatternList.js b/app/assets/javascripts/es6_browserified/journey_patterns/containers/JourneyPatternList.js
index f475f7cfe..df1df9933 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/containers/JourneyPatternList.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/containers/JourneyPatternList.js
@@ -18,7 +18,7 @@ const mapDispatchToProps = (dispatch) => {
     },
     onUpdateModalOpen: (index, journeyPattern) =>{
       dispatch(actions.openUpdateModalOpen(index, journeyPattern))
-    },
+    }
   }
 }
 
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 794e38265..347333bfd 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/containers/Modal.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/containers/Modal.js
@@ -1,5 +1,6 @@
 var connect = require('react-redux').connect
 var ModalComponent = require('../components/Modal')
+var actions = require('../actions')
 
 const mapStateToProps = (state) => {
   return {
@@ -7,6 +8,14 @@ const mapStateToProps = (state) => {
   }
 }
 
-const ModalContainer = connect(mapStateToProps)(ModalComponent)
+const mapDispatchToProps = (dispatch) => {
+  return {
+    onModalClose: () =>{
+      dispatch(actions.closeModal())
+    }
+  }
+}
+
+const ModalContainer = connect(mapStateToProps, mapDispatchToProps)(ModalComponent)
 
 module.exports = ModalContainer
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 452c47011..8d25af6d1 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/modal.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/reducers/modal.js
@@ -8,8 +8,11 @@ const modal = (state = {}, action) => {
           journeyPattern: action.journeyPattern
         }
       }
-    case 'HIDE_MODAL':
-      return {}
+    case 'CLOSE_MODAL':
+      return {
+        open: false,
+        modalProps: {}
+      }
     default:
       return state
   }