How to put content under the first record rails 4 - ruby-on-rails

I am on Rails 4. I have two resources: subarticles and articles. Subarticles are nested in articles like so:
resources :articles do
resources :subarticles do
member do
put "like" => "subarticles#upvote"
put "dislike" => "subarticles#downvote"
end
end
end
On the articles show page, I display all of the subarticles. However, I would like to place some of the article attributes ( specifically pictures and videos) directly under the first subarticle.
I am having trouble finding any documentation on doing so.
Also note that I have subarticles ordered by number of votes. So if one gets voted higher than the other, it will go to the top. But I want to keep the same pictures and videos right under the first subarticle.
Here is a simplified version of my Article show page:
<div class="row">
<div class="col-md-9">
<div class="well" style="background:white; height:230px">
<%= #article.title.titleize %><br>
<%= social_share_button_tag %>
</div>
<% #subarticles.each do |subarticle| %>
<div class="well" style="background:white">
<%= subarticle.rating %><br>
<%= subarticle.whyrating %><br>
<div class="row" style="margin-top:40px;">
<div class="col-md-7 col-md-offset-1" style="margin-top:30px">
<%= link_to like_article_subarticle_path(#article, subarticle), class: "like", method: :put do %>
<button type="button" class="btn btn-success btn-lg" aria-label="Left Align" style="margin-right:5px">
<span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span> Helpful
</button><span class="badge" style="margin-right:10px"><%= subarticle.get_upvotes.size %></span>
<% end %>
<%= link_to dislike_article_subarticle_path(#article, subarticle), class: "like", method: :put do %>
<button type="button" class="btn btn-danger btn-lg" aria-label="Left Align" style="margin-right:5px">
<span class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span> Unhelpful
</button><span class="badge"><%= subarticle.get_downvotes.size %></span>
<% end %>
</div>
</div>
</div>
<% end %>
<div class="well" style="background:white; text-align:center">
<h4>Pictures & Videos</h4><br>
<%= image_tag #article.image1(:medium) %><br>
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="<%= #article.video1 %>"></iframe>
</div>
</div>
</div>
</div>
Because of the #subarticles.each do it will push pictures and videos all the way to the bottom. What is the best way to show just the first subarticle, then pictures & videos, then the rest of the subarticles?
Let me know if I need to show any other code.

<% #subarticles.each_with_index do |subarticle, i| %>
<div class="well" style="background:white">
....... // subarticle contents
</div>
<% if i==0 %>
// put articles content here
<% end %>
<% end %>
In that way after the first subarticle the if condition checks the loop index, as the loop index is currently 0, then it will first show the subarticle first content, then for index 0 it shows the article contents.

You can always use a flag for that:
<% first_one = false %>
<% #subarticles.each do |subarticle| %>
<div class="well" style="background:white">
...
</div>
<% unless first_one %>
// article contents here....
<% first_one = true %>
<% end %>
<% end %>

Related

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 %>

Identify correct answer from <li> list?

I have questions which have five choices of which one is TRUE for choices.is_correct.
I currently have an ERB loop displaying the question and possible answer choices, with choices randomize in an ordered list (<li>).
In a separate ERB loop, I need to display the correct answer in the form of it's respective <li> label (A,B,C,D or E).
I feel like this might be possible through some sort of local variable, but none of my tests are working so far. Should local variables work, or am I approaching from the wrong perspective?
My current ERB for the question / answer section:
<% #free_questions.each_with_index do |question, i| %>
<div class="row justify-content-center">
<div class="col-lg-10">
<% #a = ("a".."z").to_a %>
<h5>Question <%= i+1 %>: <%= question.name %></h5>
<p>
<ol type="A">
<% #free_choices.where(question: question.id).sort_by{rand}.each do |choice| %>
<li><%= choice.name %></li>
<% end %><br />
</ol>
</p>
<% #free_choices.where(question: question.id, correct: TRUE).each do |choice| %>
<div class="accordion" id="accordionExample">
<% if choice.question.context.present? or choice.question.image.attached? %>
<div class="card">
<div class="card-header" id="headingC<%= i+1 %>">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseC<%= i+1 %>" aria-expanded="true" aria-controls="collapseC<%= i+1 %>">
CLICK FOR QUESTION CONTEXT
</button>
</h5>
</div>
<div id="collapseC<%= i+1 %>" class="collapse" aria-labelledby="headingC<%= i+1 %>" data-parent="#accordionExample">
<div class="card-body">
<p>
<% if choice.question.image.attached? %>
<img src="<%= url_for(choice.question.image) if choice.question.image.attached? %>" class="rounded float-center" alt="context image for this question">
<% end %>
<!--TODO: Add more useful image alts here-->
<%= simple_format(choice.question.context) %>
</p>
</div>
</div>
</div>
<% end %>
<div class="card">
<div class="card-header" id="headingA<%= i+1 %>">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseA<%= i+1 %>" aria-expanded="true" aria-controls="collapseA<%= i+1 %>">
CLICK FOR ANSWER
</button>
</h5>
</div>
<div id="collapseA<%= i+1 %>" class="collapse" aria-labelledby="headingA<%= i+1 %>" data-parent="#accordionExample">
<div class="card-body">
<p>
Correct Answer: <b><%= choice.name %></b>
</p>
<p>
Explanation: <%= raw(choice.question.explanation) %>
</p>
</div>
</div>
</div>
</div>
<% end %>
<hr />
</div>
</div>
<% end %>
EDIT: Adding the models below
question.rb
class Question < ApplicationRecord
before_validation :assign_questionable
belongs_to :questionable, polymorphic: true
has_many :choices, :dependent => :destroy
accepts_nested_attributes_for :choices, allow_destroy: true
choice.rb
class Choice < ApplicationRecord
belongs_to :question
Here I am outlining quick fix
replace <% #a = ("a".."z").to_a %> with <% alpha_numbers = ("A".."Z").to_a %>. You are using <ol type="A"> which prints list in upper case latter not in small case.
Move above snippet outside #free_questions.each_with_index loop so that you don't end up initializing same array for each question in loop.
Replace #free_choices.where(question: question.id).sort_by{rand}.each do |choice| with question.choices.shuffle.each_with_index do |choice, index|. As per the model relationship, question.choices will give same result as #free_choices.where(question: question.id). shuffle is better way of doing sort_by{rand}.
In the Choice model, add attr_accessor :alpha_order. This will create accessor methods.
Above <li><%= choice.name %></li> line add <% choice.alpha_order = alpha_numbers[index] %>. This line sets current alphabetic order of choice in an instance variable.
Replace #free_choices.where(question: question.id, correct: TRUE).each do |choice| with question.choices.select { |choice| choice.is_correct }.each do. This will loop through only those choices for given question where is_correct is true.
If you want to get alphabetic number attached to choice, access it using choice.alpha_order which will give correct alpha order.
Hope this helps.

I'm trying to render two columns of information in my rails app

So, I have an app that is trying render 2 (or maybe more if needed) columns using a loop. It does one column and looks pretty good, but I want the option of 2 or even more. I know about "in_groups.of()", but I can't quite figure it out to work with my
<% #vendors.each do |vendor| %>
<%= link_to vendor do %>
<div class="row">
<div class="col-md-6">
<div class="card-container">
<div class="col-md-6">
<div class="card">
<%= image_tag attachment_url(vendor, :background_image), class: 'card-img-top' %>
<div class="card-block">
<h4 class="card-title"><%= vendor.Company %>. </h4>
<p class="card-text"><%= vendor.Description.html_safe.first(25) %></p>
<div class="card-standing"><strong><%= vendor.FinancialStanding %></strong></div>
</div>
</div>
</div>
</div>
</div>
</div>
<% end %>
<% end %>
Not sure why you needed this, because everything can be managed with css and html. But you can make changes like this:
<% #vendors.to_a.in_groups_of(2).each do |vendor| %> # #vendors.to_a cover AR to array
<% vendor.each do |v| %> # becuase vendor is array here.
..........your code..............
<% end %>
<% end %>

Lightbox with Rails

So I am trying to use Lightbox2 on my application. I installed the gem and followed all the steps, but having trouble figuring out where to call it in the application.
This is my post index
<div class="container">
<div id="profuploads">
<div id="posts" class="transitions-enabled">
<% #posts.each do |post| %>
<div class="box panel panel-default">
<%= link_to image_tag(post.image.url(:medium)), post %>
<div class="panel-body">
<strong><%= post.user.username if post.user %></strong><br/>
<%= post.description %>
<% if post.user == current_user %>
<div class="actions">
<%= link_to 'Edit', edit_post_path(post) %>
<%= link_to 'Destroy', post, method: :delete, data: { confirm: 'Are you sure?' } %>
</div>
<% end %>
</div>
</div>
<% end %>
</div>
</div>
</div>
This is my post show
<div class="row">
<div class="col-md-offset-1 col-md-10">
<div class="panel panel-default">
<div class="panel-heading center">
<%= image_tag #post.image.url, height: '300' %>
</div>
<div class="panel-body">
<p><strong><%= link_to(#post.user.username.capitalize, user_path(#post.user.id)) if #post.user %></strong></p>
<p><%= #post.description %></p>
<div class="votes">
<strong>VIEWS</strong>
<%= #post.hits %>
<div class="votes">
<%= link_to like_post_path(#post), method: :put do%>
<button type="button" class="btn btn-info" aria-label="Left Align">
<span class="glyphicon glyphicon-thumbs-up glyphicon-align-center" aria-hidden="true"></span>
<span class="badge"><%= #post.get_upvotes.size %></span>
</button>
<%end%>
</div>
<% if #post.user == current_user %>
<%= link_to 'Edit', edit_post_path(#post) %>
<% end %>
</div>
</div>
</div>
</div>
With Lightbox do I need to just git rid of my post show page altogether?
Lightbox is a javascript library which needs proper html markup in order to do it's work. Your show view looks good except it does not include the markup Lightbox looks for.
From Lightbox Getting Started guide:
Add a data-lightbox attribute to any image link to enable Lightbox. For the value of the attribute, use a unique name for each image. For example:
Image #1
When Lightbox initializes, it looks for any image tags that contain data-lightbox attribute and hooks its handlers to them. You need to provide this attribute:
<%= image_tag #post.image.url, height: '300', "data-lightbox" => #post.image.url %>
This should make Lightbox pick up your images.

How to filter results by clicking on checkbox in ruby on rails

I am a newbie in ruby on rails it's also my first ruby application.
I want to filter results by clicking on checkbox which is coming from
the database and showing on the right side of my webpage, the checkbox
is lying on the left side. In the below I attached my webpage's
screenshot for easy understanding.
Anyone can help me, please, how can I solve this issue?
My Controller file code:resumes_controller.rb
class ResumesController < ApplicationController
before_filter :recruiter!
def resumes
#resume = Jobseeker.paginate(page: params[:page], :per_page => 10).order('jobseeker_id DESC')
end
end
My view file code: resumes.html.erb
<%= form_for :jobseekers,url: resumes_path(#jobseekers), action: :update, method: :post do |f| %>
<div>
<label for="Title">Education</label>
<div class="checkbox">
<%= check_box("tag", {checked: true}) %>Masters
</div>
<div class="checkbox">
<%= check_box("tag", {checked: true}) %>Bachelor
</div>
<div class="checkbox">
<%= check_box("tag", {checked: true}) %>Associates
</div>
<div class="checkbox">
<%= check_box("tag", {checked: true}) %>Diploma
</div>
More
</div>
<% end %>
<!-- item1 -->
<% #resume.each do | res| %>
<div class="job-item bio-card">
<div class="employer-information">
<div class="col-sm-6">
<ul class="list-unstyled">
<li class="employ-name">
<a href="<%= view_profile_path(:jobseeker_id => res.jobseeker_id) %>">
<%= res.first_name %> <%= res.last_name %></a> <span>- <%= res.current_address %></span>
</li>
<li><%= res.institute_name %></li>
</ul>
</div>
<% if res.attach_resume.nil? %>
<div class="col-sm-6 employ-pdf-box">
<div class="employ-pdf">
<i class="fa fa-file-powerpoint-o icon"></i>
<h3>Empty</h3>
</div>
</div>
<% else %>
<div class="col-sm-6 employ-pdf-box">
<a href="<%= res.attach_resume.resume %>"target="_blank">
<div class="employ-pdf">
<i class="fa fa-file-powerpoint-o icon"></i>
<h3><%= res.first_name %> <%= res.last_name %>.pdf</h3>
</div>
</a>
</div>
<% end %>
</div>
</div>
<% end %>
<!-- End item1 -->

Resources