From 3df1e078024656fa28c1ab44e9ff205f78c59feb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Tarroja=20Caubet?= <atarroja@kopen.es>
Date: Thu, 4 Mar 2021 23:32:38 +0100
Subject: [PATCH] Add drag and drop on CSV export and import

issue8649
review347131002
---
 CHANGELOG     |  1 +
 src/sao.less  |  3 +++
 src/window.js | 19 ++++++++++++++++---
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG b/CHANGELOG
index c4ebbfbb51..ad03a97478 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -1,3 +1,4 @@
+* Add drag and drop on CSV export and import
 * Remove tempusdominus dependency
 * Handle device cookie
 * Add breadcrumb as title of window form
diff --git a/src/sao.less b/src/sao.less
index cceba2fb11..de6a2a82b9 100644
--- a/src/sao.less
+++ b/src/sao.less
@@ -742,6 +742,9 @@ input.column-boolean {
             overflow: auto;
             white-space: nowrap;
         }
+        li.dragged-row {
+            background-color: @state-info-bg;
+        }
     }
 }
 
diff --git a/src/window.js b/src/window.js
index 4bf15b8df6..6ce38050c5 100644
--- a/src/window.js
+++ b/src/window.js
@@ -1045,7 +1045,6 @@
                 'text': Sao.i18n.gettext('Fields Selected')
             })))).appendTo(row_fields);
 
-            // TODO: Make them draggable to re-order
             this.fields_selected = jQuery('<ul/>', {
                 'class': 'list-unstyled column-fields panel-body',
             }).css('cursor', 'pointer')
@@ -1234,13 +1233,20 @@
                 .append(this.el_csv_skip)
                 .appendTo(this.expander_csv);
             this.expander_csv.append(' ');
+            Sortable.create(this.fields_selected.get(0), {
+                handle: '.draggable-handle',
+                ghostClass: 'dragged-row'
+            });
         },
         sig_sel_add: function(el_field) {
             el_field = jQuery(el_field);
             var field = el_field.attr('field');
             var node = jQuery('<li/>', {
                 'field': field,
-            }).text(el_field.attr('name')).click(function(e) {
+                'class': 'draggable-handle',
+            }).text(el_field.attr('name')).prepend(
+                Sao.common.ICONFACTORY.get_icon_img('tryton-drag')
+            ).click(function(e) {
                 if (e.ctrlKey) {
                     node.toggleClass('bg-primary');
                 } else {
@@ -1588,6 +1594,10 @@
             this.expander_csv.append(' ');
 
             this.set_url();
+            Sortable.create(this.fields_selected.get(0), {
+                handle: '.draggable-handle',
+                ghostClass: 'dragged-row'
+            });
         },
         get context() {
             return this.screen.context;
@@ -1853,6 +1863,7 @@
             }
             var node = jQuery('<li/>', {
                 'path': name,
+                'class': 'draggable-handle',
             }).text(long_string).click(function(e) {
                 if(e.ctrlKey) {
                     node.toggleClass('bg-primary');
@@ -1860,7 +1871,9 @@
                     jQuery(e.target).addClass('bg-primary')
                         .siblings().removeClass('bg-primary');
                 }
-            }).appendTo(this.fields_selected);
+            }).prepend(
+                Sao.common.ICONFACTORY.get_icon_img('tryton-drag')
+            ).appendTo(this.fields_selected);
         },
         response: function(response_id) {
             if(response_id == 'RESPONSE_OK') {