Convert new/<foo>/ pages to modal dialogs

Use a modal dialog on the "list" page for a model, instead of having a
separate form page at new/<foo>/

This removes the duplication of nav path from the code when creating new
model instances.

Author: sde1000

quicktill/tillweb/stocktake.py

@@ -1,11 +1,11 @@
 from decimal import Decimal
 from django.http import Http404
 from django.http import HttpResponseRedirect
-from django.http import HttpResponseForbidden
 from django.http import JsonResponse
 from django.urls import reverse
 from django import forms
 from django.contrib import messages
+from django.shortcuts import redirect
 from sqlalchemy import inspect
 from sqlalchemy.sql import desc
 from sqlalchemy.orm import joinedload
@@ -35,6 +35,24 @@ class StockTakeSetupForm(forms.Form):
 def stocktakelist(request, info):
     may_start = info.user_has_perm("stocktake")
 
+    form = None
+
+    if may_start:
+        if request.method == "POST":
+            form = StockTakeSetupForm(request.POST)
+            if form.is_valid():
+                cd = form.cleaned_data
+                st = StockTake(description=cd['description'],
+                               create_user=info.user)
+                td.s.add(st)
+                td.s.flush()
+                user.log(f"Created stock take {st.logref}")
+                td.s.commit()
+                messages.success(request, "Stock take created.")
+                return redirect(st)
+        else:
+            form = StockTakeSetupForm()
+
     pending = td.s.query(StockTake)\
                   .filter(StockTake.start_time == None)\
                   .order_by(StockTake.id)\
@@ -59,36 +77,8 @@ def stocktakelist(request, info):
         'pending': pending,
         'in_progress': in_progress,
         'completed': completed,
-        'may_start': may_start,
-        'tillobject': StockTake,
-    })
-
-
-@tillweb_view
-def create_stocktake(request, info):
-    if not info.user_has_perm("stocktake"):
-        return HttpResponseForbidden(
-            "You don't have permission to start a stock take")
-
-    if request.method == "POST":
-        form = StockTakeSetupForm(request.POST)
-        if form.is_valid():
-            cd = form.cleaned_data
-            st = StockTake(description=cd['description'],
-                           create_user=info.user)
-            td.s.add(st)
-            td.s.flush()
-            user.log(f"Created stock take {st.logref}")
-            td.s.commit()
-            messages.success(request, "Stock take created.")
-            return HttpResponseRedirect(st.get_absolute_url())
-    else:
-        form = StockTakeSetupForm()
-
-    return ('new-stocktake.html', {
-        'nav': [("Stock takes", reverse("tillweb-stocktakes")),
-                ("New", reverse("tillweb-create-stocktake"))],
         'form': form,
+        'tillobject': StockTake,
     })
 
 

quicktill/tillweb/templates/tillweb/deliveries.html

@@ -1,11 +1,37 @@
 {% extends "tillweb/tillweb.html" %}
+{% load tillweb_utils %}
 
 {% block title %}{{till}} — Deliveries{% endblock %}
 
 {% block tillcontent %}
 
-{% if may_create_delivery %}
-<a class="btn btn-primary mb-2" href="{% url "tillweb-create-delivery" %}">Add new delivery</a>
+{% if form %}
+<button class="btn btn-primary mb-2" type="button" data-bs-toggle="modal" data-bs-target="#createModal">
+  Add new delivery
+</button>
+
+{% modal "createModal" title="Add new delivery" %}
+<form action="" method="post">{% csrf_token %}
+  <div class="modal-body">
+    {% include "form-horizontal.html" %}
+  </div>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+      Cancel
+    </button>
+    <button class="btn btn-primary" type="submit" name="submit_create">
+      Add delivery
+    </button>
+  </div>
+</form>
+{% endmodal %}
+{% if form.errors %}
+<script type="text/javascript">
+  $(document).ready(function() {
+      $('#createModal').modal('show');
+  });
+</script>
+{% endif %}
 {% endif %}
 
 <table class="table table-striped table-sm" id="deliveries">

quicktill/tillweb/templates/tillweb/departmentlist.html

@@ -1,4 +1,5 @@
 {% extends "tillweb/tillweb.html" %}
+{% load tillweb_utils %}
 
 {% block title %}{{till}} — Departments{% endblock %}
 
@@ -33,14 +34,43 @@
   </tbody>
 </table>
 
-{% if may_create_department %}
-<a href="{% url "tillweb-create-department" %}" class="btn btn-secondary">Add new department</a>
-{% endif %}
-
 <script type="text/javascript">
 $(document).ready(function(){
   $("#departments").DataTable();
 });
 </script>
 
+{% if form %}
+<button class="btn btn-secondary" type="button" data-bs-toggle="modal" data-bs-target="#createModal">
+  Add new department
+</button>
+
+{% modal "createModal" dialog_class="modal-lg" title="Add new department" %}
+<form action="" method="post" class="mb-2">{% csrf_token %}
+  <div class="modal-body">
+    {% include "form-horizontal.html" %}
+    <p class="mb-0">The VAT band determines which VAT rate applies to
+      sales in this department, and also which business receives the funds
+      for these sales.</p>
+  </div>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+      Cancel
+    </button>
+    <button class="btn btn-primary" type="submit" name="submit_create">
+      Create department
+    </button>
+  </div>
+</form>
+{% endmodal %}
+
+{% if form.errors %}
+<script type="text/javascript">
+  $(document).ready(function() {
+      $('#createModal').modal('show');
+  });
+</script>
+{% endif %}
+{% endif %}
+
 {% endblock %}

quicktill/tillweb/templates/tillweb/edit-delivery.html

@@ -113,7 +113,7 @@
     <button class="btn btn-primary mb-2" type="submit" name="submit_update">
 	Update
     </button>
-    <a class="btn btn-secondary mb-2" role="button" href="{% url "tillweb-create-stocktype" %}">New stock type</a>
+    <a class="btn btn-secondary mb-2" role="button" href="{% url "tillweb-stocktype-search" %}">New stock type</a>
     <button class="btn btn-danger mb-2" type="submit" name="submit_delete"{% if delivery.items %} disabled{% endif %}>
 	Delete this delivery
     </button>

quicktill/tillweb/templates/tillweb/grouplist.html

@@ -1,11 +1,54 @@
 {% extends "tillweb/tillweb.html" %}
+{% load static %}
+{% load tillweb_utils %}
+
+{% if form %}
+{% block style %}
+{{ block.super }}
+<link rel="STYLESHEET" type="text/css" href="{% static "tillweb/multi-select/css/multi-select.css" %}" />
+{% endblock %}
+
+{% block jquery %}
+{{ block.super }}
+<script type="text/javascript" src="{% static "tillweb/multi-select/js/jquery.multi-select.js" %}"></script>
+{% endblock %}
+{% endif %}
 
 {% block title %}{{till}} — Groups{% endblock %}
 
 {% block tillcontent %}
 
-{% if may_create_group %}
-<a class="btn btn-primary mb-2" href="{% url "tillweb-create-till-group" %}">Add new group</a>
+{% if form %}
+<button class="btn btn-primary mb-2" type="button" data-bs-toggle="modal" data-bs-target="#createModal">
+  Add new group
+</button>
+
+{% modal "createModal" dialog_class="modal-xl" title="Add a new group" %}
+<form action="" method="post">{% csrf_token %}
+  <div class="modal-body">
+    {% include "form-horizontal.html" %}
+  </div>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+      Cancel
+    </button>
+    <button class="btn btn-primary" type="submit" name="submit_create">
+      Create group
+    </button>
+  </div>
+</form>
+{% endmodal %}
+
+<script type="text/javascript">
+  $(document).ready(function(){
+      $("#id_permissions").multiSelect({
+	  selectableHeader: "<div>Available permissions</div>",
+	  selectionHeader: "<div>Selected permissions</div>"});
+      {% if form.errors %}
+      $('#createModal').modal('show');
+      {% endif %}
+  });
+</script>
 {% endif %}
 
 {% if groups %}