Refs #2210 : Add confirm modal, not saving anything atm

Signed-off-by: Thomas Shawarma Haddad <thomas.haddad@af83.com>
Signed-off-by: Jean-Paul Lescouzeres <jean-paul.lescouzeres@af83.com>

8 files changed, 112 insertions, 7 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 0342b5df1..3356c3cdc 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/actions/index.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/actions/index.js
@@ -24,6 +24,13 @@ const actions = {
     id : e.currentTarget.id,
     index
   }),
+  openConfirmModal : (accept, cancel) => {
+    return {
+      type : 'OPEN_CONFIRM_MODAL',
+      accept,
+      cancel
+    }
+  },
   openEditModal : (index, journeyPattern) => ({
     type : 'EDIT_JOURNEYPATTERN_MODAL',
     index,
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 5c2454dac..5d84f28fd 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/components/App.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/components/App.js
@@ -2,6 +2,7 @@ var React = require('react')
 var AddJourneyPattern = require('../containers/AddJourneyPattern')
 var Navigate = require('../containers/Navigate')
 var Modal = require('../containers/Modal')
+var ConfirmModal = require('../containers/ConfirmModal')
 var SaveJourneyPattern = require('../containers/SaveJourneyPattern')
 var JourneyPatternList = require('../containers/JourneyPatternList')
 
@@ -13,6 +14,7 @@ const App = () => (
     </div>
     <JourneyPatternList />
     <SaveJourneyPattern />
+    <ConfirmModal />
     <Modal/>
   </div>
 )
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/components/ConfirmModal.js b/app/assets/javascripts/es6_browserified/journey_patterns/components/ConfirmModal.js
new file mode 100644
index 000000000..5f1655d81
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/components/ConfirmModal.js
@@ -0,0 +1,41 @@
+var React = require('react')
+var Component = require('react').Component
+var PropTypes = require('react').PropTypes
+
+const ConfirmModal = ({modal, modalActions, onModal}) => (
+  <div className={ 'modal fade ' + (modal.confirm ? 'in' : '') } id='ConfirmModal'>
+    <div className='modal-dialog'>
+      <div className='modal-content'>
+        <div className='modal-body'>
+          <p> Voulez-vous sauver vos modifications avant de blabblabla? </p>
+        </div>
+        <div className='modal-footer'>
+          <button
+            className='btn btn-default'
+            data-dismiss='modal'
+            type='button'
+            onClick= {() => {onModal(modalActions.cancel)}}
+            >
+            Annuler
+          </button>
+          <button
+            className='btn btn-danger'
+            data-dismiss='modal'
+            type='button'
+            onClick = {() => {onModal(modalActions.accept)}}
+            >
+            Valider
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+)
+
+ConfirmModal.propTypes = {
+  modal: PropTypes.object.isRequired,
+  modalActions: PropTypes.object.isRequired,
+  onModal: PropTypes.func.isRequired
+}
+
+module.exports = ConfirmModal
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/containers/ConfirmModal.js b/app/assets/javascripts/es6_browserified/journey_patterns/containers/ConfirmModal.js
new file mode 100644
index 000000000..47021cd22
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/containers/ConfirmModal.js
@@ -0,0 +1,25 @@
+var actions = require('../actions')
+var connect = require('react-redux').connect
+var ConfirmModal = require('../components/ConfirmModal')
+
+const mapStateToProps = (state) => {
+  return {
+    modal: state.modal,
+    modalActions: state.confirmModal.confirmActions
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    onModal: (action) =>{
+      dispatch(action)
+    },
+    onModalClose: () =>{
+      dispatch(actions.closeModal())
+    }
+  }
+}
+
+const ConfirmModalContainer = connect(mapStateToProps, mapDispatchToProps)(ConfirmModal)
+
+module.exports = ConfirmModalContainer
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/containers/Navigate.js b/app/assets/javascripts/es6_browserified/journey_patterns/containers/Navigate.js
index c8e681edb..0195ce43d 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/containers/Navigate.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/containers/Navigate.js
@@ -2,7 +2,7 @@ var React = require('react')
 var connect = require('react-redux').connect
 var actions = require('../actions')
 
-let Navigate = ({ dispatch, journeyPatterns, page, length }) => {
+let Navigate = ({ dispatch, journeyPatterns, page, length, onOpenConfirmModal }) => {
   let firstPage = 1
   let lastPage = Math.ceil(length / 12)
 
@@ -13,30 +13,34 @@ let Navigate = ({ dispatch, journeyPatterns, page, length }) => {
     <button
       onClick={e => {
         e.preventDefault()
-        dispatch(actions.goToPreviousPage(dispatch, page))
+        dispatch(actions.openConfirmModal(actions.goToPreviousPage(dispatch, page), actions.goToPreviousPage(dispatch, page)))
       }}
       type="submit"
+      data-toggle='modal'
+      data-target='#ConfirmModal'
       className={ (page == firstPage ? "hidden" : "") + " btn btn-default" }>
       <span className="fa fa-chevron-left"></span>
       </button>
       <button
         onClick={e => {
           e.preventDefault()
-          dispatch(actions.goToNextPage(dispatch, page))
+          dispatch(actions.openConfirmModal(actions.goToNextPage(dispatch, page), actions.goToNextPage(dispatch, page)))
         }}
         type="submit"
+        data-toggle='modal'
+        data-target='#ConfirmModal'
         className={ (page == lastPage ? "hidden" : "") + " btn btn-default" }>
         <span className="fa fa-chevron-right"></span>
       </button>
     </form>
   )
 }
-
 const mapStateToProps = (state) => {
   return {
     journeyPatterns: state.journeyPatterns,
     page: state.pagination,
-    length: state.totalCount
+    length: state.totalCount,
+    confirmModalActions: state.modal.confirmActions
   }
 }
 
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/index.js b/app/assets/javascripts/es6_browserified/journey_patterns/index.js
index aab21fb0b..a295add0b 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/index.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/index.js
@@ -18,7 +18,12 @@ var initialState = {
   modal: {
     edit: false,
     create: false,
-    modalProps: {}
+    confirm: false,
+    modalProps: {},
+    confirmActions: {
+      accept : {},
+      cancel : {}
+    }
   }
 }
 // const loggerMiddleware = createLogger()
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/confirmModal.js b/app/assets/javascripts/es6_browserified/journey_patterns/reducers/confirmModal.js
new file mode 100644
index 000000000..414da49fe
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/reducers/confirmModal.js
@@ -0,0 +1,19 @@
+const confirmModal = (state = {}, action) => {
+  switch (action.type) {
+    case 'OPEN_CONFIRM_MODAL':
+      let modal = Object.assign( {}, state.modal,
+        {
+          confirmActions : {
+            accept: action.accept,
+            cancel: action.cancel
+          },
+          confirm: true
+        }
+      )
+      return Object.assign({}, state, modal: modal)
+    default:
+      return state
+  }
+}
+
+module.exports = confirmModal
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/index.js b/app/assets/javascripts/es6_browserified/journey_patterns/reducers/index.js
index 71ff8b6f5..a9e5feea9 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/index.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/reducers/index.js
@@ -3,12 +3,14 @@ var journeyPatterns = require('./journeyPatterns')
 var pagination = require('./pagination')
 var totalCount = require('./totalCount')
 var modal = require('./modal')
+var confirmModal = require('./confirmModal')
 
 const journeyPatternsApp = combineReducers({
   journeyPatterns,
   pagination,
   totalCount,
-  modal
+  modal,
+  confirmModal
 })
 
 module.exports = journeyPatternsApp