Merge request drag-n-drop on milestone page

Allows moving milestone between 3 columns: unassigned, assigned,
declined
Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

app/assets/javascripts/milestone.js.coffee

@@ -11,10 +11,23 @@ class Milestone
           new Flash("Issue update failed", 'alert')
       dataType: "json"
 
+  @updateMergeRequest: (li, merge_request_url, data) ->
+    $.ajax
+      type: "PUT"
+      url: merge_request_url
+      data: data
+      success: (data) ->
+        if data.saved == true
+          $(li).effect 'highlight'
+        else
+          new Flash("Issue update failed", 'alert')
+      dataType: "json"
+
   constructor: ->
-    @bindSorting()
+    @bindIssuesSorting()
+    @bindMergeRequestSorting()
 
-  bindSorting: ->
+  bindIssuesSorting: ->
     $("#issues-list-unassigned, #issues-list-ongoing, #issues-list-closed").sortable(
       connectWith: ".issues-sortable-list",
       dropOnEmpty: true,
@@ -38,4 +51,28 @@ class Milestone
 
     ).disableSelection()
 
+  bindMergeRequestSorting: ->
+    $("#merge_requests-list-unassigned, #merge_requests-list-ongoing, #merge_requests-list-closed").sortable(
+      connectWith: ".merge_requests-sortable-list",
+      dropOnEmpty: true,
+      receive: (event, ui) ->
+        new_state = $(this).data('state')
+        merge_request_id = ui.item.data('iid')
+        merge_request_url = ui.item.data('url')
+
+        data = switch new_state
+          when 'ongoing'
+            "merge_request[assignee_id]=" + gon.current_user_id
+          when 'unassigned'
+            "merge_request[assignee_id]="
+          when 'closed'
+            "merge_request[state_event]=close"
+
+        if $(ui.sender).data('state') == "closed"
+          data += "&merge_request[state_event]=reopen"
+
+        Milestone.updateMergeRequest(ui.item, merge_request_url, data)
+
+    ).disableSelection()
+
 @Milestone = Milestone

app/views/projects/milestones/_merge_request.html.haml

-%li
-  = link_to [@project, merge_request] do
-    %span.label.label-info ##{merge_request.iid}
-  –
-  = link_to_gfm truncate(merge_request.title, length: 60), [@project, merge_request]
+%li{ class: 'mr-row', 'data-iid' => merge_request.iid, 'data-url' => project_merge_request_path(@project, merge_request) }
+  %span.str-truncated
+    = link_to [@project, merge_request] do
+      %span.cgray ##{merge_request.iid}
+    = link_to_gfm truncate(merge_request.title, length: 60), [@project, merge_request]

app/views/projects/milestones/_merge_requests.html.haml

+.panel.panel-default
+  .panel-heading= title
+  %ul{ class: "well-list merge_requests-sortable-list", id: "merge_requests-list-#{id}", "data-state" => id }
+    - merge_requests.each do |merge_request|
+      = render 'merge_request', merge_request: merge_request
+    %li.light Drag and drop available

app/views/projects/milestones/show.html.haml

@@ -84,18 +84,12 @@
 
   .tab-pane#tab-merge-requests
     .row
-      .col-md-6
-        .panel.panel-default
-          .panel-heading Open
-          %ul.well-list
-            - @merge_requests.opened.each do |merge_request|
-              = render 'merge_request', merge_request: merge_request
-      .col-md-6
-        .panel.panel-default
-          .panel-heading Closed
-          %ul.well-list
-            - @merge_requests.closed.each do |merge_request|
-              = render 'merge_request', merge_request: merge_request
+      .col-md-4
+        = render('merge_requests', title: 'Work in progress (open and unassigned)', merge_requests: @merge_requests.opened.unassigned, id: 'unassigned')
+      .col-md-4
+        = render('merge_requests', title: 'Assigned (open and assigned)', merge_requests: @merge_requests.opened.assigned, id: 'ongoing')
+      .col-md-4
+        = render('merge_requests', title: 'Declined (closed)', merge_requests: @merge_requests.closed, id: 'closed')
 
   .tab-pane#tab-participants
     %ul.bordered-list