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

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

8 files changed, 162 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
diff --git a/spec/javascripts/vehicle_journeys/reducers/modal_spec.js b/spec/javascripts/vehicle_journeys/reducers/modal_spec.js
new file mode 100644
index 000000000..8da8e6c65
--- /dev/null
+++ b/spec/javascripts/vehicle_journeys/reducers/modal_spec.js
@@ -0,0 +1,44 @@
+var modalReducer = require('es6_browserified/vehicle_journeys/reducers/modal')
+
+let state = {}
+
+const cb = function(){}
+
+describe('modal reducer', () => {
+  beforeEach(() => {
+    state = {
+      type: '',
+      modalProps: {},
+      confirmModal: {}
+    }
+  })
+
+  it('should return the initial state', () => {
+    expect(
+      modalReducer(undefined, {})
+    ).toEqual({})
+  })
+
+  it('should handle OPEN_CONFIRM_MODAL', () => {
+    let newState = Object.assign({}, state, {
+      type: 'confirm',
+      confirmModal: {
+        callback: cb
+      }
+    })
+    expect(
+      modalReducer(state, {
+        type: 'OPEN_CONFIRM_MODAL',
+        callback: cb
+      })
+    ).toEqual(newState)
+  })
+
+  it('should handle CLOSE_MODAL', () => {
+    expect(
+      modalReducer(state, {
+        type: 'CLOSE_MODAL'
+      })
+    ).toEqual(state)
+  })
+})
diff --git a/spec/javascripts/vehicle_journeys/reducers/pagination_spec.js b/spec/javascripts/vehicle_journeys/reducers/pagination_spec.js
index 240d99c85..2dd600436 100644
--- a/spec/javascripts/vehicle_journeys/reducers/pagination_spec.js
+++ b/spec/javascripts/vehicle_journeys/reducers/pagination_spec.js
@@ -39,6 +39,23 @@ describe('pagination reducer, given parameters allowing page change', () => {
       })
     ).toEqual(Object.assign({}, state, {page : state.page - 1, stateChanged: false}))
   })
+
+  it('should handle UPDATE_TIME', () => {
+    const val = '33', subIndex = 0, index = 0, timeUnit = 'minute', isDeparture = true, isArrivalsToggled = true
+    expect(
+      reducer(state, {
+        type: 'UPDATE_TIME',
+        val,
+        subIndex,
+        index,
+        timeUnit,
+        isDeparture,
+        isArrivalsToggled
+      })
+    ).toEqual(Object.assign({}, state, {stateChanged: true})
+)
+  })
+
 })