feat(Commit): Display diff between 2 commits

index.html

@@ -87,6 +87,19 @@ <h1 class="panel__title">Commits</h1>
 				</div>
 				<div class="panel__footer"></div>
 			</div>
+			<div class="panel" id="diffs-panel">
+				<div class="panel__head">
+					<h1 class="panel__title">Files changed</h1>
+					<div class="panel__actions" id="diffs-filters">
+						<div class="panel__actions-list" id="diffs-filters"></div>
+						<button class="close-panel">Close</button>
+					</div>
+				</div>
+				<div class="panel__content">
+					<div id="diffs-content"></div>
+				</div>
+				<div class="panel__footer"></div>
+			</div>
 		</div>
 		<script type="module" src="scripts/app.js"></script>
 </body>

package.json

@@ -26,6 +26,7 @@
     "dexie": "^2.0.4",
     "dexie-export-import": "^1.0.0-rc.1",
     "dexie-relationships": "^1.2.11",
+    "diff2html": "^3.0.2",
     "downloadjs": "^1.4.7",
     "highcharts": "^8.0.0",
     "javascript-time-ago": "^2.0.6",
@@ -43,6 +44,7 @@
       "dexie",
       "dexie-export-import",
       "dexie-relationships",
+      "diff2html/bundles/js/diff2html.min.js",
       "downloadjs",
       "highcharts",
       "javascript-time-ago",

scripts/projects.js

@@ -1,4 +1,5 @@
 import { html, render } from '../web_modules/lit-html.js';
+import Diff2Html from '../web_modules/diff2html/bundles/js/diff2html.min.js';
 import Utilities from './utilities.js';
 import routes from './routes.js';
 import Groups from './groups.js';
@@ -63,6 +64,10 @@ class Projects extends Base {
 		return Utilities.req(`${routes.projects}/${projectId}/${routes.repository}/${routes.commits}`, searchParams);
 	}
 
+	loadCommit(projectId, commitId) {
+		return Utilities.req(`${routes.projects}/${projectId}/${routes.repository}/${routes.commits}/${commitId}/diff`);
+	}
+
 	drawListing(projects) {
 		const projectsTemplates = [];
 		for (const project of projects) {
@@ -239,6 +244,9 @@ class Projects extends Base {
 						<td>${new Date(commit.authored_date).toTimeString().split(' ')[0]}</td>
 						<td class="additions">+${commit.stats.additions}</td>
 						<td class="deletions">-${commit.stats.deletions}</td>
+						<td>
+							<button @click=${() => {this.getCommitDetails(projectId, commit.short_id);}}>Details</button>
+						</td>
 					</tr>
 				`);
 			}
@@ -252,6 +260,7 @@ class Projects extends Base {
 					<th rowspan="2">Author</th>
 					<th rowspan="2">Time</th>
 					<th colspan="2">Statistics</th>
+						<th rowspan="2">Actions</th>
 				</tr>
 				<tr>
 					<th>Additions</th>
@@ -266,6 +275,24 @@ class Projects extends Base {
 	render(nodes, document.querySelector('#commits-content'));
 	}
 
+	async getCommitDetails(projectId, commitId) {
+		const commit = await this.loadCommit(projectId, commitId);
+		this.constructDiffString(commit);
+	}
+
+	constructDiffString(commit) {
+		const diffs = [];
+		commit.forEach(change => {
+			diffs.push(`diff --git a/${change.old_path} b/${change.new_path}`);
+			if (change.new_file) {
+				diffs.push(`new file mode ${change.b_mode}`);
+			}
+			diffs.push(change.diff);
+		});
+		document.querySelector('#diffs-panel').style.display = 'flex';
+		document.querySelector('#diffs-content').innerHTML = Diff2Html.html(diffs.join('\n'));
+	}
+
 	checkData() {
 		db.projects.with({ group: 'group_id'}).then(projects => {
 			this.drawListing(projects);

styles/components/commit-details.css

@@ -0,0 +1,15 @@
+.d2h-code-linenumber {
+	position: static;
+	display: table-cell;
+	vertical-align: top;
+}
+
+.d2h-diff-table {
+	table-layout: fixed;
+}
+
+.d2h-file-list-title {
+	font-size: 14px;
+	margin: 10px 0 0 10px;
+	display: block;
+}

styles/components/layout.css

@@ -33,3 +33,10 @@
 	display: none;
 	background: #fff;
 }
+
+#diffs-panel {
+	grid-area: members-start / members-start / data-end / data-end;
+	z-index: 1;
+	display: none;
+	background: #fff;
+}

styles/main.css

@@ -7,7 +7,11 @@
 @import "./objects/listings.css";
 @import "./objects/panels.css";
 
+/* Vendor */
+@import "./vendor/diff2html.css";
+
 /* Components */
 @import "./components/layout.css";
 @import "./components/app-header.css";
 @import "./components/commits-list.css";
+@import "./components/commit-details.css";

web_modules/common/_commonjsHelpers-7dcf7119.js

@@ -0,0 +1,15 @@
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function unwrapExports (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+function createCommonjsModule(fn, module) {
+	return module = { exports: {} }, fn(module, module.exports), module.exports;
+}
+
+function getCjsExportFromNamespace (n) {
+	return n && n['default'] || n;
+}
+
+export { commonjsGlobal as a, createCommonjsModule as c, getCjsExportFromNamespace as g, unwrapExports as u };

web_modules/dexie-relationships.js

@@ -1,5 +1,5 @@
 import require$$0 from './dexie.js';
-import { c as createCommonjsModule, a as commonjsGlobal } from './common/_commonjsHelpers-28d57e96.js';
+import { c as createCommonjsModule, a as commonjsGlobal } from './common/_commonjsHelpers-7dcf7119.js';
 
 var dist = createCommonjsModule(function (module, exports) {
 (function (global, factory) {