Posts to rails to update note eventually

app/assets/javascripts/line_comments/application.js.coffee

 #= require vue
 #= require_directory ./stores
+#= require_directory ./services
 #= require_directory ./components
 
 $ =>

app/assets/javascripts/line_comments/components/resolve_all.js.coffee

 @ResolveAll = Vue.extend
   data: ->
-    { comments: CommentsStore.state }
+    comments: CommentsStore.state
+    loading: false
   computed:
     resolved: ->
       resolvedCount = 0
@@ -10,8 +11,18 @@
     commentsCount: ->
       Object.keys(this.comments).length
     buttonText: ->
-      if this.resolved is this.commentsCount then 'Un-resolve all' else 'Resolve all'
+      if this.allResolved then 'Un-resolve all' else 'Resolve all'
+    allResolved: ->
+      this.resolved is this.commentsCount
   methods:
     updateAll: ->
-      resolveAll = !(this.resolved is this.commentsCount)
-      CommentsStore.updateAll(resolveAll)
+      ids = CommentsStore.getAllForState(this.allResolved)
+      this.$set('loading', true)
+
+      promise = if this.allResolved then ResolveService.resolveAll(ids) else ResolveService.resolveAll(ids)
+
+      promise
+        .done =>
+          CommentsStore.updateAll(!this.allResolved)
+        .always =>
+          this.$set('loading', false)

app/assets/javascripts/line_comments/components/resolve_btn.js.coffee

@@ -2,22 +2,32 @@
   props:
     noteId: Number
     resolved: Boolean
-  data: -> comments: CommentsStore.state
+    endpoint: String
+  data: ->
+    comments: CommentsStore.state
+    loading: false
   computed:
     buttonText: ->
       if this.comments[this.noteId] then "Mark as un-resolved" else "Mark as resolved"
     isResolved: -> this.comments[this.noteId]
   methods:
     updateTooltip: ->
-      $(this.$el)
+      $(this.$els.button)
         .tooltip('hide')
         .tooltip('fixTitle')
     resolve: ->
-      CommentsStore.update(this.noteId, !this.comments[this.noteId])
+      this.$set('loading', true)
+      ResolveService
+        .resolve(this.endpoint, !this.isResolved)
+        .done =>
+          this.$set('loading', false)
+          CommentsStore.update(this.noteId, !this.isResolved)
 
           this.$nextTick this.updateTooltip
+        .always =>
+          this.$set('loading', false)
   compiled: ->
-    $(this.$el).tooltip()
+    $(this.$els.button).tooltip()
   destroyed: ->
     CommentsStore.delete(this.noteId)
   created: ->

app/assets/javascripts/line_comments/services/resolve.js.coffee

+@ResolveService =
+  resolve: (endpoint, resolve) ->
+    $.ajax
+      data:
+        resolved: resolve
+      type: 'post'
+      url: endpoint
+  resolveAll: (ids) ->
+    $.ajax
+      data:
+        id: ids
+      type: 'get'
+      url: '/'
+  unResolveAll: (ids) ->
+    $.ajax
+      data:
+        id: ids
+      type: 'get'
+      url: '/'

app/assets/javascripts/line_comments/stores/comments.js.coffee

@@ -9,3 +9,8 @@
   updateAll: (state) ->
     for id,resolved of this.state
       this.update(id, state) if resolved isnt state
+  getAllForState: (state) ->
+    ids = []
+    for id,resolved of this.state
+      ids.push(id) if resolved is state
+    ids

app/assets/stylesheets/pages/notes.scss

@@ -387,7 +387,7 @@ ul.notes {
 .line-resolve-all {
   padding: 10px;
   border: 1px solid $border-color;
-  border-radius: 2px;
+  border-radius: $border-radius-default;
 
   .btn {
     margin-right: 10px;

app/controllers/projects/notes_controller.rb

@@ -66,6 +66,11 @@ class Projects::NotesController < Projects::ApplicationController
     end
   end
 
+  def resolve
+    sleep 2
+    render nothing: true, status: 200
+  end
+
   private
 
   def note

app/views/projects/merge_requests/_show.html.haml

@@ -47,7 +47,8 @@
     #resolve-all-app{ "v-cloak" => true }
       %resolve-all{ "inline-template" => true }
         .line-resolve-all{ "v-show" => "commentsCount > 0" }
-          %button.btn.btn-gray{ type: "button", "aria-label" => "Resolve all", "@click" => "updateAll" }
+          %button.btn.btn-gray{ type: "button", "aria-label" => "Resolve all", "@click" => "updateAll", ":disabled" => "loading" }
+            = icon("spinner spin", "v-show" => "loading")
             {{ buttonText }}
           %span.line-resolve-text
             {{ resolved }}/{{ commentsCount }} comments resolved

app/views/projects/notes/_note.html.haml

@@ -21,8 +21,10 @@
           - if access and not note.system
             %span.note-role.hidden-xs= access
           - unless note.system
-            %resolve-btn{ ":note-id" => note.id, ":resolved" => "false", "inline-template" => true, "v-ref:note_#{note.id}" => true }
-              %button.note-action-button.line-resolve-btn{ type: "button", ":class" => "{ 'is-active': isResolved }", ":aria-label" => "buttonText", "@click" => "resolve", ":title" => "buttonText" }
+            %resolve-btn{ ":endpoint" => "'#{resolve_namespace_project_note_path(note.project.namespace, note.project, note)}'", ":note-id" => note.id, ":resolved" => "false", "inline-template" => true, "v-ref:note_#{note.id}" => true }
+              .note-action-button
+                = icon("spin spinner", "v-show" => "loading")
+                %button.line-resolve-btn{ type: "button", ":class" => "{ 'is-active': isResolved }", ":aria-label" => "buttonText", "@click" => "resolve", ":title" => "buttonText", "v-show" => "!loading", "v-el:button" => true }
                   = icon("check")
           - if current_user and not note.system
             = link_to '#', title: 'Award Emoji', class: 'note-action-button note-emoji-button js-add-award js-note-emoji', data: { position: 'right' } do

config/routes.rb

@@ -828,6 +828,7 @@ Rails.application.routes.draw do
           member do
             post :toggle_award_emoji
             delete :delete_attachment
+            post :resolve
           end
         end