Repository: collective/collective.cover (language: python)

Issue:
List tile sorting not working
On the Compose tab, when I drag an item from a list tile to change the order, the item's new position is not recorded. On the screen the order changes, but if we reload the page, the item returns to its original position.


Discussion / hints:

Fix patch:
diff --git a/webpack/app/js/compose.js b/webpack/app/js/compose.js
index 60f6aee7..ef9bf05b 100644
--- a/webpack/app/js/compose.js
+++ b/webpack/app/js/compose.js
@@ -160,7 +160,52 @@ export default class ComposeView {
     if ($el.data('init')) {
       return;
     }
-    $el.data('init', true).sortable();
+    let onStop = function(e, ui) {
+      // This function saves the position of the content in the tile.
+
+      /* This function is called when a sort of an content occurs. Even when the
+      content is dropped on another tile, this function is called. But when the content
+      is dropped on another tile, the ContentChooser's dropped function should be taken
+      care of. So we use the test below to make sure we do something here, only if the
+      content is dropped on the tile it was originally on.*/
+      if ($('.loading-mask.show').length != 0) {
+        return
+      }
+      let uuids = [];
+      // We iterate over the children of the original $el determined at the top of onMouseOverSortable.
+      $el.children().each(function(index) {
+        let child = $($el.children()[index]);
+        if (child.attr('data-content-uuid') !== undefined) {
+          uuids.push(child.attr('data-content-uuid'));
+        }
+      });
+      let tile = $el.closest('.tile');
+      let tile_type = tile.attr('data-tile-type');
+      let tile_id = tile.attr('id');
+      $.ajax({
+        url: '@@updatelisttilecontent',
+        context: this,
+        data: {
+          'tile-type': tile_type,
+          'tile-id': tile_id,
+          'uuids': uuids
+        },
+        success: function(info) {
+          tile.html(info);
+          tile.trigger('change');
+          this.update();
+          return false;
+        },
+        error: function(XMLHttpRequest, textStatus, errorThrown) {
+          tile.html(textStatus + ': ' + errorThrown);
+          this.update();
+          return false;
+        }
+      });
+    };
+    $el.data('init', true).sortable({
+      stop: onStop.bind(this),
+    });
   }
   onRemoveClick(e) {
     e.preventDefault();


Test patch:
diff --git a/src/collective/cover/tests/test_list_tile.robot b/src/collective/cover/tests/test_list_tile.robot
index 661a0497..3410763d 100644
--- a/src/collective/cover/tests/test_list_tile.robot
+++ b/src/collective/cover/tests/test_list_tile.robot
@@ -95,6 +95,9 @@ Test List Tile
     Drag And Drop By Offset  css=${first_item}  0  580
     Sleep  2s  Wait for reordering to occur
 
+    # Ensures sorting will be saved even after page relead.
+    Reload Page
+
     # ensure that the reordering is reflected in the DOM
     ${first_item_title} =  Get Text  css=${first_item} h2
     ${last_item_title} =  Get Text  css=${last_item} h2