_requests_in_progress.html.erb

<section class="container mx-auto my-5">
  <h2 class="font-weight-bold">Requests In Progress</h2>

  <table class="rounded-3 w-100 shadow-lg bg-white">
    <thead>
      <tr class="border-bottom border-dark">
        <th scope="col" class="p-4" style='width:150px'>Request Date</th>
        <th scope="col" class="p-4">Number of Items Requested</th>
        <th scope="col" class="p-4">Items Requested</th>
        <th scope="col" class="p-4">Comment and Sender</th>
      </tr>
    </thead>
    <tbody>
    <% @requests_in_progress.each do |request| %>
        <tr class="border-bottom last:border-none">
          <td class="p-4">
            <p>
              <span class="d-inline-block text-primary far fa-file-alt mr-1"></span>
              <span class="d-inline-block"><%= request.created_at.strftime("%m/%d/%Y") %></span>
            </p>
          </td>

          <td class="p-4"><%= request.total_items %></td>
          <td class="p-4 d-flex flex-wrap">
            <% request.item_requests.each do |item_request| %>
              <span class="p-1 mr-1 mb-2 lg:mb-0 border border-dark rounded-1">
                <% if item_request.request_unit %>
                  <%= pluralize(item_request.quantity, item_request.request_unit) %>
                  —
                <% else %>
                  <%= item_request.quantity %>
                <% end %>
                <%= item_request.item.name %>
              </span>
            <% end %>
          </td>
          <td class="p-4">
            <% comment = request.comments %>
            <% if comment.present? %>
              <div class="mb-2" data-bs-toggle="tooltip" data-bs-title="<%= comment %>">
                <%= truncate(comment, length: 20) %>
              </div>
            <% end %>
            <a href="mailto:<%= request.requester.email %>"><%= request.requester.email %></a>
          </td>
        </tr>
      <% end %>
    </tbody>
  </table>
</section>

<script type="module">
  $(document).ready(function() {
    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
    [...tooltipTriggerList].forEach(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
  })
</script>