Add subtasks drag and drop

2 files changed, 62 insertions, 2 deletions

diff --git a/assets/js/src/App.js b/assets/js/src/App.js
index 33b3c6b1..b7ac1a6c 100644
--- a/assets/js/src/App.js
+++ b/assets/js/src/App.js
@@ -8,7 +8,7 @@ function App() {
     this.popover = new Popover(this);
     this.task = new Task();
     this.project = new Project();
-    this.subtask = new Subtask();
+    this.subtask = new Subtask(this);
     this.file = new FileUpload(this);
     this.keyboardShortcuts();
     this.chosen();
diff --git a/assets/js/src/Subtask.js b/assets/js/src/Subtask.js
index c6cae641..7670095e 100644
--- a/assets/js/src/Subtask.js
+++ b/assets/js/src/Subtask.js
@@ -1,7 +1,12 @@
-function Subtask() {
+function Subtask(app) {
+    this.app = app;
 }
 
 Subtask.prototype.listen = function() {
+    var self = this;
+
+    this.dragAndDrop();
+
     $(document).on("click", ".subtask-toggle-status", function(e) {
         e.preventDefault();
         var el = $(this);
@@ -15,6 +20,8 @@ Subtask.prototype.listen = function() {
                 } else {
                     el.replaceWith(data);
                 }
+
+                self.dragAndDrop();
             }
         });
     });
@@ -28,7 +35,60 @@ Subtask.prototype.listen = function() {
             url: el.attr("href"),
             success: function(data) {
                 $(".subtasks-table").replaceWith(data);
+                self.dragAndDrop();
             }
         });
     });
 };
+
+Subtask.prototype.dragAndDrop = function() {
+    var self = this;
+
+    $(".draggable-row-handle").mouseenter(function() {
+        $(this).parent().parent().addClass("draggable-item-hover");
+    }).mouseleave(function() {
+        $(this).parent().parent().removeClass("draggable-item-hover");
+    });
+
+    $(".subtasks-table tbody").sortable({
+        forcePlaceholderSize: true,
+        handle: "td:first i",
+        helper: function(e, ui) {
+            ui.children().each(function() {
+                $(this).width($(this).width());
+            });
+
+            return ui;
+        },
+        stop: function(event, ui) {
+            var subtask = ui.item;
+            subtask.removeClass("draggable-item-selected");
+            self.savePosition(subtask.data("subtask-id"), subtask.index() + 1);
+        },
+        start: function(event, ui) {
+            ui.item.addClass("draggable-item-selected");
+        }
+    }).disableSelection();
+};
+
+Subtask.prototype.savePosition = function(subtaskId, position) {
+    var url = $(".subtasks-table").data("save-position-url");
+    var self = this;
+
+    this.app.showLoadingIcon();
+
+    $.ajax({
+        cache: false,
+        url: url,
+        contentType: "application/json",
+        type: "POST",
+        processData: false,
+        data: JSON.stringify({
+            "subtask_id": subtaskId,
+            "position": position
+        }),
+        complete: function() {
+            self.app.hideLoadingIcon();
+        }
+    });
+};