Add tag filter to debates page

app/assets/javascripts/application.js

@@ -33,6 +33,7 @@ var initialize_modules = function() {
   App.Stats.initialize();
   App.LocaleSwitcher.initialize();
   App.DebatesOrderSelector.initialize();
+  App.DebatesTagFilter.initialize();
 };
 
 $(function(){

app/assets/javascripts/debates_tag_filter.js.coffee

@@ -0,0 +1,17 @@
+App.DebatesTagFilter =
+
+  href_with_params: (query_params) ->
+    loc = window.location
+
+    loc.protocol + "//" + loc.hostname +
+      (if loc.port then ':' + loc.port else '') +
+      loc.pathname +
+      loc.hash +
+      '?' + $.param(query_params)
+
+  initialize: ->
+    $('.js-tag-filter').on 'change', ->
+      query_params = window.getQueryParameters()
+      query_params['tag'] = $(this).val()
+      window.location.assign(App.DebatesTagFilter.href_with_params(query_params))
+

app/controllers/debates_controller.rb

@@ -1,5 +1,5 @@
 class DebatesController < ApplicationController
-  before_action :parse_order, only: :index
+  before_action :parse_order, :parse_tag_filter, only: :index
   before_action :authenticate_user!, except: [:index, :show]
 
   load_and_authorize_resource
@@ -77,4 +77,9 @@ class DebatesController < ApplicationController
       @order = @valid_orders.include?(params[:order]) ? params[:order] : 'created_at'
     end
 
+    def parse_tag_filter
+      valid_tags = ActsAsTaggableOn::Tag.all.map(&:name)
+      @tag_filter = params[:tag] if valid_tags.include?(params[:tag])
+    end
+
 end

app/views/debates/index.html.erb

@@ -12,11 +12,23 @@
   <!-- Filter topic results -->
   <div class="filters row">
     <div class="small-12 column">
-      <h2>
-        <%= t("debates.index.filter_topic",
-        number: "N",
-        topic: "topic").html_safe %>
-      </h2>
+      <% if @tag_filter %>
+        <h2>
+          <%= t("debates.index.filter_topic",
+                 number: @debates.size,
+                 # TODO translation
+                 topic: @tag_filter).html_safe %>
+        </h2>
+      <% else %>
+        <h2>Filtrar por tema:  </h2>
+        <form class="inline-block">
+           <select class="js-tag-filter" name="tag-filter"> 
+             <%# select_tag 'tag-filter', nil, {prompt: 'Temas --', class: 'js-tag-filter'} do %>
+             <option value="default" disabled="disabled" selected="selected">Temas --</option>
+             <%= options_from_collection_for_select(ActsAsTaggableOn::Tag.all, :name, :name, prompt: 'Temas...') %>
+           </select>
+        </form>
+      <% end %>
     </div>
   </div>
   <!-- /. Filter topic results -->

spec/features/debates_spec.rb

@@ -407,4 +407,37 @@ feature 'Debates' do
       expect(@most_liked_debate.title).to appear_before(@most_voted_debate.title)
     end
   end
+
+  feature 'Debates can be filtered by tags', :js do
+    let!(:debate1) { create(:debate, tag_list: ["Deporte", "Corrupción"]) }
+    let!(:debate2) { create(:debate, tag_list: ["Deporte", "Corrupción", "Fiestas populares"]) }
+    let!(:debate3) { create(:debate, tag_list: ["Corrupción", "Fiestas populares"]) }
+
+    scenario 'By default no tag filter is applied' do
+      visit debates_path
+
+      expect(page).to have_content('Filtrar por tema')
+      expect(page).not_to have_content('con el tema')
+      expect(page).to have_selector('#debates .debate', count: 3)
+      expect(current_url).to_not include('tag=')
+    end
+
+    scenario 'Debates are filtered by single tag' do
+      visit debates_path
+
+      select('Deporte', from: 'tag-filter')
+
+      expect(page).not_to have_content('Filtrar por tema')
+      expect(page).to have_content('with the topic')
+      expect(page).not_to have_select('tag-filter')
+      expect(current_url).to include('tag=Deporte')
+      expect(page).to have_selector('#debates .debate', count: 2)
+
+      expect(page).to_not have_content(debate3.title) 
+      expect(page).to have_content(debate1.title) 
+      expect(page).to have_content(debate2.title) 
+    end
+
+  end
+
 end