Refs #2501: Add pagination for vehicle journeys

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

9 files changed, 200 insertions, 3 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 012a4035f..ce0ef6d9b 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/actions/index.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/actions/index.js
@@ -9,6 +9,26 @@ const actions = {
   unavailableServer : () => ({
     type: 'UNAVAILABLE_SERVER'
   }),
+  goToPreviousPage : (dispatch, pagination) => ({
+    type: 'GO_TO_PREVIOUS_PAGE',
+    dispatch,
+    pagination,
+    nextPage : false
+  }),
+  goToNextPage : (dispatch, pagination) => ({
+    type: 'GO_TO_NEXT_PAGE',
+    dispatch,
+    pagination,
+    nextPage : true
+  }),
+  checkConfirmModal : (event, callback, stateChanged, dispatch) => {
+    if(stateChanged === true){
+      return actions.openConfirmModal(callback)
+    }else{
+      dispatch(actions.fetchingApi())
+      return callback
+    }
+  },
   fetchVehicleJourneys : (dispatch, currentPage, nextPage) => {
     if(currentPage == undefined){
       currentPage = 1
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 38a6981ea..bd6fef237 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/App.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/App.js
@@ -1,8 +1,12 @@
 var React = require('react')
 var VehicleJourneysList = require('../containers/vehicleJourneysList')
+var Navigate = require('../containers/Navigate')
 
 const App = () => (
   <div>
+    <div className='clearfix' style={{ marginBottom: 10 }}>
+      <Navigate />
+    </div>
     <VehicleJourneysList />
   </div>
 )
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/Navigate.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/Navigate.js
new file mode 100644
index 000000000..f0ea6afdf
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/Navigate.js
@@ -0,0 +1,53 @@
+var React = require('react')
+var Component = require('react').Component
+var PropTypes = require('react').PropTypes
+var actions = require('../actions')
+
+let Navigate = ({ dispatch, vehicleJourneys, pagination, status }) => {
+  let firstPage = 1
+  let lastPage = Math.ceil(pagination.totalCount / pagination.perPage)
+  if(status.isFetching == true) {
+    return false
+  }
+  if(status.fetchSuccess == true) {
+    return (
+      <form className='btn-group btn-group-sm' onSubmit={e => {
+          e.preventDefault()
+        }}>
+        <button
+          onClick={e => {
+            e.preventDefault()
+            dispatch(actions.checkConfirmModal(e, actions.goToPreviousPage(dispatch, pagination), pagination.stateChanged, dispatch))
+          }}
+          type="submit"
+          data-toggle=''
+          data-target='#ConfirmModal'
+          className={ (pagination.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, pagination), pagination.stateChanged, dispatch))
+          }}
+          type="submit"
+          data-toggle=''
+          data-target='#ConfirmModal'
+          className={ (pagination.page == lastPage ? "hidden" : "") + " btn btn-default" }>
+          <span className="fa fa-chevron-right"></span>
+        </button>
+      </form>
+    )
+  } else {
+    return false
+  }
+}
+
+Navigate.propTypes = {
+  vehicleJourneys: PropTypes.array.isRequired,
+  status: PropTypes.object.isRequired,
+  pagination: PropTypes.object.isRequired,
+  dispatch: PropTypes.func.isRequired
+}
+
+module.exports = Navigate
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/Navigate.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/Navigate.js
new file mode 100644
index 000000000..71a14155d
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/Navigate.js
@@ -0,0 +1,17 @@
+var React = require('react')
+var connect = require('react-redux').connect
+var actions = require('../actions')
+var NavigateComponent = require('../components/Navigate')
+
+const mapStateToProps = (state) => {
+  return {
+    vehicleJourneys: state.vehicleJourneys,
+    status: state.status,
+    pagination: state.pagination
+  }
+}
+
+
+const Navigate = connect(mapStateToProps)(NavigateComponent)
+
+module.exports = Navigate
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 5ea7300dc..382f58e80 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/pagination.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/pagination.js
@@ -1,5 +1,17 @@
 const pagination = (state = {}, action) => {
   switch (action.type) {
+    case 'RECEIVE_JOURNEY_PATTERNS':
+      return Object.assign({}, state, {stateChanged: false})
+    case 'GO_TO_PREVIOUS_PAGE':
+      if (action.pagination.page > 1){
+        return Object.assign({}, state, {page : action.pagination.page - 1, stateChanged: false})
+      }
+      return state
+    case 'GO_TO_NEXT_PAGE':
+      if (state.totalCount - (action.pagination.page * action.pagination.perPage) > 0){
+        return Object.assign({}, state, {page : action.pagination.page + 1, stateChanged: false})
+      }
+      return state
     default:
       return state
   }
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/vehicleJourneys.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/vehicleJourneys.js
index ae40d5911..313706a0c 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/vehicleJourneys.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/vehicleJourneys.js
@@ -4,6 +4,16 @@ const status = (state = [], action) => {
   switch (action.type) {
     case 'RECEIVE_VEHICLE_JOURNEYS':
       return [...action.json]
+    case 'GO_TO_PREVIOUS_PAGE':
+      if(action.pagination.page > 1){
+        actions.fetchVehicleJourneys(action.dispatch, action.pagination.page, action.nextPage)
+      }
+      return state
+    case 'GO_TO_NEXT_PAGE':
+      if (action.pagination.totalCount - (action.pagination.page * action.pagination.perPage) > 0){
+        actions.fetchVehicleJourneys(action.dispatch, action.pagination.page, action.nextPage)
+      }
+      return state
     default:
       return state
   }
diff --git a/app/controllers/vehicle_journeys_controller.rb b/app/controllers/vehicle_journeys_controller.rb
index 9c4702acc..10d909f1b 100644
--- a/app/controllers/vehicle_journeys_controller.rb
+++ b/app/controllers/vehicle_journeys_controller.rb
@@ -53,7 +53,7 @@ class VehicleJourneysController < ChouetteController
       @vehicle_filter = VehicleFilter.new adapted_params
       @vehicle_filter.journey_category_model = resource_class.model_name.route_key
       @q = @vehicle_filter.vehicle_journeys.search @vehicle_filter.filtered_params
-      @vehicle_journeys = @q.result( :distinct => false ).paginate(:page => params[:page], :per_page => 8)
+      @vehicle_journeys = @q.result( :distinct => false ).paginate(:page => params[:page], :per_page => 20)
     end
     matrix
     @vehicle_journeys
diff --git a/spec/javascripts/journey_patterns/reducers/pagination_spec.js b/spec/javascripts/journey_patterns/reducers/pagination_spec.js
index 4800451e9..d0f9fef47 100644
--- a/spec/javascripts/journey_patterns/reducers/pagination_spec.js
+++ b/spec/javascripts/journey_patterns/reducers/pagination_spec.js
@@ -3,9 +3,9 @@ var reducer = require('es6_browserified/journey_patterns/reducers/pagination')
 const diff = 1
 let state = {
   page : 2,
-  totalCount : 25,
+  totalCount : 50,
   stateChanged: false,
-  perPage: 12
+  perPage: 20
 }
 let pagination = Object.assign({}, state)
 const dispatch = function(){}
diff --git a/spec/javascripts/vehicle_journeys/reducers/pagination_spec.js b/spec/javascripts/vehicle_journeys/reducers/pagination_spec.js
new file mode 100644
index 000000000..240d99c85
--- /dev/null
+++ b/spec/javascripts/vehicle_journeys/reducers/pagination_spec.js
@@ -0,0 +1,81 @@
+var reducer = require('es6_browserified/vehicle_journeys/reducers/pagination')
+
+const diff = 1
+let state = {
+  page : 2,
+  totalCount : 25,
+  stateChanged: false,
+  perPage: 12
+}
+let pagination = Object.assign({}, state)
+const dispatch = function(){}
+
+describe('pagination reducer, given parameters allowing page change', () => {
+
+  it('should return the initial state', () => {
+    expect(
+      reducer(undefined, {})
+    ).toEqual({})
+  })
+
+  it('should handle GO_TO_NEXT_PAGE and change state', () => {
+    expect(
+      reducer(state, {
+        type: 'GO_TO_NEXT_PAGE',
+        dispatch,
+        pagination,
+        nextPage : true
+      })
+    ).toEqual(Object.assign({}, state, {page : state.page + 1, stateChanged: false}))
+  })
+
+  it('should return GO_TO_PREVIOUS_PAGE and change state', () => {
+    expect(
+      reducer(state, {
+        type: 'GO_TO_PREVIOUS_PAGE',
+        dispatch,
+        pagination,
+        nextPage : false
+      })
+    ).toEqual(Object.assign({}, state, {page : state.page - 1, stateChanged: false}))
+  })
+})
+
+
+describe('pagination reducer, given parameters not allowing to go to previous page', () => {
+
+  beforeEach(()=>{
+    state.page = 1
+    pagination.page = 1
+  })
+
+  it('should return GO_TO_PREVIOUS_PAGE and not change state', () => {
+    expect(
+      reducer(state, {
+        type: 'GO_TO_PREVIOUS_PAGE',
+        dispatch,
+        pagination,
+        nextPage : false
+      })
+    ).toEqual(state)
+  })
+})
+
+describe('pagination reducer, given parameters not allowing to go to next page', () => {
+
+  beforeEach(()=>{
+    state.page = 3
+    pagination.page = 3
+  })
+
+  it('should return GO_TO_NEXT_PAGE and not change state', () => {
+    expect(
+      reducer(state, {
+        type: 'GO_TO_NEXT_PAGE',
+        dispatch,
+        pagination,
+        nextPage : true
+      })
+    ).toEqual(state)
+  })
+})