Rails – Organizing the Index page and searching by topic

All of the companies in my custom CRM have a topic associated with them – these range from “Architecture” to “Outdoor” companies.  Several users want to be able to view a list of companies under each category before they begin compiling their own lead list of companies to contact so today we’ll set up an option on our index page to enable that action.

We’re going to start off by creating the appropriate view on our index page. To keep our app/views/companies/index.html.erb page from growing too cluttered we’re going to create a partial labeled _topics.html.erb. We want it to load at the top of the page so we’ll place it above the code that lists out each company.

app/views/companies/index.html.erb
<%= render 'topics' %>

We’ll then create our new partial _topics.html.erb. MY company uses 9 different topics, so using bootstrap we’ll create 3 rows of 3 topics. Since each company has a topic associated with it in the database, along with each topic we’ll be passing along the params[:topic] with the appropriate topic.

app/views/companies/_topics.html.erb
<div class="container-fluid">
  <div class="panel panel-primary">
    <div class="panel-heading">View Companies by Topic</div>
    <div class="panel-body">
      <div class="row">
        <div class="col-md-4">
          <button type="button" class='btn btn-default'><%= link_to("Agriculture/Environment", companies_path(topic: "Agriculture/Environment"))  %></button>
        </div>
        <div class="col-md-4">
          <button type="button" class='btn btn-default'><%= link_to("Architecture", companies_path(topic: "Architecture"))  %></button>
        </div>
        <div class="col-md-4">
          <button type="button" class='btn btn-default'><%= link_to("Arts & Culture", companies_path(topic: "Arts & Culture"))  %></button>
        </div>
      </div>
      <div class="row">
        <div class="col-md-4">
          <button type="button" class='btn btn-default'><%= link_to("Business", companies_path(topic: "Business"))  %></button>
        </div>
        <div class="col-md-4">
          <button type="button" class='btn btn-default'><%= link_to("Culinary", companies_path(topic: "Culinary"))  %></button>
        </div>
        <div class="col-md-4">
          <button type="button" class='btn btn-default'><%= link_to("Education", companies_path(topic: "Education"))  %></button>
        </div>
      </div>
      <div class="row">
        <div class="col-md-4">
          <button type="button" class='btn btn-default'><%= link_to("Health/Medical", companies_path(topic: "Health/Medical"))  %></button>
        </div>
        <div class="col-md-4">
          <button type="button" class='btn btn-default'><%= link_to("Outdoor", companies_path(topic: "Outdoor"))  %></button>
        </div>
        <div class="col-md-4">
          <button type="button" class='btn btn-default'><%= link_to("Travel", companies_path(topic: "Travel"))  %></button>
        </div>
      </div>
    </div>
  </div>
</div>

This will give us a section on our index page that looks like this:

Now that we’ve got the front end set up we actually need to get the back end up and running so our viewers aren’t confronted with a series of errors. Since our topic buttons will be on the index page, that’s where we’ll need to add our code in the companies controller. When a user first logs in I have the root set to the companies index page and I want to just list all of the companies in the crm at that point. You can set up the companies index page as root by entering the following code in your routes file:

config/routes.rb
root 'companies#index'

Next we’ll set up the companies controller index method to at first display all of the companies in the crm, unless a topic has been selected and then to just display all of the companies listed within that topic:

app/controllers/companies_controller.rb
def index
  if params[:topic]
    @companies = Company.where("topic LIKE ?", "%#{params[:topic]}%").all.order('LOWER(name)')
  else
    @companies = Company.all.order('LOWER(name)')
  end
end

This will, in turn, dictate what our index displays since our index page is set to display all the companies in the @companies array. Here’s my index page, just for reference:

app/views/companies/index.html.erb
<%= render 'topics' %>
<div class="container-fluid">
  <% @companies.each do |t| %>
    <div class="row">
      <div class="col-xs-8 col-xs-offset-2">
        <div class="well content-holder">
          <div class="company-name">
            <%= link_to(t.name, company_path(t)) %>
            <% if t.user_id? %>
              <div class="company-user">
                <%= User.find(t.user_id).username %>
              </div>
            <% else %>
            <% end %>
          </div>
          <div class="company-address">
            <%= t.address %>
          </div>
          <div class="company-status">
            <%= t.topic %>
          </div>
          <div class="company-actions">
            <% if current_user.try(:admin?) or current_user.try(:beta?) %>
              <%= link_to("Edit", edit_company_path(t), class: "btn btn-xs btn-primary") %>
              <%= link_to("Delete", company_path(t), method: :delete, data: { confirm: "Are you sure?"}, class: "btn btn-xs btn-danger") %>
            <% end %>
          </div>
        </div>
      </div>
  </div>
  <% end %>
</div>

This will give you a page that looks like this:

I’ll create a post about the search boxes in the future.

 

Loading Facebook Comments ...

Leave a Reply

Your email address will not be published. Required fields are marked *