Fix: Properly save ordering of nested InlinePanels

The order of nested InlinePanels (recently formally added in 5566)
doesn't get saved properly due to some now-invalid assumptions in the JS
selector code.

Currently, Wagtail users can use the editor up/down arrows to order
InlinePanel elements that contain child InlinePanels, but these may not
be properly saved.

Before InlinePanel nesting was supported, it was a safer bet that a
child panel would only contain one hidden input named "-ORDER". With
nesting, however, a parent panel will also contain hidden inputs named
like this for its child panels. This breaks the logic used in the
ordering code.

This change modifies the logic to use the jQuery `.children()` selector
instead of `.next()`, ensuring that we reference the correct adjacent
panel item.

An easy way to test this against current master is to use the Wagtail
testapp test models that exercise this behavior:

1. `wagtail start testwagtail` to create a new project.
2. `cd testwagtail`
3. Edit testwagtail/settings/base.py to add the Wagtail test
application `'wagtail.tests.testapp'` to the list of `INSTALLED_APPS`.
For the admin to work properly with this app, you also need to add
`'wagtail.contrib.settings'` to that list and copy the definition of
`WAGTAILADMIN_RICH_TEXT_EDITORS` from wagtail/tests/settings.py.
4. `./manage.py migrate` to create your local database.
5. `./manage.py createsuperuser` to create an admin user.
6. Create a new Event Page
(http://localhost:8000/admin/pages/add/tests/eventpage/3/).
7. Fill in all required items, and then add multiple speakers under
"Speaker Lineup". For each speaker, add at least one Award. Save the
page.
8. Try using the up/down arrows to reorder the speakers (the parent
InlinePanel), and save the page.
9. Note that when the page reloads, the ordering hasn't been saved. If
you debug using the developer tools, you'll notice that this is because
the code being modified here selects the child panel items instead of
the adjacent parent panel item.
This commit is contained in:
Andy Chosak 2019-12-09 14:15:30 -05:00 committed by Matt Westcott
parent 4864920555
commit 349fca66f3
4 changed files with 7 additions and 6 deletions

View file

@ -20,7 +20,7 @@ Changelog
* Add StreamFieldPanel to available panel types in documentation (Dan Swain)
* Add {{ block.super }} example to ModelAdmin customisation in documentation (Dan Swain)
* Add ability to filter image index by a tag (Benedikt Willi)
* Add formal support for nested InlinePanels (Matt Westcott)
* Add formal support for nested InlinePanels (Matt Westcott, Sam Costigan, Andy Chosak, Scott Cranfill)
* Added cache control headers when serving documents (Johannes Vogel)
* Use `sensitive_post_parameters` on password reset form (Dan Braghis)
* Fix: Rename documents listing column 'uploaded' to 'created' (LB (Ben Johnston))

View file

@ -427,6 +427,7 @@ Contributors
* Pete Andrew
* Benedikt Willi
* Johannes Vogel
* Sam Costigan
Translators
===========

View file

@ -40,7 +40,7 @@ Other features
* Add StreamFieldPanel to available panel types in documentation (Dan Swain)
* Add {{ block.super }} example to ModelAdmin customisation in documentation (Dan Swain)
* Add ability to filter image index by a tag (Benedikt Willi)
* Add formal support for nested InlinePanels (Matt Westcott)
* Add formal support for nested InlinePanels (Matt Westcott, Sam Costigan, Andy Chosak, Scott Cranfill)
* Added cache control headers when serving documents (Johannes Vogel)
* Use ``sensitive_post_parameters`` on password reset form (Dan Braghis)

View file

@ -38,13 +38,13 @@ function InlinePanel(opts) {
if (opts.canOrder) {
$('#' + prefix + '-move-up').on('click', function() {
var currentChild = $('#' + childId);
var currentChildOrderElem = currentChild.find('input[name$="-ORDER"]');
var currentChildOrderElem = currentChild.children('input[name$="-ORDER"]');
var currentChildOrder = currentChildOrderElem.val();
/* find the previous visible 'inline_child' li before this one */
var prevChild = currentChild.prevAll(':not(.deleted)').first();
if (!prevChild.length) return;
var prevChildOrderElem = prevChild.find('input[name$="-ORDER"]');
var prevChildOrderElem = prevChild.children('input[name$="-ORDER"]');
var prevChildOrder = prevChildOrderElem.val();
// async swap animation must run before the insertBefore line below, but doesn't need to finish first
@ -59,13 +59,13 @@ function InlinePanel(opts) {
$('#' + prefix + '-move-down').on('click', function() {
var currentChild = $('#' + childId);
var currentChildOrderElem = currentChild.find('input[name$="-ORDER"]');
var currentChildOrderElem = currentChild.children('input[name$="-ORDER"]');
var currentChildOrder = currentChildOrderElem.val();
/* find the next visible 'inline_child' li after this one */
var nextChild = currentChild.nextAll(':not(.deleted)').first();
if (!nextChild.length) return;
var nextChildOrderElem = nextChild.find('input[name$="-ORDER"]');
var nextChildOrderElem = nextChild.children('input[name$="-ORDER"]');
var nextChildOrder = nextChildOrderElem.val();
// async swap animation must run before the insertAfter line below, but doesn't need to finish first