Refs #2896: Add previous & next in pagination

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

8 files changed, 140 insertions, 9 deletions

diff --git a/app/assets/javascripts/es6_browserified/time_tables/actions/index.js b/app/assets/javascripts/es6_browserified/time_tables/actions/index.js
index 1b800e547..db47170ca 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/actions/index.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/actions/index.js
@@ -12,10 +12,26 @@ const actions = {
   unavailableServer: () => ({
     type: 'UNAVAILABLE_SERVER'
   }),
+  receiveMonth: (json) => ({
+    type: 'RECEIVE_MONTH',
+    json
+  }),
   receiveTimeTables: (json) => ({
     type: 'RECEIVE_TIME_TABLES',
     json
   }),
+  goToPreviousPage : (dispatch, pagination) => ({
+    type: 'GO_TO_PREVIOUS_PAGE',
+    dispatch,
+    pagination,
+    nextPage : false
+  }),
+  goToNextPage : (dispatch, pagination) => ({
+    type: 'GO_TO_NEXT_PAGE',
+    dispatch,
+    pagination,
+    nextPage : true
+  }),
   updateDayTypes: (index) => ({
     type: 'UPDATE_DAY_TYPES',
     index
@@ -78,8 +94,22 @@ const actions = {
     return improvedCM
   },
 
-  fetchTimeTables: (dispatch, currentPage, nextPage) => {
-    let urlJSON = window.location.pathname.split('/', 5).join('/') + '.json'
+  checkConfirmModal : (event, callback, stateChanged,dispatch) => {
+    if(stateChanged === true){
+      return actions.openConfirmModal(callback)
+    }else{
+      dispatch(actions.fetchingApi())
+      return callback
+    }
+  },
+  fetchTimeTables: (dispatch, nextPage) => {
+    let urlJSON = window.location.pathname.split('/', 5).join('/')
+    console.log(nextPage)
+    if(nextPage) {
+      urlJSON += "/month.json?date=" + nextPage
+    }else{
+      urlJSON += ".json"
+    }
     let hasError = false
     fetch(urlJSON, {
       credentials: 'same-origin',
@@ -92,7 +122,11 @@ const actions = {
         if(hasError == true) {
           dispatch(actions.unavailableServer())
         } else {
-          dispatch(actions.receiveTimeTables(json))
+          if(nextPage){
+            dispatch(actions.receiveMonth(json))
+          }else{
+            dispatch(actions.receiveTimeTables(json))
+          }
         }
       })
   },
diff --git a/app/assets/javascripts/es6_browserified/time_tables/components/Navigate.js b/app/assets/javascripts/es6_browserified/time_tables/components/Navigate.js
new file mode 100644
index 000000000..e50202a70
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/time_tables/components/Navigate.js
@@ -0,0 +1,52 @@
+var React = require('react')
+var Component = require('react').Component
+var PropTypes = require('react').PropTypes
+var actions = require('../actions')
+
+let Navigate = ({ dispatch, metas, timetable, pagination, status, filters}) => {
+  if(status.isFetching == true) {
+    return false
+  }
+  if(status.fetchSuccess == true) {
+    let pageIndex = pagination.periode_range.indexOf(pagination.currentPage)
+    let firstPage = pageIndex == 0
+    let lastPage = pageIndex == pagination.periode_range.length - 1
+    return (
+      <div className="pagination">
+
+        <form className='page_links' onSubmit={e => {e.preventDefault()}}>
+          <button
+            onClick={e => {
+              e.preventDefault()
+                  dispatch(actions.checkConfirmModal(e, actions.goToPreviousPage(dispatch, pagination), pagination.stateChanged, dispatch))
+            }}
+            type='button'
+            data-target='#ConfirmModal'
+            className={(firstPage ? 'disabled ' : '') + 'previous_page'}
+            disabled={(firstPage ? 'disabled' : '')}
+          ></button>
+          <button
+            onClick={e => {
+              e.preventDefault()
+                  dispatch(actions.checkConfirmModal(e, actions.goToNextPage(dispatch, pagination), pagination.stateChanged, dispatch))
+            }}
+            type='button'
+            data-target='#ConfirmModal'
+            className={(lastPage ? 'disabled ' : '') + 'next_page'}
+            disabled={(lastPage ? 'disabled' : '')}
+          ></button>
+        </form>
+      </div>
+    )
+  } else {
+    return false
+  }
+}
+
+Navigate.propTypes = {
+  status: PropTypes.object.isRequired,
+  pagination: PropTypes.object.isRequired,
+  dispatch: PropTypes.func.isRequired
+}
+
+module.exports = Navigate
diff --git a/app/assets/javascripts/es6_browserified/time_tables/containers/App.js b/app/assets/javascripts/es6_browserified/time_tables/containers/App.js
index 56fe1e65b..2d51e91fe 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/containers/App.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/containers/App.js
@@ -4,6 +4,7 @@ var Component = require('react').Component
 var actions = require('../actions')
 var Metas = require('./Metas')
 var Timetable = require('./Timetable')
+var Navigate = require('./Navigate')
 
 class App extends Component {
   componentDidMount(){
@@ -14,6 +15,7 @@ class App extends Component {
     return(
       <div>
         <Metas />
+        <Navigate />
         <Timetable />
       </div>
     )
diff --git a/app/assets/javascripts/es6_browserified/time_tables/containers/Navigate.js b/app/assets/javascripts/es6_browserified/time_tables/containers/Navigate.js
new file mode 100644
index 000000000..c70583c25
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/time_tables/containers/Navigate.js
@@ -0,0 +1,18 @@
+var React = require('react')
+var connect = require('react-redux').connect
+var actions = require('../actions')
+var NavigateComponent = require('../components/Navigate')
+
+const mapStateToProps = (state) => {
+  return {
+    metas: state.metas,
+    timetable: state.timetable,
+    status: state.status,
+    pagination: state.pagination
+  }
+}
+
+
+const Navigate = connect(mapStateToProps)(NavigateComponent)
+
+module.exports = Navigate
diff --git a/app/assets/javascripts/es6_browserified/time_tables/index.js b/app/assets/javascripts/es6_browserified/time_tables/index.js
index eddd68a47..c221889da 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/index.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/index.js
@@ -31,7 +31,8 @@ var initialState = {
   },
   pagination: {
     stateChanged: false,
-    currentPage: ''
+    currentPage: '',
+    periode_range: []
   },
   modal: {
     type: '',
diff --git a/app/assets/javascripts/es6_browserified/time_tables/reducers/pagination.js b/app/assets/javascripts/es6_browserified/time_tables/reducers/pagination.js
index 87714e29b..8f7b46465 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/reducers/pagination.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/reducers/pagination.js
@@ -2,14 +2,26 @@ var _ = require('lodash')
 
 const pagination = (state = {}, action) => {
   switch (action.type) {
-      case 'RECEIVE_TIME_TABLES':
-        return _.assign({}, state, {
-          currentPage: action.json.current_periode_range,
-          periode_range: action.json.periode_range
-        })
+    case 'RECEIVE_TIME_TABLES':
+      return _.assign({}, state, {
+        currentPage: action.json.current_periode_range,
+        periode_range: action.json.periode_range
+      })
+    case 'GO_TO_PREVIOUS_PAGE':
+    case 'GO_TO_NEXT_PAGE':
+      let nextPage = action.nextPage ? 1 : -1
+      let newPage = action.pagination.periode_range[action.pagination.periode_range.indexOf(action.pagination.currentPage) + nextPage]
+      toggleOnConfirmModal()
+      return _.assign({}, state, {currentPage : newPage, stateChanged: false})
     default:
       return state
   }
 }
 
+const toggleOnConfirmModal = (arg = '') =>{
+  $('.confirm').each(function(){
+    $(this).data('toggle','')
+  })
+}
+
 module.exports = pagination
diff --git a/app/assets/javascripts/es6_browserified/time_tables/reducers/status.js b/app/assets/javascripts/es6_browserified/time_tables/reducers/status.js
index 07c5db8d1..fc205d0ae 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/reducers/status.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/reducers/status.js
@@ -7,6 +7,7 @@ const status = (state = {}, action) => {
     case 'FETCH_API':
       return _.assign({}, state, {isFetching: true})
     case 'RECEIVE_TIME_TABLES':
+    case 'RECEIVE_MONTH':
       return _.assign({}, state, {fetchSuccess: true, isFetching: false})
     default:
       return state
diff --git a/app/assets/javascripts/es6_browserified/time_tables/reducers/timetable.js b/app/assets/javascripts/es6_browserified/time_tables/reducers/timetable.js
index 0e7f84590..ba770df26 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/reducers/timetable.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/reducers/timetable.js
@@ -11,6 +11,17 @@ const timetable = (state = {}, action) => {
         time_table_periods: action.json.time_table_periods
       })
       return _.assign({}, fetchedState, {current_month: actions.updateSynthesis(fetchedState)})
+    case 'RECEIVE_MONTH':
+      return _.assign({}, state, {
+        current_month: action.json.days
+      })
+    case 'GO_TO_PREVIOUS_PAGE':
+    case 'GO_TO_NEXT_PAGE':
+      let nextPage = action.nextPage ? 1 : -1
+      let newPage = action.pagination.periode_range[action.pagination.periode_range.indexOf(action.pagination.currentPage) + nextPage]
+      $('#ConfirmModal').modal('hide')
+        actions.fetchTimeTables(action.dispatch, newPage)
+      return _.assign({}, state, {current_periode_range: newPage})
     default:
       return state
   }