(refs #44)Add milestone progress bar to the issue detail page.

src/main/scala/app/IssuesController.scala

@@ -67,7 +67,7 @@ trait IssuesControllerBase extends ControllerBase {
           getComments(owner, name, issueId.toInt),
           getIssueLabels(owner, name, issueId.toInt),
           (getCollaborators(owner, name) :+ owner).sorted,
-          getMilestones(owner, name),
+          getMilestonesWithIssueCount(owner, name),
           getLabels(owner, name),
           hasWritePermission(owner, name, context.loginAccount),
           repository)
@@ -207,7 +207,12 @@ trait IssuesControllerBase extends ControllerBase {
 
   ajaxPost("/:owner/:repository/issues/:id/milestone")(collaboratorsOnly { repository =>
     updateMilestoneId(repository.owner, repository.name, params("id").toInt, milestoneId("milestoneId"))
-    Ok("updated")
+    milestoneId("milestoneId").map { milestoneId =>
+      getMilestonesWithIssueCount(repository.owner, repository.name)
+          .find(_._1.milestoneId == milestoneId).map { case (_, openCount, closeCount) =>
+        issues.milestones.html.progress(openCount + closeCount, closeCount, false)
+      } getOrElse NotFound
+    } getOrElse Ok()
   })
 
   post("/:owner/:repository/issues/batchedit/state")(collaboratorsOnly { repository =>

src/main/twirl/issues/issue.scala.html

@@ -2,7 +2,7 @@
   comments: List[model.IssueComment],
   issueLabels: List[model.Label],
   collaborators: List[String],
-  milestones: List[model.Milestone],
+  milestones: List[(model.Milestone, Int, Int)],
   labels: List[model.Label],
   hasWritePermission: Boolean,
   repository: service.RepositoryService.RepositoryInfo)(implicit context: app.Context)
@@ -46,15 +46,22 @@
             <div class="pull-right">
               <span id="label-milestone">
                 @issue.milestoneId.map { milestoneId =>
-                  @milestones.find(_.milestoneId == milestoneId).map { milestone =>
+                  @milestones.collect { case (milestone, _, _) if(milestone.milestoneId == milestoneId) =>
                     Milestone: <strong>@milestone.title</strong>
                   }
                 }.getOrElse("No milestone")
               </span>
+              <div id="milestone-progress-area">
+                @issue.milestoneId.map { milestoneId =>
+                  @milestones.collect { case (milestone, openCount, closeCount) if(milestone.milestoneId == milestoneId) =>
+                    @issues.milestones.html.progress(openCount + closeCount, closeCount, false)
+                  }
+                }
+              </div>
               @if(hasWritePermission){
                 @helper.html.dropdown() {
                   <li><a href="javascript:void(0);" class="milestone" data-id=""><i class="icon-remove-circle"></i> No milestone</a></li>
-                  @milestones.map { milestone =>
+                  @milestones.map { case (milestone, _, _) =>
                     <li>
                       <a href="javascript:void(0);" class="milestone" data-id="@milestone.milestoneId" data-title="@milestone.title">
                         <i class="icon-white"></i> @milestone.title
@@ -221,12 +228,15 @@ $(function(){
     {
       milestoneId: milestoneId
     },
-    function(){
+    function(data){
+      console.log(data);
       $('a.milestone i.icon-ok').attr('class', 'icon-white');
       if(milestoneId == ''){
         $('#label-milestone').text('No milestone');
+        $('#milestone-progress-area').empty();
       } else {
         $('#label-milestone').html($('<span>').append('Milestone: ').append($('<strong>').text(title)));
+        $('#milestone-progress-area').html(data);
         $('a.milestone[data-id=' + milestoneId + '] i').attr('class', 'icon-ok');
       }
     });

src/main/twirl/issues/list.scala.html

@@ -86,10 +86,8 @@
       }
       @if(condition.milestoneId.isDefined && condition.milestoneId.get.isDefined){
         @milestones.find(_.milestoneId == condition.milestoneId.get.get).map { milestone =>
-          <div class="milestone-progress" style="margin-top: 8px;">
+          <div style="margin-top: 4px;">
-            @if(closedCount > 0){
+            @_root_.issues.milestones.html.progress(openCount + closedCount, closedCount, false)
-              <span class="milestone-progress" style="width: @((closedCount.toDouble / (openCount + closedCount).toDouble * 100).toInt)%;"></span>
-            }
           </div>
           <span class="muted small">@openCount open issues</span>
           @if(milestone.closedDate.isDefined){

src/main/twirl/issues/milestones/list.scala.html

@@ -69,18 +69,7 @@
                     </div>
                     <span class="muted">@closedCount closed - @openCount open</span>
                   </div>
-                  <div class="milestone-progress">
+                  @progress(openCount + closedCount, closedCount, true)
-                    @if(closedCount > 0){
-                      <span class="milestone-progress" style="width: @((closedCount.toDouble / (openCount + closedCount).toDouble * 100).toInt)%;"></span>
-                    }
-                    <span class="milestone-percentage">
-                    @if(closedCount == 0){
-                      0%
-                    } else {
-                      @((closedCount.toDouble / (openCount + closedCount).toDouble * 100).toInt)%
-                    }
-                    </span>
-                  </div>
                 </div>
               </div>
               @if(milestone.description.isDefined){

src/main/twirl/issues/milestones/progress.scala.html

@@ -0,0 +1,15 @@
+@(total: Int, progress: Int, showPercentage: Boolean)
+<div class="milestone-progress">
+  @if(progress > 0){
+    <span class="milestone-progress" style="width: @((progress.toDouble / total.toDouble * 100).toInt)%;"></span>
+  }
+  @if(showPercentage){
+    <span class="milestone-percentage">
+      @if(progress == 0){
+        0%
+      } else {
+        @((progress.toDouble / total.toDouble * 100).toInt)%
+      }
+    </span>
+  }
+</div>

src/main/webapp/assets/common/css/gitbucket.css

@@ -478,6 +478,15 @@ div.milestone-menu a.delete {
   color: #b00;
 }
 
+div#milestone-progress-area {
+  display: inline-block;
+}
+
+div#milestone-progress-area div.milestone-progress {
+  width: 150px;
+  margin-bottom: -6px;
+}
+
 div.milestone-progress {
   position: relative;
   height: 20px;