Add reopened tab to milestone issues. Add ids and data to milestone issues to enable dragging

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

app/assets/stylesheets/main/mixins.scss

@@ -124,7 +124,7 @@
   margin-bottom: 10px;
 }
 
-@mixin str-truncated($max_width: "82%") {
+@mixin str-truncated($max_width: 82%) {
   display: inline-block;
   overflow: hidden;
   text-overflow: ellipsis;

app/assets/stylesheets/sections/milestone.scss

@@ -0,0 +1,3 @@
+.issues-sortable-list .str-truncated {
+  max-width: 70%;
+}

app/controllers/projects/issues_controller.rb

@@ -87,6 +87,11 @@ class Projects::IssuesController < Projects::ApplicationController
           render :edit
         end
       end
+      format.json do
+        render json: {
+          saved: @issue.valid?,
+        }
+      end
     end
   end
 

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

@@ -0,0 +1,9 @@
+%li{ 'data-iid' => issue.iid, 'data-url' => project_issue_path(@project, issue) }
+  %span.str-truncated
+    = link_to [@project, issue] do
+      %span.cgray ##{issue.iid}
+    = link_to_gfm issue.title, [@project, issue]
+  - if issue.assignee
+    .pull-right
+      = image_tag avatar_icon(issue.assignee.email, 16), class: "avatar s16"
+

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

@@ -1,11 +1,6 @@
 .panel.panel-default
   .panel-heading= title
-  %ul.well-list
+  %ul{ class: "well-list issues-sortable-list", id: "issues-list-#{id}", "data-state" => id }
     - issues.each do |issue|
-      %li
-        = link_to [@project, issue] do
-          %span.label{class: issue.closed? ? 'label-danger' : 'label-info'} ##{issue.iid}
-        = link_to_gfm truncate(issue.title, length: 40), [@project, issue]
-        - if issue.assignee
-          .pull-right
-            = image_tag avatar_icon(issue.assignee.email, 16), class: "avatar s16"
+      = render 'issue', issue: issue
+    %li.light Drag and drop available

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

@@ -35,6 +35,12 @@
   %h4.title
     = gfm escape_once(@milestone.title)
 
+  - if @milestone.description.present?
+    .description
+      .wiki
+        = preserve do
+          = markdown @milestone.description
+
   .context
     %p
       Progress:
@@ -45,11 +51,6 @@
     .progress.progress-info
       .progress-bar{style: "width: #{@milestone.percent_complete}%;"}
 
-  - if @milestone.description.present?
-    .description
-      .wiki
-        = preserve do
-          = markdown @milestone.description
 
 %ul.nav.nav-tabs
   %li.active
@@ -74,12 +75,14 @@
 .tab-content
   .tab-pane.active#tab-issues
     .row
-      .col-md-4
-        = render('issues', title: 'Unstarted Issues (open and unassigned)', issues: @issues.opened.unassigned)
-      .col-md-4
-        = render('issues', title: 'Ongoing Issues (open and assigned)', issues: @issues.opened.assigned)
-      .col-md-4
-        = render('issues', title: 'Completed Issues (closed)', issues: @issues.closed)
+      .col-md-3
+        = render('issues', title: 'Unstarted Issues (open and unassigned)', issues: @issues.only_opened.unassigned, id: 'unassigned')
+      .col-md-3
+        = render('issues', title: 'Ongoing Issues (open and assigned)', issues: @issues.only_opened.assigned, id: 'ongoing')
+      .col-md-3
+        = render('issues', title: 'Completed Issues (closed)', issues: @issues.closed, id: 'closed')
+      .col-md-3
+        = render('issues', title: 'Reopened Issues (reopened)', issues: @issues.only_reopened, id: 'reopened')
 
   .tab-pane#tab-merge-requests
     .row