From fa570525dbe35fb598b8a269198e1173da6d7ae3 Mon Sep 17 00:00:00 2001 From: Jacob Schatz Date: Tue, 23 Feb 2016 15:09:35 -0500 Subject: [PATCH 1/5] Adds small AJAX optimistic functionality to todos. Fixes #13656 A good first step and boring solution. --- app/assets/javascripts/dispatcher.js.coffee | 3 +- app/assets/javascripts/todos.js.coffee | 48 +++++++++++++++++++ app/assets/stylesheets/framework/flash.scss | 6 +++ app/controllers/dashboard/todos_controller.rb | 7 ++- app/views/dashboard/todos/_todo.html.haml | 2 +- app/views/dashboard/todos/index.html.haml | 6 ++- 6 files changed, 67 insertions(+), 5 deletions(-) create mode 100644 app/assets/javascripts/todos.js.coffee 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 = $('').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 From 8f8720209f1f325042cbe3f134797c85cc0c64c4 Mon Sep 17 00:00:00 2001 From: Jacob Schatz Date: Fri, 4 Mar 2016 09:15:48 -0500 Subject: [PATCH 2/5] Remove `Flash` from todos when finished --- app/assets/javascripts/todos.js.coffee | 1 - 1 file changed, 1 deletion(-) diff --git a/app/assets/javascripts/todos.js.coffee b/app/assets/javascripts/todos.js.coffee index b68c143b4bb..811652c8d8b 100644 --- a/app/assets/javascripts/todos.js.coffee +++ b/app/assets/javascripts/todos.js.coffee @@ -26,7 +26,6 @@ class @Todos return success: (data, textStatus, jqXHR) -> - new Flash(data.notice, 'success') _this.clearDone($this.closest('li')) return From 421215e3385860af42530895c22021c0704275e2 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Thu, 17 Mar 2016 12:54:02 +0000 Subject: [PATCH 3/5] Removed the flash success message Removes the group if empty --- app/assets/javascripts/todos.js.coffee | 52 +++++++------------ app/assets/stylesheets/framework/buttons.scss | 10 ++++ app/assets/stylesheets/framework/flash.scss | 6 --- app/controllers/dashboard/todos_controller.rb | 4 +- app/views/dashboard/todos/_todo.html.haml | 4 +- 5 files changed, 35 insertions(+), 41 deletions(-) diff --git a/app/assets/javascripts/todos.js.coffee b/app/assets/javascripts/todos.js.coffee index 811652c8d8b..951b786b1fd 100644 --- a/app/assets/javascripts/todos.js.coffee +++ b/app/assets/javascripts/todos.js.coffee @@ -1,47 +1,35 @@ class @Todos - _this = null; constructor: (@name) -> - _this = @ + @clearListeners() @initBtnListeners() - + + clearListeners: -> + $('.done-todo').off('click') + initBtnListeners: -> $('.done-todo').on('click', @doneClicked) - - doneClicked: (e) -> - $this = $(this) - doneURL = $this.attr('href') + + doneClicked: (e) => e.preventDefault() e.stopImmediatePropagation() - $spinner = $('').addClass('fa fa-spinner fa-spin') - $this.addClass("disabled") - $this.append($spinner) + + $this = $(e.currentTarget) + $this.disable() + $.ajax type: 'POST' - url: doneURL + url: $this.attr('href') 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) => + @clearDone $this.closest('li'), data - success: (data, textStatus, jqXHR) -> - _this.clearDone($this.closest('li')) - return - - clearDone: ($row) -> + clearDone: ($row, data) -> $ul = $row.closest('ul') $row.remove() + + $('.todos-pending .badge, .todos-pending-count').text data.count + $('.todos-done .badge').text data.done_count + 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 + $ul.parents('.panel').remove() 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; + } +} diff --git a/app/assets/stylesheets/framework/flash.scss b/app/assets/stylesheets/framework/flash.scss index 244d0e2f0c8..1bfd0213995 100644 --- a/app/assets/stylesheets/framework/flash.scss +++ b/app/assets/stylesheets/framework/flash.scss @@ -5,12 +5,6 @@ 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 54f718d0110..10120dfdf3b 100644 --- a/app/controllers/dashboard/todos_controller.rb +++ b/app/controllers/dashboard/todos_controller.rb @@ -1,5 +1,5 @@ class Dashboard::TodosController < Dashboard::ApplicationController - before_action :find_todos, only: [:index, :destroy_all] + before_action :find_todos, only: [:index, :destroy, :destroy_all] def index @todos = @todos.page(params[:page]).per(PER_PAGE) @@ -14,7 +14,7 @@ class Dashboard::TodosController < Dashboard::ApplicationController 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 } + render json: { count: @todos.size, done_count: current_user.todos.done.count } end end end diff --git a/app/views/dashboard/todos/_todo.html.haml b/app/views/dashboard/todos/_todo.html.haml index b7deb9da543..42f3cf4de02 100644 --- a/app/views/dashboard/todos/_todo.html.haml +++ b/app/views/dashboard/todos/_todo.html.haml @@ -16,7 +16,9 @@ - if todo.pending? .todo-actions.pull-right - = link_to 'Done', [:dashboard, todo], method: :delete, class: 'btn done-todo' + = link_to [:dashboard, todo], method: :delete, class: 'btn btn-loading done-todo' do + = icon('spinner spin') + Done .todo-body .todo-note From 41c107beccda574aefd3e5d992345087b2e0d848 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Thu, 17 Mar 2016 13:08:59 +0000 Subject: [PATCH 4/5] Mark all as done through AJAX --- app/assets/javascripts/todos.js.coffee | 31 ++++++++++++++++--- app/controllers/dashboard/todos_controller.rb | 4 +++ app/views/dashboard/todos/_todo.html.haml | 2 +- app/views/dashboard/todos/index.html.haml | 6 ++-- 4 files changed, 35 insertions(+), 8 deletions(-) diff --git a/app/assets/javascripts/todos.js.coffee b/app/assets/javascripts/todos.js.coffee index 951b786b1fd..b6b4bd90e6a 100644 --- a/app/assets/javascripts/todos.js.coffee +++ b/app/assets/javascripts/todos.js.coffee @@ -5,9 +5,11 @@ class @Todos 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() @@ -22,14 +24,33 @@ class @Todos dataType: 'json' data: '_method': 'delete' success: (data) => - @clearDone $this.closest('li'), data + @clearDone $this.closest('li') + @updateBadges data - clearDone: ($row, 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() - $('.todos-pending .badge, .todos-pending-count').text data.count - $('.todos-done .badge').text data.done_count - 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/controllers/dashboard/todos_controller.rb b/app/controllers/dashboard/todos_controller.rb index 10120dfdf3b..7857af9c5de 100644 --- a/app/controllers/dashboard/todos_controller.rb +++ b/app/controllers/dashboard/todos_controller.rb @@ -25,6 +25,10 @@ class Dashboard::TodosController < Dashboard::ApplicationController respond_to do |format| format.html { redirect_to dashboard_todos_path, notice: 'All todos were marked as done.' } format.js { render nothing: true } + format.json do + find_todos + render json: { count: @todos.size, done_count: current_user.todos.done.count } + end end end diff --git a/app/views/dashboard/todos/_todo.html.haml b/app/views/dashboard/todos/_todo.html.haml index 42f3cf4de02..4c848a50181 100644 --- a/app/views/dashboard/todos/_todo.html.haml +++ b/app/views/dashboard/todos/_todo.html.haml @@ -17,8 +17,8 @@ - if todo.pending? .todo-actions.pull-right = link_to [:dashboard, todo], method: :delete, class: 'btn btn-loading done-todo' do - = icon('spinner spin') Done + = icon('spinner spin') .todo-body .todo-note diff --git a/app/views/dashboard/todos/index.html.haml b/app/views/dashboard/todos/index.html.haml index b5b8fb4d14e..623381375a5 100644 --- a/app/views/dashboard/todos/index.html.haml +++ b/app/views/dashboard/todos/index.html.haml @@ -20,7 +20,9 @@ .nav-controls - if @todos.any?(&:pending?) - = link_to 'Mark all as done', destroy_all_dashboard_todos_path(todos_filter_params), class: 'btn', method: :delete + = link_to destroy_all_dashboard_todos_path(todos_filter_params), class: 'btn btn-loading js-todos-mark-all', method: :delete do + Mark all as done + = icon('spinner spin') .todos-filters .gray-content-block.second-block @@ -44,7 +46,7 @@ .prepend-top-default - if @todos.any? - @todos.group_by(&:project).each do |group| - .panel.panel-default.panel-small + .panel.panel-default.panel-small.js-todos-list - project = group[0] .panel-heading = link_to project.name_with_namespace, namespace_project_path(project.namespace, project) From ceaa6943919041c204ec86ebea0347374dffdd44 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Thu, 17 Mar 2016 15:10:45 +0000 Subject: [PATCH 5/5] Fixed failing tests --- features/steps/dashboard/todos.rb | 1 - 1 file changed, 1 deletion(-) diff --git a/features/steps/dashboard/todos.rb b/features/steps/dashboard/todos.rb index 9722a5a848c..963e4f21365 100644 --- a/features/steps/dashboard/todos.rb +++ b/features/steps/dashboard/todos.rb @@ -41,7 +41,6 @@ class Spinach::Features::DashboardTodos < Spinach::FeatureSteps click_link 'Done' end - expect(page).to have_content 'Todo was successfully marked as done.' expect(page).to have_content 'To do 3' expect(page).to have_content 'Done 1' should_not_see_todo "John Doe assigned you merge request !#{merge_request.iid}"