messy table for visual POC

Author: svileshina

app/decorators/casa_case_decorator.rb

@@ -15,6 +15,14 @@ def case_contacts_latest_before(date)
     object.case_contacts.where("occurred_at < ?", date).max_by(&:occurred_at)
   end
 
+  def case_contacts_made
+    object.case_contacts.where('occurred_at > ?', DateTime.now - 60.days).count
+  end
+
+  def last_attempted_contact_formatted(volunteer_id)
+    object.case_contacts.where(creator_id: volunteer_id).order(occurred_at: :desc).first&.occurred_at&.strftime("%B %d, %Y")
+  end
+
   def case_contacts_filtered_by_active_assignment_ordered_by_occurred_at
     object.case_contacts
       .joins("INNER JOIN case_assignments on case_assignments.casa_case_id = case_contacts.casa_case_id and case_assignments.volunteer_id = case_contacts.creator_id")

app/javascript/src/dashboard.js

@@ -134,8 +134,14 @@ $(() => { // JQuery's callback for the DOM loading
         }
       })
     },
-    order: [[7, 'desc']],
+    order: [[8, 'desc']],
     columns: [
+      {
+        className: 'dt-control',
+        orderable: false,
+        data: null,
+        defaultContent: ''
+      },
       {
         data: 'id',
         targets: 0,
@@ -304,6 +310,19 @@ $(() => { // JQuery's callback for the DOM loading
     }
   })
 
+  volunteersTable.on('click', 'tbody td.dt-control', function (e) {
+    let tr = e.target.closest('tr');
+    let row = volunteersTable.row(tr);
+
+    if (row.child.isShown()) {
+        row.child.hide();
+    }
+    else {
+        const vdomId = `#volunteer-details-${row.data().id}`
+        row.child($(vdomId).html()).show();
+    }
+  });
+
   // Because the table saves state, we have to check/uncheck modal inputs based on what
   // columns are visible
   volunteersTable.columns().every(function (index) {

app/views/volunteers/index.html.erb

@@ -178,6 +178,7 @@
                 <th>
                   <input id="checkbox-toggle-all" type="checkbox" class="form-check-input" data-select-all-target="checkboxAll" data-action="select-all#toggleAll">
                 </th>
+                <th></th>
                 <th>Name</th>
                 <th>Email</th>
                 <th>Supervisor</th>
@@ -247,3 +248,28 @@
 
 </div>
 </div>
+
+<div style='display:none'>
+  <% current_organization.volunteers.each do |volunteer| %>
+    <div id="volunteer-details-<%= volunteer.id %>">
+      <% if volunteer.casa_cases.any? %>
+        <table>
+          <tr>
+            <th> Case Number </th>
+            <th> Transition Aged Youth </th>
+            <th> Last Attempted Contact </th>
+            <th> Contacts Made in Past 60 Days </th>
+          </tr>
+          <% volunteer.casa_cases.each do |casa_case| %>
+            <tr>
+              <td> <%= casa_case.case_number %> </td>
+              <td> <%= casa_case.decorate.transition_aged_youth %> </td>
+              <td> <%= casa_case.decorate.last_attempted_contact_formatted(volunteer.id) %></td>
+              <td> <%= casa_case.decorate.case_contacts_made %>
+            </tr>
+          <% end %>
+        </table>
+      <% end %>
+    </div>
+  <% end %> 
+</div>