Refs #2501: Add pagination for vehicle journeys

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

6 files changed, 116 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 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
   }