Some sort of sorting and filtering in the SAR calls list

sar_calls.py

@@ -48,8 +48,33 @@ def list_sar():
     is_logged_in = current_user.is_authenticated
     search_officer = aliased(User)
     coordination_officer = aliased(User)
+    categories = SARCategory.query.all()
+    statuses = SARStatus.query.all()
 
-    sar_calls = (SARCall.query
+    category_id = request.args.get('category')
+    sort_order = request.args.get('sort')
+    status_id = request.args.get('status')
+    query = SARCall.query
+
+    # Filter by status
+    if status_id:
+        query = query.filter_by(status=status_id)
+
+    # Filter by category
+    if category_id:
+        query = query.filter_by(category=category_id)
+
+    # Sorting
+    if sort_order == 'date_asc':
+        query = query.order_by(SARCall.start_date.asc())
+    elif sort_order == 'date_desc':
+        query = query.order_by(SARCall.start_date.desc())
+    # add other sorting options if needed
+    else:
+        query = query.order_by(SARCall.id.desc())
+
+
+    sar_calls = (query
                  .outerjoin(search_officer,
                             and_(SARCall.search_officer_id == search_officer.id, SARCall.search_officer_id != None))
                  .join(coordination_officer, SARCall.coordination_officer_id == coordination_officer.id)
@@ -58,7 +83,8 @@ def list_sar():
                  .add_columns(SARCategory, SARCall, SARStatus)
                  .all())
 
-    return render_template('list_sar.html', sar_calls=sar_calls, is_logged_in=is_logged_in)
+    return render_template('list_sar.html', sar_calls=sar_calls, is_logged_in=is_logged_in, categories=categories, statuses=statuses)
+
 
 
 @app.route('/edit_sar/<int:id>', methods=['GET', 'POST'])

templates/list_sar.html

@@ -7,6 +7,35 @@
 {% block content %}
     <div class="container mt-5">
         <h2>SAR Records</h2>
+
+        <form method="get" action="{{ url_for('list_sar') }}" id="filter-form">
+        <!-- Filter by Status -->
+            <select id="status-select" name="status" onchange="submitForm()">
+                <option value="">All Statuses</option>
+                <!-- Populate options with statuses -->
+                {% for status in statuses %}
+                    <option value="{{ status.id }}">{{ status.name }}</option>
+                {% endfor %}
+            </select>
+
+            <!-- Filter by Category -->
+            <select id="category-select" name="category" onchange="submitForm()">
+                <option value="">All Categories</option>
+                <!-- Populate options with categories -->
+                {% for category in categories %}
+                    <option value="{{ category.id }}">{{ category.name }}</option>
+                {% endfor %}
+            </select>
+
+            <!-- Sorting Options -->
+            <select id="sort-select" name="sort" onchange="submitForm()">
+                <option value="date_asc">Date (Oldest First)</option>
+                <option value="date_desc">Date (Newest First)</option>
+                <!-- other sorting options -->
+            </select>
+        </form>
+
+
         <table class="table table-bordered table-hover">
             <thead>
             <tr>
@@ -19,8 +48,8 @@
                 <th>Created by</th>
                 <th>Manager</th>
 
-                {%  if is_logged_in %}
+                {% if is_logged_in %}
-                <th>Actions</th>
+                    <th>Actions</th>
                 {% endif %}
             </tr>
             </thead>
@@ -36,20 +65,20 @@
                     <td>{{ sar.SARCall.coordination_officer.full_name }}</td>
                     <td>{{ sar.SARCall.search_officer.full_name }}</td>
                     {% if is_logged_in %}
-                    <td>
+                        <td>
-                        <a href="{{ url_for('edit_sar', id=sar.SARCall.id) }}">
+                            <a href="{{ url_for('edit_sar', id=sar.SARCall.id) }}">
-                            <button type="button" class="btn btn-info">Edit</button>
+                                <button type="button" class="btn btn-info">Edit</button>
-                        </a>
+                            </a>
-{#                        <a href="{{ url_for('delete_sar', id=sar.SARCall.id) }}">#}
+                            {#                        <a href="{{ url_for('delete_sar', id=sar.SARCall.id) }}">#}
-{#                            <button type="button" class="btn btn-danger">Delete</button>#}
+                            {#                            <button type="button" class="btn btn-danger">Delete</button>#}
-{#                        </a>#}
+                            {#                        </a>#}
-                    </td>
+                        </td>
                     {% endif %}
                 </tr>
             {% endfor %}
             </tbody>
         </table>
-{#        <a href="/dashboard">Back to Dashboard</a>#}
+        {#        <a href="/dashboard">Back to Dashboard</a>#}
     </div>
 
     <script>
@@ -60,6 +89,14 @@
         });
     </script>
 
+    <script>
+        function submitForm() {
+            document.getElementById("filter-form").submit();
+        }
+    </script>
+
+
+
 
 
 {% endblock %}