extract difference viewer to a component

+ add synchronized scrolling - Ticket: SUITEDEV-26331
emartech · Mar 8, 2021 · 01d6beb · 01d6beb
1 parent bde3743
commit 01d6beb
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 33 deletions.
diff --git a/src/renderer/components/save-confirmation-dialog/difference/difference.html b/src/renderer/components/save-confirmation-dialog/difference/difference.html
@@ -0,0 +1 @@
+<div v-html="content"></div>
diff --git a/src/renderer/components/save-confirmation-dialog/difference/difference.js b/src/renderer/components/save-confirmation-dialog/difference/difference.js
@@ -0,0 +1,55 @@
+import { isNil } from 'lodash';
+import { createPatch } from 'diff';
+import * as Diff2Html from 'diff2html';
+
+export default {
+  name: 'difference',
+  template: require('./difference.html'),
+  props: {
+    label: String,
+    originalValue: String,
+    currentValue: String
+  },
+  computed: {
+    content() {
+      const changeType = !isNil(this.originalValue) && !isNil(this.currentValue)
+        ? 'CHANGED'
+        : isNil(this.originalValue)
+          ? 'ADDED'
+          : 'REMOVED';
+
+      const patch = createPatch(this.label, this.originalValue || '', this.currentValue || '');
+      const diffJson = Diff2Html.parse(patch);
+      return Diff2Html.html(diffJson, {
+        drawFileList: false,
+        matching: 'lines',
+        outputFormat: 'side-by-side',
+        rawTemplates: {
+          'generic-file-path':
+            `<span>${this.label}</span><span class="e-padding-left-l text-color-gray-400">${changeType}</span>`,
+          'generic-empty-diff':
+            `<tr>
+              <td class="{{CSSLineClass.INFO}}">
+                <div class="{{contentClass}} {{CSSLineClass.INFO}}">
+                  Value is empty
+                </div>
+              </td>
+            </tr>`
+        }
+      });
+    }
+  },
+  methods: {
+    enableSynchronizedScrolling() {
+      const [originalSide, currentSide] = this.$el.querySelectorAll('.d2h-file-side-diff');
+      originalSide.addEventListener('scroll', () => currentSide.scrollLeft = originalSide.scrollLeft);
+      currentSide.addEventListener('scroll', () => originalSide.scrollLeft = currentSide.scrollLeft);
+    }
+  },
+  mounted() {
+    this.enableSynchronizedScrolling();
+  },
+  updated() {
+    this.enableSynchronizedScrolling();
+  }
+};
diff --git a/src/renderer/components/save-confirmation-dialog/save-confirmation-dialog.html b/src/renderer/components/save-confirmation-dialog/save-confirmation-dialog.html
@@ -5,11 +5,13 @@
   width="90%"
 >
   <div style="position: relative">
-    <div
+    <difference
       v-for="key in keysOfChangedFields"
-      v-html="difference(key)"
+      :label="key"
+      :original-value="originalSecret[key]"
+      :current-value="currentSecret[key]"
     >
-    </div>
+    </difference>
   </div>
 
   <div class="e-dialog__footer">

diff --git a/src/renderer/components/save-confirmation-dialog/save-confirmation-dialog.js b/src/renderer/components/save-confirmation-dialog/save-confirmation-dialog.js
@@ -1,10 +1,10 @@
-import { difference, intersection, isNil, keys } from 'lodash';
-import { createPatch } from 'diff';
-import * as Diff2Html from 'diff2html';
+import { difference, intersection, keys } from 'lodash';
+import Difference from './difference/difference';
 
 export default {
   name: 'save-confirmation-dialog',
   template: require('./save-confirmation-dialog.html'),
+  components: { Difference },
   props: {
     originalSecret: Object,
     currentSecret: Object
@@ -27,33 +27,6 @@ export default {
     }
   },
   methods: {
-    difference(key) {
-      const changeType = !isNil(this.originalSecret[key]) && !isNil(this.currentSecret[key])
-        ? 'CHANGED'
-        : isNil(this.originalSecret[key])
-          ? 'ADDED'
-          : 'REMOVED';
-
-      const patch = createPatch(key, this.originalSecret[key] || '', this.currentSecret[key] || '');
-      const diffJson = Diff2Html.parse(patch);
-      return Diff2Html.html(diffJson, {
-        drawFileList: false,
-        matching: 'lines',
-        outputFormat: 'side-by-side',
-        rawTemplates: {
-          'generic-file-path':
-            `<span>${key}</span><span class="e-padding-left-l text-color-gray-400">${changeType}</span>`,
-          'generic-empty-diff':
-            `<tr>
-              <td class="{{CSSLineClass.INFO}}">
-                <div class="{{contentClass}} {{CSSLineClass.INFO}}">
-                  Value is empty
-                </div>
-              </td>
-            </tr>`
-        }
-      });
-    },
     open() {
       this.opened = true;
     },