load contacts when contact is created or updated

closes #23

pim/contacts/models.py

@@ -33,6 +33,9 @@ class Contact(models.Model):
     created_at = models.DateTimeField(auto_now_add=True)
     modified_at = models.DateTimeField(auto_now=True)
 
+    class Meta:
+        ordering = ('name',)
+
     def __str__(self):
         return self.name
 

pim/contacts/templates/contacts/contact_form.html

@@ -1,18 +1,17 @@
 {% load crispy_forms_tags %}
 {% load i18n %}
 
-<h2>
-  {% blocktrans %}
-  {{ title }} Contact
-  {% endblocktrans %}
-</h2>
-
 {% if object %}
 <form method="post" enctype="multipart/form-data" hx-post="{% url 'contacts:contact-edit' object.slug %}"
   hx-target="#detail">
   {% else %}
-  <form method="post" enctype="multipart/form-data" hx-post="{% url 'contacts:contact-add' %}" hx-target="body">
+  <form method="post" enctype="multipart/form-data" hx-post="{% url 'contacts:contact-add' %}" target="#detail">
     {% endif %}
+    <h2>
+      {% blocktrans %}
+      {{ title }} Contact
+      {% endblocktrans %}
+    </h2>
     {% csrf_token %}
     {{ form | crispy }}
     <button class="btn btn-primary" type="submit">

pim/contacts/templates/contacts/index.html

@@ -19,11 +19,13 @@ <h3>{% trans 'Contacts' %}</h3>
     <div class="spinner-border text-primary htmx-indicator" role="status">
       <span class="visually-hidden">Loading...</span>
     </div>
-    <ul class="list-group" id="contacts" hx-get="{% url 'contacts:contact-list' %}" hx-trigger="load">
+    <ul class="list-group" id="contacts" hx-get="{% url 'contacts:contact-list' %}"
+      hx-trigger="load, loadcontacts from:body">
     </ul>
   </div>
 
   <div class="col-md-8 px-4" id="detail">
+    <h3 class="my-3">No contact selected</h3>
     <div class="row mt-4 mt-md-0">
       <div class="col-md-4">
         <div class="bg-secondary h-100 w-100 rounded"></div>

pim/contacts/views.py

@@ -1,7 +1,10 @@
+from typing import Any
+
 from django.contrib.auth.decorators import login_required
 from django.contrib.auth.mixins import LoginRequiredMixin, UserPassesTestMixin
 from django.db.models import Q
 from django.http import HttpRequest
+from django.http.response import HttpResponse
 from django.shortcuts import get_object_or_404
 from django.template.response import TemplateResponse
 from django.urls import reverse_lazy
@@ -29,12 +32,16 @@ def get_queryset(self):
 class ContactCreateView(LoginRequiredMixin, generic.CreateView):
     model = Contact
     form_class = ContactForm
-    success_url = reverse_lazy('contacts:index')
     extra_context = {'title': 'Add'}
 
     def get_initial(self):
         return {'user': self.request.user}
 
+    def dispatch(self, request: HttpRequest, *args: Any, **kwargs: Any) -> HttpResponse:
+        response = super().dispatch(request, *args, **kwargs)
+        response['HX-Trigger'] = 'loadcontacts'
+        return response
+
 
 contact_add = ContactCreateView.as_view()
 
@@ -46,6 +53,11 @@ class ContactDetailView(LoginRequiredMixin, UserPassesTestMixin, generic.DetailV
     def test_func(self) -> bool | None:
         return self.get_object().user == self.request.user
 
+    def dispatch(self, request: HttpRequest, *args: Any, **kwargs: Any) -> HttpResponse:
+        response = super().dispatch(request, *args, **kwargs)
+        response['HX-Trigger'] = 'loadcontacts'
+        return response
+
 
 contact_detail = ContactDetailView.as_view()
 
@@ -92,4 +104,6 @@ def toggle_favorite(request: HttpRequest, slug: str) -> TemplateResponse:
     contact: Contact = get_object_or_404(Contact, slug=slug, user=request.user)
     contact.toggle_favorite()
     context = {'contact': contact}
-    return TemplateResponse(request, 'contacts/favorite.html', context)
+    response = TemplateResponse(request, 'contacts/favorite.html', context)
+    response['HX-Trigger'] = 'loadcontacts'
+    return response

static/js/django-debug-toolbar.js

@@ -1,10 +1,10 @@
-if (typeof window.htmx !== "undefined") {
-    htmx.on("htmx:afterSettle", function (detail) {
-        if (
-            typeof window.djdt !== "undefined"
-            && detail.target instanceof HTMLBodyElement
-        ) {
-            djdt.show_toolbar();
-        }
-    });
+if (typeof window.htmx !== 'undefined') {
+  htmx.on('htmx:afterSettle', function (detail) {
+    if (
+      typeof window.djdt !== 'undefined' &&
+      detail.target instanceof HTMLBodyElement
+    ) {
+      djdt.show_toolbar();
+    }
+  });
 }