dynamic bootstrap tabs with rails - ruby-on-rails

I am trying to get rails to generate dynamic navigation tabs that refer to groups user is enrolled at. Basically, what I want to achieve is to dynamically have tabs named after groups that user is enrolled at (which is working fine) and then showing the content of each group by clicking on its tab (which is not working properly for some reason). The page loads data correctly but toggling between tabs doesn't work
Here is the code in the view
<div class="tabbable tabs-left">
<div class="row">
<div class="col-md-4">
<ul class="nav nav-pills nav-stacked">
<% current_user.group.each do |group| %>
<li><a href="#<%= group.name %>" data-toggle="tab">
<%=group.name %></a></li>
<% end %>
</ul>
</div>
<div class="col-md-8">
<div class="tab-content">
<% current_user.group.each do |group| %>
<div class="tab-pane fade <%= 'in active' if current_user.group.first == group %>" id="<%=group.name%>">
<% if current_user.group_feed(group.id).any? %>
<ol class="microposts">
<%= render current_user.group_feed(group.id) %>
<%= group.name %>
</ol>
<% end %>
</div>
<% end %>
</div>
</div>
</div>
</div>
Is there something that I am missing?

The problem is group.name producing an invalid html id attribute.
html ids should not start with a number(numbers anywhere else are ok), and have no spaces. Example:
Invalid:
1foo
aaa b
Valid:
foo1
aaa-b
group.name.parameterize will remove any odd chars(#£$ etc) and replace spaces with "-" so use that.
You also want to make this unique as things with names like: "foo" and "foo!" will parameterize to the same thing: "foo".
I'd go with:
id="<%=(group.name.gsub(/[0-9]+/, "")+group.id.to_s).parameterize%>"
This code, removes any number from the name(it only really applies at the start of the id) then adds the id on the end making it unique.

Related

Splitting record set in Rails for display purposes in menu

I'm trying to split my records in half for display in my menu. The menu is two columns (col-md-4) but the methods I'm using with ODD number of records, puts the larger number on the wrong side (last_half) of my menu. What am I missing?
Menu
<div class="col-md-4">
<ul>
<li class="mega-menu-title">Products</li>
<% first_half(#menu_products).each do |product| %>
<li>
<%= link_to product_path(product) do %>
<span class="text-yellow"><%= product.name %></span> <%= product.subtitle %>
<% end %>
</li>
<% end %>
</ul>
</div>
<div class="col-md-4">
<ul>
<li class="mega-menu-title"> </li>
<% last_half(#menu_products).each do |product| %>
<li>
<%= link_to product_path(product) do %>
<span class="text-yellow"><%= product.name %></span> <%= product.subtitle %>
<% end %>
</li>
<% end %>
</ul>
</div>
<div class="col-md-4">
<!--- non-related code in last column in menu --->
</div>
Application Helper
def first_half(list)
list[0...(list.length / 2)]
end
def last_half(list)
list[(list.length / 2)...list.length]
end
You can use the following:
list.first((list.length/2).ceil) # will convert 1.5 to 2
And
list.last((list.length/2).floor) # will convert 1.5 to 1
The issue you had is that [7,8,9][3/2] returns 8, and the logic 3/2 (list.size / 2) was used in both first_half and last_half.
This is what I ended up doing to get it to work. I had to change the length to a float to_f, then I could get it to test in the console correctly.
def first_half(list)
list[0...(list.length.to_f / 2).ceil]
end
def last_half(list)
list[(list.length.to_f / 2).ceil...list.length]
end
Using .ceil on both methods then allowed the math to work.

Rails: make scope data persist from index to show page

I have a job index page with a list of jobs. There are "filters" that a user can apply where i use scopes to limit the results based on some type of criteria such as "experience"
when a user clicks on a job in the index page they get to the jobs show page where i have a breadcrumb. if they click on that bread crumb to go back to the jobs index page all of the filters set through the scopes have been wiped out.
a user should be able to 1) set a search filter on the index 2) have the search results trimmed 3) click on a link to the jobs show page 4) be able to click on the breadcrumb navigation back to the jobs index page and have all the scopes still be applied. I have 1-3 working, just can't figure out #4 right now.
I'm not sure how to persist that scope data from the index page once i click through to the jobs show page. I'm guessing if i can store it then i can pass it as a parameter when i'm going back to the index page?
my navigation breadcrumb in the jobs show page
<nav aria-label="breadcrumb" role="navigation">
<ol class="breadcrumb">
<li class="breadcrumb-item"><%= link_to "Search Results", filtered_jobs_path(experience: params[:experience]) %></li>
<li class="breadcrumb-item active" aria-current="page">Job Details</li>
</ol>
</nav>
<% if params[:experience].present? %>
<%= 'test' %>
<% end %>
my scope in the model
scope :by_experience, -> (ex) { where(experience: ex) if ex.present? }
calling scope in the controller which is part of the index action
# scopes
if params[:experience].present?
#jobs = #jobs.by_experience(params[:experience])
end
The jobs index partial that lists the job names
<div class="jobs_index_middle_panels col-md-6">
<!-- displays error message if search term can't be found, ignores nil values -->
<% filter_array = [ params[:experience],
params[:num_days_past], params[:company], params[:search], params[:l] ].compact %>
<% if #jobs.present? %>
<!--kaminari gem helper method-->
<h5 class="text1"><%= page_entries_info #jobs, entry_name: 'job' %></h5>
<% else %>
<h5 class="text1">No jobs found. Try removing the following filters:
<span class="text-danger"><%= filter_array.join(", ") %></span></h5>
<% end %>
<% #jobs.each do |job| %>
<div class="card">
<div class="card-block">
<h4 class="vert-spacing2"><%= link_to job.title, job_url(job.id), class: "text-danger" %></h4>
<div class="vert-spacing1"><%= job.company %></div>
<div class="vert-spacing1"><%= truncate(job.description, length: 200, separator: ' ') %></div>
<b><%= job.city.capitalize %>, <%= job.state %></b>
<span class="pull-right"><%= time_ago_in_words(job.created_at) + " ago" %></span>
<%= number_to_currency(job.salary) %>
</div>
</div><br>
<% end %><!--./jobs-->
<!--pagination: uses kaminari gem -->
<nav aria-label="Page navigation">
<ul class="pagination justify-content-center">
<%= paginate #jobs %>
</ul>
</nav>
</div><!--./jobs_index_middle_panels-->
Commit your filters to the session.
if params[:experience].present?
session[:filter_on_experience] = params[:experience]
end
if session[:filter_on_experience].present?
#jobs = #jobs.by_experience(params[:experience])
end
What you are doing here is changing your scope to filter on the session data instead of the params. If there are params, it will reset your session data for the paramater (name your session[:foo] accordingly). If there is session data it will do the scope. No session data, no scope.
It is worth while to add a clear session data method if the page is refreshed. Otherwise your records will be scoped until the user clears cookies!

Ruby on rails : filter data by attributes, without call instance variable many times

I have a bootstrap tabs, with 3 tabs : verified comments, unverified comments and all comments. Each tab-content displaying different comments depending to the RoR attribute :verified (true, or false). But I have a optimization problem, because I call #ratings (comments) 3 times, and filter the comments like that : #ratings.where(:verified => true), and in production the application is really slow.
Someone know how could I filter verified, unverified and all with an other method ?
here is the code :
show.html.erb
<% if #school.ratings.count > 0 %>
<ul class="nav nav-tabs" role="tablist" style="margin-bottom: 30px;">
<li role="presentation" class="<%= 'active' if #school.is_subscribed? %>">
<a href="#verifie" aria-controls="verifie" role="tab" data-toggle="tab">
<h3>
Avis vérifiés (<%= #ratings.where(:verified => true).count %>)
</h3>
</a>
</li>
<li role="presentation">
<a href="#non_verifie" aria-controls="non_verifie" role="tab" data-toggle="tab">
<h3>
Avis non-vérifiés (<%= #ratings.where(:verified => false).count %>)
</h3>
</a>
</li>
<li role="presentation" class="<%= 'active' unless #school.is_subscribed? %>">
<a href="#all_avis" aria-controls="all_avis" role="tab" data-toggle="tab">
<h3>
Tous les avis (<%= #ratings.count %>)
</h3>
</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane <%= 'active' if #school.is_subscribed? %>" id="verifie">
<%= render partial: "schools/rating", collection: #ratings.where(:verified => true) %>
</div>
<div role="tabpanel" class="tab-pane" id="non_verifie">
<%= render partial: "schools/rating", collection: #ratings.where(:verified => false) %>
</div>
<div role="tabpanel" class="tab-pane <%= 'active' unless #school.is_subscribed? %>" id="all_avis">
<%= render partial: "schools/rating", collection: #ratings %>
</div>
</div>
<a href="#post-rating" id="post-rating-bottom-btn" class="btn btn-warning post-rating-btn"><%= fa_icon 'star' %>
Laisser un avis</a>
<% else %>
<p>Pas encore d'avis sur cette auto-école. Soyez le premier
<a id="post-rating-be-first" href="#post-rating" class="btn btn-warning post-rating-btn"><%= fa_icon 'star' %>
Donnez votre avis</a>
</p>
<% end %>
schools_controller.erb
#school = School.where(city_namespace: params[:city], title_namespace: params[:title]).first || raise(ActionController::RoutingError.new('Not Found'))
#rating = Rating.new(params[:rating])
#rating.school_id = #school.id
#ratings = #school.ratings.desc(:created_at)
Don't hesitate if you need more code / infos !
Thanks !
I am personally not sure whether you're spending your server resources on multiple calls of the instance variables. I believe that your app is slow because you select the large amount of ActiveRecord objects (which are slow themselves). So my tips are:
In your controller you can simply initialize 3 instance variables:
#ratings = #school.ratings.desc(:created_at)
#verified_ratings = #ratings.where(:verified => true)
#unverified_ratings = #ratings.where(:verified => false)
Then just call them in your view. It's not about optimization but still.
Tip 0. If you need to select a few Rating records use pluck. With pluck you will not instantiate te ActiveRecord object but the arrays of arrays. Pass to pluck the symbols of columns you need to get. For example:
Rating.where(:verified => false).pluck(:column_1, :column_2)
Tip 1. To save your server resources you can use pagination to select data from DB by portions. Use Kaminari or will_paginate gems.
Tip 2. If you're on Postgresql use postgresql_cursor gem to perform something like:
Rating.desc(:created_at).each_instance(block_size: SIZE_YOU_NEED).lazy.map { do_something }
It will load your data in batches. The size of batches can be changed (pass the value to block_size). You'll be able to sort the data in those batches (without postgresql_cursor gem you'll not be able to do that). One could say it's an alternative approach to pagination.

How to use yield with dashboard sidebar to show contents on same page

I have a rails app with a functionality quite similar to yelp with a dashboard for customers where they can edit their place but also change their acccount settings, etc. A customer can only have one place for now.
I've created a dashboard controller, views with a partial for the sidebar and everything is working so far but my problem is that when clicking on a link in the sidebar it yields to the application.html.erb. I want to yield everything from the sidebar to the main part of the dashboard/index.html.erb
So my question is how do I yield the things I click in my sidebar to the part on the right next to the sidebar on the page. Basically the functionality is like a navbar on top (only for logged in customers) but I get confused with two yields. I tried "content_for" and <%= yield :sidebar %> but didn't figure out how to get it working yet. Also I am using devise with a user and customer model which share the views and have the functionality for the customer to edit his user account in the dashboard sidebar which might cause a problem with "content_for"?
Please note that I am still learning ruby on rails and am very happy for any kind of input!
dashboard_controller.rb
def index
#place = Place.where(customer_id: current_customer.id).first
end
dashboard/index.html.erb
<div class="content">
<div class="sidebar">
<%= render 'dashboard/sidebar' %>
</div>
<div class="main">
<%= yield %>
</div>
</div>
_sidebar.html.erb
<li class="nav-link">
<%= link_to "<span class='fa fa-cog'></span> Edit".html_safe, edit_place_path(#place) %>
</li>
<li class="nav-link">
<%= link_to "<span class='fa fa-cog'</span> Settings".html_safe, edit_customer_registration_path %>
</li>
<li class="nav-link">
<%= link_to "<span class='fa fa-sign-out'></span> Log Out".html_safe, destroy_customer_session_path, method: :delete %>
</li>
application.html.erb
<body>
<%= render 'layouts/shared/header' unless #disable_navbar %>
<%= yield %>
<%= render 'layouts/shared/footer' unless #disable_footer %>
</body>
Within the context of a layout, yield identifies a section where content
from the view should be inserted.
http://guides.rubyonrails.org/layouts_and_rendering.html#understanding-yield
So no - yield will not "yield" to your dashboard/index.html.erb. Rather if you want it to have a different layout you should create a layout.
Lets look at an example:
<% # app/views/layouts/application.html.erb %>
<body>
<nav id="top-menu">
<h1><%= link_to 'MyApp', root_path %></h1>
<ul>
<%= yield :nav_links %>
<%# lets provide some default content for nav_links %>
<% content_for :nav_links do %>
<li><%= link_to 'Products', products_path %></li>
<% end %>
</ul>
</nav>
<div id="main">
<%= yield %>
</div>
</body>
Here we create a named yield in the layout called :nav_links and also add some "default" content with content_for :nav_links.
So lets look at what happens when we render /products/index.html.erb:
<div class="products">
<% if #products.any? %>
<%= render #products %>
<% else %>
<p>No products are available at this time</p>
<% end %>
</div>
<%# we also want to add a contextual navigation link %>
<% content_for(:nav_links) do %>
<li><%= link_to 'Sales', sales_path %></li>
<% end %>
The rendered result is:
<body>
<nav id="top-menu">
<h1>MyApp</h1>
<ul>
<li>Products</li>
<li>Sales</li>
</ul>
</nav>
<div id="main">
<div class="products">
<p>No products are available at this time</p>
</div>
</div>
</body>
Rails inserts the content from the view into the "main" layout and the content from content_for(:nav_links) is concatenated into the buffer.
Also I am using devise with a user and customer model which share the
views and have the functionality for the customer to edit his user
account in the dashboard sidebar which might cause a problem with
"content_for"?
The only problem you may have is a "namespace collision" - if you are using yield :sidebar and a gem for example is also using the same name for a yield you may have unexpected results.

Rendering across tabs

I am using Bootstrap in my rails app and in particular, I would like to extend Bootstrap's tabbable functionality in the following sense:
Each user of my site can have multiple profiles, namely model User has_many profiles, and I would like to display these profiles across tabs in their user/show page. Each profile has a name attribute which I want to display on the tab itself.
I was previously rendering these profiles using the typical conventions:
On user/show page:
<%= render 'shared/prof %>
shared/_prof:
<% if #prof_items.any? %>
<ol class="profiles">
<%= render partial: 'shared/prof_item', collection: #prof_items %>
</ol>
<%= will_paginate #prof_items %>
<% end %>
shared/_prof_items
<li id="<%= prof_item.id %>">
...content...
</li>
users_controller:
...
def show
#user = User.find(params[:id])
#profiles = #user.profiles.paginate(page: params[:page])
#profile = #user.profiles.build
#prof_items = #user.prof.paginate(page: params[:page])
...
end
...
So essentially I would like the outputted html to be like this:
<div class="tabbable" style="margin-bottom: 5px;">
<ul class="nav nav-tabs" id="tabHeaders">
<li class="active">
Name of first profile
</li>
<li>
Name of second profile
</li>
#and so on for each prof_item
</ul>
<div class="tab-content" id="tabContent">
<div class="tab-pane active id="<%=prof_item.id%>">
#render first profile item
</div>
<div class="tab-pane" id="<%=prof_item.id%>">
#render second profile item
</div>
</div>
However I'm not sure what code I need in user/show.html.erb, what code I need in shared/_prof_item.html.erb, and what code I need in shared/_prof.html.erb.
You can simplify your code by using rails facility to render collections:
<%= render partial: 'shared/prof_item', collection: #prof_items) %>
<%= render partial: 'shared/profile', collection: #profiles) %>
shared/_profile.html.erb: # use local variable profile
<div class="tab-pane active" id="<%=profile.id%>">
#render first profile
</div>
shared/_prof_item.html.erb # use local variable prof_item
<li>
Name of second profile item
</li>

Resources