Refs #2982: updating integration for month_selector

2 files changed, 82 insertions, 37 deletions

diff --git a/app/assets/javascripts/es6_browserified/time_tables/components/Navigate.js b/app/assets/javascripts/es6_browserified/time_tables/components/Navigate.js
index df8c6e844..5db373f9c 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/components/Navigate.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/components/Navigate.js
@@ -16,44 +16,68 @@ let Navigate = ({ dispatch, metas, timetable, pagination, status, filters}) => {
       <div className="row mt-md">
         <div className="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 text-right">
           <div className="pagination">
-            <form className='page_links' onSubmit={e => {e.preventDefault()}}>
-              <select
-                value={pagination.currentPage}
-                onChange={(e)=>{
-                  e.preventDefault()
-                  dispatch(actions.checkConfirmModal(e, actions.changePage(dispatch, pagination, e.currentTarget.value), pagination.stateChanged, dispatch))
-                }}
-              >
-                {_.map(pagination.periode_range, (month, i) => (
-                  <option
-                    value={month}
-                    key={i}
+            <form className='form-inline' onSubmit={e => {e.preventDefault()}}>
+              {/* date selector */}
+              <div className="form-group">
+                <div className="dropdown month_selector" style={{display: 'inline-block'}}>
+                  <div
+                    className='btn btn-default dropdown-toggle'
+                    id='date_selector'
+                    data-toggle='dropdown'
+                    aria-haspopup='true'
+                    aria-expanded='true'
+                  >
+                    {pagination.currentPage ? (actions.monthName(pagination.currentPage) + ' ' + new Date(pagination.currentPage).getFullYear()) : ''}
+                    <span className='caret'></span>
+                  </div>
+                  <ul
+                    className='dropdown-menu'
+                    aria-labelledby='date_selector'
                     >
-                    {actions.monthName(month) + ' ' + new Date(month).getFullYear()}
-                  </option>
-                ))}
-              </select>
-              <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>
+                    {_.map(pagination.periode_range, (month, i) => (
+                      <li key={i}>
+                        <button
+                          type='button'
+                          value={month}
+                          onClick={e => {
+                            e.preventDefault()
+                            dispatch(actions.checkConfirmModal(e, actions.changePage(dispatch, pagination, e.currentTarget.value), pagination.stateChanged, dispatch))
+                          }}
+                        >
+                          {actions.monthName(month) + ' ' + new Date(month).getFullYear()}
+                        </button>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              </div>
+
+              {/* prev/next */}
+              <div className="form-group">
+                <div className="page_links">
+                  <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>
+                </div>
+              </div>
+            </form>
           </div>
         </div>
       </div>
diff --git a/app/assets/stylesheets/modules/_timetables.sass b/app/assets/stylesheets/modules/_timetables.sass
index e44a254c5..9122fedb2 100644
--- a/app/assets/stylesheets/modules/_timetables.sass
+++ b/app/assets/stylesheets/modules/_timetables.sass
@@ -13,6 +13,9 @@
       padding-top: 123px
       transform: translateY(-1.4em)
 
+  .t2e-item-list > div
+    border-color: #fff
+
   .t2e-item
     .th
       padding: 6px 0 0 0
@@ -94,3 +97,21 @@
     left: 8px
     top: 6px
     z-index: 5
+
+  .form-group > .month_selector
+    > .btn.btn-default
+      background-color: rgba($grey, 0.15)
+      color: $darkgrey
+      border: none
+      border-radius: 0
+      padding: 8px 15px 7px 15px
+
+      > .caret
+        margin-left: 10px
+        color: $blue
+
+    > .dropdown-menu
+      margin-top: 1px
+      border-radius: 0 0 4px 4px
+      max-height: 230px
+      overflow: auto