Refs #2648: updating pagination feature on jp_collection

1 files changed, 30 insertions, 25 deletions

diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/components/Navigate.js b/app/assets/javascripts/es6_browserified/journey_patterns/components/Navigate.js
index a5d6a5a9f..e376c6b48 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/components/Navigate.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/components/Navigate.js
@@ -7,37 +7,42 @@ let Navigate = ({ dispatch, journeyPatterns, pagination, status }) => {
   let firstPage = 1
   let lastPage = Math.ceil(pagination.totalCount / window.journeyPatternsPerPage)
 
+  let ItemLength = window.journeyPatternLength
+  let firstItemOnPage = firstPage + (pagination.perPage * (pagination.page - firstPage))
+  let lastItemOnPage = firstItemOnPage + (pagination.perPage - firstPage)
+
   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 => {
+      <div className="pagination">
+        Liste des missions {firstItemOnPage} à {(lastItemOnPage < ItemLength) ? lastItemOnPage : ItemLength} sur {ItemLength}
+        <form className='page_links' onSubmit={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>
+          }}>
+          <button
+            onClick={e => {
+              e.preventDefault()
+              dispatch(actions.checkConfirmModal(e, actions.goToPreviousPage(dispatch, pagination), pagination.stateChanged, dispatch))
+            }}
+            type="submit"
+            data-toggle=''
+            data-target='#ConfirmModal'
+            className={'previous_page' + (pagination.page == firstPage ? ' disabled' : '')}>
+          </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={'next_page' + (pagination.page == lastPage ? ' disabled' : '')}>
+          </button>
+        </form>
+      </div>
     )
   } else {
     return false