Add submission type filter to proposal review recap screen

Allow filtering proposals by type (e.g. talk, workshop) in the recap
screen using checkboxes, similar to the existing status filter.

Also refactors the filtering logic to apply all filters (reviews count,
status, and type) together rather than independently, preventing
filters from overriding each other.

Closes #4537

Co-authored-by: Marco Acierno <marcoacierno@users.noreply.github.com>

Author: github-actions[bot]

backend/reviews/adapters.py

@@ -183,6 +183,7 @@ def get_recap_context(
             grants=grants,
             review_session_id=review_session.id,
             audience_levels=conference.audience_levels.all(),
+            submission_types=conference.submission_types.all(),
             review_session_repr=str(review_session),
             all_statuses=[choice for choice in Submission.STATUS],
             title="Recap",

backend/reviews/templates/proposals-recap.html

@@ -259,59 +259,33 @@
     });
 
     const filterWithReviewsSelect = document.querySelector('#filter-with-n-reviews');
-    filterWithReviewsSelect.addEventListener('change', e => {
-      e.preventDefault();
-
-      const filterValue = parseInt(e.target.value, 10);
-
-      document.querySelectorAll('.proposal-item').forEach(
-        proposalRow => {
-          if (e.target.value === 'all') {
-            proposalRow.classList.remove('hidden')
-            return;
-          }
-
-          const proposalId = parseInt(proposalRow.id.split('-')[1], 10);
-          const proposalData = submissionsById[proposalId];
-
-          const numOfVotes = proposalData.numOfVotes;
-          if (numOfVotes === filterValue) {
-            proposalRow.classList.remove('hidden')
-          } else {
-            proposalRow.classList.add('hidden')
-          }
+    const filterByStatusInputs = [...document.querySelectorAll('input[name="filter-by-status"]')];
+    const filterByTypeInputs = [...document.querySelectorAll('input[name="filter-by-type"]')];
+
+    const applyFilters = () => {
+      const reviewFilterValue = filterWithReviewsSelect.value;
+      const visibleStatuses = filterByStatusInputs.filter(input => input.checked).map(input => input.value);
+      const visibleTypes = filterByTypeInputs.filter(input => input.checked).map(input => input.value);
+
+      document.querySelectorAll('.proposal-item').forEach(proposalRow => {
+        const proposalId = parseInt(proposalRow.id.split('-')[1], 10);
+        const proposalData = submissionsById[proposalId];
+
+        const matchesReviews = reviewFilterValue === 'all' || proposalData.numOfVotes === parseInt(reviewFilterValue, 10);
+        const matchesStatus = visibleStatuses.includes(proposalData.originalStatus);
+        const matchesType = visibleTypes.includes(proposalData.submissionType);
+
+        if (matchesReviews && matchesStatus && matchesType) {
+          proposalRow.classList.remove('hidden');
+        } else {
+          proposalRow.classList.add('hidden');
         }
-      )
-    });
+      });
+    };
 
-    const filterByStatusInputs = [...document.querySelectorAll('input[name="filter-by-status"]')];
-    filterByStatusInputs.forEach(
-      filterByStatusInput => {
-        filterByStatusInput.addEventListener('change', e => {
-          e.preventDefault();
-
-          const filterValue = e.target.value;
-          const visibleStatuses = filterByStatusInputs.filter(
-            input => input.checked
-          ).map(
-            input => input.value
-          );
-
-          document.querySelectorAll('.proposal-item').forEach(
-            proposalRow => {
-              const proposalId = parseInt(proposalRow.id.split('-')[1], 10);
-              const proposalData = submissionsById[proposalId];
-
-              if (visibleStatuses.includes(proposalData.originalStatus)) {
-                proposalRow.classList.remove('hidden')
-              } else {
-                proposalRow.classList.add('hidden')
-              }
-            }
-          );
-        });
-      }
-    );
+    filterWithReviewsSelect.addEventListener('change', applyFilters);
+    filterByStatusInputs.forEach(input => input.addEventListener('change', applyFilters));
+    filterByTypeInputs.forEach(input => input.addEventListener('change', applyFilters));
   });
 
   const updateBottomBarUI = () => {
@@ -431,6 +405,17 @@ <h3>Show proposals with pending status:</h3>
           {% endfor %}
         </div>
       </div>
+      <div class="opt-filter">
+        <h3>Show proposals with type:</h3>
+        <div>
+          {% for submission_type in submission_types %}
+          <label>
+            <input checked type="checkbox" name="filter-by-type" value="{{ submission_type.name }}">
+            <span>{{ submission_type.name }}</span>
+          </label>
+          {% endfor %}
+        </div>
+      </div>
     </div>
     <div class="module filtered" id="changelist">
       <div class="changelist-form-container">
@@ -478,6 +463,7 @@ <h3>Show proposals with pending status:</h3>
                   audienceLevel: {{ item.audience_level.id }},
                   languages: [{% for language in item.languages.all %}"{{language.code}}",{% endfor %}],
                   numOfVotes: {{item.userreview_set.count}},
+                  submissionType: "{{ item.type.name }}",
                 };
               </script>
               <tr class="proposal-item" id="submission-{{item.id}}" data-original-status="{{ item.current_or_pending_status }}">