Merge branch 'optimistic-todos' into 'master'

Adds small AJAX optimistic functionality to todos.

Fixes #13656 <br/>
A good first step and boring solution. <br/>
Will make ajax call to remove each issue.  <br/>
If issue is last in group of issues will refresh page.  <br/>
If issues remain in group will remove row with JS.  <br/>
Adds loading spinner to button and disables. <br/>

![todos-optimistic](/uploads/c6aec4a688e5125d4df55a2a3a55d4d7/todos-optimistic.gif) <br/>

cc @dzaporozhets @JobV @dbalexandre 

See merge request !2946

3 files changed, 68 insertions, 1 deletions

diff --git a/app/assets/javascripts/dispatcher.js.coffee b/app/assets/javascripts/dispatcher.js.coffee
index 1be86e3b820..f5e1ca9860d 100644
--- a/app/assets/javascripts/dispatcher.js.coffee
+++ b/app/assets/javascripts/dispatcher.js.coffee
@@ -14,7 +14,6 @@ class Dispatcher
 
     path = page.split(':')
     shortcut_handler = null
-
     switch page
       when 'projects:issues:index'
         Issues.init()
@@ -25,6 +24,8 @@ class Dispatcher
         new ZenMode()
       when 'projects:milestones:show', 'groups:milestones:show', 'dashboard:milestones:show'
         new Milestone()
+      when 'dashboard:todos:index'
+        new Todos()
       when 'projects:milestones:new', 'projects:milestones:edit'
         new ZenMode()
         new DropzoneInput($('.milestone-form'))
diff --git a/app/assets/javascripts/todos.js.coffee b/app/assets/javascripts/todos.js.coffee
new file mode 100644
index 00000000000..b6b4bd90e6a
--- /dev/null
+++ b/app/assets/javascripts/todos.js.coffee
@@ -0,0 +1,56 @@
+class @Todos
+  constructor: (@name) ->
+    @clearListeners()
+    @initBtnListeners()
+
+  clearListeners: ->
+    $('.done-todo').off('click')
+    $('.js-todos-mark-all').off('click')
+
+  initBtnListeners: ->
+    $('.done-todo').on('click', @doneClicked)
+    $('.js-todos-mark-all').on('click', @allDoneClicked)
+
+  doneClicked: (e) =>
+    e.preventDefault()
+    e.stopImmediatePropagation()
+
+    $this = $(e.currentTarget)
+    $this.disable()
+
+    $.ajax
+      type: 'POST'
+      url: $this.attr('href')
+      dataType: 'json'
+      data: '_method': 'delete'
+      success: (data) =>
+        @clearDone $this.closest('li')
+        @updateBadges data
+
+  allDoneClicked: (e) =>
+    e.preventDefault()
+    e.stopImmediatePropagation()
+
+    $this = $(e.currentTarget)
+    $this.disable()
+
+    $.ajax
+      type: 'POST'
+      url: $this.attr('href')
+      dataType: 'json'
+      data: '_method': 'delete'
+      success: (data) =>
+        $this.remove()
+        $('.js-todos-list').remove()
+        @updateBadges data
+
+  clearDone: ($row) ->
+    $ul = $row.closest('ul')
+    $row.remove()
+
+    if not $ul.find('li').length
+      $ul.parents('.panel').remove()
+
+  updateBadges: (data) ->
+    $('.todos-pending .badge, .todos-pending-count').text data.count
+    $('.todos-done .badge').text data.done_count
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index fa115a4bf56..657c5f033c7 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -208,3 +208,13 @@
     background-color: #e4e7ed !important;
   }
 }
+
+.btn-loading {
+  &:not(.disabled) .fa {
+    display: none;
+  }
+
+  .fa {
+    margin-right: 5px;
+  }
+}