Merge branch 'manual-todos-issuable-sidebar' into 'master'

Manually create todo for issuable

## What does this MR do?

Adds a button to the sidebar in issues & merge requests to allow users to manually create a todo item themselves.

## What are the relevant issue numbers?

Closes #15045 

## Screenshots (if relevant)

![Screen_Shot_2016-06-07_at_09.52.14](/uploads/00af70244c0589d19f241c3e85f3d63d/Screen_Shot_2016-06-07_at_09.52.14.png)

![Screen_Shot_2016-06-07_at_09.52.06](/uploads/e232b02208613a4a50cff4d1e6f119ff/Screen_Shot_2016-06-07_at_09.52.06.png)

![Screen_Shot_2016-06-07_at_09.51.14](/uploads/f1d36435d49ab882538ae2252bec8086/Screen_Shot_2016-06-07_at_09.51.14.png)

See merge request !4502

1 files changed, 49 insertions, 2 deletions

diff --git a/app/assets/javascripts/right_sidebar.js.coffee b/app/assets/javascripts/right_sidebar.js.coffee
index c9cb0f4bb32..8eb005b0a22 100644
--- a/app/assets/javascripts/right_sidebar.js.coffee
+++ b/app/assets/javascripts/right_sidebar.js.coffee
@@ -43,6 +43,55 @@ class @Sidebar
             $('.right-sidebar')
               .hasClass('right-sidebar-collapsed'), { path: '/' })
 
+    $(document)
+      .off 'click', '.js-issuable-todo'
+      .on 'click', '.js-issuable-todo', @toggleTodo
+
+  toggleTodo: (e) =>
+    $this = $(e.currentTarget)
+    $todoLoading = $('.js-issuable-todo-loading')
+    $btnText = $('.js-issuable-todo-text', $this)
+    ajaxType = if $this.attr('data-id') then 'PATCH' else 'POST'
+    ajaxUrlExtra = if $this.attr('data-id') then "/#{$this.attr('data-id')}" else ''
+
+    $.ajax(
+      url: "#{$this.data('url')}#{ajaxUrlExtra}"
+      type: ajaxType
+      dataType: 'json'
+      data:
+        issuable_id: $this.data('issuable')
+        issuable_type: $this.data('issuable-type')
+      beforeSend: =>
+        @beforeTodoSend($this, $todoLoading)
+    ).done (data) =>
+      @todoUpdateDone(data, $this, $btnText, $todoLoading)
+
+  beforeTodoSend: ($btn, $todoLoading) ->
+    $btn.disable()
+    $todoLoading.removeClass 'hidden'
+
+  todoUpdateDone: (data, $btn, $btnText, $todoLoading) ->
+    $todoPendingCount = $('.todos-pending-count')
+    $todoPendingCount.text data.count
+
+    $btn.enable()
+    $todoLoading.addClass 'hidden'
+
+    if data.count is 0
+      $todoPendingCount.addClass 'hidden'
+    else
+      $todoPendingCount.removeClass 'hidden'
+
+    if data.todo?
+      $btn
+        .attr 'aria-label', $btn.data('mark-text')
+        .attr 'data-id', data.todo.id
+      $btnText.text $btn.data('mark-text')
+    else
+      $btn
+        .attr 'aria-label', $btn.data('todo-text')
+        .removeAttr 'data-id'
+      $btnText.text $btn.data('todo-text')
 
   sidebarDropdownLoading: (e) ->
     $sidebarCollapsedIcon = $(@).closest('.block').find('.sidebar-collapsed-icon')
@@ -117,5 +166,3 @@ class @Sidebar
 
   getBlock: (name) ->
     @sidebar.find(".block.#{name}")
-
-