v0.5.11: Add HTMX for loading spinner on approval form

- Add HTMX to base template
- Use hx-post with hx-indicator for loading state
- Disable buttons during request with hx-disabled-elt
- Return HX-Redirect header for HTMX requests

Author: matteius

django_forms_workflows/__init__.py

@@ -3,7 +3,7 @@
 Enterprise-grade, database-driven form builder with approval workflows
 """
 
-__version__ = "0.5.10"
+__version__ = "0.5.11"
 __author__ = "Django Forms Workflows Contributors"
 __license__ = "LGPL-3.0-only"
 

django_forms_workflows/templates/django_forms_workflows/approve.html

@@ -69,7 +69,10 @@ <h5 class="mb-0">Submitted Data</h5>
                 <h5 class="mb-0">Your Decision</h5>
             </div>
             <div class="card-body">
-                <form method="post" id="approvalForm">
+                <form method="post" id="approvalForm"
+                      hx-post=""
+                      hx-indicator="#loadingIndicator"
+                      hx-disabled-elt="button[type=submit]">
                     {% csrf_token %}
                     <div class="mb-3">
                         <label for="comments" class="form-label">Comments (Optional)</label>
@@ -85,6 +88,10 @@ <h5 class="mb-0">Your Decision</h5>
                         <a href="{% url 'forms_workflows:approval_inbox' %}" class="btn btn-outline-secondary btn-lg">
                             <i class="bi bi-arrow-left"></i> Back
                         </a>
+                        <span id="loadingIndicator" class="htmx-indicator ms-3">
+                            <span class="spinner-border spinner-border-sm" role="status"></span>
+                            Processing...
+                        </span>
                     </div>
                 </form>
             </div>
@@ -93,5 +100,13 @@ <h5 class="mb-0">Your Decision</h5>
 </div>
 {% endblock %}
 
+{% block extra_css %}
+<style>
+    .htmx-indicator { display: none; }
+    .htmx-request .htmx-indicator { display: inline-block; }
+    .htmx-request button[type=submit] { opacity: 0.6; }
+</style>
+{% endblock %}
+
 
 

django_forms_workflows/templates/django_forms_workflows/base.html

@@ -113,6 +113,8 @@
 
     <!-- Bootstrap 5 JS Bundle -->
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <!-- HTMX -->
+    <script src="https://unpkg.com/htmx.org@2.0.4"></script>
     {% block extra_js %}{% endblock %}
 </body>
 </html>

django_forms_workflows/views.py

@@ -14,8 +14,9 @@
 from django.contrib.auth.decorators import login_required
 from django.core.files.storage import default_storage
 from django.db import models
-from django.http import HttpResponseForbidden, JsonResponse
+from django.http import HttpResponse, HttpResponseForbidden, JsonResponse
 from django.shortcuts import get_object_or_404, redirect, render
+from django.urls import reverse
 from django.utils import timezone
 from django.views.decorators.http import require_http_methods
 
@@ -353,6 +354,11 @@ def approve_submission(request, task_id):
         )
 
         messages.success(request, f"Submission {decision}d successfully.")
+        redirect_url = reverse("forms_workflows:approval_inbox")
+        if request.headers.get("HX-Request"):
+            response = HttpResponse()
+            response["HX-Redirect"] = redirect_url
+            return response
         return redirect("forms_workflows:approval_inbox")
 
     return render(

pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "django-forms-workflows"
-version = "0.5.10"
+version = "0.5.11"
 description = "Enterprise-grade, database-driven form builder with approval workflows and external data integration"
 license = "LGPL-3.0-only"
 readme = "README.md"