feat: Add submission type filter to proposals review recap

Add the ability to filter proposals by submission type (talk/workshop)
in the review recap screen. This includes:

- Add submission_types to the template context in admin.py
- Add filter UI with checkboxes for each submission type
- Store typeId in JavaScript data for each submission
- Unify all filters (reviews count, status, type) into a single
  applyFilters function for combined filtering

Closes #4537

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

Author: github-actions[bot]

backend/reviews/admin.py

@@ -33,7 +33,7 @@
 from grants.models import Grant, GrantReimbursement, GrantReimbursementCategory
 from participants.models import Participant
 from reviews.models import AvailableScoreOption, ReviewSession, UserReview
-from submissions.models import Submission, SubmissionTag
+from submissions.models import Submission, SubmissionTag, SubmissionType
 from users.admin_mixins import ConferencePermissionMixin
 from users.models import User
 
@@ -602,6 +602,7 @@ def _review_proposals_recap_view(self, request, review_session):
             grants=grants,
             review_session_id=review_session_id,
             audience_levels=conference.audience_levels.all(),
+            submission_types=SubmissionType.objects.all(),
             review_session_repr=str(review_session),
             all_statuses=[choice for choice in Submission.STATUS],
             title="Recap",

backend/reviews/templates/proposals-recap.html

@@ -205,56 +205,61 @@
     });
 
     const filterWithReviewsSelect = document.querySelector('#filter-with-n-reviews');
-    filterWithReviewsSelect.addEventListener('change', e => {
-      e.preventDefault();
+    const filterByStatusInputs = [...document.querySelectorAll('input[name="filter-by-status"]')];
+    const filterByTypeInputs = [...document.querySelectorAll('input[name="filter-by-type"]')];
+
+    const applyFilters = () => {
+      const reviewsFilterValue = filterWithReviewsSelect.value;
 
-      const filterValue = parseInt(e.target.value, 10);
+      const visibleStatuses = filterByStatusInputs.filter(
+        input => input.checked
+      ).map(
+        input => input.value
+      );
+
+      const visibleTypes = filterByTypeInputs.filter(
+        input => input.checked
+      ).map(
+        input => parseInt(input.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) {
+          const reviewsMatch = reviewsFilterValue === 'all' || proposalData.numOfVotes === parseInt(reviewsFilterValue, 10);
+          const statusMatch = visibleStatuses.includes(proposalData.originalStatus);
+          const typeMatch = visibleTypes.includes(proposalData.typeId);
+
+          if (reviewsMatch && statusMatch && typeMatch) {
             proposalRow.classList.remove('hidden')
           } else {
             proposalRow.classList.add('hidden')
           }
         }
-      )
+      );
+    };
+
+    filterWithReviewsSelect.addEventListener('change', e => {
+      e.preventDefault();
+      applyFilters();
     });
 
-    const filterByStatusInputs = [...document.querySelectorAll('input[name="filter-by-status"]')];
     filterByStatusInputs.forEach(
       filterByStatusInput => {
         filterByStatusInput.addEventListener('change', e => {
           e.preventDefault();
+          applyFilters();
+        });
+      }
+    );
 
-          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')
-              }
-            }
-          );
+    filterByTypeInputs.forEach(
+      filterByTypeInput => {
+        filterByTypeInput.addEventListener('change', e => {
+          e.preventDefault();
+          applyFilters();
         });
       }
     );
@@ -352,6 +357,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.id }}">
+            <span>{{ submission_type.name }}</span>
+          </label>
+          {% endfor %}
+        </div>
+      </div>
     </div>
     <div class="module filtered" id="changelist">
       <div class="changelist-form-container">
@@ -399,6 +415,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}},
+                  typeId: {{ item.type.id }},
                 };
               </script>
               <tr class="proposal-item" id="submission-{{item.id}}" data-original-status="{{ item.current_or_pending_status }}">