🛠️ signals/filters.py -> Added an OrderingFilter for signal ordering

🛠️ signals/forms.py -> Added order_by field to SignalFilterForm
🛠️ signals/views.py -> Added a blank line
🛠️ templates/signals/signals.html -> Added form for filtering signals

Author: BrainIsDead

src/signals/filters.py

@@ -2,7 +2,7 @@
 
 import django_filters
 from django.db.models import Q
-from django_filters.filters import CharFilter
+from django_filters.filters import CharFilter, OrderingFilter
 
 from signals.models import Signal
 
@@ -13,6 +13,13 @@ class SignalFilter(django_filters.FilterSet):
     """
 
     search = CharFilter(method='filter_search')
+    order_by = OrderingFilter(
+        fields=(
+            ('name', 'ame'),
+            ('source__name', 'source'),
+            ('last_updated', 'last_updated'),
+        )
+    )
 
     class Meta:
         model = Signal

src/signals/forms.py

@@ -16,6 +16,14 @@ class SignalFilterForm(forms.ModelForm):
     """
     A form for filtering signals.
     """
+    order_by = forms.ChoiceField(choices=[
+            ('', '---------'),
+            ('name', 'Name'),
+            ('source__name', 'Source'),
+            ('last_updated', 'Last Updated'),
+        ],
+        required=False,
+    )
     search = forms.CharField(min_length=3)
     pathogen = forms.ModelChoiceField(queryset=Pathogen.objects.all(), empty_label='---------')
     active = forms.NullBooleanField(initial=None)
@@ -26,6 +34,7 @@ class SignalFilterForm(forms.ModelForm):
     class Meta:
         model = Signal
         fields: list[str] = [
+            'order_by',
             'search',
             'pathogen',
             'active',
@@ -38,6 +47,11 @@ class Meta:
         ]
 
         widgets = {
+            'order_by': forms.Select(attrs={
+                'class': 'form-select',
+                'id': 'order_by',
+                'aria-label': 'Order by',
+            }),
             'search': forms.TextInput(attrs={'class': 'form-control', 'placeholder': 'Enter search term'}),
             'pathogen': forms.Select(attrs={'class': 'form-select'}),
             'active': forms.NullBooleanSelect(attrs={'class': 'form-check mt-3', 'label': "Test <i class='ri-stack-line'></i>"},),

src/templates/signals/signals.html

@@ -4,11 +4,11 @@
 {% load crispy_forms_tags %}
 
 {% block content %}
+<form method="GET" id="filters-form">
 <div class="container-fluid">
     <div class="row">
         <div class="col-3">
             <div class="card">
-                <form method="GET">
                     <div class="form-group">
                         <br />
                         <div class="card-body">
@@ -269,26 +269,22 @@ <h5 class="modal-title">Time Label</h5>
                             </div>
                         </div>
                     </div>
-                </form>
             </div>
         </div>
         <div class="col-9">
             <div class="row margin-bottom-1rem">
                 <div class="col-8 text-left-center">
                 </div>
                 <div class="col-4 no-padding">
-                    <form id="orderByForm">
-                        <div class="input-group">
-                            <label class="input-group-text" for="orderSelect">Sort By</label>
-                            <select class="form-select" id="orderSelect" name="orderBy" aria-label="Order By"
-                                onchange="document.getElementById('orderByForm').submit();">
-                                <option value="default" selected>Default</option>
-                                <option value="name">Name</option>
-                                <option value="date">Date</option>
-                                <option value="price">Price</option>
-                            </select>
+                        <div class="input-group mb-3">
+                            <label class="input-group-text form-label" for="id_order_by">Sort By</label>
+                            {{ form.order_by|as_crispy_field }}
                         </div>
-                    </form>
+                    <script>
+                        document.getElementById('id_order_by').addEventListener('change', function() {
+                            document.getElementById('filters-form').submit();
+                        });
+                    </script>
                 </div>
             </div>
             <div class="row">
@@ -314,4 +310,5 @@ <h5 class="modal-title">Time Label</h5>
             </div>
         </div>
     </div>
-    {% endblock %}
+</form>
+    {% endblock %}