Styling the Audit Log Dashboard
Walk through how to style the audit log dashboard page to give a easy way for managers to visualize the audit log records from employees.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

In this video, we are going to make our audit log dashboard more visually appealing.

Start the rails server, and open index.html.erb in views/audit_logs. Copy the code from posts index page and paste it here because we want the same table structure.

Change the partial from posts to audit_logs. Then, change the attributes to employee, week starting (which is our start date), confirmed at (our end date) and status.

The updated code is:

<!-- app/views/audit_logs/index.html.erb -->

<h1>Audit Log Dashboard</h1>

<table class="table table-striped table-hover">
  <thead>
    <tr>
      <th>
        #
      </th>
      <th>
        Employee
      </th>
      <th>
        Week Starting
      </th>
      <th>
        Confirmed At
      </th>
      <th>
        Status
      </th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <%= render @audit_logs %>
  </tbody>
</table>

Next, open _audit_log.html.erb and create a table row to display the corresponding values in the browser. The code should look like this:

<!-- app/views/audit_logs/_audit_log.html.erb -->

<tr>
  <td>
    <%= audit_log.id %>
  </td>
  <td>
    <%= audit_log.user.full_name %>
  </td>
  <td>
    <%= audit_log.start_date %>
  </td>
  <td>
    <%= audit_log.end_date %>
  </td>
  <td>
    <%= audit_log.status %>
  </td>
</tr>

If you check this work in the browser you'll see that everything is working properly.

Resources