Refs #2205: Fix confirm modal being opened only when journey patterns state changed

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

12 files changed, 96 insertions, 57 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 a294e69ba..1819ee742 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/actions/index.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/actions/index.js
@@ -28,10 +28,16 @@ const actions = {
     id : e.currentTarget.id,
     index
   }),
-  openConfirmModal : (accept, cancel) => ({
+  checkConfirmModal : (event, callback, stateChanged) => {
+    if(stateChanged === true){
+      return actions.openConfirmModal(callback)
+    }else{
+      return callback
+    }
+  },
+  openConfirmModal : (callback) => ({
     type : 'OPEN_CONFIRM_MODAL',
-    accept,
-    cancel
+    callback
   }),
   openEditModal : (index, journeyPattern) => ({
     type : 'EDIT_JOURNEYPATTERN_MODAL',
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/components/ConfirmModal.js b/app/assets/javascripts/es6_browserified/journey_patterns/components/ConfirmModal.js
index 86bbe3acb..d9fbf07f8 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/components/ConfirmModal.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/components/ConfirmModal.js
@@ -14,7 +14,7 @@ const ConfirmModal = ({dispatch, modal, onModalAccept, onModalCancel, journeyPat
             className='btn btn-default'
             data-dismiss='modal'
             type='button'
-            onClick= {() => {onModalCancel(modal.confirmModal.cancel)}}
+            onClick= {() => {onModalCancel(modal.confirmModal.callback)}}
             >
             Ne pas enregistrer
           </button>
@@ -22,7 +22,7 @@ const ConfirmModal = ({dispatch, modal, onModalAccept, onModalCancel, journeyPat
             className='btn btn-danger'
             data-dismiss='modal'
             type='button'
-            onClick = {() => {onModalAccept(modal.confirmModal.accept, journeyPatterns)}}
+            onClick = {() => {onModalAccept(modal.confirmModal.callback, journeyPatterns)}}
             >
             Enregistrer
           </button>
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/components/Navigate.js b/app/assets/javascripts/es6_browserified/journey_patterns/components/Navigate.js
new file mode 100644
index 000000000..3c771417d
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/components/Navigate.js
@@ -0,0 +1,48 @@
+var React = require('react')
+var Component = require('react').Component
+var PropTypes = require('react').PropTypes
+var actions = require('../actions')
+
+let Navigate = ({ dispatch, journeyPatterns, page, length, stateChanged }) => {
+  let firstPage = 1
+  let lastPage = Math.ceil(length / 12)
+
+  return (
+    <form className='btn-group btn-group-sm' onSubmit={e => {
+      e.preventDefault()
+    }}>
+    <button
+      onClick={e => {
+        e.preventDefault()
+        dispatch(actions.checkConfirmModal(e, actions.goToPreviousPage(dispatch, page), stateChanged))
+      }}
+      type="submit"
+      data-toggle=''
+      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.checkConfirmModal(e, actions.goToNextPage(dispatch, page), stateChanged))
+        }}
+        type="submit"
+        data-toggle=''
+        data-target='#ConfirmModal'
+        className={ (page == lastPage ? "hidden" : "") + " btn btn-default" }>
+        <span className="fa fa-chevron-right"></span>
+      </button>
+    </form>
+  )
+}
+
+Navigate.propTypes = {
+  page: PropTypes.number.isRequired,
+  length: PropTypes.number.isRequired,
+  stateChanged: PropTypes.bool.isRequired,
+  journeyPatterns: PropTypes.array.isRequired,
+  dispatch: PropTypes.func.isRequired
+}
+
+module.exports = Navigate
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 1c9f7113f..d324e6064 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/containers/Navigate.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/containers/Navigate.js
@@ -1,49 +1,18 @@
 var React = require('react')
 var connect = require('react-redux').connect
 var actions = require('../actions')
+var NavigateComponent = require('../components/Navigate')
 
-let Navigate = ({ dispatch, journeyPatterns, page, length, onOpenConfirmModal }) => {
-  let firstPage = 1
-  let lastPage = Math.ceil(length / 12)
-
-  return (
-    <form className='btn-group btn-group-sm' onSubmit={e => {
-      e.preventDefault()
-    }}>
-    <button
-      onClick={e => {
-        e.preventDefault()
-        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.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.page,
     length: state.pagination.totalCount,
-    confirmModalActions: state.modal.confirmActions
+    stateChanged: state.pagination.stateChanged
   }
 }
 
-Navigate = connect(mapStateToProps)(Navigate)
+
+const Navigate = connect(mapStateToProps)(NavigateComponent)
 
 module.exports = Navigate
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/index.js b/app/assets/javascripts/es6_browserified/journey_patterns/index.js
index 449cd3202..47d6dc31f 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/index.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/index.js
@@ -15,7 +15,8 @@ var initialState = {
   journeyPatterns: [],
   pagination: {
     page : 1,
-    totalCount: window.journeyPatternLength
+    totalCount: window.journeyPatternLength,
+    stateChanged: false
   },
   modal: {
     type: '',
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/journeyPatterns.js b/app/assets/javascripts/es6_browserified/journey_patterns/reducers/journeyPatterns.js
index 9215f801b..8dd1a46e6 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/journeyPatterns.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/reducers/journeyPatterns.js
@@ -38,11 +38,13 @@ const journeyPatterns = (state = [], action) => {
     case 'LOAD_FIRST_PAGE':
       actions.fetchJourneyPatterns(action.dispatch)
     case 'GO_TO_PREVIOUS_PAGE':
+      $('#ConfirmModal').modal('hide')
       if(action.currentPage > 1){
         actions.fetchJourneyPatterns(action.dispatch, action.currentPage, action.nextPage)
       }
       return state
     case 'GO_TO_NEXT_PAGE':
+      $('#ConfirmModal').modal('hide')
       if (window.journeyPatternLength - (action.currentPage * 12) > 0){
         actions.fetchJourneyPatterns(action.dispatch, action.currentPage, action.nextPage)
       }
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/modal.js b/app/assets/javascripts/es6_browserified/journey_patterns/reducers/modal.js
index 85df48954..cb274d767 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/modal.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/reducers/modal.js
@@ -1,11 +1,11 @@
 const modal = (state = {}, action) => {
   switch (action.type) {
     case 'OPEN_CONFIRM_MODAL':
+      $('#ConfirmModal').modal('show')
       return Object.assign({}, state, {
         type: 'confirm',
         confirmModal: {
-          accept: action.accept,
-          cancel: action.cancel
+          callback: action.callback,
         }
       })
     case 'EDIT_JOURNEYPATTERN_MODAL':
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/pagination.js b/app/assets/javascripts/es6_browserified/journey_patterns/reducers/pagination.js
index a17e9f292..3ac5ba7c0 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/pagination.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/reducers/pagination.js
@@ -1,18 +1,33 @@
 const pagination = (state = {}, action) => {
   switch (action.type) {
+    case 'RECEIVE_JOURNEY_PATTERNS':
+      return Object.assign({}, state, {stateChanged: false})
     case 'GO_TO_PREVIOUS_PAGE':
       if (action.currentPage > 1){
-        return Object.assign({}, state, {page : action.currentPage - 1})
+        toggleOnConfirmModal()
+        return Object.assign({}, state, {page : action.currentPage - 1, stateChanged: false})
       }
       return state
     case 'GO_TO_NEXT_PAGE':
       if (state.totalCount - (action.currentPage * 12) > 0){
-        return Object.assign({}, state, {page : action.currentPage + 1})
+        toggleOnConfirmModal()
+        return Object.assign({}, state, {page : action.currentPage + 1, stateChanged: false})
       }
       return state
+    case 'UPDATE_CHECKBOX_VALUE':
+    case 'ADD_JOURNEYPATTERN':
+    case 'SAVE_MODAL':
+      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/journey_patterns/actions_spec.js b/spec/javascripts/journey_patterns/actions_spec.js
index ced053935..03198c2c4 100644
--- a/spec/javascripts/journey_patterns/actions_spec.js
+++ b/spec/javascripts/journey_patterns/actions_spec.js
@@ -53,13 +53,12 @@ describe('when clicking on a journey pattern checkbox', () => {
 })
 describe('when clicking on next button', () => {
   it('should create an action to open a confirm modal', () => {
-    const accept = {}, cancel = {}
+    const callback = function(){}
     const expectedAction = {
       type: 'OPEN_CONFIRM_MODAL',
-      accept,
-      cancel,
+      callback
     }
-    expect(actions.openConfirmModal(accept, cancel)).toEqual(expectedAction)
+    expect(actions.openConfirmModal(callback)).toEqual(expectedAction)
   })
 })
 describe('when clicking on edit button', () => {
diff --git a/spec/javascripts/journey_patterns/reducers/modal_spec.js b/spec/javascripts/journey_patterns/reducers/modal_spec.js
index 46ab2d905..0bc7c9240 100644
--- a/spec/javascripts/journey_patterns/reducers/modal_spec.js
+++ b/spec/javascripts/journey_patterns/reducers/modal_spec.js
@@ -11,8 +11,7 @@ let fakeJourneyPattern = {
   deletable: false
 }
 
-const accept = function(){}
-const cancel = function(){}
+const cb = function(){}
 
 describe('modal reducer', () => {
   beforeEach(() => {
@@ -33,15 +32,13 @@ describe('modal reducer', () => {
     let newState = Object.assign({}, state, {
       type: 'confirm',
       confirmModal: {
-        accept: accept,
-        cancel: cancel
+        callback: cb
       }
     })
     expect(
       modalReducer(state, {
         type: 'OPEN_CONFIRM_MODAL',
-        accept,
-        cancel
+        callback: cb
       })
     ).toEqual(newState)
   })
diff --git a/spec/javascripts/journey_patterns/reducers/pagination_spec.js b/spec/javascripts/journey_patterns/reducers/pagination_spec.js
index a99e8ff85..1c8011fca 100644
--- a/spec/javascripts/journey_patterns/reducers/pagination_spec.js
+++ b/spec/javascripts/journey_patterns/reducers/pagination_spec.js
@@ -22,7 +22,7 @@ describe('pagination reducer, given parameters allowing page change', () => {
         currentPage,
         nextPage : true
       })
-    ).toEqual(Object.assign({}, state, {page : state.page + 1}))
+    ).toEqual(Object.assign({}, state, {page : state.page + 1, stateChanged: false}))
   })
 
   it('should return GO_TO_PREVIOUS_PAGE and change state', () => {
@@ -33,7 +33,7 @@ describe('pagination reducer, given parameters allowing page change', () => {
         currentPage,
         nextPage : false
       })
-    ).toEqual(Object.assign({}, state, {page : state.page - 1}))
+    ).toEqual(Object.assign({}, state, {page : state.page - 1, stateChanged: false}))
   })
 })
 
diff --git a/spec/javascripts/spec_helper.js b/spec/javascripts/spec_helper.js
index a2fde3860..a0285cccf 100644
--- a/spec/javascripts/spec_helper.js
+++ b/spec/javascripts/spec_helper.js
@@ -4,6 +4,8 @@
 // require support/jasmine-jquery-2.1.0
 // require support/sinon
 // require support/your-support-file
+//= require jquery
+//= require bootstrap-sass-official
 require('es6-object-assign').polyfill();
 //
 // PhantomJS (Teaspoons default driver) doesn't have support for Function.prototype.bind, which has caused confusion.