Merge pull request #275 from mlovic/filter-topic

Allow debates to be filtered by topic

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/_order_selector.erb

@@ -1,5 +0,0 @@
-<form class="inline-block">
-   <select class="js-order-selector" name="order-selector"> 
-     <%= available_options_for_order_selector(@valid_orders, @order) %>
-   </select>
-</form>

app/views/debates/index.html.erb

@@ -1,25 +1,37 @@
 <section role="main">
 
-  <!-- Filters -->
   <div class="filters row">
-    <div class="small-12 column">
-      <h2><%= t("debates.index.showing") %></h2>
-      <%= render 'order_selector' %>
-    </div>
-  </div>
-  <!-- /. Filters -->
+    <div class="small-9 column">
+
+      <div class="inline-block" >
+        <% if @tag_filter %>
+          <h2>
+            <%= t("debates.index.filter_topic",
+                   number: @debates.size,
+                   topic: @tag_filter).html_safe %>
+          </h2>
+        <% else %>
+          <h2><%= t("debates.index.select_topic") %></h2>
+          <form class="inline-block">
+             <select class="js-tag-filter" name="tag-filter"> 
+               <option value="all" selected="selected"><%= t("debates.index.all") %></option>
+               <%= options_from_collection_for_select(ActsAsTaggableOn::Tag.all, :name, :name) %>
+             </select>
+          </form>
+        <% end %>
+      </div>
+
+      <div class="inline-block right">
+        <h6 class="inline-block"><%= t("debates.index.select_order") %></h6>
+        <form class="inline-block">
+           <select class="js-order-selector" name="order-selector"> 
+             <%= available_options_for_order_selector(@valid_orders, @order) %>
+           </select>
+        </form>
+      </div>
 
-  <!-- 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>
     </div>
   </div>
-  <!-- /. Filter topic results -->
 
   <div class="row">
     <div id="debates" class="debates-list small-12 medium-9 column">

config/locales/en.yml

@@ -56,12 +56,14 @@ en:
   debates:
     index:
       create_debate: Create a debate
-      showing: You are seeing debates
+      select_order: Order by 
       orders:
         created_at: newest
         total_votes: most voted
         likes: best rated
+      select_topic: "Filter by topic:"
       filter_topic: "You are seeing %{number} debates with the topic '%{topic}'"
+      all: All
     debate:
       debate: Debate
       comments:

config/locales/es.yml

@@ -56,12 +56,14 @@ es:
   debates:
     index:
       create_debate: Crea un debate
-      showing: "Estás viendo los debates"
+      select_order: Ordenar por
       orders:
         created_at: "más nuevos"
         total_votes: "más votados"
         likes: mejor valorados
+      select_topic: "Filtrar por tema:"
       filter_topic: "Estás viendo %{number} debates con el tema '%{topic}'"
+      all: Todos
     debate:
       debate: Debate
       comments:

spec/features/debates_spec.rb

@@ -407,4 +407,34 @@ 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", "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('Filter by topic')
+      expect(page).not_to have_content('with the topic')
+      expect(page).to have_selector('#debates .debate', count: 3)
+    end
+
+    scenario 'Debates are filtered by single tag' do
+      visit debates_path
+
+      select('Deporte', from: 'tag-filter')
+
+      expect(page).not_to have_content('Filter by topic')
+      expect(page).not_to have_select('tag-filter')
+      expect(page).to have_content('with the topic')
+      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