Merge pull request #47 from AyuntamientoMadrid/ajax-47

Mejorar usabilidad con AJAX

app/assets/javascripts/app.js.coffee

@@ -0,0 +1 @@
+window.App = {}

app/assets/javascripts/application.js

@@ -15,6 +15,16 @@
 //= require foundation
 //= require turbolinks
 //= require ckeditor/init
+//= require app
 //= require_tree .
 
-$(function(){ $(document).foundation(); });
+var initialize_modules = function() {
+  App.Comments.initialize();
+};
+
+$(function(){
+  $(document).foundation();
+
+  $(document).ready(initialize_modules)
+  $(document).on('page:load', initialize_modules)
+});

app/assets/javascripts/comments.js.coffee

@@ -1,13 +1,20 @@
-jQuery ->
+App.Comments =
 
-  toggle_comment = (id) ->
+  add_response: (parent_id, response_html) ->
+    $(response_html).insertAfter($("#js-comment-form-#{parent_id}"))
+
+  reset_and_hide_form: (id) ->
+    form = $("#js-comment-form-#{id}")
+    form.val('')
+    form.hide()
+
+  toggle_form: (id) ->
     $("#js-comment-form-#{id}").toggle()
 
-  ready = ->
+  initialize: ->
-    $('.js-add-comment-link').click ->
+    $('body').on 'click', '.js-add-comment-link', ->
       id = $(this).data().id
-      toggle_comment(id)
+      App.Comments.toggle_form(id)
       false
 
-  $(document).ready(ready)
+
-  $(document).on('page:load', ready)

app/controllers/comments_controller.rb

@@ -1,12 +1,13 @@
 class CommentsController < ApplicationController
   before_action :authenticate_user!
   before_action :set_debate, :set_parent
+  respond_to :html, :js
 
   def create
-    comment = Comment.build(@debate, current_user, params[:comment][:body])
+    @comment = Comment.build(@debate, current_user, params[:comment][:body])
-    comment.save!
+    @comment.save!
-    comment.move_to_child_of(@parent) if reply?
+    @comment.move_to_child_of(@parent) if reply?
-    redirect_to @debate, notice: "Comentario guardado"
+    respond_with @comment
   end
 
   private

app/controllers/votes_controller.rb

@@ -1,11 +1,12 @@
 class VotesController < ApplicationController
   before_action :set_debate
   before_action :authenticate_user!
+  respond_to :html, :js
   
   def create
     register_vote
     notice = @debate.vote_registered? ? I18n.t("votes.notice_thanks") : I18n.t("votes.notice_already_registered")
-    redirect_to @debate, notice: notice
+    respond_with @debate
   end
 
   private

app/views/comments/_form.html.erb

@@ -1,7 +1,7 @@
 <%= link_to comment_link_text(parent), "", class: "js-add-comment-link", data: {'id': dom_id(parent)} %>
 
 <div id="js-comment-form-<%= dom_id(parent) %>" style="display:none">
-  <%= form_for [@debate, Comment.new] do |f| %>
+  <%= form_for [@debate, Comment.new], remote: true do |f| %>
     <%= f.text_area :body %>
     <%= f.hidden_field :commentable_type, value: parent.class %>
     <%= f.hidden_field :commentable_id, value: parent.id %>

app/views/comments/create.js.erb

@@ -0,0 +1,3 @@
+var parent_id = '<%= dom_id(@parent) %>';
+App.Comments.reset_and_hide_form(parent_id);
+App.Comments.add_response(parent_id, "<%= j(render @comment) %>");

app/views/debates/show.html.erb

@@ -17,32 +17,8 @@
             <p><%= render 'shared/tags', debate: @debate %></p>
         </div>
 
-        <div class="small-12 medium-3 column votes">
+      <div id="votes" class="votes small-12 medium-3 column">
-            <div class="small-12 column text-center">
+        <%= render 'votes/votes' %>
-                <div id="in_favor" class="inline-block">
-                    <%= link_to debate_votes_path(@debate, value: 'yes'), class: 'in-favor', method: "post" do %>
-                        <i class="fi-like"></i>
-                        <span><%= percentage('likes', @debate) %></span>
-                    <% end %>
-                </div>
-
-                <span class="divider"></span>
-
-                <div id="against" class="inline-block">
-                    <%= link_to debate_votes_path(@debate, value: 'no'), class: 'against', method: "post" do %>
-                        <i class="fi-dislike"></i>
-                        <span><%= percentage('dislikes', @debate) %></span>
-                    <% end %>
-                </div>
-            </div>
-
-            <div class="small-12 column text-center">
-                <p class="total-votes"><%= pluralize(@debate.total_votes, t("debates.debate.vote"), t("debates.debate.votes")) %></p>
-            </div>
-        </div>
-
-        <div class="small-12 medium-3 column text-center publish-comment">
-        <%= link_to t("debates.show.leave_comment"), "#comments", :class => 'button radius expand' %>
       </div>
     </div>
 </section>

app/views/votes/_votes.html.erb

@@ -0,0 +1,23 @@
+<div class="small-12 column text-center">
+  <div id="in_favor" class="inline-block">
+    <%= link_to debate_votes_path(@debate, value: 'yes'), class: 'in-favor', method: "post", remote: true do %>
+      <i class="fi-like"></i>
+      <span><%= percentage('likes', @debate) %></span>
+    <% end %>
+  </div>
+
+  <span class="divider"></span>
+
+  <div id="against" class="inline-block">
+    <%= link_to debate_votes_path(@debate, value: 'no'), class: 'against', method: "post", remote: true do %>
+      <i class="fi-dislike"></i>
+      <span><%= percentage('dislikes', @debate) %></span>
+    <% end %>
+  </div>
+</div>
+
+<div class="small-12 column text-center">
+  <p class="total-votes">
+    <%= pluralize(@debate.total_votes, t("debates.debate.vote"), t("debates.debate.votes")) %>
+  </p>
+</div>

app/views/votes/create.js.erb

@@ -0,0 +1 @@
+$("#votes").html("<%= j render('votes') %>");

spec/features/comments_spec.rb

@@ -31,8 +31,6 @@ feature 'Comments' do
     fill_in 'comment_body', with: '¿Has pensado en esto...?'
     click_button 'Publicar comentario'
 
-    expect(page).to have_content 'Comentario guardado'
-
     within "#comments" do
       expect(page).to have_content '¿Has pensado en esto...?'
     end
@@ -53,7 +51,6 @@ feature 'Comments' do
       click_button 'Publicar respuesta'
     end
 
-    expect(page).to have_content 'Comentario guardado'
     within "#comment-#{comment.id}" do
       expect(page).to have_content 'La semana que viene está hecho.'
     end

spec/features/votes_spec.rb

@@ -28,21 +28,47 @@ feature 'Votes' do
     end
   end
 
-  scenario 'Create' do
+  scenario 'Create', :js do
     find('#in_favor a').click
-    expect(page).to have_content "Thanks for voting."
+    
+    within('#in_favor') do
+      expect(page).to have_content "100%"
     end
     
-  scenario 'Update' do
+    within('#against')  do
+      expect(page).to have_content "0%"
+    end
+    
+    expect(page).to have_content "1 vote"
+  end
+
+  scenario 'Update', :js do
     find('#in_favor a').click
     find('#against a').click
-    expect(page).to have_content "Thanks for voting."
+
+    within('#in_favor') do
+      expect(page).to have_content "0%"
     end
 
-  scenario 'Trying to vote multiple times' do
+    within('#against')  do
+      expect(page).to have_content "100%"
+    end
+
+    expect(page).to have_content "1 vote"
+  end
+
+  scenario 'Trying to vote multiple times', :js do
     find('#in_favor a').click
     find('#in_favor a').click
-    expect(page).to have_content "Your vote is already registered."
+    
+    within('#in_favor') do
+      expect(page).to have_content "100%"
+    end
+
+    within('#against')  do
+      expect(page).to have_content "0%"
+    end
+
     expect(page).to have_content "1 vote"
   end