Sort Epics

app/modules/epics/dashboard/epic-row/epic-row.scss

@@ -1,12 +1,14 @@
 .epic-row {
     @include font-size(small);
     align-items: center;
+    background: $white;
     border-bottom: 1px solid $whitish;
-    cursor: pointer;
+    cursor: move;
     display: flex;
+    transition: background .2s;
     &:hover {
+        background: rgba($primary-light, .05);
         .icon-drag {
-            cursor: move;
             opacity: 1;
         }
     }
@@ -21,6 +23,7 @@
     }
     .icon-drag {
         @include svg-size(.75rem);
+        cursor: move;
         fill: $whitish;
         opacity: 0;
         transition: opacity .1s;

app/modules/epics/dashboard/epic-sortable/epic-sortable.directive.coffee

@@ -0,0 +1,35 @@
+###
+# Copyright (C) 2014-2016 Taiga Agile LLC <taiga@taiga.io>
+#
+# This program is free software: you can redistribute it and/or modify
+# it under the terms of the GNU Affero General Public License as
+# published by the Free Software Foundation, either version 3 of the
+# License, or (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+# GNU Affero General Public License for more details.
+#
+# You should have received a copy of the GNU Affero General Public License
+# along with this program. If not, see <http://www.gnu.org/licenses/>.
+#
+# File: epic-sortable.directive.coffee
+###
+
+EpicSortableDirective = ($parse) ->
+    link = (scope, el, attrs) ->
+
+        drake = dragula([el[0]])
+
+        scope.$on "$destroy", ->
+            el.off()
+            drake.destroy()
+
+    return {
+        link: link
+    }
+
+EpicSortableDirective.$inject = []
+
+angular.module("taigaComponents").directive("tgEpicSortable", EpicSortableDirective)

app/modules/epics/dashboard/epics-table/epics-table.controller.coffee

@@ -51,6 +51,8 @@ class EpicsTableController
         projectId = @.project.id
         promise = @rs.epics.list(projectId).then (epics) =>
             @.epics = epics
-            console.log @.epics
+
+    reorderEpics: (epic, index) ->
+        console.log epic, index
 
 module.controller("EpicsTableCtrl", EpicsTableController)

app/modules/epics/dashboard/epics-table/epics-table.jade

@@ -88,7 +88,7 @@ mixin epicSwitch(name, model)
                         for="switch-progress"
                     )
                     +epicSwitch('switch-progress', 'vm.column.progress')
-    .epics-table-body
+    .epics-table-body(tg-epic-sortable)
         .epics-table-body-row(tg-repeat="epic in vm.epics track by epic.get('id')")
             tg-epic-row(
                 epic="epic"

app/modules/epics/dashboard/epics-table/epics-table.scss

@@ -3,7 +3,7 @@
 }
 
 .epics-table-header,
-.epics-table-body {
+.epic-row {
     .assigned {
         padding: .5rem;
     }