From 49367cc3a6510c71ea318443817b5eb4f86e4290 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Felix=20Strau=C3=9F?= <flixstrauss@gmail.com>
Date: Sun, 31 Mar 2024 15:57:57 +0200
Subject: [PATCH] Implemented simple DiffViewer with example.

---
 .../Components/Layout/NavMenu.razor           |   1 +
 .../Components/Pages/DiffViewerExample.razor  |  31 +++++
 .../Components/Pages/Home.razor               |   2 +-
 .../DiffViewer/DiffViewer.razor               | 111 +++++++++++++-----
 4 files changed, 112 insertions(+), 33 deletions(-)
 create mode 100644 samples/DotNetElements.CrudExample/Components/Pages/DiffViewerExample.razor

diff --git a/samples/DotNetElements.CrudExample/Components/Layout/NavMenu.razor b/samples/DotNetElements.CrudExample/Components/Layout/NavMenu.razor
index c948f8e..168cdc8 100644
--- a/samples/DotNetElements.CrudExample/Components/Layout/NavMenu.razor
+++ b/samples/DotNetElements.CrudExample/Components/Layout/NavMenu.razor
@@ -1,6 +1,7 @@
 <MudNavMenu>
 	<MudNavLink Icon="@Icons.Material.Outlined.Home" Href="/" Match="NavLinkMatch.All">Home</MudNavLink>
 	<MudNavLink Icon="@Icons.Material.Outlined.TableView" Href="/crud" Match="NavLinkMatch.Prefix">CRUD</MudNavLink>
+	<MudNavLink Icon="@Icons.Material.Outlined.CompareArrows" Href="/diffViewer" Match="NavLinkMatch.Prefix">Diff Viewer</MudNavLink>
 	@* <MudNavLink Icon="@Icons.Material.Outlined.TableView" Href="/genericCrud" Match="NavLinkMatch.Prefix">Generic CRUD</MudNavLink> *@
 </MudNavMenu>
 
diff --git a/samples/DotNetElements.CrudExample/Components/Pages/DiffViewerExample.razor b/samples/DotNetElements.CrudExample/Components/Pages/DiffViewerExample.razor
new file mode 100644
index 0000000..b02ee77
--- /dev/null
+++ b/samples/DotNetElements.CrudExample/Components/Pages/DiffViewerExample.razor
@@ -0,0 +1,31 @@
+@page "/diffViewer"
+@using DotNetElements.Core.StringDiff
+@using DotNetElements.Web.Blazor.DiffViewer
+
+<PageTitle>Diff viewer example</PageTitle>
+
+<h1>Diff viewer example</h1>
+
+<MudTextField AutoGrow="true" Lines="5" MaxLines="10" @bind-Value="textA" Variant="Variant.Outlined" Label="Text A" />
+<MudTextField AutoGrow="true" Lines="5" MaxLines="10" @bind-Value="textB" Variant="Variant.Outlined" Label="Text B" Class="mt-4" />
+<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="OnShowDiff" Class="mt-4">Show Diff</MudButton>
+
+<MudText Typo="Typo.h5" Class="my-4">Diff Result</MudText>
+<DiffViewer Diff="diff" />
+
+@code
+{
+    private SideBySideDiffModel? diff;
+
+    private string? textA;
+    private string? textB;
+
+    private void OnShowDiff()
+    {
+        if (string.IsNullOrWhiteSpace(textA) || string.IsNullOrWhiteSpace(textB))
+            return;
+
+        SideBySideDiffBuilder diffBuilder = new();
+        diff = diffBuilder.Diff(textA, textB);
+    }
+}
diff --git a/samples/DotNetElements.CrudExample/Components/Pages/Home.razor b/samples/DotNetElements.CrudExample/Components/Pages/Home.razor
index 9001e0b..dfcdf75 100644
--- a/samples/DotNetElements.CrudExample/Components/Pages/Home.razor
+++ b/samples/DotNetElements.CrudExample/Components/Pages/Home.razor
@@ -4,4 +4,4 @@
 
 <h1>Hello, world!</h1>
 
-Welcome to your new app.
+Welcome to your new app.
\ No newline at end of file
diff --git a/src/DotNetElements.Web.Blazor/DiffViewer/DiffViewer.razor b/src/DotNetElements.Web.Blazor/DiffViewer/DiffViewer.razor
index 4ad9e7f..508ea42 100644
--- a/src/DotNetElements.Web.Blazor/DiffViewer/DiffViewer.razor
+++ b/src/DotNetElements.Web.Blazor/DiffViewer/DiffViewer.razor
@@ -1,45 +1,92 @@
 @using DotNetElements.Core.StringDiff
 
-@if (Diff?.HasDifferences is true)
+@if (Diff?.OldText.HasDifferences is true || Diff?.NewText.HasDifferences is true)
 {
-    <table cellpadding="0" cellspacing="0">
+	<table cellpadding="0" cellspacing="0">
 
-        @foreach (DiffPiece diffLine in Diff.Lines)
-        {
-            <tr>
-                <td>
-                    @(diffLine.Position?.ToString() ?? " ");
-                </td>
-                <td>
-                    <span style="@GetDiffLineStyle(diffLine)">
-                        @diffLine.Text
-                    </span>
-                </td>
-            </tr>
-        }
-    </table>
+		@foreach ((DiffPiece oldPiece, DiffPiece newPiece) in Diff.OldText.Lines.Zip(Diff.NewText.Lines))
+		{
+			<tr style="@(oldPiece.Type is ChangeType.Unchanged ? "" : "background-color: #FDF2D0;")">
+				<td>
+					@(oldPiece.Position?.ToString() ?? newPiece.Position?.ToString() ?? "");
+				</td>
+				<td style="padding-left: 16px;">
+					@if (oldPiece.Type is ChangeType.Unchanged)
+					{
+						<span style="@GetDiffStyle(oldPiece)">
+							@oldPiece.Text
+						</span>
+					}
+					else
+					{
+						@if (oldPiece.SubPieces.Count > 0)
+						{
+							@foreach (DiffPiece oldSubPiece in oldPiece.SubPieces)
+							{
+								<span style="@GetDiffStyle(oldSubPiece)">
+									@oldSubPiece.Text
+								</span>
+							}
+						}
+						else
+						{
+							<span style="@GetDiffStyle(oldPiece)">
+								@oldPiece.Text
+							</span>
+						}
+					}
+				</td>
+			</tr>
+
+			@if (newPiece.Type is not ChangeType.Unchanged)
+			{
+				<tr style="background-color: #DDEEDD">
+					<td>
+						@(newPiece.Position?.ToString() ?? "");
+					</td>
+					<td style="padding-left: 16px;">
+						@if (newPiece.SubPieces.Count > 0)
+						{
+							@foreach (DiffPiece newSubPiece in newPiece.SubPieces)
+							{
+								<span style="@GetDiffStyle(newSubPiece)">
+									@newSubPiece.Text
+								</span>
+							}
+						}
+						else
+						{
+							<span style="@GetDiffStyle(newPiece)">
+								@newPiece.Text
+							</span>
+						}
+					</td>
+				</tr>
+			}
+		}
+	</table>
 }
 else
 {
-    <span>No differences found</span>
+	<span>No differences found</span>
 }
 
 @code
 {
-    [Parameter, EditorRequired]
-    public InlineDiffModel Diff { get; set; } = default!;
+	[Parameter, EditorRequired]
+	public SideBySideDiffModel Diff { get; set; } = default!;
 
-    // todo tmp
-    private string GetDiffLineStyle(DiffPiece diffLine)
-    {
-        return diffLine.Type switch
-        {
-            ChangeType.Unchanged => "",
-            ChangeType.Deleted => "background-color: red;",
-            ChangeType.Inserted => "background-color: green;",
-            ChangeType.Imaginary => "background-color: gray;",
-            ChangeType.Modified => "background-color: yellow;",
-            _ => throw new NotImplementedException(nameof(diffLine.Type)),
-        };
-    }
+	// todo tmp
+	private string GetDiffStyle(DiffPiece diffLine)
+	{
+		return diffLine.Type switch
+		{
+			ChangeType.Unchanged => "",
+			ChangeType.Deleted => "background-color: #FFB6BA; border-radius: 10%; line-height: 1.5rem; padding: 1px 2px;",
+			ChangeType.Inserted => "background-color: #97F295; border-radius: 10%; line-height: 1.5rem; padding: 1px 2px;",
+			ChangeType.Imaginary => "background-color: #F8FAFD; border-radius: 10%; line-height: 1.5rem; padding: 1px 2px;",
+			ChangeType.Modified => "background-color: #FFB6BA; border-radius: 10%; line-height: 1.5rem; padding: 1px 2px;",
+			_ => throw new NotImplementedException(nameof(diffLine.Type)),
+		};
+	}
 }