Improvements to simplify vue template.

app/assets/javascripts/merge_conflict_resolver.js.coffee

@@ -48,21 +48,23 @@ class window.MergeConflictResolver extends Vue
 
   decorateData: (data) ->
 
+    headHeaderText   = 'HEAD//our changes'
+    originHeaderText = 'origin//their changes'
+
     for file in data.files
-      file.parallelLines = { left: [], right: [] }
-      file.inlineLines   = []
-      currentLineType    = 'old'
+      file.parallelLines  = { left: [], right: [] }
+      file.inlineLines    = []
+      file.shortCommitSha = file.commit_sha.slice 0, 7
+      currentLineType     = 'old'
 
       for section in file.sections
         { conflict, lines, id } = section
 
         if conflict
-          header = { lineType: 'header', id }
-          file.parallelLines.left.push  header
-          file.parallelLines.right.push header
+          file.parallelLines.left.push  { isHeader: yes, id, text: headHeaderText, cssClass: 'head' }
+          file.parallelLines.right.push { isHeader: yes, id, text: originHeaderText, cssClass: 'origin' }
 
-          header.type = 'old'
-          file.inlineLines.push header
+          file.inlineLines.push { isHeader: yes, id, text: headHeaderText, type: 'old', cssClass: 'head' }
 
         for line in lines
           if line.type in ['new', 'old'] and currentLineType isnt line.type
@@ -71,14 +73,15 @@ class window.MergeConflictResolver extends Vue
             file.inlineLines.push { lineType: 'emptyLine', text: '<span> </span>' }
 
           line.conflict = conflict
+          line.cssClass = if line.type is 'old' then 'head' else if line.type is 'new' then 'origin' else ''
           file.inlineLines.push line
 
           if conflict
             if line.type is 'old'
-              line = { lineType: 'conflict', lineNumber: line.old_line, text: line.text }
+              line = { lineType: 'conflict', lineNumber: line.old_line, text: line.text, cssClass: 'head' }
               file.parallelLines.left.push  line
             else if line.type is 'new'
-              line = { lineType: 'conflict', lineNumber: line.new_line, text: line.text }
+              line = { lineType: 'conflict', lineNumber: line.new_line, text: line.text, cssClass: 'origin' }
               file.parallelLines.right.push line
             else
               console.log 'unhandled line type...', line
@@ -87,9 +90,8 @@ class window.MergeConflictResolver extends Vue
             file.parallelLines.right.push { lineType: 'context', lineNumber: line.new_line, text: line.text }
 
         if conflict
-          file.inlineLines.push { lineType: 'header', id, type: 'new' }
+          file.inlineLines.push { isHeader: yes, id, type: 'new', text: originHeaderText, cssClass: 'origin' }
 
-    console.log data
     return data
 
 

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

@@ -31,24 +31,24 @@
         %a
           %span {{file.new_path}}
         .file-actions
-          %a.btn.btn-sm View file @{{file.commit_sha.slice(0, 7)}}
+          %a.btn.btn-sm View file @{{file.shortCommitSha}}
 
       .diff-content.diff-wrap-lines
         .diff-wrap-lines.code.file-content.js-syntax-highlight.white
           %table{"v-for" => "(key, group) in file.parallelLines"}
-            %tr.line_holder.parallel{ |
-              "v-for" => "line in group", |
-              ":class" => "line.lineType != 'context' && (key == 'left' ? 'head' : 'origin')"}
+            %tr.line_holder.parallel{"v-for" => "line in group", ":class" => "line.cssClass"}
 
-              %td.diff-line-num.header{"v-if" => "line.lineType == 'header'"}
-              %td.line_content.header{"v-if" => "line.lineType == 'header'"}
-                %strong {{key == 'left' ? 'HEAD//our changes' : 'origin//their changes'}}
-                %button.btn{"@click" => "handleSelected(line.id, line.lineType)"} Use this
+              %template{"v-if" => "line.isHeader"}
+                %td.diff-line-num.header
+                %td.line_content.header
+                  %strong {{line.text}}
+                  %button.btn{"@click" => "handleSelected(line.id, line.lineType)"} Use this
 
-              %td.diff-line-num.old_line{"v-if" => "line.lineType != 'header'"}
-                {{line.lineNumber}}
-              %td.line_content{"v-if" => "line.lineType != 'header'"}
-                {{line.text}}
+              %template{"v-if" => "!line.isHeader"}
+                %td.diff-line-num.old_line
+                  {{line.lineNumber}}
+                %td.line_content
+                  {{line.text}}
 
 
   .files{{"v-if" => "!isParallel"}}
@@ -58,16 +58,14 @@
         %a
           %span {{file.new_path}}
         .file-actions
-          %a.btn.btn-sm View file @{{file.commit_sha.slice(0, 7)}}
+          %a.btn.btn-sm View file @{{file.shortCommitSha}}
 
       .diff-content.diff-wrap-lines
         .diff-wrap-lines.code.file-content.js-syntax-highlight.white
           %table
-            %tr.line_holder{ |
-              "v-for" => "line in file.inlineLines", |
-              ":class" => "line.type == 'old' ? 'head' : line.type == 'new' ? 'origin' : ''"}
+            %tr.line_holder{"v-for" => "line in file.inlineLines", ":class" => "line.cssClass"}
 
-              %template{"v-if" => "line.lineType != 'header'"}
+              %template{"v-if" => "!line.isHeader"}
                 %td.diff-line-num.old_line
                   %a {{line.old_line}}
                 %td.diff-line-num.new_line
@@ -75,9 +73,9 @@
                 %td.line_content
                   {{{line.text}}}
 
-              %template{"v-if" => "line.lineType == 'header'"}
+              %template{"v-if" => "line.isHeader"}
                 %td.diff-line-num.header
                 %td.diff-line-num.header
                 %td.line_content.header
-                  %strong {{line.type == 'old' ? 'HEAD//our changes' : 'origin//their changes'}}
+                  %strong {{line.text}}
                   %button.btn{"@click" => "handleSelected(line.id, line.type)"} Use this