Make tags sortable with drag&drop

public/js/directives/directives.js

@@ -60,6 +60,24 @@ habitrpg.directive('habitrpgSortable', ['User', function(User) {
     });
   }
 }]);
+habitrpg.directive('tagsSortable', ['User', function(User) {
+  return function($scope, element, attrs, ngModel) {
+    var el = element;
+    $(element).sortable({
+      axis: "x",
+      start: function (event, ui) {
+        ui.item.data('startIndex', ui.item.index());
+      },
+      stop: function (event, ui) {
+        User.user.ops.sortTag({query:{
+            from: ui.item.data('startIndex') - 3,
+            to:ui.item.index() - 3
+        }});
+      }
+    });
+  }
+}]);
+
 
 
 habitrpg

src/controllers/user.js

@@ -299,6 +299,7 @@ api.addTenGems = function(req, res, next) {
 // api.deleteTag // handled in Shared.ops
 // api.addTag // handled in Shared.ops
 // api.updateTag // handled in Shared.ops
+// api.sortTag // handled in Shared.ops
 
 /*
  ------------------------------------------------------------------------

src/routes/apiv2.coffee

@@ -131,6 +131,7 @@ module.exports = (swagger, v2) ->
         ]
       action: user.sortTask
 
+
     "/user/tasks/clear-completed":
       spec:
         method: 'POST'
@@ -327,6 +328,16 @@ module.exports = (swagger, v2) ->
         ]
       action: user.addTag
 
+    "/user/tags/sort":
+      spec:
+        method: 'POST'
+        description: 'Sort tags'
+        parameters: [
+          query("from","Index where you're sorting from (0-based)","integer")
+          query("to","Index where you're sorting to (0-based)","integer")
+        ]
+      action: user.sortTag
+
     "/user/tags/{id}:PUT":
       spec:
         path: '/user/tags/{id}'

views/main/filters.jade

@@ -22,6 +22,7 @@
           form.hrpg-input-group
             input(type='text', ng-model='_newTag', placeholder=env.t('newTag'))
             button(ng-click='createTag(_newTag)')=env.t('add')
+      ul(ng-if='!areTagsHidden || _editing', tags-sortable)
         li.filters-edit(bindonce='user.tags', ng-class='{active: user.filters[tag.id]}', ng-repeat='tag in user.tags')
           //- Edit tags
           form.hrpg-input-group(ng-show='_editing')
@@ -29,7 +30,8 @@
             button(ng-click='user.ops.deleteTag({params:{id:tag.id}})')
               span.glyphicon.glyphicon-trash
           //- List of Tags
-        li.filters-tags(ng-if='!_editing', bindonce='user.tags', ng-class='{active: user.filters[tag.id], challenge: tag.challenge}', ng-repeat='tag in user.tags')
+        li.filters-tags(ng-if='!_editing', bindonce='user.tags',
+        ng-class='{active: user.filters[tag.id], challenge: tag.challenge}', ng-repeat='tag in user.tags')
           a(ng-click='toggleFilter(tag)')
             span.glyphicon.glyphicon-bullhorn(bo-if="tag.challenge")
             markdown(ng-model='tag.name')