[tryton-commits] changeset in sao:default Add drag and drop on CSV export and import

[Adrià Tarroja Caubet]

changeset c44c8f6bc280 in sao:default
details: https://hg.tryton.org/sao?cmd=changeset;node=c44c8f6bc280
description:
        Add drag and drop on CSV export and import

        issue8649
        review347131002
diffstat:

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

diffs (84 lines):

diff -r 9118267a616e -r c44c8f6bc280 CHANGELOG
--- a/CHANGELOG Sun Feb 28 16:22:59 2021 +0100
+++ b/CHANGELOG Thu Mar 04 23:32:38 2021 +0100
@@ -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 -r 9118267a616e -r c44c8f6bc280 src/sao.less
--- a/src/sao.less      Sun Feb 28 16:22:59 2021 +0100
+++ b/src/sao.less      Thu Mar 04 23:32:38 2021 +0100
@@ -742,6 +742,9 @@
             overflow: auto;
             white-space: nowrap;
         }
+        li.dragged-row {
+            background-color: @state-info-bg;
+        }
     }
 }
 
diff -r 9118267a616e -r c44c8f6bc280 src/window.js
--- a/src/window.js     Sun Feb 28 16:22:59 2021 +0100
+++ b/src/window.js     Thu Mar 04 23:32:38 2021 +0100
@@ -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') {