Make the profiles delete button a modal

Author: hmpf

src/argus/htmx/forms.py

@@ -0,0 +1,30 @@
+from dataclasses import dataclass
+
+
+@dataclass
+class ModalForm:
+    form: int = None
+    instance_id: int = None
+    template_name: str = "htmx/_base_form_modal2.html"
+
+    # needed by template
+    button_class: str = "btn-primary"
+    cancel_text: str = "Cancel"
+    submit_text: str = "Ok"
+    button_title: str
+    dialog_id: str
+    endpoint: str
+    explanation: str
+    header: str
+
+    def get_endpoint(self):
+        if self.instance_id:
+            return self.endpoint.format(self.instance_id)
+        return self.endpoint
+
+
+class DeleteModalForm(ModalForm):
+    button_title = "Delete title"
+    header = "Delete header"
+    submit_text = "Delete nao"
+    explanation = "Delete explanation"

src/argus/htmx/notificationprofile/views.py

@@ -9,6 +9,7 @@
 from django.urls import reverse
 from django.views.generic import CreateView, DeleteView, DetailView, ListView, UpdateView
 
+from argus.htmx.forms import DeleteModalForm
 from argus.notificationprofile.models import NotificationProfile, Timeslot, Filter, DestinationConfig
 
 
@@ -95,6 +96,10 @@ def get_context_data(self, **kwargs):
         forms = []
         for obj in self.get_queryset():
             form = NotificationProfileForm(None, user=self.request.user, instance=obj)
+            form.modal = DeleteModalForm(
+                dialog_id=f"delete-modal-{obj.pk}",
+                endpoint=reverse("htmx:notificationprofile-delete", pk=obj.pk),
+            )
             forms.append(form)
         context["form_list"] = forms
         return context

src/argus/htmx/templates/htmx/_base_form_modal2.html

@@ -0,0 +1,40 @@
+<button class="btn {{ form.button_class }}"
+        onclick="htmx.find('#{{ form.dialog_id }}').showModal()">{{ button_title }}</button>
+<dialog id="{{ form.dialog_id }}" class="modal">
+  <div class="modal-box card card-compact shadow-xl loading-box">
+    <div class="w-full">
+      <div class="divider divider-start">
+        <h3 class="card-title">{{ form.header }}</h3>
+      </div>
+      <form id="{{ form.dialog_id }}-form"
+            class="card-body"
+            {% block form_control %}
+            method="post"
+            action="{{ endpoint }}"
+            {% endblock form_control %}>
+        {% csrf_token %}
+        <fieldset class="menu menu-vertical gap-4">
+          <legend class="antialiased text-base font-bold py-2">{{ form.explanation }}</legend>
+          {% block dialogform %}
+          {% endblock dialogform %}
+        </fieldset>
+      </form>
+      <div class="modal-action card-actions">
+        <form method="dialog" class="w-full">
+          <div class="divider divider-end">
+            <button type="submit"
+                    form="{{ form.dialog_id }}-form"
+                    class="btn {{ form.button_class }}">
+              <span>{{ form.submit_text }}</span>
+            </button>
+            <button class="btn">{{ form.cancel_text }}</button>
+          </div>
+        </form>
+      </div>
+    </div>
+    <div class="htmx-indicator loading loading-spinner text-primary"></div>
+  </div>
+  <form method="dialog" class="modal-backdrop">
+    <button>close</button>
+  </form>
+</dialog>

src/argus/htmx/templates/htmx/notificationprofile/_notificationprofile_buttons.html

@@ -1,5 +1,6 @@
 <div class="card-actions justify-end">
   <input class="btn btn-primary" type="submit" value="Save">
+  {% include form.modal.template_name %}
   <button class="contents">
     <a class="btn btn-primary"
        href="{% url "htmx:notificationprofile-delete" pk=object.pk %}">Delete</a>