Ability to select multiple codes to filter responses on question page

identity-research-lab · Oct 30, 2024 · bce2d8d · bce2d8d
1 parent 0e1da30
commit bce2d8d
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 32 deletions.
diff --git a/app/views/questions/show.html.erb b/app/views/questions/show.html.erb
@@ -1,12 +1,10 @@
 <%- title "Participant Survey Responses to #{@question.label} Question" %>
 
 <h1><%= @responses.count %> Participant Survey Responses to "<%= @question.label %>".</h1>
-<p>These are the responses provided by participants to the "<%= @question.label %>" question. Blank responses are not listed here. Click on a code to show all survey participant responses related to that code.</p>
+<p>These are the responses provided by participants to the "<%= @question.label %>" question. Blank responses are not listed here. Click on a code to show all survey participant responses related to that code. You may select multiple codes to further filter the responses.</p>
 
 <p>For a complete list of codes for this question, refer to the <%= link_to "codebook.", codebook_path(@question.id), class: "jump-link" %></p>
 
-
-
 <table>
   <thead>
     <tr>
@@ -20,7 +18,7 @@
     <% @responses.each do |response| %>
       <% alt = counter % 2 == 1 ? "" : "alt" %>
       <% counter += 1 %>
-      <tr class="<%= alt %> data-row" data-tags="<%= response.raw_codes %>">
+      <tr class="<%= alt %> data-row" data-codes="<%= response.codes.map(&:id) %>">
         <td class="label">
           <%= link_to response.survey_response_id, survey_response_path(response.survey_response_id), class: "jump-link" %>
         </td>
@@ -37,41 +35,43 @@
 
 <script language="javascript">
 
-  function filterBy(dataAttribute) {
+  function filterBy(codeID) {
+
     const dataRows = Array.from(document.getElementsByClassName('data-row'));
-    const tagElements = Array.from(document.getElementsByClassName('tag'));
-    const selectedTagElements = document.getElementsByClassName('active');
-    const beaconTagElement = selectedTagElements[0];
+    const codeElements = Array.from(document.getElementsByClassName('codes'));
 
-    dataRows.forEach(element => {
-      element.classList.remove('hidden');
+    codeElements.forEach(element => {
+      if (element.getAttribute('data-code') == codeID) {
+        if (Array.from(element.classList).includes('active')) {
+          // If a code is already marked active, and is clicked on again, clear it.
+          element.classList.remove('active');
+        } else {
+          element.classList.add('active');
+        }
+      }
     });
 
-    if (selectedTagElements.length > 0 && beaconTagElement.getAttribute('data-code') == dataAttribute) {
-      // reset tags and remove filters from data rows
-      tagElements.forEach(element => {
-        element.classList.remove('active');
-      });
-      dataRows.forEach(element => {
-        element.classList.remove('hidden');
+    var activeCodes = Array.from(document.querySelectorAll(".codes.active"));
+
+    if (activeCodes.length == 0) {
+      dataRows.forEach(rowElement => {
+        rowElement.classList.remove('hidden');
       });
     } else {
-      // activate tags and apply filters to data rows
-      tagElements.forEach(element => {
-        element.classList.remove('active');
-        if (element.getAttribute('data-code') == dataAttribute) {
-          element.classList.add('active');
-        }
+      dataRows.forEach(rowElement => {
+        rowElement.classList.add('hidden');
       });
-      dataRows.forEach(element => {
-        let tags = JSON.parse(element.getAttribute('data-tags'));
-        if (tags.includes(dataAttribute)) {
-          element.classList.remove('hidden');
-        } else {
-          element.classList.add('hidden');
+    }
+
+    activeCodes.forEach(codeElement => {
+      let codeId = codeElement.getAttribute('data-code');
+      dataRows.forEach(rowElement => {
+        let codes = JSON.parse(rowElement.getAttribute('data-codes'));
+        if (codes.includes(codeId)) {
+          rowElement.classList.remove('hidden');
         }
       });
-    }
+    });
 
   }
 

diff --git a/app/views/responses/_form.html.erb b/app/views/responses/_form.html.erb
@@ -8,8 +8,8 @@
 			<% @tag_class = "zoom-link-light" %>
 		<% end %>
 		<div class="tag-collection" id="display-<%= response.id %>">
-			<% response.raw_codes.sort.each do |code| %>
-				<a onclick="filterBy('<%= code %>'); return false"><div class="tag <%= @tag_class %> <%= @css_class %>" data-code="<%= code %>"><%= code %></div></a>
+			<% response.codes.sort_by(&:name).each do |code| %>
+				<a onclick="filterBy('<%= code.id %>'); return false"><div class="tag codes <%= @tag_class %> <%= @css_class %>" data-code="<%= code.id %>"><%= code.name %></div></a>
 			<% end %>
 			<div class="tag-button"><a onclick="toggleFormMode('<%= response.id %>'); return false;">Edit</a></div>
 			<br style="clear: both;" />