Okrs24 72 add signals sorting functionality

src/assets/css/style.css

@@ -1228,3 +1228,11 @@ h6 {
   font-size: 13px;
   color: #012970;
 }
+
+#id_order_by {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+#order_by_label{
+  margin-bottom: 1rem;
+}

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=(
+            ('display_name', 'name'),
+            ('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,17 @@ <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>
-                    </form>
+                    <div class="input-group mb-3">
+                        <label class="input-group-text form-label" for="id_order_by" id="order_by_label">Sort By</label>
+                        {{ form.order_by|as_crispy_field }}
+                    </div>
                 </div>
             </div>
             <div class="row">
@@ -314,4 +305,10 @@ <h5 class="modal-title">Time Label</h5>
             </div>
         </div>
     </div>
-    {% endblock %}
+</form>
+<script>
+    document.getElementById('id_order_by').addEventListener('change', function() {
+        document.getElementById('filters-form').submit();
+    });
+</script>
+{% endblock %}

src/templates/signals/signals_list.html

@@ -21,7 +21,11 @@
             {% endif %}
         </td>
         <td>
-            Last Updated
+            {% if signal.last_updated %}
+                {{ signal.last_updated|date:"Y-m-d" }}
+            {% else %}
+                --/--
+            {% endif %}
         </td>
     </tr>
-{% endfor %}
+{% endfor %}