(refs #2)HTML parts sharing in issues and pull requests.

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

@@ -0,0 +1,148 @@
+@(issue: model.Issue,
+  comments: List[model.IssueComment],
+  collaborators: List[String],
+  milestones: List[(model.Milestone, Int, Int)],
+  hasWritePermission: Boolean,
+  repository: service.RepositoryService.RepositoryInfo)(implicit context: app.Context)
+@import context._
+@import view.helpers._
+<div class="issue-avatar-image">@avatar(issue.openedUserName, 48)</div>
+<div class="box issue-box">
+  <div class="box-content" style="padding: 0px;">
+    <div class="issue-header">
+      @if(hasWritePermission || loginAccount.map(_.userName == issue.openedUserName).getOrElse(false)){
+        <span class="pull-right"><a class="btn btn-small" href="#" id="edit">Edit</a></span>
+      }
+      <div class="small muted">
+        <a href="@url(issue.openedUserName)" class="username">@issue.openedUserName</a> opened this issue @datetime(issue.registeredDate)
+      </div>
+      <h4 id="issueTitle">@issue.title</h4>
+    </div>
+    <div class="issue-info">
+      <span id="label-assigned">
+        @issue.assignedUserName.map { userName =>
+          @avatar(userName, 20) <a href="@url(userName)" class="username strong">@userName</a> is assigned
+        }.getOrElse("No one is assigned")
+      </span>
+      @if(hasWritePermission){
+        @helper.html.dropdown() {
+          <li><a href="javascript:void(0);" class="assign" data-name=""><i class="icon-remove-circle"></i> Clear assignee</a></li>
+          @collaborators.map { collaborator =>
+            <li><a href="javascript:void(0);" class="assign" data-name="@collaborator"><i class="icon-white"></i>@avatar(collaborator, 20) @collaborator</a></li>
+          }
+        }
+      }
+      <div class="pull-right">
+        <span id="label-milestone">
+          @issue.milestoneId.map { milestoneId =>
+            @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 { 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
+                  <div class="small" style="padding-left: 20px;">
+                    @milestone.dueDate.map { dueDate =>
+                      @if(isPast(dueDate)){
+                        <img src="@assets/common/images/alert_mono.png"/>Due in @date(dueDate)
+                      } else {
+                        <span class="muted">Due in @date(dueDate)</span>
+                      }
+                    }.getOrElse {
+                      <span class="muted">No due date</span>
+                    }
+                  </div>
+                </a>
+              </li>
+            }
+          }
+        }
+      </div>
+    </div>
+    <div class="issue-content" id="issueContent">
+      @markdown(issue.content getOrElse "No description given.", repository, false, true)
+    </div>
+  </div>
+</div>
+<div class="issue-participants">
+  @defining((issue.openedUserName :: comments.map(_.commentedUserName)).distinct){ participants =>
+    <strong>@participants.size</strong> @plural(participants.size, "participant")
+    @participants.map { participant => <a href="@url(participant)">@avatar(participant, 20, tooltip = true)</a> }
+  }
+</div>
+<script>
+$(function(){
+  @if(issue.assignedUserName.isDefined){
+    $('a.assign[data-name=@issue.assignedUserName] i').attr('class', 'icon-ok');
+  }
+  @if(issue.milestoneId.isDefined){
+    $('a.milestone[data-id=@issue.milestoneId] i').attr('class', 'icon-ok');
+  }
+
+  $('#edit').click(function(){
+    $.get('@url(repository)/issues/_data/@issue.issueId',
+    {
+      dataType : 'html'
+    },
+    function(data){
+      $('#issueContent').empty().html(data);
+    });
+    return false;
+  });
+
+  $('a.assign').click(function(){
+    var $this = $(this);
+    var userName = $this.data('name');
+    $.post('@url(repository)/issues/@issue.issueId/assign',
+    {
+      assignedUserName: userName
+    },
+    function(){
+      $('a.assign i.icon-ok').attr('class', 'icon-white');
+      if(userName == ''){
+        $('#label-assigned').text('No one is assigned');
+      } else {
+        $('#label-assigned').empty()
+          .append($this.find('img.avatar').clone(false)).append(' ')
+          .append($('<a class="username strong">').attr('href', '@path/' + userName).text(userName))
+          .append(' is assigned');
+        $('a.assign[data-name=' + userName + '] i').attr('class', 'icon-ok');
+      }
+    });
+  });
+
+  $('a.milestone').click(function(){
+    var title = $(this).data('title');
+    var milestoneId = $(this).data('id');
+    $.post('@url(repository)/issues/@issue.issueId/milestone',
+    {
+      milestoneId: milestoneId
+    },
+    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');
+      }
+    });
+  });
+});
+</script>