Bringing in Live Data to the Admin Management Dashboard

To continue from where we left off in the previous guide, let's make a couple changes to our stylesheet. Increase the margin to 42px, and change the text color to white. If you've never worked with bootstrap before, the col-md-3 uses a margin of 12px, and this is why we have a big gap towards the right-hand corner. To avoid this gap, I'm increasing the margin to 42px. Next, let's create the style for pending-details. I want it to just add a value 0f 900 to font-weight to give a distinction between the title and the content. The final stylesheet looks like this:

/* app/assets/stylesheets/admin_homepage.css */

.pending-homepage {
  margin-top: 20px;
  margin-bottom: 20px;
  background-color: #E3E3E3;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  padding: 20px;
}

.homepage-block {
  background-color: #1D3C91;
  color: white;
  margin: 12px 42px 12px 42px;
  padding: 15px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

.pending-details {
  font-weight: 900;
}

Now that our page layout looks nice, let's start adding real data to it. Open _admin.html.erb and static_controller.rb. In the homepage method of the controller file, we are going to make some things available for the partials. First, we are creating a variable called pending_variables that'll hold all the posts with the status submitted.

# app/controllers/static_controller.rb

class StaticController < ApplicationController
  def homepage
    @pending_approvals = Post.where(status: 'submitted')
  end
end

Next, open _admin.html.erb, and iterate over pending_variables to display the associated user's full name, date and rationale.

<!-- app/views/static/_admin.html.erb -->

<div class='container-fluid'>
  <div class='pending-homepage row'>   
    <% pending_approvals.each do |pending_approval| %>
      <div class='homepage-block col-md-3'>
        <h4>
          <%= pending_approval.user.full_name %>
        </h4>

        <p>
          <span class='pending-details'>Date Submitted:</span> <%= pending_approval.date %>
        </p>

        <p>
          <span class='pending-details'>Rationale:</span> <%= truncate pending_approval.rationale, length: 42 %>
        </p>
      </div>
    <% end %>
  </div>

  <div class='pending-homepage'>
    <div>
      <p>asdf</p>
    </div>
  </div>
</div>

This is how it looks in the browser and I think it's off to a good start.

large

I want to see how it looks with other content, so I'm going to add some more data to our seeds.rb file for the post creation process. I'm making the rationale really long to see how the truncate method is behaving.

# db/seeds.rb

100.times do |post|
  Post.create!(date: Date.today, rationale: "#{post} rationale content Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", user_id: @user.id, overtime_request: 2.5)
end

puts "100 Posts have been created"

After updating the file, let's run bundle exec rake db:setup Now, our browser content looks like this:

large

That's exactly what I want. Now, I want to add a title before our iteration code.

<!-- app/views/static/_admin.html.erb -->

<div class='container-fluid'>
  <div class='pending-homepage row'>
    <h2>Items Pending Your Approval</h2>
    <hr>

Next I want to restrict the length of our rationale to 42 characters. Let's also refactor our code a little bit. Let's move all this code to a new partial called _pending_approval.html.erb

<!-- app/views/static/_pending_approval.html.erb -->

<% pending_approvals.each do |pending_approval| %>
  <div class='homepage-block col-md-3'>
    <h4>
      <%= pending_approval.user.full_name %>
    </h4>

    <p>
      <span class='pending-details'>Date Submitted:</span> <%= pending_approval.date %>
    </p>

    <p>
      <span class='pending-details'>Rationale:</span> <%= truncate pending_approval.rationale, length: 42 %>
    </p>
  </div>
<% end %>

And we'll call this partial in our _admin.html.erb, like this:

<!-- app/views/static/_admin.html.erb -->

<div class='container-fluid'>
  <div class='pending-homepage row'>
    <h2>Items Pending Your Approval</h2>
    <hr>

    <%= render partial: 'pending_approval', locals: { pending_approvals: @pending_approvals } %>
  </div>

  <div class='pending-homepage'>
    <div>
      <p>asdf</p>
    </div>
  </div>
</div>

Next, let's add a couple of buttons to make it easy for the admin to approve or review each post. We'll add the files to the _pending_approval.html.erb partial.

<!-- app/views/static/_pending_approval.html.erb -->

<div class='row'>
  <div class='col-md-6 column'>
    <%= link_to 'Approve', root_path, class: 'btn btn-success btn-block' %>
  </div>
  <div class='col-md-6 column'>
    <%= link_to 'Review', root_path, class: 'btn btn-warning btn-block' %>
  </div>
</div>

The page should look like this now:

large

Resources

Code at this stage