Merge pull request #843 from consul/search-dates

Advanced search - datepicker

Gemfile

@@ -15,6 +15,7 @@ gem 'coffee-rails', '~> 4.1.0'
 
 # Use jquery as the JavaScript library
 gem 'jquery-rails'
+gem 'jquery-ui-rails'
 # Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
 gem 'turbolinks'
 

Gemfile.lock

@@ -203,6 +203,8 @@ GEM
       rails-dom-testing (~> 1.0)
       railties (>= 4.2.0)
       thor (>= 0.14, < 2.0)
+    jquery-ui-rails (5.0.5)
+      railties (>= 3.2.16)
     json (1.8.3)
     jwt (1.5.2)
     kaminari (0.16.3)
@@ -475,6 +477,7 @@ DEPENDENCIES
   i18n-tasks
   initialjs-rails (= 0.2.0.1)
   jquery-rails
+  jquery-ui-rails
   kaminari
   launchy
   letter_opener_web (~> 1.3.0)

app/assets/javascripts/advanced_search.js.coffee

@@ -10,12 +10,23 @@ App.AdvancedSearch =
   toggle_date_options: ->
     if $('#js-advanced-search-date-min').val() == 'custom'
       $('#js-custom-date').show()
-      $('#js-custom-date input').prop 'disabled', false
+      $( ".js-calendar" ).datepicker( "option", "disabled", false )
     else
       $('#js-custom-date').hide()
-      $('#js-custom-date input').prop 'disabled', true
+      $( ".js-calendar" ).datepicker( "option", "disabled", true )
+
+  init_calendar: ->
+    locale = $('#js-locale').data('current-locale')
+    if locale == 'en'
+      locale = ''
+
+    $('.js-calendar').datepicker
+      regional: locale
+      maxDate:  "+0d"
 
   initialize: ->
+    App.AdvancedSearch.init_calendar()
+
     if App.AdvancedSearch.advanced_search_terms()
       $('#js-advanced-search').show()
       App.AdvancedSearch.toggle_date_options()

app/assets/javascripts/application.js

@@ -12,6 +12,8 @@
 //
 //= require jquery
 //= require jquery_ujs
+//= require jquery-ui/datepicker
+//= require jquery-ui/datepicker-es
 //= require foundation
 //= require turbolinks
 //= require ckeditor/init

app/assets/stylesheets/application.scss

@@ -9,4 +9,6 @@
 @import "participation";
 @import "c3";
 @import "annotator.min";
-@import "annotator_overrides";
+@import "annotator_overrides";
+@import "jquery-ui/datepicker";
+@import "datepicker_overrides";

app/assets/stylesheets/datepicker_overrides.scss

@@ -0,0 +1,94 @@
+// Overrides styles of jquery-ui/datepicker
+//
+
+.ui-datepicker-header {
+  background: $brand;
+  color: white;
+  font-weight: bold;
+}
+
+.ui-datepicker-calendar {
+
+  .ui-state-default {
+    background: $highlight;
+    color: $text;
+  }
+
+  .ui-state-hover, .ui-state-active {
+    background: $brand;
+    color: white;
+  }
+}
+
+.ui-datepicker {
+  padding: 0;
+  z-index: 4 !important;
+
+  .ui-datepicker-prev {
+    left: 12px;
+  }
+
+  .ui-datepicker-next {
+    right: 12px;
+  }
+
+  .ui-datepicker-prev, .ui-datepicker-next {
+    color: white;
+    cursor: pointer;
+    font-weight: normal;
+    font-size: $small-font-size;
+    line-height: $line-height;
+    top: 0;
+  }
+
+  table {
+    border: 1px solid $border;
+    border-top: 0;
+
+    thead {
+      background: $dark;
+      border-left: 1px solid $dark;
+      border-right: 1px solid $dark;
+
+      tr th {
+        color: white;
+      }
+    }
+
+    tr {
+      border-bottom: 1px solid $border;
+
+      &:last-child {
+        border-bottom: 0px;
+      }
+
+      &:nth-child(odd) {
+        background: none;
+      }
+    }
+
+    td {
+      padding: 0;
+      border-right: 1px solid $border;
+
+      &:last-child {
+        border-right: 0px;
+      }
+
+      span, a {
+        text-align: center;
+        line-height: $line-height;
+        color: $text;
+      }
+
+      &.ui-datepicker-unselectable.ui-state-disabled {
+        background: white;
+
+        .ui-state-default {
+          background: $input-bg;
+          color: $text-medium;
+        }
+      }
+    }
+  }
+}

app/assets/stylesheets/layout.scss

@@ -482,6 +482,7 @@ header {
 
   @media (min-width: $small-breakpoint) {
     background: white;
+    min-height: rem-calc(50);
   }
 
   a {

app/views/shared/_advanced_search.html.erb

@@ -27,13 +27,17 @@
         <div id='js-custom-date' class='small-12 large-8 column' style="display: none">
           <div class='small-12 large-6 column'>
             <label><%= t("shared.advanced_search.from") %></label>
-            <%= date_field 'advanced_search', 'date_min', max: Date.today,
+            <%= text_field_tag 'advanced_search[date_min]',
-                           value: params[:advanced_search].try(:[], :date_min) %>
+                                params[:advanced_search].try(:[], :date_min),
+                                placeholder: t("shared.advanced_search.date_placeholder"),
+                                class: 'js-calendar' %>
           </div>
           <div class='small-12 large-6 column'>
             <label><%= t("shared.advanced_search.to") %></label>
-            <%= date_field 'advanced_search', 'date_max', max: Date.today,
+            <%= text_field_tag 'advanced_search[date_max]',
-                           value: params[:advanced_search].try(:[], :date_max) %>
+                                params[:advanced_search].try(:[], :date_max),
+                                placeholder: t("shared.advanced_search.date_placeholder"),
+                                class: 'js-calendar' %>
           </div>
         </div>
       </div>
@@ -44,4 +48,4 @@
 
     </div>
   <% end %>
-</div>
+</div>

app/views/shared/_locale_switcher.html.erb

@@ -1,5 +1,5 @@
 <% if I18n.available_locales.size > 1 %>
-  <div class="locale">
+  <div class="locale" id="js-locale" data-current-local="<%= I18n.locale %>">
     <span class="inline-block">
       <%= t("layouts.header.locale") %>
     </span>

config/locales/en.yml

@@ -336,6 +336,7 @@ en:
       author_type_4: 'City councillor'
       author_type_5: 'Mayoress'
       date: 'By date'
+      date_placeholder: 'DD/MM/YYYY'
       date_range_blank: 'Choose a date'
       date_1: 'Last 24 hours'
       date_2: 'Last week'

config/locales/es.yml

@@ -336,6 +336,7 @@ es:
       author_type_4: 'Concejal'
       author_type_5: 'Alcaldesa'
       date: 'Por fecha'
+      date_placeholder: 'DD/MM/AAAA'
       date_range_blank: 'Elige una fecha'
       date_1: 'Últimas 24 horas'
       date_2: 'Última semana'