Refs #2206: adding create new jp with modal

6 files changed, 101 insertions, 27 deletions

diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/components/App.js b/app/assets/javascripts/es6_browserified/journey_patterns/components/App.js
index 3472d9dcc..5c2454dac 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/components/App.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/components/App.js
@@ -8,8 +8,8 @@ var JourneyPatternList = require('../containers/JourneyPatternList')
 const App = () => (
   <div>
     <div className='clearfix' style={{ marginBottom: 10 }}>
-      <AddJourneyPattern />
       <Navigate />
+      <AddJourneyPattern />
     </div>
     <JourneyPatternList />
     <SaveJourneyPattern />
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/components/CreateModal.js b/app/assets/javascripts/es6_browserified/journey_patterns/components/CreateModal.js
new file mode 100644
index 000000000..b07686a33
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/components/CreateModal.js
@@ -0,0 +1,67 @@
+var React = require('react')
+var Component = require('react').Component
+var PropTypes = require('react').PropTypes
+
+class CreateModal extends Component {
+  constructor(props) {
+    super(props)
+  }
+  handleSubmit(e) {
+    e.preventDefault()
+    this.props.saveModal(this.props.modal.modalProps.index, this.refs)
+  }
+
+  render() {
+    return (
+      <div className='pull-right'>
+        <button
+          type='button'
+          className='btn btn-primary btn-sm'
+          data-toggle='modal'
+          data-target='#NewJourneyPatternModal'
+        >
+          <span className='fa fa-plus'></span> Ajouter une mission
+        </button>
+        <div className={ (this.props.modal.open ? 'in' : '') + ' modal fade' } id='NewJourneyPatternModal'>
+          <div className='modal-dialog'>
+            <div className='modal-content'>
+              <div className='modal-header clearfix'>
+                <h4>Ajouter une mission</h4>
+              </div>
+              <div className='modal-body'>
+                le formulaire arrive...
+              </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'
+                  data-dismiss='modal'
+                  type='button'
+                  onClick={this.handleSubmit.bind(this)}
+                  >
+                  Valider
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+CreateModal.propTypes = {
+  index: PropTypes.number,
+  modal: PropTypes.object,
+  onModalClose: PropTypes.func.isRequired,
+  saveModal: PropTypes.func.isRequired
+}
+
+module.exports = CreateModal
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/components/Modal.js b/app/assets/javascripts/es6_browserified/journey_patterns/components/EditModal.js
index 8e0f1bfad..a63263f90 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/components/Modal.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/components/EditModal.js
@@ -2,7 +2,7 @@ var React = require('react')
 var Component = require('react').Component
 var PropTypes = require('react').PropTypes
 
-class ModalComponent extends Component {
+class EditModal extends Component {
   constructor(props) {
     super(props)
   }
@@ -119,7 +119,7 @@ class ModalComponent extends Component {
   }
 }
 
-ModalComponent.propTypes = {
+EditModal.propTypes = {
   index: PropTypes.number,
   modal: PropTypes.object,
   onModalClose: PropTypes.func.isRequired,
@@ -127,4 +127,4 @@ ModalComponent.propTypes = {
   onDeleteJourneyPattern: PropTypes.func.isRequired
 }
 
-module.exports = ModalComponent
+module.exports = EditModal
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPatterns.js b/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPatterns.js
index 70bc784c4..160631697 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPatterns.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPatterns.js
@@ -1,10 +1,9 @@
-var Component = require('react').Component
 var React = require('react')
+var Component = require('react').Component
 var PropTypes = require('react').PropTypes
 var JourneyPattern = require('./JourneyPattern')
 
 class JourneyPatterns extends Component{
-
   constructor(props){
     super(props)
   }
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/containers/AddJourneyPattern.js b/app/assets/javascripts/es6_browserified/journey_patterns/containers/AddJourneyPattern.js
index cafde555c..ed7502e73 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/containers/AddJourneyPattern.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/containers/AddJourneyPattern.js
@@ -1,21 +1,28 @@
-var React = require('react')
-var connect = require('react-redux').connect
 var actions = require('../actions')
+var connect = require('react-redux').connect
+var CreateModal = require('../components/CreateModal')
 
-let AddJourneyPattern = ({ dispatch }) => {
-  return (
-    <form onSubmit={e => {
-      e.preventDefault()
-    }}>
-      <button
-        type='button'
-        className="btn btn-primary btn-sm pull-right"
-      >
-        <span className="fa fa-plus"></span> Ajouter une mission
-      </button>
-    </form>
-  )
+const mapStateToProps = (state) => {
+  return {
+    modal: state.modal,
+    journeyPatterns: state.journeyPatterns
+  }
 }
-AddJourneyPattern = connect()(AddJourneyPattern)
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    onModalClose: () =>{
+      dispatch(actions.closeModal())
+    },
+    saveModal: (index, data) =>{
+      dispatch(actions.saveModal(index, data))
+    }
+    // onOpenCreateModal: (index, journeyPattern) =>{
+    //   dispatch(actions.openCreateModal(index, journeyPattern))
+    // }
+  }
+}
+
+const AddJourneyPattern = connect(mapStateToProps, mapDispatchToProps)(CreateModal)
 
 module.exports = AddJourneyPattern
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 7c72afccd..553d69119 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 EditModal = require('../components/EditModal')
+var CreateModal = require('../components/CreateModal')
 var actions = require('../actions')
 
 const mapStateToProps = (state) => {
@@ -14,15 +15,15 @@ const mapDispatchToProps = (dispatch) => {
     onModalClose: () =>{
       dispatch(actions.closeModal())
     },
-    onDeleteJourneyPattern: (index, journeyPattern) =>{
-      dispatch(actions.deleteJourneyPattern(index, journeyPattern))
-    },
     saveModal: (index, data) =>{
       dispatch(actions.saveModal(index, data))
+    },
+    onDeleteJourneyPattern: (index, journeyPattern) =>{
+      dispatch(actions.deleteJourneyPattern(index, journeyPattern))
     }
   }
 }
 
-const ModalContainer = connect(mapStateToProps, mapDispatchToProps)(ModalComponent)
+const ModalContainer = connect(mapStateToProps, mapDispatchToProps)(EditModal, CreateModal)
 
 module.exports = ModalContainer