Refs #2521: Add confirm modal when changing page if modifications were previously done

Signed-off-by: Thomas Shawarma Haddad <thomas.haddad@af83.com>

6 files changed, 101 insertions, 0 deletions

diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/actions/index.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/actions/index.js
index 37a892199..bf5a0b078 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/actions/index.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/actions/index.js
@@ -33,6 +33,10 @@ const actions = {
       return callback
     }
   },
+  openConfirmModal : (callback) => ({
+    type : 'OPEN_CONFIRM_MODAL',
+    callback
+  }),
   toggleArrivals : () => ({
     type: 'TOGGLE_ARRIVALS',
   }),
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/App.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/App.js
index 562ea3a28..7368d4de3 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/App.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/App.js
@@ -3,6 +3,7 @@ var VehicleJourneysList = require('../containers/vehicleJourneysList')
 var Navigate = require('../containers/Navigate')
 var FiltersList = require('../containers/FiltersList')
 var SaveVehicleJourneys = require('../containers/SaveVehicleJourneys')
+var ConfirmModal = require('../containers/ConfirmModal')
 
 const App = () => (
   <div>
@@ -12,6 +13,7 @@ const App = () => (
     </div>
     <VehicleJourneysList />
     <SaveVehicleJourneys />
+    <ConfirmModal />
   </div>
 )
 
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/ConfirmModal.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/ConfirmModal.js
new file mode 100644
index 000000000..e1f40a2f9
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/ConfirmModal.js
@@ -0,0 +1,42 @@
+var React = require('react')
+var Component = require('react').Component
+var PropTypes = require('react').PropTypes
+
+const ConfirmModal = ({dispatch, modal, onModalAccept, onModalCancel, vehicleJourneys}) => (
+  <div className={ 'modal fade ' + ((modal.type == 'confirm') ? 'in' : '') } id='ConfirmModal'>
+    <div className='modal-dialog'>
+      <div className='modal-content'>
+        <div className='modal-body'>
+          <p> Voulez-vous enregistrer vos modifications avant de changer de page? </p>
+        </div>
+        <div className='modal-footer'>
+          <button
+            className='btn btn-default'
+            data-dismiss='modal'
+            type='button'
+            onClick= {() => {onModalCancel(modal.confirmModal.callback)}}
+            >
+            Ne pas enregistrer
+          </button>
+          <button
+            className='btn btn-danger'
+            data-dismiss='modal'
+            type='button'
+            onClick = {() => {onModalAccept(modal.confirmModal.callback, vehicleJourneys)}}
+            >
+            Enregistrer
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+)
+
+ConfirmModal.propTypes = {
+  vehicleJourneys: PropTypes.array.isRequired,
+  modal: PropTypes.object.isRequired,
+  onModalAccept: PropTypes.func.isRequired,
+  onModalCancel: PropTypes.func.isRequired
+}
+
+module.exports = ConfirmModal
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/ConfirmModal.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/ConfirmModal.js
new file mode 100644
index 000000000..e91ba6bf0
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/ConfirmModal.js
@@ -0,0 +1,30 @@
+var actions = require('../actions')
+var connect = require('react-redux').connect
+var ConfirmModal = require('../components/ConfirmModal')
+
+const mapStateToProps = (state) => {
+  return {
+    modal: state.modal,
+    vehicleJourneys: state.vehicleJourneys
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    onModalAccept: (next, state) =>{
+      dispatch(actions.fetchingApi())
+      actions.submitVehicleJourneys(dispatch, state, next)
+    },
+    onModalCancel: (next) =>{
+      dispatch(actions.fetchingApi())
+      dispatch(next)
+    },
+    onModalClose: () =>{
+      dispatch(actions.closeModal())
+    }
+  }
+}
+
+const ConfirmModalContainer = connect(mapStateToProps, mapDispatchToProps)(ConfirmModal)
+
+module.exports = ConfirmModalContainer
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/modal.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/modal.js
index e011164c5..bc9d448fe 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/modal.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/modal.js
@@ -1,5 +1,19 @@
 const modal = (state = {}, action) => {
   switch (action.type) {
+    case 'OPEN_CONFIRM_MODAL':
+      $('#ConfirmModal').modal('show')
+      return Object.assign({}, state, {
+        type: 'confirm',
+        confirmModal: {
+          callback: action.callback,
+        }
+      })
+    case 'CLOSE_MODAL':
+      return {
+        type: '',
+        modalProps: {},
+        confirmModal: {}
+      }
     default:
       return state
   }
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/pagination.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/pagination.js
index 382f58e80..4ac2a4586 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/pagination.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/pagination.js
@@ -12,9 +12,18 @@ const pagination = (state = {}, action) => {
         return Object.assign({}, state, {page : action.pagination.page + 1, stateChanged: false})
       }
       return state
+    case 'UPDATE_TIME':
+      toggleOnConfirmModal('modal')
+      return Object.assign({}, state, {stateChanged: true})
     default:
       return state
   }
 }
 
+const toggleOnConfirmModal = (arg = '') =>{
+  $('.confirm').each(function(){
+    $(this).data('toggle','')
+  })
+}
+
 module.exports = pagination