Only update affected media list when deleting destination in HTMX frontend

changelog.d/1128.fixed.md

@@ -0,0 +1 @@
+Only update the related media list when deleting a destination.

src/argus/htmx/destination/views.py

@@ -29,16 +29,24 @@ def create_htmx(request) -> HttpResponse:
 @require_http_methods(["POST"])
 def delete_htmx(request, pk: int) -> HttpResponse:
     destination = get_object_or_404(request.user.destinations.all(), pk=pk)
-    template = "htmx/destination/_form_list.html"
+    media = destination.media
+    error_msg = None
     try:
         medium = api_safely_get_medium_object(destination.media.slug)
         medium.raise_if_not_deletable(destination)
     except NotificationMedium.NotDeletableError:
-        error_msg = "This destination cannot be deleted."
-        return _render_destination_list(request, errors=[error_msg], template=template)
+        error_msg = "That destination cannot be deleted."
     else:
         destination.delete()
-        return _render_destination_list(request, template=template)
+
+    forms = _get_update_forms(request.user, media=media)
+
+    context = {
+        "error_msg": error_msg,
+        "forms": forms,
+        "media": media,
+    }
+    return render(request, "htmx/destination/_collapse_with_forms.html", context=context)
 
 
 @require_http_methods(["POST"])
@@ -62,7 +70,6 @@ def _render_destination_list(
     request,
     create_form: Optional[DestinationFormCreate] = None,
     update_forms: Optional[Sequence[DestinationFormUpdate]] = None,
-    errors: Optional[Sequence[str]] = None,
     template: str = "htmx/destination/destination_list.html",
 ) -> HttpResponse:
     """Function to render the destinations page.
@@ -71,29 +78,31 @@ def _render_destination_list(
     with errors while retaining the user input. If you want a blank form, pass None.
     :param update_forms: list of update forms to display. Useful for rendering forms
     with error messages while retaining the user input.
-    If this is None, the update forms will be generated from the user's destinations.
-    :param errors: a list of error messages to display on the page. Will not be tied to
-    any form fields."""
+    If this is None, the update forms will be generated from the user's destinations."""
 
     if create_form is None:
         create_form = DestinationFormCreate()
     if update_forms is None:
         update_forms = _get_update_forms(request.user)
-    if errors is None:
-        errors = []
     grouped_forms = _group_update_forms_by_media(update_forms)
     context = {
         "create_form": create_form,
         "grouped_forms": grouped_forms,
-        "errors": errors,
         "page_title": "Destinations",
     }
     return render(request, template, context=context)
 
 
-def _get_update_forms(user) -> list[DestinationFormUpdate]:
+def _get_update_forms(user, media: Media = None) -> list[DestinationFormUpdate]:
+    """Get a list of update forms for the user's destinations.
+    :param media: if provided, only return destinations for this media.
+    """
+    if media:
+        destinations = user.destinations.filter(media=media)
+    else:
+        destinations = user.destinations.all()
     # Sort by oldest first
-    destinations = user.destinations.all().order_by("pk")
+    destinations = destinations.order_by("pk")
     return [DestinationFormUpdate(instance=destination) for destination in destinations]
 
 

src/argus/htmx/templates/htmx/destination/_collapse_with_forms.html

@@ -0,0 +1,12 @@
+<details class="collapse bg-base-200 collapse-arrow" open="">
+  <summary class="collapse-title text-xl font-medium">{{ media.name }} ({{ forms|length }})</summary>
+  <div class="collapse-content">
+    {% if error_msg %}<p class="text-error">{{ error_msg }}</p>{% endif %}
+    {% for form in forms %}
+      <div class="flex w-full h-fit items-center justify-center">
+        {% include "htmx/destination/_edit_form.html" %}
+        {% include "htmx/destination/_delete_form.html" %}
+      </div>
+    {% endfor %}
+  </div>
+</details>

src/argus/htmx/templates/htmx/destination/_content.html

@@ -1,5 +1,4 @@
 <div id="destination-content" class="flex flex-col items-center gap-4">
   {% include "htmx/destination/_create_form.html" %}
-  {% for error in errors %}<p class="text-error">{{ error }}</p>{% endfor %}
   {% include "htmx/destination/_form_list.html" %}
 </div>

src/argus/htmx/templates/htmx/destination/_delete_form.html

@@ -1,6 +1,7 @@
 <form hx-post="{% url 'htmx:htmx-delete' form.instance.id %}"
       hx-trigger="submit"
-      hx-target="#form-list">
+      hx-target="closest details"
+      hx-swap="outerHTML">
   {% csrf_token %}
   <fieldset class="menu menu-horizontal menu-md items-center gap-4">
     <input type="submit" value="Delete" class="btn btn-secondary">

src/argus/htmx/templates/htmx/destination/_form_list.html

@@ -1,15 +1,5 @@
 <div id="form-list" class="flex flex-col max-w-4xl w-full gap-4">
   {% for media, forms in grouped_forms.items %}
-    <details class="collapse bg-base-200 collapse-arrow" open="">
-      <summary class="collapse-title text-xl font-medium">{{ media.name }} ({{ forms|length }})</summary>
-      <div class="collapse-content">
-        {% for form in forms %}
-          <div class="flex w-full h-fit items-center justify-center">
-            {% include "htmx/destination/_edit_form.html" %}
-            {% include "htmx/destination/_delete_form.html" %}
-          </div>
-        {% endfor %}
-      </div>
-    </details>
+    {% include "htmx/destination/_collapse_with_forms.html" with error_msg=None %}
   {% endfor %}
 </div>