open and close issue via ajax request. With tests

app/assets/javascripts/issue.js.coffee

@@ -8,11 +8,41 @@ class @Issue
 
     if $("a.btn-close").length
       @initTaskList()
+      @initIssueBtnEventListeners()
 
   initTaskList: ->
     $('.detail-page-description .js-task-list-container').taskList('enable')
     $(document).on 'tasklist:changed', '.detail-page-description .js-task-list-container', @updateTaskList
 
+  initIssueBtnEventListeners: ->
+    $("a.btn-close, a.btn-reopen").on "click", (e) ->
+      e.preventDefault()
+      e.stopImmediatePropagation()
+      $this = $(this)
+      isClose = $this.hasClass('btn-close')
+      $this.prop("disabled", true)
+      url = $this.data('url')
+      $.ajax
+        type: 'PUT'
+        url: url,
+        error: (jqXHR, textStatus, errorThrown) ->
+          issueStatus = if isClose then 'close' else 'open'
+          console.log("Cannot #{issueStatus} this issue, at this time.")
+        success: (data, textStatus, jqXHR) ->
+          if data.saved
+            $this.addClass('hidden')
+            if isClose
+              $('a.btn-reopen').removeClass('hidden')
+              $('div.issue-box-closed').removeClass('hidden')
+              $('div.issue-box-open').addClass('hidden')
+            else
+              $('a.btn-close').removeClass('hidden')
+              $('div.issue-box-closed').addClass('hidden')
+              $('div.issue-box-open').removeClass('hidden')
+          else
+            console.log("Did not work")
+          $this.prop('disabled', false)
+
   disableTaskList: ->
     $('.detail-page-description .js-task-list-container').taskList('disable')
     $(document).off 'tasklist:changed', '.detail-page-description .js-task-list-container'

app/helpers/issues_helper.rb

@@ -69,6 +69,10 @@ module IssuesHelper
     end
   end
 
+  def issue_button_visibility(issue, closed)    
+    return 'hidden' if issue.closed? == closed
+  end
+
   def issue_to_atom(xml, issue)
     xml.entry do
       xml.id      namespace_project_issue_url(issue.project.namespace,

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

@@ -3,11 +3,8 @@
 
 .issue
   .detail-page-header
-    .status-box{ class: status_box_class(@issue) }
-      - if @issue.closed?
-        Closed
-      - else
-        Open
+    .status-box{ class: "status-box-closed #{issue_button_visibility(@issue, false)}"} Closed
+    .status-box{ class: "status-box-open #{issue_button_visibility(@issue, true)}"} Open
     %span.identifier
       Issue ##{@issue.iid}
     %span.creator
@@ -27,10 +24,8 @@
           = icon('plus')
           New Issue
       - if can?(current_user, :update_issue, @issue)
-        - if @issue.closed?
-          = link_to 'Reopen', issue_path(@issue, issue: {state_event: :reopen}, status_only: true), method: :put, class: 'btn btn-grouped btn-reopen'
-        - else
-          = link_to 'Close', issue_path(@issue, issue: {state_event: :close}, status_only: true), method: :put, class: 'btn btn-grouped btn-close', title: 'Close Issue'
+        = link_to 'Reopen', '#', data: {no_turbolink: true, url: issue_path(@issue, issue: {state_event: :reopen}, status_only: true, format: 'json')}, class: "btn btn-grouped btn-reopen #{issue_button_visibility(@issue, false)}", title: 'Reopen Issue'
+        = link_to 'Close', '#', data: {no_turbolink: true, url: issue_path(@issue, issue: {state_event: :close}, status_only: true, format: 'json')}, class: "btn btn-grouped btn-close #{issue_button_visibility(@issue, true)}", title: 'Close Issue'
 
         = link_to edit_namespace_project_issue_path(@project.namespace, @project, @issue), class: 'btn btn-grouped issuable-edit' do
           = icon('pencil-square-o')

spec/javascripts/fixtures/issues_show.html.haml

-%a.btn-close
+.issue-box.issue-box-open Open
+.issue-box.issue-box-closed.hidden Closed
+%a.btn-close{"data-url" => "http://gitlab/issues/6/close"} Close
+%a.btn-reopen.hidden{"data-url" => "http://gitlab/issues/6/reopen"} Reopen
 
 .detail-page-description
   .description.js-task-list-container

spec/javascripts/issue_spec.js.coffee

@@ -20,3 +20,39 @@ describe 'Issue', ->
         expect(req.data.issue.description).not.toBe(null)
 
       $('.js-task-list-field').trigger('tasklist:changed')
+describe 'reopen/close issue', ->
+  fixture.preload('issues_show.html')
+  beforeEach ->
+    fixture.load('issues_show.html')
+    @issue = new Issue()
+  it 'closes an issue', ->
+    $.ajax = (obj) ->
+      expect(obj.type).toBe('PUT')
+      expect(obj.url).toBe('http://gitlab/issues/6/close')
+      obj.success saved: true
+    $btnClose = $('a.btn-close')
+    $btnReopen = $('a.btn-reopen')
+    expect($btnReopen.hasClass('hidden')).toBe(true)
+    expect($btnClose.text()).toBe('Close')
+    expect(typeof $btnClose.prop('disabled')).toBe('undefined')
+    $btnClose.trigger('click')
+    expect($btnClose.hasClass('hidden')).toBe(true)
+    expect($btnReopen.hasClass('hidden')).toBe(false)
+    expect($btnClose.prop('disabled')).toBe(false)
+    expect($('div.issue-box-open').hasClass('hidden')).toBe(true)
+    expect($('div.issue-box-closed').hasClass('hidden')).toBe(false)
+  it 'reopens an issue', ->
+    $.ajax = (obj) ->
+      expect(obj.type).toBe('PUT')
+      expect(obj.url).toBe('http://gitlab/issues/6/reopen')
+      obj.success saved: true
+    $btnClose = $('a.btn-close')
+    $btnReopen = $('a.btn-reopen')
+    expect(typeof $btnReopen.prop('disabled')).toBe('undefined')
+    expect($btnReopen.text()).toBe('Reopen')
+    $btnReopen.trigger('click')
+    expect($btnReopen.hasClass('hidden')).toBe(true)
+    expect($btnClose.hasClass('hidden')).toBe(false)
+    expect($btnReopen.prop('disabled')).toBe(false)
+    expect($('div.issue-box-open').hasClass('hidden')).toBe(false)
+    expect($('div.issue-box-closed').hasClass('hidden')).toBe(true)
\ No newline at end of file