feat: add sorting to exam user statuses and improve history log filtering

generic/views.py

@@ -2661,13 +2661,13 @@ class ExamViews(View, LoginRequiredMixin):
                 pass
 
         if cid is not None:
-            statuses = exam.exam_user_status.filter(cid_user_exam__cid_user__cid=cid)
+            statuses = exam.exam_user_status.filter(cid_user_exam__cid_user__cid=cid).order_by("datetime")
         elif user_id is not None:
             statuses = exam.exam_user_status.filter(
                 cid_user_exam__user_user__id=user_id
-            )
+            ).order_by("datetime")
         else:
-            statuses = exam.exam_user_status.all()
+            statuses = exam.exam_user_status.all().order_by("datetime")
 
         return render(
             request, "exam_user_status.html", {"exam": exam, "statuses": statuses}

templates/exam_user_status.html

@@ -1,23 +1,33 @@
+<div class="mb-3">
+    <input type="text" id="history-filter" class="form-control form-control-sm" placeholder="Filter history logs..." onkeyup="filterHistoryLogs()">
+</div>
+
 {% if statuses %}
-        <ul>
+    <ul id="history-log-list" class="list-unstyled mb-0">
         {% for status in statuses %}
-                <li>
+            <li class="history-log-item py-1 border-bottom small">
-{% comment %}                     {{status.datetime|date:"SHORT_DATETIME_FORMAT"}}: 
-                    
-                    {% if status.user_user %}
-                        {{status.user_user}}
-                    {% endif %}
-                    {% if status.cid_user %}
-                        {{status.cid_user}}
-                    {% endif %}
-                     {{status.status}}
-                     {{status.extra}} {% endcomment %}
-
                 {{ status }}
-
             </li>
         {% endfor %}
     </ul>
 {% else %}
-    Nil recorded.
+    <div class="text-muted small">Nil recorded.</div>
 {% endif %}
+
+<script>
+function filterHistoryLogs() {
+    var input = document.getElementById('history-filter');
+    var filter = input.value.toLowerCase();
+    var list = document.getElementById('history-log-list');
+    if (!list) return;
+    var items = list.getElementsByClassName('history-log-item');
+    for (var i = 0; i < items.length; i++) {
+        var text = items[i].textContent || items[i].innerText;
+        if (text.toLowerCase().indexOf(filter) > -1) {
+            items[i].classList.remove("d-none");
+        } else {
+            items[i].classList.add("d-none");
+        }
+    }
+}
+</script>