Merge pull request #1 from taigaio/backlog-sortable-refactor

Backlog sortable refactor

app/coffee/modules/backlog/main.coffee

@@ -450,7 +450,7 @@ BacklogDirective = ($repo, $rootscope) ->
 
         linkToolbar($scope, $el, $attrs, $ctrl)
         linkFilters($scope, $el, $attrs, $ctrl)
-        linkDoomLine($scope, $el, $attrs, $ctrl)
+        # linkDoomLine($scope, $el, $attrs, $ctrl)
 
         $el.find(".backlog-table-body").disableSelection()
 

app/coffee/modules/backlog/sortable.coffee

@@ -34,67 +34,51 @@ module = angular.module("taigaBacklog")
 ## Sortable Directive
 #############################################################################
 
-BacklogSortableDirective = ($repo, $rs, $rootscope) ->
+deleteElement = (el) ->
+    el.scope().$destroy()
+    el.off()
+    el.remove()
 
-    #########################
+
-    ## Drag & Drop Link
+BacklogSortableDirective = ($repo, $rs, $rootscope) ->
-    #########################
+    # Notes about jquery bug:
     # http://stackoverflow.com/questions/5791886/jquery-draggable-shows-
     # helper-in-wrong-place-when-scrolled-down-page
 
-    linkSortable = ($scope, $el, $attrs, $ctrl) ->
+    link = ($scope, $el, $attrs) ->
-        # State
+        $el.sortable({
-        oldParentScope = null
+            connectWith: ".sprint-table"
-        newParentScope = null
+            handle: ".icon-drag-v",
-        itemEl = null
+            containment: ".wrapper"
-        tdom = $el
+            dropOnEmpty: true
-
+            # With scroll activated, it has strange behavior
-        deleteElement = (itemEl) ->
+            # with not full screen browser window.
-            # Completelly remove item and its scope from dom
+            scroll: false
-            itemEl.scope().$destroy()
+            # A consequence of length of backlog user story item
-            itemEl.off()
+            # the default tolerance ("intersection") not works properly.
-            itemEl.remove()
+            tolerance: "pointer"
-
+            # Revert on backlog is disabled bacause it works bad. Something
-        tdom.sortable({
+            # on the current taiga backlog structure or style makes jquery ui
-            # handle: ".icon-drag-v",
+            # works unexpectly (in some circumstances calculates wrong
-            items: "div.sprint-table > div.row, .backlog-table-body > div.row"
+            # position for revert).
+            revert: false
         })
 
-        tdom.on "sortstop", (event, ui) ->
+        $el.on "sortreceive", (event, ui) ->
-            # Common state for stop event handler
+            itemUs = ui.item.scope().us
-            parentEl = ui.item.parent()
+            itemIndex = ui.item.index()
-            itemEl = ui.item
-            itemUs = itemEl.scope().us
-            itemIndex = itemEl.index()
-            newParentScope = parentEl.scope()
 
-            if itemEl.is(".milestone-us-item-row") and parentEl.is(".backlog-table-body")
+            deleteElement(ui.item)
-                deleteElement(itemEl)
+            $scope.$emit("sprint:us:move", itemUs, itemIndex, null)
-                $scope.$broadcast("sprint:us:move", itemUs, itemIndex, null)
 
-            else if itemEl.is(".us-item-row") and parentEl.is(".sprint-table")
+        $el.on "sortstop", (event, ui) ->
-                deleteElement(itemEl)
+            # When parent not exists, do nothing
-                $scope.$broadcast("sprint:us:move", itemUs, itemIndex, newParentScope.sprint.id)
+            if ui.item.parent().length == 0
+                return
 
-            else if parentEl.is(".sprint-table") and newParentScope.sprint.id != oldParentScope.sprint.id
+            itemUs = ui.item.scope().us
-                deleteElement(itemEl)
+            itemIndex = ui.item.index()
-                $scope.$broadcast("sprint:us:move", itemUs, itemIndex, newParentScope.sprint.id)
+            $scope.$emit("sprint:us:move", itemUs, itemIndex, null)
-
-            else
-                $scope.$broadcast("sprint:us:move", itemUs, itemIndex, itemUs.milestone)
-
-        tdom.on "sortstart", (event, ui) ->
-            oldParentScope = ui.item.parent().scope()
-
-        tdom.on "sort", (event, ui) ->
-            ui.helper.css("background-color", "#ddd")
-
-        tdom.on "sortbeforestop", (event, ui) ->
-            ui.helper.css("background-color", "transparent")
-
-    link = ($scope, $el, $attrs) ->
-        $ctrl = $el.controller()
-        linkSortable($scope, $el, $attrs, $ctrl)
 
         $scope.$on "$destroy", ->
             $el.off()
@@ -102,9 +86,43 @@ BacklogSortableDirective = ($repo, $rs, $rootscope) ->
     return {link: link}
 
 
+SprintSortableDirective = ($repo, $rs, $rootscope) ->
+    link = ($scope, $el, $attrs) ->
+        $el.sortable({
+            dropOnEmpty: true
+            connectWith: ".sprint-table,.backlog-table-body"
+        })
+
+        $el.on "sortreceive", (event, ui) ->
+            itemUs = ui.item.scope().us
+            itemIndex = ui.item.index()
+
+            deleteElement(ui.item)
+            $scope.$emit("sprint:us:move", itemUs, itemIndex, $scope.sprint.id)
+
+        $el.on "sortstop", (event, ui) ->
+            # When parent not exists, do nothing
+            if ui.item.parent().length == 0
+                return
+
+            itemUs = ui.item.scope().us
+            itemIndex = ui.item.index()
+
+            $scope.$emit("sprint:us:move", itemUs, itemIndex, $scope.sprint.id)
+
+    return {link:link}
+
+
 module.directive("tgBacklogSortable", [
     "$tgRepo",
     "$tgResources",
     "$rootScope",
     BacklogSortableDirective
 ])
+
+module.directive("tgSprintSortable", [
+    "$tgRepo",
+    "$tgResources",
+    "$rootScope",
+    SprintSortableDirective
+])

app/partials/backlog.jade

@@ -5,7 +5,7 @@ block head
 
 block content
     div.wrapper(tg-backlog, ng-controller="BacklogController as ctrl",
-                ng-init="section='backlog'", tg-backlog-sortable)
+                ng-init="section='backlog'")
         sidebar.menu-secondary.extrabar.filters-bar(tg-backlog-filters)
             include views/modules/backlog-filters
         section.main.backlog

app/partials/views/modules/backlog-table.jade

@@ -6,5 +6,5 @@ section.backlog-table-header
             span.header-points Points
             span.icon.icon-arrow-bottom
 
-section.backlog-table-body
+section.backlog-table-body(tg-backlog-sortable)
     include ../components/backlog-row

app/partials/views/modules/sprints.jade

@@ -10,7 +10,8 @@ section.sprints
               a.button.button-green(ng-click="ctrl.addNewSprint()", href="", title="Add New US")
                 span.text + New sprint
 
-    section.sprint(ng-repeat="sprint in sprints track by sprint.id", tg-backlog-sprint="sprint")
+    section.sprint(ng-repeat="sprint in sprints track by sprint.id"
+                   tg-backlog-sprint="sprint")
         header
             div.sprint-name
                 a.icon.icon-arrow-up(href="", title="compact Sprint")
@@ -27,7 +28,7 @@ section.sprints
                         span.description total
         div.sprint-progress-bar
             div.current-progress(tg-sprint-progressbar="sprint")
-        div.sprint-table
+        div.sprint-table(tg-sprint-sortable)
             div.row.milestone-us-item-row(ng-repeat="us in sprint.user_stories|orderBy:order track by us.id")
                 div.column-us.width-8
                     a.us-name.clickable(tg-nav="project-userstories-detail:project=project.slug,ref=us.ref", title="")

app/styles/modules/backlog/sprints.scss

@@ -116,6 +116,9 @@
     }
     .sprint-table {
         @include slide(1000px, overflow-y);
+        &.open {
+            min-height: 50px;
+        }
         .row {
             @include table-flex();
             border-bottom: 1px solid $gray-light;