Added an async task to persist the visual console item movement to the database

pandora_console/include/javascript/pandora_visual_console.js

@@ -141,11 +141,45 @@ function createVisualConsole(
     });
     // VC Item moved.
     visualConsole.onItemMoved(function(e) {
-      // TODO: Run an async task to update the position here.
-      // TODO: Recover the previous position if the update task fails.
-      console.log(
-        "Moved item #" + e.item.props.id + " (x: " + e.x + ", y: " + e.y + ")"
-      );
+      var id = e.item.props.id;
+      var data = {
+        x: e.newPosition.x,
+        y: e.newPosition.y
+      };
+      var taskId = "visual-console-item-move-" + id;
+
+      asyncTaskManager
+        .add(taskId, function(done) {
+          var abortable = updateVisualConsoleItem(
+            baseUrl,
+            visualConsole.props.id,
+            id,
+            data,
+            function(error, data) {
+              if (error && error.request.statusText === "abort") return;
+              if (error || !data) {
+                console.log(
+                  "[ERROR]",
+                  "[VISUAL-CONSOLE-CLIENT]",
+                  "[API]",
+                  error ? error.message : "Invalid response"
+                );
+
+                // Move the element to its initial position.
+                e.item.move(e.prevPosition.x, e.prevPosition.y);
+              }
+
+              done();
+            }
+          );
+
+          return {
+            cancel: function() {
+              abortable.abort();
+            }
+          };
+        })
+        .init();
     });
 
     if (updateInterval != null && updateInterval > 0) {
@@ -274,6 +308,75 @@ function loadVisualConsoleData(baseUrl, vcId, callback) {
   };
 }
 
+/**
+ * Fetch a Visual Console's structure and its items.
+ * @param {string} baseUrl Base URL to build the API path.
+ * @param {number} vcId Identifier of the Visual Console.
+ * @param {number} vcItemId Identifier of the Visual Console's item.
+ * @param {Object} data Data we want to save.
+ * @param {function} callback Function to be executed on request success or fail.
+ * @return {Object} Cancellable. Object which include and .abort([statusText]) function.
+ */
+// eslint-disable-next-line no-unused-vars
+function updateVisualConsoleItem(baseUrl, vcId, vcItemId, data, callback) {
+  // var apiPath = baseUrl + "/include/rest-api";
+  var apiPath = baseUrl + "/ajax.php";
+  var jqXHR = null;
+
+  // Cancel the ajax requests.
+  var abort = function(textStatus) {
+    if (textStatus == null) textStatus = "abort";
+
+    // -- XMLHttpRequest.readyState --
+    // Value	State	  Description
+    // 0	    UNSENT	Client has been created. open() not called yet.
+    // 4	    DONE   	The operation is complete.
+
+    if (jqXHR.readyState !== 0 && jqXHR.readyState !== 4)
+      jqXHR.abort(textStatus);
+  };
+
+  // Failed request handler.
+  var handleFail = function(jqXHR, textStatus, errorThrown) {
+    abort();
+    // Manually aborted or not.
+    if (textStatus === "abort") {
+      callback();
+    } else {
+      var error = new Error(errorThrown);
+      error.request = jqXHR;
+      callback(error);
+    }
+  };
+
+  // Function which handle success case.
+  var handleSuccess = function(data) {
+    callback(null, data);
+  };
+
+  // Visual Console container request.
+  jqXHR = jQuery
+    // .get(apiPath + "/visual-consoles/" + vcId, null, "json")
+    .get(
+      apiPath,
+      {
+        page: "include/rest-api/index",
+        updateVisualConsoleItem: 1,
+        visualConsoleId: vcId,
+        visualConsoleItemId: vcItemId,
+        data: data
+      },
+      "json"
+    )
+    .done(handleSuccess)
+    .fail(handleFail);
+
+  // Abortable.
+  return {
+    abort: abort
+  };
+}
+
 // TODO: Delete the functions below when you can.
 /**************************************
  These functions require jQuery library

visual_console_client/src/Item.ts

@@ -70,8 +70,10 @@ export interface ItemRemoveEvent<Props extends ItemProps> {
   data: AnyObject;
 }
 
-export interface ItemMovedEvent extends Position {
+export interface ItemMovedEvent {
   item: VisualConsoleItem<ItemProps>;
+  prevPosition: Position;
+  newPosition: Position;
 }
 
 /**
@@ -153,10 +155,22 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
   private debouncedMovementSave = debounce(
     500, // ms.
     (x: Position["x"], y: Position["y"]) => {
+      const prevPosition = {
+        x: this.props.x,
+        y: this.props.y
+      };
+      const newPosition = {
+        x: x,
+        y: y
+      };
       // Save the new position to the props.
       this.move(x, y);
       // Emit the movement event.
-      this.movedEventManager.emit({ item: this, x, y });
+      this.movedEventManager.emit({
+        item: this,
+        prevPosition: prevPosition,
+        newPosition: newPosition
+      });
     }
   );
   // This property will store the function