From ff771c9ded498504671e6c6e8a0dec6472c5079a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Laur=C3=A9line=20Gu=C3=A9rin?= <zebuline@entrouvert.com>
Date: Thu, 30 Sep 2021 17:03:01 +0200
Subject: [PATCH] fields: possibility to order items of Item(s)Field (#57251)

---
 wcs/fields.py                        |  1 +
 wcs/qommon/form.py                   |  4 ++-
 wcs/qommon/static/css/dc2/admin.scss |  9 +++++-
 wcs/qommon/static/js/widget_list.js  | 41 ++++++++++++++++++++--------
 4 files changed, 41 insertions(+), 14 deletions(-)

diff --git a/wcs/fields.py b/wcs/fields.py
index d48907a4c..703823c44 100644
--- a/wcs/fields.py
+++ b/wcs/fields.py
@@ -1793,6 +1793,7 @@ class ItemFieldMixin:
             element_kwargs={'render_br': False, 'size': 50},
             add_element_label=_('Add item'),
             attrs={'data-dynamic-display-child-of': 'data_mode', 'data-dynamic-display-value': 'simple-list'},
+            extra_css_class='sortable',
         )
         form.add(
             data_sources.DataSourceSelectionWidget,
diff --git a/wcs/qommon/form.py b/wcs/qommon/form.py
index 210b46154..8c07d146e 100644
--- a/wcs/qommon/form.py
+++ b/wcs/qommon/form.py
@@ -1681,6 +1681,8 @@ class WidgetList(quixote.form.widget.WidgetList):
         if add_element_label == 'Add row':
             add_element_label = str(_('Add row'))
 
+        self.extra_css_class = kwargs.pop('extra_css_class', None)
+
         CompositeWidget.__init__(self, name, value=value, **kwargs)
         self.element_type = element_type
         self.element_kwargs = element_kwargs or {}
@@ -1728,7 +1730,7 @@ class WidgetList(quixote.form.widget.WidgetList):
         self.element_names.append(name)
 
     def add_media(self):
-        get_response().add_javascript(['jquery.js', 'widget_list.js'])
+        get_response().add_javascript(['jquery.js', 'jquery-ui.js', 'widget_list.js'])
 
     def transfer_form_value(self, request):
         for widget in self.get_widgets():
diff --git a/wcs/qommon/static/css/dc2/admin.scss b/wcs/qommon/static/css/dc2/admin.scss
index 55e78a334..8b84f739e 100644
--- a/wcs/qommon/static/css/dc2/admin.scss
+++ b/wcs/qommon/static/css/dc2/admin.scss
@@ -33,7 +33,8 @@ ul.biglist {
 	padding: 0.5em 0;
 }
 
-ul.biglist span.handle {
+ul.biglist span.handle,
+.widget span.handle {
 	cursor: move;
 	display: inline-block;
 	padding: 0.5ex;
@@ -43,6 +44,12 @@ ul.biglist span.handle {
 	box-sizing: border-box;
 }
 
+.widget span.handle {
+	padding-left: 2px;
+	width: 1.5em;
+	text-align: left;
+}
+
 ul.biglist li,
 li.biglistitem {
 	list-style-type: none;
diff --git a/wcs/qommon/static/js/widget_list.js b/wcs/qommon/static/js/widget_list.js
index 74ad168b6..2824d4ae8 100644
--- a/wcs/qommon/static/js/widget_list.js
+++ b/wcs/qommon/static/js/widget_list.js
@@ -21,7 +21,6 @@ function prepare_widget_list_elements() {
                      */
                     return true;
                 }
-
                 if ($(row).find('[name$=add_element], [data-dynamic-display-value]').length > 0) {
                     /* this has complex widgets, don't use
                      * javascript in that case */
@@ -34,19 +33,18 @@ function prepare_widget_list_elements() {
                 /* fix up form element name */
                 $(new_row).find('[name^=' + prefix + ']').each(
                     function() {
-                        var cur_name = $(this).attr('name');
+                        var $element = $(this);
+                        if ($element.attr('type') == 'text') {
+                            $element.attr('value', '');
+                        }
+                        var cur_name = $element.attr('name');
                         var pos = cur_name.indexOf('element', prefix.length) + 7; // 7 == len(element)
                         var index = cur_name.substring(pos, cur_name.length);
-                        var after_pos = Math.max(index.indexOf('-'), index.indexOf('$'));
-                        var after = '';
-                        if (after_pos != -1) {
-                            after = index.substring(after_pos, index.length);
-                        }
-                        var new_name = cur_name.substring(0, cur_name.length-index.length) +
-                            (parseInt(index)+1) + after;
-                        $(this).attr('name', new_name);
-                        if ($(this).attr('type') == 'text') {
-                            $(this).attr('value', '');
+                        var element_regex = RegExp(`\\$element(\\d)`, 'g');
+                        index = parseInt(index) + 1;
+                        $(new_row).html($(new_row).html().replace(element_regex, `$element${index}`));
+                        if ($(new_row).attr('data-widget-name')) {
+                            $(new_row).attr('data-widget-name', $(new_row).attr('data-widget-name').replace(element_regex, `$element${index}`));
                         }
                     }
                 );
@@ -65,6 +63,25 @@ function prepare_widget_list_elements() {
                 return false;
             }
         );
+
+        $('.widget.sortable input').each(function () {
+            $('<span class="handle">⣿</span>').insertBefore($(this));
+        });
+        $('.widget.sortable .content').sortable({
+            handle: '.handle',
+            start: function(event, ui) {
+                $('.widget.StringWidget input', $(this)).each(function () {
+                    $(this).attr('value', $(this).val());  // save potential new values before the move
+                });
+            },
+            update : function(event, ui) {
+                $('.widget.StringWidget', $(this)).each(function (index) {
+                    var element_regex = RegExp(`\\$element(\\d)`, 'g');
+                    $(this).html($(this).html().replace(element_regex, `$element${index}`));
+                    $(this).attr('data-widget-name', $(this).attr('data-widget-name').replace(element_regex, `$element${index}`));
+                });
+            },
+        });
     }
 
 $(document).ready(prepare_widget_list_elements);