Enhancement #4339: Add wiki links drag and drop ordering

app/coffee/modules/wiki/main.coffee

@@ -57,6 +57,7 @@ class WikiDetailController extends mixOf(taiga.Controller, taiga.PageMixin)
 
     constructor: (@scope, @rootscope, @repo, @model, @confirm, @rs, @params, @q, @location,
                   @filter, @log, @appMetaService, @navUrls, @analytics, @translate, @errorHandlingService) ->
+        @scope.$on("wiki:links:move", @.moveLink)
         @scope.projectSlug = @params.pslug
         @scope.wikiSlug = @params.slug
         @scope.wikiTitle = @scope.wikiSlug
@@ -156,6 +157,16 @@ class WikiDetailController extends mixOf(taiga.Controller, taiga.PageMixin)
 
             @repo.remove(@scope.wiki).then onSuccess, onError
 
+    moveLink: (ctx, item, itemIndex) =>
+        values = @scope.wikiLinks
+        r = values.indexOf(item)
+        values.splice(r, 1)
+        values.splice(itemIndex, 0, item)
+        _.each values, (value, index) ->
+            value.order = index
+
+        @repo.saveAll(values)
+
 module.controller("WikiDetailController", WikiDetailController)
 
 

app/coffee/modules/wiki/nav.coffee

@@ -38,7 +38,40 @@ module = angular.module("taigaWiki")
 WikiNavDirective = ($tgrepo, $log, $location, $confirm, $analytics, $loading, $template,
                     $compile, $translate) ->
     template = $template.get("wiki/wiki-nav.html", true)
-    link = ($scope, $el, $attrs) ->
+
+    linkDragAndDrop = ($scope, $el, $attrs) ->
+        oldParentScope = null
+        newParentScope = null
+        itemEl = null
+        tdom = $el.find(".sortable")
+
+        drake = dragula([tdom[0]], {
+            direction: 'vertical',
+            copySortSource: false,
+            copy: false,
+            mirrorContainer: tdom[0],
+            moves: (item) -> return $(item).is('li')
+        })
+
+        drake.on 'dragend', (item) ->
+            itemEl = $(item)
+            item = itemEl.scope().link
+            itemIndex = itemEl.index()
+            $scope.$emit("wiki:links:move", item, itemIndex)
+
+        scroll = autoScroll(window, {
+            margin: 20,
+            pixels: 30,
+            scrollWhenOutside: true,
+            autoScroll: () ->
+                return this.down && drake.dragging;
+        })
+
+        $scope.$on "$destroy", ->
+            $el.off()
+            drake.destroy()
+
+    linkWikiLinks = ($scope, $el, $attrs) ->
         $ctrl = $el.controller()
 
         if not $attrs.ngModel?
@@ -130,9 +163,15 @@ WikiNavDirective = ($tgrepo, $log, $location, $confirm, $analytics, $loading, $t
                     $el.find(".new input").val('')
                     $el.find(".add-button").show()
 
-
         bindOnce($scope, $attrs.ngModel, render)
 
+    link = ($scope, $el, $attrs) ->
+        linkWikiLinks($scope, $el, $attrs)
+        linkDragAndDrop($scope, $el, $attrs)
+
+        $scope.$on "$destroy", ->
+            $el.off()
+
     return {link:link}
 
 module.directive("tgWikiNav", ["$tgRepo", "$log", "$tgLocation", "$tgConfirm", "$tgAnalytics",

app/partials/wiki/wiki-nav.jade

@@ -2,10 +2,10 @@ header
   h1(translate="WIKI.NAVIGATION.SECTION_NAME")
 
 nav
-  ul
-    <% _.each(wikiLinks, function(link, index) { %>
-    li.wiki-link(data-id!="<%- index %>")
-        a.link-title(title!="<%- link.title %>", href!="<%- link.url %>")<%- link.title %>
+  ul.sortable
+    li.wiki-link(ng-repeat="link in wikiLinks", data-id!="{{ $index }}", tg-bind-scope)
+        tg-svg.dragger(svg-icon="icon-drag")
+        a.link-title(title!="{{ link.title }}", href!="{{ link.url }}") {{ link.title }}
 
         <% if (deleteWikiLinkPermission) { %>
         a.js-delete-link.remove-wiki-page(title!="{{'WIKI.DELETE_LINK_TITLE' | translate}}")
@@ -15,9 +15,8 @@ nav
         input.hidden(
             type="text"
             placeholder="{{'COMMON.FIELDS.NAME' | translate}}"
-            value!="<%- link.title %>"
+            value!="{{ link.title }}"
         )
-    <% }) %>
 
     li.new.hidden
         input(

app/styles/modules/wiki/wiki-nav.scss

@@ -4,7 +4,7 @@
     border-bottom: 1px solid $gray-light;
     display: flex;
     justify-content: space-between;
-    padding: 1rem 0 1rem 1rem;
+    padding: 1rem 0;
     text-transform: uppercase;
     &:hover {
         .remove-wiki-page {
@@ -13,6 +13,15 @@
             transition: opacity .2s linear;
             transition-delay: .2s;
         }
+        .dragger {
+            fill: $gray-light;
+            opacity: 1;
+            transition: opacity .2s linear;
+            transition-delay: .2s;
+        }
+    }
+    .dragger {
+        opacity: 0;
     }
     .remove-wiki-page {
         opacity: 0;
@@ -24,6 +33,7 @@
     }
     .link-title {
         cursor: pointer;
+        flex-grow: 1;
     }
     .icon-trash {
         fill: $gray-light;