From c3d0ab5f9a4ef4c961bf11e7574fb2175bc7d3a7 Mon Sep 17 00:00:00 2001
From: Gursheen Anand <gursheen@frappe.io>
Date: Fri, 18 Aug 2023 11:04:31 +0530
Subject: [PATCH] feat: add html template for comparator

---
 .../document_comparator.html                  | 74 +++++++++++++++++++
 .../document_comparator.js                    | 35 +++++++++
 2 files changed, 109 insertions(+)
 create mode 100644 frappe/core/doctype/document_comparator/document_comparator.html
 create mode 100644 frappe/core/doctype/document_comparator/document_comparator.js

diff --git a/frappe/core/doctype/document_comparator/document_comparator.html b/frappe/core/doctype/document_comparator/document_comparator.html
new file mode 100644
index 0000000000..3b4950adea
--- /dev/null
+++ b/frappe/core/doctype/document_comparator/document_comparator.html
@@ -0,0 +1,74 @@
+<div>
+
+    <div class="p-2">
+        {% if documents.length > 1 %}
+            <p>Documents to Compare : <b>{{ documents.length }}</b></p>
+        {% else %}
+            <p>Documents to Compare : <b>{{ documents.length - 1 }}</b></p>
+        {% endif %}
+    </div>
+
+    {% var field_keys = Object.keys(changed).sort(); %}
+    {% if field_keys.length > 0 %}
+    <div class="p-2">
+        <h5> Changes </h5>
+        <table class="table table-bordered">
+            <thead>
+                <th> Fields </th>
+                {% for doc in documents %}
+                    <th>{{ doc }}</th>
+                {% endfor %}
+            </thead>
+            <tbody>
+                {% for fieldname in field_keys %}
+                    <tr>
+                        <td> {{ fieldname }} </td>
+                        {% var values = changed[fieldname] %}
+
+                        {% for value in values %}
+                            <td>{{ value }}</td>
+                        {% endfor %}
+                    </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
+    {% endif %}
+
+    {% var tables  = Object.keys(row_changed).sort(); %}
+    {% if tables.length > 0 %}
+        <div class="p-2">
+            <h5> Rows Updated </h5>
+            <table class="table table-bordered">
+                <thead>
+                    <th> Fields </th>
+                    {% for doc in documents %}
+                        <th>{{ doc }}</th>
+                    {% endfor %}
+                </thead>
+                <tbody>
+                    {% for table in tables %}
+                    <tr>
+                        <tr><td><b>{{ table }}</b></td></tr>
+                        {% var row_index = row_changed[table]["index"] %}
+                        <tr><td><b>idx : {{ row_index }}</b></td></tr>
+                        {% var fields = Object.keys(row_changed[table]).sort(); %}
+                        {% for field in fields %}
+                            {% if field != "index" %}
+                                <tr>
+                                    <td>{{ field }}</td>
+                                    {% var values = row_changed[table][field] %}
+                                    {% for value in values %}
+                                        <td> {{ value }} </td>
+                                    {% endfor %}
+                                </tr>
+                            {% endfor %}
+                        {% endfor %}
+                        </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+    {% endif %}
+
+</div>
\ No newline at end of file
diff --git a/frappe/core/doctype/document_comparator/document_comparator.js b/frappe/core/doctype/document_comparator/document_comparator.js
new file mode 100644
index 0000000000..22e73a848f
--- /dev/null
+++ b/frappe/core/doctype/document_comparator/document_comparator.js
@@ -0,0 +1,35 @@
+// Copyright (c) 2023, Frappe Technologies and contributors
+// For license information, please see license.txt
+
+frappe.ui.form.on("Document Comparator", {
+	refresh(frm) {
+		frm.disable_save();
+
+		frm.set_query("doctype_name", () => {
+			return {
+				filters: {
+					track_changes: 1,
+				},
+			};
+		});
+
+		frm.page.set_primary_action("Compare", () => {
+			frm.call({
+				doc: frm.doc,
+				method: "compare_document",
+				callback: function (r) {
+					let document_names = r.message[0];
+					let changed_fields = r.message[1];
+					let render_dict = {
+						documents: document_names,
+						changed: changed_fields.changed,
+						row_changed: changed_fields.row_changed,
+					};
+					$(frappe.render_template("document_comparator", render_dict)).appendTo(
+						frm.fields_dict.version_table.$wrapper.empty()
+					);
+				},
+			});
+		});
+	},
+});