From 833bcc93cc15939f44468deb7eb48ef575dc441a Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Mon, 31 May 2021 15:32:04 +0200
Subject: [PATCH] Sort options and items in form editor

---
 www/form/app-form.less |  6 ++++++
 www/form/inner.js      | 20 +++++++++++++++++++-
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/www/form/app-form.less b/www/form/app-form.less
index efe97ed86..3636144ee 100644
--- a/www/form/app-form.less
+++ b/www/form/app-form.less
@@ -125,6 +125,12 @@
                     flex-wrap: wrap;
                 }
                 .cp-form-edit-block {
+                    .cp-form-handle {
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        width: 30px;
+                    }
                     .cp-form-edit-block-input {
                         display: flex;
                         width: 400px;
diff --git a/www/form/inner.js b/www/form/inner.js
index 37d3d50af..b2406fc93 100644
--- a/www/form/inner.js
+++ b/www/form/inner.js
@@ -221,7 +221,14 @@ define([
             }
 
             var del = h('button.btn.btn-danger', h('i.fa.fa-times'));
-            var el = h('div.cp-form-edit-block-input', [ input, del ]);
+            var el = h('div.cp-form-edit-block-input', [
+                h('span.cp-form-handle', [
+                    h('i.fa.fa-ellipsis-v'),
+                    h('i.fa.fa-ellipsis-v'),
+                ]),
+                input,
+                del
+            ]);
             $(del).click(function () {
                 $(el).remove();
                 // We've just deleted an item/option so we should be under the MAX limit and
@@ -240,6 +247,12 @@ define([
         var container = h('div.cp-form-edit-block', inputs);
         var $container = $(container);
 
+        Sortable.create(container, {
+            direction: "vertical",
+            handle: ".cp-form-handle",
+            draggable: ".cp-form-edit-block-input",
+        });
+
         var containerItems;
         if (v.items) {
             var inputsItems = v.items.map(function (itemData) {
@@ -247,6 +260,11 @@ define([
             });
             inputsItems.push(addItem);
             containerItems = h('div.cp-form-edit-block', inputsItems);
+            Sortable.create(containerItems, {
+                direction: "vertical",
+                handle: ".cp-form-handle",
+                draggable: ".cp-form-edit-block-input",
+            });
         }
 
         // Calendar...