Merge pull request #85 from cmu-delphi/OKRS24-93-Add-a-checkbox-next-to-each-row-to-filter-them

Added filters by several ID to perform more precise filtering

Author: BrainIsDead

src/assets/css/style.css

@@ -1236,3 +1236,7 @@ h6 {
 #order_by_label{
   margin-bottom: 1rem;
 }
+
+.clickable-table-cell:hover {
+  cursor: pointer;
+}

src/signals/filters.py

@@ -2,16 +2,27 @@
 
 import django_filters
 from django.db.models import Q
-from django_filters.filters import CharFilter, OrderingFilter
+from django_filters.filters import (
+    BaseInFilter,
+    CharFilter,
+    NumberFilter,
+    OrderingFilter,
+)
+from django_filters.widgets import QueryArrayWidget
 
 from signals.models import Signal
 
 
+class NumberInFilter(BaseInFilter, NumberFilter):
+    pass
+
+
 class SignalFilter(django_filters.FilterSet):
     """
     FilterSet for the Signal model.
     """
 
+    id = NumberInFilter(field_name='id', lookup_expr='in', widget=QueryArrayWidget)
     search = CharFilter(method='filter_search')
     order_by = OrderingFilter(
         fields=(
@@ -24,6 +35,7 @@ class SignalFilter(django_filters.FilterSet):
     class Meta:
         model = Signal
         fields: list[str] = [
+            'id',
             'search',
             'pathogen',
             'active',

src/signals/forms.py

@@ -10,13 +10,12 @@
     ActiveChoices
 )
 
-MULTI_SELECT_TOOLTIP_MESSAGE = _('Hold down “Control”, or “Command” on a Mac, to select more than one.')
-
 
 class SignalFilterForm(forms.ModelForm):
     """
     A form for filtering signals.
     """
+    id = forms.ModelMultipleChoiceField(queryset=Signal.objects.all(), widget=forms.MultipleHiddenInput)
     order_by = forms.ChoiceField(choices=[
             ('', '---------'),
             ('name', 'Name'),
@@ -35,6 +34,7 @@ class SignalFilterForm(forms.ModelForm):
     class Meta:
         model = Signal
         fields: list[str] = [
+            'id',
             'order_by',
             'search',
             'pathogen',

src/signals/views.py

@@ -36,6 +36,7 @@ def get_queryset(self) -> Any:
 
     def get_url_params(self):
         url_params_dict = {
+            "id": self.request.GET.get("id"),
             "search": self.request.GET.get("search"),
             "pathogen": int(self.request.GET.get("pathogen"))
             if self.request.GET.get("pathogen")

src/templates/signals/signals.html

@@ -241,7 +241,7 @@ <h5 class="modal-title">Time Label</h5>
                         </div>
                         <div class="card-body">
                             <div class="d-grid gap-2 mt-3">
-                                <button type="submit" class="btn btn-primary">{% trans 'Apply Filters' %}</button>
+                                <button id="filter-submit" type="submit" class="btn btn-primary">{% trans 'Apply Filters' %}</button>
                             </div>
                         </div>
                     </div>
@@ -264,6 +264,7 @@ <h5 class="modal-title">Time Label</h5>
                         <table class="table table-borderless table-hover">
                             <thead>
                                 <tr>
+                                    <th scope="col"></th>
                                     <th scope="col">Name</th>
                                     <th scope="col">Data Source</th>
                                     <th scope="col">Description</th>
@@ -282,9 +283,11 @@ <h5 class="modal-title">Time Label</h5>
         </div>
     </div>
 </form>
+
 <script>
     document.getElementById('id_order_by').addEventListener('change', function() {
         document.getElementById('filters-form').submit();
     });
 </script>
+
 {% endblock %}

src/templates/signals/signals_list.html

@@ -1,11 +1,17 @@
+{% load crispy_forms_tags %}
+
 {% for signal in signals %}
     {% if forloop.last %}
         <tr hx-trigger="revealed" class="clickable-table-row" hx-get="{% url 'signals' %}?page={{ page_obj.number|add:1 }}{{ url_params_str }}"
-            hx-swap="afterend" onClick="location.href='{% url 'signal' pk=signal.id %}';">
+            hx-swap="afterend">
     {% else %}
-        <tr classs="clickable-table-row" onClick="location.href='{% url 'signal' pk=signal.id %}';">
+        <tr classs="clickable-table-row">
     {% endif %}
-        <td>{{ signal.display_name }}</td>
+        <td>
+            <input type="checkbox" name="id" value="{{ signal.id }}">
+            {{ form.id|as_crispy_field }}
+        </td>
+        <td onClick="location.href='{% url 'signal' pk=signal.id %}';" class="clickable-table-cell">{{ signal.display_name }}</td>
         <td>{{ signal.source }}</td>
         <td>{{ signal.description }}</td>
         <td>
@@ -28,4 +34,5 @@
             {% endif %}
         </td>
     </tr>
+
 {% endfor %}