Add race, station and centers filter in and out options

tally_ho/apps/tally/static/js/data_table.js

@@ -148,6 +148,74 @@ $(document).ready(function () {
     });
   });
 
+  $('#in-report').on('click', '#filter-in-report', function () {
+    const table = $('.datatable').DataTable();
+
+    table.destroy();
+    let data = [];
+    let selectOneIds = $('select#filter-in-centers').val();
+    let selectTwoIds = $('select#filter-in-stations').val();
+
+    if (selectOneIds || selectTwoIds) {
+      const items = {
+        select_1_ids: selectOneIds !== null ? selectOneIds : [],
+        select_2_ids: selectTwoIds !== null ? selectTwoIds : [],
+        filter_in: "True"
+      };
+
+      data = items;
+    }
+
+    data = data.length
+      ? data.filter((item) =>
+          Object.values(item).every((value) => typeof value !== 'undefined')
+        )
+      : data;
+
+    $('.datatable').dataTable({
+      language: dt_language,
+      order: [[0, 'desc']],
+      lengthMenu: [
+        [10, 25, 50, 100, 500],
+        [10, 25, 50, 100, 500],
+      ],
+      columnDefs: [
+        {
+          orderable: true,
+          searchable: true,
+          className: 'center',
+          targets: [0, 1],
+        },
+      ],
+      searching: true,
+      processing: true,
+      serverSide: true,
+      stateSave: true,
+      ajax: {
+        url: LIST_JSON_URL,
+        type: 'POST',
+        data: { data: JSON.stringify(data) },
+        traditional: true,
+        dataType: 'json',
+      },
+      dom:
+        "<'row'<'col-sm-1'B><'col-sm-6'l><'col-sm-5'f>>" +
+        "<'row'<'col-sm-12'tr>>" +
+        "<'row'<'col-sm-5'i><'col-sm-7'p>>",
+      buttons: [
+        {
+          extend: 'csv',
+          filename: exportFileName,
+          action: exportAction,
+          exportOptions: {
+            columns: ':visible :not(.actions)',
+          },
+        },
+      ],
+      responsive: true,
+    });
+  });
+
   $('#report').on('click', '#reset', function () {
     const table = $('.datatable').DataTable();
 

tally_ho/apps/tally/static/js/get_centers_stations.js

@@ -1,6 +1,6 @@
 $(document).ready(function () {
   $('#centers').change(function () {
-    const center_ids = $('.selectpicker').val();
+    const center_ids = $('#centers').val();
 
     if (center_ids) {
       $.ajax({
@@ -23,4 +23,27 @@ $(document).ready(function () {
       $('.center-stations').selectpicker('refresh');
     }
   });
+  $('#filter-in-centers').change(function () {
+    const center_ids = $('#filter-in-centers').val();
+    if (center_ids) {
+      $.ajax({
+        url: getCentersStationsUrl,
+        data: {
+          data: JSON.stringify({
+            center_ids: center_ids,
+            tally_id: tallyId,
+          }),
+        },
+        traditional: true,
+        dataType: 'json',
+        success: (data) => {
+          const { station_ids } = data;
+          $('.filter-in-center-stations').selectpicker('val', station_ids);
+        },
+      });
+    } else {
+      $('.filter-in-center-stations').selectpicker('deselectAll');
+      $('.filter-in-center-stations').selectpicker('refresh');
+    }
+  });
 });

tally_ho/apps/tally/templates/reports/form_results.html

@@ -52,6 +52,35 @@ <h1>{% trans 'Form Results' %}</h1>
       </div>
     </div>
   </div>
+</caption>
+  <caption style="margin-top: 2em; margin-left: -0.5em; margin-bottom: 2em;">
+    <div id="in-report" class="row">
+    <div class="col-sm-4">
+      <p style="text-align: left; margin-left: .5em;">Centers</p>
+      <select class="selectpicker" id="filter-in-centers" name="report_length" aria-controls="report" multiple data-actions-box="true" title="Select Centers">
+        {% for center in centers %}
+          <option value={{center.id}}>{{center.name}}</option>
+        {% endfor %}
+      </select>
+    </div>
+    <div class="col-sm-4">
+      <p style="text-align: left; margin-left: .5em;">Stations</p>
+      <select class="selectpicker filter-in-center-stations" id="filter-in-stations" name="report_length" aria-controls="report" multiple data-actions-box="true" title="Select Stations">
+        {% for station in stations %}
+          <option value={{station.id}}>{{station.id}}</option>
+        {% endfor %}
+      </select>
+    </div>
+    <div class="col-sm-4">
+      <div class="card">
+        <div class="card-body">
+          <p class="card-text" style="text-align: left;">Filter Centers and Stations from results.</p>
+          <button style="float: left;" id="filter-in-report" class="btn btn-default btn-small">Apply</button>
+          <a href='.' style="float: left; margin-left: 1em;" class="btn btn-default btn-small">Reset</a>
+        </div>
+      </div>
+    </div>
+  </div>
 </caption>
 <br>
   <thead>

tally_ho/apps/tally/views/reports/administrative_areas_reports.py

@@ -558,23 +558,38 @@ def results_queryset(
             data['select_1_ids'] if len(data['select_1_ids']) else [0]
         selected_station_ids =\
             data['select_2_ids'] if len(data['select_2_ids']) else [0]
-
-        qs = qs\
+        filter_in = data.get('filter_in')
+        qs = qs \
             .annotate(station_ids=station_id_query)
+        if filter_in:
+            qs_1 = qs \
+                .filter(
+                Q(result_form__center__id__in=selected_center_ids) &
+                Q(station_ids__in=selected_station_ids)) \
+                .annotate(candidate_name=F('candidate__full_name')) \
+                .filter(candidate_name__isnull=False)
 
-        qs_1 = qs\
-            .filter(
-                ~Q(result_form__center__id__in=selected_center_ids) &
-                ~Q(station_ids__in=selected_station_ids))\
-            .annotate(candidate_name=F('candidate__full_name'))\
-            .filter(candidate_name__isnull=False)
+            qs_2 = qs \
+                .filter(
+                Q(result_form__center__id__in=selected_center_ids) &
+                Q(station_ids__in=selected_station_ids)) \
+                .annotate(candidate_name=F(ballot_comp_candidate_name)) \
+                .filter(candidate_name__isnull=False)
 
-        qs_2 = qs\
-            .filter(
-                ~Q(result_form__center__id__in=selected_center_ids) &
-                ~Q(station_ids__in=selected_station_ids))\
-            .annotate(candidate_name=F(ballot_comp_candidate_name))\
-            .filter(candidate_name__isnull=False)
+        else:
+            qs_1 = qs\
+                .filter(
+                    ~Q(result_form__center__id__in=selected_center_ids) &
+                    ~Q(station_ids__in=selected_station_ids))\
+                .annotate(candidate_name=F('candidate__full_name'))\
+                .filter(candidate_name__isnull=False)
+
+            qs_2 = qs\
+                .filter(
+                    ~Q(result_form__center__id__in=selected_center_ids) &
+                    ~Q(station_ids__in=selected_station_ids))\
+                .annotate(candidate_name=F(ballot_comp_candidate_name))\
+                .filter(candidate_name__isnull=False)
 
         qs = qs_1.union(qs_2) if len(qs_2) else qs_1
 
@@ -652,6 +667,7 @@ def results_queryset(
                         result_form__reconciliationform__isnull=False,
                         then=F(reconform_num_valid_votes)
                     ), default=V(0))).distinct()
+
     else:
         qs_1 = qs\
             .annotate(candidate_name=F('candidate__full_name'))\