Implement reordering topics via drag and drop

lukas-shawford · Jul 15, 2014 · 9de6ccb · 9de6ccb
1 parent 4f6033e
commit 9de6ccb
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 2 deletions.
diff --git a/client/controllers/myQuizzes.js b/client/controllers/myQuizzes.js
@@ -4,6 +4,39 @@ angular.module('swot').controller('MyQuizzesCtrl', function ($scope, $http, $tim
         $scope.currentTopic = $scope.topics[0];
     };
 
+    $scope.topicTreeOptions = {
+        dropped: function (event) {
+            // Topic being dragged
+            var topic = event.source.nodeScope.$modelValue;
+
+            // Old parent topic (null if topic was previously a root topic)
+            var oldParent = event.source.nodesScope.$parent.$modelValue;
+
+            // New parent topic (null if topic was dragged into root-level position)
+            var newParent = event.dest.nodesScope.$parent.$modelValue || null;
+
+            // Destination index that the topic was dragged to within its new parent;
+            var index = event.dest.index;
+
+            // Create the patch array containing the changes
+            var patch = [];
+            if (newParent !== oldParent) {
+                patch.push({ op: 'replace', path: '/parent', value: (newParent ? newParent._id : null) });
+            }
+            patch.push({ op: 'add', path: '/position', value: index });     // always specify position
+
+            return $http({
+                url: '/topics/' + topic._id,
+                method: "PATCH",
+                data: patch
+            }).then(function () {
+                return true;
+            }, function (response) {
+                return response.data.error || "Oops, something went wrong! Please try again later.";
+            });
+        }
+    };
+
     $scope.selectTopic = function (topic) {
         $scope.currentTopic = topic;
     };

diff --git a/lib/quiz/quizService.js b/lib/quiz/quizService.js
@@ -167,7 +167,7 @@ exports.getQuizzesAndTopics = function (user) {
 
         // Transform root topics into simple objects, and strip off unneeded properties
         var result = _.map(topics, function (topic) {
-            return _.omit(topic.toObject(), [ 'createdBy', '__v' ]);
+            return _.omit(topic.toObject(), [ 'createdBy', '__v', 'parent' ]);
         });
 
         // Recursively load quizzes and subtopics.

diff --git a/views/quizzes.jade b/views/quizzes.jade
@@ -10,7 +10,7 @@ block content
                 .topics-label Topics:
 
                 // Topic tree
-                #topics(ui-tree, data-drag-delay="200")
+                #topics(ui-tree="topicTreeOptions", data-drag-delay="200")
                     ol.nav.nav-list.nav-pills.nav-stacked(ui-tree-nodes="", ng-model="topics" id="tree-root")
                         li(ng-repeat="topic in topics", ui-tree-node
                         ng-class="{active: (topic === currentTopic)}"