-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Implemented simple DiffViewer with example.
- Loading branch information
1 parent
2072236
commit 49367cc
Showing
4 changed files
with
112 additions
and
33 deletions.
There are no files selected for viewing
1 change: 1 addition & 0 deletions
1
samples/DotNetElements.CrudExample/Components/Layout/NavMenu.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
|
|
31 changes: 31 additions & 0 deletions
31
samples/DotNetElements.CrudExample/Components/Pages/DiffViewerExample.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -4,4 +4,4 @@ | |
|
|
||
| <h1>Hello, world!</h1> | ||
|
|
||
| Welcome to your new app. | ||
| Welcome to your new app. | ||
111 changes: 79 additions & 32 deletions
111
src/DotNetElements.Web.Blazor/DiffViewer/DiffViewer.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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)), | ||
| }; | ||
| } | ||
| } |