Refactor search form in stop_areas

3 files changed, 54 insertions, 24 deletions

diff --git a/app/assets/javascripts/stop_areas.js.coffee b/app/assets/javascripts/stop_areas.js.coffee
index 255c4c707..b4148061e 100644
--- a/app/assets/javascripts/stop_areas.js.coffee
+++ b/app/assets/javascripts/stop_areas.js.coffee
@@ -29,17 +29,27 @@ jQuery ->
   $('input#stop_area_projection_x').change(lon_lat_change)
   $('input#stop_area_projection_y').change(lon_lat_change)
 
-  # switch visibility of access_links
-  switch_generics = (event) -> 
-    event.preventDefault()
-    $('.stop_areas .generics.content').toggle('slow')
-    $('a.generics .switcher').toggle()
+  # Autocomplete input to choose postal code in stop_areas index
+  # constructs the suggestion engine
+  country_codes = new Bloodhound(
+    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value')
+    queryTokenizer: Bloodhound.tokenizers.whitespace
+    local: $.map( JSON.parse($('#country_codes').text()), (country_code) ->  
+      value: country_code
+    )
+  )
 
-  $('.stop_areas a.generics').click(switch_generics)
-
-  switch_details = (event) -> 
-    event.preventDefault()
-    $('.stop_areas .details.content').toggle('slow')
-    $('a.details .switcher').toggle()
-
-  $('.stop_areas a.details').click(switch_details)
+  country_codes.initialize()
+  # kicks off the loading/processing of `local` and `prefetch`
+  $('#search .typeahead').typeahead(
+    {
+      hint: true,
+      highlight: true,
+      minLength: 1
+    },
+    {
+      name: 'country_codes',
+      displayKey: 'value',
+      source: country_codes.ttAdapter(),
+    }
+  )
diff --git a/app/controllers/stop_areas_controller.rb b/app/controllers/stop_areas_controller.rb
index 57773a8cc..d6d1b8822 100644
--- a/app/controllers/stop_areas_controller.rb
+++ b/app/controllers/stop_areas_controller.rb
@@ -45,7 +45,7 @@ class StopAreasController < ChouetteController
 
   def index    
     request.format.kml? ? @per_page = nil : @per_page = 12
-
+    @country_codes = referential.stop_areas.collect(&:country_code).compact.uniq
     index! do |format|
       format.html {
         if collection.out_of_bounds?
@@ -81,6 +81,12 @@ class StopAreasController < ChouetteController
     redirect_to referential_stop_areas_path(@referential)
   end
 
+  def country_codes
+    respond_to do |format|
+      format.json { render :json => referential.stop_areas.collect(&:country_code).compact.uniq.to_json }
+    end
+  end
+
   def addresses
     Rails.logger.error("SEARCHING FOR ADDRESSES : #{params[:q]}")
     @addresses = filtered_addresses
diff --git a/app/views/stop_areas/index.html.erb b/app/views/stop_areas/index.html.erb
index 1ff6f73d4..f6fb0425f 100644
--- a/app/views/stop_areas/index.html.erb
+++ b/app/views/stop_areas/index.html.erb
@@ -1,16 +1,30 @@
 <%= title_tag t('stop_areas.index.title') %> 
 
-<form class="navbar-form" role="search">
-  <%= search_form_for @q, :url => referential_stop_areas_path(@referential), :html => {:method => :get} do |f| %>
-  <div class="form-group">
-    <%= f.label :name_or_country_code_cont, "#{t('.name_or_country_code')} :" %>
-    <%= f.text_field :name_or_country_code_cont %>
-    <%= f.hidden_field :area_type_eq %>
+<div id="country_codes">
+  <%= @country_codes.to_json %>
+</div>
+
+<%= search_form_for @q, :url => referential_stop_areas_path(@referential), :html => {:method => :get, class: "form-inline", :id => "search", role: "form"} do |f| %>
+<div class="panel panel-default">
+  <div class="panel-heading">   
+    <div class="input-group col-md-9">   
+      <%= f.text_field :name_cont, :placeholder => "#{t('.name')}", :class => 'form-control' %>
+      <div class="input-group-btn">
+        <button class="btn btn-default" type="submit"><i class="fa fa-search"></i></button>
+      </div>
+    </div><!-- /input-group -->
+    <a data-toggle="collapse" data-parent="#search" href="#advanced_search">
+      <i class="fa fa-plus"></i> Recherche Avancée
+    </a>
+  </div>
+  
+  <div id="advanced_search" class="panel-collapse collapse">          
+    <div class="panel-body">
+      <%= f.text_field :country_code_cont, :placeholder => "#{t('.country_code')}", :class => 'form-control typeahead' %>
+    </div>
   </div>
-  <%= f.submit t('actions.search') %> <%= t("or") %>
-  <%= link_to t("cancel"), referential_stop_areas_path(@referential) %>
-  <% end %>
-</form>
+</div>
+<% end %>
 
 <div class="page_info">
   <span class="search"> <%= t("will_paginate.page_entries_info.search") %></span> <%= page_entries_info @stop_areas %>