starting integration for edit modal on journeypatterns collection

3 files changed, 54 insertions, 14 deletions

diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPattern.js b/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPattern.js
index bf604d2ae..7518fa154 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPattern.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPattern.js
@@ -4,16 +4,21 @@ var PropTypes = require('react').PropTypes
 const JourneyPattern = (props) => {
   return (
     <div className='list-group-item'>
-      <p
-        onClick= {props.onUpdateModalOpen}
-        className='big'
-      >
-        <strong>MODAL</strong>
-      </p>
-      <p className='small'><strong>Index: </strong>{props.index}</p>
-      <p className='small'><strong>Name: </strong>{props.value.name}</p>
-      <p className='small'><strong>ObjectID: </strong>{props.value.object_id}</p>
-      <p className='small'><strong>Published name: </strong>{props.value.published_name}</p>
+      <div style={{display: 'inline-block', verticalAlign: 'top', width: '40%'}}>
+        <p className='small'><strong>Index: </strong>{props.index}</p>
+        <p className='small'><strong>Name: </strong>{props.value.name}</p>
+      </div>
+
+      <div style={{display: 'inline-block', verticalAlign: 'top', width: '40%'}}>
+        <p className='small'><strong>ObjectID: </strong>{props.value.object_id}</p>
+        <p className='small'><strong>Published name: </strong>{props.value.published_name}</p>
+      </div>
+
+      <div className='clearfix' style={{display: 'inline-block', verticalAlign: 'top', width: '20%'}}>
+        <button className='btn btn-xs btn-danger pull-right' onClick={props.onUpdateModalOpen} data-toggle='modal' data-target='#JourneyPatternModal'>
+          <span className='fa fa-pencil'></span>
+        </button>
+      </div>
 
       <p className='small'><strong>Stop points: </strong></p>
       <ul className='list-group'>
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 90140661c..939037447 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/components/Modal.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/components/Modal.js
@@ -3,9 +3,44 @@ var PropTypes = require('react').PropTypes
 
 const ModalComponent = (props) => {
   return (
-    <h1 className={ (props.modal.open ? "" : "hidden") + " btn btn-default" }>
-      COUCOU {props.index}
-    </h1>
+    <div className={ (props.modal.open ? 'in' : '') + ' modal fade' } id='JourneyPatternModal'>
+      <div className='modal-dialog'>
+        <div className='modal-content'>
+          <div className='modal-header'>
+            <h4>
+              Modifier la mission
+              {props.modal.open && (
+                <em> "{props.modal.modalProps.journeyPattern.name}"</em>
+              )}
+            </h4>
+          </div>
+          <div className='modal-body'>
+            {props.modal.open && (
+              <p>
+                <strong>Name: </strong>
+                {props.modal.modalProps.journeyPattern.name}
+                <br/>
+                <strong>Published name: </strong>
+                {props.modal.modalProps.journeyPattern.published_name}
+              </p>
+            )}
+          </div>
+          <div className='modal-footer'>
+            <button
+              className='btn btn-default'
+              data-dismiss='modal'
+            >
+              Annuler
+            </button>
+            <button
+              className='btn btn-danger'
+            >
+              Valider
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
   )
 }
 
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 2acacaced..794e38265 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/containers/Modal.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/containers/Modal.js
@@ -3,7 +3,7 @@ var ModalComponent = require('../components/Modal')
 
 const mapStateToProps = (state) => {
   return {
-    modal: state.modal,
+    modal: state.modal
   }
 }