Implementing Confirmation Buttons for Employees

To continue from where we left off, the first block is going to allow employees to add new overtime entries while the second one should have a list of items that are pending, so they can change the status.

In this video, we are going to work on the second block.

To start off, open static_controller.rb and include a variable called pending_audit_confirmations that'll have the audit logs of the current user.

# app/controllers/static_controller.rb

class StaticController < ApplicationController
  def homepage
    if admin_types.include?(current_user.type)
      @pending_approvals = Post.submitted
      @recent_audit_items = AuditLog.last(10)
    else
      @pending_audit_confirmations = current_user.audit_logs.pending
    end
  end
end

Now, let's just print out pending_audit_confirmations in our _employee.html.erb file to see what it shows.

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

<div class='container-fluid'>
  <div class='row'>
    <div class='pending-homepage employee-blocks'>
      asdf
    </div>

    <div class='col-md-5 column pending-homepage employee-blocks'>
      <%= @pending_audit_confirmations.inspect %>
    </div>
  </div>
</div>

This will show the following data in the browser:

large

That's ok. But, I think we need to make a change to our seeds.rb file. If you see, our code is creating 100 audit logs with the same starting date for the same user. Since this is never going to happen in real life, let's remove the block, And add a couple more with earlier starting dates.

# db/seeds.rb

AuditLog.create!(user_id: @user.id, status: 0, start_date: (Date.today - 6.days))
AuditLog.create!(user_id: @user.id, status: 0, start_date: (Date.today - 13.days))
AuditLog.create!(user_id: @user.id, status: 0, start_date: (Date.today - 20.days))

puts "3 audit logs have been created"

I think this is good sample data now. Run bundle exec rake db:setup

Next, we are going to have a better display. As with the previous pages, we are going to create a partial called pending_audit_confirmations , and call it in our _employee.html.erb file, like this:

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

<div class='container-fluid'>
  <div class='row'>
    <div class='pending-homepage employee-blocks'>
      <h3>Pending Your Confirmation</h3>

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

Now, coming to the partial, this is going to be much similar to the "approve" functionality. We are going to iterate over the variable and create a button that asks the user to confirm that he or she did not have any overtime during that week.

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

<% pending_audit_confirmations.each do |pending_audit_confirmation| %>
  <%= link_to "I confirm that I did not perform any overtime for the week of: #{pending_audit_confirmation.start_date}", root_path, class: 'btn btn-primary btn-block btn-lg' %>
<% end %>

So, this is how it should look now.

large

Also, in our .css file, add a top and bottom margin of 45px each.

/* app/assets/stylesheets/employee_homepage.css */

.employee-blocks {
  margin-top: 45px;
  margin-bottom: 45px;
}

Lastly, let's update the code and have it pop up a confirmation dialog box, we can do this by adding the confirm flag in the view:

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

<% pending_audit_confirmations.each do |pending_audit_confirmation| %>
  <%= link_to "I confirm that I did not perform any overtime for the week of: #{pending_audit_confirmation.start_date}", root_path, class: 'btn btn-primary btn-block btn-lg', data: { confirm: 'Are you sure you want to confirm that you did not perform any overtime?' } %>
<% end %>

This is the final display:

large

Resources

Code at this stage