Merge pull request jazzband#719 from prauscher/fix-426

Fix ordering of stacked inline admin forms on add.

Author: bckohan

src/polymorphic/static/polymorphic/js/polymorphic_inlines.js

@@ -118,13 +118,18 @@
                     // last child element of the form's container:
                     row.children(":first").append('<span><a class="' + options.deleteCssClass + '" href="#">' + options.deleteText + "</a></span>");
                 }
+                let totForms = parseInt(totalForms.val(), 10);
                 row.find("*").each(function() {
-                    updateElementIndex(this, options.prefix, totalForms.val());
+                    updateElementIndex(this, options.prefix, totForms);
+                });
+                row.find("h3 span.inline_label").each(function () {
+                    $(this).text($(this).text().replace(/##/g, `#${totForms+1}`));
                 });
                 // Insert the new form when it has been fully edited
-                row.insertBefore($(template));
+                const firstTemplate = $("#" + options.childTypes[0].type + "-empty");
+                row.insertBefore($(firstTemplate));
                 // Update number of total forms
-                $(totalForms).val(parseInt(totalForms.val(), 10) + 1);
+                $(totalForms).val(totForms+1);
                 nextIndex += 1;
                 // Hide add button in case we've hit the max, except we want to add infinitely
                 if ((maxForms.val() !== '') && (maxForms.val() - totalForms.val()) <= 0) {
@@ -161,6 +166,9 @@
                     for (i = 0, formCount = forms.length; i < formCount; i++) {
                         updateElementIndex($(forms).get(i), options.prefix, i);
                         $(forms.get(i)).find("*").each(updateElementCallback);
+                        $(forms.get(i)).find("h3 span.inline_label").each(function () {
+                            $(this).text($(this).text().replace(/#\d+/g, `#${i+1}`));
+                        });
                     }
                 });
                 // If a post-add callback was supplied, call it with the added form:

src/polymorphic/templates/admin/polymorphic/edit_inline/stacked.html

@@ -15,7 +15,7 @@ <h2>{{ inline_admin_formset.opts.verbose_name_plural|capfirst }}</h2>
        id="{% if inline_admin_form.original.pk %}{{ inline_admin_formset.formset.prefix }}-{{ forloop.counter0 }}{% else %}{{ inline_admin_form.model_admin.opts.model_name }}-empty{% endif %}">
 
     <h3><b>{{ inline_admin_form.model_admin.opts.verbose_name|capfirst }}:</b>&nbsp;<span class="inline_label">{% if inline_admin_form.original %}{{ inline_admin_form.original }}{% if inline_admin_form.model_admin.show_change_link and inline_admin_form.model_admin.has_registered_model %} <a href="{% url inline_admin_form.model_admin.opts|admin_urlname:'change' inline_admin_form.original.pk|admin_urlquote %}" class="inlinechangelink">{% trans "Change" %}</a>{% endif %}
-{% else %}#{{ forloop.counter }}{% endif %}</span>
+{% else %}##{% endif %}</span>
         {% if inline_admin_form.show_url %}<a href="{{ inline_admin_form.absolute_url }}">{% trans "View on site" %}</a>{% endif %}
       {% if inline_admin_form.formset.can_delete and inline_admin_form.original %}<span class="delete">{{ inline_admin_form.deletion_field.field }} {{ inline_admin_form.deletion_field.label_tag }}</span>{% endif %}
     </h3>

src/polymorphic/tests/test_admin.py

@@ -1,4 +1,5 @@
 import os
+from time import sleep
 import pytest
 from django.urls import reverse
 from django.contrib.auth import get_user_model
@@ -203,22 +204,19 @@ def setUpClass(cls):
         cls.playwright = sync_playwright().start()
         cls.browser = cls.playwright.chromium.launch(headless=cls.HEADLESS)
 
-        cls.admin = get_user_model().objects.create_superuser(
-            username=cls.admin_username, email="admin@example.com", password=cls.admin_password
-        )
-
     @classmethod
     def tearDownClass(cls):
         """Clean up Playwright instance after tests."""
         cls.browser.close()
         cls.playwright.stop()
-        if cls.admin:
-            cls.admin.delete()
         super().tearDownClass()
         del os.environ["DJANGO_ALLOW_ASYNC_UNSAFE"]
 
     def setUp(self):
         """Create an admin user before running tests."""
+        self.admin = get_user_model().objects.create_superuser(
+            username=self.admin_username, email="admin@example.com", password=self.admin_password
+        )
         self.page = self.browser.new_page()
         # Log in to the Django admin
         self.page.goto(f"{self.live_server_url}/admin/login/")
@@ -235,13 +233,10 @@ def tearDown(self):
 
 
 class StackedInlineTests(_GenericAdminFormTest):
-    def setUp(self):
-        super().setUp()
-        for name in ["Brian", "Alice", "Emma", "Anna"]:
-            PlainA.objects.create(field1=name)
-
     def test_admin_inline_add_autocomplete(self):
         # https://github.com/jazzband/django-polymorphic/issues/546
+        for name in ["Brian", "Alice", "Emma", "Anna"]:
+            PlainA.objects.create(field1=name)
         self.page.goto(self.add_url(InlineParent))
         self.page.fill("input[name='title']", "Parent 1")
         with self.page.expect_navigation(timeout=10000) as nav_info:
@@ -283,6 +278,71 @@ def test_admin_inline_add_autocomplete(self):
         suggestions = self.page.locator("ul.select2-results__options > li").all_inner_texts()
         assert suggestions == ["Brian"]
 
+    def test_inline_form_ordering_and_removal(self):
+        """
+        Test that the javascript places the inline forms in the correct order on
+        repeated adds without a save.
+
+        https://github.com/jazzband/django-polymorphic/issues/426
+        """
+        self.page.goto(self.add_url(InlineParent))
+
+        polymorphic_menu = self.page.locator(
+            "div.polymorphic-add-choice div.polymorphic-type-menu"
+        )
+
+        self.page.click("div.polymorphic-add-choice a")
+        polymorphic_menu.wait_for(state="visible")
+        self.page.click("div.polymorphic-type-menu a[data-type='inlinemodelb']")
+        polymorphic_menu.wait_for(state="hidden")
+        self.page.click("div.polymorphic-add-choice a")
+        polymorphic_menu.wait_for(state="visible")
+        self.page.click("div.polymorphic-type-menu a[data-type='inlinemodela']")
+        polymorphic_menu.wait_for(state="hidden")
+        self.page.click("div.polymorphic-add-choice a")
+        polymorphic_menu.wait_for(state="visible")
+        self.page.click("div.polymorphic-type-menu a[data-type='inlinemodela']")
+        polymorphic_menu.wait_for(state="hidden")
+        self.page.click("div.polymorphic-add-choice a")
+        polymorphic_menu.wait_for(state="visible")
+        self.page.click("div.polymorphic-type-menu a[data-type='inlinemodelb']")
+        polymorphic_menu.wait_for(state="hidden")
+
+        inline0 = self.page.locator("div#inline_children-0")
+        inline1 = self.page.locator("div#inline_children-1")
+        inline2 = self.page.locator("div#inline_children-2")
+        inline3 = self.page.locator("div#inline_children-3")
+
+        inline0.wait_for(state="visible")
+        inline1.wait_for(state="visible")
+        inline2.wait_for(state="visible")
+        inline3.wait_for(state="visible")
+
+        assert "model b" in inline0.inner_text() and "#1" in inline0.inner_text()
+        assert "model a" in inline1.inner_text() and "#2" in inline1.inner_text()
+        assert "model a" in inline2.inner_text() and "#3" in inline2.inner_text()
+        assert "model b" in inline3.inner_text() and "#4" in inline3.inner_text()
+
+        # Now remove inline 2 and check the numbering is correct
+        inline1.locator("a.inline-deletelink").click()
+        # the ids are updated - so we expect the last div id to be removed
+        inline3.wait_for(state="detached")
+        assert "model b" in inline0.inner_text() and "#1" in inline0.inner_text()
+        assert "model a" in inline1.inner_text() and "#2" in inline1.inner_text()
+        assert "model b" in inline2.inner_text() and "#3" in inline2.inner_text()
+
+        inline0.locator("a.inline-deletelink").click()
+        inline2.wait_for(state="detached")
+        assert "model a" in inline0.inner_text() and "#1" in inline0.inner_text()
+        assert "model b" in inline1.inner_text() and "#2" in inline1.inner_text()
+
+        inline1.locator("a.inline-deletelink").click()
+        inline1.wait_for(state="detached")
+        assert "model a" in inline0.inner_text() and "#1" in inline0.inner_text()
+
+        inline0.locator("a.inline-deletelink").click()
+        inline0.wait_for(state="detached")
+
 
 class PolymorphicFormTests(_GenericAdminFormTest):
     def test_admin_polymorphic_add(self):