rails leaving out some parts from fragment caching - ruby-on-rails

I have a rails 4 app using pundit gem for authorization. If I do russian-doll fragment caching like the code below, the conditional statement used for authorization will be also cached, which is not good, since edit/delete buttons should only be available for the post.user.
What is the good way to get around this? Should I split the cache into smaller parts or is there a way to exclude some parts of the caching? What's the rails convention in this case?
index.html.erb
<% cache ["posts-index", #posts.map(&:id), #posts.map(&:updated_at).max, #posts.map {|post| post.user.profile.updated_at}.max] do %>
<%= render #posts %>
<% end %>
_post.html.erb
<% cache ['post', post, post.user.profile ] do %>
<div class="row>
<div class="col-md-2">
<%= link_to user_path(post.user) do %>
<%= image_tag post.user.avatar.url(:base_thumb), class: 'post-avatar' %>
<% end %>
</div>
<div class="col-md-8">
<span class="post-user-name"><%= post.user.full_name %></span>
<span class="post-updated"><%= local_time_ago(post.updated_at) %></span>
<div class="post-body">
<%= post.body %>
</div>
<div class="col-md-2" style="text-align:right;">
<!--############### THIS IS THE PART THAT SHOULD NOT BE CACHED #############-->
<% if policy(post).edit? && policy(post).delete? %>
<li class="dropdown">
<ul class = "dropdown-menu dropdown-menu-right">
<li>
<%= link_to "Edit Post", edit_post_path(post), remote: true, type: "button", 'data-toggle' => "modal", 'data-target' => "#updatepost_#{post.id}" %>
</li>
<li>
Delete Post
</li>
</ul>
</li>
<% end %>
<!--########################## UNTIL HERE ############################-->
</div>
</div>
<div class = "row comment-top-row" style="padding-bottom:10px;">
<div class="col-md-12 post-comment-form">
<%= render partial: 'posts/post_comments/post_comment_form', locals: { post: post } %>
</div>
</div>
<div class = "row">
<div class="col-md-12 post-comment-insert-<%= post.id%>">
<%= render partial: 'posts/post_comments/post_comment', collection: post.post_comments.ordered.included, as: :post_comment, locals: {post: post} %>
</div>
</div>
<% if policy(post).edit? %>
<div class="modal fade updatepost" id="updatepost_<%= post.id %>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<!-- FORM GETS RENDERED HERE VIA JS -->
</div>
<% end %>
<% if policy(post).delete? %>
<div class="modal fade" id="deletepost_<%= post.id %>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
......
</div>
<% end %>
<% end %>

Russian Doll Caching is simple but handy way for caching, there's no complex options or convention to exclude part of fragment from it. Above that, It's more relative to cache strategies. Here are two strategies for this user specific situation:
Rearrange individually and Cache fragments manually, which I don't recommend. Because it's more complex and doesn't leverage the advantages of Russian Doll Caching. Not so maintainable as well. Here is an example:
index.html.erb
<% # pull out cache %>
<%= render #posts %>
_post.html.erb
<% cache post %>
<%= # first part %>
<% end %>
<% # without cache %>
<%= # user specific part %>
<% cache post %>
<%= # third part %>
<% end %>
Preferred way: Add current_user as part of cache_key, which means you will have as many fragment caches as approximately your users and the fragments will automatically invalidate whenever the post or the user has changed their fingerprint. This is more elegant and maintainable. Here is an example:
index.html.erb
<% cache ["posts-index", #posts.map(&:id), #posts.map(&:updated_at).max, #posts.map {|post| post.user.profile.updated_at}.max] do %>
<%= render #posts %>
<% end %>
_post.html.erb
<% cache ['post', post, post.user.profile, current_user ] do %>
<div class="row>
<div class="col-md-2">
<%= link_to user_path(post.user) do %>
<%= image_tag post.user.avatar.url(:base_thumb), class: 'post-avatar' %>
<% end %>
</div>
<div class="col-md-8">
<span class="post-user-name"><%= post.user.full_name %></span>
<span class="post-updated"><%= local_time_ago(post.updated_at) %></span>
<div class="post-body">
<%= post.body %>
</div>
<div class="col-md-2" style="text-align:right;">
<% if policy(post).edit? && policy(post).delete? %>
<li class="dropdown">
<ul class = "dropdown-menu dropdown-menu-right">
<li>
<%= link_to "Edit Post", edit_post_path(post), remote: true, type: "button", 'data-toggle' => "modal", 'data-target' => "#updatepost_#{post.id}" %>
</li>
<li>
Delete Post
</li>
</ul>
</li>
<% end %>
</div>
</div>
<div class = "row comment-top-row" style="padding-bottom:10px;">
<div class="col-md-12 post-comment-form">
<%= render partial: 'posts/post_comments/post_comment_form', locals: { post: post } %>
</div>
</div>
<div class = "row">
<div class="col-md-12 post-comment-insert-<%= post.id%>">
<%= render partial: 'posts/post_comments/post_comment', collection: post.post_comments.ordered.included, as: :post_comment, locals: {post: post} %>
</div>
</div>
<% if policy(post).edit? %>
<div class="modal fade updatepost" id="updatepost_<%= post.id %>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<!-- FORM GETS RENDERED HERE VIA JS -->
</div>
<% end %>
<% if policy(post).delete? %>
<div class="modal fade" id="deletepost_<%= post.id %>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
......
</div>
<% end %>
<% end %>

Related

RoR passing meeting information into a modal

I have a calendar that has meetings fed onto it.
Controller:
def index
#meetings = current_user.meetings.all
end
View
<%= render "calendar", meetings: #meetings %>
Rendering:
<%= month_calendar events: meetings do |date, meetings| %>
<%= date %>
<% meetings.each do |meeting| %>
<div>
<% unless meeting.complete == true%>
<% if meeting.end_time.to_date < Date.today %>
<%= link_to "❗️ #{meeting.name}", meeting, class: "link" %>
<% elsif meeting.end_time.to_date == Date.today %>
<%= link_to "🔔 #{meeting.name}", meeting, class: "link" %>
<% else meeting.end_time.to_date > Date.today %>
<%= link_to meeting.name, meeting, class: "link" %>
<% end %>
<% end %>
</div>
<% end %>
<% end %>
I have managed to get the link to fire a modal, but cannot figure out how to pass in the singular meeting information.
The below code shows links as individual meetings, but the modal only comes up with the first meeting information on all links:
<% if meeting.end_time.to_date < Date.today %>
<%= link_to "❗️ #{meeting.name}", meeting, {:remote => true, 'data-bs-toggle' => "modal", 'data-bs-target' => '#task_modal'} %>
<div class="modal fade" id="task_modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Task name: <%= meeting.name %><br>Urgency Level: <%= meeting.priority %></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<%= meeting.body %>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<% end %>

How can I use ajax to display Bootstrap 4 modal in Rails 6 app?

Currently I have a modal rendering for each piece on the page. It works but I don't want to render a modal for each piece each time the page is loaded.
Here is the code where my modal is rendered now:
site/gallery.html.erb
<% #pieces.each_slice(3) do |pieces| %>
<div class="row">
<% pieces.each do |piece| %>
<div class="col-lg-4">
<%= image_tag (piece.images.joins(:blob).order('active_storage_blobs.filename ASC').first if piece.images.attached?), data: { toggle: "modal", target: "#modal#{piece.id}" }, class:"img-thumbnail mx-auto d-block img-size" %>
<p><%= piece.name %></p>
<p><%= piece.description %></p>
<%= render 'site/modal', piece: piece %>
</div>
<% end %>
</div>
<% end %>
Here is the modal partial:
site/_modal.html.erb
<div class="modal fade" id="modal<%=piece.id%>" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalLabel"><%= piece.name %></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
//code involving video and images for the piece
</div>
<div class="modal-footer">
<% if piece.quantity == 1 %>
<%= button_to 'Purchase', checkout_create_path, method: :post, params: {id: piece.id}, remote: true, class:"btn btn-dark" %>
<% else %>
<p>SOLD</p>
<% end %>
</div>
</div>
</div>
</div>
What I believe I need to do is add remote: true and pass the piece.id through my image_tag link somehow. I think I would need a modal.js.erb with something along these lines in there
$('modal').html('<%= j render "site/modal", piece: #piece %>');
$('#modal<%=piece.id%>').modal('show');
And then render the modal at the top of the gallery.html.erb page. I'm not quite sure how to go about this though
EDIT
I've made some progress with trying to use AJAX to display the modals.
I've moved my modal into the pieces directory and created a javascript file to go with it.
_piece_modal.html.erb
<div class="modal fade" id="piece-modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
//modal content here
</div>
</div>
</div>
piece_modal.js.erb
$('body').append('<%= j render "piece_modal", piece: #piece %>');
$('#piece-modal').modal('show');
In my pieces controller
def piece_modal
#piece = Piece.find_by(params[:piece])
end
In my routes
get 'piece_modal' => 'pieces#piece_modal'
And here is the loop I'm using images to link to my modals
<% #pieces.each_slice(3) do |pieces| %>
<div class="row">
<% pieces.each do |piece| %>
<div class="col-lg-4">
<%= link_to piece_modal_path(piece), remote: true do %>
<%= image_tag (piece.images.joins(:blob).order('active_storage_blobs.filename ASC').first if piece.images.attached?), class:"img-thumbnail mx-auto d-block img-size" %>
<% end %>
<p><%= piece.name %></p>
<p><%= piece.description %></p>
</div>
<% end %>
</div>
<% end %>
The modal displays now but it only displays images from the first piece in the loop. How can I get it to display the correct content when I click on different images?
Okay I found a way for the modal to load dynamically with some ajax.
I changed up my link_to like this
<%= link_to piece_modal_path(piece_id: piece.id), remote: true do %>
I made this change in the pieces controller
def piece_modal
#piece = Piece.find(params[:piece_id])
end
And I made this change to my piece_modal.js.erb
$('body').append('<%= j render "piece_modal", piece: #piece %>');
$('#piece-modal').modal('show');
$('#piece-modal').on('hidden.bs.modal', function () {
$(this).remove();
});
So now instead of each piece on the site rendering it's own modal, only one gets rendered when I click on the image of the piece. On hide though I have to remove it from the DOM or else the modal will stay rendered with the properties of the first piece I click on.
You have written your code like:
<%= image_tag (piece.images.joins(:blob).order('active_storage_blobs.filename ASC').first if piece.images.attached?), class:"img-thumbnail mx-auto d-block img-size" %>
But notice that you use .first which will always return the first property.
You could do something like this instead:
<% #pieces.each_slice(3) do |pieces| %>
<div class="row">
<% pieces.each_with_index do |piece, index| %>
<div class="col-lg-4">
<%= link_to piece_modal_path(piece), remote: true do %>
<%= image_tag (piece.images.joins(:blob).order('active_storage_blobs.filename ASC')[index] if piece.images.attached?), class:"img-thumbnail mx-auto d-block img-size" %>
<% end %>
<p><%= piece.name %></p>
<p><%= piece.description %></p>
</div>
<% end %>
</div>
<% end %>
p/s: I'm writing this on the fly and didn't actually test it.

Haiving a problem to Paginate an iteration with Kaminari

I'm trying to paginate a result of an iteration using Kaminari. The pagination is showing well but its not cutting it into another page. All is showing on the same page even when I click on page 2, it still the same result as page 1
I'm using rails 6 and ruby 2.5
in my controller i have this
def dashboard
user_gigs = current_user.gigs
#user_gigs_pager = Kaminari.paginate_array(user_gigs).page(params[:page]).per(4)
end
then in my view I call the paginate
<div class="card">
<div class="card-header-title is-centered">
<%= paginate #user_gigs_pager %>
</div>
</div>
this my full view code
<% current_user.gigs.each do |gig| %>
<%# <% user_gigs = current_user.gigs %>
<div class="column is-one-third">
<div class="card">
<div class="card-image">
<%= link_to edit_gig_path(gig) do %>
<figure class="image is-4by3">
<!-- Gig Cover Image Here -->
<%= image_tag gig_cover(gig) %>
</figure>
<% end %>
</div>
<div class="card-content p-t-5 p-b-5">
<p class="subtitle is-6 m-b-5"><%= link_to gig.title.truncate(20), gig_path(gig) %></p>
<span class="star-review"><i class="fa fa-star"></i>
<%= gig.average_rating %> <span class="star-review">(<%= gig.reviews.count %>)</span>
</span>
</div>
<footer class="card-footer">
<p class="deletegig">
<%= link_to destroy_gig_path(gig), method: :delete, data: { confirm: "are you sure"} do %>
<span class="icon has-text-danger">
<i class="far fa-trash-alt"></i>
</span>
<% end %>
</p>
<% basic_price = gig.pricings.find{ |p| p.pricing_type == 'basic' }%>
<a class="has-text-danger is-block card-footer-item has-text-right">
<% if !basic_price.nil? %>
<span class="small-title">Points</span> <i class="fab fa-bitcoin"></i>
<strong><%= basic_price.price %></strong>
<% else %>
<strong>
<span class="small-title has-text-dark">Pas de point</span>
</strong>
<% end %>
</a>
</footer>
</div>
</div>
<% end %>
</div>
</div>
</div>
<div class="card">
<div class="card-header-title is-centered">
<%= paginate #user_gigs_pager %>
</div>
</div>
Kaminari.paginate_array(user_gigs).page(params[:page]).per(4)
expects page number as argument of page and number of records per page as argument of per.
Your params must contain page number (i.e. 1 or 2 or 3 ...) in :page key.
The solution was to apply the pagination on the ActiveRecord association instead of the array.
So in my controller it should be
#user_gigs_pager = current_user.gigs.page(params[:page]).per(4)
then in the view
<% #user_gigs_pager.each do |gig| %>
....
<%= paginate #user_gigs_pager %>

Rails 4 - Multiple yield blocks on a partial

Is it possible to have a partial using more than one yield block? I wanted to use it to implement bootstrap modal boxes on my project, kinda like this:
<div class="modal fade" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<%= yield :header %>
</div>
<div class="modal-body">
<%= yield :body %>
</div>
<div class="modal-footer">
<%= yield :footer %>
</div>
</div>
</div>
</div>
And this is more or less how I was thinking of using it
<%= render partial: "shared/modal" do %>
<% content_for :header do %>
...
<% end %> %>
<% content_for :body do %>
...
<% end %> %>
<% content_for :footer do %>
...
<% end %> %>
<% end %>
Is there a way to do this? Is this maybe a bad approach for some reason?
Through much trial and error, I think I solved this in Rails 5 but needed to insert a blank yield in my partial in order to get it to work:
_partial.html.erb
<div class="partial">
<%= yield %> <!--Does not do anything-->
<div class="header">
<%= yield :header %>
</div>
<div class="text">
<%= yield :text %>
</div>
</div>
Implemented as:
full_layout.html.erb
<%= render "partial" do %>
<% content_for :header do %>
<h1>Header content</h1>
<% end %>
<% content_for :text do %>
<p>Text content</p>
<% end %>
<% end %>
I think you have an issue with your render partial. Notice you have all of your content_for blocks within the render partial block.
<%= content_for :thing do %>
Some content
<% end %>
<%= render partial: "blah" %>
It's no problem to use multiple yield blocks in your partial. Only thing is to make sure that many is actually needed. For an example content_for sections are basically placeholders for content that could vary based on the logic of the application. So, it's totally fine to use multiple yields in one page.
You can also just run put an yield there withouth the output. This way you can also use the default block.
<div>
<% yield %>
<div class="mt-3">
<div class="text-2xl tracking-wide font-bold text-gray-900">
heading
<%= yield :heading %>
</div>
</div>
<div class="relative bg-white rounded-xl shadow-xl mb-8 min-h-28">
<%= yield %>
</div>
...

how to refresh a partial after an edit has been made in rails

I am making an ecommerce website page.It consists of two parts.A sidebar having a list of all products and a right column where the details of the product is shown once the product is selected from the list.
I am making ajax calls to load the various partials of the application. The sidebar having all the products is index,the one on right having the details of products is show which shows the details of the product selected.
Now when I edit the product(through a modal) how do I automatically reload the respective partials so that the new changes are reflecte.For me to see the changes I have to refresh the pages currently,how do i ensure the partials are automatically loaded once I click submit on the edit modal.
My index.html.erb looks like
<div class="container">
<div class="row row-offcanvas row-offcanvas-left">
<div class="col-xs-8 col-sm-4 sidebar-offcanvas" id="sidebar" role="navigation">
<div class="well sidebar-nav">
<ul class="nav">
<div class="jumbotron well">
<h3>Product Listing Application</h3>
</div>
<%= link_to "New Product", new_product_path, remote: true, class: "btn btn-primary" %>
<div class="list-group">
<%= render "index" %>
</div>
</ul>
</div><!--/.well -->
</div><!--/span-->
<div class="col-xs-10 col-sm-8">
<div id="page-content-wrapper">
<div class="page-content">
<div class="col-md-12 product-info" id="product-details">
</div>
</div>
</div>
<div id="product-modal" class="modal fade"></div>
</div>
</div><!--/row-->
</div>
My _index.html.erb is
<% #products.each do |product| %>
<%= link_to product_path(product), remote: true, class: "list-group-item" do %>
<h4 class="list-group-item-heading"><%= product.name %></h4>
<p class="list-group-item-text"><%= number_to_currency product.price %></p>
<% end %>
<% end %>
My _edit.html.erb is
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3><%= "Editing #{#product.name}" %></h3>
</div>
<%= render "form" %>
</div>
</div>
My _form.html.erb is
<%= form_for #product, remote: true, html: { class: "form-horizontal", style: "display:inline;" } do |f| %>
<div class="modal-body">
<ul class="errors"></ul>
<div class="control-group">
<%= f.label :name, class:"control-label" %>
<div class="controls">
<%= f.text_field :name %>
</div>
</div>
<div class="control-group">
<%= f.label :price, class: "control-label" %>
<div class="controls">
<%= f.text_field :price %>
</div>
</div>
</div>
<div class="modal-footer">
<%= f.submit class: "btn btn-primary" %>
<%= link_to "Cancel", "#", class: "btn", data: {dismiss: "modal"} %>
</div>
<% end %>
You can use
location.reload();
on your js.erb for refresh your partial, or for your instance vaiable
you can directly use
#post = #post.reload # in palce of #post you can your instance variable
create a js file same name as your page
add below code in it
edit.js.erb
$("<%= escape_javascript render(:partial => 'ur_partial_page_name') %>").dialog();
$('#new_comment_link').hide();`
in your edit page form where u r calling modal dialog
<%= link_to "edit", edit_product_path (#product, :format => :js), :remote => true %>
In your product controller
def edit
#source = Product.find(params[:id])
respond_to do |format|
format.html # edit.html.erb
format.xml { render :xml => #product }
format.js
end
end
and in your partial form
<%= form_for (#product, :remote => true) do |f| %>

Resources