Merge pull request #47 from AyuntamientoMadrid/ajax-47
Mejorar usabilidad con AJAX
This commit is contained in:
1
app/assets/javascripts/app.js.coffee
Normal file
1
app/assets/javascripts/app.js.coffee
Normal file
@@ -0,0 +1 @@
|
||||
window.App = {}
|
||||
@@ -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)
|
||||
});
|
||||
|
||||
@@ -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 = ->
|
||||
$('.js-add-comment-link').click ->
|
||||
initialize: ->
|
||||
$('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)
|
||||
|
||||
|
||||
@@ -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.save!
|
||||
comment.move_to_child_of(@parent) if reply?
|
||||
redirect_to @debate, notice: "Comentario guardado"
|
||||
@comment = Comment.build(@debate, current_user, params[:comment][:body])
|
||||
@comment.save!
|
||||
@comment.move_to_child_of(@parent) if reply?
|
||||
respond_with @comment
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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 %>
|
||||
|
||||
3
app/views/comments/create.js.erb
Normal file
3
app/views/comments/create.js.erb
Normal file
@@ -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) %>");
|
||||
@@ -17,32 +17,8 @@
|
||||
<p><%= render 'shared/tags', debate: @debate %></p>
|
||||
</div>
|
||||
|
||||
<div class="small-12 medium-3 column votes">
|
||||
<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" 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 id="votes" class="votes small-12 medium-3 column">
|
||||
<%= render 'votes/votes' %>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
23
app/views/votes/_votes.html.erb
Normal file
23
app/views/votes/_votes.html.erb
Normal file
@@ -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>
|
||||
1
app/views/votes/create.js.erb
Normal file
1
app/views/votes/create.js.erb
Normal file
@@ -0,0 +1 @@
|
||||
$("#votes").html("<%= j render('votes') %>");
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
Reference in New Issue
Block a user