Enhance exam status management with HTMX loading indicators and streamline AJAX handling by removing legacy jQuery code

generic/templates/generic/examcollection_detail.html

@@ -32,7 +32,10 @@
                     </div>
                 </div>
                 <div class="card-body p-2" hx-get="{% url 'generic:exam_collection_exams_partial' object.pk 'anatomy' %}" hx-trigger="revealed" hx-swap="innerHTML">
-                    <div class="placeholder small text-muted">Loading anatomy exams…</div>
+                    <div class="d-flex align-items-center">
+                        <div class="placeholder small text-muted">Loading anatomy exams…</div>
+                        <div class="exam-loading ms-2 d-none"><span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span></div>
+                    </div>
                 </div>
                 <div class="card-footer add-marker small"></div>
             </div>
@@ -48,7 +51,10 @@
                     </div>
                 </div>
                 <div class="card-body p-2" hx-get="{% url 'generic:exam_collection_exams_partial' object.pk 'longs' %}" hx-trigger="revealed" hx-swap="innerHTML">
-                    <div class="placeholder small text-muted">Loading longs exams…</div>
+                    <div class="d-flex align-items-center">
+                        <div class="placeholder small text-muted">Loading longs exams…</div>
+                        <div class="exam-loading ms-2 d-none"><span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span></div>
+                    </div>
                 </div>
                 <div class="card-footer add-marker small"></div>
             </div>
@@ -64,7 +70,10 @@
                     </div>
                 </div>
                 <div class="card-body p-2" hx-get="{% url 'generic:exam_collection_exams_partial' object.pk 'rapids' %}" hx-trigger="revealed" hx-swap="innerHTML">
-                    <div class="placeholder small text-muted">Loading rapids exams…</div>
+                    <div class="d-flex align-items-center">
+                        <div class="placeholder small text-muted">Loading rapids exams…</div>
+                        <div class="exam-loading ms-2 d-none"><span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span></div>
+                    </div>
                 </div>
                 <div class="card-footer add-marker small"></div>
             </div>
@@ -80,7 +89,10 @@
                     </div>
                 </div>
                 <div class="card-body p-2" hx-get="{% url 'generic:exam_collection_exams_partial' object.pk 'shorts' %}" hx-trigger="revealed" hx-swap="innerHTML">
-                    <div class="placeholder small text-muted">Loading shorts exams…</div>
+                    <div class="d-flex align-items-center">
+                        <div class="placeholder small text-muted">Loading shorts exams…</div>
+                        <div class="exam-loading ms-2 d-none"><span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span></div>
+                    </div>
                 </div>
                 <div class="card-footer add-marker small"></div>
             </div>
@@ -93,7 +105,10 @@
                     <a class="btn btn-sm btn-outline-secondary" href="{% url 'physics:exam_list_collection' object.pk %}">View exam list</a>
                 </div>
                 <div class="card-body p-2" hx-get="{% url 'generic:exam_collection_exams_partial' object.pk 'physics' %}" hx-trigger="revealed" hx-swap="innerHTML">
-                    <div class="placeholder small text-muted">Loading physics exams…</div>
+                    <div class="d-flex align-items-center">
+                        <div class="placeholder small text-muted">Loading physics exams…</div>
+                        <div class="exam-loading ms-2 d-none"><span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span></div>
+                    </div>
                 </div>
             </div>
         {% endif %}
@@ -105,7 +120,10 @@
                     <a class="btn btn-sm btn-outline-secondary" href="{% url 'sbas:exam_list_collection' object.pk %}">View exam list</a>
                 </div>
                 <div class="card-body p-2" hx-get="{% url 'generic:exam_collection_exams_partial' object.pk 'sbas' %}" hx-trigger="revealed" hx-swap="innerHTML">
-                    <div class="placeholder small text-muted">Loading SBAs exams…</div>
+                    <div class="d-flex align-items-center">
+                        <div class="placeholder small text-muted">Loading SBAs exams…</div>
+                        <div class="exam-loading ms-2 d-none"><span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span></div>
+                    </div>
                 </div>
             </div>
         {% endif %}

generic/templates/generic/partials/exams/exam_status.html

@@ -2,11 +2,11 @@
 
 {% partialdef publish-results %}
     <div id="publish-results-status" class="d-flex align-items-center gap-2">
-        <div class="me-2 small text-muted">Publish results</div>
+        <div class="me-2 small text-muted">Results</div>
         <div>
             {% if exam.publish_results %}
                 <button
-                    class="btn btn-sm btn-success"
+                    class="btn btn-sm btn-success published-icon"
                     hx-post="{% url exam.get_app_name|add:':exam_toggle_results_published' exam.pk %}"
                     hx-swap="outerHTML"
                     hx-target="#publish-results-status"
@@ -15,9 +15,10 @@
                     hx-disabled-elt="this"
 
                 >Published</button>
+                <span class="exam-loading ms-2 d-none"><span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span></span>
             {% else %}
                 <button
-                    class="btn btn-sm btn-secondary"
+                    class="btn btn-sm btn-secondary published-icon"
                     hx-post="{% url exam.get_app_name|add:':exam_toggle_results_published' exam.pk %}"
                     hx-swap="outerHTML"
                     hx-target="#publish-results-status"
@@ -25,6 +26,7 @@
                     aria-label="Publish results"
                     hx-disabled-elt="this"
                 >Unpublished</button>
+                <span class="exam-loading ms-2 d-none"><span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span></span>
             {% endif %}
         </div>
     </div>
@@ -33,11 +35,11 @@
 
 {% partialdef exam-active %}
     <div id="exam-active-status" class="d-flex align-items-center gap-2">
-        <div class="me-2 small text-muted">Exam active</div>
+        <div class="me-2 small text-muted">Exam status:</div>
         <div>
             {% if exam.active %}
                 <button
-                    class="btn btn-sm btn-success"
+                    class="btn btn-sm btn-success active-icon"
                     hx-post="{% url exam.get_app_name|add:':exam_toggle_active' exam.pk %}"
                     hx-swap="outerHTML"
                     hx-target="#exam-active-status"
@@ -45,9 +47,10 @@
                     aria-label="Deactivate exam"
                     hx-disabled-elt="this"
                 >Active</button>
+                <span class="exam-loading ms-2 d-none"><span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span></span>
             {% else %}
                 <button
-                    class="btn btn-sm btn-secondary"
+                    class="btn btn-sm btn-secondary active-icon"
                     hx-post="{% url exam.get_app_name|add:':exam_toggle_active' exam.pk %}"
                     hx-swap="outerHTML"
                     hx-target="#exam-active-status"
@@ -55,7 +58,36 @@
                     aria-label="Activate exam"
                     hx-disabled-elt="this"
                 >Inactive</button>
+                <span class="exam-loading ms-2 d-none"><span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span></span>
             {% endif %}
         </div>
     </div>
-{% endpartialdef exam-active %}
+{% endpartialdef exam-active %}
+
+{% partialdef exam-archived %}
+    <div id="exam-archived-status" class="d-flex align-items-center gap-2">
+        <div>
+            {% if exam.archive %}
+                <button
+                    class="btn btn-sm btn-warning archived-icon"
+                    hx-post="{% url exam.get_app_name|add:':exam_toggle_archived' exam.pk %}"
+                    hx-swap="outerHTML"
+                    hx-target="#exam-archived-status"
+                    title="Click to unarchive this exam"
+                    aria-label="Unarchive exam"
+                ><i class="bi bi-archive"></i></button>
+                <span class="exam-loading ms-2 d-none"><span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span></span>
+            {% else %}
+                <button
+                    class="btn btn-sm btn-secondary archived-icon"
+                    hx-post="{% url exam.get_app_name|add:':exam_toggle_archived' exam.pk %}"
+                    hx-swap="outerHTML"
+                    hx-target="#exam-archived-status"
+                    title="Click to archive this exam"
+                    aria-label="Archive exam"
+                ><i class="bi bi-archive"></i></button>
+                <span class="exam-loading ms-2 d-none"><span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span></span>
+            {% endif %}
+        </div>
+    </div>
+{% endpartialdef %}