Implemented conflict side selection.

app/assets/javascripts/merge_conflict_resolver.js.coffee

@@ -4,10 +4,14 @@ class window.MergeConflictResolver extends Vue
 
   constructor: (options = {}) ->
 
-    options.el      = '#conflicts'
-    options.data    = @getInitialData()
-    options.created = -> @fetchData()
-    options.name    = 'MergeConflictResolver'
+    options.el       = '#conflicts'
+    options.data     = @getInitialData()
+    options.name     = 'MergeConflictResolver'
+    options.created  = -> @fetchData()
+    options.computed =
+      conflictsCount : -> @getConflictsCount()
+      resolvedCount  : -> @getResolvedCount()
+      allResolved    : -> @isAllResolved()
 
     super options
 
@@ -43,7 +47,7 @@ class window.MergeConflictResolver extends Vue
 
   handleSelected: (sectionId, selection) ->
 
-    console.log sectionId, selection
+    @resolutionData[sectionId] = selection
 
 
   decorateData: (data) ->
@@ -51,6 +55,8 @@ class window.MergeConflictResolver extends Vue
     headHeaderText   = 'HEAD//our changes'
     originHeaderText = 'origin//their changes'
 
+    @updateResolutionsData data
+
     for file in data.files
       file.parallelLines  = { left: [], right: [] }
       file.inlineLines    = []
@@ -61,10 +67,10 @@ class window.MergeConflictResolver extends Vue
         { conflict, lines, id } = section
 
         if conflict
-          file.parallelLines.left.push  { isHeader: yes, id, text: headHeaderText, cssClass: 'head' }
-          file.parallelLines.right.push { isHeader: yes, id, text: originHeaderText, cssClass: 'origin' }
+          file.parallelLines.left.push  { isHeader: yes, id, text: headHeaderText, cssClass: 'head', section: 'head' }
+          file.parallelLines.right.push { isHeader: yes, id, text: originHeaderText, cssClass: 'origin', section: 'origin' }
 
-          file.inlineLines.push { isHeader: yes, id, text: headHeaderText, type: 'old', cssClass: 'head' }
+          file.inlineLines.push { isHeader: yes, id, text: headHeaderText, type: 'old', cssClass: 'head', section: 'head' }
 
         for line in lines
           if line.type in ['new', 'old'] and currentLineType isnt line.type
@@ -90,18 +96,40 @@ class window.MergeConflictResolver extends Vue
             file.parallelLines.right.push { lineType: 'context', lineNumber: line.new_line, text: line.text }
 
         if conflict
-          file.inlineLines.push { isHeader: yes, id, type: 'new', text: originHeaderText, cssClass: 'origin' }
+          file.inlineLines.push { isHeader: yes, id, type: 'new', text: originHeaderText, cssClass: 'origin', section: 'origin' }
 
     return data
 
 
+  getConflictsCount: -> return Object.keys(@resolutionData).length
+
+
+  getResolvedCount: ->
+
+    count = 0
+    count++ for id, resolution of @resolutionData when resolution
+
+    return count
+
+
+  isAllResolved: -> return @resolvedCount is @conflictsCount
+
+
+  updateResolutionsData: (data) ->
+
+    for file in data.files
+      for section in file.sections when section.conflict
+        @$set "resolutionData.#{section.id}", no
+
+
   getInitialData: ->
 
     diffViewType = $.cookie 'diff_view'
 
     return {
-      isLoading     : yes
-      diffView      : diffViewType
-      conflictsData : {}
-      isParallel    : diffViewType is 'parallel'
+      isLoading      : yes
+      isParallel     : diffViewType is 'parallel'
+      diffView       : diffViewType
+      conflictsData  : {}
+      resolutionData : {}
     }

app/views/projects/merge_requests/show/_conflicts.html.haml

@@ -22,9 +22,8 @@
       into
       %strong {{conflictsData.target_branch}}
 
-
 .files-wrapper{ "v-if" => "!isLoading" }
-  .files{{"v-if" => "isParallel"}}
+  .files{"v-if" => "isParallel"}
     .diff-file.file-holder.conflict.unresolved.parallel-view{"v-for" => "file in conflictsData.files"}
       .file-title
         %i.fa.fa-ban
@@ -42,16 +41,16 @@
                 %td.diff-line-num.header
                 %td.line_content.header
                   %strong {{line.text}}
-                  %button.btn{"@click" => "handleSelected(line.id, line.lineType)"} Use this
+                  / FIXME: Don't use cssClass here
+                  %button.btn{"@click" => "handleSelected(line.id, line.cssClass)"} Use this
 
               %template{"v-if" => "!line.isHeader"}
                 %td.diff-line-num.old_line
                   {{line.lineNumber}}
                 %td.line_content
-                  {{line.text}}
-
+                  {{{line.text}}}
 
-  .files{{"v-if" => "!isParallel"}}
+  .files{"v-if" => "!isParallel"}
     .diff-file.file-holder.conflict.unresolved.inline-view{"v-for" => "file in conflictsData.files"}
       .file-title
         %i.fa.fa-ban
@@ -77,5 +76,22 @@
                 %td.diff-line-num.header
                 %td.diff-line-num.header
                 %td.line_content.header
-                  %strong {{line.text}}
-                  %button.btn{"@click" => "handleSelected(line.id, line.type)"} Use this
+                  %strong {{{line.text}}}
+                  / FIXME: Don't use cssClass here
+                  %button.btn{"@click" => "handleSelected(line.id, line.cssClass)"} Use this
+
+  .content-block.oneline-block.files-changed
+    %strong.resolved-count {{resolvedCount}}
+    of
+    %strong.total-count {{conflictsCount}}
+    conflicts have been resolved
+
+    .commit-message-container.form-group
+      .max-width-marker
+      %textarea.form-control.js-commit-message{"placeholder" => 'Your commit message', ":disabled" => "!allResolved"}
+
+    %button{type: 'button', class: 'btn btn-success js-submit-button', ":disabled" => "!allResolved"}
+      Commit conflict resolution
+
+    %button{type: 'button', class: 'btn btn-cancel'}
+      Cancel