Adds small AJAX optimistic functionality to todos.

Fixes #13656
A good first step and boring solution.

6 files changed, 67 insertions, 5 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..b68c143b4bb
--- /dev/null
+++ b/app/assets/javascripts/todos.js.coffee
@@ -0,0 +1,48 @@
+class @Todos
+  _this = null;
+  constructor: (@name) ->
+    _this = @
+    @initBtnListeners()
+    
+  initBtnListeners: ->
+    $('.done-todo').on('click', @doneClicked)
+    
+  doneClicked: (e) ->
+    $this = $(this)
+    doneURL = $this.attr('href')
+    e.preventDefault()
+    e.stopImmediatePropagation()
+    $spinner = $('<i></i>').addClass('fa fa-spinner fa-spin')
+    $this.addClass("disabled")
+    $this.append($spinner)
+    $.ajax
+      type: 'POST'
+      url: doneURL
+      dataType: 'json'
+      data: '_method': 'delete'
+      error: (data, textStatus, jqXHR) ->
+        new Flash('Unable to update your todos.', 'alert')
+        _this.clearDone($this.closest('li'))
+        return
+
+      success: (data, textStatus, jqXHR) ->
+        new Flash(data.notice, 'success')
+        _this.clearDone($this.closest('li'))
+        return
+
+  clearDone: ($row) ->
+    $ul = $row.closest('ul')
+    $row.remove()
+    if not $ul.find('li').length
+      Turbolinks.visit(location.href)
+    else
+      $pendingBadge = $('.todos-pending .badge')
+      $pendingBadge.text parseInt($pendingBadge.text()) - 1
+
+      $doneBadge = $('.todos-done .badge')
+      $doneBadge.text parseInt($doneBadge.text()) + 1
+
+      $mainTodosPendingBadge = $('.todos-pending-count')
+      $mainTodosPendingBadge.text parseInt($mainTodosPendingBadge.text()) - 1
+    return
+    
\ No newline at end of file
diff --git a/app/assets/stylesheets/framework/flash.scss b/app/assets/stylesheets/framework/flash.scss
index 1bfd0213995..244d0e2f0c8 100644
--- a/app/assets/stylesheets/framework/flash.scss
+++ b/app/assets/stylesheets/framework/flash.scss
@@ -5,6 +5,12 @@
   width: 100%;
   z-index: 100;
 
+  .flash-success {
+    @extend .alert;
+    @extend .alert-success;
+    margin: 0;
+  }
+
   .flash-notice {
     @extend .alert;
     @extend .alert-info;
diff --git a/app/controllers/dashboard/todos_controller.rb b/app/controllers/dashboard/todos_controller.rb
index 43cf8fa71af..54f718d0110 100644
--- a/app/controllers/dashboard/todos_controller.rb
+++ b/app/controllers/dashboard/todos_controller.rb
@@ -8,9 +8,14 @@ class Dashboard::TodosController < Dashboard::ApplicationController
   def destroy
     todo.done!
 
+    todo_notice = 'Todo was successfully marked as done.'
+
     respond_to do |format|
-      format.html { redirect_to dashboard_todos_path, notice: 'Todo was successfully marked as done.' }
+      format.html { redirect_to dashboard_todos_path, notice: todo_notice }
       format.js { render nothing: true }
+      format.json do
+        render json: { status: 'OK', notice: todo_notice }
+      end
     end
   end
 
diff --git a/app/views/dashboard/todos/_todo.html.haml b/app/views/dashboard/todos/_todo.html.haml
index 45cfe3da188..b7deb9da543 100644
--- a/app/views/dashboard/todos/_todo.html.haml
+++ b/app/views/dashboard/todos/_todo.html.haml
@@ -16,7 +16,7 @@
 
     - if todo.pending?
       .todo-actions.pull-right
-        = link_to 'Done', [:dashboard, todo], method: :delete, class: 'btn'
+        = link_to 'Done', [:dashboard, todo], method: :delete, class: 'btn done-todo'
 
     .todo-body
       .todo-note
diff --git a/app/views/dashboard/todos/index.html.haml b/app/views/dashboard/todos/index.html.haml
index 946d7df3933..b5b8fb4d14e 100644
--- a/app/views/dashboard/todos/index.html.haml
+++ b/app/views/dashboard/todos/index.html.haml
@@ -3,13 +3,15 @@
 
 .top-area
   %ul.nav-links
-    %li{class: ('active' if params[:state].blank? || params[:state] == 'pending')}
+    - todo_pending_active = ('active' if params[:state].blank? || params[:state] == 'pending')
+    %li{class: "todos-pending #{todo_pending_active}"}
       = link_to todos_filter_path(state: 'pending') do
         %span
           To do
         %span{class: 'badge'}
           = todos_pending_count
-    %li{class: ('active' if params[:state] == 'done')}
+    - todo_done_active = ('active' if params[:state] == 'done')
+    %li{class: "todos-done #{todo_done_active}"}
       = link_to todos_filter_path(state: 'done') do
         %span
           Done