feat: add version changed line comparaison

package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "changed-lines": "^1.0.0",
     "core-js": "^3.6.5",
     "register-service-worker": "^1.7.1",
     "tiptap-vuetify": "2.24.0",

src/components/Preview.vue

@@ -20,7 +20,9 @@
         >
           <v-icon>mdi-close</v-icon>
         </v-btn>
-        <v-toolbar-title v-text="dialogTitle" />
+        <v-toolbar-title
+          v-if="!$vuetify.breakpoint.mobile"
+          v-text="dialogTitle" />
         <v-spacer />
         <v-toolbar-items>
           <slot />
@@ -127,5 +129,8 @@ export default {
   .frame-container {
     padding: 0 !important;
   }
+  .preview-content {
+    padding: 0 !important;
+  }
 }
 </style>

src/views/Admin/OrganizationList.vue

@@ -318,6 +318,10 @@
       :dialogTitle="approveModalTitle"
       @close="approveModal = false"
     >
+      <v-btn outlined text dark class="warning" @click="openDiffModal()">
+        <v-icon :left="!$vuetify.breakpoint.mobile">compare</v-icon>
+        <span v-if="!$vuetify.breakpoint.mobile">Comparer</span>
+      </v-btn>
       <v-btn outlined text dark class="error" @click="rejectionModal = true">
         <v-icon :left="!$vuetify.breakpoint.mobile">rate_review</v-icon>
         <span v-if="!$vuetify.breakpoint.mobile">Refuser</span>
@@ -327,6 +331,28 @@
         <span v-if="!$vuetify.breakpoint.mobile">Publier</span>
       </v-btn>
     </Preview>
+    <div class="diff-dialog">
+      <v-dialog max-width="900px" v-model="diffModal">
+        <v-card>
+          <v-card-title>Comparaison des deux versions</v-card-title>
+          <v-card-text class="diff-content">
+            <div
+              class="diff">
+              <div
+                v-for="(line, index) in diffText"
+                :key="index"
+                class="line"
+                :class="line.style"
+                v-text="line.text" />
+            </div>
+          </v-card-text>
+          <v-card-actions>
+            <v-spacer />
+            <v-btn text @click="diffModal = false">Fermer</v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+    </div>
     <v-dialog max-width="500px" v-model="rejectionModal">
       <v-card>
         <v-card-title>Indiquez la raison de ce refus</v-card-title>
@@ -377,6 +403,8 @@
 <script>
 import Preview from '../../components/Preview'
 
+import diff from 'changed-lines'
+
 export default {
   components: {
     Preview
@@ -427,7 +455,9 @@ export default {
       importModal: false,
       importData: '',
       importFile: null,
-      importLoading: false
+      importLoading: false,
+      diffModal: false,
+      diffText: ''
     }
   },
 
@@ -645,6 +675,39 @@ export default {
       })
     },
 
+    openDiffModal () {
+      this.diffModal = true
+      this.diffText = diff(
+        JSON.stringify(
+          this.toApproveItem.publishedVersion, '', 2
+        ),
+        JSON.stringify(
+          this.toApproveItem.proposedVersion, '', 2
+        ),
+        {
+          green: (v) => '<GREEN>' + v + '</GREEN>',
+          red: (v) => '<RED>' + v + '</RED>'
+        }
+      ).map(l => {
+        let style = ''
+        if (l.indexOf('<GREEN>') !== -1) {
+          l = l.replace('<GREEN>', '')
+          l = l.replace('</GREEN>', '')
+          style = 'add'
+        }
+        if (l.indexOf('<RED>') !== -1) {
+          l = l.replace('<RED>', '')
+          l = l.replace('</RED>', '')
+          style = 'remove'
+        }
+        return { style, text: l }
+      }).filter(l => l.text.indexOf('"_id"') === -1)
+      this.diffText[0] = {
+        style: this.diffText[0].style,
+        text: this.diffText[0].text.replace('  ', '')
+      }
+    },
+
     getValidationColor (state) {
       switch (state) {
         case 'unaware':
@@ -709,3 +772,26 @@ export default {
   }
 }
 </script>
+
+<style>
+
+.diff-dialog .v-dialog {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.diff {
+  white-space: pre-wrap;
+  font-family: monospace;
+  color: rgba(0, 0, 0, 0.8);
+  background: rgba(0, 0, 0, 0.01);
+}
+/* .diff .add, .diff .remove {
+} */
+.diff .add {
+  background-color: #e6ffed;
+}
+.diff .remove {
+  background-color: #ffeef0;
+}
+
+</style>