feat: ajax paginated inlines (#1440)

Author: lukasvinclav

src/unfold/static/admin/js/inlines.js

@@ -310,7 +310,7 @@
   };
 
   // Tabular inlines ---------------------------------------------------------
-  $.fn.tabularFormset = function (selector, options) {
+  $.fn.tabularFormset = function (selector, options, callback = null) {
     const $rows = $(this);
 
     const reinitDateTimeShortCuts = function () {
@@ -370,11 +370,15 @@
       addButton: options.addButton,
     });
 
+    if (typeof callback === "function") {
+      callback();
+    }
+
     return $rows;
   };
 
   // Stacked inlines ---------------------------------------------------------
-  $.fn.stackedFormset = function (selector, options) {
+  $.fn.stackedFormset = function (selector, options, callback = null) {
     const $rows = $(this);
     const updateInlineLabel = function (row) {
       $(selector)
@@ -449,26 +453,47 @@
       addButton: options.addButton,
     });
 
+    if (typeof callback === "function") {
+      callback();
+    }
+
     return $rows;
   };
 
+  $(window).on("htmx:afterSettle", function (event) {
+    if (event.target.classList.contains("js-inline-admin-formset")) {
+      initInlines($(event.target), function () {
+        if (typeof DateTimeShortcuts !== "undefined") {
+          $(".datetimeshortcuts").remove();
+          DateTimeShortcuts.init();
+        }
+
+        $(event.target).find(".admin-autocomplete").djangoAdminSelect2();
+      });
+    }
+  });
+
   $(document).ready(function () {
     $(".js-inline-admin-formset").each(function () {
-      const data = $(this).data(),
-        inlineOptions = data.inlineFormset;
-      let selector;
-      switch (data.inlineType) {
-        case "stacked":
-          selector = inlineOptions.name + "-group .inline-related";
-          $(selector).stackedFormset(selector, inlineOptions.options);
-          break;
-        case "tabular":
-          selector =
-            inlineOptions.name +
-            "-group .tabular.inline-related tbody:last > tr.form-row";
-          $(selector).tabularFormset(selector, inlineOptions.options);
-          break;
-      }
+      initInlines(this);
     });
   });
+
+  function initInlines(el, callback = null) {
+    const data = $(el).data(),
+      inlineOptions = data.inlineFormset;
+    let selector;
+    switch (data.inlineType) {
+      case "stacked":
+        selector = inlineOptions.name + "-group .inline-related";
+        $(selector).stackedFormset(selector, inlineOptions.options, callback);
+        break;
+      case "tabular":
+        selector =
+          inlineOptions.name +
+          "-group .tabular.inline-related tbody:last > tr.form-row";
+        $(selector).tabularFormset(selector, inlineOptions.options, callback);
+        break;
+    }
+  }
 }

src/unfold/templates/admin/change_form.html

@@ -104,7 +104,13 @@
 
                 {% block inline_field_sets %}
                     {% for inline_admin_formset in inline_admin_formsets %}
-                        {% include inline_admin_formset.opts.template %}
+                        {% if request.headers.hx_request  %}
+                            {% if inline_admin_formset.formset.get_pagination_key in request.GET %}
+                                {% include inline_admin_formset.opts.template %}
+                            {% endif %}
+                        {% else %}
+                            {% include inline_admin_formset.opts.template %}
+                        {% endif %}
                     {% endfor %}
                 {% endblock %}
 

src/unfold/templates/admin/includes/fieldset.html

@@ -9,7 +9,7 @@ <h2 class="border-b border-base-200 border-t border-dashed font-semibold text-fo
                 {{ fieldset.name }}
             </h2>
         {% else %}
-            <h2 class="bg-base-100 font-semibold mb-6 px-4 py-3 rounded-default text-font-important-light text-sm 2xl:-mx-4 dark:bg-white/[.02] dark:text-font-important-dark {% if fieldset.is_collapsible %}cursor-pointer{% endif %}">
+            <h2 class="bg-base-100 font-semibold mb-6 px-4 py-3 rounded-default text-font-important-light text-sm @min-[1570px]:-mx-4 dark:bg-white/[.02] dark:text-font-important-dark {% if fieldset.is_collapsible %}cursor-pointer{% endif %}">
                 {{ fieldset.name }}
             </h2>
         {% endif %}

src/unfold/templates/unfold/helpers/pagination_inline.html

@@ -7,14 +7,19 @@
         <input type="hidden" name="{{ pagination_key }}" value="{{ page_obj.number }}" />
 
         {% if page_obj.paginator.count and page_obj.paginator.num_pages > 1 %}
-            <div class="flex items-center gap-2 mt-6 mb-6">
+            <div class="flex items-center gap-2 mt-6">
                 {% for i in elided_page_range %}
                     {% if i == page_obj.paginator.ELLIPSIS %}
                         <span>{{ page_obj.paginator.ELLIPSIS }}</span>
                     {% elif i == page_obj.number %}
                         <span class="font-medium text-primary-600">{{ i }}</span>
                     {% else %}
-                        <a href="?{% querystring_params pagination_key i %}{% if has_tab %}#{{ inline_admin_formset.formset.prefix|slugify }}{% endif %}">
+                        <a class="cursor-pointer"
+                           hx-get="?{% querystring_params pagination_key i %}{% if has_tab %}#{{ inline_admin_formset.formset.prefix|slugify }}{% endif %}"
+                           hx-push-url="true"
+                           hx-swap="outerHTML"
+                           hx-select="#{{ inline_admin_formset.formset.prefix }}-group"
+                           hx-target="#{{ inline_admin_formset.formset.prefix }}-group">
                             {{ i }}
                         </a>
                     {% endif %}